From b2045352ac5092eec03d203a3e923eabd993f37f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:46:32 +0200
Subject: [PATCH 01/26] =?UTF-8?q?=F0=9F=92=84=20Adding*=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20datatable=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/datatable.css | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 src/assets/style/primevue-style/datatable.css

diff --git a/src/assets/style/primevue-style/datatable.css b/src/assets/style/primevue-style/datatable.css
new file mode 100644
index 0000000..7a250da
--- /dev/null
+++ b/src/assets/style/primevue-style/datatable.css
@@ -0,0 +1,109 @@
+:root{
+  --p-datatable-paginator-bottom-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-bottom-border-width: 0 0 1px 0;
+  --p-datatable-paginator-top-border-color: var(--p-datatable-border-color);
+  --p-datatable-paginator-top-border-width: 0 0 1px 0;
+  --p-datatable-filter-inline-gap: 0.5rem;
+  --p-datatable-filter-constraint-focus-background: var(--p-list-option-focus-background);
+  --p-datatable-filter-constraint-selected-background: var(--p-list-option-selected-background);
+  --p-datatable-filter-constraint-selected-focus-background: var(--p-list-option-selected-focus-background);
+  --p-datatable-filter-constraint-color: var(--p-list-option-color);
+  --p-datatable-filter-constraint-focus-color: var(--p-list-option-focus-color);
+  --p-datatable-filter-constraint-selected-color: var(--p-list-option-selected-color);
+  --p-datatable-filter-constraint-selected-focus-color: var(--p-list-option-selected-focus-color);
+  --p-datatable-filter-constraint-padding: var(--p-list-option-padding);
+  --p-datatable-filter-constraint-border-radius: var(--p-list-option-border-radius);
+  --p-datatable-filter-constraint-separator-border-color: var(--p-content-border-color);
+  --p-datatable-filter-constraint-list-padding: var(--p-list-padding);
+  --p-datatable-filter-constraint-list-gap: var(--p-list-gap);
+  --p-datatable-filter-rule-border-color: var(--p-content-border-color);
+  --p-datatable-filter-overlay-popover-background: var(--p-overlay-popover-background);
+  --p-datatable-filter-overlay-popover-border-color: var(--p-overlay-popover-border-color);
+  --p-datatable-filter-overlay-popover-border-radius: var(--p-overlay-popover-border-radius);
+  --p-datatable-filter-overlay-popover-color: var(--p-overlay-popover-color);
+  --p-datatable-filter-overlay-popover-shadow: var(--p-overlay-popover-shadow);
+  --p-datatable-filter-overlay-popover-padding: var(--p-overlay-popover-padding);
+  --p-datatable-filter-overlay-popover-gap: 0.5rem;
+  --p-datatable-filter-overlay-select-background: var(--p-overlay-select-background);
+  --p-datatable-filter-overlay-select-border-color: var(--p-overlay-select-border-color);
+  --p-datatable-filter-overlay-select-border-radius: var(--p-overlay-select-border-radius);
+  --p-datatable-filter-overlay-select-color: var(--p-overlay-select-color);
+  --p-datatable-filter-overlay-select-shadow: var(--p-overlay-select-shadow);
+  --p-datatable-row-toggle-button-hover-background: var(--datatable-hover-background);
+  --p-datatable-row-toggle-button-selected-hover-background: var(--datatable-background);
+  --p-datatable-row-toggle-button-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-hover-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-selected-hover-color: var(--datatable-row-color);
+  --p-datatable-row-toggle-button-size: 1.75rem;
+  --p-datatable-row-toggle-button-border-radius: 0px;
+  --p-datatable-row-toggle-button-focus-ring-width: var(--focus-width);
+  --p-datatable-row-toggle-button-focus-ring-style: var(--focus-style);
+  --p-datatable-row-toggle-button-focus-ring-color: var(--focus-color);
+  --p-datatable-row-toggle-button-focus-ring-offset: var(--focus-offset);
+  /* --p-datatable-row-toggle-button-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-loading-icon-size: 2rem;
+  --p-datatable-sort-icon-color: var(--datatable-row-color);
+  --p-datatable-sort-icon-hover-color: var(--datatable-row-color);
+  --p-datatable-sort-icon-size: 0.875rem;
+  --p-datatable-resize-indicator-width: 1px;
+  --p-datatable-resize-indicator-color: var(--p-primary-color);
+  --p-datatable-column-resizer-width: 0.5rem;
+  --p-datatable-drop-point-color: var(--p-primary-color);
+  --p-datatable-footer-background: var(--datatable-background);
+  --p-datatable-footer-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-color: var(--p-content-color);
+  --p-datatable-footer-border-width: 0 0 1px 0;
+  --p-datatable-footer-padding: 1rem;
+  --p-datatable-footer-lg-padding: 1.25rem;
+  --p-datatable-footer-sm-padding: 0.5rem;
+  --p-datatable-column-footer-font-weight: 600;
+  --p-datatable-footer-cell-background: var(--datatable-background);
+  --p-datatable-footer-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-footer-cell-color: var(--p-content-color);
+  --p-datatable-footer-cell-padding: 1rem;
+  --p-datatable-footer-cell-lg-padding: 1.25rem;
+  --p-datatable-footer-cell-sm-padding: 0.5rem;
+  --p-datatable-body-cell-border-color: var(--p-datatable-border-color);
+  --p-datatable-body-cell-padding: 1rem;
+  --p-datatable-body-cell-lg-padding: 1.25rem;
+  --p-datatable-body-cell-sm-padding: 0.5rem;
+  --p-datatable-row-background: var(--datatable-alt-background);
+  --p-datatable-row-hover-background: var(--datatable-hover-background);
+  --p-datatable-row-selected-background: var(--datatable-active-background);
+  --p-datatable-row-color: var(--datatable-row-color);
+  --p-datatable-row-hover-color: var(--datatable-row-color);
+  --p-datatable-row-selected-color: var(--datatable-row-color);
+  --p-datatable-row-focus-ring-width: var(--focus-width);
+  --p-datatable-row-focus-ring-style: var(--focus-style);
+  --p-datatable-row-focus-ring-color: var(--focus-color);
+  --p-datatable-row-focus-ring-offset: -1px;
+  /* --p-datatable-row-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-column-title-font-weight: var(--text-body-SM-detail-text-Bold-weight);
+  --p-datatable-header-cell-background: var(--datatable-background);
+  --p-datatable-header-cell-hover-background: var(--datatable-hover-background);
+  --p-datatable-header-cell-selected-background: var(--datatable-active-background);
+  --p-datatable-header-cell-border-color: var(--border-plain-grey);
+  --p-datatable-header-cell-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-hover-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-selected-color: var(--datatable-header-cell-color);
+  --p-datatable-header-cell-gap: 0.5rem;
+  --p-datatable-header-cell-padding: 1rem;
+  --p-datatable-header-cell-lg-padding: 1.25rem;
+  --p-datatable-header-cell-sm-padding: 0.5rem;
+  --p-datatable-header-cell-focus-ring-width: var(--focus-width);
+  --p-datatable-header-cell-focus-ring-style: var(--focus-style);
+  --p-datatable-header-cell-focus-ring-color: var(--focus-color);
+  --p-datatable-header-cell-focus-ring-offset: -1px;
+  /* --p-datatable-header-cell-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-datatable-header-background: var(--datatable-background);
+  --p-datatable-header-border-color: var(--border-default-grey);
+  --p-datatable-header-color: var(--datatable-header-cell-color);
+  --p-datatable-header-border-width: 0 0 1px 0;
+  --p-datatable-header-padding: 1rem;
+  --p-datatable-header-lg-padding: 1.25rem;
+  --p-datatable-header-sm-padding: 0.5rem;
+  /* --p-datatable-transition-duration: var(--p-transition-duration); */
+  --p-datatable-body-cell-selected-border-color: var(--datatable-active-background);
+  --p-datatable-row-striped-background: var(--datatable-background);
+  --p-datatable-border-color: var(--p-content-border-color);
+}

From 825b0aaeab17f8829fc704ce3fcb5e9b1780d1e7 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:48:04 +0200
Subject: [PATCH 02/26] =?UTF-8?q?=F0=9F=92=84=20Adding*=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20paginator=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/paginator.css | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/assets/style/primevue-style/paginator.css

diff --git a/src/assets/style/primevue-style/paginator.css b/src/assets/style/primevue-style/paginator.css
new file mode 100644
index 0000000..fdd0012
--- /dev/null
+++ b/src/assets/style/primevue-style/paginator.css
@@ -0,0 +1,24 @@
+:root{
+  --p-paginator-jump-to-page-input-max-width: 2.5rem;
+  --p-paginator-current-page-report-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-background: transparent;
+  --p-paginator-nav-button-hover-background: var(--background-transparent-hover);
+  --p-paginator-nav-button-selected-background: var(--background-action-high-blue-france);
+  --p-paginator-nav-button-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-hover-color: var(--text-action-high-grey);
+  --p-paginator-nav-button-selected-color: var(--text-inverted-blue-france);
+  --p-paginator-nav-button-width: 2rem;
+  --p-paginator-nav-button-height: 2rem;
+  --p-paginator-nav-button-border-radius: 0px;
+  --p-paginator-nav-button-focus-ring-width: var(--focus-width);
+  --p-paginator-nav-button-focus-ring-style: var(--focus-style);
+  --p-paginator-nav-button-focus-ring-color: var(--focus-color);
+  --p-paginator-nav-button-focus-ring-offset: var(--focus-offset);
+  /* --p-paginator-nav-button-focus-ring-shadow: var(--p-focus-ring-shadow); */
+  --p-paginator-padding: 0px;
+  --p-paginator-gap: 1rem;
+  --p-paginator-border-radius: 0px;
+  --p-paginator-background: transparent;
+  --p-paginator-color: var(--text-action-high-grey);
+  --p-paginator-transition-duration: var(--transition-duration);
+}

From 94611cef9439d601793d45b744dedbfb3fac0e3e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 11:48:47 +0200
Subject: [PATCH 03/26] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 9b3a74c..2759cde 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -18,3 +18,5 @@
 @import './primevue-style/toast.css';
 @import './primevue-style/dialog.css';
 @import './primevue-style/confirmdialog.css';
+@import './primevue-style/datatable.css';
+@import './primevue-style/paginator.css';

From 43ea5c5fdda2d267231700f3a86d553bb4ee5b9e Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 16:22:49 +0200
Subject: [PATCH 04/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Column=20component?=
 =?UTF-8?q?=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VColumn.vue | 121 +++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/table/VColumn.vue

diff --git a/src/components/table/VColumn.vue b/src/components/table/VColumn.vue
new file mode 100644
index 0000000..71068c2
--- /dev/null
+++ b/src/components/table/VColumn.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import Column from 'primevue/column';
+import type { ColumnProps, ColumnSlots } from 'primevue/column';
+import { computed } from 'vue';
+
+export type IVColumn = Partial<Omit<ColumnProps , 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>;
+
+const props = withDefaults(defineProps<IVColumn>(), {
+  columnKey: undefined,
+  field: undefined,
+  sortField: undefined,
+  filterField: undefined,
+  dataType: undefined,
+  sortable: false,
+  header: undefined,
+  footer: undefined,
+  showFilterMenu: true,
+  showFilterOperator: true,
+  showClearButton: false,
+  showApplyButton: true,
+  showFilterMatchModes: true,
+  showAddButton: true,
+  filterMatchModeOptions: undefined,
+  maxConstraints: 2,
+  excludeGlobalFilter: false,
+  selectionMode: undefined,
+  expander: false,
+  colspan: undefined,
+  rowspan: undefined,
+  rowReorder: false,
+  rowReorderIcon: undefined,
+  reorderableColumn: false,
+  rowEditor: false,
+  frozen: false,
+  alignFrozen: 'left',
+  exportable: false,
+  exportHeader: undefined,
+  exportFooter: undefined,
+  filterMatchMode: undefined,
+  hidden: false,
+})
+
+const slots = defineSlots<ColumnSlots>();
+
+const columnSlotKeys = [
+  'body',
+  'node',
+  'header',
+  'footer',
+  'editor',
+  'filter',
+  'filterheader',
+  'filterfooter',
+  'filterclear',
+  'filterapply',
+  'loading',
+  'rowtoggleicon',
+  'rowcheckboxicon',
+  'roweditoriniticon',
+  'roweditorsaveicon',
+  'roweditorcancelicon',
+  'filtericon',
+  'filterclearicon',
+  'filterremoveicon',
+  'filteraddicon',
+  'sorticon',
+  'headercheckboxicon',
+  'rowreordericon',
+  'nodetoggleicon'
+] as const;
+
+const availableSlots = computed(() =>
+  columnSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
+);
+
+</script>
+
+<template>
+  <Column
+    :column-key="props.columnKey"
+    :field="props.field"
+    :sort-field="props.sortField"
+    :filter-field="props.filterField"
+    :data-type="props.dataType"
+    :sortable="props.sortable"
+    :header="props.header"
+    :footer="props.footer"
+    :show-filter-menu="props.showFilterMenu"
+    :show-filter-operator="props.showFilterOperator"
+    :show-clear-button="props.showClearButton"
+    :show-apply-button="props.showApplyButton"
+    :show-filter-match-modes="props.showFilterMatchModes"
+    :show-add-button="props.showAddButton"
+    :filter-match-mode-options="props.filterMatchModeOptions"
+    :max-constraints="props.maxConstraints"
+    :exclude-global-filter="props.excludeGlobalFilter"
+    :selection-mode="props.selectionMode"
+    :expander="props.expander"
+    :colspan="props.colspan"
+    :rowspan="props.rowspan"
+    :row-reorder="props.rowReorder"
+    :row-reorder-icon="props.rowReorderIcon"
+    :reorderable-column="props.reorderableColumn"
+    :row-editor="props.rowEditor"
+    :frozen="props.frozen"
+    :align-frozen="props.alignFrozen"
+    :exportable="props.exportable"
+    :export-header="props.exportHeader"
+    :export-footer="props.exportFooter"
+    :filter-match-mode="props.filterMatchMode"
+    :hidden="props.hidden"
+  >
+    <template
+    v-for="([name]) in availableSlots"
+    :key="name"
+    v-slot:[name]="slotProps"
+  >
+    <slot :name="name" v-bind="slotProps" />
+  </template>
+  </Column>
+</template>

From 0c8540511eb53dc829a365ae8ea805421821ed9b Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 16:32:42 +0200
Subject: [PATCH 05/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Column=20group=20c?=
 =?UTF-8?q?omponent=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VColumnGroup.vue | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/table/VColumnGroup.vue

diff --git a/src/components/table/VColumnGroup.vue b/src/components/table/VColumnGroup.vue
new file mode 100644
index 0000000..4d60a2e
--- /dev/null
+++ b/src/components/table/VColumnGroup.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ColumnGroup from 'primevue/columngroup';
+import type { ColumnGroupProps } from 'primevue/columngroup';
+
+export type IVColumnGroup = Partial<Pick<ColumnGroupProps, 'type'>>
+
+const props = withDefaults(defineProps<IVColumnGroup>(), {
+  type: undefined
+})
+</script>
+
+<template>
+  <ColumnGroup :type="props.type"/>
+</template>

From 5612d5d6f4af81408fb954782c7033c95f21971a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 16:34:39 +0200
Subject: [PATCH 06/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Column=20row=20com?=
 =?UTF-8?q?ponent=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VRow.vue | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/components/table/VRow.vue

diff --git a/src/components/table/VRow.vue b/src/components/table/VRow.vue
new file mode 100644
index 0000000..92715ce
--- /dev/null
+++ b/src/components/table/VRow.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import Row from 'primevue/row';
+</script>
+
+<template>
+  <Row/>
+</template>

From a4bbfeb9ad0dbece4175ebe5f7bcf18926f29101 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 16:38:17 +0200
Subject: [PATCH 07/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Column=20row=20com?=
 =?UTF-8?q?ponent=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/table/VRow.vue b/src/components/table/VRow.vue
index 92715ce..f9b581d 100644
--- a/src/components/table/VRow.vue
+++ b/src/components/table/VRow.vue
@@ -3,5 +3,5 @@ import Row from 'primevue/row';
 </script>
 
 <template>
-  <Row/>
+  <Row role="row"/>
 </template>

From 3d6b27c13c7de28d595d96d7dbf99dcc4eb87d71 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 17:03:11 +0200
Subject: [PATCH 08/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Data=20table=20com?=
 =?UTF-8?q?ponent=20added?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VDataTable.vue | 414 ++++++++++++++++++++++++++++
 1 file changed, 414 insertions(+)
 create mode 100644 src/components/table/VDataTable.vue

diff --git a/src/components/table/VDataTable.vue b/src/components/table/VDataTable.vue
new file mode 100644
index 0000000..5f46d8c
--- /dev/null
+++ b/src/components/table/VDataTable.vue
@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import DataTable from 'primevue/datatable';
+import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
+import { useId, ref, watch, computed } from 'vue';
+
+export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{
+  id: string
+  title: string
+}
+
+const props = withDefaults(defineProps<IVDataTable>(), {
+  id: () => useId(),
+  title: '',
+  selection: undefined,
+  paginator: false,
+  rowsPerPageOptions: undefined,
+  rows: 0,
+  value: undefined,
+  dataKey: undefined,
+  showGridlines: false,
+  stripedRows: false,
+  first: 0,
+  totalRecords: 0,
+  pageLinkSize: 5,
+  paginatorPosition: 'bottom',
+  paginatorTemplate: undefined,
+  alwaysShowPaginator:true,
+  currentPageReportTemplate: '({currentPage} de {totalPages})',
+  lazy: false,
+  loading: false,
+  sortField: undefined,
+  sortOrder: undefined,
+  nullSortOrder: 1,
+  defaultSortOrder: 1,
+  sortMode: 'single',
+  removableSort: false,
+  filters: undefined,
+  filterDisplay: undefined,
+  globalFilterFields: undefined,
+  filterLocale: undefined,
+  selectionMode: undefined,
+  compareSelectionBy: 'deepEquals',
+  metaKeySelection: false,
+  contextMenu: false,
+  contextMenuSelection: undefined,
+  selectAll: undefined,
+  rowHover: false,
+  csvSeparator: ',',
+  exportFilename: 'download',
+  exportFunction: undefined,
+  resizableColumns: false,
+  columnResizeMode: 'fit',
+  reorderableColumns: false,
+  expandedRows: undefined,
+  expandedRowIcon: undefined,
+  collapsedRowIcon: undefined,
+  rowGroupMode: undefined,
+  groupRowsBy: undefined,
+  expandableRowGroups: false,
+  expandedRowGroups: undefined,
+  stateStorage: 'session',
+  stateKey: undefined,
+  editMode: undefined,
+  editingRows: undefined,
+  rowClass: undefined,
+  rowStyle: undefined,
+  scrollable: false,
+  scrollHeight: undefined,
+  virtualScrollerOptions: undefined,
+  frozenValue: undefined,
+  breakpoint: '960px',
+  showHeaders: true,
+  highlightOnSelect: false,
+  size: undefined,
+  tableClass: undefined,
+  tableProps: undefined,
+  tableStyle: undefined,
+  filterButtonProps: undefined,
+  editButtonProps: undefined,
+  multiSortMeta: undefined,
+})
+
+const slots = defineSlots<DataTableSlots>();
+
+const dataTableSlotKeys = [
+  'header',
+  'footer',
+  'empty',
+  'groupheader',
+  'groupfooter',
+  'loading',
+  'expansion',
+  'loadingicon',
+  'reorderindicatorupicon',         // deprecated
+  'rowreorderindicatorupicon',
+  'reorderindicatordownicon',       // deprecated
+  'rowreorderindicatordownicon',
+  'rowgrouptogglericon',
+  'paginatorcontainer',
+  'paginatorstart',
+  'paginatorend',
+  'paginatorfirstpagelinkicon',
+  'paginatorprevpagelinkicon',
+  'paginatornextpagelinkicon',
+  'paginatorlastpagelinkicon',
+  'paginatorrowsperpagedropdownicon',
+  'paginatorjumptopagedropdownicon'
+] as const;
+
+const availableSlots = computed(() =>
+  dataTableSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
+);
+
+const dataTableRef = ref();
+
+defineExpose({
+  exportCSV: () => dataTableRef.value.exportCSV()
+});
+
+const emit = defineEmits([
+  'update:selection',
+  'update:rows',
+  'update:sortField',
+  'update:sortOrder',
+  'update:multiSortMeta',
+  'update:contextMenuSelection',
+  'update:expandedRows',
+  'update:expandedRowGroups',
+  'update:filters',
+  'update:editingRows',
+  'update:first',
+  'page',
+  'sort',
+  'row-select',
+  'row-unselect',
+  'filter',
+  'value-change',
+  'row-click',
+  'row-dbclick',
+  'row-contextmenu',
+  'row-select-all',
+  'row-unselect-all',
+  'select-all-change',
+  'column-resize-end',
+  'column-reorder',
+  'row-reorder',
+  'row-expand',
+  'row-collapse',
+  'rowgroup-expand',
+  'rowgroup-collapse',
+  'cell-edit-init',
+  'cell-edit-complete',
+  'cell-edit-cancel',
+  'row-edit-init',
+  'row-edit-save',
+  'row-edit-cancel',
+  'state-restore',
+  'state-save',
+]);
+
+const localSelection = ref(props.selection);
+watch(() => props.selection, (newVal) => {
+  if(localSelection.value !== newVal) {
+    localSelection.value = newVal;
+  }
+});
+watch(localSelection, (newVal) => {
+  if(props.selection !== newVal){
+    emit('update:selection', newVal);
+  }
+});
+
+const localRows = ref(props.rows);
+watch(() => props.rows, (newVal) => {
+  if(localRows.value !== newVal){
+    localRows.value = newVal;
+  }
+})
+watch(localRows, (newVal) => {
+  if(props.rows !== newVal){
+    emit('update:rows', newVal);
+  }
+});
+
+const localFirst = ref(props.first);
+watch(() => props.first, (newVal) => {
+  if(localFirst.value !== newVal){
+    localFirst.value = newVal;
+  }
+})
+watch(localFirst, (newVal) => {
+  if(props.first !== newVal){
+    emit('update:first', newVal);
+  }
+});
+
+const localSortField = ref(props.sortField);
+watch(() => props.sortField, (newVal) => {
+    if(localSortField.value !== newVal){
+      localSortField.value = newVal;
+    }
+})
+watch(localSortField, (newVal) => {
+    if(props.sortField !== newVal){
+        emit('update:sortField', newVal);
+    }
+});
+
+const localSortOrder = ref(props.sortOrder);
+watch(() => props.sortOrder, (newVal) => {
+    if(localSortOrder.value !== newVal){
+        localSortOrder.value = newVal;
+    }
+})
+watch(localSortOrder, (newVal) => {
+    if(props.sortOrder !== newVal){
+        emit('update:sortOrder', newVal);
+    }
+});
+
+const localMultiSortMeta = ref(props.multiSortMeta);
+watch(() => props.multiSortMeta, (newVal) => {
+    if(localMultiSortMeta.value !== newVal){
+        localMultiSortMeta.value = newVal;
+    }
+})
+watch(localMultiSortMeta, (newVal) => {
+    if(props.multiSortMeta !== newVal){
+        emit('update:multiSortMeta', newVal);
+    }
+});
+
+const localContextMenuSelection = ref(props.contextMenuSelection);
+watch(() => props.contextMenuSelection, (newVal) => {
+    if(localContextMenuSelection.value !== newVal){
+        localContextMenuSelection.value = newVal;
+    }
+})
+watch(localContextMenuSelection, (newVal) => {
+    if(props.contextMenuSelection){
+        emit('update:contextMenuSelection', newVal);
+    }
+});
+
+const localExpandedRows = ref(props.expandedRows);
+watch(() => props.expandedRows, (newVal) => {
+    if(localExpandedRows.value !== newVal){
+        localExpandedRows.value = newVal;
+    }
+})
+watch(localExpandedRows, (newVal) => {
+    if(props.expandedRows !== newVal){
+        emit('update:expandedRows', newVal);
+    }
+});
+
+const localExpandedRowGroups = ref(props.expandedRowGroups);
+watch(() => props.expandedRowGroups, (newVal) => {
+    if(localExpandedRowGroups.value !== newVal){
+        localExpandedRowGroups.value = newVal;
+    }
+})
+watch(localExpandedRowGroups, (newVal) => {
+    if(props.expandedRowGroups !== newVal){
+        emit('update:expandedRowGroups', newVal);
+    }
+});
+
+const localFilters = ref(props.filters);
+watch(() => props.filters, (newVal) => {
+    if(localFilters.value !== newVal){
+        localFilters.value = newVal;
+    }
+})
+watch(localFilters, (newVal) => {
+    if(props.filters !== newVal){
+        emit('update:filters', newVal);
+    }
+});
+
+const localEditingRows = ref(props.editingRows);
+watch(() => props.editingRows, (newVal) => {
+    if(localEditingRows.value = newVal){
+        localEditingRows.value = newVal;
+    }
+})
+watch(localEditingRows, (newVal) => {
+    if(props.editingRows !== newVal){
+        emit('update:editingRows', newVal);
+    }
+});
+
+</script>
+
+<template>
+  <DataTable
+    :id="`datatable-${props.id}`"
+    role="table"
+    ref="dataTableRef"
+    :value="props.value"
+    :paginator="props.paginator"
+    :rowsPerPageOptions="props.rowsPerPageOptions"
+    :data-key="props.dataKey"
+    :show-gridlines="props.showGridlines"
+    :striped-rows="props.stripedRows"
+    :total-records="props.totalRecords"
+    :page-link-size="props.pageLinkSize"
+    :paginator-position="props.paginatorPosition"
+    :paginator-template="props.paginatorTemplate"
+    :always-show-paginator="props.alwaysShowPaginator"
+    :current-page-report-template="props.currentPageReportTemplate"
+    :lazy="props.lazy"
+    :loading="props.loading"
+    :nullSortOrder="props.nullSortOrder"
+    :defaultSortOrder="props.defaultSortOrder"
+    :sortMode="props.sortMode"
+    :removableSort="props.removableSort"
+    :filterDisplay="props.filterDisplay"
+    :globalFilterFields="props.globalFilterFields"
+    :filterLocale="props.filterLocale"
+    :selectionMode="props.selectionMode"
+    :compareSelectionBy="props.compareSelectionBy"
+    :metaKeySelection="props.metaKeySelection"
+    :contextMenu="props.contextMenu"
+    :selectAll="props.selectAll"
+    :rowHover="props.rowHover"
+    :csvSeparator="props.csvSeparator"
+    :exportFilename="props.exportFilename"
+    :exportFunction="props.exportFunction"
+    :resizableColumns="props.resizableColumns"
+    :columnResizeMode="props.columnResizeMode"
+    :reorderableColumns="props.reorderableColumns"
+    :expandedRowIcon="props.expandedRowIcon"
+    :collapsedRowIcon="props.collapsedRowIcon"
+    :rowGroupMode="props.rowGroupMode"
+    :groupRowsBy="props.groupRowsBy"
+    :expandableRowGroups="props.expandableRowGroups"
+    :stateStorage="props.stateStorage"
+    :stateKey="props.stateKey"
+    :editMode="props.editMode"
+    :rowClass="props.rowClass"
+    :rowStyle="props.rowStyle"
+    :scrollable="props.scrollable"
+    :scrollHeight="props.scrollHeight"
+    :virtualScrollerOptions="props.virtualScrollerOptions"
+    :frozenValue="props.frozenValue"
+    :breakpoint="props.breakpoint"
+    :showHeaders="props.showHeaders"
+    :highlightOnSelect="props.highlightOnSelect"
+    :size="props.size"
+    :tableClass="props.tableClass"
+    :tableProps="props.tableProps"
+    :tableStyle="props.tableStyle"
+    :filterButtonProps="props.filterButtonProps"
+    :editButtonProps="props.editButtonProps"
+    style="width: 100%; height: fit-content;"
+    v-model:selection="localSelection"
+    v-model:rows="localRows"
+    v-model:first="localFirst"
+    v-model:sortField="localSortField"
+    v-model:sortOrder="localSortOrder"
+    v-model:filters="localFilters"
+    v-model:contextMenuSelection="localContextMenuSelection"
+    v-model:expandedRows="localExpandedRows"
+    v-model:expandedRowGroups="localExpandedRowGroups"
+    v-model:editingRows="localEditingRows"
+    v-model:multi-sort-meta="localMultiSortMeta"
+    @update:selection="emit('update:selection', $event)"
+    @update:context-menu-selection="emit('update:contextMenuSelection', $event)"
+    @update:editing-rows="emit('update:editingRows', $event)"
+    @update:expanded-row-groups="emit('update:expandedRowGroups', $event)"
+    @update:filters="emit('update:filters', $event)"
+    @update:first="emit('update:first', $event)"
+    @update:multi-sort-meta="emit('update:multiSortMeta', $event)"
+    @update:rows="emit('update:rows', $event)"
+    @update:sort-field="emit('update:sortField', $event)"
+    @update:sort-order="emit('update:sortOrder', $event)"
+    @page="emit('page', $event)"
+    @sort="emit('sort', $event)"
+    @rowSelect="emit('row-select', $event)"
+    @rowUnselect="emit('row-unselect', $event)"
+    @filter="emit('filter', $event)"
+    @valueChange="emit('value-change', $event)"
+    @rowClick="emit('row-click', $event)"
+    @rowCollapse="emit('row-collapse', $event)"
+    @rowContextmenu="emit('row-contextmenu', $event)"
+    @rowDblclick="emit('row-dbclick', $event)"
+    @rowEditCancel="emit('row-edit-cancel', $event)"
+    @rowEditInit="emit('row-edit-init', $event)"
+    @rowEditSave="emit('row-edit-save', $event)"
+    @rowExpand="emit('row-expand', $event)"
+    @rowReorder="emit('row-reorder', $event)"
+    @rowSelectAll="emit('row-select-all', $event)"
+    @rowUnselectAll="emit('row-unselect-all', $event)"
+    @rowgroupCollapse="emit('rowgroup-collapse', $event)"
+    @rowgroupExpand="emit('rowgroup-expand', $event)"
+    @columnReorder="emit('column-reorder', $event)"
+    @columnResizeEnd="emit('column-resize-end', $event)"
+    @cellEditCancel="emit('cell-edit-cancel', $event)"
+    @cellEditComplete="emit('cell-edit-complete', $event)"
+    @cellEditInit="emit('cell-edit-init', $event)"
+    @stateRestore="emit('state-restore', $event)"
+    @stateSave="emit('state-save', $event)"
+    @selectAllChange="emit('select-all-change', $event)"
+  >
+    <template
+      v-for="([name]) in availableSlots"
+      :key="name"
+      v-slot:[name]="slotProps"
+    >
+      <slot :name="name" v-bind="slotProps" />
+    </template>
+  </DataTable>
+</template>

From fad2a30a6b433103b0964a396e87b133401b2dd0 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 18:02:55 +0200
Subject: [PATCH 09/26] =?UTF-8?q?=F0=9F=94=A5=20deleted=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VColumn.vue | 121 -------------------------------
 1 file changed, 121 deletions(-)
 delete mode 100644 src/components/table/VColumn.vue

diff --git a/src/components/table/VColumn.vue b/src/components/table/VColumn.vue
deleted file mode 100644
index 71068c2..0000000
--- a/src/components/table/VColumn.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup lang="ts">
-import Column from 'primevue/column';
-import type { ColumnProps, ColumnSlots } from 'primevue/column';
-import { computed } from 'vue';
-
-export type IVColumn = Partial<Omit<ColumnProps , 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>;
-
-const props = withDefaults(defineProps<IVColumn>(), {
-  columnKey: undefined,
-  field: undefined,
-  sortField: undefined,
-  filterField: undefined,
-  dataType: undefined,
-  sortable: false,
-  header: undefined,
-  footer: undefined,
-  showFilterMenu: true,
-  showFilterOperator: true,
-  showClearButton: false,
-  showApplyButton: true,
-  showFilterMatchModes: true,
-  showAddButton: true,
-  filterMatchModeOptions: undefined,
-  maxConstraints: 2,
-  excludeGlobalFilter: false,
-  selectionMode: undefined,
-  expander: false,
-  colspan: undefined,
-  rowspan: undefined,
-  rowReorder: false,
-  rowReorderIcon: undefined,
-  reorderableColumn: false,
-  rowEditor: false,
-  frozen: false,
-  alignFrozen: 'left',
-  exportable: false,
-  exportHeader: undefined,
-  exportFooter: undefined,
-  filterMatchMode: undefined,
-  hidden: false,
-})
-
-const slots = defineSlots<ColumnSlots>();
-
-const columnSlotKeys = [
-  'body',
-  'node',
-  'header',
-  'footer',
-  'editor',
-  'filter',
-  'filterheader',
-  'filterfooter',
-  'filterclear',
-  'filterapply',
-  'loading',
-  'rowtoggleicon',
-  'rowcheckboxicon',
-  'roweditoriniticon',
-  'roweditorsaveicon',
-  'roweditorcancelicon',
-  'filtericon',
-  'filterclearicon',
-  'filterremoveicon',
-  'filteraddicon',
-  'sorticon',
-  'headercheckboxicon',
-  'rowreordericon',
-  'nodetoggleicon'
-] as const;
-
-const availableSlots = computed(() =>
-  columnSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
-);
-
-</script>
-
-<template>
-  <Column
-    :column-key="props.columnKey"
-    :field="props.field"
-    :sort-field="props.sortField"
-    :filter-field="props.filterField"
-    :data-type="props.dataType"
-    :sortable="props.sortable"
-    :header="props.header"
-    :footer="props.footer"
-    :show-filter-menu="props.showFilterMenu"
-    :show-filter-operator="props.showFilterOperator"
-    :show-clear-button="props.showClearButton"
-    :show-apply-button="props.showApplyButton"
-    :show-filter-match-modes="props.showFilterMatchModes"
-    :show-add-button="props.showAddButton"
-    :filter-match-mode-options="props.filterMatchModeOptions"
-    :max-constraints="props.maxConstraints"
-    :exclude-global-filter="props.excludeGlobalFilter"
-    :selection-mode="props.selectionMode"
-    :expander="props.expander"
-    :colspan="props.colspan"
-    :rowspan="props.rowspan"
-    :row-reorder="props.rowReorder"
-    :row-reorder-icon="props.rowReorderIcon"
-    :reorderable-column="props.reorderableColumn"
-    :row-editor="props.rowEditor"
-    :frozen="props.frozen"
-    :align-frozen="props.alignFrozen"
-    :exportable="props.exportable"
-    :export-header="props.exportHeader"
-    :export-footer="props.exportFooter"
-    :filter-match-mode="props.filterMatchMode"
-    :hidden="props.hidden"
-  >
-    <template
-    v-for="([name]) in availableSlots"
-    :key="name"
-    v-slot:[name]="slotProps"
-  >
-    <slot :name="name" v-bind="slotProps" />
-  </template>
-  </Column>
-</template>

From ae0cd7a5b08715a4d37188101e369df7c7a2d424 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 18:03:09 +0200
Subject: [PATCH 10/26] =?UTF-8?q?=F0=9F=94=A5=20deleted=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VColumnGroup.vue | 14 --------------
 1 file changed, 14 deletions(-)
 delete mode 100644 src/components/table/VColumnGroup.vue

diff --git a/src/components/table/VColumnGroup.vue b/src/components/table/VColumnGroup.vue
deleted file mode 100644
index 4d60a2e..0000000
--- a/src/components/table/VColumnGroup.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import ColumnGroup from 'primevue/columngroup';
-import type { ColumnGroupProps } from 'primevue/columngroup';
-
-export type IVColumnGroup = Partial<Pick<ColumnGroupProps, 'type'>>
-
-const props = withDefaults(defineProps<IVColumnGroup>(), {
-  type: undefined
-})
-</script>
-
-<template>
-  <ColumnGroup :type="props.type"/>
-</template>

From 80825394b846a84c37eb1d9df0e142c20e853fb9 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Mon, 28 Jul 2025 18:03:27 +0200
Subject: [PATCH 11/26] =?UTF-8?q?=F0=9F=94=A5=20deleted=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VRow.vue | 7 -------
 1 file changed, 7 deletions(-)
 delete mode 100644 src/components/table/VRow.vue

diff --git a/src/components/table/VRow.vue b/src/components/table/VRow.vue
deleted file mode 100644
index f9b581d..0000000
--- a/src/components/table/VRow.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<script setup lang="ts">
-import Row from 'primevue/row';
-</script>
-
-<template>
-  <Row role="row"/>
-</template>

From c035a7dce5eb0c4017478dc1bb6622971cc8e021 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:09:12 +0200
Subject: [PATCH 12/26] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20primevue=20?=
 =?UTF-8?q?configuration=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-configuration.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-configuration.css b/src/assets/style/primevue-configuration.css
index 2759cde..1a1ca2e 100644
--- a/src/assets/style/primevue-configuration.css
+++ b/src/assets/style/primevue-configuration.css
@@ -20,3 +20,4 @@
 @import './primevue-style/confirmdialog.css';
 @import './primevue-style/datatable.css';
 @import './primevue-style/paginator.css';
+@import './primevue-style/list.css';

From 43472332dd8928e63083347b4bae877dc65efa43 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:09:58 +0200
Subject: [PATCH 13/26] =?UTF-8?q?=F0=9F=92=84=20update=20common=20styles?=
 =?UTF-8?q?=20to=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/global.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/style/global.css b/src/assets/style/global.css
index 24a3cd9..b326de8 100644
--- a/src/assets/style/global.css
+++ b/src/assets/style/global.css
@@ -22,7 +22,7 @@
     --input-padding-y: 0.5rem;
     --input-border-raduis: 0.25rem 0.25rem 0px 0px;
     /* datatable */
-    --datatable-background: var(--background-contrast-grey);
+    --datatable-background: var(--background-default-grey);
     --datatable-alt-background: var(--background-alt-grey);
     --datatable-hover-background: var(--background-alt-grey-hover);
     --datatable-active-background: var(--background-alt-grey-active);

From c73d2e0892eadefd0f57463bd89f754eeec002b4 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:10:50 +0200
Subject: [PATCH 14/26] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20overlay=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/overlay.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/assets/style/primevue-style/overlay.css b/src/assets/style/primevue-style/overlay.css
index 3850fc9..1224e91 100644
--- a/src/assets/style/primevue-style/overlay.css
+++ b/src/assets/style/primevue-style/overlay.css
@@ -14,4 +14,7 @@
   --p-overlay-popover-shadow: var(--shadow);
   --p-overlay-select-border-radius: 0px;
   --p-overlay-select-shadow: var(--shadow);
+  --p-overlay-select-background: var(--input-background);
+  --p-overlay-select-border-color: var(--input-border-color);
+  --p-overlay-select-color: var(--input-color);
 }

From 2a03550d09074ee01b66e55054566c0bf4dbff8f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:11:34 +0200
Subject: [PATCH 15/26] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20various=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/various.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/assets/style/primevue-style/various.css b/src/assets/style/primevue-style/various.css
index cfd1d7b..c2c1c43 100644
--- a/src/assets/style/primevue-style/various.css
+++ b/src/assets/style/primevue-style/various.css
@@ -3,4 +3,11 @@
   --p-text-muted-color: var(--text-action-high-grey);
   --p-transition-duration: var(--transition-duration);
   --p-anchor-gutter: 2px;
+  --p-content-background: var(--input-background);
+  --p-content-hover-background: var(--background-transparent-active);
+  --p-content-border-color: var(--border-action-high-grey);
+  --p-content-color: var(--text-action-high-grey);
+  --p-content-hover-color: var(--text-action-high-grey);
+  --p-content-border-radius: 0px;
+  --p-primary-color: var(--background-action-high-blue-france);
 }

From 4e42d0256cd02ca784bde23f6c1007fcd10585b7 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:12:20 +0200
Subject: [PATCH 16/26] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20toast=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/toast.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/assets/style/primevue-style/toast.css b/src/assets/style/primevue-style/toast.css
index 38b3fcd..e634e8f 100644
--- a/src/assets/style/primevue-style/toast.css
+++ b/src/assets/style/primevue-style/toast.css
@@ -6,8 +6,8 @@
   --p-toast-content-padding: 0.25rem;
   --p-toast-content-gap: 0.5rem;
   --p-toast-text-gap: 0.5rem;
-  --p-toast-summary-font-weight: var( --text-body-MD-standard-text-weight);
-  --p-toast-summary-font-size: var(--text-body-MD-standard-text-size);
+  --p-toast-summary-font-weight: var( --text-body-MD-standard-text-Medium-weight);
+  --p-toast-summary-font-size: var(--text-body-MD-standard-text-Medium-size);
   --p-toast-detail-font-weight: var( --text-body-MD-standard-text-Regular-weight);
   --p-toast-detail-font-size: var(--text-body-MD-standard-text-Regular-size);
   /* info */

From b0b6a359068bfeba0eeb13e5840f6187b55d24fd Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:13:13 +0200
Subject: [PATCH 17/26] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20fileupload=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/fileupload.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/style/primevue-style/fileupload.css b/src/assets/style/primevue-style/fileupload.css
index a3dba2a..999d22d 100644
--- a/src/assets/style/primevue-style/fileupload.css
+++ b/src/assets/style/primevue-style/fileupload.css
@@ -6,7 +6,7 @@
   --p-fileupload-file-gap: 1rem;
   --p-fileupload-file-border-color: var(--border-default-grey);
   --p-fileupload-file-info-gap: 0.5rem;
-  --p-fileupload-content-highlight-border-color: var(--p-primary-color);
+  --p-fileupload-content-highlight-border-color: var(--border-action-high-grey);
   --p-fileupload-content-padding: 0rem;
   --p-fileupload-content-gap: 1rem;
   --p-fileupload-header-background: transparent;

From 46d9d12781d6d5e78ebccaf94b2597e667b0721b Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:14:03 +0200
Subject: [PATCH 18/26] =?UTF-8?q?=F0=9F=92=84=20Updating=20the=20style=20o?=
 =?UTF-8?q?f=20the=20primevue=20datatable=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/datatable.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/assets/style/primevue-style/datatable.css b/src/assets/style/primevue-style/datatable.css
index 7a250da..dcb4066 100644
--- a/src/assets/style/primevue-style/datatable.css
+++ b/src/assets/style/primevue-style/datatable.css
@@ -107,3 +107,4 @@
   --p-datatable-row-striped-background: var(--datatable-background);
   --p-datatable-border-color: var(--p-content-border-color);
 }
+

From c46f2889cd10791aedb089cd8b325a846334e730 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:14:55 +0200
Subject: [PATCH 19/26] =?UTF-8?q?=F0=9F=92=84=20Adding=20the=20style=20of?=
 =?UTF-8?q?=20the=20primevue=20list=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/style/primevue-style/list.css | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/assets/style/primevue-style/list.css

diff --git a/src/assets/style/primevue-style/list.css b/src/assets/style/primevue-style/list.css
new file mode 100644
index 0000000..42f735b
--- /dev/null
+++ b/src/assets/style/primevue-style/list.css
@@ -0,0 +1,20 @@
+:root{
+  --p-list-option-group-padding: 0.25rem;
+  --p-list-option-group-font-weight: var(--text-body-MD-standard-text-Regular-weight);
+  --p-list-option-padding: 0.25rem;
+  --p-list-option-border-radius: 0px;
+  --p-list-option-group-background: var(--input-background);
+  --p-list-option-group-color: var(--input-color);
+  --p-list-option-focus-background: var(--background-transparent-active);
+  --p-list-option-selected-background: var(--background-active-blue-france);
+  --p-list-option-selected-focus-background: var(--background-active-blue-france);
+  --p-list-option-color: var(--input-color);
+  --p-list-option-focus-color: var(--input-color);
+  --p-list-option-selected-color: var(--text-inverted-blue-france);
+  --p-list-option-selected-focus-color: var(--text-inverted-blue-france);
+  --p-list-option-icon-color: var(--input-color);
+  --p-list-option-icon-focus-color: var(--input-color);
+  --p-list-padding: 0.25rem;
+  --p-list-gap: 0.125rem;
+  --p-list-header-padding: 0.5rem 1rem;
+}

From 7ee1b3fefd8998d68554320eb75efeeb87c4a34a Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:15:56 +0200
Subject: [PATCH 20/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Select=20component?=
 =?UTF-8?q?=20improved?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/select/VSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/select/VSelect.vue b/src/components/select/VSelect.vue
index 4bad988..9d6b8cf 100644
--- a/src/components/select/VSelect.vue
+++ b/src/components/select/VSelect.vue
@@ -83,6 +83,7 @@ const labelState = computed(() => {
 <template>
   <div class="main-container">
     <VLabel
+      v-if="props.label"
       :for="props.selectId"
       :label="props.label"
       :required="!props.disabled"

From a3a8fa05b9e40045607c71f6a1d844d5ca5412c7 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:16:44 +0200
Subject: [PATCH 21/26] =?UTF-8?q?=E2=9C=A8=20feature:=20Data=20table=20com?=
 =?UTF-8?q?ponent=20updated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/table/VDataTable.vue | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/table/VDataTable.vue b/src/components/table/VDataTable.vue
index 5f46d8c..19f231c 100644
--- a/src/components/table/VDataTable.vue
+++ b/src/components/table/VDataTable.vue
@@ -4,8 +4,8 @@ import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
 import { useId, ref, watch, computed } from 'vue';
 
 export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{
-  id: string
-  title: string
+  id?: string
+  title?: string
 }
 
 const props = withDefaults(defineProps<IVDataTable>(), {
@@ -80,7 +80,12 @@ const props = withDefaults(defineProps<IVDataTable>(), {
   multiSortMeta: undefined,
 })
 
-const slots = defineSlots<DataTableSlots>();
+type VDataTableSlots = DataTableSlots & {
+  default?: (props: Record<string, unknown>) => unknown
+};
+
+const slots = defineSlots<VDataTableSlots>();
+
 
 const dataTableSlotKeys = [
   'header',
@@ -91,9 +96,7 @@ const dataTableSlotKeys = [
   'loading',
   'expansion',
   'loadingicon',
-  'reorderindicatorupicon',         // deprecated
   'rowreorderindicatorupicon',
-  'reorderindicatordownicon',       // deprecated
   'rowreorderindicatordownicon',
   'rowgrouptogglericon',
   'paginatorcontainer',
@@ -402,6 +405,7 @@ watch(localEditingRows, (newVal) => {
     @stateRestore="emit('state-restore', $event)"
     @stateSave="emit('state-save', $event)"
     @selectAllChange="emit('select-all-change', $event)"
+    class="p-datatable"
   >
     <template
       v-for="([name]) in availableSlots"
@@ -410,5 +414,12 @@ watch(localEditingRows, (newVal) => {
     >
       <slot :name="name" v-bind="slotProps" />
     </template>
+    <slot></slot>
   </DataTable>
 </template>
+
+<style lang="css" scoped>
+.p-datatable{
+  box-sizing: border-box;
+}
+</style>

From 76d75d67567e9d409e1c2b7e5d11accd7ff4be9f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:17:27 +0200
Subject: [PATCH 22/26] Display datatable component

---
 src/App.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a6a508f..6abd524 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,7 +12,8 @@
 // import VFileUploadView from '../template/VFileUploadView.vue';
 // import VAlertView from '../template/VAlertView.vue';
 // import VModalView from '../template/VModalView.vue';
-import VConfirmModalView from '../template/VConfirmModalView.vue';
+// import VConfirmModalView from '../template/VConfirmModalView.vue';
+import VDataTableView from '../template/VDataTableView.vue';
 </script>
 
 
@@ -30,5 +31,6 @@ import VConfirmModalView from '../template/VConfirmModalView.vue';
   <!-- <VFileUploadView/> -->
   <!-- <VAlertView/> -->
    <!-- <VModalView/> -->
-    <VConfirmModalView/>
+    <!-- <VConfirmModalView/> -->
+  <VDataTableView/>
 </template>

From 254119edc9226b3123aa8899b272f5d3f391f65f Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:21:43 +0200
Subject: [PATCH 23/26] =?UTF-8?q?=F0=9F=93=9D=20docs:=20Updated=20CHANGELO?=
 =?UTF-8?q?G=20file?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25e2ece..b132628 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.0.13] - 2025-07-29
+### Added
+- Data table compoenent
+- List style
+
 ## [1.0.12] - 2025-07-28
 ### Added
 - Modal compoenent

From 3c64a187f71dcb45647bad421dcfffed41d02b24 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:22:17 +0200
Subject: [PATCH 24/26] =?UTF-8?q?=F0=9F=93=9D=20docs:=20README=20file=20up?=
 =?UTF-8?q?dated?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 3ee4794..9ba574f 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # visua-vue
 
-**Current version: v1.0.12**
\ No newline at end of file
+**Current version: v1.0.13**
\ No newline at end of file

From 4c76522d52b5dd0bfd5c35c18a45752a93d4128b Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:23:36 +0200
Subject: [PATCH 25/26] 1.0.12 -> 1.0.13

---
 package-lock.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 195d81c..7eceb50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@cellule-financiere-pmo/visua-vue",
-      "version": "1.0.12",
+      "version": "1.0.13",
       "license": "ISC",
       "dependencies": {
         "@cellule-financiere-pmo/visua": "1.1.3",

From c3073c1219dda17e3a20430aaad8f2be9118fb62 Mon Sep 17 00:00:00 2001
From: Paul Valerie GOMA <paulgoma07@gmail.com>
Date: Tue, 29 Jul 2025 06:23:52 +0200
Subject: [PATCH 26/26] 1.0.12 -> 1.0.13

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 75bb529..2c21b5d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",