@public-ui/vue 2.0.0-rc.8 → 2.0.0

package/README.md

@@ -1,7 +1,45 @@
-# Vue-Adapter
+# KoliBri - Vue-Adapter
 
-Das [**Vue**](https://v3.vue.org)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
+## Motivation
 
-Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
+Provide an adapter for [Vue](https://vuejs.org/) to use the KoliBri components.
 
-Mehr zum **Projekt** kann in der [README](https://public-ui.github.io/docs) nachgelesen werden.
+## Installation
+
+You can install the adapter with `npm`, `pnpm` or `yarn`:
+
+```bash
+npm i -g @public-ui/vue
+pnpm i -g @public-ui/vue
+yarn add -g @public-ui/vue
+```
+
+## Usage
+
+First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) and create a Vue app:
+
+```ts
+import { createApp } from 'vue';
+import { DEFAULT } from '@public-ui/themes';
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { register } from '@public-ui/components';
+
+register(DEFAULT, defineCustomElements)
+	.then(() => {
+		createApp(App).mount(htmlDivElement);
+	})
+	.catch((error) => {
+		/* Handle errors */
+	});
+```
+
+Then, you can import any component from `@public-ui/vue` and render it within your Vue application:
+
+```vue
+<script setup>
+import { KolButton } from '@public-ui/vue';
+</script>
+<template>
+	<KolButton _label="Hello World" />
+</template>
+```

package/dist/index.cjs

@@ -18,7 +18,7 @@ const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
     (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
   );
 };
-const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
   if (defineCustomElement !== void 0) {
     defineCustomElement();
   }
@@ -26,16 +26,13 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
     let modelPropValue = props[modelProp];
     const containerRef = vue.ref();
     const classes = new Set(getComponentClasses(attrs.class));
-    const onVnodeBeforeMount = (vnode) => {
-      if (vnode.el) {
+    const vModelDirective = {
+      created: (el) => {
         const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
         eventsNames.forEach((eventName) => {
-          vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
+          el.addEventListener(eventName.toLowerCase(), (e) => {
             modelPropValue = (e?.target)[modelProp];
             emit(UPDATE_VALUE_EVENT, modelPropValue);
-            if (externalModelUpdateEvent) {
-              emit(externalModelUpdateEvent, e);
-            }
           });
         });
       }
@@ -77,8 +74,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
       let propsToAdd = {
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
-        onClick: handleClick,
-        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : void 0
+        onClick: handleClick
       };
       for (const key in props) {
         const value = props[key];
@@ -99,7 +95,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
           };
         }
       }
-      return vue.h(name, propsToAdd, slots.default && slots.default());
+      const node = vue.h(name, propsToAdd, slots.default && slots.default());
+      return modelProp === void 0 ? node : vue.withDirectives(node, [[vModelDirective]]);
     };
   });
   if (typeof Container !== "function") {
@@ -112,7 +109,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
     });
     if (modelProp) {
       Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-      Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+      Container.emits = [UPDATE_VALUE_EVENT];
     }
   }
   return Container;
@@ -210,7 +207,8 @@ const KolForm = /* @__PURE__ */ defineContainer("kol-form", void 0, [
 const KolHeading = /* @__PURE__ */ defineContainer("kol-heading", void 0, [
   "_label",
   "_level",
-  "_secondaryHeadline"
+  "_secondaryHeadline",
+  "_variant"
 ]);
 const KolIcon = /* @__PURE__ */ defineContainer("kol-icon", void 0, [
   "_icons",
@@ -485,12 +483,12 @@ const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
 ]);
 const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
   "_accessKey",
+  "_ariaCurrentValue",
   "_download",
   "_hideLabel",
   "_href",
   "_icons",
   "_label",
-  "_listenAriaCurrent",
   "_on",
   "_role",
   "_tabIndex",
@@ -500,13 +498,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
 ]);
 const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
   "_accessKey",
+  "_ariaCurrentValue",
   "_customClass",
   "_download",
   "_hideLabel",
   "_href",
   "_icons",
   "_label",
-  "_listenAriaCurrent",
   "_on",
   "_role",
   "_tabIndex",
@@ -531,7 +529,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
   "_width"
 ]);
 const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
-  "_ariaCurrentValue",
   "_collapsible",
   "_hasCompactButton",
   "_hideLabel",
@@ -552,10 +549,6 @@ const KolPagination = /* @__PURE__ */ defineContainer("kol-pagination", void 0,
   "_tooltipAlign",
   "_max"
 ]);
-const KolPopover = /* @__PURE__ */ defineContainer("kol-popover", void 0, [
-  "_align",
-  "_show"
-]);
 const KolProgress = /* @__PURE__ */ defineContainer("kol-progress", void 0, [
   "_label",
   "_max",
@@ -631,6 +624,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
   "_symbol"
 ]);
 const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
+  "_allowMultiSort",
   "_data",
   "_dataFoot",
   "_headers",
@@ -710,7 +704,6 @@ exports.KolLogo = KolLogo;
 exports.KolModal = KolModal;
 exports.KolNav = KolNav;
 exports.KolPagination = KolPagination;
-exports.KolPopover = KolPopover;
 exports.KolProgress = KolProgress;
 exports.KolQuote = KolQuote;
 exports.KolSelect = KolSelect;

package/dist/index.d.ts

@@ -38,7 +38,6 @@ declare const KolLogo: (props: JSX.KolLogo & InputProps<string | number | boolea
 declare const KolModal: (props: JSX.KolModal & InputProps<string | number | boolean> & {}) => any;
 declare const KolNav: (props: JSX.KolNav & InputProps<string | number | boolean> & {}) => any;
 declare const KolPagination: (props: JSX.KolPagination & InputProps<string | number | boolean> & {}) => any;
-declare const KolPopover: (props: JSX.KolPopover & InputProps<string | number | boolean> & {}) => any;
 declare const KolProgress: (props: JSX.KolProgress & InputProps<string | number | boolean> & {}) => any;
 declare const KolQuote: (props: JSX.KolQuote & InputProps<string | number | boolean> & {}) => any;
 declare const KolSelect: (props: JSX.KolSelect & InputProps<string | number | boolean> & {}) => any;
@@ -53,4 +52,4 @@ declare const KolTextarea: (props: JSX.KolTextarea & InputProps<string | number
 declare const KolToastContainer: (props: JSX.KolToastContainer & InputProps<string | number | boolean> & {}) => any;
 declare const KolVersion: (props: JSX.KolVersion & InputProps<string | number | boolean> & {}) => any;
 
-export { KolAbbr, KolAccordion, KolAlert, KolAvatar, KolBadge, KolBreadcrumb, KolButton, KolButtonGroup, KolButtonLink, KolCard, KolDetails, KolForm, KolHeading, KolIcon, KolImage, KolIndentedText, KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRadio, KolInputRange, KolInputText, KolKolibri, KolLink, KolLinkButton, KolLinkGroup, KolLogo, KolModal, KolNav, KolPagination, KolPopover, KolProgress, KolQuote, KolSelect, KolSkipNav, KolSpan, KolSpin, KolSplitButton, KolSymbol, KolTable, KolTabs, KolTextarea, KolToastContainer, KolVersion };
+export { KolAbbr, KolAccordion, KolAlert, KolAvatar, KolBadge, KolBreadcrumb, KolButton, KolButtonGroup, KolButtonLink, KolCard, KolDetails, KolForm, KolHeading, KolIcon, KolImage, KolIndentedText, KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRadio, KolInputRange, KolInputText, KolKolibri, KolLink, KolLinkButton, KolLinkGroup, KolLogo, KolModal, KolNav, KolPagination, KolProgress, KolQuote, KolSelect, KolSkipNav, KolSpan, KolSpin, KolSplitButton, KolSymbol, KolTable, KolTabs, KolTextarea, KolToastContainer, KolVersion };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, getCurrentInstance, inject, h } from 'vue';
+import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';
 
 const UPDATE_VALUE_EVENT = "update:modelValue";
 const MODEL_VALUE = "modelValue";
@@ -16,7 +16,7 @@ const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
     (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
   );
 };
-const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
+const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
   if (defineCustomElement !== void 0) {
     defineCustomElement();
   }
@@ -24,16 +24,13 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
     let modelPropValue = props[modelProp];
     const containerRef = ref();
     const classes = new Set(getComponentClasses(attrs.class));
-    const onVnodeBeforeMount = (vnode) => {
-      if (vnode.el) {
+    const vModelDirective = {
+      created: (el) => {
         const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
         eventsNames.forEach((eventName) => {
-          vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
+          el.addEventListener(eventName.toLowerCase(), (e) => {
             modelPropValue = (e?.target)[modelProp];
             emit(UPDATE_VALUE_EVENT, modelPropValue);
-            if (externalModelUpdateEvent) {
-              emit(externalModelUpdateEvent, e);
-            }
           });
         });
       }
@@ -75,8 +72,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
       let propsToAdd = {
         ref: containerRef,
         class: getElementClasses(containerRef, classes),
-        onClick: handleClick,
-        onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : void 0
+        onClick: handleClick
       };
       for (const key in props) {
         const value = props[key];
@@ -97,7 +93,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
           };
         }
       }
-      return h(name, propsToAdd, slots.default && slots.default());
+      const node = h(name, propsToAdd, slots.default && slots.default());
+      return modelProp === void 0 ? node : withDirectives(node, [[vModelDirective]]);
     };
   });
   if (typeof Container !== "function") {
@@ -110,7 +107,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
     });
     if (modelProp) {
       Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-      Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
+      Container.emits = [UPDATE_VALUE_EVENT];
     }
   }
   return Container;
@@ -208,7 +205,8 @@ const KolForm = /* @__PURE__ */ defineContainer("kol-form", void 0, [
 const KolHeading = /* @__PURE__ */ defineContainer("kol-heading", void 0, [
   "_label",
   "_level",
-  "_secondaryHeadline"
+  "_secondaryHeadline",
+  "_variant"
 ]);
 const KolIcon = /* @__PURE__ */ defineContainer("kol-icon", void 0, [
   "_icons",
@@ -483,12 +481,12 @@ const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
 ]);
 const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
   "_accessKey",
+  "_ariaCurrentValue",
   "_download",
   "_hideLabel",
   "_href",
   "_icons",
   "_label",
-  "_listenAriaCurrent",
   "_on",
   "_role",
   "_tabIndex",
@@ -498,13 +496,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
 ]);
 const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
   "_accessKey",
+  "_ariaCurrentValue",
   "_customClass",
   "_download",
   "_hideLabel",
   "_href",
   "_icons",
   "_label",
-  "_listenAriaCurrent",
   "_on",
   "_role",
   "_tabIndex",
@@ -529,7 +527,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
   "_width"
 ]);
 const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
-  "_ariaCurrentValue",
   "_collapsible",
   "_hasCompactButton",
   "_hideLabel",
@@ -550,10 +547,6 @@ const KolPagination = /* @__PURE__ */ defineContainer("kol-pagination", void 0,
   "_tooltipAlign",
   "_max"
 ]);
-const KolPopover = /* @__PURE__ */ defineContainer("kol-popover", void 0, [
-  "_align",
-  "_show"
-]);
 const KolProgress = /* @__PURE__ */ defineContainer("kol-progress", void 0, [
   "_label",
   "_max",
@@ -629,6 +622,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
   "_symbol"
 ]);
 const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
+  "_allowMultiSort",
   "_data",
   "_dataFoot",
   "_headers",
@@ -674,4 +668,4 @@ const KolVersion = /* @__PURE__ */ defineContainer("kol-version", void 0, [
   "_label"
 ]);
 
-export { KolAbbr, KolAccordion, KolAlert, KolAvatar, KolBadge, KolBreadcrumb, KolButton, KolButtonGroup, KolButtonLink, KolCard, KolDetails, KolForm, KolHeading, KolIcon, KolImage, KolIndentedText, KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRadio, KolInputRange, KolInputText, KolKolibri, KolLink, KolLinkButton, KolLinkGroup, KolLogo, KolModal, KolNav, KolPagination, KolPopover, KolProgress, KolQuote, KolSelect, KolSkipNav, KolSpan, KolSpin, KolSplitButton, KolSymbol, KolTable, KolTabs, KolTextarea, KolToastContainer, KolVersion };
+export { KolAbbr, KolAccordion, KolAlert, KolAvatar, KolBadge, KolBreadcrumb, KolButton, KolButtonGroup, KolButtonLink, KolCard, KolDetails, KolForm, KolHeading, KolIcon, KolImage, KolIndentedText, KolInputCheckbox, KolInputColor, KolInputDate, KolInputEmail, KolInputFile, KolInputNumber, KolInputPassword, KolInputRadio, KolInputRange, KolInputText, KolKolibri, KolLink, KolLinkButton, KolLinkGroup, KolLogo, KolModal, KolNav, KolPagination, KolProgress, KolQuote, KolSelect, KolSkipNav, KolSpan, KolSpin, KolSplitButton, KolSymbol, KolTable, KolTabs, KolTextarea, KolToastContainer, KolVersion };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/vue",
-  "version": "2.0.0-rc.8",
+  "version": "2.0.0",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": "https://github.com/public-ui/kolibri",
@@ -42,18 +42,18 @@
     "vue"
   ],
   "devDependencies": {
-    "@babel/types": "7.23.0",
-    "@public-ui/components": "2.0.0-rc.8",
+    "@babel/types": "7.23.5",
+    "@public-ui/components": "2.0.0",
     "@types/minimatch": "5.1.2",
-    "@types/minimist": "1.2.4",
-    "@types/node": "ts5.1",
-    "@types/normalize-package-data": "2.4.3",
-    "typescript": "5.2.2",
+    "@types/minimist": "1.2.5",
+    "@types/node": "ts5.3",
+    "@types/normalize-package-data": "2.4.4",
+    "typescript": "5.3.2",
     "unbuild": "1.2.1",
-    "vue": "3.3.7"
+    "vue": "3.3.9"
   },
   "peerDependencies": {
-    "@public-ui/components": "2.0.0-rc.8",
+    "@public-ui/components": "2.0.0",
     "vue": ">=3"
   },
   "sideEffects": false,