CHANGELOG.md

@@ -5,31 +5,6 @@ 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.28] - 2025-08-11
-### fixed
-- bug fixed
-
-## [1.0.24] - 2025-08-02
-### fixed
-- Composable error fixed
-
-## [1.0.22] - 2025-08-02
-### fixed
-- Fixed bugs related to dependencies
-
-## [1.0.20] - 2025-07-31
-### fixed
-- Composable error fixed
-
-## [1.0.19] - 2025-07-31
-### Added
-- Style component added
-
-## [1.0.18] - 2025-07-31
-### fixed
-- Package publication error fixed
-- Component export file configuration
-
 ## [1.0.15] - 2025-07-30
 ### Added
 - Menu bar compoenent

README.md

@@ -1,3 +1,3 @@
 # visua-vue
 
-**Current version: v1.0.28**
+**Current version: v1.0.15**

env.d.ts

@@ -1,9 +1 @@
-
-
 /// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-  export default component;
-}

package.json

@@ -1,30 +1,29 @@
 {
   "name": "@cellule-financiere-pmo/visua-vue",
-  "version": "1.0.28",
+  "version": "1.0.15",
   "type": "module",
-  "description": "Vue.js components of the Visua Design System.",
+  "description": "Composants Vue.js du Design System Visua.",
-  "main": "./dist/visua-vue.umd.cjs",
+  "main": "dist/visua-vue.umd.js",
-  "module": "./dist/visua-vue.es.js",
+  "module": "dist/visua-vue.es.js",
-  "types": "./dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "require": "./dist/visua-vue.umd.js",
-      "require": "./dist/visua-vue.umd.cjs",
+      "import": "./dist/visua-vue.es.js",
-      "import": "./dist/visua-vue.es.js"
+      "types": "./dist/index.d.ts"
     }
   },
   "sideEffects": false,
   "files": [
     "dist",
-    "README.md"
+    "src/components/*.vue",
+    "src/components/**/*.ts",
+    "src/components/**/*.type.ts",
+    "src/composables/*"
   ],
   "scripts": {
-    "clean": "rimraf dist",
-    "build": "npm-run-all clean build:assets build:types",
-    "build:assets": "vite build",
-    "build:types": "vue-tsc --emitDeclarationOnly --outDir dist && tsc --project tsconfig.types.json",
-    "prepare": "npm run build",
     "dev": "vite",
+    "build": "vite build",
     "type-check": "vue-tsc --build",
     "lint": "eslint . --fix",
     "test": "vitest --config vitest.config.ts",
@@ -32,13 +31,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cellule-financiere-pmo/visua": "1.1.3"
+    "@cellule-financiere-pmo/visua": "1.1.3",
-  },
-  "peerDependencies": {
     "primevue": "^4.3.6",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
   },
+  "peerDependencies": {
+    "vue": "^3.5.17"
+  },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.2",
     "@types/node": "^22.15.32",
@@ -50,21 +50,17 @@
     "eslint": "^9.29.0",
     "eslint-plugin-vue": "~10.2.0",
     "jiti": "^2.4.2",
-    "jsdom": "^26.1.0",
     "npm-run-all2": "^8.0.4",
-    "rimraf": "^5.0.10",
     "typescript": "~5.8.0",
     "vite": "^7.0.0",
     "vite-plugin-inspect": "^11.3.0",
     "vite-plugin-vue-devtools": "^7.7.7",
     "vitest": "^3.2.4",
-    "vue": "^3.5.17",
-    "vue-router": "^4.5.1",
     "vue-tsc": "^2.2.10"
   },
   "repository": {
     "type": "git",
-    "url": "https://gitlab.com/cellule-financiere-pmo/design-system/visua-vue.git"
+    "url": "git+https://gitlab.com/cellule-financiere-pmo/design-system/visua-vue.git"
   },
   "bugs": {
     "url": "https://gitlab.com/cellule-financiere-pmo/design-system/visua-vue/issues"
@@ -78,9 +74,6 @@
     "vite",
     "library"
   ],
-  "author": {
+  "author": "CGI",
-    "name": "CGI",
-    "url": "https://www.cgi.com"
-  },
   "license": "ISC"
 }

src/App.vue

@@ -13,9 +13,8 @@
 // import VAlertView from '../template/VAlertView.vue';
 // import VModalView from '../template/VModalView.vue';
 // import VConfirmModalView from '../template/VConfirmModalView.vue';
-import VDataTableView from '../template/VDataTableView.vue';
+// import VDataTableView from '../template/VDataTableView.vue';
-// import VMenuBarView from '../template/VMenuBarView.vue'
+import VMenuBarView from '../template/VMenuBarView.vue'
-// import VDataTable from './components/table/VDataTable.vue';
 </script>
 
 
@@ -26,18 +25,17 @@ import VDataTableView from '../template/VDataTableView.vue';
   <!-- <VAccordionView/> -->
   <!-- <VInputView/> -->
   <!-- <VCheckboxView/> -->
-  <!-- <VBadgeView/>-->
+  <!-- <VBadgeView/>
-  <!-- <VSelectView/> -->
+  <VSelectView/> -->
   <!-- <VProgressBarView/> -->
   <!-- <VMessageView/> -->
   <!-- <VFileUploadView/> -->
   <!-- <VAlertView/> -->
    <!-- <VModalView/> -->
     <!-- <VConfirmModalView/> -->
-  <VDataTableView/>
+  <!-- <VDataTableView/> -->
    <!-- <RouterView/> -->
-   <!-- <VMenuBarView/> -->
+   <VMenuBarView/>
-  <!-- <VDataTable/> -->
 </template>
 <style lang="css" scoped>
 *{

src/assets/style/primevue-style/datatable.css

@@ -53,21 +53,21 @@
   --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: 0.75rem;
+  --p-datatable-footer-padding: 1rem;
-  --p-datatable-footer-lg-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: 0.75rem;
+  --p-datatable-footer-cell-padding: 1rem;
-  --p-datatable-footer-cell-lg-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: 0.75rem;
+  --p-datatable-body-cell-padding: 1rem;
-  --p-datatable-body-cell-lg-padding: 1rem;
+  --p-datatable-body-cell-lg-padding: 1.25rem;
   --p-datatable-body-cell-sm-padding: 0.5rem;
-  --p-datatable-row-background: var(--datatable-background);
+  --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);
@@ -78,17 +78,17 @@
   --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-Medium-weight);
+  --p-datatable-column-title-font-weight: var(--text-body-SM-detail-text-Bold-weight);
-  --p-datatable-header-cell-background: var(--primary-color-850-blue-france-default);
+  --p-datatable-header-cell-background: var(--datatable-background);
-  --p-datatable-header-cell-hover-background: var(--primary-color-850-blue-france-hover);
+  --p-datatable-header-cell-hover-background: var(--datatable-hover-background);
-  --p-datatable-header-cell-selected-background: var(--primary-color-850-blue-france-active);
+  --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: 0.75rem;
+  --p-datatable-header-cell-padding: 1rem;
-  --p-datatable-header-cell-lg-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);
@@ -96,11 +96,11 @@
   --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: transparent;
+  --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: 0.75rem;
+  --p-datatable-header-padding: 1rem;
-  --p-datatable-header-lg-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);

src/assets/style/primevue-style/fileupload.css

@@ -16,7 +16,7 @@
   --p-fileupload-header-border-width: 0;
   --p-fileupload-header-border-radius: 0;
   --p-fileupload-header-gap: 0.5rem;
-  --p-fileupload-background: var(--background-default-grey);
+  --p-fileupload-background: var(--background-transparent);
   --p-fileupload-border-color: var(--border-default-grey);
   --p-fileupload-color: var(--text-default-grey);
   --p-fileupload-border-radius: 0px;

src/components/accordion/VAccordion.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Accordion from 'primevue/accordion';
 import VAccordionChild from './VAccordionChild.vue';
-import type IVAccordion from './IVAccordion.type.js';
+import type IVAccordion from './IVAccordion.type';
 import { ref, watch } from 'vue';
 
 const props = withDefaults(defineProps<IVAccordion>(), {

src/components/accordion/VAccordionChild.vue

@@ -2,7 +2,7 @@
 import AccordionPanel from 'primevue/accordionpanel';
 import AccordionHeader from 'primevue/accordionheader';
 import AccordionContent from 'primevue/accordioncontent';
-import type IVAccordion from './IVAccordion.type.js';
+import type IVAccordion from './IVAccordion.type';
 import { useId } from 'vue';
 
 const props = withDefaults(defineProps<IVAccordion>(), {

src/components/badge/VBadge.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type IVBadge from './IVBadge.type.js';
+import type IVBadge from './IVBadge.type';
 import Tag from 'primevue/tag';
 import { computed } from 'vue';
 

src/components/button/VButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
-import type IVButton from './IVButton.type.js';
+import type IVButton from './IVButton.type';
 import { computed } from 'vue';
 import styles from '@visua/typography.module.css';
 

src/components/button/VButtonGroup.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import VButton from './VButton.vue';
-import type IVButtonGroup from './IVButton.type.js';
+import type IVButtonGroup from './IVButton.type.ts';
 import { computed, ref, onMounted } from 'vue';
 
 const props = withDefaults(defineProps<IVButtonGroup>(), {

src/components/button/VLink.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Button from 'primevue/button';
-import type IVLink from '@/components/button/IVLink.type.js';
+import type IVLink from '@/components/button/IVLink.type';
 import { computed } from 'vue';
 import styles from '@visua/typography.module.css';
 

src/components/checkbox/VCheckbox.vue

@@ -2,7 +2,7 @@
 import Checkbox from 'primevue/checkbox';
 import VLabel from '../label/VLabel.vue';
 import VHint from '../hint/VHint.vue';
-import type IVCheckBox from './IVCheckbox.type.js';
+import type IVCheckBox from './IVCheckbox.type';
 import { useId, computed, watch, ref } from 'vue';
 
 const props = withDefaults(defineProps<IVCheckBox>(), {

src/components/composable/index.ts

@@ -1,2 +1,2 @@
-export * from './useAlert.js';
+export * from './useAlert';
-export * from './useConfirmModal.js';
+export * from './useConfirmModal';

src/components/composable/useAlert.ts

@@ -1,5 +1,5 @@
 import { useToast } from "primevue/usetoast";
-import type IVAlert from "../alert/IVAlert.type.js";
+import type IVAlert from "@/components/alert/IVAlert.type";
 
 export function useAlert() {
   const toast = useToast();

src/components/file/VFileUpload.vue

@@ -8,18 +8,14 @@ import VFile from './VFile.vue';
 import VMessage from '../message/VMessage.vue';
 import VScrollPanel from '../scrollpanel/VScrollPanel.vue';
 import VLabelErrorProxy from './VLabelErrorProxy.vue';
-import type IVFileUpload from './IVFileUpload.type.js';
+import type IVFileUpload from './IVFileUpload.type';
 import type { FileUploadErrorEvent, FileUploadProgressEvent, FileUploadRemoveEvent, FileUploadSelectEvent, FileUploadUploadEvent } from 'primevue/fileupload';
 import { computed, useId, ref } from 'vue';
 import styles from '@visua/typography.module.css';
 
 const fileUploadRef = ref();
 const fileProgressMap = ref<Record<string, number>>({});
-const hasValidationError = ref(false);
+const hasActiveError = ref(false);
-const hasSystemError = ref(false);
-const systemErrorMessage = ref('');
-
-
 
 defineOptions({
   inheritAttrs: false,
@@ -76,6 +72,7 @@ const handleSelect = (event: FileUploadSelectEvent) => {
 
 const handleClear = () => {
   emit('clear');
+  hasActiveError.value = false;
 };
 
 const handleUpload = (event: FileUploadUploadEvent) => {
@@ -84,6 +81,7 @@ const handleUpload = (event: FileUploadUploadEvent) => {
 
 const handleRemove = (event: FileUploadRemoveEvent) => {
   emit('remove', event);
+  hasActiveError.value =false;
 };
 
 const handleProgress = (event: FileUploadProgressEvent) => {
@@ -97,21 +95,11 @@ const handleProgress = (event: FileUploadProgressEvent) => {
 
 const handleError = (event: FileUploadErrorEvent) => {
   emit('error', event);
-  hasSystemError.value = true;
+  hasActiveError.value = true;
-
-  const status = event.xhr?.status;
-  const statusText = event.xhr?.statusText || 'Erreur inconnue';
-  const fileNames = Array.isArray(event.files)
-    ? event.files.map(f => f.name).join(', ')
-    : event.files.name;
-
-  systemErrorMessage.value = `Echec de téléversement du fichier ${fileNames} {Status : ${status} | Message : <${statusText}>}`;
-
   if (!props.advanced && fileUploadRef.value) {
     fileUploadRef.value.uploadedFiles = [];
   }
-};
+}
-
 
 const lastSelectedFile = computed(() => {
   const files = fileUploadRef.value?.files || [];
@@ -126,10 +114,10 @@ const padding = computed(() => props.advanced ? '1.125rem' : '0rem')
 const borderColor = computed(() => props.advanced ? 'var(--border-default-grey)' : 'transparent');
 
 const labelState = computed(() => {
-  if ((hasValidationError.value || hasSystemError.value) && !props.disabled) return 'error';
+  if(!hasActiveError.value && !props.disabled) return 'default';
-  return 'default';
+  else if(hasActiveError.value && !props.disabled) return 'error';
-});
+  else return undefined
-
+})
 
 type MessageType = 'alert' | 'warning' | 'success' | 'info';
 
@@ -234,21 +222,21 @@ const globalStatusMessage = computed<{
             title="parcourir les fichiers"
           />
           <span
-            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !(hasSystemError || hasValidationError)"
+            v-if="(!slotProps.files || slotProps.files.length === 0) && (!slotProps.uploadedFiles || slotProps.uploadedFiles.length === 0) && !hasActiveError"
             :class="[styles['text-body-SM-detail-text-Regular']]"
           >
             Aucun fichier sélectionné
           </span>
         </div>
       </template>
-      <template #empty v-if="props.advanced && !(hasSystemError || hasValidationError)">
+      <template #empty v-if="props.advanced && !hasActiveError">
         <div class="fileupload-empty" :class="[styles['text-body-SM-detail-text-Regular']]">
           <i class="ri-upload-cloud-line upload-cloud-icon"></i>
           <p>Glissez-déposez les fichiers ici pour les téléverser.</p>
         </div>
       </template>
       <template #content="slotProps">
-        <div v-if="props.advanced && !(hasValidationError || hasSystemError)" style="margin-top: 0.75rem;" class="file-content">
+        <div v-if="props.advanced && !hasActiveError" style="margin-top: 0.75rem;" class="file-content">
           <VMessage
             v-if="globalStatusMessage"
             :type="globalStatusMessage.type"
@@ -283,7 +271,7 @@ const globalStatusMessage = computed<{
             </div>
           </VScrollPanel>
         </div>
-        <div v-if="!props.advanced && !(hasValidationError || hasSystemError)">
+        <div v-if="!props.advanced && !hasActiveError">
           <VFile
             v-if="lastSelectedFile"
             :file="lastSelectedFile"
@@ -301,18 +289,15 @@ const globalStatusMessage = computed<{
           role="alert"
           aria-live="polite"
         >
-        <VHint
+          <VHint
-          v-for="message of [...(slotProps.messages ?? []), ...(hasSystemError ? [systemErrorMessage] : [])]"
+            v-for="message of slotProps.messages"
-          :key="message"
+            :key="message"
-          :title="message"
+            :title="message"
-          type="alert"
+            type="alert"
-          icon
+            icon
-        />
+          />
         </div>
-        <VLabelErrorProxy
+        <VLabelErrorProxy :hasError="(slotProps.messages ?? []).length > 0" @update:error="hasActiveError = $event" />
-          :hasError="(slotProps.messages ?? []).length > 0"
-          @update:error="hasValidationError = $event"
-        />
       </template>
     </FileUpload>
   </div>

src/components/group/VGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type IVGroup from './IVGroup.type.js';
+import type IVGroup from './IVGroup.type';
 
 const props = withDefaults(defineProps<IVGroup>(), {
   type: 'default',

src/components/hint/VHint.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Message from 'primevue/message';
-import type IVHint from './IVHint.type.js';
+import type IVHint from './IVHint.type';
 import { computed } from 'vue';
 import styles from '@visua/typography.module.css';
 

src/components/input/VInput.vue

@@ -4,7 +4,7 @@ import Textarea from 'primevue/textarea';
 import VHint from '../hint/VHint.vue';
 import VDivider from '../divider/VDivider.vue';
 import VLabel from '../label/VLabel.vue';
-import type IVInput from './IVInput.type.js';
+import type IVInput from './IVInput.type';
 import { computed, useAttrs, useId, ref, watch } from 'vue';
 import styles from '@visua/typography.module.css';
 import Password from 'primevue/password';
@@ -70,7 +70,7 @@ const labelState = computed(() => {
       v-if="props.labelVisible"
       :for="props.id"
       :label="props.label"
-      :required="!props.disabled && props.required"
+      :required="!props.disabled"
       :disabled="props.disabled"
       :type="labelState"
       :hint="props.hint"

src/components/interface/index.ts

@@ -1,18 +1,18 @@
-export type { default as IVAccordion } from '../accordion/IVAccordion.type.js';
+export type { default as IVAccordion } from '../accordion/IVAccordion.type';
-export type { default as IVAlert } from '../alert/IVAlert.type.js';
+export type { default as IVAlert } from '../alert/IVAlert.type';
-export type { default as IVBadge } from '../badge/IVBadge.type.js';
+export type { default as IVBadge } from '../badge/IVBadge.type';
-export type { default as IVButton } from '../button/IVButton.type.js';
+export type { default as IVButton } from '../button/IVButton.type';
-export type { default as IVButtonGroup } from '../button/IVButton.type.js';
+export type { default as IVButtonGroup } from '../button/IVButton.type';
-export type { default as IVCheckbox } from '../checkbox/IVCheckbox.type.js';
+export type { default as IVCheckbox } from '../checkbox/IVCheckbox.type';
-export type { default as IVLink } from '../button/IVLink.type.js';
+export type { default as IVLink } from '../button/IVLink.type';
-export type { default as IVFileUpload } from '../file/IVFileUpload.type.js';
+export type { default as IVFileUpload } from '../file/IVFileUpload.type';
-export type { default as IVGroup } from '../group/IVGroup.type.js';
+export type { default as IVGroup } from '../group/IVGroup.type';
-export type { default as IVHint } from '../hint/IVHint.type.js';
+export type { default as IVHint } from '../hint/IVHint.type';
-export type { default as IVInput } from '../input/IVInput.type.js';
+export type { default as IVInput } from '../input/IVInput.type';
-export type { default as IVLabel } from '../label/IVLabel.type.js';
+export type { default as IVLabel } from '../label/IVLabel.type';
-export type { default as IVMessage } from '../message/IVMessage.type.js';
+export type { default as IVMessage } from '../message/IVMessage.type';
-export type { default as IVModal } from '../modal/IVModal.type.js';
+export type { default as IVModal } from '../modal/IVModal.type';
-export type { default as IVProgressBar } from '../progressbar/IVProgressBar.type.js';
+export type { default as IVProgressBar } from '../progressbar/IVProgressBar.type';
-export type { default as IVSelect } from '../select/IVSelect.type.js';
+export type { default as IVSelect } from '../select/IVSelect.type';
-export type { default as IVMenuBar } from '../menu/IVMenuBar.type.js';
+export type { default as IVMenuBar } from '../menu/IVMenuBar.type';
-export type { default as IVMenuBarItem } from '../menu/IVMenuBar.type.js';
+export type { default as IVMenuBarItem } from '../menu/IVMenuBar.type';

src/components/label/VLabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type IVLabel from './IVLabel.type.js';
+import type IVLabel from './IVLabel.type';
 import styles from '@visua/typography.module.css';
 import VHint from '../hint/VHint.vue';
 
@@ -14,7 +14,6 @@ const props = withDefaults(defineProps<IVLabel>(), {
 <template>
   <label
     :for="props.for"
-    class="label-container"
     :class="[styles['text-body-MD-standard-text-Regular'], {
       'label': props.type === 'default',
       'success': props.type === 'success',
@@ -24,14 +23,12 @@ const props = withDefaults(defineProps<IVLabel>(), {
     :aria-label="props.label"
     :aria-disabled="props.disabled"
   >
-    <span>
     {{ props.label }}
-      <template v-if="props.required">
+    <template v-if="props.required">
-        <span v-if="props.required" :class="{ 'required': !props.disabled}">
+      <span v-if="props.required" :class="{ 'required': !props.disabled}">
-          <slot name="required-tip">*</slot>
+        <slot name="required-tip">*</slot>
-        </span>
+      </span>
-      </template>
+    </template>
-    </span>
     <VHint
       v-if="props.hint"
       :title="props.hint"
@@ -41,18 +38,6 @@ const props = withDefaults(defineProps<IVLabel>(), {
 </template>
 
 <style lang="css" scoped>
-*{
-  padding: 0px;
-  margin: 0px;
-}
-
-.label-container{
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 0.25rem;
-}
-
 .label {color: var(--text-label-grey);}
 .success {color: var(--text-default-success);}
 .error {color: var(--text-default-error);}

src/components/menu/IVMenuBar.type.ts

@@ -86,8 +86,6 @@ export default interface IVMenuBar {
 
   /** Responsive breakpoints (e.g. Tailwind-style classes) */
   breakpoints?: string;
-
-  logoPath?: string;
 }
 
 

src/components/menu/VMenuBar.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import Menubar from 'primevue/menubar';
-import type IVMenuBar from './IVMenuBar.type.js';
+import type IVMenuBar from './IVMenuBar.type';
 import styles from '@visua/typography.module.css'
-import { useRoute } from 'vue-router';
 
 const props = withDefaults(defineProps<IVMenuBar>(), {
   searchbarId: 'searchbar-header',
@@ -12,11 +11,8 @@ const props = withDefaults(defineProps<IVMenuBar>(), {
   logoText: undefined,
   breakpoints: '960px',
   quickLinks: undefined,
-  menuLabel: undefined,
+  menuLabel: undefined
-  logoPath: '/home',
 })
-
-const route = useRoute();
 </script>
 
 <template>
@@ -27,7 +23,7 @@ const route = useRoute();
     class="p-menubar"
   >
     <template #start>
-      <RouterLink :to=props.logoPath class="logo-container">
+      <RouterLink to="/" class="logo-container">
         <div v-if="$slots.logo" class="logo">
           <slot name="logo"/>
         </div>
@@ -53,9 +49,7 @@ const route = useRoute();
         :tabindex="0"
         v-bind="props.action"
         class="item"
-        :class="[styles['text-body-LG-article-text-Regular'],
+        :class="[styles['text-body-LG-article-text-Regular']]"
-          item.to === route.path ? 'active' : ''
-        ]"
       >
         <slot name="itemicon" :item="item" v-if="'icon' in item">
           <i :class="[item.icon]"></i>
@@ -110,13 +104,7 @@ a{
 }
 
 .item:hover,
-.item.active{
+.item:active{
   color: var(--menu-active-color);
 }
-
-.item.active {
-  height: 100%;
-  font-weight: bold;
-}
-
 </style>

src/components/message/VMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type IVMessage from './IVMessage.type.js';
+import type IVMessage from './IVMessage.type';
 import Message from 'primevue/message';
 import VButton from '../button/VButton.vue';
 import { computed } from 'vue';

src/components/modal/IVModal.type.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'vue';
-import type IVButton from '../button/IVButton.type.js';
+import type IVButton from '../button/IVButton.type';
 import { type DialogBreakpoints } from 'primevue';
 import type { HintedString } from '@primevue/core';
 

src/components/progressbar/VProgressBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ProgressBar from 'primevue/progressbar';
-import type IVProgressBar from './IVProgressBar.type.js';
+import type IVProgressBar from './IVProgressBar.type';
 import { computed } from 'vue';
 
 const props = withDefaults(defineProps<IVProgressBar>(), {

src/components/select/VSelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Select, { type SelectSlots } from 'primevue/select';
+import Select from 'primevue/select';
-import type IVSelect from './IVSelect.type.js';
+import type IVSelect from './IVSelect.type';
 import { useId, computed, watch, ref } from 'vue';
 import VLabel from '../label/VLabel.vue';
 import VHint from '../hint/VHint.vue';
@@ -29,7 +29,9 @@ const props = withDefaults(defineProps<IVSelect>(), {
   selectionMessage: 'Elements sélectionnés',
   emptySelectionMessage: 'Aucun élément sélectionné',
   emptyFilterMessage: 'Aucun résultat trouvé',
-  emptyMessage: 'Aucune option disponible'
+  emptyMessage: 'Aucune option disponible',
+  optionTemplate: false,
+
 })
 
 const emit = defineEmits([
@@ -76,33 +78,6 @@ const labelState = computed(() => {
   else if(props.errorMessage && !props.successMessage && !props.disabled) return 'error';
   else return undefined
 })
-
-
-type VSelectSlots = SelectSlots & {
-  required?: (props: Record<string, unknown>) => unknown
-};
-
-const slots = defineSlots<VSelectSlots>();
-
-const selectSlotKeys = [
-  'value',
-  'header',
-  'footer',
-  'option',
-  'optiongroup',
-  'emptyfilter',
-  'empty',
-  'content',
-  'loader',
-  'clearicon',
-  'dropdownicon',
-  'loadingicon',
-  'filtericon'
-] as const;
-
-const availableSlots = computed(() =>
-  selectSlotKeys.filter((key) => !!slots[key]).map((key) => [key, slots[key]])
-);
 </script>
 
 <template>
@@ -111,13 +86,13 @@ const availableSlots = computed(() =>
       v-if="props.label"
       :for="props.selectId"
       :label="props.label"
-      :required="props.required && !props.disabled"
+      :required="!props.disabled"
       :disabled="props.disabled"
       :type="labelState"
       :hint="props.hint"
     >
       <template #required-type v-if="props.required">
-        <slot name="required"/>
+        <slot name="required-type"/>
       </template>
     </VLabel>
     <Select
@@ -166,12 +141,8 @@ const availableSlots = computed(() =>
         }
       ]"
     >
-      <template
+      <template v-if="props.optionTemplate" #option="{option, selected, index}">
-        v-for="([name]) in availableSlots"
+        <slot name="option" :option="option" :selected="selected" :index="index"/>
-        :key="name"
-        v-slot:[name]="slotProps"
-      >
-        <slot :name="name" v-bind="slotProps" />
       </template>
     </Select>
     <div
@@ -203,8 +174,6 @@ const availableSlots = computed(() =>
   --p-select-dropdown-color: var(--text-disabled-grey);
 }
 
-.p-select.error, .p-select.success{border-width: var(--large-border-width);}
-
 .p-select.error{
   --p-select-border-color: var(--border-plain-error);
   --p-select-hover-border-color: var(--border-plain-error);

src/components/table/VDataTable.vue

@@ -2,7 +2,6 @@
 import DataTable from 'primevue/datatable';
 import type { DataTableProps, DataTableSlots } from 'primevue/datatable';
 import { useId, ref, watch, computed } from 'vue';
-import styles from '@visua/typography.module.css';
 
 export interface IVDataTable extends Partial<Omit<DataTableProps, 'pt' | 'dt' | 'ptOptions' | 'unstyled'>>{
   id?: string
@@ -416,31 +415,11 @@ watch(localEditingRows, (newVal) => {
       <slot :name="name" v-bind="slotProps" />
     </template>
     <slot></slot>
-    <template #empty>
-      <div class="datatable-empty" :class="[styles['text-body-SM-detail-text-Regular']]">
-        <i class="ri-database-line database-icon"></i>
-        <span> Aucune donnée trouvée. </span>
-      </div>
-    </template>
   </DataTable>
 </template>
 
 <style lang="css" scoped>
-.datatable-empty{
+.p-datatable{
-  height: fit-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   box-sizing: border-box;
-  gap: 1.5rem;
-  margin-top: 1.5rem;
-}
-
-.database-icon{
-  padding: 0px;
-  margin: 0px;
-  display: block;
-  color: var(--border-contrast-grey);
-  font-size: 5rem;
 }
 </style>

src/env.d.ts

@@ -1,5 +0,0 @@
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
-  export default component;
-}

src/index.ts

@@ -1,121 +1,27 @@
-/**
- * Visua Design System Vue Component Library
- *
- * This file serves as the entry point for the library, exporting components, utilities,
- * and styles that make up the Visua Vue ecosystem.
- *
- * @module visua-vue
- */
-
-//////////////////////////
-// Component Exports //
-//////////////////////////
-
-/**
- * Accordion components
- */
 export { default as VAccordion } from './components/accordion/VAccordion.vue';
 export { default as VAccordionChild } from './components/accordion/VAccordionChild.vue';
-
-/**
- * Alert and notification components
- */
 export { default as VAlert } from './components/alert/VAlert.vue';
 export { default as VBadge } from './components/badge/VBadge.vue';
-export { default as VMessage } from './components/message/VMessage.vue';
-
-/**
- * Button and link components
- */
 export { default as VButton } from './components/button/VButton.vue';
 export { default as VButtonGroup } from './components/button/VButtonGroup.vue';
 export { default as VLink } from './components/button/VLink.vue';
-
-/**
- * Form input and control components
- */
 export { default as VCheckbox } from './components/checkbox/VCheckbox.vue';
-export { default as VInput } from './components/input/VInput.vue';
+export { default as VDivider } from './components/divider/VDivider.vue';
-export { default as VSelect } from './components/select/VSelect.vue';
 export { default as VFile } from './components/file/VFile.vue';
 export { default as VFileUpload } from './components/file/VFileUpload.vue';
 export { default as VLabelErrorProxy } from './components/file/VLabelErrorProxy.vue';
-export { default as VHint } from './components/hint/VHint.vue';
-export { default as VLabel } from './components/label/VLabel.vue';
-
-/**
- * Layout and grouping components
- */
-export { default as VDivider } from './components/divider/VDivider.vue';
 export { default as VGroup } from './components/group/VGroup.vue';
-export { default as VScrollPanel } from './components/scrollpanel/VScrollPanel.vue';
+export { default as VHint } from './components/hint/VHint.vue';
-
+export { default as VInput } from './components/input/VInput.vue';
-/**
+export { default as VLabel } from './components/label/VLabel.vue';
- * Navigation and menu components
- */
 export { default as VMenuBar } from './components/menu/VMenuBar.vue';
-
+export { default as VMessage } from './components/message/VMessage.vue';
-/**
- * Modal and overlay components
- */
 export { default as VModal } from './components/modal/VModal.vue';
 export { default as VConfirmModal } from './components/modal/VConfirmModal.vue';
-
-/**
- * Visual feedback components
- */
 export { default as VProgressBar } from './components/progressbar/VProgressBar.vue';
+export { default as VScrollPanel } from './components/scrollpanel/VScrollPanel.vue';
+export { default as VSelect } from './components/select/VSelect.vue';
 export { default as VDataTable } from './components/table/VDataTable.vue';
 
-//////////////////////////////////////
+export * from './components/composable';
-// Composables & Interfaces     //
+export * from './components/interface';
-//////////////////////////////////////
-
-/**
- * Composable functions (hooks)
- */
-export * from './components/composable/index.js';
-
-/**
- * Custom TypeScript interfaces
- */
-export * from './components/interface/index.js';
-
-//////////////////////
-// Global Styles //
-//////////////////////
-
-/**
- * Global and layout styles
- */
-import './assets/style/global.css';
-import './assets/style/primevue-configuration.css';
-
-/**
- * PrimeVue component-specific style overrides
- */
-import './assets/style/primevue-style/accordion.css';
-import './assets/style/primevue-style/button.css';
-import './assets/style/primevue-style/checkbox.css';
-import './assets/style/primevue-style/confirmdialog.css';
-import './assets/style/primevue-style/datatable.css';
-import './assets/style/primevue-style/dialog.css';
-import './assets/style/primevue-style/divider.css';
-import './assets/style/primevue-style/fileupload.css';
-import './assets/style/primevue-style/form.css';
-import './assets/style/primevue-style/iconfield.css';
-import './assets/style/primevue-style/input.css';
-import './assets/style/primevue-style/list.css';
-import './assets/style/primevue-style/menubar.css';
-import './assets/style/primevue-style/message.css';
-import './assets/style/primevue-style/navigation.css';
-import './assets/style/primevue-style/overlay.css';
-import './assets/style/primevue-style/paginator.css';
-import './assets/style/primevue-style/password.css';
-import './assets/style/primevue-style/progressbar.css';
-import './assets/style/primevue-style/scrollpanel.css';
-import './assets/style/primevue-style/select.css';
-import './assets/style/primevue-style/tag.css';
-import './assets/style/primevue-style/textarea.css';
-import './assets/style/primevue-style/toast.css';
-import './assets/style/primevue-style/various.css';

src/main.ts

@@ -4,13 +4,13 @@ import App from './App.vue'
 import primeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
 import ConfirmationService from 'primevue/confirmationservice'
-// import router from '../template/router'
+import router from '../template/router'
 
 const app = createApp(App)
 
 app.use(primeVue)
 app.use(ToastService)
 app.use(ConfirmationService)
-// app.use(router)
+app.use(router)
 
 app.mount('#app')

tsconfig.app.json

@@ -1,13 +1,10 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "test/VButton.spec.ts", "template/router.ts"],
-  "exclude": ["src/**/__tests__/*", "src/App.vue", "src/main.ts"],
+  "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "dist",
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "lib": ["es2022", "dom"],
+
     "paths": {
       "@/*": ["./src/*"],
       "@visua/*": ["./node_modules/@cellule-financiere-pmo/visua/output/*"]

tsconfig.json

@@ -1,20 +1,14 @@
 {
-  "compilerOptions": {
-    "types": ["vitest"],
-    "emitDeclarationOnly": true,
-    "declaration": true,
-    "outDir": "dist"
-  },
   "files": [],
   "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
     {
       "path": "./tsconfig.node.json"
     },
     {
-      "path": "./tsconfig.types.json"
+      "path": "./tsconfig.app.json"
     }
-  ]
+  ],
+  "compilerOptions": {
+    "types": ["vitest"]
+  }
 }

tsconfig.types.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "declaration": true,
-    "emitDeclarationOnly": true,
-    "outDir": "./dist",
-    "baseUrl": ".",
-    "module": "NodeNext",
-    "target": "ESNext",
-    "moduleResolution": "nodenext",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "allowJs": true,
-    "lib": ["es2022", "dom"],
-    "paths": {
-      "@/*": ["src/*"],
-      "@visua/*": ["node_modules/@cellule-financiere-pmo/visua/output/*"]
-    }
-  },
-  "include": ["src", "src/**/*.vue", "env.d.ts"],
-  "exclude": ["src/**/__tests__/*", "src/App.vue", "src/main.ts"]
-}

vite.config.ts

@@ -1,14 +1,14 @@
 // vite.config.ts
-import { fileURLToPath, URL } from 'node:url'
+import { fileURLToPath, URL } from 'node:url';
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue'
+import vue from '@vitejs/plugin-vue';
-import vueDevTools from 'vite-plugin-vue-devtools'
+import vueDevTools from 'vite-plugin-vue-devtools';
-import path from 'path'
+import path from 'path';
 
 export default defineConfig({
   plugins: [
     vue(),
-    vueDevTools()
+    vueDevTools(),
   ],
   resolve: {
     alias: {
@@ -20,19 +20,16 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),
       name: 'VisuaVue',
-      fileName: (format) => format === 'es' ? 'visua-vue.es.js' : 'visua-vue.umd.cjs',
+      fileName: 'visua-vue',
       formats: ['es', 'umd'],
     },
     rollupOptions: {
-      external: ['vue', 'primevue', 'vue-router', 'primeicons'],
+      external: ['vue'],
       output: {
         globals: {
           vue: 'Vue',
-          primevue: 'PrimeVue',
-          'vue-router': 'VueRouter',
-          primeicons: 'primeicons'
         },
       },
     },
   },
-})
+});

vue-shim.d.ts

@@ -1,4 +0,0 @@
-declare module '*.vue' {
-  const component: unknown;
-  export default component;
-}