From 1e02bf07379991f1135b66f6b620fa895bf95e62 Mon Sep 17 00:00:00 2001 From: PhentomPT Date: Fri, 13 Jan 2023 02:43:41 +0000 Subject: [PATCH 01/18] feat: vue support --- packages/core/package.json | 1 + packages/core/stencil.config.ts | 7 + packages/documentation/docs/controls/blind.md | 4 + .../documentation/docs/controls/breadcrumb.md | 13 + .../documentation/docs/controls/button.md | 58 +- .../docs/controls/category-filter.md | 8 + .../documentation/docs/controls/checkbox.md | 8 + packages/documentation/docs/controls/chip.md | 4 + .../docs/controls/date-picker.md | 10 +- .../docs/controls/date-time-picker.md | 4 + .../documentation/docs/controls/drawer.md | 9 + .../documentation/docs/controls/dropdown.md | 9 + .../documentation/docs/controls/event-list.md | 17 + .../docs/controls/expanding-search.md | 4 + packages/documentation/docs/controls/flip.md | 4 + packages/documentation/docs/controls/group.md | 19 +- packages/documentation/docs/controls/input.md | 17 + packages/documentation/docs/controls/kpi.md | 4 + .../documentation/docs/controls/messagebar.md | 5 +- packages/documentation/docs/controls/modal.md | 4 + packages/documentation/docs/controls/pill.md | 4 + .../docs/controls/radiobutton.md | 4 + .../documentation/docs/controls/select.md | 13 + .../documentation/docs/controls/spinner.md | 9 + .../docs/controls/split-button.md | 11 +- packages/documentation/docs/controls/tabs.md | 9 +- .../documentation/docs/controls/textarea.md | 13 + packages/documentation/docs/controls/tile.md | 4 + .../docs/controls/time-picker.md | 4 + packages/documentation/docs/controls/toast.md | 8 + .../documentation/docs/controls/toggle.md | 17 + .../documentation/docs/controls/upload.md | 4 + .../documentation/docs/controls/workflow.md | 8 + .../documentation/docs/icon-library/icons.md | 8 + .../docs/installation/installation.md | 1 + .../documentation/docs/installation/vue.md | 38 ++ packages/documentation/docusaurus.config.js | 2 +- .../documentation/scripts/generate-api.mjs | 40 ++ .../documentation/src/components/Preview.tsx | 1 + .../src/components/previewProps.ts | 2 +- .../documentation/src/utils/localStorage.ts | 6 +- .../documentation/src/utils/useFramework.ts | 2 +- packages/vue-test-app/.gitignore | 24 + packages/vue-test-app/index.html | 18 + packages/vue-test-app/package.json | 26 + packages/vue-test-app/public/vue.svg | 1 + packages/vue-test-app/src/App.vue | 22 + packages/vue-test-app/src/Root.vue | 168 +++++ packages/vue-test-app/src/main.ts | 23 + .../src/preview-examples/about-and-legal.vue | 34 + .../src/preview-examples/aggrid.vue | 37 + .../basic-navigation-without-header.vue | 21 + .../src/preview-examples/basic-navigation.vue | 22 + .../src/preview-examples/blind.vue | 26 + .../breadcrumb-next-items.vue | 23 + .../preview-examples/breadcrumb-truncate.vue | 22 + .../src/preview-examples/breadcrumb.vue | 20 + .../src/preview-examples/button-ghost.vue | 17 + .../preview-examples/button-grey-ghost.vue | 17 + .../button-grey-secondary.vue | 17 + .../src/preview-examples/button-grey.vue | 17 + .../src/preview-examples/button-group.vue | 20 + .../src/preview-examples/button-secondary.vue | 17 + .../src/preview-examples/button-selected.vue | 17 + .../src/preview-examples/button-text-icon.vue | 31 + .../src/preview-examples/button-with-icon.vue | 49 ++ .../src/preview-examples/buttons.vue | 17 + .../category-filter-suggestions.vue | 22 + .../src/preview-examples/category-filter.vue | 53 ++ .../checkbox-indeterminate.vue | 24 + .../src/preview-examples/checkbox.vue | 22 + .../src/preview-examples/chip.vue | 43 ++ .../src/preview-examples/datepicker-range.vue | 16 + .../src/preview-examples/datepicker.vue | 16 + .../src/preview-examples/datetimepicker.vue | 16 + .../preview-examples/drawer-full-height.vue | 27 + .../src/preview-examples/drawer.vue | 22 + .../src/preview-examples/dropdown-icon.vue | 21 + .../src/preview-examples/dropdown.vue | 21 + .../preview-examples/event-list-compact.vue | 21 + .../event-list-custom-item-height.vue | 21 + .../preview-examples/event-list-selected.vue | 21 + .../src/preview-examples/event-list.vue | 21 + .../src/preview-examples/expanding-search.vue | 16 + .../src/preview-examples/flip-tile.vue | 79 +++ .../preview-examples/group-context-menu.vue | 29 + .../preview-examples/group-custom-entry.vue | 22 + .../group-header-suppressed.vue | 24 + .../src/preview-examples/group.vue | 20 + .../src/preview-examples/input-disabled.vue | 22 + .../src/preview-examples/input-readonly.vue | 22 + .../src/preview-examples/input-with-icon.vue | 23 + .../src/preview-examples/input.vue | 21 + .../vue-test-app/src/preview-examples/kpi.vue | 30 + .../map-navigation-overlay.vue | 42 ++ .../src/preview-examples/map-navigation.vue | 28 + .../menu-with-bottom-tabs.vue | 21 + .../src/preview-examples/message-bar.vue | 22 + .../src/preview-examples/modal.vue | 59 ++ .../src/preview-examples/pill.vue | 38 ++ .../src/preview-examples/popover-news.vue | 32 + .../src/preview-examples/radio-button.vue | 21 + .../src/preview-examples/select-editable.vue | 21 + .../src/preview-examples/select-multiple.vue | 26 + .../src/preview-examples/select.vue | 21 + .../src/preview-examples/settings.vue | 38 ++ .../src/preview-examples/spinner-large.vue | 16 + .../src/preview-examples/spinner.vue | 16 + .../preview-examples/split-button-icons.vue | 19 + .../src/preview-examples/split-button.vue | 19 + .../src/preview-examples/tabs-rounded.vue | 35 + .../src/preview-examples/tabs.vue | 29 + .../preview-examples/textarea-disabled.vue | 18 + .../preview-examples/textarea-readonly.vue | 18 + .../src/preview-examples/textarea.vue | 14 + .../src/preview-examples/tile.vue | 53 ++ .../src/preview-examples/timepicker.vue | 16 + .../preview-examples/toast-custom-element.vue | 19 + .../src/preview-examples/toast-custom.vue | 25 + .../src/preview-examples/toast.vue | 18 + .../src/preview-examples/toggle-color.vue | 16 + .../preview-examples/toggle-custom-label.vue | 16 + .../src/preview-examples/toggle-disabled.vue | 16 + .../src/preview-examples/toggle.vue | 16 + .../src/preview-examples/tree.vue | 69 ++ .../src/preview-examples/upload.vue | 16 + .../vertical-tabs-with-avatar.vue | 31 + .../src/preview-examples/vertical-tabs.vue | 24 + .../preview-examples/workflow-vertical.vue | 23 + .../src/preview-examples/workflow.vue | 23 + packages/vue-test-app/src/reportWebVitals.ts | 24 + packages/vue-test-app/src/setupTests.ts | 14 + packages/vue-test-app/src/style.css | 54 ++ .../src/testing/NavigationTest.vue | 37 + packages/vue-test-app/src/vite-env.d.ts | 7 + packages/vue-test-app/tsconfig.json | 18 + packages/vue-test-app/tsconfig.node.json | 9 + packages/vue-test-app/vite.config.ts | 16 + packages/vue/.gitignore | 4 + packages/vue/LICENSE | 9 + packages/vue/README.md | 4 + packages/vue/package.json | 39 ++ packages/vue/src/components.ts | 630 ++++++++++++++++++ packages/vue/src/index.ts | 7 + packages/vue/src/plugin.ts | 10 + packages/vue/src/toast/index.ts | 10 + packages/vue/src/toast/toast.ts | 30 + packages/vue/src/vue-component-lib/utils.ts | 198 ++++++ packages/vue/tsconfig.json | 19 + yarn.lock | 245 ++++++- 150 files changed, 4110 insertions(+), 26 deletions(-) create mode 100644 packages/documentation/docs/installation/vue.md create mode 100644 packages/vue-test-app/.gitignore create mode 100644 packages/vue-test-app/index.html create mode 100644 packages/vue-test-app/package.json create mode 100644 packages/vue-test-app/public/vue.svg create mode 100644 packages/vue-test-app/src/App.vue create mode 100644 packages/vue-test-app/src/Root.vue create mode 100644 packages/vue-test-app/src/main.ts create mode 100644 packages/vue-test-app/src/preview-examples/about-and-legal.vue create mode 100644 packages/vue-test-app/src/preview-examples/aggrid.vue create mode 100644 packages/vue-test-app/src/preview-examples/basic-navigation-without-header.vue create mode 100644 packages/vue-test-app/src/preview-examples/basic-navigation.vue create mode 100644 packages/vue-test-app/src/preview-examples/blind.vue create mode 100644 packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue create mode 100644 packages/vue-test-app/src/preview-examples/breadcrumb-truncate.vue create mode 100644 packages/vue-test-app/src/preview-examples/breadcrumb.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-ghost.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-grey-ghost.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-grey-secondary.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-grey.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-group.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-secondary.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-selected.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-text-icon.vue create mode 100644 packages/vue-test-app/src/preview-examples/button-with-icon.vue create mode 100644 packages/vue-test-app/src/preview-examples/buttons.vue create mode 100644 packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue create mode 100644 packages/vue-test-app/src/preview-examples/category-filter.vue create mode 100644 packages/vue-test-app/src/preview-examples/checkbox-indeterminate.vue create mode 100644 packages/vue-test-app/src/preview-examples/checkbox.vue create mode 100644 packages/vue-test-app/src/preview-examples/chip.vue create mode 100644 packages/vue-test-app/src/preview-examples/datepicker-range.vue create mode 100644 packages/vue-test-app/src/preview-examples/datepicker.vue create mode 100644 packages/vue-test-app/src/preview-examples/datetimepicker.vue create mode 100644 packages/vue-test-app/src/preview-examples/drawer-full-height.vue create mode 100644 packages/vue-test-app/src/preview-examples/drawer.vue create mode 100644 packages/vue-test-app/src/preview-examples/dropdown-icon.vue create mode 100644 packages/vue-test-app/src/preview-examples/dropdown.vue create mode 100644 packages/vue-test-app/src/preview-examples/event-list-compact.vue create mode 100644 packages/vue-test-app/src/preview-examples/event-list-custom-item-height.vue create mode 100644 packages/vue-test-app/src/preview-examples/event-list-selected.vue create mode 100644 packages/vue-test-app/src/preview-examples/event-list.vue create mode 100644 packages/vue-test-app/src/preview-examples/expanding-search.vue create mode 100644 packages/vue-test-app/src/preview-examples/flip-tile.vue create mode 100644 packages/vue-test-app/src/preview-examples/group-context-menu.vue create mode 100644 packages/vue-test-app/src/preview-examples/group-custom-entry.vue create mode 100644 packages/vue-test-app/src/preview-examples/group-header-suppressed.vue create mode 100644 packages/vue-test-app/src/preview-examples/group.vue create mode 100644 packages/vue-test-app/src/preview-examples/input-disabled.vue create mode 100644 packages/vue-test-app/src/preview-examples/input-readonly.vue create mode 100644 packages/vue-test-app/src/preview-examples/input-with-icon.vue create mode 100644 packages/vue-test-app/src/preview-examples/input.vue create mode 100644 packages/vue-test-app/src/preview-examples/kpi.vue create mode 100644 packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue create mode 100644 packages/vue-test-app/src/preview-examples/map-navigation.vue create mode 100644 packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue create mode 100644 packages/vue-test-app/src/preview-examples/message-bar.vue create mode 100644 packages/vue-test-app/src/preview-examples/modal.vue create mode 100644 packages/vue-test-app/src/preview-examples/pill.vue create mode 100644 packages/vue-test-app/src/preview-examples/popover-news.vue create mode 100644 packages/vue-test-app/src/preview-examples/radio-button.vue create mode 100644 packages/vue-test-app/src/preview-examples/select-editable.vue create mode 100644 packages/vue-test-app/src/preview-examples/select-multiple.vue create mode 100644 packages/vue-test-app/src/preview-examples/select.vue create mode 100644 packages/vue-test-app/src/preview-examples/settings.vue create mode 100644 packages/vue-test-app/src/preview-examples/spinner-large.vue create mode 100644 packages/vue-test-app/src/preview-examples/spinner.vue create mode 100644 packages/vue-test-app/src/preview-examples/split-button-icons.vue create mode 100644 packages/vue-test-app/src/preview-examples/split-button.vue create mode 100644 packages/vue-test-app/src/preview-examples/tabs-rounded.vue create mode 100644 packages/vue-test-app/src/preview-examples/tabs.vue create mode 100644 packages/vue-test-app/src/preview-examples/textarea-disabled.vue create mode 100644 packages/vue-test-app/src/preview-examples/textarea-readonly.vue create mode 100644 packages/vue-test-app/src/preview-examples/textarea.vue create mode 100644 packages/vue-test-app/src/preview-examples/tile.vue create mode 100644 packages/vue-test-app/src/preview-examples/timepicker.vue create mode 100644 packages/vue-test-app/src/preview-examples/toast-custom-element.vue create mode 100644 packages/vue-test-app/src/preview-examples/toast-custom.vue create mode 100644 packages/vue-test-app/src/preview-examples/toast.vue create mode 100644 packages/vue-test-app/src/preview-examples/toggle-color.vue create mode 100644 packages/vue-test-app/src/preview-examples/toggle-custom-label.vue create mode 100644 packages/vue-test-app/src/preview-examples/toggle-disabled.vue create mode 100644 packages/vue-test-app/src/preview-examples/toggle.vue create mode 100644 packages/vue-test-app/src/preview-examples/tree.vue create mode 100644 packages/vue-test-app/src/preview-examples/upload.vue create mode 100644 packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue create mode 100644 packages/vue-test-app/src/preview-examples/vertical-tabs.vue create mode 100644 packages/vue-test-app/src/preview-examples/workflow-vertical.vue create mode 100644 packages/vue-test-app/src/preview-examples/workflow.vue create mode 100644 packages/vue-test-app/src/reportWebVitals.ts create mode 100644 packages/vue-test-app/src/setupTests.ts create mode 100644 packages/vue-test-app/src/style.css create mode 100644 packages/vue-test-app/src/testing/NavigationTest.vue create mode 100644 packages/vue-test-app/src/vite-env.d.ts create mode 100644 packages/vue-test-app/tsconfig.json create mode 100644 packages/vue-test-app/tsconfig.node.json create mode 100644 packages/vue-test-app/vite.config.ts create mode 100644 packages/vue/.gitignore create mode 100644 packages/vue/LICENSE create mode 100644 packages/vue/README.md create mode 100644 packages/vue/package.json create mode 100644 packages/vue/src/components.ts create mode 100644 packages/vue/src/index.ts create mode 100644 packages/vue/src/plugin.ts create mode 100644 packages/vue/src/toast/index.ts create mode 100644 packages/vue/src/toast/toast.ts create mode 100644 packages/vue/src/vue-component-lib/utils.ts create mode 100644 packages/vue/tsconfig.json diff --git a/packages/core/package.json b/packages/core/package.json index d2e952ce39c..518d01ca93b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -57,6 +57,7 @@ "@stencil/postcss": "^2.0.0", "@stencil/react-output-target": "^0.3.1", "@stencil/sass": "~2.0.0", + "@stencil/vue-output-target": "^0.6.2", "@testing-library/dom": "^8.11.0", "@testing-library/jest-dom": "^5.16.5", "@types/animejs": "^3.1.4", diff --git a/packages/core/stencil.config.ts b/packages/core/stencil.config.ts index d12aeceb97c..9023646dc7f 100644 --- a/packages/core/stencil.config.ts +++ b/packages/core/stencil.config.ts @@ -13,6 +13,7 @@ import { JsonDocs } from '@stencil/core/internal'; import { postcss } from '@stencil/postcss'; import { reactOutputTarget } from '@stencil/react-output-target'; import { sass } from '@stencil/sass'; +import { vueOutputTarget } from '@stencil/vue-output-target'; import autoprefixer from 'autoprefixer'; import fs from 'fs'; import path from 'path'; @@ -154,6 +155,12 @@ export const config: Config = { }), ], outputTargets: [ + vueOutputTarget({ + componentCorePackage: '@siemens/ix', + proxiesFile: '../vue/src/components.ts', + excludeComponents: ['my-component'], + includeDefineCustomElements: true, + }), angularOutputTarget({ componentCorePackage: '@siemens/ix', directivesProxyFile: '../angular/src/components.ts', diff --git a/packages/documentation/docs/controls/blind.md b/packages/documentation/docs/controls/blind.md index 98802bcd1df..79bddb55694 100644 --- a/packages/documentation/docs/controls/blind.md +++ b/packages/documentation/docs/controls/blind.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-blind/events.md'; import WebComponent from './../auto-generated/previews/web-component/blind.md' import SourceReact from './../auto-generated/previews/react/blind.md' import SourceAngular from './../auto-generated/previews/angular/blind.md' +import SourceVue from './../auto-generated/previews/vue/blind.md' # Blind @@ -21,6 +22,9 @@ import SourceAngular from './../auto-generated/previews/angular/blind.md' + + + ## Properties diff --git a/packages/documentation/docs/controls/breadcrumb.md b/packages/documentation/docs/controls/breadcrumb.md index e4dd832b147..c144ec1adce 100644 --- a/packages/documentation/docs/controls/breadcrumb.md +++ b/packages/documentation/docs/controls/breadcrumb.md @@ -18,6 +18,10 @@ import SourceAngularBreadcrumb from './../auto-generated/previews/angular/breadc import SourceAngularBreadcrumbTruncate from './../auto-generated/previews/angular/breadcrumb-truncate.md' import SourceAngularBreadcrumbNextItems from './../auto-generated/previews/angular/breadcrumb-next-items.md' +import SourceVueBreadcrumb from './../auto-generated/previews/vue/breadcrumb.md' +import SourceVueBreadcrumbTruncate from './../auto-generated/previews/vue/breadcrumb-truncate.md' +import SourceVueBreadcrumbNextItems from './../auto-generated/previews/vue/breadcrumb-next-items.md' + # Breadcrumb ## Usage @@ -32,6 +36,9 @@ import SourceAngularBreadcrumbNextItems from './../auto-generated/previews/angul + + + ### Truncate @@ -46,6 +53,9 @@ import SourceAngularBreadcrumbNextItems from './../auto-generated/previews/angul + + + ### Lazy loaded next items @@ -60,6 +70,9 @@ import SourceAngularBreadcrumbNextItems from './../auto-generated/previews/angul + + + ## Properties (ix-breadcrumb) diff --git a/packages/documentation/docs/controls/button.md b/packages/documentation/docs/controls/button.md index 048623f0ee8..906851c74b3 100644 --- a/packages/documentation/docs/controls/button.md +++ b/packages/documentation/docs/controls/button.md @@ -22,7 +22,6 @@ import ReactButtons from './../auto-generated/previews/react/buttons.md' import ReactButtonGroup from './../auto-generated/previews/react/button-group.md' import ReactButtonIcon from './../auto-generated/previews/react/button-with-icon.md' import ReactButtonSelected from './../auto-generated/previews/react/button-selected.md' - import ReactButtonSecondary from './../auto-generated/previews/react/button-secondary.md' import ReactButtonGhost from './../auto-generated/previews/react/button-ghost.md' import ReactButtonGrey from './../auto-generated/previews/react/button-grey.md' @@ -41,6 +40,17 @@ import AngularButtonGreySecondary from './../auto-generated/previews/angular/but import AngularButtonGreyGhost from './../auto-generated/previews/angular/button-grey-ghost.md' import AngularButtonTextIcon from './../auto-generated/previews/angular/button-text-icon.md' +import VueButtons from './../auto-generated/previews/vue/buttons.md' +import VueButtonGroup from './../auto-generated/previews/vue/button-group.md' +import VueButtonIcon from './../auto-generated/previews/vue/button-with-icon.md' +import VueButtonSelected from './../auto-generated/previews/vue/button-selected.md' +import VueButtonSecondary from './../auto-generated/previews/vue/button-secondary.md' +import VueButtonGhost from './../auto-generated/previews/vue/button-ghost.md' +import VueButtonGrey from './../auto-generated/previews/vue/button-grey.md' +import VueButtonGreySecondary from './../auto-generated/previews/vue/button-grey-secondary.md' +import VueButtonGreyGhost from './../auto-generated/previews/vue/button-grey-ghost.md' +import VueButtonTextIcon from './../auto-generated/previews/vue/button-text-icon.md' + ## Usage ### Primary @@ -52,6 +62,9 @@ import AngularButtonTextIcon from './../auto-generated/previews/angular/button-t + + + @@ -72,6 +85,9 @@ Will be used in UX context as **Secondary** + + + @@ -89,9 +105,12 @@ Will be used in UX context as **Ghost** - + + + + @@ -109,9 +128,12 @@ Will be used in UX context as **Grey button** - + + + + @@ -129,9 +151,12 @@ Will be used in UX context as **Grey secondary** - + + + + @@ -149,9 +174,12 @@ Will be used in UX context as **Grey ghost** - + + + + @@ -170,7 +198,10 @@ Only available in secondary ghost state - + + + + @@ -184,7 +215,10 @@ Only available in secondary ghost state - + + + + @@ -197,9 +231,12 @@ Only available in secondary ghost state - + + + + @@ -212,7 +249,10 @@ Only available in secondary ghost state - + + + + diff --git a/packages/documentation/docs/controls/category-filter.md b/packages/documentation/docs/controls/category-filter.md index 9fd355440ed..146873ae658 100644 --- a/packages/documentation/docs/controls/category-filter.md +++ b/packages/documentation/docs/controls/category-filter.md @@ -6,10 +6,12 @@ import Events from './../auto-generated/ix-category-filter/events.md'; import SourceCategoryFilter from './../auto-generated/previews/web-component/category-filter.md' import SourceReactCategoryFilter from './../auto-generated/previews/react/category-filter.md' import SourceAngularCategoryFilter from './../auto-generated/previews/angular/category-filter.md' +import SourceVueCategoryFilter from './../auto-generated/previews/vue/category-filter.md' import SourceCategoryFilterSuggestions from './../auto-generated/previews/web-component/category-filter-suggestions.md' import SourceReactCategoryFilterSuggestions from './../auto-generated/previews/react/category-filter-suggestions.md' import SourceAngularCategoryFilterSuggestions from './../auto-generated/previews/angular/category-filter-suggestions.md' +import SourceVueCategoryFilterSuggestions from './../auto-generated/previews/vue/category-filter-suggestions.md' # Category Filter @@ -22,6 +24,9 @@ import SourceAngularCategoryFilterSuggestions from './../auto-generated/previews + + + @@ -36,6 +41,9 @@ import SourceAngularCategoryFilterSuggestions from './../auto-generated/previews + + + diff --git a/packages/documentation/docs/controls/checkbox.md b/packages/documentation/docs/controls/checkbox.md index b83f8553878..ee3d20d6dbe 100644 --- a/packages/documentation/docs/controls/checkbox.md +++ b/packages/documentation/docs/controls/checkbox.md @@ -7,6 +7,8 @@ import SourceReactCheckbox from './../auto-generated/previews/react/checkbox.md' import SourceReactCheckboxInderterminate from './../auto-generated/previews/react/checkbox-indeterminate.md' import SourceAngularCheckbox from './../auto-generated/previews/angular/checkbox.md' import SourceAngularCheckboxInderterminate from './../auto-generated/previews/angular/checkbox-indeterminate.md' +import SourceVueCheckbox from './../auto-generated/previews/vue/checkbox.md' +import SourceVueCheckboxInderterminate from './../auto-generated/previews/vue/checkbox-indeterminate.md' # Checkbox @@ -19,6 +21,9 @@ import SourceAngularCheckboxInderterminate from './../auto-generated/previews/an + + + @@ -33,6 +38,9 @@ import SourceAngularCheckboxInderterminate from './../auto-generated/previews/an + + + diff --git a/packages/documentation/docs/controls/chip.md b/packages/documentation/docs/controls/chip.md index 47ff65042d0..faa3a45831e 100644 --- a/packages/documentation/docs/controls/chip.md +++ b/packages/documentation/docs/controls/chip.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-chip/events.md'; import SourceChip from './../auto-generated/previews/web-component/chip.md' import SourceReactChip from './../auto-generated/previews/react/chip.md' import SourceAngularChip from './../auto-generated/previews/angular/chip.md' +import SourceVueChip from './../auto-generated/previews/vue/chip.md' # Chip @@ -18,6 +19,9 @@ import SourceAngularChip from './../auto-generated/previews/angular/chip.md' + + + diff --git a/packages/documentation/docs/controls/date-picker.md b/packages/documentation/docs/controls/date-picker.md index 61e99e5180e..46ec6c4b52f 100644 --- a/packages/documentation/docs/controls/date-picker.md +++ b/packages/documentation/docs/controls/date-picker.md @@ -6,10 +6,12 @@ import Events from './../auto-generated/ix-date-picker/events.md'; import SourceDatepicker from './../auto-generated/previews/web-component/datepicker.md' import SourceReactDatepicker from './../auto-generated/previews/react/datepicker.md' import SourceAngularDatepicker from './../auto-generated/previews/angular/datepicker.md' +import SourceVueDatepicker from './../auto-generated/previews/vue/datepicker.md' import SourceDatepickerRange from './../auto-generated/previews/web-component/datepicker-range.md' import SourceReactDatepickerRange from './../auto-generated/previews/react/datepicker-range.md' import SourceAngularDatepickerRange from './../auto-generated/previews/angular/datepicker-range.md' +import SourceVueDatepickerRange from './../auto-generated/previews/vue/datepicker-range.md' # Datepicker @@ -22,7 +24,9 @@ import SourceAngularDatepickerRange from './../auto-generated/previews/angular/d - + + + @@ -37,7 +41,9 @@ import SourceAngularDatepickerRange from './../auto-generated/previews/angular/d - + + + diff --git a/packages/documentation/docs/controls/date-time-picker.md b/packages/documentation/docs/controls/date-time-picker.md index 0c6f48ac1f2..6cdcf59ce8b 100644 --- a/packages/documentation/docs/controls/date-time-picker.md +++ b/packages/documentation/docs/controls/date-time-picker.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-datetime-picker/events.md'; import SourceDatetimepicker from './../auto-generated/previews/web-component/datetimepicker.md' import SourceReactDatetimepicker from './../auto-generated/previews/react/datetimepicker.md' import SourceAngularDatetimepicker from './../auto-generated/previews/angular/datetimepicker.md' +import SourceVueDatetimepicker from './../auto-generated/previews/vue/datetimepicker.md' # Datetimepicker @@ -18,6 +19,9 @@ import SourceAngularDatetimepicker from './../auto-generated/previews/angular/da + + + diff --git a/packages/documentation/docs/controls/drawer.md b/packages/documentation/docs/controls/drawer.md index bbadc0cfad2..04323a06fa4 100644 --- a/packages/documentation/docs/controls/drawer.md +++ b/packages/documentation/docs/controls/drawer.md @@ -12,6 +12,9 @@ import SourceReactDrawerFullHeight from './../auto-generated/previews/react/draw import SourceAngularDrawer from './../auto-generated/previews/angular/drawer.md' import SourceAngularDrawerFullHeight from './../auto-generated/previews/angular/drawer-full-height.md' +import SourceVueDrawer from './../auto-generated/previews/vue/drawer.md' +import SourceVueDrawerFullHeight from './../auto-generated/previews/vue/drawer-full-height.md' + # Drawer ## Usage @@ -23,6 +26,9 @@ import SourceAngularDrawerFullHeight from './../auto-generated/previews/angular/ + + + @@ -37,6 +43,9 @@ import SourceAngularDrawerFullHeight from './../auto-generated/previews/angular/ + + + diff --git a/packages/documentation/docs/controls/dropdown.md b/packages/documentation/docs/controls/dropdown.md index 9037325de9d..7fc4bd02de4 100644 --- a/packages/documentation/docs/controls/dropdown.md +++ b/packages/documentation/docs/controls/dropdown.md @@ -16,6 +16,9 @@ import SourceReactDropdownIcon from './../auto-generated/previews/react/dropdown import SourceAngularDropdown from './../auto-generated/previews/angular/dropdown.md' import SourceAngularDropdownIcon from './../auto-generated/previews/angular/dropdown-icon.md' +import SourceVueDropdown from './../auto-generated/previews/vue/dropdown.md' +import SourceVueDropdownIcon from './../auto-generated/previews/vue/dropdown-icon.md' + # Dropdown ## Usage @@ -27,6 +30,9 @@ import SourceAngularDropdownIcon from './../auto-generated/previews/angular/drop + + + @@ -41,6 +47,9 @@ import SourceAngularDropdownIcon from './../auto-generated/previews/angular/drop + + + diff --git a/packages/documentation/docs/controls/event-list.md b/packages/documentation/docs/controls/event-list.md index 6996e44ed3f..30e9bbd0fc1 100644 --- a/packages/documentation/docs/controls/event-list.md +++ b/packages/documentation/docs/controls/event-list.md @@ -17,6 +17,11 @@ import SourceReactEventListSelected from './../auto-generated/previews/react/eve import SourceReactEventListHeight from './../auto-generated/previews/react/event-list-custom-item-height.md' import SourceReactEventListCompact from './../auto-generated/previews/react/event-list-compact.md' +import SourceVueEventList from './../auto-generated/previews/vue/event-list.md' +import SourceVueEventListSelected from './../auto-generated/previews/vue/event-list-selected.md' +import SourceVueEventListHeight from './../auto-generated/previews/vue/event-list-custom-item-height.md' +import SourceVueEventListCompact from './../auto-generated/previews/vue/event-list-compact.md' + import SourceAngularEventList from './../auto-generated/previews/angular/event-list.md' import SourceAngularEventListSelected from './../auto-generated/previews/angular/event-list-selected.md' import SourceAngularEventListHeight from './../auto-generated/previews/angular/event-list-custom-item-height.md' @@ -33,6 +38,9 @@ import SourceAngularEventListCompact from './../auto-generated/previews/angular/ + + + @@ -47,6 +55,9 @@ import SourceAngularEventListCompact from './../auto-generated/previews/angular/ + + + @@ -61,6 +72,9 @@ import SourceAngularEventListCompact from './../auto-generated/previews/angular/ + + + @@ -75,6 +89,9 @@ import SourceAngularEventListCompact from './../auto-generated/previews/angular/ + + + diff --git a/packages/documentation/docs/controls/expanding-search.md b/packages/documentation/docs/controls/expanding-search.md index e98e956ecae..fafc04f19d8 100644 --- a/packages/documentation/docs/controls/expanding-search.md +++ b/packages/documentation/docs/controls/expanding-search.md @@ -5,6 +5,7 @@ import Events from './../auto-generated/ix-expanding-search/events.md'; import SourceExpandingSearch from './../auto-generated/previews/web-component/expanding-search.md' import SourceReactExpandingSearch from './../auto-generated/previews/react/expanding-search.md' +import SourceVueExpandingSearch from './../auto-generated/previews/vue/expanding-search.md' import SourceAngularExpandingSearch from './../auto-generated/previews/angular/expanding-search.md' # Expanding search @@ -18,6 +19,9 @@ import SourceAngularExpandingSearch from './../auto-generated/previews/angular/e + + + diff --git a/packages/documentation/docs/controls/flip.md b/packages/documentation/docs/controls/flip.md index f0ead5e9b56..3771e9447d2 100644 --- a/packages/documentation/docs/controls/flip.md +++ b/packages/documentation/docs/controls/flip.md @@ -5,6 +5,7 @@ import Events from './../auto-generated/ix-flip-tile/events.md'; import SourceFlip from './../auto-generated/previews/web-component/flip-tile.md' import SourceReactFlip from './../auto-generated/previews/react/flip-tile.md' +import SourceVueFlip from './../auto-generated/previews/vue/flip-tile.md' import SourceAngularFlip from './../auto-generated/previews/angular/flip-tile.md' # Flip @@ -18,6 +19,9 @@ import SourceAngularFlip from './../auto-generated/previews/angular/flip-tile.md + + + diff --git a/packages/documentation/docs/controls/group.md b/packages/documentation/docs/controls/group.md index 446b42c0043..8297ee30995 100644 --- a/packages/documentation/docs/controls/group.md +++ b/packages/documentation/docs/controls/group.md @@ -20,6 +20,11 @@ import SourceReactGroupSuppressed from './../auto-generated/previews/react/group import SourceReactGroupCustomEntry from './../auto-generated/previews/react/group-custom-entry.md' import SourceReactGroupContext from './../auto-generated/previews/react/group-context-menu.md' +import SourceVueGroup from './../auto-generated/previews/vue/group.md' +import SourceVueGroupSuppressed from './../auto-generated/previews/vue/group-header-suppressed.md' +import SourceVueGroupCustomEntry from './../auto-generated/previews/vue/group-custom-entry.md' +import SourceVueGroupContext from './../auto-generated/previews/vue/group-context-menu.md' + import SourceAngularGroup from './../auto-generated/previews/angular/group.md' import SourceAngularGroupSuppressed from './../auto-generated/previews/angular/group-header-suppressed.md' import SourceAngularGroupCustomEntry from './../auto-generated/previews/angular/group-custom-entry.md' @@ -36,6 +41,9 @@ import SourceAngularGroupContext from './../auto-generated/previews/angular/grou + + + @@ -48,7 +56,10 @@ import SourceAngularGroupContext from './../auto-generated/previews/angular/grou - + + + + @@ -64,6 +75,9 @@ import SourceAngularGroupContext from './../auto-generated/previews/angular/grou + + + @@ -87,6 +101,9 @@ To show a context menu place an `ix-dropdown` with `slot="dropdown"` combined wi + + + diff --git a/packages/documentation/docs/controls/input.md b/packages/documentation/docs/controls/input.md index 3b51360e4b6..56548616d9e 100644 --- a/packages/documentation/docs/controls/input.md +++ b/packages/documentation/docs/controls/input.md @@ -11,6 +11,11 @@ import SourceReactInputDisabled from './../auto-generated/previews/react/input-d import SourceReactInputReadonly from './../auto-generated/previews/react/input-readonly.md' import SourceReactInputIcon from './../auto-generated/previews/react/input-with-icon.md' +import SourceVueInput from './../auto-generated/previews/vue/input.md' +import SourceVueInputDisabled from './../auto-generated/previews/vue/input-disabled.md' +import SourceVueInputReadonly from './../auto-generated/previews/vue/input-readonly.md' +import SourceVueInputIcon from './../auto-generated/previews/vue/input-with-icon.md' + import SourceAngularInput from './../auto-generated/previews/angular/input.md' import SourceAngularInputDisabled from './../auto-generated/previews/angular/input-disabled.md' import SourceAngularInputReadonly from './../auto-generated/previews/angular/input-readonly.md' @@ -27,6 +32,9 @@ import SourceAngularInputIcon from './../auto-generated/previews/angular/input-w + + + @@ -41,6 +49,9 @@ import SourceAngularInputIcon from './../auto-generated/previews/angular/input-w + + + @@ -55,6 +66,9 @@ import SourceAngularInputIcon from './../auto-generated/previews/angular/input-w + + + @@ -69,6 +83,9 @@ import SourceAngularInputIcon from './../auto-generated/previews/angular/input-w + + + diff --git a/packages/documentation/docs/controls/kpi.md b/packages/documentation/docs/controls/kpi.md index 1de4eea4a40..9df6f373a7f 100644 --- a/packages/documentation/docs/controls/kpi.md +++ b/packages/documentation/docs/controls/kpi.md @@ -4,6 +4,7 @@ import Props from './../auto-generated/ix-kpi/props.md'; import SourceKPI from './../auto-generated/previews/web-component/kpi.md' import SourceReactKPI from './../auto-generated/previews/react/kpi.md' +import SourceVueKPI from './../auto-generated/previews/vue/kpi.md' import SourceAngularKPI from './../auto-generated/previews/angular/kpi.md' # KPI @@ -17,6 +18,9 @@ import SourceAngularKPI from './../auto-generated/previews/angular/kpi.md' + + + diff --git a/packages/documentation/docs/controls/messagebar.md b/packages/documentation/docs/controls/messagebar.md index 3be759ca01f..6c0a34ed81e 100644 --- a/packages/documentation/docs/controls/messagebar.md +++ b/packages/documentation/docs/controls/messagebar.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-message-bar/events.md'; import SourceMessage from './../auto-generated/previews/web-component/message-bar.md'; import SourceReactMessage from './../auto-generated/previews/react/message-bar.md'; +import SourceVueMessage from './../auto-generated/previews/vue/message-bar.md'; import SourceAnuglarMessage from './../auto-generated/previews/angular/message-bar.md'; # Messagebar @@ -19,7 +20,9 @@ import SourceAnuglarMessage from './../auto-generated/previews/angular/message-b - + + + diff --git a/packages/documentation/docs/controls/modal.md b/packages/documentation/docs/controls/modal.md index 2d0d6d52ac1..82ad8abcd7c 100644 --- a/packages/documentation/docs/controls/modal.md +++ b/packages/documentation/docs/controls/modal.md @@ -3,6 +3,7 @@ import Preview from '@site/src/components/Preview'; import SourceModal from './../auto-generated/previews/web-component/modal.md' import SourceReactModal from './../auto-generated/previews/react/modal.md' +import SourceVueModal from './../auto-generated/previews/vue/modal.md' import SourceAngularModal from './../auto-generated/previews/angular/modal.md' # Modal @@ -17,6 +18,9 @@ Select the appropriate tab below for the respective usage information. + + + `@siemens/ix-angular` provides an injectable service that allows you to open modal dialogs based on a `ng-template` reference. diff --git a/packages/documentation/docs/controls/pill.md b/packages/documentation/docs/controls/pill.md index 52387cc1194..c744a31495c 100644 --- a/packages/documentation/docs/controls/pill.md +++ b/packages/documentation/docs/controls/pill.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-pill/events.md'; import SourcePill from './../auto-generated/previews/web-component/pill.md'; import SourceReactPill from './../auto-generated/previews/react/pill.md'; +import SourceVuePill from './../auto-generated/previews/vue/pill.md'; import SourceAngularPill from './../auto-generated/previews/angular/pill.md'; # Pill @@ -19,6 +20,9 @@ import SourceAngularPill from './../auto-generated/previews/angular/pill.md'; + + + diff --git a/packages/documentation/docs/controls/radiobutton.md b/packages/documentation/docs/controls/radiobutton.md index 1b4ec8804d7..b57a149331b 100644 --- a/packages/documentation/docs/controls/radiobutton.md +++ b/packages/documentation/docs/controls/radiobutton.md @@ -3,6 +3,7 @@ import Preview from '@site/src/components/Preview'; import SourceRadio from './../auto-generated/previews/web-component/radio-button.md'; import SourceReactRadio from './../auto-generated/previews/react/radio-button.md'; +import SourceVueRadio from './../auto-generated/previews/vue/radio-button.md'; import SourceAngularRadio from './../auto-generated/previews/angular/radio-button.md'; # Radiobutton @@ -16,6 +17,9 @@ import SourceAngularRadio from './../auto-generated/previews/angular/radio-butto + + + diff --git a/packages/documentation/docs/controls/select.md b/packages/documentation/docs/controls/select.md index aff7e166613..028192c32d7 100644 --- a/packages/documentation/docs/controls/select.md +++ b/packages/documentation/docs/controls/select.md @@ -15,6 +15,10 @@ import SourceReactSelect from './../auto-generated/previews/react/select.md'; import SourceReactEditable from './../auto-generated/previews/react/select-editable.md'; import SourceReactMultiple from './../auto-generated/previews/react/select-multiple.md'; +import SourceVueSelect from './../auto-generated/previews/vue/select.md'; +import SourceVueEditable from './../auto-generated/previews/vue/select-editable.md'; +import SourceVueMultiple from './../auto-generated/previews/vue/select-multiple.md'; + import SourceAngularSelect from './../auto-generated/previews/angular/select.md'; import SourceAngularEditable from './../auto-generated/previews/angular/select-editable.md'; import SourceAngularMultiple from './../auto-generated/previews/angular/select-multiple.md'; @@ -30,6 +34,9 @@ import SourceAngularMultiple from './../auto-generated/previews/angular/select-m + + + @@ -44,6 +51,9 @@ import SourceAngularMultiple from './../auto-generated/previews/angular/select-m + + + @@ -58,6 +68,9 @@ import SourceAngularMultiple from './../auto-generated/previews/angular/select-m + + + diff --git a/packages/documentation/docs/controls/spinner.md b/packages/documentation/docs/controls/spinner.md index edb51eddab1..b504f09f946 100644 --- a/packages/documentation/docs/controls/spinner.md +++ b/packages/documentation/docs/controls/spinner.md @@ -10,6 +10,9 @@ import SourceSpinnerLarge from './../auto-generated/previews/web-component/spinn import SourceReactSpinner from './../auto-generated/previews/react/spinner.md'; import SourceReactSpinnerLarge from './../auto-generated/previews/react/spinner-large.md'; +import SourceVueSpinner from './../auto-generated/previews/vue/spinner.md'; +import SourceVueSpinnerLarge from './../auto-generated/previews/vue/spinner-large.md'; + import SourceAngularSpinner from './../auto-generated/previews/angular/spinner.md'; import SourceAngularSpinnerLarge from './../auto-generated/previews/angular/spinner-large.md'; @@ -24,6 +27,9 @@ import SourceAngularSpinnerLarge from './../auto-generated/previews/angular/spin + + + @@ -38,6 +44,9 @@ import SourceAngularSpinnerLarge from './../auto-generated/previews/angular/spin + + + diff --git a/packages/documentation/docs/controls/split-button.md b/packages/documentation/docs/controls/split-button.md index d04407c13f4..07522377f91 100644 --- a/packages/documentation/docs/controls/split-button.md +++ b/packages/documentation/docs/controls/split-button.md @@ -13,6 +13,9 @@ import SourceSplitButtonIcons from './../auto-generated/previews/web-component/s import SourceReactSplitButton from './../auto-generated/previews/react/split-button.md'; import SourceReactSplitButtonIcons from './../auto-generated/previews/react/split-button-icons.md'; +import SourceVueSplitButton from './../auto-generated/previews/vue/split-button.md'; +import SourceVueSplitButtonIcons from './../auto-generated/previews/vue/split-button-icons.md'; + import SourceAngularSplitButton from './../auto-generated/previews/angular/split-button.md'; import SourceAngularSplitButtonIcons from './../auto-generated/previews/angular/split-button-icons.md'; @@ -27,6 +30,9 @@ import SourceAngularSplitButtonIcons from './../auto-generated/previews/angular/ + + + @@ -38,9 +44,12 @@ import SourceAngularSplitButtonIcons from './../auto-generated/previews/angular/ - + + + + diff --git a/packages/documentation/docs/controls/tabs.md b/packages/documentation/docs/controls/tabs.md index 004e5c7d8cf..d19faba232c 100644 --- a/packages/documentation/docs/controls/tabs.md +++ b/packages/documentation/docs/controls/tabs.md @@ -9,13 +9,14 @@ import ItemEvents from './../auto-generated/ix-tab-item/events.md'; import SourceTabs from './../auto-generated/previews/web-component/tabs.md'; import SourceReactTabs from './../auto-generated/previews/react/tabs.md'; +import SourceVueTabs from './../auto-generated/previews/vue/tabs.md'; import SourceAngularTabs from './../auto-generated/previews/angular/tabs.md'; import SourceTabsRounded from './../auto-generated/previews/web-component/tabs-rounded.md'; import SourceReactTabsRounded from './../auto-generated/previews/react/tabs-rounded.md'; +import SourceVueTabsRounded from './../auto-generated/previews/vue/tabs-rounded.md'; import SourceAngularTabsRounded from './../auto-generated/previews/angular/tabs-rounded.md'; - # Tabs ## Usage @@ -27,6 +28,9 @@ import SourceAngularTabsRounded from './../auto-generated/previews/angular/tabs- + + + @@ -41,6 +45,9 @@ import SourceAngularTabsRounded from './../auto-generated/previews/angular/tabs- + + + diff --git a/packages/documentation/docs/controls/textarea.md b/packages/documentation/docs/controls/textarea.md index b10ae676df9..6f0987428fe 100644 --- a/packages/documentation/docs/controls/textarea.md +++ b/packages/documentation/docs/controls/textarea.md @@ -9,6 +9,10 @@ import SourceReactTextarea from './../auto-generated/previews/react/textarea.md' import SourceReactTextareaDisabled from './../auto-generated/previews/react/textarea-disabled.md'; import SourceReactTextareaReadonly from './../auto-generated/previews/react/textarea-readonly.md'; +import SourceVueTextarea from './../auto-generated/previews/vue/textarea.md'; +import SourceVueTextareaDisabled from './../auto-generated/previews/vue/textarea-disabled.md'; +import SourceVueTextareaReadonly from './../auto-generated/previews/vue/textarea-readonly.md'; + import SourceAngularTextarea from './../auto-generated/previews/angular/textarea.md'; import SourceAngularTextareaDisabled from './../auto-generated/previews/angular/textarea-disabled.md'; import SourceAngularTextareaReadonly from './../auto-generated/previews/angular/textarea-readonly.md'; @@ -24,6 +28,9 @@ import SourceAngularTextareaReadonly from './../auto-generated/previews/angular/ + + + @@ -38,6 +45,9 @@ import SourceAngularTextareaReadonly from './../auto-generated/previews/angular/ + + + @@ -52,6 +62,9 @@ import SourceAngularTextareaReadonly from './../auto-generated/previews/angular/ + + + diff --git a/packages/documentation/docs/controls/tile.md b/packages/documentation/docs/controls/tile.md index 41dc587815a..1f7442cf282 100644 --- a/packages/documentation/docs/controls/tile.md +++ b/packages/documentation/docs/controls/tile.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-tile/events.md'; import SourceTile from './../auto-generated/previews/web-component/tile.md'; import SourceReactTile from './../auto-generated/previews/react/tile.md'; +import SourceVueTile from './../auto-generated/previews/vue/tile.md'; import SourceAngularTile from './../auto-generated/previews/angular/tile.md'; # Tile @@ -19,6 +20,9 @@ import SourceAngularTile from './../auto-generated/previews/angular/tile.md'; + + + diff --git a/packages/documentation/docs/controls/time-picker.md b/packages/documentation/docs/controls/time-picker.md index 7549d0e9445..179a392ea97 100644 --- a/packages/documentation/docs/controls/time-picker.md +++ b/packages/documentation/docs/controls/time-picker.md @@ -5,6 +5,7 @@ import Events from './../auto-generated/ix-time-picker/events.md'; import SourceTimepicker from './../auto-generated/previews/web-component/timepicker.md' import SourceReactTimepicker from './../auto-generated/previews/react/timepicker.md' +import SourceVueTimepicker from './../auto-generated/previews/vue/timepicker.md' import SourceAngularTimepicker from './../auto-generated/previews/angular/timepicker.md' # Timepicker @@ -18,6 +19,9 @@ import SourceAngularTimepicker from './../auto-generated/previews/angular/timepi + + + diff --git a/packages/documentation/docs/controls/toast.md b/packages/documentation/docs/controls/toast.md index a4cc8f904f6..14c80e332fc 100644 --- a/packages/documentation/docs/controls/toast.md +++ b/packages/documentation/docs/controls/toast.md @@ -3,11 +3,13 @@ import TabItem from '@theme/TabItem'; import SourceToast from './../auto-generated/previews/web-component/toast.md'; import SourceReactToast from './../auto-generated/previews/react/toast.md'; +import SourceVueToast from './../auto-generated/previews/vue/toast.md'; import SourceAngularToast from './../auto-generated/previews/angular/toast.md'; import SourceToastCustom from './../auto-generated/previews/web-component/toast-custom.md'; import SourceAngularToastCustom from './../auto-generated/previews/angular/toast-custom.md'; import SourceReactToastCustom from './../auto-generated/previews/react/toast-custom.md'; +import SourceVueToastCustom from './../auto-generated/previews/vue/toast-custom.md'; # Toast @@ -18,6 +20,9 @@ import SourceReactToastCustom from './../auto-generated/previews/react/toast-cus + + + @@ -35,4 +40,7 @@ import SourceReactToastCustom from './../auto-generated/previews/react/toast-cus + + + diff --git a/packages/documentation/docs/controls/toggle.md b/packages/documentation/docs/controls/toggle.md index e8812b0b921..59a0eadb59a 100644 --- a/packages/documentation/docs/controls/toggle.md +++ b/packages/documentation/docs/controls/toggle.md @@ -14,6 +14,11 @@ import SourceReactToggleLabel from './../auto-generated/previews/react/toggle-cu import SourceReactToggleColor from './../auto-generated/previews/react/toggle-color.md'; import SourceReactToggleDisbaled from './../auto-generated/previews/react/toggle-disabled.md'; +import SourceVueToggle from './../auto-generated/previews/vue/toggle.md'; +import SourceVueToggleLabel from './../auto-generated/previews/vue/toggle-custom-label.md'; +import SourceVueToggleColor from './../auto-generated/previews/vue/toggle-color.md'; +import SourceVueToggleDisbaled from './../auto-generated/previews/vue/toggle-disabled.md'; + import SourceAngularToggle from './../auto-generated/previews/angular/toggle.md'; import SourceAngularToggleLabel from './../auto-generated/previews/angular/toggle-custom-label.md'; import SourceAngularToggleColor from './../auto-generated/previews/angular/toggle-color.md'; @@ -30,6 +35,9 @@ import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/to + + + @@ -44,6 +52,9 @@ import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/to + + + @@ -58,6 +69,9 @@ import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/to + + + @@ -72,6 +86,9 @@ import SourceAngularToggleDisbaled from './../auto-generated/previews/angular/to + + + diff --git a/packages/documentation/docs/controls/upload.md b/packages/documentation/docs/controls/upload.md index 8a6715bb490..2526451df89 100644 --- a/packages/documentation/docs/controls/upload.md +++ b/packages/documentation/docs/controls/upload.md @@ -6,6 +6,7 @@ import Events from './../auto-generated/ix-upload/events.md'; import SourceUpload from './../auto-generated/previews/web-component/upload.md'; import SourceReactUpload from './../auto-generated/previews/react/upload.md'; +import SourceVueUpload from './../auto-generated/previews/vue/upload.md'; import SourceAngularUpload from './../auto-generated/previews/angular/upload.md'; # Upload @@ -19,6 +20,9 @@ import SourceAngularUpload from './../auto-generated/previews/angular/upload.md' + + + diff --git a/packages/documentation/docs/controls/workflow.md b/packages/documentation/docs/controls/workflow.md index c2d173a3726..46d2a2ec02e 100644 --- a/packages/documentation/docs/controls/workflow.md +++ b/packages/documentation/docs/controls/workflow.md @@ -8,10 +8,12 @@ import WorkflowStepsEvents from './../auto-generated/ix-workflow-steps/events.md import SourceWorkflow from './../auto-generated/previews/web-component/workflow.md'; import SourceReactWorkflow from './../auto-generated/previews/react/workflow.md'; +import SourceVueWorkflow from './../auto-generated/previews/vue/workflow.md'; import SourceAngularWorkflow from './../auto-generated/previews/angular/workflow.md'; import SourceWorkflowVertical from './../auto-generated/previews/web-component/workflow-vertical.md'; import SourceReactWorkflowVertical from './../auto-generated/previews/react/workflow-vertical.md'; +import SourceVueWorkflowVertical from './../auto-generated/previews/vue/workflow-vertical.md'; import SourceAngularWorkflowVertical from './../auto-generated/previews/angular/workflow-vertical.md'; # Workflow @@ -25,6 +27,9 @@ import SourceAngularWorkflowVertical from './../auto-generated/previews/angular/ + + + @@ -39,6 +44,9 @@ import SourceAngularWorkflowVertical from './../auto-generated/previews/angular/ + + + diff --git a/packages/documentation/docs/icon-library/icons.md b/packages/documentation/docs/icon-library/icons.md index aea86f5b0c6..298353c0ca3 100644 --- a/packages/documentation/docs/icon-library/icons.md +++ b/packages/documentation/docs/icon-library/icons.md @@ -43,6 +43,14 @@ Integrate our growing and comprehensive icon system for industrial applications ``` +### Vue + +```html + + + +``` + ## Icon library diff --git a/packages/documentation/docs/installation/installation.md b/packages/documentation/docs/installation/installation.md index f6dc6c2b755..9ad3b45735f 100644 --- a/packages/documentation/docs/installation/installation.md +++ b/packages/documentation/docs/installation/installation.md @@ -19,4 +19,5 @@ Follow the links below to the respective installation guides: Angular React Web Components + Vue diff --git a/packages/documentation/docs/installation/vue.md b/packages/documentation/docs/installation/vue.md new file mode 100644 index 00000000000..ae0390c41ea --- /dev/null +++ b/packages/documentation/docs/installation/vue.md @@ -0,0 +1,38 @@ +--- +sidebar_position: 2 +sidebar_title: Vue +title: Vue +--- + +### Install dependencies + +Install `@siemens/ix-vue` and `@siemens/ix-icons` using a package manager: + +#### npm + +``` +npm i -S @siemens/ix-vue @siemens/ix-icons +``` + +#### yarn + +``` +yarn add @siemens/ix-vue@latest @siemens/ix-icons +``` + +### Usage + +```ts +import '@siemens/ix-icons/dist/css/ix-icons.css'; +import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; + +import { createApp } from 'vue'; +import { ixPlugin } from '@siemens/ix-vue/dist'; +import Root from './App.vue'; + +const app = createApp(App); + +app.use(ixPlugin); + +app.mount('#root'); +``` diff --git a/packages/documentation/docusaurus.config.js b/packages/documentation/docusaurus.config.js index 90a929d5671..1790f2cbf23 100644 --- a/packages/documentation/docusaurus.config.js +++ b/packages/documentation/docusaurus.config.js @@ -77,7 +77,7 @@ const config = { { name: 'keywords', content: - 'siemens-ix, ix, stenciljs, angular, webcomponent, react, siemens, ix, siemens, industrial, experience', + 'siemens-ix, ix, stenciljs, angular, webcomponent, react, siemens, ix, siemens, industrial, experience, vue', }, { name: 'description', diff --git a/packages/documentation/scripts/generate-api.mjs b/packages/documentation/scripts/generate-api.mjs index fb4181ec58c..6e28b62d82f 100644 --- a/packages/documentation/scripts/generate-api.mjs +++ b/packages/documentation/scripts/generate-api.mjs @@ -250,6 +250,45 @@ function writeAngularPreviews() { }); } +function writeVuePreviews() { + const webComponentPreviews = fs + .readdirSync(htmlPreviewPath) + .filter((name) => name.includes('.html')) + .map((name) => name.replace('.html', '')); + + const vuePreviewPath = path.join( + __dirname, + '../vue-test-app/src/preview-examples' + ); + + const vuePreviews = fs.readdirSync(vuePreviewPath); + const vuePreviewPaths = webComponentPreviews + .filter((name) => { + const exist = vuePreviews.includes(`${name}.vue`); + + if (!exist) { + console.warn(`Vue preview for ${name} is missing in vue-test-app`); + } + + return exist; + }) + .map((name) => [name, path.join(vuePreviewPath, `${name}.vue`)]); + + vuePreviewPaths.forEach(([name, previewPath]) => { + const writePath = path.join( + __dirname, + 'docs', + 'auto-generated', + 'previews', + 'vue' + ); + fse.ensureDirSync(writePath); + const code = fs.readFileSync(previewPath).toString(); + const markdown = generateMarkdown(previewPath, 'html', code); + fs.writeFileSync(path.join(writePath, `${name}.md`), markdown); + }); +} + (async function () { await copyLib(); @@ -259,4 +298,5 @@ function writeAngularPreviews() { writeWebComponentPreviews(); writeReactPreviews(); writeAngularPreviews(); + writeVuePreviews(); })(); diff --git a/packages/documentation/src/components/Preview.tsx b/packages/documentation/src/components/Preview.tsx index 6aafefe5a8d..3d689e92ab1 100644 --- a/packages/documentation/src/components/Preview.tsx +++ b/packages/documentation/src/components/Preview.tsx @@ -32,6 +32,7 @@ export default function Preview(props: { ...[ { value: 'angular', label: 'Angular' }, { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, { value: 'javascript', label: 'Web Components' }, ].filter((v) => { return tabs.map((c) => c.props.value).includes(v.value); diff --git a/packages/documentation/src/components/previewProps.ts b/packages/documentation/src/components/previewProps.ts index 369173452b3..98bd51d2e73 100644 --- a/packages/documentation/src/components/previewProps.ts +++ b/packages/documentation/src/components/previewProps.ts @@ -11,7 +11,7 @@ export interface PreviewProps { name: string; height: string; hideCode?: boolean; - framework?: 'webcomponent' | 'angular'; + framework?: 'webcomponent' | 'angular' | 'react' | 'vue'; activeTab?: string; theme?: string; } diff --git a/packages/documentation/src/utils/localStorage.ts b/packages/documentation/src/utils/localStorage.ts index 544b5ed44b3..13a4416a631 100644 --- a/packages/documentation/src/utils/localStorage.ts +++ b/packages/documentation/src/utils/localStorage.ts @@ -9,7 +9,11 @@ import { SupportedFrameworks } from './useFramework'; -export function getFrameworkSelection(): 'angular' | 'webcomponents' { +export function getFrameworkSelection(): + | 'angular' + | 'webcomponents' + | 'react' + | 'vue' { const framework = localStorage.getItem('framework') as | 'angular' | 'webcomponents'; diff --git a/packages/documentation/src/utils/useFramework.ts b/packages/documentation/src/utils/useFramework.ts index 4a2cbcda40d..40883402be9 100644 --- a/packages/documentation/src/utils/useFramework.ts +++ b/packages/documentation/src/utils/useFramework.ts @@ -9,7 +9,7 @@ import { useEffect, useState } from 'react'; -export type SupportedFrameworks = 'angular' | 'webcomponent' | 'react'; +export type SupportedFrameworks = 'angular' | 'webcomponent' | 'react' | 'vue'; export const useFramework = (initalFramework: SupportedFrameworks) => { const [framework, _setFramework] = useState(); diff --git a/packages/vue-test-app/.gitignore b/packages/vue-test-app/.gitignore new file mode 100644 index 00000000000..a547bf36d8d --- /dev/null +++ b/packages/vue-test-app/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/vue-test-app/index.html b/packages/vue-test-app/index.html new file mode 100644 index 00000000000..2b68e454efc --- /dev/null +++ b/packages/vue-test-app/index.html @@ -0,0 +1,18 @@ + + + + + + + + Vue Test App + + +
+ + + diff --git a/packages/vue-test-app/package.json b/packages/vue-test-app/package.json new file mode 100644 index 00000000000..22c441520ef --- /dev/null +++ b/packages/vue-test-app/package.json @@ -0,0 +1,26 @@ +{ + "name": "vue-test-app", + "version": "1.1.0", + "private": true, + "type": "module", + "scripts": { + "start": "vite", + "build": "vue-tsc && vite build", + "preview": "vite preview" + }, + "dependencies": { + "ag-grid-community": "^28.2.1", + "@siemens/ix-vue": "*", + "@siemens/ix-icons": "~1.0.0", + "@siemens/ix-aggrid": "~1.2.1", + "ag-grid-vue3": "^28.2.1", + "vue": "^3.2.41", + "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^3.2.0", + "typescript": "^4.6.4", + "vite": "^3.2.3", + "vue-tsc": "^1.0.9" + } +} diff --git a/packages/vue-test-app/public/vue.svg b/packages/vue-test-app/public/vue.svg new file mode 100644 index 00000000000..770e9d333ee --- /dev/null +++ b/packages/vue-test-app/public/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/vue-test-app/src/App.vue b/packages/vue-test-app/src/App.vue new file mode 100644 index 00000000000..c104efb50b3 --- /dev/null +++ b/packages/vue-test-app/src/App.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue new file mode 100644 index 00000000000..ad96d9d3f81 --- /dev/null +++ b/packages/vue-test-app/src/Root.vue @@ -0,0 +1,168 @@ + + + + + diff --git a/packages/vue-test-app/src/main.ts b/packages/vue-test-app/src/main.ts new file mode 100644 index 00000000000..50839ed2f83 --- /dev/null +++ b/packages/vue-test-app/src/main.ts @@ -0,0 +1,23 @@ +import 'ag-grid-community/styles/ag-grid.css'; // Core grid CSS, always needed +import 'ag-grid-community/styles/ag-theme-alpine.css'; // Optional theme CSS + +import '@siemens/ix-aggrid/dist/ix-aggrid/ix-aggrid.css'; +import '@siemens/ix-icons/dist/css/ix-icons.css'; +import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +import './style.css'; + +import { ixPlugin } from '@siemens/ix-vue/dist'; +import { createApp } from 'vue'; +import reportWebVitals from './reportWebVitals'; +import Root from './Root.vue'; + +const app = createApp(Root); + +app.use(ixPlugin); + +app.mount('#root'); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/packages/vue-test-app/src/preview-examples/about-and-legal.vue b/packages/vue-test-app/src/preview-examples/about-and-legal.vue new file mode 100644 index 00000000000..7986934d36d --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/about-and-legal.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/aggrid.vue b/packages/vue-test-app/src/preview-examples/aggrid.vue new file mode 100644 index 00000000000..e82d3b527e6 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/aggrid.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/basic-navigation-without-header.vue b/packages/vue-test-app/src/preview-examples/basic-navigation-without-header.vue new file mode 100644 index 00000000000..cb9ba1ba52c --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/basic-navigation-without-header.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/basic-navigation.vue b/packages/vue-test-app/src/preview-examples/basic-navigation.vue new file mode 100644 index 00000000000..645a87cfb9c --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/basic-navigation.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/blind.vue b/packages/vue-test-app/src/preview-examples/blind.vue new file mode 100644 index 00000000000..5ea09cc8400 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/blind.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue b/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue new file mode 100644 index 00000000000..7564dead200 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/breadcrumb-truncate.vue b/packages/vue-test-app/src/preview-examples/breadcrumb-truncate.vue new file mode 100644 index 00000000000..cb5839cfbe9 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/breadcrumb-truncate.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/breadcrumb.vue b/packages/vue-test-app/src/preview-examples/breadcrumb.vue new file mode 100644 index 00000000000..c4fd31e4da6 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/breadcrumb.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-ghost.vue b/packages/vue-test-app/src/preview-examples/button-ghost.vue new file mode 100644 index 00000000000..621220a3239 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-ghost.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue b/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue new file mode 100644 index 00000000000..7d90febb8e5 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue b/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue new file mode 100644 index 00000000000..e02d8633817 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-grey.vue b/packages/vue-test-app/src/preview-examples/button-grey.vue new file mode 100644 index 00000000000..d0a0ca3ddc4 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-grey.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-group.vue b/packages/vue-test-app/src/preview-examples/button-group.vue new file mode 100644 index 00000000000..54a61d16319 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-group.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-secondary.vue b/packages/vue-test-app/src/preview-examples/button-secondary.vue new file mode 100644 index 00000000000..52296f637b2 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-secondary.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-selected.vue b/packages/vue-test-app/src/preview-examples/button-selected.vue new file mode 100644 index 00000000000..2487716da2e --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-selected.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-text-icon.vue b/packages/vue-test-app/src/preview-examples/button-text-icon.vue new file mode 100644 index 00000000000..a8ecf899d8e --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-text-icon.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/button-with-icon.vue b/packages/vue-test-app/src/preview-examples/button-with-icon.vue new file mode 100644 index 00000000000..9098f793010 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/button-with-icon.vue @@ -0,0 +1,49 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/buttons.vue b/packages/vue-test-app/src/preview-examples/buttons.vue new file mode 100644 index 00000000000..e55c25ab9a4 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/buttons.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue b/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue new file mode 100644 index 00000000000..8b8980b47fc --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/category-filter.vue b/packages/vue-test-app/src/preview-examples/category-filter.vue new file mode 100644 index 00000000000..249a3f45d39 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/category-filter.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/checkbox-indeterminate.vue b/packages/vue-test-app/src/preview-examples/checkbox-indeterminate.vue new file mode 100644 index 00000000000..433322ff5f0 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/checkbox-indeterminate.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/checkbox.vue b/packages/vue-test-app/src/preview-examples/checkbox.vue new file mode 100644 index 00000000000..9c992a35492 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/checkbox.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/chip.vue b/packages/vue-test-app/src/preview-examples/chip.vue new file mode 100644 index 00000000000..00ea66144b2 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/chip.vue @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/datepicker-range.vue b/packages/vue-test-app/src/preview-examples/datepicker-range.vue new file mode 100644 index 00000000000..b664e626a83 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/datepicker-range.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/datepicker.vue b/packages/vue-test-app/src/preview-examples/datepicker.vue new file mode 100644 index 00000000000..4a00754741f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/datepicker.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/datetimepicker.vue b/packages/vue-test-app/src/preview-examples/datetimepicker.vue new file mode 100644 index 00000000000..bf281e79b9e --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/datetimepicker.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/drawer-full-height.vue b/packages/vue-test-app/src/preview-examples/drawer-full-height.vue new file mode 100644 index 00000000000..f26e6474e08 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/drawer-full-height.vue @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/drawer.vue b/packages/vue-test-app/src/preview-examples/drawer.vue new file mode 100644 index 00000000000..edeb4011dca --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/drawer.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/dropdown-icon.vue b/packages/vue-test-app/src/preview-examples/dropdown-icon.vue new file mode 100644 index 00000000000..7d111be4ee6 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/dropdown-icon.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/dropdown.vue b/packages/vue-test-app/src/preview-examples/dropdown.vue new file mode 100644 index 00000000000..cd98511e431 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/dropdown.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/event-list-compact.vue b/packages/vue-test-app/src/preview-examples/event-list-compact.vue new file mode 100644 index 00000000000..8647787935f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/event-list-compact.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/event-list-custom-item-height.vue b/packages/vue-test-app/src/preview-examples/event-list-custom-item-height.vue new file mode 100644 index 00000000000..e9d06bc9745 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/event-list-custom-item-height.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/event-list-selected.vue b/packages/vue-test-app/src/preview-examples/event-list-selected.vue new file mode 100644 index 00000000000..48df3e77860 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/event-list-selected.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/event-list.vue b/packages/vue-test-app/src/preview-examples/event-list.vue new file mode 100644 index 00000000000..682d825226f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/event-list.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/expanding-search.vue b/packages/vue-test-app/src/preview-examples/expanding-search.vue new file mode 100644 index 00000000000..997f96c086b --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/expanding-search.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/flip-tile.vue b/packages/vue-test-app/src/preview-examples/flip-tile.vue new file mode 100644 index 00000000000..7987282caa7 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/flip-tile.vue @@ -0,0 +1,79 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/group-context-menu.vue b/packages/vue-test-app/src/preview-examples/group-context-menu.vue new file mode 100644 index 00000000000..da280f8278c --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/group-context-menu.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/group-custom-entry.vue b/packages/vue-test-app/src/preview-examples/group-custom-entry.vue new file mode 100644 index 00000000000..9a604b7e1bb --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/group-custom-entry.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/group-header-suppressed.vue b/packages/vue-test-app/src/preview-examples/group-header-suppressed.vue new file mode 100644 index 00000000000..207ec7f9a29 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/group-header-suppressed.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/group.vue b/packages/vue-test-app/src/preview-examples/group.vue new file mode 100644 index 00000000000..f6a5f4b2448 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/group.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-disabled.vue b/packages/vue-test-app/src/preview-examples/input-disabled.vue new file mode 100644 index 00000000000..a4db7c957b5 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-disabled.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-readonly.vue b/packages/vue-test-app/src/preview-examples/input-readonly.vue new file mode 100644 index 00000000000..d29a584a54b --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-readonly.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input-with-icon.vue b/packages/vue-test-app/src/preview-examples/input-with-icon.vue new file mode 100644 index 00000000000..d5ff8412292 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input-with-icon.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/input.vue b/packages/vue-test-app/src/preview-examples/input.vue new file mode 100644 index 00000000000..4b24966d834 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/input.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/kpi.vue b/packages/vue-test-app/src/preview-examples/kpi.vue new file mode 100644 index 00000000000..5fcc06b6b71 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/kpi.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue b/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue new file mode 100644 index 00000000000..a857ae1c44a --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/map-navigation-overlay.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/map-navigation.vue b/packages/vue-test-app/src/preview-examples/map-navigation.vue new file mode 100644 index 00000000000..a980df90926 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/map-navigation.vue @@ -0,0 +1,28 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue b/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue new file mode 100644 index 00000000000..224f9bb69fb --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/menu-with-bottom-tabs.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/message-bar.vue b/packages/vue-test-app/src/preview-examples/message-bar.vue new file mode 100644 index 00000000000..f1d444af932 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/message-bar.vue @@ -0,0 +1,22 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/modal.vue b/packages/vue-test-app/src/preview-examples/modal.vue new file mode 100644 index 00000000000..d1802d9841a --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/modal.vue @@ -0,0 +1,59 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/pill.vue b/packages/vue-test-app/src/preview-examples/pill.vue new file mode 100644 index 00000000000..7943e271e13 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/pill.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/popover-news.vue b/packages/vue-test-app/src/preview-examples/popover-news.vue new file mode 100644 index 00000000000..253439ba216 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/popover-news.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/radio-button.vue b/packages/vue-test-app/src/preview-examples/radio-button.vue new file mode 100644 index 00000000000..52f186a46d3 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/radio-button.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/select-editable.vue b/packages/vue-test-app/src/preview-examples/select-editable.vue new file mode 100644 index 00000000000..a1567123203 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/select-editable.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/select-multiple.vue b/packages/vue-test-app/src/preview-examples/select-multiple.vue new file mode 100644 index 00000000000..c2bebaa89dc --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/select-multiple.vue @@ -0,0 +1,26 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/select.vue b/packages/vue-test-app/src/preview-examples/select.vue new file mode 100644 index 00000000000..ae2588bfa02 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/select.vue @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/settings.vue b/packages/vue-test-app/src/preview-examples/settings.vue new file mode 100644 index 00000000000..d2772e60a98 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/settings.vue @@ -0,0 +1,38 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/spinner-large.vue b/packages/vue-test-app/src/preview-examples/spinner-large.vue new file mode 100644 index 00000000000..bd85ddc10bd --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/spinner-large.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/spinner.vue b/packages/vue-test-app/src/preview-examples/spinner.vue new file mode 100644 index 00000000000..9db27d7422f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/spinner.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/split-button-icons.vue b/packages/vue-test-app/src/preview-examples/split-button-icons.vue new file mode 100644 index 00000000000..83fbd7b83e6 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/split-button-icons.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/split-button.vue b/packages/vue-test-app/src/preview-examples/split-button.vue new file mode 100644 index 00000000000..25752f39620 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/split-button.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/tabs-rounded.vue b/packages/vue-test-app/src/preview-examples/tabs-rounded.vue new file mode 100644 index 00000000000..763cd7c0aee --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/tabs-rounded.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/tabs.vue b/packages/vue-test-app/src/preview-examples/tabs.vue new file mode 100644 index 00000000000..26d3a34b5c8 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/tabs.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/textarea-disabled.vue b/packages/vue-test-app/src/preview-examples/textarea-disabled.vue new file mode 100644 index 00000000000..865f5b2a885 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/textarea-disabled.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/textarea-readonly.vue b/packages/vue-test-app/src/preview-examples/textarea-readonly.vue new file mode 100644 index 00000000000..979f8f43bfb --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/textarea-readonly.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/textarea.vue b/packages/vue-test-app/src/preview-examples/textarea.vue new file mode 100644 index 00000000000..1dfd32f80f7 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/textarea.vue @@ -0,0 +1,14 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/tile.vue b/packages/vue-test-app/src/preview-examples/tile.vue new file mode 100644 index 00000000000..f7b47bf2be9 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/tile.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/timepicker.vue b/packages/vue-test-app/src/preview-examples/timepicker.vue new file mode 100644 index 00000000000..231efbebd5a --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/timepicker.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toast-custom-element.vue b/packages/vue-test-app/src/preview-examples/toast-custom-element.vue new file mode 100644 index 00000000000..8feb47a268f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toast-custom-element.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toast-custom.vue b/packages/vue-test-app/src/preview-examples/toast-custom.vue new file mode 100644 index 00000000000..53690b15323 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toast-custom.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toast.vue b/packages/vue-test-app/src/preview-examples/toast.vue new file mode 100644 index 00000000000..3f3744c2cee --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toast.vue @@ -0,0 +1,18 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toggle-color.vue b/packages/vue-test-app/src/preview-examples/toggle-color.vue new file mode 100644 index 00000000000..9ea28921392 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toggle-color.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toggle-custom-label.vue b/packages/vue-test-app/src/preview-examples/toggle-custom-label.vue new file mode 100644 index 00000000000..ce7138824c2 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toggle-custom-label.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toggle-disabled.vue b/packages/vue-test-app/src/preview-examples/toggle-disabled.vue new file mode 100644 index 00000000000..8c1b6fca491 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toggle-disabled.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/toggle.vue b/packages/vue-test-app/src/preview-examples/toggle.vue new file mode 100644 index 00000000000..82387164f13 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/toggle.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/tree.vue b/packages/vue-test-app/src/preview-examples/tree.vue new file mode 100644 index 00000000000..31bd1a8161f --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/tree.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/upload.vue b/packages/vue-test-app/src/preview-examples/upload.vue new file mode 100644 index 00000000000..f652096bc2b --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/upload.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue b/packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue new file mode 100644 index 00000000000..5811c2d21a3 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/vertical-tabs-with-avatar.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/vertical-tabs.vue b/packages/vue-test-app/src/preview-examples/vertical-tabs.vue new file mode 100644 index 00000000000..3314fdaad1d --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/vertical-tabs.vue @@ -0,0 +1,24 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/workflow-vertical.vue b/packages/vue-test-app/src/preview-examples/workflow-vertical.vue new file mode 100644 index 00000000000..430756353b3 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/workflow-vertical.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/vue-test-app/src/preview-examples/workflow.vue b/packages/vue-test-app/src/preview-examples/workflow.vue new file mode 100644 index 00000000000..79783a3af96 --- /dev/null +++ b/packages/vue-test-app/src/preview-examples/workflow.vue @@ -0,0 +1,23 @@ + + + + + diff --git a/packages/vue-test-app/src/reportWebVitals.ts b/packages/vue-test-app/src/reportWebVitals.ts new file mode 100644 index 00000000000..ea6285e2e32 --- /dev/null +++ b/packages/vue-test-app/src/reportWebVitals.ts @@ -0,0 +1,24 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/packages/vue-test-app/src/setupTests.ts b/packages/vue-test-app/src/setupTests.ts new file mode 100644 index 00000000000..c7cf455cd87 --- /dev/null +++ b/packages/vue-test-app/src/setupTests.ts @@ -0,0 +1,14 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/packages/vue-test-app/src/style.css b/packages/vue-test-app/src/style.css new file mode 100644 index 00000000000..1cd5ce8dc48 --- /dev/null +++ b/packages/vue-test-app/src/style.css @@ -0,0 +1,54 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + height: 100vh; + width: 100vw; +} + +#root { + width: 100%; + height: 100%; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} + +.example { + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + max-width: 20rem; +} + +.example > * { + margin: 0.5rem; +} + +.placeholder-logo { + float: left; + width: 8.625rem; + height: 31px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136.221' height='12' viewBox='0 0 136.221 12'%3E%3Cg id='Gruppe_4763' data-name='Gruppe 4763' transform='translate(-85 -28)'%3E%3Cg id='Polygon_3' data-name='Polygon 3' transform='translate(111 28)' fill='none'%3E%3Cpath d='M7,0l7,12H0Z' stroke='none'/%3E%3Cpath d='M 7 3.969271659851074 L 3.482074737548828 10 L 10.51792526245117 10 L 7 3.969271659851074 M 7 9.5367431640625e-07 L 14 12 L 0 12 L 7 9.5367431640625e-07 Z' stroke='none' fill='%23fff'/%3E%3C/g%3E%3Cg id='Ellipse_14' data-name='Ellipse 14' transform='translate(99 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='6' cy='6' r='6' stroke='none'/%3E%3Ccircle cx='6' cy='6' r='5' fill='none'/%3E%3C/g%3E%3Cg id='Rechteck_1111' data-name='Rechteck 1111' transform='translate(85 28)' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect width='12' height='12' stroke='none'/%3E%3Crect x='1' y='1' width='10' height='10' fill='none'/%3E%3C/g%3E%3Cpath id='Pfad_4060' data-name='Pfad 4060' d='M4.289,14.938V10.177L-.137,3.347H2.89L4.8,6.415q.376.605.859,1.513.458-.875.867-1.538l1.9-3.043h2.855L6.9,10.177v4.761Zm12.54-11.8a5.162,5.162,0,0,1,4.188,1.734,6.4,6.4,0,0,1,1.4,4.27,6.2,6.2,0,0,1-1.652,4.54,5.249,5.249,0,0,1-3.935,1.456,5.162,5.162,0,0,1-4.188-1.734,6.5,6.5,0,0,1-1.4-4.335A6.126,6.126,0,0,1,12.894,4.59,5.283,5.283,0,0,1,16.829,3.143ZM16.82,5.188a2.46,2.46,0,0,0-2.184,1.178,4.906,4.906,0,0,0-.7,2.732,4.78,4.78,0,0,0,.826,2.994,2.617,2.617,0,0,0,4.254-.18,4.922,4.922,0,0,0,.7-2.765,4.706,4.706,0,0,0-.826-2.953A2.484,2.484,0,0,0,16.82,5.188Zm7.64-1.84H27.07v6.732a4.482,4.482,0,0,0,.368,2.249,1.662,1.662,0,0,0,.728.56,2.652,2.652,0,0,0,1.063.209,2.744,2.744,0,0,0,1.194-.249,1.6,1.6,0,0,0,.753-.675,5.051,5.051,0,0,0,.286-2.094V3.347H33.99V9.768a15.378,15.378,0,0,1-.139,2.593q-.6,2.781-4.63,2.781-3.125,0-4.18-1.669a3.279,3.279,0,0,1-.466-1.28,17.763,17.763,0,0,1-.115-2.425ZM36.64,14.938V3.347h4.188a8.256,8.256,0,0,1,1.763.151,3.086,3.086,0,0,1,1.141.495,2.874,2.874,0,0,1,1.145,2.47,3.085,3.085,0,0,1-.56,1.881,2.812,2.812,0,0,1-1.6,1.039,1.748,1.748,0,0,1,.773.6,11.953,11.953,0,0,1,.863,1.689l1.464,3.264H43.029L42.1,12.721A8.465,8.465,0,0,0,41.09,10.8a1.551,1.551,0,0,0-1.235-.54H39.25v4.679ZM39.184,8.3h.908a3.137,3.137,0,0,0,1.481-.27,1.328,1.328,0,0,0,.7-1.26,1.294,1.294,0,0,0-.5-1.137,3.09,3.09,0,0,0-1.677-.327h-.908Zm12.434,6.634V3.347h1.342V13.834h5.022v1.1ZM63.626,3.183a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,63.618,15.1a4.5,4.5,0,0,1-3.8-1.775A6.815,6.815,0,0,1,58.5,9.081a7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,63.626,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,66.252,5.5,3.237,3.237,0,0,0,63.626,4.288Zm15.9,4.671v5.481a10.2,10.2,0,0,1-1.734.479A9.6,9.6,0,0,1,76,15.1a5.161,5.161,0,0,1-3.8-1.456,5.848,5.848,0,0,1-1.636-4.352,6.279,6.279,0,0,1,1.644-4.556,5.1,5.1,0,0,1,3.845-1.554A8.072,8.072,0,0,1,79.446,4l-.393,1.072a6.617,6.617,0,0,0-3.043-.785,3.483,3.483,0,0,0-3.018,1.481,5.926,5.926,0,0,0-1.006,3.509,4.879,4.879,0,0,0,1.374,3.7A3.852,3.852,0,0,0,76.133,14a6.167,6.167,0,0,0,2.053-.368V10.063H75.9v-1.1Zm7.436-5.775a4.487,4.487,0,0,1,3.8,1.775,6.745,6.745,0,0,1,1.317,4.188,7.153,7.153,0,0,1-.605,2.961A4.618,4.618,0,0,1,86.955,15.1a4.5,4.5,0,0,1-3.8-1.775,6.815,6.815,0,0,1-1.317-4.245,7.051,7.051,0,0,1,.605-2.9A4.618,4.618,0,0,1,86.963,3.183Zm0,1.1a3.231,3.231,0,0,0-2.806,1.44,5.763,5.763,0,0,0-.9,3.362,5.71,5.71,0,0,0,1.072,3.7,3.445,3.445,0,0,0,5.423-.229,5.794,5.794,0,0,0,.908-3.411A5.605,5.605,0,0,0,89.589,5.5,3.237,3.237,0,0,0,86.963,4.288Z' transform='translate(129.137 24.857)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A"); + background-repeat: no-repeat; + background-position: center; + display: inline-flex; + justify-content: center; + align-items: center; +} diff --git a/packages/vue-test-app/src/testing/NavigationTest.vue b/packages/vue-test-app/src/testing/NavigationTest.vue new file mode 100644 index 00000000000..33874f95fcc --- /dev/null +++ b/packages/vue-test-app/src/testing/NavigationTest.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/packages/vue-test-app/src/vite-env.d.ts b/packages/vue-test-app/src/vite-env.d.ts new file mode 100644 index 00000000000..323c78a6cd8 --- /dev/null +++ b/packages/vue-test-app/src/vite-env.d.ts @@ -0,0 +1,7 @@ +/// + +declare module '*.vue' { + import type { DefineComponent } from 'vue' + const component: DefineComponent<{}, {}, any> + export default component +} diff --git a/packages/vue-test-app/tsconfig.json b/packages/vue-test-app/tsconfig.json new file mode 100644 index 00000000000..b557c4047ca --- /dev/null +++ b/packages/vue-test-app/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": ["ESNext", "DOM"], + "skipLibCheck": true, + "noEmit": true + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/packages/vue-test-app/tsconfig.node.json b/packages/vue-test-app/tsconfig.node.json new file mode 100644 index 00000000000..9d31e2aed93 --- /dev/null +++ b/packages/vue-test-app/tsconfig.node.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/packages/vue-test-app/vite.config.ts b/packages/vue-test-app/vite.config.ts new file mode 100644 index 00000000000..110df865dea --- /dev/null +++ b/packages/vue-test-app/vite.config.ts @@ -0,0 +1,16 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import vue from '@vitejs/plugin-vue'; +import { defineConfig } from 'vite'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +}); diff --git a/packages/vue/.gitignore b/packages/vue/.gitignore new file mode 100644 index 00000000000..0b2ca524b97 --- /dev/null +++ b/packages/vue/.gitignore @@ -0,0 +1,4 @@ +node_modules/ +dist/ + +*.log diff --git a/packages/vue/LICENSE b/packages/vue/LICENSE new file mode 100644 index 00000000000..b818987cbfc --- /dev/null +++ b/packages/vue/LICENSE @@ -0,0 +1,9 @@ +MIT License + +Copyright (c) 2022 Siemens AG + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/vue/README.md b/packages/vue/README.md new file mode 100644 index 00000000000..240d43372c8 --- /dev/null +++ b/packages/vue/README.md @@ -0,0 +1,4 @@ +# Siemens iX Vue Components + +This library is part of the Siemens iX mono repository. +You can find the root README [here](https://github.com/siemens/ix/blob/main/README.md) diff --git a/packages/vue/package.json b/packages/vue/package.json new file mode 100644 index 00000000000..53857d6e7b3 --- /dev/null +++ b/packages/vue/package.json @@ -0,0 +1,39 @@ +{ + "name": "@siemens/ix-vue", + "homepage": "https://ix.siemens.io", + "author": "Siemens AG", + "license": "MIT", + "version": "1.2.1", + "description": "Siemens iX for Vue", + "bugs": "https://github.com/siemens/ix/issues", + "repository": { + "type": "git", + "url": "https://github.com/siemens/ix", + "directory": "packages/vue" + }, + "module": "dist/index.js", + "main": "dist/index.js", + "types": "dist/types/index.d.ts", + "files": [ + "LICENSE", + "README.md", + "dist" + ], + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1", + "build": "yarn clean && yarn compile", + "compile": "yarn tsc", + "clean": "rimraf dist" + }, + "dependencies": { + "@siemens/ix": "~1.2.1", + "@siemens/ix-icons": "~1.0.0" + }, + "devDependencies": { + "rimraf": "^3.0.2", + "vue": "^3.2.45" + }, + "peerDependencies": { + "vue": ">=3.2.45" + } +} diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts new file mode 100644 index 00000000000..adbaa0f70b5 --- /dev/null +++ b/packages/vue/src/components.ts @@ -0,0 +1,630 @@ +/* eslint-disable */ +/* tslint:disable */ +/* auto-generated vue proxies */ +import { defineContainer } from './vue-component-lib/utils'; + +import type { JSX } from '@siemens/ix'; + +import { defineCustomElements } from '@siemens/ix/loader'; + +defineCustomElements(); + +export const IxAnimatedTab = /*@__PURE__*/ defineContainer('ix-animated-tab', undefined, [ + 'icon', + 'count' +]); + + +export const IxAnimatedTabs = /*@__PURE__*/ defineContainer('ix-animated-tabs', undefined, [ + 'disableAnimations', + 'selectedIndex', + 'tabPlacement', + 'tabClick' +]); + + +export const IxApplicationHeader = /*@__PURE__*/ defineContainer('ix-application-header', undefined, [ + 'name' +]); + + +export const IxBasicNavigation = /*@__PURE__*/ defineContainer('ix-basic-navigation', undefined, [ + 'applicationName', + 'hideHeader' +]); + + +export const IxBlind = /*@__PURE__*/ defineContainer('ix-blind', undefined, [ + 'collapsed', + 'label', + 'collapsedChange' +]); + + +export const IxBreadcrumb = /*@__PURE__*/ defineContainer('ix-breadcrumb', undefined, [ + 'visibleItemCount', + 'nextItems', + 'ghost', + 'itemClick', + 'nextClick' +]); + + +export const IxBreadcrumbItem = /*@__PURE__*/ defineContainer('ix-breadcrumb-item', undefined, [ + 'label', + 'icon' +]); + + +export const IxButton = /*@__PURE__*/ defineContainer('ix-button', undefined, [ + 'variant', + 'outline', + 'invisible', + 'ghost', + 'selected', + 'disabled', + 'type' +]); + + +export const IxCategoryFilter = /*@__PURE__*/ defineContainer('ix-category-filter', undefined, [ + 'initialState', + 'filterState', + 'placeholder', + 'categories', + 'nonSelectableCategories', + 'suggestions', + 'icon', + 'hideIcon', + 'repeatCategories', + 'tmpDisableScrollIntoView', + 'labelCategories', + 'i18nPlainText', + 'inputChanged', + 'filterChanged' +]); + + +export const IxChip = /*@__PURE__*/ defineContainer('ix-chip', undefined, [ + 'variant', + 'active', + 'closable', + 'icon', + 'background', + 'color', + 'outline', + 'close' +]); + + +export const IxCounterPill = /*@__PURE__*/ defineContainer('ix-counter-pill', undefined, [ + 'variant', + 'outline', + 'background', + 'color', + 'alignLeft' +]); + + +export const IxDatePicker = /*@__PURE__*/ defineContainer('ix-date-picker', undefined, [ + 'format', + 'range', + 'individual', + 'corners', + 'from', + 'to', + 'minDate', + 'maxDate', + 'eventDelimiter', + 'textSelectDate', + 'dateChange', + 'dateRangeChange', + 'done', + 'dateSelect' +]); + + +export const IxDateTimeCard = /*@__PURE__*/ defineContainer('ix-date-time-card', undefined, [ + 'individual', + 'corners' +]); + + +export const IxDatetimePicker = /*@__PURE__*/ defineContainer('ix-datetime-picker', undefined, [ + 'range', + 'showHour', + 'showMinutes', + 'showSeconds', + 'minDate', + 'maxDate', + 'dateFormat', + 'timeFormat', + 'from', + 'to', + 'time', + 'showTimeReference', + 'eventDelimiter', + 'timeReference', + 'textSelectDate', + 'done', + 'timeChange', + 'dateChange', + 'dateSelect' +]); + + +export const IxDrawer = /*@__PURE__*/ defineContainer('ix-drawer', undefined, [ + 'show', + 'closeOnClickOutside', + 'fullHeight', + 'minWidth', + 'maxWidth', + 'width', + 'open', + 'drawerClose' +]); + + +export const IxDropdown = /*@__PURE__*/ defineContainer('ix-dropdown', undefined, [ + 'show', + 'trigger', + 'anchor', + 'closeBehavior', + 'placement', + 'positioningStrategy', + 'adjustDropdownWidthToReferenceWith', + 'adjustDropdownWidthToReferenceWidth', + 'header', + 'showChanged' +]); + + +export const IxDropdownItem = /*@__PURE__*/ defineContainer('ix-dropdown-item', undefined, [ + 'label', + 'icon', + 'hover', + 'disabled', + 'checked', + 'itemClick' +]); + + +export const IxEventList = /*@__PURE__*/ defineContainer('ix-event-list', undefined, [ + 'itemHeight', + 'compact', + 'animated', + 'chevron' +]); + + +export const IxEventListItem = /*@__PURE__*/ defineContainer('ix-event-list-item', undefined, [ + 'color', + 'selected', + 'disabled', + 'chevron', + 'opacity', + 'itemClick' +]); + + +export const IxExpandingSearch = /*@__PURE__*/ defineContainer('ix-expanding-search', undefined, [ + 'icon', + 'placeholder', + 'value', + 'valueChange' +]); + + +export const IxFilterChip = /*@__PURE__*/ defineContainer('ix-filter-chip', undefined, [ + 'disabled', + 'closeClick' +]); + + +export const IxFlipTile = /*@__PURE__*/ defineContainer('ix-flip-tile', undefined, [ + 'state', + 'footer' +]); + + +export const IxFlipTileContent = /*@__PURE__*/ defineContainer('ix-flip-tile-content', undefined); + + +export const IxGroup = /*@__PURE__*/ defineContainer('ix-group', undefined, [ + 'suppressHeaderSelection', + 'header', + 'subHeader', + 'collapsed', + 'selected', + 'index', + 'expandOnHeaderClick', + 'selectGroup', + 'selectItem', + 'collapsedChanged' +]); + + +export const IxGroupContextMenu = /*@__PURE__*/ defineContainer('ix-group-context-menu', undefined); + + +export const IxGroupDropdownItem = /*@__PURE__*/ defineContainer('ix-group-dropdown-item', undefined, [ + 'label', + 'icon' +]); + + +export const IxGroupItem = /*@__PURE__*/ defineContainer('ix-group-item', undefined, [ + 'icon', + 'text', + 'secondaryText', + 'suppressSelection', + 'selected', + 'focusable', + 'index', + 'selectedChanged' +]); + + +export const IxIcon = /*@__PURE__*/ defineContainer('ix-icon', undefined, [ + 'size', + 'color', + 'name' +]); + + +export const IxIconButton = /*@__PURE__*/ defineContainer('ix-icon-button', undefined, [ + 'variant', + 'outline', + 'invisible', + 'ghost', + 'oval', + 'icon', + 'size', + 'color', + 'selected', + 'disabled', + 'type' +]); + + +export const IxInputGroup = /*@__PURE__*/ defineContainer('ix-input-group', undefined); + + +export const IxKpi = /*@__PURE__*/ defineContainer('ix-kpi', undefined, [ + 'label', + 'value', + 'unit', + 'state', + 'orientation' +]); + + +export const IxMapNavigation = /*@__PURE__*/ defineContainer('ix-map-navigation', undefined, [ + 'applicationName', + 'navigationTitle', + 'hideContextMenu', + 'navigationToggled', + 'contextMenuClick' +]); + + +export const IxMapNavigationOverlay = /*@__PURE__*/ defineContainer('ix-map-navigation-overlay', undefined, [ + 'name', + 'icon', + 'color', + 'closeClick' +]); + + +export const IxMenu = /*@__PURE__*/ defineContainer('ix-menu', undefined, [ + 'showSettings', + 'showAbout', + 'enableToggleTheme', + 'enableSettings', + 'enableMapExpand', + 'applicationName', + 'applicationDescription', + 'maxVisibleMenuItems', + 'i18nLegal', + 'i18nSettings', + 'i18nToggleTheme', + 'i18nExpand', + 'i18nCollapse', + 'i18nMore', + 'expand', + 'expandChange', + 'mapExpandChange' +]); + + +export const IxMenuAbout = /*@__PURE__*/ defineContainer('ix-menu-about', undefined, [ + 'activeTabLabel', + 'label', + 'show', + 'close' +]); + + +export const IxMenuAboutItem = /*@__PURE__*/ defineContainer('ix-menu-about-item', undefined, [ + 'label' +]); + + +export const IxMenuAboutNews = /*@__PURE__*/ defineContainer('ix-menu-about-news', undefined, [ + 'show', + 'label', + 'i18nShowMore', + 'aboutItemLabel', + 'offsetBottom', + 'expanded', + 'showMore', + 'closePopover' +]); + + +export const IxMenuAvatar = /*@__PURE__*/ defineContainer('ix-menu-avatar', undefined, [ + 'top', + 'bottom', + 'i18nLogout', + 'logoutClick' +]); + + +export const IxMenuAvatarItem = /*@__PURE__*/ defineContainer('ix-menu-avatar-item', undefined, [ + 'icon', + 'label', + 'itemClick' +]); + + +export const IxMenuItem = /*@__PURE__*/ defineContainer('ix-menu-item', undefined, [ + 'home', + 'bottom', + 'tabIcon', + 'notifications', + 'active', + 'disabled' +]); + + +export const IxMenuSettings = /*@__PURE__*/ defineContainer('ix-menu-settings', undefined, [ + 'activeTabLabel', + 'label', + 'show', + 'close' +]); + + +export const IxMenuSettingsItem = /*@__PURE__*/ defineContainer('ix-menu-settings-item', undefined, [ + 'label' +]); + + +export const IxMessageBar = /*@__PURE__*/ defineContainer('ix-message-bar', undefined, [ + 'type', + 'dismissible', + 'closedChange' +]); + + +export const IxModal = /*@__PURE__*/ defineContainer('ix-modal', undefined, [ + 'animation', + 'ariaDescribedBy', + 'ariaLabelledBy', + 'backdrop', + 'backdropClass', + 'beforeDismiss', + 'centered', + 'content', + 'keyboard', + 'icon', + 'iconColor', + 'modalDialogClass', + 'scrollable', + 'size', + 'headerTitle', + 'windowClass', + 'closed', + 'dismissed' +]); + + +export const IxModalContainer = /*@__PURE__*/ defineContainer('ix-modal-container', undefined); + + +export const IxModalExample = /*@__PURE__*/ defineContainer('ix-modal-example', undefined); + + +export const IxPill = /*@__PURE__*/ defineContainer('ix-pill', undefined, [ + 'variant', + 'outline', + 'icon', + 'background', + 'color', + 'alignLeft' +]); + + +export const IxSelect = /*@__PURE__*/ defineContainer('ix-select', undefined, [ + 'selectedIndices', + 'allowClear', + 'mode', + 'editable', + 'disabled', + 'readonly', + 'i18nPlaceholder', + 'i18nPlaceholderEditable', + 'i18nSelectListHeader', + 'itemSelectionChange', + 'addItem' +]); + + +export const IxSelectItem = /*@__PURE__*/ defineContainer('ix-select-item', undefined, [ + 'label', + 'value', + 'selected', + 'hover', + 'itemClick' +]); + + +export const IxSpinner = /*@__PURE__*/ defineContainer('ix-spinner', undefined, [ + 'variant', + 'size' +]); + + +export const IxSplitButton = /*@__PURE__*/ defineContainer('ix-split-button', undefined, [ + 'variant', + 'outline', + 'invisible', + 'ghost', + 'label', + 'icon', + 'splitIcon', + 'disabled', + 'placement', + 'buttonClick' +]); + + +export const IxSplitButtonItem = /*@__PURE__*/ defineContainer('ix-split-button-item', undefined, [ + 'icon', + 'label', + 'itemClick' +]); + + +export const IxTabItem = /*@__PURE__*/ defineContainer('ix-tab-item', undefined, [ + 'selected', + 'disabled', + 'small', + 'icon', + 'rounded', + 'counter', + 'layout', + 'placement' +]); + + +export const IxTabs = /*@__PURE__*/ defineContainer('ix-tabs', undefined, [ + 'small', + 'rounded', + 'selected', + 'layout', + 'placement' +]); + + +export const IxTile = /*@__PURE__*/ defineContainer('ix-tile', undefined, [ + 'size' +]); + + +export const IxTimePicker = /*@__PURE__*/ defineContainer('ix-time-picker', undefined, [ + 'format', + 'corners', + 'individual', + 'showHour', + 'showMinutes', + 'showSeconds', + 'time', + 'showTimeReference', + 'timeReference', + 'textSelectTime', + 'done', + 'timeChange' +]); + + +export const IxToast = /*@__PURE__*/ defineContainer('ix-toast', undefined, [ + 'type', + 'toastTitle', + 'autoCloseDelay', + 'autoClose', + 'icon', + 'iconColor', + 'closeToast' +]); + + +export const IxToastContainer = /*@__PURE__*/ defineContainer('ix-toast-container', undefined, [ + 'containerId', + 'containerClass', + 'position' +]); + + +export const IxToggle = /*@__PURE__*/ defineContainer('ix-toggle', undefined, [ + 'checked', + 'disabled', + 'indeterminate', + 'color', + 'textOn', + 'textOff', + 'textIndeterminate', + 'hideText', + 'checkedChange' +]); + + +export const IxTree = /*@__PURE__*/ defineContainer('ix-tree', undefined, [ + 'root', + 'model', + 'renderItem', + 'context', + 'contextChange', + 'nodeRemoved' +]); + + +export const IxTreeItem = /*@__PURE__*/ defineContainer('ix-tree-item', undefined, [ + 'text', + 'hasChildren', + 'context', + 'toggle', + 'itemClick' +]); + + +export const IxUpload = /*@__PURE__*/ defineContainer('ix-upload', undefined, [ + 'accept', + 'multiple', + 'multiline', + 'disabled', + 'state', + 'selectFileText', + 'loadingText', + 'uploadFailedText', + 'uploadSuccessText', + 'i18nUploadFile', + 'i18nUploadDisabled', + 'filesChanged' +]); + + +export const IxValidationTooltip = /*@__PURE__*/ defineContainer('ix-validation-tooltip', undefined, [ + 'message', + 'placement' +]); + + +export const IxWorkflowStep = /*@__PURE__*/ defineContainer('ix-workflow-step', undefined, [ + 'vertical', + 'disabled', + 'status', + 'clickable', + 'selected', + 'position' +]); + + +export const IxWorkflowSteps = /*@__PURE__*/ defineContainer('ix-workflow-steps', undefined, [ + 'vertical', + 'linear', + 'clickable', + 'selectedIndex', + 'stepSelected' +]); + diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts new file mode 100644 index 00000000000..9f4d43fb4e0 --- /dev/null +++ b/packages/vue/src/index.ts @@ -0,0 +1,7 @@ +export * from './components'; +// export * from './modal'; +export * from './plugin'; +export * from './toast'; +// export * from './tree'; + +export type HTMLRefElement = { $el: T }; diff --git a/packages/vue/src/plugin.ts b/packages/vue/src/plugin.ts new file mode 100644 index 00000000000..acefa1917a0 --- /dev/null +++ b/packages/vue/src/plugin.ts @@ -0,0 +1,10 @@ +import { Plugin } from 'vue'; +import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader'; + +export const ixPlugin: Plugin = { + async install() { + applyPolyfills().then(() => { + defineCustomElements(); + }); + }, +}; diff --git a/packages/vue/src/toast/index.ts b/packages/vue/src/toast/index.ts new file mode 100644 index 00000000000..245a5a6cd36 --- /dev/null +++ b/packages/vue/src/toast/index.ts @@ -0,0 +1,10 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +export * from './toast'; diff --git a/packages/vue/src/toast/toast.ts b/packages/vue/src/toast/toast.ts new file mode 100644 index 00000000000..424ace54b6e --- /dev/null +++ b/packages/vue/src/toast/toast.ts @@ -0,0 +1,30 @@ +/* + * SPDX-FileCopyrightText: 2022 Siemens AG + * + * SPDX-License-Identifier: MIT + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { toast, ToastConfig as IxToastConfig } from '@siemens/ix'; + +export type ToastConfig = { + message: string | HTMLElement; +}; + +export async function showToast( + config: Omit & ToastConfig +) { + if (typeof config.message === 'string') { + const toastInstance = await toast(config as IxToastConfig); + return toastInstance; + } + + const toastInstance = await toast({ + ...config, + message: config.message.cloneNode(true) as HTMLElement, + }); + + return toastInstance; +} diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts new file mode 100644 index 00000000000..e48debacfad --- /dev/null +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -0,0 +1,198 @@ +import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } 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'; + +/** + * 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) +* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been +* correctly updated when a user's event callback fires. +*/ +export const defineContainer = ( + name: string, + defineCustomElement: any, + componentProps: string[] = [], + modelProp?: string, + modelUpdateEvent?: string, + externalModelUpdateEvent?: 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: any, { attrs, slots, emit }) => { + let modelPropValue = props[modelProp]; + const containerRef = ref(); + const classes = new Set(getComponentClasses(attrs.class)); + const onVnodeBeforeMount = (vnode: VNode) => { + // Add a listener to tell Vue to update the v-model + if (vnode.el) { + const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + + /** + * We need to emit the change event here + * rather than on the web component to ensure + * that any v-model bindings have been updated. + * Otherwise, the developer will listen on the + * native web component, but the v-model will + * not have been updated yet. + */ + if (externalModelUpdateEvent) { + emit(externalModelUpdateEvent, e); + } + }); + }); + } + }; + + 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, + onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined + }; + + /** + * 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) { + 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 + } + } + } + + return h(name, propsToAdd, slots.default && slots.default()); + } + }); + + Container.displayName = 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, externalModelUpdateEvent]; + } + + return Container; +}; diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json new file mode 100644 index 00000000000..5d430804200 --- /dev/null +++ b/packages/vue/tsconfig.json @@ -0,0 +1,19 @@ +{ + "exclude": ["node_modules", "**/*.spec.ts", "**/__tests__/**"], + "include": ["src"], + "compilerOptions": { + "declaration": true, + "noImplicitAny": false, + "removeComments": true, + "noLib": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "sourceMap": true, + "outDir": "./dist", + "lib": ["dom", "es2020"], + "module": "es2015", + "moduleResolution": "node", + "target": "es2017", + "skipLibCheck": true + }, +} diff --git a/yarn.lock b/yarn.lock index 7a89caaba89..1a17ca03176 100644 --- a/yarn.lock +++ b/yarn.lock @@ -785,10 +785,15 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.19.3.tgz#8dd36d17c53ff347f9e55c328710321b49479a9a" integrity sha512-pJ9xOlNWHiy9+FuFP09DEAFbAn4JskgRsVcc169w2xRBC3FRGuQEwjeIMMND9L2zc0iEhO/tGv4Zq+km+hxNpQ== +"@babel/parser@^7.16.4": + version "7.20.3" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2" + integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg== + "@babel/parser@^7.20.5": - version "7.20.5" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8" - integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA== + version "7.20.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.7.tgz#66fe23b3c8569220817d5feb8b9dcdc95bb4f71b" + integrity sha512-T3Z9oHybU+0vZlY9CiDSJQTD5ZapcW18ZctFMi0MOAl/4BjFF4ul7NVSARLdbGO5vDqy9eQiGTV0LtKfvCYvcg== "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6": version "7.18.6" @@ -3322,6 +3327,11 @@ resolved "https://registry.yarnpkg.com/@stencil/sass/-/sass-2.0.0.tgz#50e01adf6c96adb059d15b34d4d3f90f390d8a25" integrity sha512-Be7Tz7YJnMzloot0aG3m2wTVt9Dg0rjOU+ZVx49ts9+hyeW+NEmvSWPv6bhypblRXbSGik2Cc3AYboTma4Qpgg== +"@stencil/vue-output-target@^0.6.2": + version "0.6.2" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz#4674cd391f7ae77e250f0159be85d535aacbbdde" + integrity sha512-Oh7SLFbOUchCSCbGe/Dqal2xSYPKCFQiVKnvzvS0dsHP/XS7rfHqp3qptW6JCp9lBoo3wmmBurHfldqxhLlnag== + "@svgr/babel-plugin-add-jsx-attribute@^6.3.1": version "6.3.1" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.3.1.tgz#b9a5d84902be75a05ede92e70b338d28ab63fa74" @@ -4144,6 +4154,146 @@ magic-string "^0.26.2" react-refresh "^0.14.0" +"@vitejs/plugin-vue@^3.2.0": + version "3.2.0" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54" + integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw== + +"@volar/language-core@1.0.9": + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/language-core/-/language-core-1.0.9.tgz#d12456b294d1e5b3928b22e5214c8e7141ee2ce1" + integrity sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw== + dependencies: + "@volar/source-map" "1.0.9" + "@vue/reactivity" "^3.2.40" + muggle-string "^0.1.0" + +"@volar/source-map@1.0.9": + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/source-map/-/source-map-1.0.9.tgz#00aa951d3d7f9b842f84e28ab2a1831ab3b5b95a" + integrity sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ== + dependencies: + muggle-string "^0.1.0" + +"@volar/typescript@1.0.9": + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/typescript/-/typescript-1.0.9.tgz#9c0a8b5d79c0a03413755499d211c1c8001ac0cc" + integrity sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ== + dependencies: + "@volar/language-core" "1.0.9" + +"@volar/vue-language-core@1.0.9": + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz#9eb7c30652c80f210fca071aeeea794873835eda" + integrity sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww== + dependencies: + "@volar/language-core" "1.0.9" + "@volar/source-map" "1.0.9" + "@vue/compiler-dom" "^3.2.40" + "@vue/compiler-sfc" "^3.2.40" + "@vue/reactivity" "^3.2.40" + "@vue/shared" "^3.2.40" + minimatch "^5.1.0" + vue-template-compiler "^2.7.10" + +"@volar/vue-typescript@1.0.9": + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz#47ae4424283ec42c0b3321a4efbd4c505de3fe16" + integrity sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw== + dependencies: + "@volar/typescript" "1.0.9" + "@volar/vue-language-core" "1.0.9" + +"@vue/compiler-core@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b" + integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + source-map "^0.6.1" + +"@vue/compiler-dom@3.2.45", "@vue/compiler-dom@^3.2.40": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce" + integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw== + dependencies: + "@vue/compiler-core" "3.2.45" + "@vue/shared" "3.2.45" + +"@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.40": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70" + integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.45" + "@vue/compiler-dom" "3.2.45" + "@vue/compiler-ssr" "3.2.45" + "@vue/reactivity-transform" "3.2.45" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + magic-string "^0.25.7" + postcss "^8.1.10" + source-map "^0.6.1" + +"@vue/compiler-ssr@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2" + integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ== + dependencies: + "@vue/compiler-dom" "3.2.45" + "@vue/shared" "3.2.45" + +"@vue/reactivity-transform@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d" + integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ== + dependencies: + "@babel/parser" "^7.16.4" + "@vue/compiler-core" "3.2.45" + "@vue/shared" "3.2.45" + estree-walker "^2.0.2" + magic-string "^0.25.7" + +"@vue/reactivity@3.2.45", "@vue/reactivity@^3.2.40": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0" + integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A== + dependencies: + "@vue/shared" "3.2.45" + +"@vue/runtime-core@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f" + integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A== + dependencies: + "@vue/reactivity" "3.2.45" + "@vue/shared" "3.2.45" + +"@vue/runtime-dom@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59" + integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA== + dependencies: + "@vue/runtime-core" "3.2.45" + "@vue/shared" "3.2.45" + csstype "^2.6.8" + +"@vue/server-renderer@3.2.45": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f" + integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g== + dependencies: + "@vue/compiler-ssr" "3.2.45" + "@vue/shared" "3.2.45" + +"@vue/shared@3.2.45", "@vue/shared@^3.2.40": + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2" + integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg== + "@webassemblyjs/ast@1.11.1": version "1.11.1" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7" @@ -4394,6 +4544,11 @@ ag-grid-community@^28.0.2, ag-grid-community@^28.1.0: resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.2.0.tgz#3ea2be65c4ca930f0be5998d998684dc65132b66" integrity sha512-mL55V1H7c8zMWv3aumARCoU6ilDzN5lB69bFY9lhC2mzbvL/DyNWpX1v417IRidt2bHsVfQewPs6DOMkav7fqg== +ag-grid-community@^28.2.1, ag-grid-community@~28.2.1: + version "28.2.1" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/ag-grid-community/-/ag-grid-community-28.2.1.tgz#50778cb2254ee79497222781909d8364007dd91e" + integrity sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A== + ag-grid-react@^28.1.0: version "28.2.0" resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-28.2.0.tgz#07e18ba14a02255c3c3fdc704378ca117a575448" @@ -4401,6 +4556,14 @@ ag-grid-react@^28.1.0: dependencies: prop-types "^15.8.1" +ag-grid-vue3@^28.2.1: + version "28.2.1" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/ag-grid-vue3/-/ag-grid-vue3-28.2.1.tgz#a43464a1f681dbf0f1d8724e7446c827fd54f09d" + integrity sha512-n7+l51zFCZm3SVT2pI0lVVwL8gsDPebqNLfEy4DS17OlV5IL7c1eNXRosv/QMu+YHOEMVcwFRWH380nIjVF/+w== + dependencies: + ag-grid-community "~28.2.1" + vue "^3.0.0" + agent-base@6, agent-base@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77" @@ -6311,6 +6474,11 @@ cssstyle@^2.3.0: dependencies: cssom "~0.3.6" +csstype@^2.6.8: + version "2.6.21" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e" + integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w== + csstype@^3.0.2: version "3.1.1" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" @@ -6378,6 +6546,11 @@ dateformat@^3.0.0: resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae" integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q== +de-indent@^1.0.2: + version "1.0.2" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" + integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg== + debug@2.6.9, debug@^2.6.0: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -7686,6 +7859,11 @@ estree-walker@^1.0.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-1.0.1.tgz#31bc5d612c96b704106b477e6dd5d8aa138cb700" integrity sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg== +estree-walker@^2.0.2: + version "2.0.2" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + esutils@^2.0.2: version "2.0.3" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" @@ -11156,7 +11334,7 @@ magic-string@0.26.2: dependencies: sourcemap-codec "^1.4.8" -magic-string@^0.25.1, magic-string@^0.25.2: +magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.7: version "0.25.9" resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c" integrity sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ== @@ -11429,7 +11607,7 @@ minimatch@3.0.4: dependencies: brace-expansion "^1.1.7" -minimatch@5.1.0, minimatch@^5.0.1: +minimatch@5.1.0, minimatch@^5.0.1, minimatch@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7" integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg== @@ -11563,6 +11741,11 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1: resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== +muggle-string@^0.1.0: + version "0.1.0" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c" + integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg== + multicast-dns@^7.2.5: version "7.2.5" resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced" @@ -13130,6 +13313,15 @@ postcss@8.4.16: picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.1.10, postcss@^8.4.18: + version "8.4.19" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" + integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + postcss@^8.2.14, postcss@^8.3.11, postcss@^8.3.7, postcss@^8.4.13, postcss@^8.4.14, postcss@^8.4.16, postcss@^8.4.7, postcss@^8.4.8: version "8.4.17" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.17.tgz#f87863ec7cd353f81f7ab2dec5d67d861bbb1be5" @@ -14166,7 +14358,7 @@ rfdc@^1.3.0: rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" - resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== dependencies: glob "^7.1.3" @@ -14203,7 +14395,7 @@ rollup-plugin-terser@^7.0.2: serialize-javascript "^4.0.0" terser "^5.0.0" -rollup@^2.70.0, rollup@^2.78.1: +rollup@^2.70.0, rollup@^2.78.1, rollup@^2.79.1: version "2.79.1" resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7" integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw== @@ -16102,6 +16294,18 @@ vite@^3.1.0: optionalDependencies: fsevents "~2.3.2" +vite@^3.2.3: + version "3.2.4" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e" + integrity sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw== + dependencies: + esbuild "^0.15.9" + postcss "^8.4.18" + resolve "^1.22.1" + rollup "^2.79.1" + optionalDependencies: + fsevents "~2.3.2" + vlq@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468" @@ -16112,6 +16316,33 @@ void-elements@^2.0.0: resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung== +vue-template-compiler@^2.7.10: + version "2.7.14" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1" + integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ== + dependencies: + de-indent "^1.0.2" + he "^1.2.0" + +vue-tsc@^1.0.9: + version "1.0.9" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue-tsc/-/vue-tsc-1.0.9.tgz#7d388ec3097bc9c1789d5745a97c608217af4873" + integrity sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ== + dependencies: + "@volar/vue-language-core" "1.0.9" + "@volar/vue-typescript" "1.0.9" + +vue@^3.0.0, vue@^3.2.41, vue@^3.2.45: + version "3.2.45" + resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8" + integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA== + dependencies: + "@vue/compiler-dom" "3.2.45" + "@vue/compiler-sfc" "3.2.45" + "@vue/runtime-dom" "3.2.45" + "@vue/server-renderer" "3.2.45" + "@vue/shared" "3.2.45" + w3c-hr-time@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd" From 535616ec3480dfe48cda3a29ce96fd844280f05d Mon Sep 17 00:00:00 2001 From: PhentomPT Date: Fri, 13 Jan 2023 03:08:45 +0000 Subject: [PATCH 02/18] fix: yarn.lock --- yarn.lock | 60 +++++++++++++++++++++++++++---------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/yarn.lock b/yarn.lock index 1a17ca03176..9d69ec25ab9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -787,7 +787,7 @@ "@babel/parser@^7.16.4": version "7.20.3" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.3.tgz#5358cf62e380cf69efcb87a7bb922ff88bfac6e2" integrity sha512-OP/s5a94frIPXwjzEcv5S/tpQfc6XhxYUnmWpgdqMWGgYCuErA3SzozaRAMQgSZWKeTJxht9aWAkUY+0UzvOFg== "@babel/parser@^7.20.5": @@ -3329,7 +3329,7 @@ "@stencil/vue-output-target@^0.6.2": version "0.6.2" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz#4674cd391f7ae77e250f0159be85d535aacbbdde" + resolved "https://registry.yarnpkg.com/@stencil/vue-output-target/-/vue-output-target-0.6.2.tgz#4674cd391f7ae77e250f0159be85d535aacbbdde" integrity sha512-Oh7SLFbOUchCSCbGe/Dqal2xSYPKCFQiVKnvzvS0dsHP/XS7rfHqp3qptW6JCp9lBoo3wmmBurHfldqxhLlnag== "@svgr/babel-plugin-add-jsx-attribute@^6.3.1": @@ -4156,12 +4156,12 @@ "@vitejs/plugin-vue@^3.2.0": version "3.2.0" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54" + resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.2.0.tgz#a1484089dd85d6528f435743f84cdd0d215bbb54" integrity sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw== "@volar/language-core@1.0.9": version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/language-core/-/language-core-1.0.9.tgz#d12456b294d1e5b3928b22e5214c8e7141ee2ce1" + resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.0.9.tgz#d12456b294d1e5b3928b22e5214c8e7141ee2ce1" integrity sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw== dependencies: "@volar/source-map" "1.0.9" @@ -4170,21 +4170,21 @@ "@volar/source-map@1.0.9": version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/source-map/-/source-map-1.0.9.tgz#00aa951d3d7f9b842f84e28ab2a1831ab3b5b95a" + resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.0.9.tgz#00aa951d3d7f9b842f84e28ab2a1831ab3b5b95a" integrity sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ== dependencies: muggle-string "^0.1.0" "@volar/typescript@1.0.9": version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/typescript/-/typescript-1.0.9.tgz#9c0a8b5d79c0a03413755499d211c1c8001ac0cc" + resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.0.9.tgz#9c0a8b5d79c0a03413755499d211c1c8001ac0cc" integrity sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ== dependencies: "@volar/language-core" "1.0.9" "@volar/vue-language-core@1.0.9": version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz#9eb7c30652c80f210fca071aeeea794873835eda" + resolved "https://registry.yarnpkg.com/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz#9eb7c30652c80f210fca071aeeea794873835eda" integrity sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww== dependencies: "@volar/language-core" "1.0.9" @@ -4198,7 +4198,7 @@ "@volar/vue-typescript@1.0.9": version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz#47ae4424283ec42c0b3321a4efbd4c505de3fe16" + resolved "https://registry.yarnpkg.com/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz#47ae4424283ec42c0b3321a4efbd4c505de3fe16" integrity sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw== dependencies: "@volar/typescript" "1.0.9" @@ -4206,7 +4206,7 @@ "@vue/compiler-core@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b" integrity sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A== dependencies: "@babel/parser" "^7.16.4" @@ -4216,7 +4216,7 @@ "@vue/compiler-dom@3.2.45", "@vue/compiler-dom@^3.2.40": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce" integrity sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw== dependencies: "@vue/compiler-core" "3.2.45" @@ -4224,7 +4224,7 @@ "@vue/compiler-sfc@3.2.45", "@vue/compiler-sfc@^3.2.40": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70" integrity sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q== dependencies: "@babel/parser" "^7.16.4" @@ -4240,7 +4240,7 @@ "@vue/compiler-ssr@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2" integrity sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ== dependencies: "@vue/compiler-dom" "3.2.45" @@ -4248,7 +4248,7 @@ "@vue/reactivity-transform@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d" + resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz#07ac83b8138550c83dfb50db43cde1e0e5e8124d" integrity sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ== dependencies: "@babel/parser" "^7.16.4" @@ -4259,14 +4259,14 @@ "@vue/reactivity@3.2.45", "@vue/reactivity@^3.2.40": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.45.tgz#412a45b574de601be5a4a5d9a8cbd4dee4662ff0" integrity sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A== dependencies: "@vue/shared" "3.2.45" "@vue/runtime-core@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.45.tgz#7ad7ef9b2519d41062a30c6fa001ec43ac549c7f" integrity sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A== dependencies: "@vue/reactivity" "3.2.45" @@ -4274,7 +4274,7 @@ "@vue/runtime-dom@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.45.tgz#1a2ef6ee2ad876206fbbe2a884554bba2d0faf59" integrity sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA== dependencies: "@vue/runtime-core" "3.2.45" @@ -4283,7 +4283,7 @@ "@vue/server-renderer@3.2.45": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.45.tgz#ca9306a0c12b0530a1a250e44f4a0abac6b81f3f" integrity sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g== dependencies: "@vue/compiler-ssr" "3.2.45" @@ -4291,7 +4291,7 @@ "@vue/shared@3.2.45", "@vue/shared@^3.2.40": version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2" integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg== "@webassemblyjs/ast@1.11.1": @@ -4546,7 +4546,7 @@ ag-grid-community@^28.0.2, ag-grid-community@^28.1.0: ag-grid-community@^28.2.1, ag-grid-community@~28.2.1: version "28.2.1" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/ag-grid-community/-/ag-grid-community-28.2.1.tgz#50778cb2254ee79497222781909d8364007dd91e" + resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-28.2.1.tgz#50778cb2254ee79497222781909d8364007dd91e" integrity sha512-DMZh/xD/FqYP17qJ1M92PolTYe+hrKuEaf+A4h13O6qn2x/xZQrTRGW5DgnQLR/uLMe1XXZQPKR3UKgAlKo69A== ag-grid-react@^28.1.0: @@ -4558,7 +4558,7 @@ ag-grid-react@^28.1.0: ag-grid-vue3@^28.2.1: version "28.2.1" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/ag-grid-vue3/-/ag-grid-vue3-28.2.1.tgz#a43464a1f681dbf0f1d8724e7446c827fd54f09d" + resolved "https://registry.yarnpkg.com/ag-grid-vue3/-/ag-grid-vue3-28.2.1.tgz#a43464a1f681dbf0f1d8724e7446c827fd54f09d" integrity sha512-n7+l51zFCZm3SVT2pI0lVVwL8gsDPebqNLfEy4DS17OlV5IL7c1eNXRosv/QMu+YHOEMVcwFRWH380nIjVF/+w== dependencies: ag-grid-community "~28.2.1" @@ -6476,7 +6476,7 @@ cssstyle@^2.3.0: csstype@^2.6.8: version "2.6.21" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.21.tgz#2efb85b7cc55c80017c66a5ad7cbd931fda3a90e" integrity sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w== csstype@^3.0.2: @@ -6548,7 +6548,7 @@ dateformat@^3.0.0: de-indent@^1.0.2: version "1.0.2" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" + resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg== debug@2.6.9, debug@^2.6.0: @@ -7861,7 +7861,7 @@ estree-walker@^1.0.1: estree-walker@^2.0.2: version "2.0.2" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== esutils@^2.0.2: @@ -11743,7 +11743,7 @@ ms@2.1.3, ms@^2.0.0, ms@^2.1.1: muggle-string@^0.1.0: version "0.1.0" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c" + resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.1.0.tgz#1fda8a281c8b27bb8b70466dbc9f27586a8baa6c" integrity sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg== multicast-dns@^7.2.5: @@ -13315,7 +13315,7 @@ postcss@8.4.16: postcss@^8.1.10, postcss@^8.4.18: version "8.4.19" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.19.tgz#61178e2add236b17351897c8bcc0b4c8ecab56fc" integrity sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA== dependencies: nanoid "^3.3.4" @@ -14358,7 +14358,7 @@ rfdc@^1.3.0: rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2: version "3.0.2" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" + resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a" integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA== dependencies: glob "^7.1.3" @@ -16296,7 +16296,7 @@ vite@^3.1.0: vite@^3.2.3: version "3.2.4" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e" + resolved "https://registry.yarnpkg.com/vite/-/vite-3.2.4.tgz#d8c7892dd4268064e04fffbe7d866207dd24166e" integrity sha512-Z2X6SRAffOUYTa+sLy3NQ7nlHFU100xwanq1WDwqaiFiCe+25zdxP1TfCS5ojPV2oDDcXudHIoPnI1Z/66B7Yw== dependencies: esbuild "^0.15.9" @@ -16318,7 +16318,7 @@ void-elements@^2.0.0: vue-template-compiler@^2.7.10: version "2.7.14" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1" + resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1" integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ== dependencies: de-indent "^1.0.2" @@ -16326,7 +16326,7 @@ vue-template-compiler@^2.7.10: vue-tsc@^1.0.9: version "1.0.9" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue-tsc/-/vue-tsc-1.0.9.tgz#7d388ec3097bc9c1789d5745a97c608217af4873" + resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.0.9.tgz#7d388ec3097bc9c1789d5745a97c608217af4873" integrity sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ== dependencies: "@volar/vue-language-core" "1.0.9" @@ -16334,7 +16334,7 @@ vue-tsc@^1.0.9: vue@^3.0.0, vue@^3.2.41, vue@^3.2.45: version "3.2.45" - resolved "https://captain.rtf.siemens.net/artifactory/api/npm/siemens-npm/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.45.tgz#94a116784447eb7dbd892167784619fef379b3c8" integrity sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA== dependencies: "@vue/compiler-dom" "3.2.45" From 057aad914243ac87caea9d7a42181eaf6fee8437 Mon Sep 17 00:00:00 2001 From: PhentomPT Date: Fri, 13 Jan 2023 23:52:16 +0000 Subject: [PATCH 03/18] fix: lint & test --- packages/vue/.eslintrc.json | 26 + packages/vue/package.json | 10 +- packages/vue/src/components.ts | 1263 ++++++++++--------- packages/vue/src/plugin.ts | 2 +- packages/vue/src/vue-component-lib/utils.ts | 265 ++-- yarn.lock | 30 +- 6 files changed, 852 insertions(+), 744 deletions(-) create mode 100644 packages/vue/.eslintrc.json diff --git a/packages/vue/.eslintrc.json b/packages/vue/.eslintrc.json new file mode 100644 index 00000000000..f407f70fa1c --- /dev/null +++ b/packages/vue/.eslintrc.json @@ -0,0 +1,26 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": [ + "eslint:recommended", + "plugin:vue/vue3-recommended", + "plugin:@typescript-eslint/recommended", + "ix" + ], + "parser": "@typescript-eslint/parser", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "ecmaVersion": "latest", + "sourceType": "module" + }, + "plugins": ["vue", "@typescript-eslint"], + "settings": { + "vue": { + "version": "detect" + } + } +} diff --git a/packages/vue/package.json b/packages/vue/package.json index 53857d6e7b3..54e599ff645 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -20,10 +20,10 @@ "dist" ], "scripts": { - "test": "echo \"Error: run tests from root\" && exit 1", "build": "yarn clean && yarn compile", "compile": "yarn tsc", - "clean": "rimraf dist" + "clean": "rimraf dist", + "lint": "eslint src" }, "dependencies": { "@siemens/ix": "~1.2.1", @@ -31,7 +31,11 @@ }, "devDependencies": { "rimraf": "^3.0.2", - "vue": "^3.2.45" + "vue": "^3.2.45", + "@typescript-eslint/eslint-plugin": "^5.45.0", + "@typescript-eslint/parser": "^5.45.0", + "eslint-config-ix": "*", + "eslint-plugin-vue": "^9.9.0" }, "peerDependencies": { "vue": ">=3.2.45" diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts index adbaa0f70b5..1c370c300e8 100644 --- a/packages/vue/src/components.ts +++ b/packages/vue/src/components.ts @@ -9,622 +9,647 @@ import { defineCustomElements } from '@siemens/ix/loader'; defineCustomElements(); -export const IxAnimatedTab = /*@__PURE__*/ defineContainer('ix-animated-tab', undefined, [ - 'icon', - 'count' -]); - - -export const IxAnimatedTabs = /*@__PURE__*/ defineContainer('ix-animated-tabs', undefined, [ - 'disableAnimations', - 'selectedIndex', - 'tabPlacement', - 'tabClick' -]); - - -export const IxApplicationHeader = /*@__PURE__*/ defineContainer('ix-application-header', undefined, [ - 'name' -]); - - -export const IxBasicNavigation = /*@__PURE__*/ defineContainer('ix-basic-navigation', undefined, [ - 'applicationName', - 'hideHeader' -]); - - -export const IxBlind = /*@__PURE__*/ defineContainer('ix-blind', undefined, [ - 'collapsed', - 'label', - 'collapsedChange' -]); - - -export const IxBreadcrumb = /*@__PURE__*/ defineContainer('ix-breadcrumb', undefined, [ - 'visibleItemCount', - 'nextItems', - 'ghost', - 'itemClick', - 'nextClick' -]); - - -export const IxBreadcrumbItem = /*@__PURE__*/ defineContainer('ix-breadcrumb-item', undefined, [ - 'label', - 'icon' -]); - - -export const IxButton = /*@__PURE__*/ defineContainer('ix-button', undefined, [ - 'variant', - 'outline', - 'invisible', - 'ghost', - 'selected', - 'disabled', - 'type' -]); - - -export const IxCategoryFilter = /*@__PURE__*/ defineContainer('ix-category-filter', undefined, [ - 'initialState', - 'filterState', - 'placeholder', - 'categories', - 'nonSelectableCategories', - 'suggestions', - 'icon', - 'hideIcon', - 'repeatCategories', - 'tmpDisableScrollIntoView', - 'labelCategories', - 'i18nPlainText', - 'inputChanged', - 'filterChanged' -]); - - -export const IxChip = /*@__PURE__*/ defineContainer('ix-chip', undefined, [ - 'variant', - 'active', - 'closable', - 'icon', - 'background', - 'color', - 'outline', - 'close' -]); - - -export const IxCounterPill = /*@__PURE__*/ defineContainer('ix-counter-pill', undefined, [ - 'variant', - 'outline', - 'background', - 'color', - 'alignLeft' -]); - - -export const IxDatePicker = /*@__PURE__*/ defineContainer('ix-date-picker', undefined, [ - 'format', - 'range', - 'individual', - 'corners', - 'from', - 'to', - 'minDate', - 'maxDate', - 'eventDelimiter', - 'textSelectDate', - 'dateChange', - 'dateRangeChange', - 'done', - 'dateSelect' -]); - - -export const IxDateTimeCard = /*@__PURE__*/ defineContainer('ix-date-time-card', undefined, [ - 'individual', - 'corners' -]); - - -export const IxDatetimePicker = /*@__PURE__*/ defineContainer('ix-datetime-picker', undefined, [ - 'range', - 'showHour', - 'showMinutes', - 'showSeconds', - 'minDate', - 'maxDate', - 'dateFormat', - 'timeFormat', - 'from', - 'to', - 'time', - 'showTimeReference', - 'eventDelimiter', - 'timeReference', - 'textSelectDate', - 'done', - 'timeChange', - 'dateChange', - 'dateSelect' -]); - - -export const IxDrawer = /*@__PURE__*/ defineContainer('ix-drawer', undefined, [ - 'show', - 'closeOnClickOutside', - 'fullHeight', - 'minWidth', - 'maxWidth', - 'width', - 'open', - 'drawerClose' -]); - - -export const IxDropdown = /*@__PURE__*/ defineContainer('ix-dropdown', undefined, [ - 'show', - 'trigger', - 'anchor', - 'closeBehavior', - 'placement', - 'positioningStrategy', - 'adjustDropdownWidthToReferenceWith', - 'adjustDropdownWidthToReferenceWidth', - 'header', - 'showChanged' -]); - - -export const IxDropdownItem = /*@__PURE__*/ defineContainer('ix-dropdown-item', undefined, [ - 'label', - 'icon', - 'hover', - 'disabled', - 'checked', - 'itemClick' -]); - - -export const IxEventList = /*@__PURE__*/ defineContainer('ix-event-list', undefined, [ - 'itemHeight', - 'compact', - 'animated', - 'chevron' -]); - - -export const IxEventListItem = /*@__PURE__*/ defineContainer('ix-event-list-item', undefined, [ - 'color', - 'selected', - 'disabled', - 'chevron', - 'opacity', - 'itemClick' -]); - - -export const IxExpandingSearch = /*@__PURE__*/ defineContainer('ix-expanding-search', undefined, [ - 'icon', - 'placeholder', - 'value', - 'valueChange' -]); - - -export const IxFilterChip = /*@__PURE__*/ defineContainer('ix-filter-chip', undefined, [ - 'disabled', - 'closeClick' -]); - - -export const IxFlipTile = /*@__PURE__*/ defineContainer('ix-flip-tile', undefined, [ - 'state', - 'footer' -]); - - -export const IxFlipTileContent = /*@__PURE__*/ defineContainer('ix-flip-tile-content', undefined); - - -export const IxGroup = /*@__PURE__*/ defineContainer('ix-group', undefined, [ - 'suppressHeaderSelection', - 'header', - 'subHeader', - 'collapsed', - 'selected', - 'index', - 'expandOnHeaderClick', - 'selectGroup', - 'selectItem', - 'collapsedChanged' -]); - - -export const IxGroupContextMenu = /*@__PURE__*/ defineContainer('ix-group-context-menu', undefined); - - -export const IxGroupDropdownItem = /*@__PURE__*/ defineContainer('ix-group-dropdown-item', undefined, [ - 'label', - 'icon' -]); - - -export const IxGroupItem = /*@__PURE__*/ defineContainer('ix-group-item', undefined, [ - 'icon', - 'text', - 'secondaryText', - 'suppressSelection', - 'selected', - 'focusable', - 'index', - 'selectedChanged' -]); - - -export const IxIcon = /*@__PURE__*/ defineContainer('ix-icon', undefined, [ - 'size', - 'color', - 'name' -]); - - -export const IxIconButton = /*@__PURE__*/ defineContainer('ix-icon-button', undefined, [ - 'variant', - 'outline', - 'invisible', - 'ghost', - 'oval', - 'icon', - 'size', - 'color', - 'selected', - 'disabled', - 'type' -]); - - -export const IxInputGroup = /*@__PURE__*/ defineContainer('ix-input-group', undefined); - - -export const IxKpi = /*@__PURE__*/ defineContainer('ix-kpi', undefined, [ - 'label', - 'value', - 'unit', - 'state', - 'orientation' -]); - - -export const IxMapNavigation = /*@__PURE__*/ defineContainer('ix-map-navigation', undefined, [ - 'applicationName', - 'navigationTitle', - 'hideContextMenu', - 'navigationToggled', - 'contextMenuClick' -]); - - -export const IxMapNavigationOverlay = /*@__PURE__*/ defineContainer('ix-map-navigation-overlay', undefined, [ - 'name', - 'icon', - 'color', - 'closeClick' -]); - - -export const IxMenu = /*@__PURE__*/ defineContainer('ix-menu', undefined, [ - 'showSettings', - 'showAbout', - 'enableToggleTheme', - 'enableSettings', - 'enableMapExpand', - 'applicationName', - 'applicationDescription', - 'maxVisibleMenuItems', - 'i18nLegal', - 'i18nSettings', - 'i18nToggleTheme', - 'i18nExpand', - 'i18nCollapse', - 'i18nMore', - 'expand', - 'expandChange', - 'mapExpandChange' -]); - - -export const IxMenuAbout = /*@__PURE__*/ defineContainer('ix-menu-about', undefined, [ - 'activeTabLabel', - 'label', - 'show', - 'close' -]); - - -export const IxMenuAboutItem = /*@__PURE__*/ defineContainer('ix-menu-about-item', undefined, [ - 'label' -]); - - -export const IxMenuAboutNews = /*@__PURE__*/ defineContainer('ix-menu-about-news', undefined, [ - 'show', - 'label', - 'i18nShowMore', - 'aboutItemLabel', - 'offsetBottom', - 'expanded', - 'showMore', - 'closePopover' -]); - - -export const IxMenuAvatar = /*@__PURE__*/ defineContainer('ix-menu-avatar', undefined, [ - 'top', - 'bottom', - 'i18nLogout', - 'logoutClick' -]); - - -export const IxMenuAvatarItem = /*@__PURE__*/ defineContainer('ix-menu-avatar-item', undefined, [ - 'icon', - 'label', - 'itemClick' -]); - - -export const IxMenuItem = /*@__PURE__*/ defineContainer('ix-menu-item', undefined, [ - 'home', - 'bottom', - 'tabIcon', - 'notifications', - 'active', - 'disabled' -]); - - -export const IxMenuSettings = /*@__PURE__*/ defineContainer('ix-menu-settings', undefined, [ - 'activeTabLabel', - 'label', - 'show', - 'close' -]); - - -export const IxMenuSettingsItem = /*@__PURE__*/ defineContainer('ix-menu-settings-item', undefined, [ - 'label' -]); - - -export const IxMessageBar = /*@__PURE__*/ defineContainer('ix-message-bar', undefined, [ - 'type', - 'dismissible', - 'closedChange' -]); - - -export const IxModal = /*@__PURE__*/ defineContainer('ix-modal', undefined, [ - 'animation', - 'ariaDescribedBy', - 'ariaLabelledBy', - 'backdrop', - 'backdropClass', - 'beforeDismiss', - 'centered', - 'content', - 'keyboard', - 'icon', - 'iconColor', - 'modalDialogClass', - 'scrollable', - 'size', - 'headerTitle', - 'windowClass', - 'closed', - 'dismissed' -]); - - -export const IxModalContainer = /*@__PURE__*/ defineContainer('ix-modal-container', undefined); - - -export const IxModalExample = /*@__PURE__*/ defineContainer('ix-modal-example', undefined); - - -export const IxPill = /*@__PURE__*/ defineContainer('ix-pill', undefined, [ - 'variant', - 'outline', - 'icon', - 'background', - 'color', - 'alignLeft' -]); - - -export const IxSelect = /*@__PURE__*/ defineContainer('ix-select', undefined, [ - 'selectedIndices', - 'allowClear', - 'mode', - 'editable', - 'disabled', - 'readonly', - 'i18nPlaceholder', - 'i18nPlaceholderEditable', - 'i18nSelectListHeader', - 'itemSelectionChange', - 'addItem' -]); - - -export const IxSelectItem = /*@__PURE__*/ defineContainer('ix-select-item', undefined, [ - 'label', - 'value', - 'selected', - 'hover', - 'itemClick' -]); - - -export const IxSpinner = /*@__PURE__*/ defineContainer('ix-spinner', undefined, [ - 'variant', - 'size' -]); - - -export const IxSplitButton = /*@__PURE__*/ defineContainer('ix-split-button', undefined, [ - 'variant', - 'outline', - 'invisible', - 'ghost', - 'label', - 'icon', - 'splitIcon', - 'disabled', - 'placement', - 'buttonClick' -]); - - -export const IxSplitButtonItem = /*@__PURE__*/ defineContainer('ix-split-button-item', undefined, [ - 'icon', - 'label', - 'itemClick' -]); - - -export const IxTabItem = /*@__PURE__*/ defineContainer('ix-tab-item', undefined, [ - 'selected', - 'disabled', - 'small', - 'icon', - 'rounded', - 'counter', - 'layout', - 'placement' -]); - - -export const IxTabs = /*@__PURE__*/ defineContainer('ix-tabs', undefined, [ - 'small', - 'rounded', - 'selected', - 'layout', - 'placement' -]); - - -export const IxTile = /*@__PURE__*/ defineContainer('ix-tile', undefined, [ - 'size' -]); - - -export const IxTimePicker = /*@__PURE__*/ defineContainer('ix-time-picker', undefined, [ - 'format', - 'corners', - 'individual', - 'showHour', - 'showMinutes', - 'showSeconds', - 'time', - 'showTimeReference', - 'timeReference', - 'textSelectTime', - 'done', - 'timeChange' -]); - - -export const IxToast = /*@__PURE__*/ defineContainer('ix-toast', undefined, [ - 'type', - 'toastTitle', - 'autoCloseDelay', - 'autoClose', - 'icon', - 'iconColor', - 'closeToast' -]); - - -export const IxToastContainer = /*@__PURE__*/ defineContainer('ix-toast-container', undefined, [ - 'containerId', - 'containerClass', - 'position' -]); - - -export const IxToggle = /*@__PURE__*/ defineContainer('ix-toggle', undefined, [ - 'checked', - 'disabled', - 'indeterminate', - 'color', - 'textOn', - 'textOff', - 'textIndeterminate', - 'hideText', - 'checkedChange' -]); - - -export const IxTree = /*@__PURE__*/ defineContainer('ix-tree', undefined, [ - 'root', - 'model', - 'renderItem', - 'context', - 'contextChange', - 'nodeRemoved' -]); - - -export const IxTreeItem = /*@__PURE__*/ defineContainer('ix-tree-item', undefined, [ - 'text', - 'hasChildren', - 'context', - 'toggle', - 'itemClick' -]); - - -export const IxUpload = /*@__PURE__*/ defineContainer('ix-upload', undefined, [ - 'accept', - 'multiple', - 'multiline', - 'disabled', - 'state', - 'selectFileText', - 'loadingText', - 'uploadFailedText', - 'uploadSuccessText', - 'i18nUploadFile', - 'i18nUploadDisabled', - 'filesChanged' -]); - - -export const IxValidationTooltip = /*@__PURE__*/ defineContainer('ix-validation-tooltip', undefined, [ - 'message', - 'placement' -]); - - -export const IxWorkflowStep = /*@__PURE__*/ defineContainer('ix-workflow-step', undefined, [ - 'vertical', - 'disabled', - 'status', - 'clickable', - 'selected', - 'position' -]); - - -export const IxWorkflowSteps = /*@__PURE__*/ defineContainer('ix-workflow-steps', undefined, [ - 'vertical', - 'linear', - 'clickable', - 'selectedIndex', - 'stepSelected' -]); - +export const IxAnimatedTab = /*@__PURE__*/ defineContainer( + 'ix-animated-tab', + undefined, + ['icon', 'count'] +); + +export const IxAnimatedTabs = /*@__PURE__*/ defineContainer( + 'ix-animated-tabs', + undefined, + ['disableAnimations', 'selectedIndex', 'tabPlacement', 'tabClick'] +); + +export const IxApplicationHeader = + /*@__PURE__*/ defineContainer( + 'ix-application-header', + undefined, + ['name'] + ); + +export const IxBasicNavigation = + /*@__PURE__*/ defineContainer( + 'ix-basic-navigation', + undefined, + ['applicationName', 'hideHeader'] + ); + +export const IxBlind = /*@__PURE__*/ defineContainer( + 'ix-blind', + undefined, + ['collapsed', 'label', 'collapsedChange'] +); + +export const IxBreadcrumb = /*@__PURE__*/ defineContainer( + 'ix-breadcrumb', + undefined, + ['visibleItemCount', 'nextItems', 'ghost', 'itemClick', 'nextClick'] +); + +export const IxBreadcrumbItem = + /*@__PURE__*/ defineContainer( + 'ix-breadcrumb-item', + undefined, + ['label', 'icon'] + ); + +export const IxButton = /*@__PURE__*/ defineContainer( + 'ix-button', + undefined, + ['variant', 'outline', 'invisible', 'ghost', 'selected', 'disabled', 'type'] +); + +export const IxCategoryFilter = + /*@__PURE__*/ defineContainer( + 'ix-category-filter', + undefined, + [ + 'initialState', + 'filterState', + 'placeholder', + 'categories', + 'nonSelectableCategories', + 'suggestions', + 'icon', + 'hideIcon', + 'repeatCategories', + 'tmpDisableScrollIntoView', + 'labelCategories', + 'i18nPlainText', + 'inputChanged', + 'filterChanged', + ] + ); + +export const IxChip = /*@__PURE__*/ defineContainer( + 'ix-chip', + undefined, + [ + 'variant', + 'active', + 'closable', + 'icon', + 'background', + 'color', + 'outline', + 'close', + ] +); + +export const IxCounterPill = /*@__PURE__*/ defineContainer( + 'ix-counter-pill', + undefined, + ['variant', 'outline', 'background', 'color', 'alignLeft'] +); + +export const IxDatePicker = /*@__PURE__*/ defineContainer( + 'ix-date-picker', + undefined, + [ + 'format', + 'range', + 'individual', + 'corners', + 'from', + 'to', + 'minDate', + 'maxDate', + 'eventDelimiter', + 'textSelectDate', + 'dateChange', + 'dateRangeChange', + 'done', + 'dateSelect', + ] +); + +export const IxDateTimeCard = /*@__PURE__*/ defineContainer( + 'ix-date-time-card', + undefined, + ['individual', 'corners'] +); + +export const IxDatetimePicker = + /*@__PURE__*/ defineContainer( + 'ix-datetime-picker', + undefined, + [ + 'range', + 'showHour', + 'showMinutes', + 'showSeconds', + 'minDate', + 'maxDate', + 'dateFormat', + 'timeFormat', + 'from', + 'to', + 'time', + 'showTimeReference', + 'eventDelimiter', + 'timeReference', + 'textSelectDate', + 'done', + 'timeChange', + 'dateChange', + 'dateSelect', + ] + ); + +export const IxDrawer = /*@__PURE__*/ defineContainer( + 'ix-drawer', + undefined, + [ + 'show', + 'closeOnClickOutside', + 'fullHeight', + 'minWidth', + 'maxWidth', + 'width', + 'open', + 'drawerClose', + ] +); + +export const IxDropdown = /*@__PURE__*/ defineContainer( + 'ix-dropdown', + undefined, + [ + 'show', + 'trigger', + 'anchor', + 'closeBehavior', + 'placement', + 'positioningStrategy', + 'adjustDropdownWidthToReferenceWith', + 'adjustDropdownWidthToReferenceWidth', + 'header', + 'showChanged', + ] +); + +export const IxDropdownItem = /*@__PURE__*/ defineContainer( + 'ix-dropdown-item', + undefined, + ['label', 'icon', 'hover', 'disabled', 'checked', 'itemClick'] +); + +export const IxEventList = /*@__PURE__*/ defineContainer( + 'ix-event-list', + undefined, + ['itemHeight', 'compact', 'animated', 'chevron'] +); + +export const IxEventListItem = + /*@__PURE__*/ defineContainer( + 'ix-event-list-item', + undefined, + ['color', 'selected', 'disabled', 'chevron', 'opacity', 'itemClick'] + ); + +export const IxExpandingSearch = + /*@__PURE__*/ defineContainer( + 'ix-expanding-search', + undefined, + ['icon', 'placeholder', 'value', 'valueChange'] + ); + +export const IxFilterChip = /*@__PURE__*/ defineContainer( + 'ix-filter-chip', + undefined, + ['disabled', 'closeClick'] +); + +export const IxFlipTile = /*@__PURE__*/ defineContainer( + 'ix-flip-tile', + undefined, + ['state', 'footer'] +); + +export const IxFlipTileContent = + /*@__PURE__*/ defineContainer( + 'ix-flip-tile-content', + undefined + ); + +export const IxGroup = /*@__PURE__*/ defineContainer( + 'ix-group', + undefined, + [ + 'suppressHeaderSelection', + 'header', + 'subHeader', + 'collapsed', + 'selected', + 'index', + 'expandOnHeaderClick', + 'selectGroup', + 'selectItem', + 'collapsedChanged', + ] +); + +export const IxGroupContextMenu = + /*@__PURE__*/ defineContainer( + 'ix-group-context-menu', + undefined + ); + +export const IxGroupDropdownItem = + /*@__PURE__*/ defineContainer( + 'ix-group-dropdown-item', + undefined, + ['label', 'icon'] + ); + +export const IxGroupItem = /*@__PURE__*/ defineContainer( + 'ix-group-item', + undefined, + [ + 'icon', + 'text', + 'secondaryText', + 'suppressSelection', + 'selected', + 'focusable', + 'index', + 'selectedChanged', + ] +); + +export const IxIcon = /*@__PURE__*/ defineContainer( + 'ix-icon', + undefined, + ['size', 'color', 'name'] +); + +export const IxIconButton = /*@__PURE__*/ defineContainer( + 'ix-icon-button', + undefined, + [ + 'variant', + 'outline', + 'invisible', + 'ghost', + 'oval', + 'icon', + 'size', + 'color', + 'selected', + 'disabled', + 'type', + ] +); + +export const IxInputGroup = /*@__PURE__*/ defineContainer( + 'ix-input-group', + undefined +); + +export const IxKpi = /*@__PURE__*/ defineContainer( + 'ix-kpi', + undefined, + ['label', 'value', 'unit', 'state', 'orientation'] +); + +export const IxMapNavigation = + /*@__PURE__*/ defineContainer( + 'ix-map-navigation', + undefined, + [ + 'applicationName', + 'navigationTitle', + 'hideContextMenu', + 'navigationToggled', + 'contextMenuClick', + ] + ); + +export const IxMapNavigationOverlay = + /*@__PURE__*/ defineContainer( + 'ix-map-navigation-overlay', + undefined, + ['name', 'icon', 'color', 'closeClick'] + ); + +export const IxMenu = /*@__PURE__*/ defineContainer( + 'ix-menu', + undefined, + [ + 'showSettings', + 'showAbout', + 'enableToggleTheme', + 'enableSettings', + 'enableMapExpand', + 'applicationName', + 'applicationDescription', + 'maxVisibleMenuItems', + 'i18nLegal', + 'i18nSettings', + 'i18nToggleTheme', + 'i18nExpand', + 'i18nCollapse', + 'i18nMore', + 'expand', + 'expandChange', + 'mapExpandChange', + ] +); + +export const IxMenuAbout = /*@__PURE__*/ defineContainer( + 'ix-menu-about', + undefined, + ['activeTabLabel', 'label', 'show', 'close'] +); + +export const IxMenuAboutItem = + /*@__PURE__*/ defineContainer( + 'ix-menu-about-item', + undefined, + ['label'] + ); + +export const IxMenuAboutNews = + /*@__PURE__*/ defineContainer( + 'ix-menu-about-news', + undefined, + [ + 'show', + 'label', + 'i18nShowMore', + 'aboutItemLabel', + 'offsetBottom', + 'expanded', + 'showMore', + 'closePopover', + ] + ); + +export const IxMenuAvatar = /*@__PURE__*/ defineContainer( + 'ix-menu-avatar', + undefined, + ['top', 'bottom', 'i18nLogout', 'logoutClick'] +); + +export const IxMenuAvatarItem = + /*@__PURE__*/ defineContainer( + 'ix-menu-avatar-item', + undefined, + ['icon', 'label', 'itemClick'] + ); + +export const IxMenuItem = /*@__PURE__*/ defineContainer( + 'ix-menu-item', + undefined, + ['home', 'bottom', 'tabIcon', 'notifications', 'active', 'disabled'] +); + +export const IxMenuSettings = /*@__PURE__*/ defineContainer( + 'ix-menu-settings', + undefined, + ['activeTabLabel', 'label', 'show', 'close'] +); + +export const IxMenuSettingsItem = + /*@__PURE__*/ defineContainer( + 'ix-menu-settings-item', + undefined, + ['label'] + ); + +export const IxMessageBar = /*@__PURE__*/ defineContainer( + 'ix-message-bar', + undefined, + ['type', 'dismissible', 'closedChange'] +); + +export const IxModal = /*@__PURE__*/ defineContainer( + 'ix-modal', + undefined, + [ + 'animation', + 'ariaDescribedBy', + 'ariaLabelledBy', + 'backdrop', + 'backdropClass', + 'beforeDismiss', + 'centered', + 'content', + 'keyboard', + 'icon', + 'iconColor', + 'modalDialogClass', + 'scrollable', + 'size', + 'headerTitle', + 'windowClass', + 'closed', + 'dismissed', + ] +); + +export const IxModalContainer = + /*@__PURE__*/ defineContainer( + 'ix-modal-container', + undefined + ); + +export const IxModalExample = /*@__PURE__*/ defineContainer( + 'ix-modal-example', + undefined +); + +export const IxPill = /*@__PURE__*/ defineContainer( + 'ix-pill', + undefined, + ['variant', 'outline', 'icon', 'background', 'color', 'alignLeft'] +); + +export const IxSelect = /*@__PURE__*/ defineContainer( + 'ix-select', + undefined, + [ + 'selectedIndices', + 'allowClear', + 'mode', + 'editable', + 'disabled', + 'readonly', + 'i18nPlaceholder', + 'i18nPlaceholderEditable', + 'i18nSelectListHeader', + 'itemSelectionChange', + 'addItem', + ] +); + +export const IxSelectItem = /*@__PURE__*/ defineContainer( + 'ix-select-item', + undefined, + ['label', 'value', 'selected', 'hover', 'itemClick'] +); + +export const IxSpinner = /*@__PURE__*/ defineContainer( + 'ix-spinner', + undefined, + ['variant', 'size'] +); + +export const IxSplitButton = /*@__PURE__*/ defineContainer( + 'ix-split-button', + undefined, + [ + 'variant', + 'outline', + 'invisible', + 'ghost', + 'label', + 'icon', + 'splitIcon', + 'disabled', + 'placement', + 'buttonClick', + ] +); + +export const IxSplitButtonItem = + /*@__PURE__*/ defineContainer( + 'ix-split-button-item', + undefined, + ['icon', 'label', 'itemClick'] + ); + +export const IxTabItem = /*@__PURE__*/ defineContainer( + 'ix-tab-item', + undefined, + [ + 'selected', + 'disabled', + 'small', + 'icon', + 'rounded', + 'counter', + 'layout', + 'placement', + ] +); + +export const IxTabs = /*@__PURE__*/ defineContainer( + 'ix-tabs', + undefined, + ['small', 'rounded', 'selected', 'layout', 'placement'] +); + +export const IxTile = /*@__PURE__*/ defineContainer( + 'ix-tile', + undefined, + ['size'] +); + +export const IxTimePicker = /*@__PURE__*/ defineContainer( + 'ix-time-picker', + undefined, + [ + 'format', + 'corners', + 'individual', + 'showHour', + 'showMinutes', + 'showSeconds', + 'time', + 'showTimeReference', + 'timeReference', + 'textSelectTime', + 'done', + 'timeChange', + ] +); + +export const IxToast = /*@__PURE__*/ defineContainer( + 'ix-toast', + undefined, + [ + 'type', + 'toastTitle', + 'autoCloseDelay', + 'autoClose', + 'icon', + 'iconColor', + 'closeToast', + ] +); + +export const IxToastContainer = + /*@__PURE__*/ defineContainer( + 'ix-toast-container', + undefined, + ['containerId', 'containerClass', 'position'] + ); + +export const IxToggle = /*@__PURE__*/ defineContainer( + 'ix-toggle', + undefined, + [ + 'checked', + 'disabled', + 'indeterminate', + 'color', + 'textOn', + 'textOff', + 'textIndeterminate', + 'hideText', + 'checkedChange', + ] +); + +export const IxTree = /*@__PURE__*/ defineContainer( + 'ix-tree', + undefined, + ['root', 'model', 'renderItem', 'context', 'contextChange', 'nodeRemoved'] +); + +export const IxTreeItem = /*@__PURE__*/ defineContainer( + 'ix-tree-item', + undefined, + ['text', 'hasChildren', 'context', 'toggle', 'itemClick'] +); + +export const IxUpload = /*@__PURE__*/ defineContainer( + 'ix-upload', + undefined, + [ + 'accept', + 'multiple', + 'multiline', + 'disabled', + 'state', + 'selectFileText', + 'loadingText', + 'uploadFailedText', + 'uploadSuccessText', + 'i18nUploadFile', + 'i18nUploadDisabled', + 'filesChanged', + ] +); + +export const IxValidationTooltip = + /*@__PURE__*/ defineContainer( + 'ix-validation-tooltip', + undefined, + ['message', 'placement'] + ); + +export const IxWorkflowStep = /*@__PURE__*/ defineContainer( + 'ix-workflow-step', + undefined, + ['vertical', 'disabled', 'status', 'clickable', 'selected', 'position'] +); + +export const IxWorkflowSteps = + /*@__PURE__*/ defineContainer( + 'ix-workflow-steps', + undefined, + ['vertical', 'linear', 'clickable', 'selectedIndex', 'stepSelected'] + ); diff --git a/packages/vue/src/plugin.ts b/packages/vue/src/plugin.ts index acefa1917a0..a4b2a5449d6 100644 --- a/packages/vue/src/plugin.ts +++ b/packages/vue/src/plugin.ts @@ -1,5 +1,5 @@ -import { Plugin } from 'vue'; import { applyPolyfills, defineCustomElements } from '@siemens/ix/loader'; +import { Plugin } from 'vue'; export const ixPlugin: Plugin = { async install() { diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts index e48debacfad..be7edd468c6 100644 --- a/packages/vue/src/vue-component-lib/utils.ts +++ b/packages/vue/src/vue-component-lib/utils.ts @@ -1,4 +1,14 @@ -import { VNode, defineComponent, getCurrentInstance, h, inject, ref, Ref } from 'vue'; +/* eslint-disable */ +/* tslint:disable */ +import { + defineComponent, + getCurrentInstance, + h, + inject, + ref, + Ref, + VNode, +} from 'vue'; export interface InputProps { modelValue?: T; @@ -30,26 +40,31 @@ 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); +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) -* @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been -* correctly updated when a user's event callback fires. -*/ -export const defineContainer = ( + * 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) + * @prop externalModelUpdateEvent - The external event to fire from your Vue component when modelUpdateEvent fires. This is used for ensuring that v-model references have been + * correctly updated when a user's event callback fires. + */ +export const defineContainer = ( name: string, defineCustomElement: any, componentProps: string[] = [], @@ -58,134 +73,146 @@ export const defineContainer = ( externalModelUpdateEvent?: 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. - */ + * 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: any, { attrs, slots, emit }) => { - let modelPropValue = props[modelProp]; - const containerRef = ref(); - const classes = new Set(getComponentClasses(attrs.class)); - const onVnodeBeforeMount = (vnode: VNode) => { - // Add a listener to tell Vue to update the v-model - if (vnode.el) { - const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent]; - eventsNames.forEach((eventName: string) => { - vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { - modelPropValue = (e?.target as any)[modelProp]; - emit(UPDATE_VALUE_EVENT, modelPropValue); - - /** - * We need to emit the change event here - * rather than on the web component to ensure - * that any v-model bindings have been updated. - * Otherwise, the developer will listen on the - * native web component, but the v-model will - * not have been updated yet. - */ - if (externalModelUpdateEvent) { - emit(externalModelUpdateEvent, e); - } + const Container = defineComponent>( + (props: any, { attrs, slots, emit }) => { + let modelPropValue = props[modelProp]; + const containerRef = ref(); + const classes = new Set(getComponentClasses(attrs.class)); + const onVnodeBeforeMount = (vnode: VNode) => { + // Add a listener to tell Vue to update the v-model + if (vnode.el) { + const eventsNames = Array.isArray(modelUpdateEvent) + ? modelUpdateEvent + : [modelUpdateEvent]; + eventsNames.forEach((eventName: string) => { + vnode.el!.addEventListener(eventName.toLowerCase(), (e: Event) => { + modelPropValue = (e?.target as any)[modelProp]; + emit(UPDATE_VALUE_EVENT, modelPropValue); + + /** + * We need to emit the change event here + * rather than on the web component to ensure + * that any v-model bindings have been updated. + * Otherwise, the developer will listen on the + * native web component, but the v-model will + * not have been updated yet. + */ + if (externalModelUpdateEvent) { + emit(externalModelUpdateEvent, e); + } + }); }); - }); - } - }; - - 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.'); - } - } + 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; + } + } - return () => { - modelPropValue = props[modelProp]; + navManager.navigate(navigationPayload); + } else { + console.warn( + 'Tried to navigate, but no router was found. Make sure you have mounted Vue Router.' + ); + } + }; - getComponentClasses(attrs.class).forEach(value => { - classes.add(value); - }); + return () => { + modelPropValue = props[modelProp]; - const oldClick = props.onClick; - const handleClick = (ev: Event) => { - if (oldClick !== undefined) { - oldClick(ev); - } - if (!ev.defaultPrevented) { - handleRouterLink(ev); - } - } + getComponentClasses(attrs.class).forEach((value) => { + classes.add(value); + }); - let propsToAdd: any = { - ref: containerRef, - class: getElementClasses(containerRef, classes), - onClick: handleClick, - onVnodeBeforeMount: (modelUpdateEvent) ? onVnodeBeforeMount : undefined - }; + const oldClick = props.onClick; + const handleClick = (ev: Event) => { + if (oldClick !== undefined) { + oldClick(ev); + } + if (!ev.defaultPrevented) { + handleRouterLink(ev); + } + }; - /** - * 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) { - propsToAdd[key] = value; - } - } + let propsToAdd: any = { + ref: containerRef, + class: getElementClasses(containerRef, classes), + onClick: handleClick, + onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : undefined, + }; - 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). + * We can use Object.entries here + * to avoid the hasOwnProperty check, + * but that would require 2 iterations + * where as this only requires 1. */ - if (props[MODEL_VALUE] !== EMPTY_PROP) { - propsToAdd = { - ...propsToAdd, - [modelProp]: props[MODEL_VALUE] + for (const key in props) { + const value = props[key]; + if (props.hasOwnProperty(key) && value !== EMPTY_PROP) { + propsToAdd[key] = value; } - } else if (modelPropValue !== EMPTY_PROP) { - propsToAdd = { - ...propsToAdd, - [modelProp]: modelPropValue + } + + 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, + }; } } - } - return h(name, propsToAdd, slots.default && slots.default()); + return h(name, propsToAdd, slots.default && slots.default()); + }; } - }); + ); Container.displayName = name; Container.props = { - [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP + [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP, }; - componentProps.forEach(componentProp => { + componentProps.forEach((componentProp) => { Container.props[componentProp] = DEFAULT_EMPTY_PROP; }); diff --git a/yarn.lock b/yarn.lock index 9d69ec25ab9..e6b67b582e6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7738,6 +7738,19 @@ eslint-plugin-turbo@0.0.4: resolved "https://registry.yarnpkg.com/eslint-plugin-turbo/-/eslint-plugin-turbo-0.0.4.tgz#966f3dd6202143d0c28dc9cdbb48b0f779d06172" integrity sha512-dfmYE/iPvoJInQq+5E/0mj140y/rYwKtzZkn3uVK8+nvwC5zmWKQ6ehMWrL4bYBkGzSgpOndZM+jOXhPQ2m8Cg== +eslint-plugin-vue@^9.9.0: + version "9.9.0" + resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.9.0.tgz#ac788ebccd2eb94d846a507df55da50693b80c91" + integrity sha512-YbubS7eK0J7DCf0U2LxvVP7LMfs6rC6UltihIgval3azO3gyDwEGVgsCMe1TmDiEkl6GdMKfRpaME6QxIYtzDQ== + dependencies: + eslint-utils "^3.0.0" + natural-compare "^1.4.0" + nth-check "^2.0.1" + postcss-selector-parser "^6.0.9" + semver "^7.3.5" + vue-eslint-parser "^9.0.1" + xml-name-validator "^4.0.0" + eslint-scope@5.1.1, eslint-scope@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c" @@ -7816,7 +7829,7 @@ eslint@^8.28.0, eslint@latest: strip-json-comments "^3.1.0" text-table "^0.2.0" -espree@^9.4.0: +espree@^9.3.1, espree@^9.4.0: version "9.4.1" resolved "https://registry.yarnpkg.com/espree/-/espree-9.4.1.tgz#51d6092615567a2c2cff7833445e37c28c0065bd" integrity sha512-XwctdmTO6SIvCzd9810yyNzIrOrqNYV9Koizx4C/mRhf9uq0o4yHoCEU/670pOxOL/MSraektvSAji79kX90Vg== @@ -14626,7 +14639,7 @@ semver@7.3.7: dependencies: lru-cache "^6.0.0" -semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: +semver@7.x, semver@^7.0.0, semver@^7.1.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6, semver@^7.3.7: version "7.3.8" resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798" integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A== @@ -16316,6 +16329,19 @@ void-elements@^2.0.0: resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec" integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung== +vue-eslint-parser@^9.0.1: + version "9.1.0" + resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.1.0.tgz#0e121d1bb29bd10763c83e3cc583ee03434a9dd5" + integrity sha512-NGn/iQy8/Wb7RrRa4aRkokyCZfOUWk19OP5HP6JEozQFX5AoS/t+Z0ZN7FY4LlmWc4FNI922V7cvX28zctN8dQ== + dependencies: + debug "^4.3.4" + eslint-scope "^7.1.1" + eslint-visitor-keys "^3.3.0" + espree "^9.3.1" + esquery "^1.4.0" + lodash "^4.17.21" + semver "^7.3.6" + vue-template-compiler@^2.7.10: version "2.7.14" resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1" From d45639315312ec0f6760c474aec5478aa70ff86e Mon Sep 17 00:00:00 2001 From: PhentomPT Date: Thu, 19 Jan 2023 18:35:13 +0000 Subject: [PATCH 04/18] docs: updated --- .../src/components/Playground/index.tsx | 5 +- .../src/components/Playground/utils.ts | 68 +++++++++++++++++++ .../static/code-runtime/vue/App.vue | 7 ++ .../static/code-runtime/vue/Example.vue | 11 +++ .../static/code-runtime/vue/env.d.ts | 8 +++ .../static/code-runtime/vue/index.html | 13 ++++ .../static/code-runtime/vue/main.ts | 12 ++++ .../static/code-runtime/vue/package.json | 23 +++++++ .../static/code-runtime/vue/tsconfig.json | 15 ++++ .../static/code-runtime/vue/vite.config.ts | 7 ++ packages/vue-test-app/package.json | 4 +- .../src/preview-examples/about-and-legal.vue | 9 --- .../src/preview-examples/aggrid.vue | 9 --- .../basic-navigation-without-header.vue | 9 --- .../src/preview-examples/basic-navigation.vue | 9 --- .../src/preview-examples/blind.vue | 9 --- .../breadcrumb-next-items.vue | 9 --- .../preview-examples/breadcrumb-truncate.vue | 9 --- .../src/preview-examples/breadcrumb.vue | 9 --- .../src/preview-examples/button-ghost.vue | 9 --- .../preview-examples/button-grey-ghost.vue | 9 --- .../button-grey-secondary.vue | 9 --- .../src/preview-examples/button-grey.vue | 9 --- .../src/preview-examples/button-group.vue | 9 --- .../src/preview-examples/button-secondary.vue | 9 --- .../src/preview-examples/button-selected.vue | 9 --- .../src/preview-examples/button-text-icon.vue | 9 --- .../src/preview-examples/button-with-icon.vue | 9 --- .../src/preview-examples/buttons.vue | 9 --- .../category-filter-suggestions.vue | 9 --- .../src/preview-examples/category-filter.vue | 9 --- .../checkbox-indeterminate.vue | 9 --- .../src/preview-examples/checkbox.vue | 9 --- .../src/preview-examples/chip.vue | 9 --- .../src/preview-examples/datepicker-range.vue | 9 --- .../src/preview-examples/datepicker.vue | 9 --- .../src/preview-examples/datetimepicker.vue | 9 --- .../preview-examples/drawer-full-height.vue | 9 --- .../src/preview-examples/drawer.vue | 9 --- .../src/preview-examples/dropdown-icon.vue | 9 --- .../src/preview-examples/dropdown.vue | 9 --- .../preview-examples/event-list-compact.vue | 9 --- .../event-list-custom-item-height.vue | 9 --- .../preview-examples/event-list-selected.vue | 9 --- .../src/preview-examples/event-list.vue | 9 --- .../src/preview-examples/expanding-search.vue | 9 --- .../src/preview-examples/flip-tile.vue | 9 --- .../preview-examples/group-context-menu.vue | 9 --- .../preview-examples/group-custom-entry.vue | 9 --- .../group-header-suppressed.vue | 9 --- .../src/preview-examples/group.vue | 9 --- .../src/preview-examples/input-disabled.vue | 9 --- .../src/preview-examples/input-readonly.vue | 9 --- .../src/preview-examples/input-with-icon.vue | 9 --- .../src/preview-examples/input.vue | 9 --- .../vue-test-app/src/preview-examples/kpi.vue | 9 --- .../map-navigation-overlay.vue | 9 --- .../src/preview-examples/map-navigation.vue | 9 --- .../menu-with-bottom-tabs.vue | 9 --- .../src/preview-examples/message-bar.vue | 9 --- .../src/preview-examples/modal.vue | 9 --- .../src/preview-examples/pill.vue | 9 --- .../src/preview-examples/popover-news.vue | 9 --- .../src/preview-examples/radio-button.vue | 9 --- .../src/preview-examples/select-editable.vue | 9 --- .../src/preview-examples/select-multiple.vue | 9 --- .../src/preview-examples/select.vue | 9 --- .../src/preview-examples/settings.vue | 9 --- .../src/preview-examples/spinner-large.vue | 9 --- .../src/preview-examples/spinner.vue | 9 --- .../preview-examples/split-button-icons.vue | 9 --- .../src/preview-examples/split-button.vue | 9 --- .../src/preview-examples/tabs-rounded.vue | 9 --- .../src/preview-examples/tabs.vue | 9 --- .../preview-examples/textarea-disabled.vue | 9 --- .../preview-examples/textarea-readonly.vue | 9 --- .../src/preview-examples/textarea.vue | 9 --- .../src/preview-examples/tile.vue | 9 --- .../src/preview-examples/timepicker.vue | 9 --- .../preview-examples/toast-custom-element.vue | 9 --- .../src/preview-examples/toast-custom.vue | 9 --- .../src/preview-examples/toast.vue | 9 --- .../src/preview-examples/toggle-color.vue | 9 --- .../preview-examples/toggle-custom-label.vue | 9 --- .../src/preview-examples/toggle-disabled.vue | 9 --- .../src/preview-examples/toggle.vue | 9 --- .../src/preview-examples/tree.vue | 14 ---- .../src/preview-examples/upload.vue | 9 --- .../vertical-tabs-with-avatar.vue | 9 --- .../src/preview-examples/vertical-tabs.vue | 9 --- .../preview-examples/workflow-vertical.vue | 9 --- .../src/preview-examples/workflow.vue | 9 --- 92 files changed, 170 insertions(+), 737 deletions(-) create mode 100644 packages/documentation/static/code-runtime/vue/App.vue create mode 100644 packages/documentation/static/code-runtime/vue/Example.vue create mode 100644 packages/documentation/static/code-runtime/vue/env.d.ts create mode 100644 packages/documentation/static/code-runtime/vue/index.html create mode 100644 packages/documentation/static/code-runtime/vue/main.ts create mode 100644 packages/documentation/static/code-runtime/vue/package.json create mode 100644 packages/documentation/static/code-runtime/vue/tsconfig.json create mode 100644 packages/documentation/static/code-runtime/vue/vite.config.ts diff --git a/packages/documentation/src/components/Playground/index.tsx b/packages/documentation/src/components/Playground/index.tsx index fd6bcc273a7..c43b4a5f408 100644 --- a/packages/documentation/src/components/Playground/index.tsx +++ b/packages/documentation/src/components/Playground/index.tsx @@ -197,12 +197,15 @@ export default function Playground({ if (framework === TargetFramework.REACT) { filename = filename.concat('.tsx'); } - if (framework === TargetFramework.JAVASCRIPT || framework === TargetFramework.VUE) { + if (framework === TargetFramework.JAVASCRIPT) { filename = filename.concat('.html'); } if (framework === TargetFramework.ANGULAR) { filename = filename.concat('.ts'); } + if (framework === TargetFramework.VUE) { + filename = filename.concat('.vue'); + } snippets[framework] = [ { diff --git a/packages/documentation/src/components/Playground/utils.ts b/packages/documentation/src/components/Playground/utils.ts index b850e02535c..bbe427a8f03 100644 --- a/packages/documentation/src/components/Playground/utils.ts +++ b/packages/documentation/src/components/Playground/utils.ts @@ -236,6 +236,70 @@ async function openReactStackBlitz( ); } +async function openVueStackBlitz( + baseUrl: string, + sourceFiles: { filename: string; sourceCode: string }[] +) { + const [ + app_vue, + index_html, + index_ts, + package_json, + tsconfig_json, + viteconfig_ts, + env_d_ts, + ] = await loadSourceCodeFromStatic([ + `${baseUrl}code-runtime/vue/App.vue`, + `${baseUrl}code-runtime/vue/index.html`, + `${baseUrl}code-runtime/vue/main.ts`, + `${baseUrl}code-runtime/vue/package.json`, + `${baseUrl}code-runtime/vue/tsconfig.json`, + `${baseUrl}code-runtime/vue/vite.config.ts`, + `${baseUrl}code-runtime/vue/env.d.ts`, + ]); + + const [renderFirstExample] = sourceFiles; + + const patchAppTs = () => { + return app_vue + .replace( + /\/\/@_IMPORT_COMPONENT/gms, + `import Example from './${renderFirstExample.filename}'` + ) + .replace(//gms, ' '); + }; + + const files: Record = {}; + + sourceFiles.forEach(({ filename, sourceCode }) => { + files[`src/${filename}`] = sourceCode; + }); + + sdk.openProject( + { + template: 'node', + title: 'iX Vue App', + description: 'iX vue playground', + files: { + ...files, + 'index.html': index_html, + 'src/main.ts': index_ts, + 'src/App.vue': patchAppTs(), + 'src/env.d.ts': env_d_ts, + 'package.json': package_json, + 'tsconfig.json': tsconfig_json, + 'vite.config.ts': viteconfig_ts, + '.stackblitzrc': `{ + "startCommand": "yarn run dev" + }`, + }, + }, + { + openFile: `src/${renderFirstExample.filename}`, + } + ); +} + async function getSourceCodeFiles( baseUrl: string, framework: TargetFramework, @@ -281,4 +345,8 @@ export async function openStackBlitz({ if (framework === TargetFramework.JAVASCRIPT) { return openHtmlStackBlitz(baseUrl, additionalFiles); } + + if (framework === TargetFramework.VUE) { + return openVueStackBlitz(baseUrl, additionalFiles); + } } diff --git a/packages/documentation/static/code-runtime/vue/App.vue b/packages/documentation/static/code-runtime/vue/App.vue new file mode 100644 index 00000000000..76065e7f69c --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/App.vue @@ -0,0 +1,7 @@ + + + diff --git a/packages/documentation/static/code-runtime/vue/Example.vue b/packages/documentation/static/code-runtime/vue/Example.vue new file mode 100644 index 00000000000..249e269703f --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/Example.vue @@ -0,0 +1,11 @@ + + + + diff --git a/packages/documentation/static/code-runtime/vue/env.d.ts b/packages/documentation/static/code-runtime/vue/env.d.ts new file mode 100644 index 00000000000..a735ff23942 --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/env.d.ts @@ -0,0 +1,8 @@ +/// + +declare module '*.vue' { + import { DefineComponent } from 'vue'; + // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types + const component: DefineComponent<{}, {}, any>; + export default component; +} diff --git a/packages/documentation/static/code-runtime/vue/index.html b/packages/documentation/static/code-runtime/vue/index.html new file mode 100644 index 00000000000..117dae36214 --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/index.html @@ -0,0 +1,13 @@ + + + + + + + iX Vue Example + + +
+ + + diff --git a/packages/documentation/static/code-runtime/vue/main.ts b/packages/documentation/static/code-runtime/vue/main.ts new file mode 100644 index 00000000000..384a216243b --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/main.ts @@ -0,0 +1,12 @@ +import '@siemens/ix-icons/dist/css/ix-icons.css'; +import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; + +import { ixPlugin } from '@siemens/ix-vue'; +import { createApp } from 'vue'; +import App from './App.vue'; + +const app = createApp(App); + +app.use(ixPlugin); + +app.mount('#app'); diff --git a/packages/documentation/static/code-runtime/vue/package.json b/packages/documentation/static/code-runtime/vue/package.json new file mode 100644 index 00000000000..4b185c5747a --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/package.json @@ -0,0 +1,23 @@ +{ + "name": "ix-vue-example", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "vite", + "build": "vue-tsc --noEmit && vite build", + "serve": "vite preview" + }, + "dependencies": { + "vue": "^3.2.6", + "@siemens/ix": "^1", + "@siemens/ix-icons": "^1", + "@siemens/ix-vue": "^1" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^1.6.1", + "@vue/compiler-sfc": "^3.2.6", + "typescript": "^4.3.2", + "vite": "^2.5.4", + "vue-tsc": "^0.2.2" + } +} diff --git a/packages/documentation/static/code-runtime/vue/tsconfig.json b/packages/documentation/static/code-runtime/vue/tsconfig.json new file mode 100644 index 00000000000..8617c8a54fe --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "moduleResolution": "node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "lib": ["esnext", "dom"] + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] +} diff --git a/packages/documentation/static/code-runtime/vue/vite.config.ts b/packages/documentation/static/code-runtime/vue/vite.config.ts new file mode 100644 index 00000000000..c30ad2051b3 --- /dev/null +++ b/packages/documentation/static/code-runtime/vue/vite.config.ts @@ -0,0 +1,7 @@ +import vue from '@vitejs/plugin-vue'; +import { defineConfig } from 'vite'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +}); diff --git a/packages/vue-test-app/package.json b/packages/vue-test-app/package.json index 22c441520ef..315eb8b1663 100644 --- a/packages/vue-test-app/package.json +++ b/packages/vue-test-app/package.json @@ -1,6 +1,6 @@ { "name": "vue-test-app", - "version": "1.1.0", + "version": "1.2.1", "private": true, "type": "module", "scripts": { @@ -10,7 +10,7 @@ }, "dependencies": { "ag-grid-community": "^28.2.1", - "@siemens/ix-vue": "*", + "@siemens/ix-vue": "1.2.1", "@siemens/ix-icons": "~1.0.0", "@siemens/ix-aggrid": "~1.2.1", "ag-grid-vue3": "^28.2.1", diff --git a/packages/vue-test-app/src/preview-examples/about-and-legal.vue b/packages/vue-test-app/src/preview-examples/about-and-legal.vue index 7986934d36d..0a4d02d42fd 100644 --- a/packages/vue-test-app/src/preview-examples/about-and-legal.vue +++ b/packages/vue-test-app/src/preview-examples/about-and-legal.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/basic-navigation.vue b/packages/vue-test-app/src/preview-examples/basic-navigation.vue index 645a87cfb9c..339550ac580 100644 --- a/packages/vue-test-app/src/preview-examples/basic-navigation.vue +++ b/packages/vue-test-app/src/preview-examples/basic-navigation.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/blind.vue b/packages/vue-test-app/src/preview-examples/blind.vue index 5ea09cc8400..25a2628f62d 100644 --- a/packages/vue-test-app/src/preview-examples/blind.vue +++ b/packages/vue-test-app/src/preview-examples/blind.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue b/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue index 7564dead200..e0ae4382794 100644 --- a/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue +++ b/packages/vue-test-app/src/preview-examples/breadcrumb-next-items.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/breadcrumb.vue b/packages/vue-test-app/src/preview-examples/breadcrumb.vue index c4fd31e4da6..3fd3345f0c9 100644 --- a/packages/vue-test-app/src/preview-examples/breadcrumb.vue +++ b/packages/vue-test-app/src/preview-examples/breadcrumb.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-ghost.vue b/packages/vue-test-app/src/preview-examples/button-ghost.vue index 621220a3239..1cbf1eb7dd7 100644 --- a/packages/vue-test-app/src/preview-examples/button-ghost.vue +++ b/packages/vue-test-app/src/preview-examples/button-ghost.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue b/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue index 7d90febb8e5..3b7b1147af5 100644 --- a/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue +++ b/packages/vue-test-app/src/preview-examples/button-grey-ghost.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue b/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue index e02d8633817..4b0bc099b65 100644 --- a/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue +++ b/packages/vue-test-app/src/preview-examples/button-grey-secondary.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-grey.vue b/packages/vue-test-app/src/preview-examples/button-grey.vue index d0a0ca3ddc4..7af22bb6d72 100644 --- a/packages/vue-test-app/src/preview-examples/button-grey.vue +++ b/packages/vue-test-app/src/preview-examples/button-grey.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-group.vue b/packages/vue-test-app/src/preview-examples/button-group.vue index 54a61d16319..87d1e4663c6 100644 --- a/packages/vue-test-app/src/preview-examples/button-group.vue +++ b/packages/vue-test-app/src/preview-examples/button-group.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-secondary.vue b/packages/vue-test-app/src/preview-examples/button-secondary.vue index 52296f637b2..fe4ecc5d113 100644 --- a/packages/vue-test-app/src/preview-examples/button-secondary.vue +++ b/packages/vue-test-app/src/preview-examples/button-secondary.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-selected.vue b/packages/vue-test-app/src/preview-examples/button-selected.vue index 2487716da2e..b80e15464a9 100644 --- a/packages/vue-test-app/src/preview-examples/button-selected.vue +++ b/packages/vue-test-app/src/preview-examples/button-selected.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-text-icon.vue b/packages/vue-test-app/src/preview-examples/button-text-icon.vue index a8ecf899d8e..821180705ee 100644 --- a/packages/vue-test-app/src/preview-examples/button-text-icon.vue +++ b/packages/vue-test-app/src/preview-examples/button-text-icon.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/button-with-icon.vue b/packages/vue-test-app/src/preview-examples/button-with-icon.vue index 9098f793010..cc2325d1626 100644 --- a/packages/vue-test-app/src/preview-examples/button-with-icon.vue +++ b/packages/vue-test-app/src/preview-examples/button-with-icon.vue @@ -1,12 +1,3 @@ - - diff --git a/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue b/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue index 8b8980b47fc..fa439e249d7 100644 --- a/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue +++ b/packages/vue-test-app/src/preview-examples/category-filter-suggestions.vue @@ -1,12 +1,3 @@ - -