feat(elements): Add support for Vue.js 3

.github/semantic.yml

@@ -166,6 +166,57 @@ scopes:
   - elements-react|ino-table-row
   - elements-react|ino-textarea
   - elements-react|ino-tooltip
+  - elements-vue|ino-autocomplete
+  - elements-vue|ino-button
+  - elements-vue|ino-card
+  - elements-vue|ino-carousel
+  - elements-vue|ino-carousel-slide
+  - elements-vue|ino-checkbox
+  - elements-vue|ino-chip
+  - elements-vue|ino-chip-set
+  - elements-vue|ino-control-item
+  - elements-vue|ino-currency-input
+  - elements-vue|ino-datepicker
+  - elements-vue|ino-dialog
+  - elements-vue|ino-fab
+  - elements-vue|ino-fab-set
+  - elements-vue|ino-form-row
+  - elements-vue|ino-header
+  - elements-vue|ino-icon
+  - elements-vue|ino-icon-button
+  - elements-vue|ino-img
+  - elements-vue|ino-img-list
+  - elements-vue|ino-input
+  - elements-vue|ino-input-file
+  - elements-vue|ino-label
+  - elements-vue|ino-list
+  - elements-vue|ino-list-divider
+  - elements-vue|ino-list-item
+  - elements-vue|ino-markdown-editor
+  - elements-vue|ino-menu
+  - elements-vue|ino-nav-drawer
+  - elements-vue|ino-nav-item
+  - elements-vue|ino-option
+  - elements-vue|ino-option-group
+  - elements-vue|ino-popover
+  - elements-vue|ino-progress-bar
+  - elements-vue|ino-radio
+  - elements-vue|ino-radio-group
+  - elements-vue|ino-range
+  - elements-vue|ino-segment-button
+  - elements-vue|ino-segment-group
+  - elements-vue|ino-select
+  - elements-vue|ino-sidebar
+  - elements-vue|ino-snackbar
+  - elements-vue|ino-spinner
+  - elements-vue|ino-switch
+  - elements-vue|ino-tab
+  - elements-vue|ino-tab-bar
+  - elements-vue|ino-table
+  - elements-vue|ino-table-cell
+  - elements-vue|ino-table-row
+  - elements-vue|ino-textarea
+  - elements-vue|ino-tooltip
   - storybook|ino-autocomplete
   - storybook|ino-button
   - storybook|ino-card
@@ -220,6 +271,7 @@ scopes:
   - elements
   - elements-angular
   - elements-react
+  - elements-vue
   - storybook
   - landingpage
   - '*'

packages/elements-vue/README.md

@@ -0,0 +1,15 @@
+# @inovex.de/elements-vue
+
+This is the integration layer package for integrating the inovex elements into Vue projects.
+
+## Installation
+
+See [instructions](https://github.com/inovex/elements/tree/master/packages/storybook/src/stories/docs/framework-integration) how to integrate it into your project.
+
+## Contributing
+
+Please refer to the top level [README at GitHub](https://github.com/inovex/elements) to see the available script commands.
+
+## License
+
+MIT

packages/elements-vue/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@inovex.de/elements-vue",
+  "version": "6.0.0",
+  "description": "This is the Vue.js package of the integration layer for @inovex/elements.",
+  "keywords": [
+    "vue3",
+    "elements",
+    "vue"
+  ],
+  "author": "Benjamin Pagelsdorf <bpagelsdorf@inovex.de>",
+  "homepage": "https://elements.inovex.de",
+  "bugs": {
+    "url": "https://github.com/inovex/elements/issues"
+  },
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.esm.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run compile",
+    "clean": "shx rm -rf dist",
+    "compile": "npm run tsc",
+    "tsc": "tsc -p ."
+  },
+  "dependencies": {
+    "@inovex.de/elements": "6.0.0"
+  },
+  "devDependencies": {
+    "@stencil/core": "^2.14.0",
+    "shx": "^0.3.2",
+    "typescript": "^4.2.4",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
+  }
+}

packages/elements-vue/src/index.ts

@@ -0,0 +1,24 @@
+import { defineCustomElements } from '@inovex.de/elements/dist/loader';
+
+const toKebabCase = (eventName: string) => {
+  if (eventName.startsWith('MDC'))
+    return eventName;
+  if (eventName === 'valueChange')
+    return 'v-value-change';
+  if (eventName === 'checkedChange')
+    return 'v-checked-change';
+  return eventName.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+const getHelperFunctions = () => {
+  return {
+    ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(toKebabCase(eventName), cb, opts),
+    rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(toKebabCase(eventName), cb, opts),
+    ce: (eventName: string, opts: any) => new CustomEvent(toKebabCase(eventName), opts)
+  };
+};
+
+void defineCustomElements(window, getHelperFunctions());
+
+export * from './proxies';
+