From 46e675462951d6684b559f745cb91d26132c5060 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Mon, 6 May 2024 10:20:39 -0400 Subject: [PATCH 1/8] feat: Add/create @cdssnc/gcds-components-vue package --- .github/workflows/compile-and-publish.yml | 5 + .gitignore | 3 +- package-lock.json | 187 +++- package.json | 3 +- packages/vue/README.md | 125 +++ packages/vue/lib/components.ts | 449 ++++++++ packages/vue/lib/index.ts | 2 + packages/vue/lib/plugin.ts | 10 + packages/vue/lib/vue-component-lib/utils.ts | 215 ++++ packages/vue/package-lock.json | 1054 +++++++++++++++++++ packages/vue/package.json | 37 + packages/vue/tsconfig.json | 13 + packages/web/package.json | 1 + packages/web/scripts/copyCSSFile.js | 1 + packages/web/stencil.config.ts | 5 + tsconfig.json | 3 + 16 files changed, 2095 insertions(+), 18 deletions(-) create mode 100644 packages/vue/README.md create mode 100644 packages/vue/lib/components.ts create mode 100644 packages/vue/lib/index.ts create mode 100644 packages/vue/lib/plugin.ts create mode 100644 packages/vue/lib/vue-component-lib/utils.ts create mode 100644 packages/vue/package-lock.json create mode 100644 packages/vue/package.json create mode 100644 packages/vue/tsconfig.json diff --git a/.github/workflows/compile-and-publish.yml b/.github/workflows/compile-and-publish.yml index 80c454f47..ddd9d3026 100644 --- a/.github/workflows/compile-and-publish.yml +++ b/.github/workflows/compile-and-publish.yml @@ -106,6 +106,11 @@ jobs: - name: "@cdssnc/gcds-components-angular" package: "./packages/angular" dist: "./packages/angular/dist" + + - name: "@cdssnc/gcds-components-vue" + package: "./packages/vue" + dist: "./packages/vue" + steps: - name: Git Checkout uses: actions/checkout@1d96c772d19495a3b5c517cd2bc0cb401ea0529f # v4.1.3 diff --git a/.gitignore b/.gitignore index dd9195989..387a3620f 100644 --- a/.gitignore +++ b/.gitignore @@ -45,4 +45,5 @@ UserInterfaceState.xcuserstate .env # Duplicate global css file -packages/react/gcds.css \ No newline at end of file +packages/react/gcds.css +packages/vue/gcds.css \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2dce4d800..dcaec24c3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "workspaces": [ "packages/web", "packages/angular", - "packages/react" + "packages/react", + "packages/vue" ], "dependencies": { "@angular/animations": "^16.2.3", @@ -1117,9 +1118,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", - "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz", + "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==", "bin": { "parser": "bin/babel-parser.js" }, @@ -2740,6 +2741,10 @@ "resolved": "packages/react", "link": true }, + "node_modules/@cdssnc/gcds-components-vue": { + "resolved": "packages/vue", + "link": true + }, "node_modules/@cdssnc/gcds-tokens": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/@cdssnc/gcds-tokens/-/gcds-tokens-1.11.1.tgz", @@ -7696,6 +7701,15 @@ "@stencil/core": ">=2.0.0 || >=3.0.0-beta.0 || >= 4.0.0-beta.0 || >= 4.0.0" } }, + "node_modules/@stencil/vue-output-target": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz", + "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==", + "dev": true, + "peerDependencies": { + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" + } + }, "node_modules/@storybook/addon-a11y": { "version": "7.6.10", "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.10.tgz", @@ -11805,6 +11819,114 @@ "vite": "^3.0.0 || ^4.0.0" } }, + "node_modules/@vue/compiler-core": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.26.tgz", + "integrity": "sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.24.4", + "@vue/shared": "3.4.26", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.26.tgz", + "integrity": "sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.26.tgz", + "integrity": "sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.24.4", + "@vue/compiler-core": "3.4.26", + "@vue/compiler-dom": "3.4.26", + "@vue/compiler-ssr": "3.4.26", + "@vue/shared": "3.4.26", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.10", + "postcss": "^8.4.38", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-sfc/node_modules/magic-string": { + "version": "0.30.10", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", + "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.26.tgz", + "integrity": "sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/reactivity": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.26.tgz", + "integrity": "sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==", + "dev": true, + "dependencies": { + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.26.tgz", + "integrity": "sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==", + "dev": true, + "dependencies": { + "@vue/reactivity": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.26.tgz", + "integrity": "sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==", + "dev": true, + "dependencies": { + "@vue/runtime-core": "3.4.26", + "@vue/shared": "3.4.26", + "csstype": "^3.1.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.26.tgz", + "integrity": "sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==", + "dev": true, + "dependencies": { + "@vue/compiler-ssr": "3.4.26", + "@vue/shared": "3.4.26" + }, + "peerDependencies": { + "vue": "3.4.26" + } + }, + "node_modules/@vue/shared": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz", + "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==", + "dev": true + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -33419,9 +33541,9 @@ } }, "node_modules/postcss": { - "version": "8.4.33", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz", - "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==", + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", "dev": true, "funding": [ { @@ -33440,7 +33562,7 @@ "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.0", - "source-map-js": "^1.0.2" + "source-map-js": "^1.2.0" }, "engines": { "node": "^10 || ^12 || >=14" @@ -36884,9 +37006,9 @@ } }, "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", "dev": true, "engines": { "node": ">=0.10.0" @@ -39625,6 +39747,27 @@ "node": ">=0.10.0" } }, + "node_modules/vue": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.26.tgz", + "integrity": "sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.4.26", + "@vue/compiler-sfc": "3.4.26", + "@vue/runtime-dom": "3.4.26", + "@vue/server-renderer": "3.4.26", + "@vue/shared": "3.4.26" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/w3c-hr-time": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz", @@ -40939,22 +41082,22 @@ }, "packages/angular": { "name": "@cdssnc/gcds-components-angular", - "version": "0.18.1", + "version": "0.20.0", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/common": "^16.0.0", "@angular/core": "^16.0.0", - "@cdssnc/gcds-components": "^0.18.1" + "@cdssnc/gcds-components": "^0.20.0" } }, "packages/react": { "name": "@cdssnc/gcds-components-react", - "version": "0.18.1", + "version": "0.20.0", "license": "MIT", "dependencies": { - "@cdssnc/gcds-components": "^0.18.1" + "@cdssnc/gcds-components": "^0.20.0" }, "devDependencies": { "@types/react": "^18.2.48", @@ -40964,9 +41107,20 @@ "typescript": "~5.1.0" } }, + "packages/vue": { + "name": "@cdssnc/gcds-components-vue", + "version": "0.20.0", + "license": "ISC", + "dependencies": { + "@cdssnc/gcds-components": "^0.20.0" + }, + "devDependencies": { + "vue": "^3.4.26" + } + }, "packages/web": { "name": "@cdssnc/gcds-components", - "version": "0.18.1", + "version": "0.20.0", "license": "MIT", "dependencies": { "@stencil/core": "^4.7.2", @@ -40985,6 +41139,7 @@ "@stencil/angular-output-target": "^0.8.1", "@stencil/postcss": "^2.1.0", "@stencil/sass": "^3.0.0-0", + "@stencil/vue-output-target": "^0.8.8", "@storybook/addon-actions": "^7.4.0", "@storybook/addon-essentials": "^7.4.0", "@storybook/addon-interactions": "^7.4.0", diff --git a/package.json b/package.json index 0ef28e558..c7d35eb46 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,8 @@ "workspaces": [ "packages/web", "packages/angular", - "packages/react" + "packages/react", + "packages/vue" ], "license": "MIT" } diff --git a/packages/vue/README.md b/packages/vue/README.md new file mode 100644 index 000000000..95bb0b7ba --- /dev/null +++ b/packages/vue/README.md @@ -0,0 +1,125 @@ +[La version française suit.](#composants-de-système-de-design-gc--react) + +# GC Design System Components – Vue + +GC Design System Components – Vue provides the [GC Design System Components](https://github.com/cds-snc/gcds-components/tree/main/packages/web) within a Vue wrapper to ease integration of the components into Vue apps. + +## Documentation + +You can find the full documentation for GC Design System Components on [https://design-system.alpha.canada.ca/](https://design-system.alpha.canada.ca/). + +## Installation + +### Install from npm + +Navigate to the root folder of your project and run: + +``` js +npm install @cdssnc/gcds-components-vue +``` + +In your `main.js` file, import the GC Design System components plugin and use it: + +``` jsx +import { GcdsComponents } from '@cdssnc/gcds-components-vue'; + +createApp(App).use(GcdsComponents).mount('#app'); +``` + +In your `App.vue`, place the following to load the global styles: + +``` html + +``` + +### Using Vite + +If using [Vite](https://vitejs.dev/), additional configuration will need to be added to `vite.config.ts` to prevent Vue from logging a warning about failing to resolve components. + +``` js +export default defineConfig({ + plugins: [ + vue({ + template: { + compilerOptions: { + // treat all tags with a dash as custom elements + isCustomElement: (tag) => tag.includes('-'), + }, + }, + }) + ], +}) +``` + +## How to contribute + +If you are interested in contributing to GC Design System Components, please read our [contributing guidelines](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md). + +## License + +Code released under the [MIT License](https://github.com/cds-snc/gcds-components/blob/main/LICENSE). + +-------- + +# Composants de Système de design GC — Vue + +Composants de Système de design GC — Vue fournit des [composants de Système de design GC](../web/README.md) dans un encapsulateur Vue afin de faciliter l’intégration dans les applications Vue. + +## Documentation + +Toute la documentation sur les composants de Système de design GC est accessible à l’adresse [https://systeme-design.alpha.canada.ca/](https://systeme-design.alpha.canada.ca/). + +## Installation + +### Installer le paquet avec npm + +Naviguez jusqu'au dossier racine de votre projet et exécutez : + +``` js +npm install @cdssnc/gcds-components-vue +``` + + + +## Apportez votre contribution + +Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos [lignes directrices sur la contribution](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md). + +## Licence + +Code publié en vertu de la [licence MIT](https://github.com/cds-snc/gcds-components/blob/main/LICENSE) (en anglais). \ No newline at end of file diff --git a/packages/vue/lib/components.ts b/packages/vue/lib/components.ts new file mode 100644 index 000000000..35a4fd3e2 --- /dev/null +++ b/packages/vue/lib/components.ts @@ -0,0 +1,449 @@ +/* eslint-disable */ +/* tslint:disable */ +/* auto-generated vue proxies */ +import { defineContainer } from './vue-component-lib/utils'; + +import type { JSX } from '@cdssnc/gcds-components'; + + + + +export const GcdsAlert = /*@__PURE__*/ defineContainer('gcds-alert', undefined, [ + 'alertRole', + 'container', + 'dismissHandler', + 'heading', + 'hideCloseBtn', + 'hideRoleIcon', + 'isFixed', + 'gcdsDismiss' +]); + + +export const GcdsBreadcrumbs = /*@__PURE__*/ defineContainer('gcds-breadcrumbs', undefined, [ + 'hideCanadaLink' +]); + + +export const GcdsBreadcrumbsItem = /*@__PURE__*/ defineContainer('gcds-breadcrumbs-item', undefined, [ + 'href' +]); + + +export const GcdsButton = /*@__PURE__*/ defineContainer('gcds-button', undefined, [ + 'type', + 'buttonRole', + 'size', + 'buttonId', + 'name', + 'disabled', + 'href', + 'rel', + 'target', + 'download', + 'clickHandler', + 'focusHandler', + 'blurHandler', + 'gcdsFocus', + 'gcdsBlur' +]); + + +export const GcdsCard = /*@__PURE__*/ defineContainer('gcds-card', undefined, [ + 'type', + 'cardTitle', + 'titleElement', + 'href', + 'description', + 'tag', + 'imgSrc', + 'imgAlt' +]); + + +export const GcdsCheckbox = /*@__PURE__*/ defineContainer('gcds-checkbox', undefined, [ + 'checkboxId', + 'label', + 'name', + 'required', + 'disabled', + 'value', + 'checked', + 'errorMessage', + 'hint', + 'validator', + 'validateOn', + 'clickHandler', + 'focusHandler', + 'blurHandler', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsChange', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsContainer = /*@__PURE__*/ defineContainer('gcds-container', undefined, [ + 'border', + 'centered', + 'margin', + 'padding', + 'size', + 'tag' +]); + + +export const GcdsDateModified = /*@__PURE__*/ defineContainer('gcds-date-modified', undefined, [ + 'type' +]); + + +export const GcdsDetails = /*@__PURE__*/ defineContainer('gcds-details', undefined, [ + 'detailsTitle', + 'open' +]); + + +export const GcdsErrorMessage = /*@__PURE__*/ defineContainer('gcds-error-message', undefined, [ + 'messageId', + 'message' +]); + + +export const GcdsErrorSummary = /*@__PURE__*/ defineContainer('gcds-error-summary', undefined, [ + 'heading', + 'listen', + 'errorLinks' +]); + + +export const GcdsFieldset = /*@__PURE__*/ defineContainer('gcds-fieldset', undefined, [ + 'fieldsetId', + 'legend', + 'required', + 'errorMessage', + 'hint', + 'disabled', + 'validator', + 'validateOn', + 'gcdsGroupError', + 'gcdsGroupErrorClear', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsFileUploader = /*@__PURE__*/ defineContainer('gcds-file-uploader', undefined, [ + 'uploaderId', + 'label', + 'required', + 'disabled', + 'value', + 'accept', + 'multiple', + 'errorMessage', + 'hint', + 'validator', + 'validateOn', + 'changeHandler', + 'focusHandler', + 'blurHandler', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsFileUploaderChange', + 'gcdsRemoveFile', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsFooter = /*@__PURE__*/ defineContainer('gcds-footer', undefined, [ + 'display', + 'wordmarkVariant', + 'contextualHeading', + 'contextualLinks', + 'subLinks' +]); + + +export const GcdsGrid = /*@__PURE__*/ defineContainer('gcds-grid', undefined, [ + 'columns', + 'columnsTablet', + 'columnsDesktop', + 'container', + 'centered', + 'display', + 'equalRowHeight', + 'tag', + 'alignContent', + 'justifyContent', + 'placeContent', + 'alignItems', + 'justifyItems', + 'placeItems' +]); + + +export const GcdsGridCol = /*@__PURE__*/ defineContainer('gcds-grid-col', undefined, [ + 'tag', + 'tablet', + 'desktop' +]); + + +export const GcdsHeader = /*@__PURE__*/ defineContainer('gcds-header', undefined, [ + 'langHref', + 'signatureVariant', + 'signatureHasLink', + 'skipToHref' +]); + + +export const GcdsHeading = /*@__PURE__*/ defineContainer('gcds-heading', undefined, [ + 'tag', + 'characterLimit', + 'marginTop', + 'marginBottom' +]); + + +export const GcdsHint = /*@__PURE__*/ defineContainer('gcds-hint', undefined, [ + 'hint', + 'hintId' +]); + + +export const GcdsIcon = /*@__PURE__*/ defineContainer('gcds-icon', undefined, [ + 'iconStyle', + 'label', + 'marginLeft', + 'marginRight', + 'name', + 'fixedWidth', + 'size' +]); + + +export const GcdsInput = /*@__PURE__*/ defineContainer('gcds-input', undefined, [ + 'disabled', + 'errorMessage', + 'hideLabel', + 'hint', + 'inputId', + 'label', + 'required', + 'size', + 'type', + 'value', + 'autocomplete', + 'changeHandler', + 'focusHandler', + 'blurHandler', + 'validator', + 'validateOn', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsChange', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsLabel = /*@__PURE__*/ defineContainer('gcds-label', undefined, [ + 'hideLabel', + 'label', + 'labelFor', + 'required' +]); + + +export const GcdsLangToggle = /*@__PURE__*/ defineContainer('gcds-lang-toggle', undefined, [ + 'href' +]); + + +export const GcdsLink = /*@__PURE__*/ defineContainer('gcds-link', undefined, [ + 'variant', + 'size', + 'display', + 'href', + 'rel', + 'target', + 'external', + 'download', + 'type', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsClick' +]); + + +export const GcdsNavGroup = /*@__PURE__*/ defineContainer('gcds-nav-group', undefined, [ + 'closeTrigger', + 'menuLabel', + 'openTrigger', + 'open', + 'gcdsClick' +]); + + +export const GcdsNavLink = /*@__PURE__*/ defineContainer('gcds-nav-link', undefined, [ + 'href', + 'current', + 'gcdsClick', + 'gcdsFocus', + 'gcdsBlur' +]); + + +export const GcdsPagination = /*@__PURE__*/ defineContainer('gcds-pagination', undefined, [ + 'display', + 'label', + 'previousHref', + 'previousLabel', + 'nextHref', + 'nextLabel', + 'totalPages', + 'currentPage', + 'url', + 'pageChangeHandler', + 'gcdsPageChange' +]); + + +export const GcdsPhaseBanner = /*@__PURE__*/ defineContainer('gcds-phase-banner', undefined, [ + 'bannerRole', + 'container', + 'isFixed' +]); + + +export const GcdsRadio = /*@__PURE__*/ defineContainer('gcds-radio', undefined, [ + 'radioId', + 'label', + 'name', + 'required', + 'disabled', + 'checked', + 'value', + 'hint', + 'clickHandler', + 'focusHandler', + 'blurHandler', + 'gcdsRadioChange', + 'gcdsFocus', + 'gcdsBlur' +]); + + +export const GcdsSearch = /*@__PURE__*/ defineContainer('gcds-search', undefined, [ + 'placeholder', + 'action', + 'method', + 'name', + 'searchId', + 'suggested', + 'gcdsChange', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsSubmit' +]); + + +export const GcdsSelect = /*@__PURE__*/ defineContainer('gcds-select', undefined, [ + 'selectId', + 'label', + 'required', + 'disabled', + 'defaultValue', + 'value', + 'errorMessage', + 'hint', + 'validator', + 'validateOn', + 'changeHandler', + 'focusHandler', + 'blurHandler', + 'gcdsSelectChange', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsSideNav = /*@__PURE__*/ defineContainer('gcds-side-nav', undefined, [ + 'label' +]); + + +export const GcdsSignature = /*@__PURE__*/ defineContainer('gcds-signature', undefined, [ + 'type', + 'variant', + 'hasLink' +]); + + +export const GcdsSrOnly = /*@__PURE__*/ defineContainer('gcds-sr-only', undefined, [ + 'tag' +]); + + +export const GcdsStepper = /*@__PURE__*/ defineContainer('gcds-stepper', undefined, [ + 'currentStep', + 'totalSteps' +]); + + +export const GcdsText = /*@__PURE__*/ defineContainer('gcds-text', undefined, [ + 'textRole', + 'characterLimit', + 'display', + 'marginTop', + 'marginBottom', + 'size' +]); + + +export const GcdsTextarea = /*@__PURE__*/ defineContainer('gcds-textarea', undefined, [ + 'characterCount', + 'cols', + 'disabled', + 'errorMessage', + 'hideLabel', + 'hint', + 'label', + 'required', + 'rows', + 'textareaId', + 'value', + 'validator', + 'validateOn', + 'changeHandler', + 'focusHandler', + 'blurHandler', + 'gcdsFocus', + 'gcdsBlur', + 'gcdsChange', + 'gcdsError', + 'gcdsValid' +]); + + +export const GcdsTopNav = /*@__PURE__*/ defineContainer('gcds-top-nav', undefined, [ + 'label', + 'alignment' +]); + + +export const GcdsTopicMenu = /*@__PURE__*/ defineContainer('gcds-topic-menu', undefined, [ + 'home' +]); + + +export const GcdsVerifyBanner = /*@__PURE__*/ defineContainer('gcds-verify-banner', undefined, [ + 'container', + 'isFixed' +]); + diff --git a/packages/vue/lib/index.ts b/packages/vue/lib/index.ts new file mode 100644 index 000000000..4d15621d9 --- /dev/null +++ b/packages/vue/lib/index.ts @@ -0,0 +1,2 @@ +export * from './components'; +export * from './plugin'; \ No newline at end of file diff --git a/packages/vue/lib/plugin.ts b/packages/vue/lib/plugin.ts new file mode 100644 index 000000000..804513595 --- /dev/null +++ b/packages/vue/lib/plugin.ts @@ -0,0 +1,10 @@ +import { Plugin } from 'vue'; +import { applyPolyfills, defineCustomElements } from '@cdssnc/gcds-components/loader'; + +export const GcdsComponents: Plugin = { + async install() { + applyPolyfills().then(() => { + defineCustomElements(); + }); + }, +}; \ No newline at end of file diff --git a/packages/vue/lib/vue-component-lib/utils.ts b/packages/vue/lib/vue-component-lib/utils.ts new file mode 100644 index 000000000..492ee5d41 --- /dev/null +++ b/packages/vue/lib/vue-component-lib/utils.ts @@ -0,0 +1,215 @@ +// @ts-nocheck +// It's easier and safer for Volar to disable typechecking and let the return type inference do its job. +import { defineComponent, getCurrentInstance, h, inject, ref, Ref, withDirectives } from 'vue'; + +export interface InputProps { + modelValue?: T; +} + +const UPDATE_VALUE_EVENT = 'update:modelValue'; +const MODEL_VALUE = 'modelValue'; +const ROUTER_LINK_VALUE = 'routerLink'; +const NAV_MANAGER = 'navManager'; +const ROUTER_PROP_PREFIX = 'router'; +const ARIA_PROP_PREFIX = 'aria'; +/** + * Starting in Vue 3.1.0, all properties are + * added as keys to the props object, even if + * they are not being used. In order to correctly + * account for both value props and v-model props, + * we need to check if the key exists for Vue <3.1.0 + * and then check if it is not undefined for Vue >= 3.1.0. + * See https://github.com/vuejs/vue-next/issues/3889 + */ +const EMPTY_PROP = Symbol(); +const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP }; + +interface NavManager { + navigate: (options: T) => void; +} + +const getComponentClasses = (classes: unknown) => { + return (classes as string)?.split(' ') || []; +}; + +const getElementClasses = ( + ref: Ref, + componentClasses: Set, + defaultClasses: string[] = [] +) => { + return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter( + (c: string, i, self) => !componentClasses.has(c) && self.indexOf(c) === i + ); +}; + +/** + * Create a callback to define a Vue component wrapper around a Web Component. + * + * @prop name - The component tag name (i.e. `ion-button`) + * @prop componentProps - An array of properties on the + * component. These usually match up with the @Prop definitions + * in each component's TSX file. + * @prop customElement - An option custom element instance to pass + * to customElements.define. Only set if `includeImportCustomElements: true` in your config. + * @prop modelProp - The prop that v-model binds to (i.e. value) + * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange) + */ +export const defineContainer = ( + name: string, + defineCustomElement: any, + componentProps: string[] = [], + modelProp?: string, + modelUpdateEvent?: string +) => { + /** + * Create a Vue component wrapper around a Web Component. + * Note: The `props` here are not all properties on a component. + * They refer to whatever properties are set on an instance of a component. + */ + + if (defineCustomElement !== undefined) { + defineCustomElement(); + } + + const Container = defineComponent>((props, { attrs, slots, emit }) => { + let modelPropValue = props[modelProp]; + const containerRef = ref(); + const classes = new Set(getComponentClasses(attrs.class)); + + /** + * This directive is responsible for updating any reactive + * reference associated with v-model on the component. + * This code must be run inside of the "created" callback. + * Since the following listener callbacks as well as any potential + * event callback defined in the developer's app are set on + * the same element, we need to make sure the following callbacks + * are set first so they fire first. If the developer's callback fires first + * then the reactive reference will not have been updated yet. + */ + const vModelDirective = { + created: (el: HTMLElement) => { + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + el.addEventListener(eventName.toLowerCase(), (e: Event) => { + /** + * Only update the v-model binding if the event's target is the element we are + * listening on. For example, Component A could emit ionChange, but it could also + * have a descendant Component B that also emits ionChange. We only want to update + * the v-model for Component A when ionChange originates from that element and not + * when ionChange bubbles up from Component B. + */ + if (e.target.tagName === el.tagName) { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + } + }); + }); + }, + }; + + const currentInstance = getCurrentInstance(); + const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER]; + const navManager: NavManager | undefined = hasRouter ? inject(NAV_MANAGER) : undefined; + const handleRouterLink = (ev: Event) => { + const { routerLink } = props; + if (routerLink === EMPTY_PROP) return; + + if (navManager !== undefined) { + let navigationPayload: any = { event: ev }; + for (const key in props) { + const value = props[key]; + if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) { + navigationPayload[key] = value; + } + } + + navManager.navigate(navigationPayload); + } else { + console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.'); + } + }; + + return () => { + modelPropValue = props[modelProp]; + + getComponentClasses(attrs.class).forEach((value) => { + classes.add(value); + }); + + const oldClick = props.onClick; + const handleClick = (ev: Event) => { + if (oldClick !== undefined) { + oldClick(ev); + } + if (!ev.defaultPrevented) { + handleRouterLink(ev); + } + }; + + let propsToAdd: any = { + ref: containerRef, + class: getElementClasses(containerRef, classes), + onClick: handleClick, + }; + + /** + * We can use Object.entries here + * to avoid the hasOwnProperty check, + * but that would require 2 iterations + * where as this only requires 1. + */ + for (const key in props) { + const value = props[key]; + if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) { + propsToAdd[key] = value; + } + } + + if (modelProp) { + /** + * If form value property was set using v-model + * then we should use that value. + * Otherwise, check to see if form value property + * was set as a static value (i.e. no v-model). + */ + if (props[MODEL_VALUE] !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: props[MODEL_VALUE], + }; + } else if (modelPropValue !== EMPTY_PROP) { + propsToAdd = { + ...propsToAdd, + [modelProp]: modelPropValue, + }; + } + } + + /** + * vModelDirective is only needed on components that support v-model. + * As a result, we conditionally call withDirectives with v-model components. + */ + const node = h(name, propsToAdd, slots.default && slots.default()); + return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]); + }; + }); + + if (typeof Container !== 'function') { + Container.name = name; + + Container.props = { + [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, + }; + + componentProps.forEach((componentProp) => { + Container.props[componentProp] = DEFAULT_EMPTY_PROP; + }); + + if (modelProp) { + Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP; + Container.emits = [UPDATE_VALUE_EVENT]; + } + } + + return Container; +}; diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json new file mode 100644 index 000000000..4fbcc60e8 --- /dev/null +++ b/packages/vue/package-lock.json @@ -0,0 +1,1054 @@ +{ + "name": "@cdssnc/gcds-components-vue", + "version": "0.20.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "@cdssnc/gcds-components-vue", + "version": "0.20.0", + "license": "ISC", + "dependencies": { + "@cdssnc/gcds-components": "^0.20.0" + }, + "devDependencies": { + "vue": "^3.4.26" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.24.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz", + "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.5.tgz", + "integrity": "sha512-3q93SSKX2TWCG30M2G2kwaKeTYgEUp5Snjuj8qm729SObL6nbtUldAi37qbxkD5gg3xnBio+f9nqpSepGZMvxA==", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.5.tgz", + "integrity": "sha512-EOv5IK8arwh3LI47dz1b0tKUb/1uhHAnHJOrjgtQMIpu1uXd9mlFrJg9IUgGUgZ41Ch0K8REPTYpO7B76b4vJg==", + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/types": { + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.5.tgz", + "integrity": "sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==", + "dependencies": { + "@babel/helper-string-parser": "^7.24.1", + "@babel/helper-validator-identifier": "^7.24.5", + "to-fast-properties": "^2.0.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@cdssnc/gcds-components": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-components/-/gcds-components-0.20.0.tgz", + "integrity": "sha512-oYLDX/grTe0HnpHTWTT5868TfsOxhuDohYihw2SAEdbhw7VUwmNL+oSfn1K4d1JXPCR8RNDbPEBCXR9nWB7E7g==", + "dependencies": { + "@stencil/core": "^4.7.2", + "@stencil/react-output-target": "^0.5.3", + "@storybook/addon-a11y": "^7.4.0", + "@storybook/addons": "^7.4.0", + "@storybook/theming": "^7.4.0" + } + }, + "node_modules/@emotion/use-insertion-effect-with-fallbacks": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz", + "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.4.15", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", + "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==", + "dev": true + }, + "node_modules/@stencil/core": { + "version": "4.17.2", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.17.2.tgz", + "integrity": "sha512-MX7yaLmpTU9iZvCire9nhecTcE0qBlV0vPWrLMeIXewYN7/hb8B3NjnhQyBKC93FDPI8NBRmt6KIugLw9zcRZg==", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + } + }, + "node_modules/@stencil/react-output-target": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/@stencil/react-output-target/-/react-output-target-0.5.3.tgz", + "integrity": "sha512-68jwRp35CjAcwhTJ9yFD/3n+jrHOqvEH2jreVuPVvZK+4tkhPlYlwz0d1E1RlF3jyifUSfdkWUGgXIEy8Fo3yw==", + "peerDependencies": { + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0" + } + }, + "node_modules/@storybook/addon-a11y": { + "version": "7.6.19", + "resolved": "https://registry.npmjs.org/@storybook/addon-a11y/-/addon-a11y-7.6.19.tgz", + "integrity": "sha512-92SOapbXukkO0RlrA0+8qa61NlCGSUFM7n5DfAA6tobIfhBAhfsEi7I9Q/0F95SCAgJoVVQdeIGKdvHjxO8DAg==", + "dependencies": { + "@storybook/addon-highlight": "7.6.19", + "axe-core": "^4.2.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-highlight": { + "version": "7.6.19", + "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.6.19.tgz", + "integrity": "sha512-/pApl0oiVU1CQ8xETRNDLDthMBjeTmvFnTRq8RJ9m0JYTrSsoyHDmj9zS4K1k9gReqijE7brslhP8d2tblBpNw==", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addons": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-7.6.17.tgz", + "integrity": "sha512-Ok18Y698Ccyg++MoUNJNHY0cXUvo8ETFIRLJk1g9ElJ70j6kPgNnzW2pAtZkBNmswHtofZ7pT156cj96k/LgfA==", + "dependencies": { + "@storybook/manager-api": "7.6.17", + "@storybook/preview-api": "7.6.17", + "@storybook/types": "7.6.17" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/channels": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.6.17.tgz", + "integrity": "sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==", + "dependencies": { + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/global": "^5.0.0", + "qs": "^6.10.0", + "telejson": "^7.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/client-logger": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.17.tgz", + "integrity": "sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/core-events": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.6.17.tgz", + "integrity": "sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==", + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/csf": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.7.tgz", + "integrity": "sha512-53JeLZBibjQxi0Ep+/AJTfxlofJlxy1jXcSKENlnKxHjWEYyHQCumMP5yTFjf7vhNnMjEpV3zx6t23ssFiGRyw==", + "dependencies": { + "type-fest": "^2.19.0" + } + }, + "node_modules/@storybook/global": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@storybook/global/-/global-5.0.0.tgz", + "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==" + }, + "node_modules/@storybook/manager-api": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.6.17.tgz", + "integrity": "sha512-IJIV1Yc6yw1dhCY4tReHCfBnUKDqEBnMyHp3mbXpsaHxnxJZrXO45WjRAZIKlQKhl/Ge1CrnznmHRCmYgqmrWg==", + "dependencies": { + "@storybook/channels": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/csf": "^0.1.2", + "@storybook/global": "^5.0.0", + "@storybook/router": "7.6.17", + "@storybook/theming": "7.6.17", + "@storybook/types": "7.6.17", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "store2": "^2.14.2", + "telejson": "^7.2.0", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/manager-api/node_modules/@storybook/theming": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.17.tgz", + "integrity": "sha512-ZbaBt3KAbmBtfjNqgMY7wPMBshhSJlhodyMNQypv+95xLD/R+Az6aBYbpVAOygLaUQaQk4ar7H/Ww6lFIoiFbA==", + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@storybook/client-logger": "7.6.17", + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/preview-api": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.6.17.tgz", + "integrity": "sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==", + "dependencies": { + "@storybook/channels": "7.6.17", + "@storybook/client-logger": "7.6.17", + "@storybook/core-events": "7.6.17", + "@storybook/csf": "^0.1.2", + "@storybook/global": "^5.0.0", + "@storybook/types": "7.6.17", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/router": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.6.17.tgz", + "integrity": "sha512-GnyC0j6Wi5hT4qRhSyT8NPtJfGmf82uZw97LQRWeyYu5gWEshUdM7aj40XlNiScd5cZDp0owO1idduVF2k2l2A==", + "dependencies": { + "@storybook/client-logger": "7.6.17", + "memoizerific": "^1.11.3", + "qs": "^6.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/theming": { + "version": "7.6.19", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.6.19.tgz", + "integrity": "sha512-sAho13MmtA80ctOaLn8lpkQBsPyiqSdLcOPH5BWFhatQzzBQCpTAKQk+q/xGju8bNiPZ+yQBaBzbN8SfX8ceCg==", + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@storybook/client-logger": "7.6.19", + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/theming/node_modules/@storybook/client-logger": { + "version": "7.6.19", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.19.tgz", + "integrity": "sha512-oGzOxbmLmciSIfd5gsxDzPmX8DttWhoYdPKxjMuCuWLTO2TWpkCWp1FTUMWO72mm/6V/FswT/aqpJJBBvdZ3RQ==", + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/types": { + "version": "7.6.17", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.6.17.tgz", + "integrity": "sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==", + "dependencies": { + "@storybook/channels": "7.6.17", + "@types/babel__core": "^7.0.0", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz", + "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.6.8", + "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz", + "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz", + "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.20.5", + "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz", + "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==", + "dependencies": { + "@babel/types": "^7.20.7" + } + }, + "node_modules/@types/body-parser": { + "version": "1.19.5", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", + "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==", + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/@types/connect": { + "version": "3.4.38", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz", + "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/express": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz", + "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==", + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.33", + "@types/qs": "*", + "@types/serve-static": "*" + } + }, + "node_modules/@types/express-serve-static-core": { + "version": "4.19.0", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.0.tgz", + "integrity": "sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==", + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*", + "@types/send": "*" + } + }, + "node_modules/@types/http-errors": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", + "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==" + }, + "node_modules/@types/mime": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", + "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==" + }, + "node_modules/@types/node": { + "version": "20.12.8", + "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz", + "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==", + "dependencies": { + "undici-types": "~5.26.4" + } + }, + "node_modules/@types/qs": { + "version": "6.9.15", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz", + "integrity": "sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==" + }, + "node_modules/@types/range-parser": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", + "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" + }, + "node_modules/@types/send": { + "version": "0.17.4", + "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", + "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==", + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" + } + }, + "node_modules/@types/serve-static": { + "version": "1.15.7", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz", + "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==", + "dependencies": { + "@types/http-errors": "*", + "@types/node": "*", + "@types/send": "*" + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.26.tgz", + "integrity": "sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.24.4", + "@vue/shared": "3.4.26", + "entities": "^4.5.0", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.26.tgz", + "integrity": "sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==", + "dev": true, + "dependencies": { + "@vue/compiler-core": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.26.tgz", + "integrity": "sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==", + "dev": true, + "dependencies": { + "@babel/parser": "^7.24.4", + "@vue/compiler-core": "3.4.26", + "@vue/compiler-dom": "3.4.26", + "@vue/compiler-ssr": "3.4.26", + "@vue/shared": "3.4.26", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.10", + "postcss": "^8.4.38", + "source-map-js": "^1.2.0" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.26.tgz", + "integrity": "sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/reactivity": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.26.tgz", + "integrity": "sha512-E/ynEAu/pw0yotJeLdvZEsp5Olmxt+9/WqzvKff0gE67tw73gmbx6tRkiagE/eH0UCubzSlGRebCbidB1CpqZQ==", + "dev": true, + "dependencies": { + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.26.tgz", + "integrity": "sha512-AFJDLpZvhT4ujUgZSIL9pdNcO23qVFh7zWCsNdGQBw8ecLNxOOnPcK9wTTIYCmBJnuPHpukOwo62a2PPivihqw==", + "dev": true, + "dependencies": { + "@vue/reactivity": "3.4.26", + "@vue/shared": "3.4.26" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.26.tgz", + "integrity": "sha512-UftYA2hUXR2UOZD/Fc3IndZuCOOJgFxJsWOxDkhfVcwLbsfh2CdXE2tG4jWxBZuDAs9J9PzRTUFt1PgydEtItw==", + "dev": true, + "dependencies": { + "@vue/runtime-core": "3.4.26", + "@vue/shared": "3.4.26", + "csstype": "^3.1.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.26.tgz", + "integrity": "sha512-xoGAqSjYDPGAeRWxeoYwqJFD/gw7mpgzOvSxEmjWaFO2rE6qpbD1PC172YRpvKhrihkyHJkNDADFXTfCyVGhKw==", + "dev": true, + "dependencies": { + "@vue/compiler-ssr": "3.4.26", + "@vue/shared": "3.4.26" + }, + "peerDependencies": { + "vue": "3.4.26" + } + }, + "node_modules/@vue/shared": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.26.tgz", + "integrity": "sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==", + "dev": true + }, + "node_modules/axe-core": { + "version": "4.9.0", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.9.0.tgz", + "integrity": "sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/call-bind": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", + "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "set-function-length": "^1.2.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "dev": true + }, + "node_modules/define-data-property": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", + "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "dependencies": { + "es-define-property": "^1.0.0", + "es-errors": "^1.3.0", + "gopd": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, + "node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/es-define-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz", + "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==", + "dependencies": { + "get-intrinsic": "^1.2.4" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "dev": true + }, + "node_modules/file-system-cache": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz", + "integrity": "sha512-l4DMNdsIPsVnKrgEXbJwDJsA5mB8rGwHYERMgqQx/xAUtChPJMre1bXBzDEqqVbWv9AIbFezXMxeEkZDSrXUOQ==", + "dependencies": { + "fs-extra": "11.1.1", + "ramda": "0.29.0" + } + }, + "node_modules/fs-extra": { + "version": "11.1.1", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz", + "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^6.0.1", + "universalify": "^2.0.0" + }, + "engines": { + "node": ">=14.14" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz", + "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "has-proto": "^1.0.1", + "has-symbols": "^1.0.3", + "hasown": "^2.0.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gopd": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", + "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==", + "dependencies": { + "get-intrinsic": "^1.1.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" + }, + "node_modules/has-property-descriptors": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", + "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "dependencies": { + "es-define-property": "^1.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-proto": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz", + "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "peer": true + }, + "node_modules/jsonfile": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz", + "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==", + "dependencies": { + "universalify": "^2.0.0" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "peer": true, + "dependencies": { + "js-tokens": "^3.0.0 || ^4.0.0" + }, + "bin": { + "loose-envify": "cli.js" + } + }, + "node_modules/magic-string": { + "version": "0.30.10", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", + "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15" + } + }, + "node_modules/map-or-similar": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/map-or-similar/-/map-or-similar-1.5.0.tgz", + "integrity": "sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==" + }, + "node_modules/memoizerific": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/memoizerific/-/memoizerific-1.11.3.tgz", + "integrity": "sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==", + "dependencies": { + "map-or-similar": "^1.5.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/object-inspect": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", + "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/qs": { + "version": "6.12.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz", + "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/ramda": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz", + "integrity": "sha512-BBea6L67bYLtdbOqfp8f58fPMqEwx0doL+pAi8TZyp2YWz8R9G8z9x75CZI8W+ftqhFHCpEX2cRnUUXK130iKA==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/ramda" + } + }, + "node_modules/react": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.23.2" + }, + "peerDependencies": { + "react": "^18.3.1" + } + }, + "node_modules/scheduler": { + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "peer": true, + "dependencies": { + "loose-envify": "^1.1.0" + } + }, + "node_modules/set-function-length": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", + "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "dependencies": { + "define-data-property": "^1.1.4", + "es-errors": "^1.3.0", + "function-bind": "^1.1.2", + "get-intrinsic": "^1.2.4", + "gopd": "^1.0.1", + "has-property-descriptors": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/side-channel": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz", + "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==", + "dependencies": { + "call-bind": "^1.0.7", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.4", + "object-inspect": "^1.13.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/store2": { + "version": "2.14.3", + "resolved": "https://registry.npmjs.org/store2/-/store2-2.14.3.tgz", + "integrity": "sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==" + }, + "node_modules/synchronous-promise": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.17.tgz", + "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==" + }, + "node_modules/telejson": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/telejson/-/telejson-7.2.0.tgz", + "integrity": "sha512-1QTEcJkJEhc8OnStBx/ILRu5J2p0GjvWsBx56bmZRqnrkdBMUe+nX92jxV+p3dB4CP6PZCdJMQJwCggkNBMzkQ==", + "dependencies": { + "memoizerific": "^1.11.3" + } + }, + "node_modules/tiny-invariant": { + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz", + "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==" + }, + "node_modules/to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", + "engines": { + "node": ">=4" + } + }, + "node_modules/ts-dedent": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz", + "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==", + "engines": { + "node": ">=6.10" + } + }, + "node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/undici-types": { + "version": "5.26.5", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", + "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" + }, + "node_modules/universalify": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz", + "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==", + "engines": { + "node": ">= 10.0.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" + }, + "node_modules/vue": { + "version": "3.4.26", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.26.tgz", + "integrity": "sha512-bUIq/p+VB+0xrJubaemrfhk1/FiW9iX+pDV+62I/XJ6EkspAO9/DXEjbDFoe8pIfOZBqfk45i9BMc41ptP/uRg==", + "dev": true, + "dependencies": { + "@vue/compiler-dom": "3.4.26", + "@vue/compiler-sfc": "3.4.26", + "@vue/runtime-dom": "3.4.26", + "@vue/server-renderer": "3.4.26", + "@vue/shared": "3.4.26" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + } + } +} diff --git a/packages/vue/package.json b/packages/vue/package.json new file mode 100644 index 000000000..5fc616604 --- /dev/null +++ b/packages/vue/package.json @@ -0,0 +1,37 @@ +{ + "name": "@cdssnc/gcds-components-vue", + "version": "0.20.0", + "description": "Vue wrapper for GC Design System components", + "author": "Government of Canada / Gouvernement du Canada", + "homepage": "https://design-system.alpha.canada.ca/", + "license": "MIT", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "directories": { + "lib": "lib" + }, + "files": [ + "dist", + "gcds.css" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/cds-snc/gcds-components.git" + }, + "scripts": { + "build": "npm run tsc", + "tsc": "tsc -p . --outDir ./dist" + }, + "bugs": { + "url": "https://github.com/cds-snc/gcds-components/issues" + }, + "publishConfig": { + "access": "public" + }, + "dependencies": { + "@cdssnc/gcds-components": "^0.20.0" + }, + "devDependencies": { + "vue": "^3.4.26" + } +} diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json new file mode 100644 index 000000000..b0389a1a2 --- /dev/null +++ b/packages/vue/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist", + "lib": ["dom", "es2020"], + "module": "es2015", + "moduleResolution": "node", + "target": "es2017", + "skipLibCheck": true + }, + "include": ["lib"], + "exclude": ["node_modules"] +} \ No newline at end of file diff --git a/packages/web/package.json b/packages/web/package.json index 15c7433c8..0d34213a2 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -48,6 +48,7 @@ "@stencil/angular-output-target": "^0.8.1", "@stencil/postcss": "^2.1.0", "@stencil/sass": "^3.0.0-0", + "@stencil/vue-output-target": "^0.8.8", "@storybook/addon-actions": "^7.4.0", "@storybook/addon-essentials": "^7.4.0", "@storybook/addon-interactions": "^7.4.0", diff --git a/packages/web/scripts/copyCSSFile.js b/packages/web/scripts/copyCSSFile.js index 5f7c61fdf..012f460dc 100644 --- a/packages/web/scripts/copyCSSFile.js +++ b/packages/web/scripts/copyCSSFile.js @@ -2,3 +2,4 @@ const fs = require('fs'); fs.copyFileSync('./dist/gcds/gcds.css', '../react/gcds.css'); +fs.copyFileSync('./dist/gcds/gcds.css', '../vue/gcds.css'); diff --git a/packages/web/stencil.config.ts b/packages/web/stencil.config.ts index 8b8a68207..41d88e4d5 100644 --- a/packages/web/stencil.config.ts +++ b/packages/web/stencil.config.ts @@ -4,6 +4,7 @@ import { sass } from '@stencil/sass'; import { inlineSvg } from 'stencil-inline-svg'; import { reactOutputTarget } from '@stencil/react-output-target'; import { angularOutputTarget } from '@stencil/angular-output-target'; +import { vueOutputTarget } from '@stencil/vue-output-target'; export const config: Config = { namespace: 'gcds', @@ -23,6 +24,10 @@ export const config: Config = { directivesProxyFile: '../angular/src/lib/stencil-generated/components.ts', directivesArrayFile: '../angular/src/lib/stencil-generated/index.ts', }), + vueOutputTarget({ + componentCorePackage: '@cdssnc/gcds-components', + proxiesFile: '../vue/lib/components.ts', + }), { type: 'dist', esmLoaderPath: '../loader', diff --git a/tsconfig.json b/tsconfig.json index 49724a98d..69ff3475f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -44,6 +44,9 @@ ], "gcds-components-angular": [ "./packages/angular" + ], + "gcds-components-vue": [ + "./packages/vue" ] }, "angularCompilerOptions": { From 5b34cbafc0bd2aadc2588251a0ef40a91e85442e Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Tue, 7 May 2024 08:14:44 -0400 Subject: [PATCH 2/8] Add example to readme --- packages/vue/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/README.md b/packages/vue/README.md index 95bb0b7ba..1ebdc5714 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -36,7 +36,7 @@ In your `App.vue`, place the following to load the global styles: ### Using Vite -If using [Vite](https://vitejs.dev/), additional configuration will need to be added to `vite.config.ts` to prevent Vue from logging a warning about failing to resolve components. +If using [Vite](https://vitejs.dev/), additional configuration will need to be added to `vite.config.ts` to prevent Vue from logging a warning about failing to resolve components (e.g. "Failed to resolve component: gcds-header"). ``` js export default defineConfig({ From 76e5e0b166d11f307152cce6965b6c33d626de77 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Tue, 7 May 2024 10:35:11 -0400 Subject: [PATCH 3/8] Add French section to readme --- packages/vue/README.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/vue/README.md b/packages/vue/README.md index 1ebdc5714..4b39c914d 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -81,7 +81,7 @@ Naviguez jusqu'au dossier racine de votre projet et exécutez : npm install @cdssnc/gcds-components-vue ``` - +``` ## Apportez votre contribution From 66f77883a7050965800a6b27b1601c86d8bdf73b Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Fri, 10 May 2024 09:29:54 -0400 Subject: [PATCH 4/8] Update @cdssnc/gcds-components version --- packages/vue/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vue/package.json b/packages/vue/package.json index 5fc616604..9ddb04b2c 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -29,7 +29,7 @@ "access": "public" }, "dependencies": { - "@cdssnc/gcds-components": "^0.20.0" + "@cdssnc/gcds-components": "^0.21.0" }, "devDependencies": { "vue": "^3.4.26" From caa665bdf14759fd61573b190a631096c399b0d0 Mon Sep 17 00:00:00 2001 From: Ethan Wallace Date: Tue, 14 May 2024 16:33:57 -0400 Subject: [PATCH 5/8] Update packages/vue/README.md Co-authored-by: Daine Trinidad --- packages/vue/README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vue/README.md b/packages/vue/README.md index 4b39c914d..eba547580 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -20,14 +20,21 @@ npm install @cdssnc/gcds-components-vue In your `main.js` file, import the GC Design System components plugin and use it: -``` jsx +```jsx import { GcdsComponents } from '@cdssnc/gcds-components-vue'; createApp(App).use(GcdsComponents).mount('#app'); ``` -In your `App.vue`, place the following to load the global styles: +Add the global styles to your app. There are multiple ways to achieve this. + +You can import it in your `main.js` file next to your `style.css`: +```js +import '@cdssnc/gcds-components-vue/gcds.css'; +import './style.css'; +``` +or in your `App.vue` using the html style tag ``` html