feat(vue): add vue support

packages/core/package.json

@@ -56,6 +56,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",

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',

packages/documentation/docs/controls/blind.md

@@ -5,6 +5,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 SourceVue from './../auto-generated/previews/vue/blind.md'
 import SourceAngularTs from './../auto-generated/previews/angular/blind.ts.md'
 import SourceAngularHtml from './../auto-generated/previews/angular/blind.html.md'
 
@@ -23,7 +24,8 @@ frameworks={{
         "blind.html": SourceAngularHtml,
         "blind.ts": SourceAngularTs
     },
-    javascript: WebComponent
+    javascript: WebComponent,
+    vue: SourceVue
 }}>
 </Playground>
 

packages/documentation/docs/controls/breadcrumb.md

@@ -17,6 +17,10 @@ import SourceAngularBreadcrumbNextItems from './../auto-generated/previews/angul
 
 import Playground from '@site/src/components/Playground'
 
+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
@@ -27,7 +31,8 @@ height="8rem"
 frameworks={{
     react: SourceReactBreadcrumb,
     angular: SourceAngularBreadcrumb,
-    javascript: SourceBreadcrumb
+    javascript: SourceBreadcrumb,
+    vue: SourceVueBreadcrumb
 }}>
 </Playground>
 
@@ -40,7 +45,8 @@ hideInitalCodePreview
 frameworks={{
     react: SourceReactBreadcrumbTruncate,
     angular: SourceAngularBreadcrumbTruncate,
-    javascript: SourceBreadcrumbTruncate
+    javascript: SourceBreadcrumbTruncate,
+    vue: SourceVueBreadcrumbTruncate
 }}>
 </Playground>
 
@@ -53,7 +59,8 @@ hideInitalCodePreview
 frameworks={{
     react: SourceReactBreadcrumbNextItems,
     angular: SourceAngularBreadcrumbNextItems,
-    javascript: SourceBreadcrumbNextItems
+    javascript: SourceBreadcrumbNextItems,
+    vue: SourceVueBreadcrumbNextItems
 }}>
 </Playground>
 

packages/documentation/docs/controls/button.md

@@ -21,7 +21,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'
@@ -40,6 +39,17 @@ import AngularButtonGreySecondary from './../auto-generated/previews/angular/but
 import AngularButtonGreyGhost from './../auto-generated/previews/angular/button-grey-ghost.ts.md'
 import AngularButtonTextIcon from './../auto-generated/previews/angular/button-text-icon.ts.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
@@ -49,7 +59,8 @@ name="buttons"
 frameworks={{
   react: ReactButtons,
   angular: AngularButtons,
-  javascript: WebComponentButtons
+  javascript: WebComponentButtons,
+  vue: VueButtons
 }}>
 </Playground>
 
@@ -67,7 +78,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonSecondary,
   angular: AngularButtonSecondary,
-  javascript: WebComponentButtonSecondary
+  javascript: WebComponentButtonSecondary,
+  vue: VueButtonSecondary
 }}></Playground>
 
 ### Primary Ghost
@@ -84,7 +96,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonGhost,
   angular: AngularButtonGhost,
-  javascript: WebComponentButtonGhost
+  javascript: WebComponentButtonGhost,
+  vue: VueButtonGhost
 }}></Playground>
 
 ### Secondary
@@ -101,7 +114,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonGrey,
   angular: AngularButtonGrey,
-  javascript: WebComponentButtonGrey
+  javascript: WebComponentButtonGrey,
+  vue: VueButtonGrey
 }}></Playground>
 
 ### Secondary Outline
@@ -118,7 +132,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonGreySecondary,
   angular: AngularButtonGreySecondary,
-  javascript: WebComponentButtonGreySecondary
+  javascript: WebComponentButtonGreySecondary,
+  vue: VueButtonGreySecondary
 }}></Playground>
 
 ### Secondary Ghost
@@ -135,7 +150,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonGreyGhost,
   angular: AngularButtonGreyGhost,
-  javascript: WebComponentButtonGreyGhost
+  javascript: WebComponentButtonGreyGhost,
+  vue: VueButtonGreyGhost
 }}></Playground>
 
 ### Selectable button
@@ -152,7 +168,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonSelected,
   angular: AngularButtonSelected,
-  javascript: WebComponentButtonSelected
+  javascript: WebComponentButtonSelected,
+  vue: VueButtonSelected
 }}></Playground>
 
 ### Button group
@@ -163,7 +180,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonGroup,
   angular: AngularButtonGroup,
-  javascript: WebComponentButtonGroup
+  javascript: WebComponentButtonGroup,
+  vue: VueButtonGroup
 }}></Playground>
 
 ### Button with text and icon
@@ -174,7 +192,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonTextIcon,
   angular: AngularButtonTextIcon,
-  javascript: WebComponentButtonTextIcon
+  javascript: WebComponentButtonTextIcon,
+  vue: VueButtonTextIcon
 }}></Playground>
 
 ### Icon button
@@ -185,7 +204,8 @@ hideInitalCodePreview
 frameworks={{
   react: ReactButtonIcon,
   angular: AngularButtonIcon,
-  javascript: WebComponentButtonIcon
+  javascript: WebComponentButtonIcon,
+  vue: VueButtonIcon
 }}></Playground>
 
 ## Properties (ix-button)

packages/documentation/docs/controls/category-filter.md

@@ -11,6 +11,9 @@ import SourceCategoryFilterSuggestions from './../auto-generated/previews/web-co
 import SourceReactCategoryFilterSuggestions from './../auto-generated/previews/react/category-filter-suggestions.md'
 import SourceAngularCategoryFilterSuggestions from './../auto-generated/previews/angular/category-filter-suggestions.ts.md'
 
+import SourceVueCategoryFilter from './../auto-generated/previews/vue/category-filter.md'
+import SourceVueCategoryFilterSuggestions from './../auto-generated/previews/vue/category-filter-suggestions.md'
+
 import Playground from '@site/src/components/Playground';
 
 # Category filter
@@ -23,7 +26,8 @@ height="12rem"
 frameworks={{
   react: SourceReactCategoryFilter,
   angular: SourceAngularCategoryFilter,
-  javascript: SourceCategoryFilter
+  javascript: SourceCategoryFilter,
+  vue: SourceVueCategoryFilter
 }}></Playground>
 
 ### without categories
@@ -35,7 +39,8 @@ height="12rem"
 frameworks={{
   react: SourceReactCategoryFilterSuggestions,
   angular: SourceAngularCategoryFilterSuggestions,
-  javascript: SourceCategoryFilterSuggestions
+  javascript: SourceCategoryFilterSuggestions,
+  vue: SourceVueCategoryFilterSuggestions
 }}></Playground>
 
 ## Properties

packages/documentation/docs/controls/checkbox.md

@@ -7,6 +7,9 @@ import SourceReactCheckboxInderterminate from './../auto-generated/previews/reac
 import SourceAngularCheckbox from './../auto-generated/previews/angular/checkbox.ts.md'
 import SourceAngularCheckboxInderterminate from './../auto-generated/previews/angular/checkbox-indeterminate.ts.md'
 
+import SourceVueCheckbox from './../auto-generated/previews/vue/checkbox.md'
+import SourceVueCheckboxInderterminate from './../auto-generated/previews/vue/checkbox-indeterminate.md'
+
 # Checkbox
 
 ## Usage
@@ -16,7 +19,8 @@ name="checkbox" height="8rem"
 frameworks={{
   react: SourceReactCheckbox,
   angular: SourceAngularCheckbox,
-  javascript: SourceCheckbox
+  javascript: SourceCheckbox,
+  vue: SourceVueCheckbox
 }}></Playground>
 
 ### Indeterminate
@@ -27,5 +31,6 @@ hideInitalCodePreview
 frameworks={{
   react: SourceReactCheckboxInderterminate,
   angular: SourceAngularCheckboxInderterminate,
-  javascript: SourceCheckboxInderterminate
+  javascript: SourceCheckboxInderterminate,
+  vue: SourceVueCheckboxInderterminate
 }}></Playground>

packages/documentation/docs/controls/chip.md

@@ -5,6 +5,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.ts.md'
+import SourceVueChip from './../auto-generated/previews/vue/chip.md'
 
 # Chip
 
@@ -15,7 +16,8 @@ name="chip" height="25rem"
 frameworks={{
   react: SourceReactChip,
   angular: SourceAngularChip,
-  javascript: SourceChip
+  javascript: SourceChip,
+  vue: SourceVueChip
 }}>
 </Playground>
 

packages/documentation/docs/controls/date-picker.md

@@ -10,6 +10,9 @@ import SourceDatepickerRange from './../auto-generated/previews/web-component/da
 import SourceReactDatepickerRange from './../auto-generated/previews/react/datepicker-range.md'
 import SourceAngularDatepickerRange from './../auto-generated/previews/angular/datepicker-range.ts.md'
 
+import SourceVueDatepicker from './../auto-generated/previews/vue/datepicker.md'
+import SourceVueDatepickerRange from './../auto-generated/previews/vue/datepicker-range.md'
+
 # Date picker
 
 ## Usage
@@ -19,7 +22,8 @@ name="datepicker" height="35rem"
 frameworks={{
   react: SourceReactDatepicker,
   angular: SourceAngularDatepicker,
-  javascript: SourceDatepicker
+  javascript: SourceDatepicker,
+  vue: SourceVueDatepicker
 }}></Playground>
 
 ### with range selection
@@ -30,7 +34,8 @@ hideInitalCodePreview
 frameworks={{
   react: SourceReactDatepickerRange,
   angular: SourceAngularDatepickerRange,
-  javascript: SourceDatepickerRange
+  javascript: SourceDatepickerRange,
+  vue: SourceVueDatepickerRange
 }}></Playground>
 
 ## Properties

packages/documentation/docs/controls/date-time-picker.md

@@ -5,6 +5,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.ts.md'
+import SourceVueDatetimepicker from './../auto-generated/previews/vue/datetimepicker.md'
 
 # Date time picker
 
@@ -15,7 +16,8 @@ name="datetimepicker" height="35rem"
 frameworks={{
   react: SourceReactDatetimepicker,
   angular: SourceAngularDatetimepicker,
-  javascript: SourceDatetimepicker
+  javascript: SourceDatetimepicker,
+  vue: SourceVueDatetimepicker
 }}></Playground>
 
 ## Properties

packages/documentation/docs/controls/drawer.md

@@ -11,6 +11,9 @@ import SourceReactDrawerFullHeight from './../auto-generated/previews/react/draw
 import SourceAngularDrawer from './../auto-generated/previews/angular/drawer.ts.md'
 import SourceAngularDrawerFullHeight from './../auto-generated/previews/angular/drawer-full-height.ts.md'
 
+import SourceVueDrawer from './../auto-generated/previews/vue/drawer.md'
+import SourceVueDrawerFullHeight from './../auto-generated/previews/vue/drawer-full-height.md'
+
 # Drawer
 
 ## Usage
@@ -20,7 +23,8 @@ name="drawer-full-height" height="24rem"
 frameworks={{
   react: SourceReactDrawer,
   angular: SourceAngularDrawer,
-  javascript: SourceDrawer
+  javascript: SourceDrawer,
+  vue: SourceVueDrawer
 }}></Playground>
 
 ### Auto height
@@ -31,7 +35,8 @@ hideInitalCodePreview
 frameworks={{
   react: SourceReactDrawerFullHeight,
   angular: SourceAngularDrawerFullHeight,
-  javascript: SourceDrawerFullHeight
+  javascript: SourceDrawerFullHeight,
+  vue: SourceVueDrawerFullHeight
 }}></Playground>
 
 ## Properties

packages/documentation/docs/controls/dropdown.md

@@ -15,6 +15,9 @@ import SourceReactDropdownIcon from './../auto-generated/previews/react/dropdown
 import SourceAngularDropdown from './../auto-generated/previews/angular/dropdown.ts.md'
 import SourceAngularDropdownIcon from './../auto-generated/previews/angular/dropdown-icon.ts.md'
 
+import SourceVueDropdown from './../auto-generated/previews/vue/dropdown.md'
+import SourceVueDropdownIcon from './../auto-generated/previews/vue/dropdown-icon.md'
+
 # Dropdown
 
 ## Usage
@@ -24,7 +27,8 @@ name="dropdown" height="16rem"
 frameworks={{
   react: SourceReactDropdown,
   angular: SourceAngularDropdown,
-  javascript: SourceDropdown
+  javascript: SourceDropdown,
+  vue: SourceVueDropdown
 }}></Playground>
 
 ### Dropdown with icon
@@ -35,7 +39,8 @@ hideInitalCodePreview
 frameworks={{
   react: SourceReactDropdownIcon,
   angular: SourceAngularDropdownIcon,
-  javascript: SourceDropdownIcon
+  javascript: SourceDropdownIcon,
+  vue: SourceVueDropdownIcon
 }}></Playground>
 
 ## Properties (ix-dropdown)