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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +42 -4
  2. package/dist/index.cjs +13 -15
  3. package/dist/index.mjs +14 -16
  4. package/package.json +9 -9
package/README.md CHANGED
@@ -1,7 +1,45 @@
1
- # Vue-Adapter
1
+ # KoliBri - Vue-Adapter
2
2
 
3
- Das [**Vue**](https://v3.vue.org)-Modul ist der Framework-Adapter für die Komponenten-Bibliothek.
3
+ ## Motivation
4
4
 
5
- Mehr zur **Modularisierung** kann im [Architekturkonzept](https://public-ui.github.io/docs/concepts/architecture) nachgelesen werden.
5
+ Provide an adapter for [Vue](https://vuejs.org/) to use the KoliBri components.
6
6
 
7
- Mehr zum **Projekt** kann in der [README](https://public-ui.github.io/docs) nachgelesen werden.
7
+ ## Installation
8
+
9
+ You can install the adapter with `npm`, `pnpm` or `yarn`:
10
+
11
+ ```bash
12
+ npm i -g @public-ui/vue
13
+ pnpm i -g @public-ui/vue
14
+ yarn add -g @public-ui/vue
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ First, initialize KoliBri with a [theme](https://github.com/public-ui/kolibri/tree/develop/packages/themes) and create a Vue app:
20
+
21
+ ```ts
22
+ import { createApp } from 'vue';
23
+ import { DEFAULT } from '@public-ui/themes';
24
+ import { defineCustomElements } from '@public-ui/components/dist/loader';
25
+ import { register } from '@public-ui/components';
26
+
27
+ register(DEFAULT, defineCustomElements)
28
+ .then(() => {
29
+ createApp(App).mount(htmlDivElement);
30
+ })
31
+ .catch((error) => {
32
+ /* Handle errors */
33
+ });
34
+ ```
35
+
36
+ Then, you can import any component from `@public-ui/vue` and render it within your Vue application:
37
+
38
+ ```vue
39
+ <script setup>
40
+ import { KolButton } from '@public-ui/vue';
41
+ </script>
42
+ <template>
43
+ <KolButton _label="Hello World" />
44
+ </template>
45
+ ```
package/dist/index.cjs CHANGED
@@ -18,7 +18,7 @@ const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
18
18
  (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
19
19
  );
20
20
  };
21
- const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
21
+ const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
22
22
  if (defineCustomElement !== void 0) {
23
23
  defineCustomElement();
24
24
  }
@@ -26,16 +26,13 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
26
26
  let modelPropValue = props[modelProp];
27
27
  const containerRef = vue.ref();
28
28
  const classes = new Set(getComponentClasses(attrs.class));
29
- const onVnodeBeforeMount = (vnode) => {
30
- if (vnode.el) {
29
+ const vModelDirective = {
30
+ created: (el) => {
31
31
  const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
32
32
  eventsNames.forEach((eventName) => {
33
- vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
33
+ el.addEventListener(eventName.toLowerCase(), (e) => {
34
34
  modelPropValue = (e?.target)[modelProp];
35
35
  emit(UPDATE_VALUE_EVENT, modelPropValue);
36
- if (externalModelUpdateEvent) {
37
- emit(externalModelUpdateEvent, e);
38
- }
39
36
  });
40
37
  });
41
38
  }
@@ -77,8 +74,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
77
74
  let propsToAdd = {
78
75
  ref: containerRef,
79
76
  class: getElementClasses(containerRef, classes),
80
- onClick: handleClick,
81
- onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : void 0
77
+ onClick: handleClick
82
78
  };
83
79
  for (const key in props) {
84
80
  const value = props[key];
@@ -99,7 +95,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
99
95
  };
100
96
  }
101
97
  }
102
- return vue.h(name, propsToAdd, slots.default && slots.default());
98
+ const node = vue.h(name, propsToAdd, slots.default && slots.default());
99
+ return modelProp === void 0 ? node : vue.withDirectives(node, [[vModelDirective]]);
103
100
  };
104
101
  });
105
102
  if (typeof Container !== "function") {
@@ -112,7 +109,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
112
109
  });
113
110
  if (modelProp) {
114
111
  Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
115
- Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
112
+ Container.emits = [UPDATE_VALUE_EVENT];
116
113
  }
117
114
  }
118
115
  return Container;
@@ -210,7 +207,8 @@ const KolForm = /* @__PURE__ */ defineContainer("kol-form", void 0, [
210
207
  const KolHeading = /* @__PURE__ */ defineContainer("kol-heading", void 0, [
211
208
  "_label",
212
209
  "_level",
213
- "_secondaryHeadline"
210
+ "_secondaryHeadline",
211
+ "_variant"
214
212
  ]);
215
213
  const KolIcon = /* @__PURE__ */ defineContainer("kol-icon", void 0, [
216
214
  "_icons",
@@ -485,12 +483,12 @@ const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
485
483
  ]);
486
484
  const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
487
485
  "_accessKey",
486
+ "_ariaCurrentValue",
488
487
  "_download",
489
488
  "_hideLabel",
490
489
  "_href",
491
490
  "_icons",
492
491
  "_label",
493
- "_listenAriaCurrent",
494
492
  "_on",
495
493
  "_role",
496
494
  "_tabIndex",
@@ -500,13 +498,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
500
498
  ]);
501
499
  const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
502
500
  "_accessKey",
501
+ "_ariaCurrentValue",
503
502
  "_customClass",
504
503
  "_download",
505
504
  "_hideLabel",
506
505
  "_href",
507
506
  "_icons",
508
507
  "_label",
509
- "_listenAriaCurrent",
510
508
  "_on",
511
509
  "_role",
512
510
  "_tabIndex",
@@ -531,7 +529,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
531
529
  "_width"
532
530
  ]);
533
531
  const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
534
- "_ariaCurrentValue",
535
532
  "_collapsible",
536
533
  "_hasCompactButton",
537
534
  "_hideLabel",
@@ -627,6 +624,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
627
624
  "_symbol"
628
625
  ]);
629
626
  const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
627
+ "_allowMultiSort",
630
628
  "_data",
631
629
  "_dataFoot",
632
630
  "_headers",
package/dist/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { defineComponent, ref, getCurrentInstance, inject, h } from 'vue';
1
+ import { defineComponent, ref, getCurrentInstance, inject, h, withDirectives } from 'vue';
2
2
 
3
3
  const UPDATE_VALUE_EVENT = "update:modelValue";
4
4
  const MODEL_VALUE = "modelValue";
@@ -16,7 +16,7 @@ const getElementClasses = (ref2, componentClasses, defaultClasses = []) => {
16
16
  (c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i
17
17
  );
18
18
  };
19
- const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent, externalModelUpdateEvent) => {
19
+ const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
20
20
  if (defineCustomElement !== void 0) {
21
21
  defineCustomElement();
22
22
  }
@@ -24,16 +24,13 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
24
24
  let modelPropValue = props[modelProp];
25
25
  const containerRef = ref();
26
26
  const classes = new Set(getComponentClasses(attrs.class));
27
- const onVnodeBeforeMount = (vnode) => {
28
- if (vnode.el) {
27
+ const vModelDirective = {
28
+ created: (el) => {
29
29
  const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
30
30
  eventsNames.forEach((eventName) => {
31
- vnode.el.addEventListener(eventName.toLowerCase(), (e) => {
31
+ el.addEventListener(eventName.toLowerCase(), (e) => {
32
32
  modelPropValue = (e?.target)[modelProp];
33
33
  emit(UPDATE_VALUE_EVENT, modelPropValue);
34
- if (externalModelUpdateEvent) {
35
- emit(externalModelUpdateEvent, e);
36
- }
37
34
  });
38
35
  });
39
36
  }
@@ -75,8 +72,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
75
72
  let propsToAdd = {
76
73
  ref: containerRef,
77
74
  class: getElementClasses(containerRef, classes),
78
- onClick: handleClick,
79
- onVnodeBeforeMount: modelUpdateEvent ? onVnodeBeforeMount : void 0
75
+ onClick: handleClick
80
76
  };
81
77
  for (const key in props) {
82
78
  const value = props[key];
@@ -97,7 +93,8 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
97
93
  };
98
94
  }
99
95
  }
100
- return h(name, propsToAdd, slots.default && slots.default());
96
+ const node = h(name, propsToAdd, slots.default && slots.default());
97
+ return modelProp === void 0 ? node : withDirectives(node, [[vModelDirective]]);
101
98
  };
102
99
  });
103
100
  if (typeof Container !== "function") {
@@ -110,7 +107,7 @@ const defineContainer = (name, defineCustomElement, componentProps = [], modelPr
110
107
  });
111
108
  if (modelProp) {
112
109
  Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
113
- Container.emits = [UPDATE_VALUE_EVENT, externalModelUpdateEvent];
110
+ Container.emits = [UPDATE_VALUE_EVENT];
114
111
  }
115
112
  }
116
113
  return Container;
@@ -208,7 +205,8 @@ const KolForm = /* @__PURE__ */ defineContainer("kol-form", void 0, [
208
205
  const KolHeading = /* @__PURE__ */ defineContainer("kol-heading", void 0, [
209
206
  "_label",
210
207
  "_level",
211
- "_secondaryHeadline"
208
+ "_secondaryHeadline",
209
+ "_variant"
212
210
  ]);
213
211
  const KolIcon = /* @__PURE__ */ defineContainer("kol-icon", void 0, [
214
212
  "_icons",
@@ -483,12 +481,12 @@ const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
483
481
  ]);
484
482
  const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
485
483
  "_accessKey",
484
+ "_ariaCurrentValue",
486
485
  "_download",
487
486
  "_hideLabel",
488
487
  "_href",
489
488
  "_icons",
490
489
  "_label",
491
- "_listenAriaCurrent",
492
490
  "_on",
493
491
  "_role",
494
492
  "_tabIndex",
@@ -498,13 +496,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
498
496
  ]);
499
497
  const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
500
498
  "_accessKey",
499
+ "_ariaCurrentValue",
501
500
  "_customClass",
502
501
  "_download",
503
502
  "_hideLabel",
504
503
  "_href",
505
504
  "_icons",
506
505
  "_label",
507
- "_listenAriaCurrent",
508
506
  "_on",
509
507
  "_role",
510
508
  "_tabIndex",
@@ -529,7 +527,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
529
527
  "_width"
530
528
  ]);
531
529
  const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
532
- "_ariaCurrentValue",
533
530
  "_collapsible",
534
531
  "_hasCompactButton",
535
532
  "_hideLabel",
@@ -625,6 +622,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
625
622
  "_symbol"
626
623
  ]);
627
624
  const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
625
+ "_allowMultiSort",
628
626
  "_data",
629
627
  "_dataFoot",
630
628
  "_headers",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/vue",
3
- "version": "2.0.0-rc.9",
3
+ "version": "2.0.0",
4
4
  "license": "EUPL-1.2",
5
5
  "homepage": "https://public-ui.github.io",
6
6
  "repository": "https://github.com/public-ui/kolibri",
@@ -42,18 +42,18 @@
42
42
  "vue"
43
43
  ],
44
44
  "devDependencies": {
45
- "@babel/types": "7.23.0",
46
- "@public-ui/components": "2.0.0-rc.9",
45
+ "@babel/types": "7.23.5",
46
+ "@public-ui/components": "2.0.0",
47
47
  "@types/minimatch": "5.1.2",
48
- "@types/minimist": "1.2.4",
49
- "@types/node": "ts5.1",
50
- "@types/normalize-package-data": "2.4.3",
51
- "typescript": "5.2.2",
48
+ "@types/minimist": "1.2.5",
49
+ "@types/node": "ts5.3",
50
+ "@types/normalize-package-data": "2.4.4",
51
+ "typescript": "5.3.2",
52
52
  "unbuild": "1.2.1",
53
- "vue": "3.3.8"
53
+ "vue": "3.3.9"
54
54
  },
55
55
  "peerDependencies": {
56
- "@public-ui/components": "2.0.0-rc.9",
56
+ "@public-ui/components": "2.0.0",
57
57
  "vue": ">=3"
58
58
  },
59
59
  "sideEffects": false,