@public-ui/vue 2.0.0-rc.11 → 2.0.0-rc.13

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 +8 -11
  3. package/dist/index.mjs +9 -12
  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;
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@public-ui/vue",
3
- "version": "2.0.0-rc.11",
3
+ "version": "2.0.0-rc.13",
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.11",
45
+ "@babel/types": "7.23.5",
46
+ "@public-ui/components": "2.0.0-rc.13",
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.11",
56
+ "@public-ui/components": "2.0.0-rc.13",
57
57
  "vue": ">=3"
58
58
  },
59
59
  "sideEffects": false,