Compare commits
No commits in common. "main" and "v1.0.13" have entirely different histories.
34
CHANGELOG.md
34
CHANGELOG.md
|
|
@ -5,40 +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
|
||||
|
||||
## [1.0.14] - 2025-07-29
|
||||
### fixed
|
||||
- Package publication error fixed
|
||||
- Component export file configuration
|
||||
|
||||
## [1.0.13] - 2025-07-29
|
||||
### Added
|
||||
- Data table compoenent
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
# visua-vue
|
||||
|
||||
**Current version: v1.0.28**
|
||||
**Current version: v1.0.13**
|
||||
8
env.d.ts
vendored
8
env.d.ts
vendored
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
1342
package-lock.json
generated
1342
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
65
package.json
65
package.json
|
|
@ -1,41 +1,21 @@
|
|||
{
|
||||
"name": "@cellule-financiere-pmo/visua-vue",
|
||||
"version": "1.0.28",
|
||||
"version": "1.0.13",
|
||||
"type": "module",
|
||||
"description": "Vue.js components of the Visua Design System.",
|
||||
"main": "./dist/visua-vue.umd.cjs",
|
||||
"module": "./dist/visua-vue.es.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"require": "./dist/visua-vue.umd.cjs",
|
||||
"import": "./dist/visua-vue.es.js"
|
||||
}
|
||||
},
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"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": "run-p type-check \"build-only {@}\" --",
|
||||
"preview": "vite preview",
|
||||
"build-only": "vite build",
|
||||
"type-check": "vue-tsc --build",
|
||||
"lint": "eslint . --fix",
|
||||
"test": "vitest --config vitest.config.ts",
|
||||
"test:unit": "vitest run --coverage",
|
||||
"preview": "vite preview"
|
||||
"test:unit": "vitest run --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"@cellule-financiere-pmo/visua": "1.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@cellule-financiere-pmo/visua": "1.1.3",
|
||||
"jsdom": "^26.1.0",
|
||||
"primevue": "^4.3.6",
|
||||
"vite-plugin-inspect": "^11.3.0",
|
||||
"vue": "^3.5.17",
|
||||
"vue-router": "^4.5.1"
|
||||
},
|
||||
|
|
@ -50,37 +30,28 @@
|
|||
"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"
|
||||
},
|
||||
"description": "**Current version: v0.0.0**",
|
||||
"main": "index.js",
|
||||
"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"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://gitlab.com/cellule-financiere-pmo/design-system/visua-vue/issues"
|
||||
},
|
||||
"homepage": "https://gitlab.com/cellule-financiere-pmo/design-system/visua-vue#readme",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"typescript",
|
||||
"design-system",
|
||||
"components",
|
||||
"vite",
|
||||
"library"
|
||||
],
|
||||
"author": {
|
||||
"name": "CGI",
|
||||
"url": "https://www.cgi.com"
|
||||
},
|
||||
"license": "ISC"
|
||||
"files": [
|
||||
"src/components/*",
|
||||
"src/assets/style/*"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
16
src/App.vue
16
src/App.vue
|
|
@ -14,8 +14,6 @@
|
|||
// import VModalView from '../template/VModalView.vue';
|
||||
// import VConfirmModalView from '../template/VConfirmModalView.vue';
|
||||
import VDataTableView from '../template/VDataTableView.vue';
|
||||
// import VMenuBarView from '../template/VMenuBarView.vue'
|
||||
// import VDataTable from './components/table/VDataTable.vue';
|
||||
</script>
|
||||
|
||||
|
||||
|
|
@ -26,8 +24,8 @@ import VDataTableView from '../template/VDataTableView.vue';
|
|||
<!-- <VAccordionView/> -->
|
||||
<!-- <VInputView/> -->
|
||||
<!-- <VCheckboxView/> -->
|
||||
<!-- <VBadgeView/>-->
|
||||
<!-- <VSelectView/> -->
|
||||
<!-- <VBadgeView/>
|
||||
<VSelectView/> -->
|
||||
<!-- <VProgressBarView/> -->
|
||||
<!-- <VMessageView/> -->
|
||||
<!-- <VFileUploadView/> -->
|
||||
|
|
@ -35,14 +33,4 @@ import VDataTableView from '../template/VDataTableView.vue';
|
|||
<!-- <VModalView/> -->
|
||||
<!-- <VConfirmModalView/> -->
|
||||
<VDataTableView/>
|
||||
<!-- <RouterView/> -->
|
||||
<!-- <VMenuBarView/> -->
|
||||
<!-- <VDataTable/> -->
|
||||
</template>
|
||||
<style lang="css" scoped>
|
||||
*{
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,4 @@ html {
|
|||
font-size: 16px;
|
||||
font-family: var(--font-family-primary);
|
||||
font-style: normal;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
/* menu */
|
||||
--menu-container-border-color: var(--border-default-grey);
|
||||
--menu-border-width: 0px 0px 0px var(--large-border-width);
|
||||
--menu-default-background: var(--background-default-grey);
|
||||
--menu-default-background: var(--background-transparent);
|
||||
--menu-default-color: var(--text-default-grey);
|
||||
--menu-active-color: var(--text-active-blue-france);
|
||||
--menu-hover-background: var(--background-transparent-active);
|
||||
|
|
@ -41,5 +41,4 @@
|
|||
--menu-indent: 1rem;
|
||||
--menu-border-color: transparent;
|
||||
--menu-border-color-active: var(--border-active-blue-france);
|
||||
--menu-border-radius: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,5 +21,3 @@
|
|||
@import './primevue-style/datatable.css';
|
||||
@import './primevue-style/paginator.css';
|
||||
@import './primevue-style/list.css';
|
||||
@import './primevue-style/menubar.css';
|
||||
@import './primevue-style/navigation.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-lg-padding: 1rem;
|
||||
--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: 0.75rem;
|
||||
--p-datatable-footer-cell-lg-padding: 1rem;
|
||||
--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: 0.75rem;
|
||||
--p-datatable-body-cell-lg-padding: 1rem;
|
||||
--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-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-header-cell-background: var(--primary-color-850-blue-france-default);
|
||||
--p-datatable-header-cell-hover-background: var(--primary-color-850-blue-france-hover);
|
||||
--p-datatable-header-cell-selected-background: var(--primary-color-850-blue-france-active);
|
||||
--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: 0.75rem;
|
||||
--p-datatable-header-cell-lg-padding: 1rem;
|
||||
--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);
|
||||
|
|
@ -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-lg-padding: 1rem;
|
||||
--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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
:root {
|
||||
--p-menubar-mobile-button-border-radius: var(--menu-border-radius);
|
||||
--p-menubar-mobile-button-size: 1.75rem;
|
||||
--p-menubar-mobile-button-color: var(--text-active-blue-france);
|
||||
--p-menubar-mobile-button-hover-color: var(--text-active-blue-france);
|
||||
--p-menubar-mobile-button-hover-background: var(--background-transparent-active);
|
||||
--p-menubar-mobile-button-focus-ring-width: var(--focus-width);
|
||||
--p-menubar-mobile-button-focus-ring-style: var(--focus-style);
|
||||
--p-menubar-mobile-button-focus-ring-color: var(--focus-color);
|
||||
--p-menubar-mobile-button-focus-ring-offset: var(--focus-offset);
|
||||
/* --p-menubar-mobile-button-focus-ring-shadow: */
|
||||
--p-menubar-separator-border-color: var(--border-default-grey);
|
||||
--p-menubar-submenu-padding: var(--p-navigation-list-padding);
|
||||
--p-menubar-submenu-gap: var(--p-navigation-list-gap);
|
||||
--p-menubar-submenu-background: var(--background-transparent);
|
||||
--p-menubar-submenu-border-color: var(--border-default-grey);
|
||||
--p-menubar-submenu-border-radius: var(--menu-border-radius);
|
||||
--p-menubar-submenu-shadow: var(--shadow);
|
||||
--p-menubar-submenu-mobile-indent: 1rem;
|
||||
--p-menubar-submenu-icon-size: var(--p-navigation-submenu-icon-size);
|
||||
--p-menubar-submenu-icon-color: var(--p-navigation-submenu-icon-color);
|
||||
--p-menubar-submenu-icon-focus-color: var(--p-navigation-submenu-icon-focus-color);
|
||||
--p-menubar-submenu-icon-active-color: var(--p-navigation-submenu-icon-active-color);
|
||||
--p-menubar-item-focus-background: var(--p-navigation-item-focus-background);
|
||||
--p-menubar-item-active-background: var(--p-navigation-item-active-background);
|
||||
--p-menubar-item-color: var(--p-navigation-item-color);
|
||||
--p-menubar-item-focus-color: var(--p-navigation-item-focus-color);
|
||||
--p-menubar-item-active-color: var(--p-navigation-item-active-color);
|
||||
--p-menubar-item-padding: var(--p-navigation-item-padding);
|
||||
--p-menubar-item-border-radius: var(--p-navigation-item-border-radius);
|
||||
--p-menubar-item-gap: var(--p-navigation-item-gap);
|
||||
--p-menubar-item-icon-color: var(--p-navigation-item-icon-color);
|
||||
--p-menubar-item-icon-focus-color: var(--p-navigation-item-icon-focus-color);
|
||||
--p-menubar-item-icon-active-color: var(--p-navigation-item-icon-active-color);
|
||||
--p-menubar-base-item-border-radius: var(--menu-border-radius);
|
||||
--p-menubar-base-item-padding: var(--p-navigation-item-padding);
|
||||
--p-menubar-background: var(--background-transparent);
|
||||
--p-menubar-border-color: var(--border-default-grey);
|
||||
--p-menubar-border-radius: var(--menu-border-radius);
|
||||
--p-menubar-color: var(--menu-default-color);
|
||||
--p-menubar-gap: 0.5rem;
|
||||
--p-menubar-padding: var(--menu-padding);
|
||||
--p-menubar-transition-duration: var(--transition-duration);
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
:root{
|
||||
--p-navigation-submenu-icon-size: 0.875rem;
|
||||
--p-navigation-submenu-label-padding: var(--menu-padding);
|
||||
--p-navigation-submenu-label-font-weight: var( --titles-H4-SM-weight);
|
||||
--p-navigation-item-padding: calc(var(--menu-padding) * 3);
|
||||
--p-navigation-item-border-radius: var(--p-border-radius-sm);
|
||||
--p-navigation-item-gap: var(--menu-item-gap);
|
||||
--p-navigation-list-padding: var(--menu-padding);
|
||||
--p-navigation-list-gap: var(--menu-gap);
|
||||
--p-navigation-submenu-icon-color: var(--menu-default-color);
|
||||
--p-navigation-submenu-icon-focus-color: var(--menu-active-color);
|
||||
--p-navigation-submenu-icon-active-color: var(--menu-active-color);
|
||||
--p-navigation-submenu-label-background: var(--menu-default-background);
|
||||
--p-navigation-submenu-label-color: var(--menu-default-color);
|
||||
--p-navigation-item-focus-background: var(--menu-default-background);
|
||||
--p-navigation-item-active-background: var(--menu-default-background);
|
||||
--p-navigation-item-color: var(--menu-default-color);
|
||||
--p-navigation-item-focus-color: var(--menu-active-color);
|
||||
--p-navigation-item-active-color: var(--menu-active-color);
|
||||
--p-navigation-item-icon-color: var(--menu-default-color);
|
||||
--p-navigation-item-icon-focus-color: var(--menu-active-color);
|
||||
--p-navigation-item-icon-active-color: var(--menu-active-color);
|
||||
}
|
||||
|
|
@ -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>(), {
|
||||
|
|
|
|||
|
|
@ -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>(), {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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>(), {
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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>(), {
|
||||
|
|
|
|||
|
|
@ -1,2 +0,0 @@
|
|||
export * from './useAlert.js';
|
||||
export * from './useConfirmModal.js';
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -6,20 +6,16 @@ import VButton from '../button/VButton.vue';
|
|||
import VButtonGroup from '../button/VButtonGroup.vue';
|
||||
import VFile from './VFile.vue';
|
||||
import VMessage from '../message/VMessage.vue';
|
||||
import VScrollPanel from '../scrollpanel/VScrollPanel.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 hasSystemError = ref(false);
|
||||
const systemErrorMessage = ref('');
|
||||
|
||||
|
||||
const hasActiveError = ref(false);
|
||||
|
||||
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;
|
||||
|
||||
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}>}`;
|
||||
|
||||
hasActiveError.value = true;
|
||||
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';
|
||||
return 'default';
|
||||
});
|
||||
|
||||
if(!hasActiveError.value && !props.disabled) return 'default';
|
||||
else if(hasActiveError.value && !props.disabled) return 'error';
|
||||
else return undefined
|
||||
})
|
||||
|
||||
type MessageType = 'alert' | 'warning' | 'success' | 'info';
|
||||
|
||||
|
|
@ -234,27 +222,27 @@ 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"
|
||||
:title="globalStatusMessage.title"
|
||||
/>
|
||||
<VScrollPanel height="20rem">
|
||||
<VScrollpanel height="20rem">
|
||||
<div class="file-area">
|
||||
<div v-if="slotProps.files.length > 0" class="file-non-uploaded-area">
|
||||
<VFile
|
||||
|
|
@ -281,9 +269,9 @@ const globalStatusMessage = computed<{
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VScrollPanel>
|
||||
</VScrollpanel>
|
||||
</div>
|
||||
<div v-if="!props.advanced && !(hasValidationError || hasSystemError)">
|
||||
<div v-if="!props.advanced && !hasActiveError">
|
||||
<VFile
|
||||
v-if="lastSelectedFile"
|
||||
:file="lastSelectedFile"
|
||||
|
|
@ -302,17 +290,14 @@ const globalStatusMessage = computed<{
|
|||
aria-live="polite"
|
||||
>
|
||||
<VHint
|
||||
v-for="message of [...(slotProps.messages ?? []), ...(hasSystemError ? [systemErrorMessage] : [])]"
|
||||
v-for="message of slotProps.messages"
|
||||
:key="message"
|
||||
:title="message"
|
||||
type="alert"
|
||||
icon
|
||||
/>
|
||||
</div>
|
||||
<VLabelErrorProxy
|
||||
:hasError="(slotProps.messages ?? []).length > 0"
|
||||
@update:error="hasValidationError = $event"
|
||||
/>
|
||||
<VLabelErrorProxy :hasError="(slotProps.messages ?? []).length > 0" @update:error="hasActiveError = $event" />
|
||||
</template>
|
||||
</FileUpload>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
export type { default as IVAccordion } from '../accordion/IVAccordion.type.js';
|
||||
export type { default as IVAlert } from '../alert/IVAlert.type.js';
|
||||
export type { default as IVBadge } from '../badge/IVBadge.type.js';
|
||||
export type { default as IVButton } from '../button/IVButton.type.js';
|
||||
export type { default as IVButtonGroup } from '../button/IVButton.type.js';
|
||||
export type { default as IVCheckbox } from '../checkbox/IVCheckbox.type.js';
|
||||
export type { default as IVLink } from '../button/IVLink.type.js';
|
||||
export type { default as IVFileUpload } from '../file/IVFileUpload.type.js';
|
||||
export type { default as IVGroup } from '../group/IVGroup.type.js';
|
||||
export type { default as IVHint } from '../hint/IVHint.type.js';
|
||||
export type { default as IVInput } from '../input/IVInput.type.js';
|
||||
export type { default as IVLabel } from '../label/IVLabel.type.js';
|
||||
export type { default as IVMessage } from '../message/IVMessage.type.js';
|
||||
export type { default as IVModal } from '../modal/IVModal.type.js';
|
||||
export type { default as IVProgressBar } from '../progressbar/IVProgressBar.type.js';
|
||||
export type { default as IVSelect } from '../select/IVSelect.type.js';
|
||||
export type { default as IVMenuBar } from '../menu/IVMenuBar.type.js';
|
||||
export type { default as IVMenuBarItem } from '../menu/IVMenuBar.type.js';
|
||||
|
|
@ -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">
|
||||
<span v-if="props.required" :class="{ 'required': !props.disabled}">
|
||||
<slot name="required-tip">*</slot>
|
||||
</span>
|
||||
</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);}
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
import type { HTMLAttributes } from "vue"
|
||||
import type { RouteLocationRaw } from "vue-router"
|
||||
import type { MenuItem } from "primevue/menuitem"
|
||||
/**
|
||||
* Describes a link or button item in a menu bar.
|
||||
*/
|
||||
export interface IVMenuBarLinks {
|
||||
/** Whether the item should be rendered as a button */
|
||||
button?: boolean;
|
||||
|
||||
/** Name of the icon to display on the left */
|
||||
icon?: string;
|
||||
|
||||
/** Whether the icon appears on the right side */
|
||||
iconRight?: boolean;
|
||||
|
||||
/** Text label for the item */
|
||||
label?: string;
|
||||
|
||||
/** Target URL if rendered as an anchor (<a>) */
|
||||
target?: string;
|
||||
|
||||
/** Callback executed when the item is clicked */
|
||||
onClick?: ($event: MouseEvent) => void;
|
||||
|
||||
/** Navigation route */
|
||||
to?: RouteLocationRaw;
|
||||
}
|
||||
|
||||
/**
|
||||
* Extends PrimeVue's MenuItem with optional routing capabilities.
|
||||
* Excludes 'style' and 'class' to avoid conflicts with Vue attributes.
|
||||
*/
|
||||
export interface IVMenuBarItem
|
||||
extends Partial<Omit<MenuItem, 'style' | 'class'>>,
|
||||
Partial<Pick<IVMenuBarLinks, 'to'>> {}
|
||||
|
||||
/**
|
||||
* Interface for configuring a customizable menu bar component.
|
||||
*/
|
||||
export default interface IVMenuBar {
|
||||
/** HTML id for the searchbar input */
|
||||
searchbarId?: string;
|
||||
|
||||
/** Title of the service or application */
|
||||
serviceTitle?: string;
|
||||
|
||||
/** Description of the service */
|
||||
serviceDescription?: string;
|
||||
|
||||
/** Text displayed beside the logo (can be multiline) */
|
||||
logoText?: string | string[];
|
||||
|
||||
/** Whether to show the logo */
|
||||
logo?: boolean;
|
||||
|
||||
/** Bound model value for the search input */
|
||||
modelValue?: string;
|
||||
|
||||
/** Placeholder text for the search input */
|
||||
placeholder?: string;
|
||||
|
||||
/** List of quick link items with additional HTML attributes */
|
||||
quickLinks?: (IVMenuBarItem & HTMLAttributes)[];
|
||||
|
||||
/** Label for the search input (accessibility) */
|
||||
searchLabel?: string;
|
||||
|
||||
/** ARIA label for the quick links section */
|
||||
quickLinksAriaLabel?: string;
|
||||
|
||||
/** Whether to display the search bar */
|
||||
showSearch?: boolean;
|
||||
|
||||
/** Label describing the search bar visibility */
|
||||
showSearchLabel?: string;
|
||||
|
||||
/** Label for the main menu toggle button */
|
||||
menuLabel?: string;
|
||||
|
||||
/** Label used in modal menus */
|
||||
menuModalLabel?: string;
|
||||
|
||||
/** Label for closing the modal menu */
|
||||
closeMenuModalLabel?: string;
|
||||
|
||||
/** Responsive breakpoints (e.g. Tailwind-style classes) */
|
||||
breakpoints?: string;
|
||||
|
||||
logoPath?: string;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import Menubar from 'primevue/menubar';
|
||||
import type IVMenuBar from './IVMenuBar.type.js';
|
||||
import styles from '@visua/typography.module.css'
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
const props = withDefaults(defineProps<IVMenuBar>(), {
|
||||
searchbarId: 'searchbar-header',
|
||||
serviceTitle: undefined,
|
||||
serviceDescription: undefined,
|
||||
logo: false,
|
||||
logoText: undefined,
|
||||
breakpoints: '960px',
|
||||
quickLinks: undefined,
|
||||
menuLabel: undefined,
|
||||
logoPath: '/home',
|
||||
})
|
||||
|
||||
const route = useRoute();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Menubar
|
||||
role="banner"
|
||||
:model="props.quickLinks"
|
||||
:breakpoint="props.breakpoints"
|
||||
class="p-menubar"
|
||||
>
|
||||
<template #start>
|
||||
<RouterLink :to=props.logoPath class="logo-container">
|
||||
<div v-if="$slots.logo" class="logo">
|
||||
<slot name="logo"/>
|
||||
</div>
|
||||
<span
|
||||
v-if="!!props.serviceTitle"
|
||||
:class="[styles['titles-H6-XXS']]"
|
||||
style="color: var(--text-title-grey);"
|
||||
>
|
||||
{{ props.serviceTitle }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
</template>
|
||||
<template #end>
|
||||
<slot name="end"/>
|
||||
</template>
|
||||
<template #item="{ item, props, hasSubmenu }">
|
||||
<component
|
||||
v-if="hasSubmenu || 'label' in item || 'icon' in item"
|
||||
:is="item.to ? 'RouterLink' : item.url ? 'a' : 'div'"
|
||||
:to="item.to"
|
||||
:href="item.url"
|
||||
:target="item.target"
|
||||
:tabindex="0"
|
||||
v-bind="props.action"
|
||||
class="item"
|
||||
: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>
|
||||
</slot>
|
||||
<span v-if="'label' in item" style="width: 100%;">{{ item.label }}</span>
|
||||
<slot name="submenuicon" v-if="hasSubmenu">
|
||||
<i class="ri-arrow-down-s-line"/>
|
||||
</slot>
|
||||
</component>
|
||||
</template>
|
||||
<template #button="{id, toggleCallback}">
|
||||
<slot name="button" :id="id" :toggleCallback="toggleCallback"/>
|
||||
</template>
|
||||
<template #buttonicon>
|
||||
<slot name="buttonicon"/>
|
||||
</template>
|
||||
</Menubar>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
*{
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: var(--p-menubar-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo{
|
||||
display: block;
|
||||
width: 25%;
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.logo-container{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: fit-content;
|
||||
gap: var(--p-menubar-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-menubar{
|
||||
width: 100%;
|
||||
height: 4.5rem;
|
||||
border-width: 0px 0px var(--border-width) 0px;
|
||||
border-style: solid;
|
||||
border-color: var(--p-menubar-border-color);
|
||||
}
|
||||
|
||||
.item:hover,
|
||||
.item.active{
|
||||
color: var(--menu-active-color);
|
||||
}
|
||||
|
||||
.item.active {
|
||||
height: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
|
|||
|
|
@ -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>(), {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import Select, { type SelectSlots } from 'primevue/select';
|
||||
import type IVSelect from './IVSelect.type.js';
|
||||
import Select from 'primevue/select';
|
||||
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
|
||||
v-for="([name]) in availableSlots"
|
||||
:key="name"
|
||||
v-slot:[name]="slotProps"
|
||||
>
|
||||
<slot :name="name" v-bind="slotProps" />
|
||||
<template v-if="props.optionTemplate" #option="{option, selected, index}">
|
||||
<slot name="option" :option="option" :selected="selected" :index="index"/>
|
||||
</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);
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.p-datatable{
|
||||
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>
|
||||
|
|
|
|||
5
src/env.d.ts
vendored
5
src/env.d.ts
vendored
|
|
@ -1,5 +0,0 @@
|
|||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
|
||||
export default component;
|
||||
}
|
||||
121
src/index.ts
121
src/index.ts
|
|
@ -1,121 +0,0 @@
|
|||
/**
|
||||
* 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 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';
|
||||
|
||||
/**
|
||||
* Navigation and menu components
|
||||
*/
|
||||
export { default as VMenuBar } from './components/menu/VMenuBar.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 VDataTable } from './components/table/VDataTable.vue';
|
||||
|
||||
//////////////////////////////////////
|
||||
// Composables & Interfaces //
|
||||
//////////////////////////////////////
|
||||
|
||||
/**
|
||||
* 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';
|
||||
|
|
@ -4,13 +4,11 @@ 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'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(primeVue)
|
||||
app.use(ToastService)
|
||||
app.use(ConfirmationService)
|
||||
// app.use(router)
|
||||
|
||||
app.mount('#app')
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
|
||||
"exclude": ["src/**/__tests__/*", "src/App.vue", "src/main.ts"],
|
||||
"include": ["env.d.ts", "src/**/*", "src/**/*.vue", "test/VButton.spec.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/*"]
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
|
|
@ -1,38 +1,24 @@
|
|||
// vite.config.ts
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
import { defineConfig } from 'vite'
|
||||
import { defineConfig } from 'vitest/config'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueDevTools from 'vite-plugin-vue-devtools'
|
||||
import path from 'path'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
vueDevTools()
|
||||
vueDevTools(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@visua': path.resolve(__dirname, './node_modules/@cellule-financiere-pmo/visua/output'),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
lib: {
|
||||
entry: path.resolve(__dirname, 'src/index.ts'),
|
||||
name: 'VisuaVue',
|
||||
fileName: (format) => format === 'es' ? 'visua-vue.es.js' : 'visua-vue.umd.cjs',
|
||||
formats: ['es', 'umd'],
|
||||
},
|
||||
rollupOptions: {
|
||||
external: ['vue', 'primevue', 'vue-router', 'primeicons'],
|
||||
output: {
|
||||
globals: {
|
||||
vue: 'Vue',
|
||||
primevue: 'PrimeVue',
|
||||
'vue-router': 'VueRouter',
|
||||
primeicons: 'primeicons'
|
||||
},
|
||||
},
|
||||
'@visua': path.resolve(__dirname, './node_modules/@cellule-financiere-pmo/visua/output')
|
||||
},
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['test/**/*.spec.ts'],
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
// vitest.config.ts
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import path from 'path';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
'@visua': path.resolve(__dirname, './node_modules/@cellule-financiere-pmo/visua/output'),
|
||||
},
|
||||
},
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
include: ['test/**/*.spec.ts'],
|
||||
},
|
||||
});
|
||||
4
vue-shim.d.ts
vendored
4
vue-shim.d.ts
vendored
|
|
@ -1,4 +0,0 @@
|
|||
declare module '*.vue' {
|
||||
const component: unknown;
|
||||
export default component;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user