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

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 -16
  3. package/dist/index.mjs +14 -17
  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",
@@ -479,18 +477,17 @@ const KolInputText = /* @__PURE__ */ defineContainer("kol-input-text", void 0, [
479
477
  "_value"
480
478
  ]);
481
479
  const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
482
- "_animate",
483
480
  "_color",
484
481
  "_labeled"
485
482
  ]);
486
483
  const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
487
484
  "_accessKey",
485
+ "_ariaCurrentValue",
488
486
  "_download",
489
487
  "_hideLabel",
490
488
  "_href",
491
489
  "_icons",
492
490
  "_label",
493
- "_listenAriaCurrent",
494
491
  "_on",
495
492
  "_role",
496
493
  "_tabIndex",
@@ -500,13 +497,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
500
497
  ]);
501
498
  const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
502
499
  "_accessKey",
500
+ "_ariaCurrentValue",
503
501
  "_customClass",
504
502
  "_download",
505
503
  "_hideLabel",
506
504
  "_href",
507
505
  "_icons",
508
506
  "_label",
509
- "_listenAriaCurrent",
510
507
  "_on",
511
508
  "_role",
512
509
  "_tabIndex",
@@ -531,7 +528,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
531
528
  "_width"
532
529
  ]);
533
530
  const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
534
- "_ariaCurrentValue",
535
531
  "_collapsible",
536
532
  "_hasCompactButton",
537
533
  "_hideLabel",
@@ -627,6 +623,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
627
623
  "_symbol"
628
624
  ]);
629
625
  const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
626
+ "_allowMultiSort",
630
627
  "_data",
631
628
  "_dataFoot",
632
629
  "_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",
@@ -477,18 +475,17 @@ const KolInputText = /* @__PURE__ */ defineContainer("kol-input-text", void 0, [
477
475
  "_value"
478
476
  ]);
479
477
  const KolKolibri = /* @__PURE__ */ defineContainer("kol-kolibri", void 0, [
480
- "_animate",
481
478
  "_color",
482
479
  "_labeled"
483
480
  ]);
484
481
  const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
485
482
  "_accessKey",
483
+ "_ariaCurrentValue",
486
484
  "_download",
487
485
  "_hideLabel",
488
486
  "_href",
489
487
  "_icons",
490
488
  "_label",
491
- "_listenAriaCurrent",
492
489
  "_on",
493
490
  "_role",
494
491
  "_tabIndex",
@@ -498,13 +495,13 @@ const KolLink = /* @__PURE__ */ defineContainer("kol-link", void 0, [
498
495
  ]);
499
496
  const KolLinkButton = /* @__PURE__ */ defineContainer("kol-link-button", void 0, [
500
497
  "_accessKey",
498
+ "_ariaCurrentValue",
501
499
  "_customClass",
502
500
  "_download",
503
501
  "_hideLabel",
504
502
  "_href",
505
503
  "_icons",
506
504
  "_label",
507
- "_listenAriaCurrent",
508
505
  "_on",
509
506
  "_role",
510
507
  "_tabIndex",
@@ -529,7 +526,6 @@ const KolModal = /* @__PURE__ */ defineContainer("kol-modal", void 0, [
529
526
  "_width"
530
527
  ]);
531
528
  const KolNav = /* @__PURE__ */ defineContainer("kol-nav", void 0, [
532
- "_ariaCurrentValue",
533
529
  "_collapsible",
534
530
  "_hasCompactButton",
535
531
  "_hideLabel",
@@ -625,6 +621,7 @@ const KolSymbol = /* @__PURE__ */ defineContainer("kol-symbol", void 0, [
625
621
  "_symbol"
626
622
  ]);
627
623
  const KolTable = /* @__PURE__ */ defineContainer("kol-table", void 0, [
624
+ "_allowMultiSort",
628
625
  "_data",
629
626
  "_dataFoot",
630
627
  "_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.1",
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.6",
46
+ "@public-ui/components": "2.0.1",
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.3",
52
52
  "unbuild": "1.2.1",
53
- "vue": "3.3.8"
53
+ "vue": "3.3.12"
54
54
  },
55
55
  "peerDependencies": {
56
- "@public-ui/components": "2.0.0-rc.9",
56
+ "@public-ui/components": "2.0.1",
57
57
  "vue": ">=3"
58
58
  },
59
59
  "sideEffects": false,