feather-k-demo-utils 0.0.38 → 0.0.40
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.
- package/DEMO-UTILS.md +15 -3
- package/lib/DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js +108 -0
- package/lib/components/DemoDebug.vue.d.ts +4 -1
- package/lib/components/DemoSettings.vue.d.ts +4 -1
- package/lib/components/DemoStats.vue.d.ts +1 -0
- package/lib/components/index.es.js +1 -1
- package/lib/index.es.js +1 -1
- package/lib/styles/demo.css +6 -6
- package/lib/utils/index.es.js +1 -1
- package/package.json +1 -1
- package/lib/DemoNotes.vue_vue_type_script_setup_true_lang-hamVxLCB.js +0 -92
package/DEMO-UTILS.md
CHANGED
|
@@ -82,6 +82,7 @@ Notes:
|
|
|
82
82
|
|
|
83
83
|
## 4) Render DemoStats, DemoDebug, and DemoSettings in your app
|
|
84
84
|
|
|
85
|
+
|
|
85
86
|
### DemoStats
|
|
86
87
|
|
|
87
88
|
```vue
|
|
@@ -95,12 +96,16 @@ const version = computed(() => getFeatherkStylesVersionFromUrl(import.meta.env.F
|
|
|
95
96
|
</script>
|
|
96
97
|
|
|
97
98
|
<template>
|
|
98
|
-
<DemoStats v-if="version" :version="version" :publishDate="PUBLISH_DATE" />
|
|
99
|
+
<DemoStats v-if="version" :version="version" :publishDate="PUBLISH_DATE" :active="false" />
|
|
99
100
|
</template>
|
|
100
101
|
```
|
|
101
102
|
|
|
102
103
|
`DemoStats` renders the version and publish date, and links to the demo-utils README if the publish date is missing.
|
|
103
104
|
|
|
105
|
+
- **active prop (optional):** Controls whether the stats panel is open by default. If omitted, defaults to closed. The panel manages its own open/close state after initialization.
|
|
106
|
+
- **Accessibility:** Includes role, aria-label, and aria-expanded attributes for screen readers.
|
|
107
|
+
|
|
108
|
+
|
|
104
109
|
### DemoDebug
|
|
105
110
|
|
|
106
111
|
Collapsible debug panel. Slot content is only shown if provided.
|
|
@@ -112,12 +117,16 @@ const debugInfo = { foo: 'bar', count: 42 };
|
|
|
112
117
|
</script>
|
|
113
118
|
|
|
114
119
|
<template>
|
|
115
|
-
<DemoDebug>
|
|
120
|
+
<DemoDebug :active="false">
|
|
116
121
|
<pre>{{ debugInfo }}</pre>
|
|
117
122
|
</DemoDebug>
|
|
118
123
|
</template>
|
|
119
124
|
```
|
|
120
125
|
|
|
126
|
+
- **active prop (optional):** Controls whether the debug panel is open by default. If omitted, defaults to closed. The panel manages its own open/close state after initialization.
|
|
127
|
+
- **Accessibility:** Includes role, aria-label, and aria-expanded attributes for screen readers.
|
|
128
|
+
|
|
129
|
+
|
|
121
130
|
### DemoSettings
|
|
122
131
|
|
|
123
132
|
Collapsible settings panel. Slot content is only shown if provided.
|
|
@@ -128,12 +137,15 @@ import { DemoSettings } from "feather-k-demo-utils";
|
|
|
128
137
|
</script>
|
|
129
138
|
|
|
130
139
|
<template>
|
|
131
|
-
<DemoSettings>
|
|
140
|
+
<DemoSettings :active="false">
|
|
132
141
|
<div>Settings content here</div>
|
|
133
142
|
</DemoSettings>
|
|
134
143
|
</template>
|
|
135
144
|
```
|
|
136
145
|
|
|
146
|
+
- **active prop (optional):** Controls whether the settings panel is open by default. If omitted, defaults to closed. The panel manages its own open/close state after initialization.
|
|
147
|
+
- **Accessibility:** Includes role, aria-label, and aria-expanded attributes for screen readers.
|
|
148
|
+
|
|
137
149
|
## 5) (Optional) Pin the dependency version
|
|
138
150
|
|
|
139
151
|
```json
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { defineComponent as d, ref as m, computed as r, openBlock as n, createElementBlock as l, normalizeClass as v, toDisplayString as b, createCommentVNode as p, createElementVNode as g, useSlots as _, renderSlot as h } from "vue";
|
|
2
|
+
const D = ["aria-expanded"], k = { key: 0 }, x = { key: 1 }, y = { key: 2 }, B = /* @__PURE__ */ d({
|
|
3
|
+
__name: "DemoStats",
|
|
4
|
+
props: {
|
|
5
|
+
publishDate: {},
|
|
6
|
+
version: {},
|
|
7
|
+
active: { type: Boolean }
|
|
8
|
+
},
|
|
9
|
+
setup(t) {
|
|
10
|
+
const e = m(t.active ?? !1), s = () => {
|
|
11
|
+
e.value = !e.value;
|
|
12
|
+
}, a = r(() => ({
|
|
13
|
+
"demo-stats": !0,
|
|
14
|
+
"tb-v8_2_0": !0,
|
|
15
|
+
active: e.value
|
|
16
|
+
}));
|
|
17
|
+
return (u, i) => t.publishDate || t.version ? (n(), l("div", {
|
|
18
|
+
key: 0,
|
|
19
|
+
class: v(a.value),
|
|
20
|
+
onClick: s,
|
|
21
|
+
tabindex: "0",
|
|
22
|
+
role: "region",
|
|
23
|
+
"aria-label": "Demo Stats",
|
|
24
|
+
"aria-expanded": e.value
|
|
25
|
+
}, [
|
|
26
|
+
t.version ? (n(), l("div", k, "using @featherk/styles@" + b(t.version), 1)) : p("", !0),
|
|
27
|
+
t.publishDate ? (n(), l("div", x, "Published: " + b(t.publishDate), 1)) : (n(), l("div", y, [...i[0] || (i[0] = [
|
|
28
|
+
g("a", {
|
|
29
|
+
href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
|
|
30
|
+
target: "_blank",
|
|
31
|
+
rel: "noopener noreferrer",
|
|
32
|
+
style: { "pointer-events": "auto !important" }
|
|
33
|
+
}, " Setup Publish Date ", -1)
|
|
34
|
+
])]))
|
|
35
|
+
], 10, D)) : p("", !0);
|
|
36
|
+
}
|
|
37
|
+
}), C = ["aria-expanded"], A = /* @__PURE__ */ d({
|
|
38
|
+
__name: "DemoDebug",
|
|
39
|
+
props: {
|
|
40
|
+
active: { type: Boolean }
|
|
41
|
+
},
|
|
42
|
+
setup(t) {
|
|
43
|
+
const e = m(t.active ?? !1), s = _(), a = r(() => !!s.default && s.default({}).some((o) => o.children)), u = () => {
|
|
44
|
+
e.value = !e.value;
|
|
45
|
+
}, i = r(() => ({
|
|
46
|
+
"demo-debug": !0,
|
|
47
|
+
"tb-v8_2_0": !0,
|
|
48
|
+
hidden: !a.value,
|
|
49
|
+
active: e.value
|
|
50
|
+
}));
|
|
51
|
+
return (o, f) => (n(), l("div", {
|
|
52
|
+
class: v(i.value),
|
|
53
|
+
onClick: u,
|
|
54
|
+
tabindex: "0",
|
|
55
|
+
role: "region",
|
|
56
|
+
"aria-label": "Demo Debug",
|
|
57
|
+
"aria-expanded": e.value
|
|
58
|
+
}, [
|
|
59
|
+
h(o.$slots, "default")
|
|
60
|
+
], 10, C));
|
|
61
|
+
}
|
|
62
|
+
}), S = ["aria-expanded"], E = /* @__PURE__ */ d({
|
|
63
|
+
__name: "DemoSettings",
|
|
64
|
+
props: {
|
|
65
|
+
active: { type: Boolean }
|
|
66
|
+
},
|
|
67
|
+
setup(t) {
|
|
68
|
+
const e = m(t.active ?? !1), s = _(), a = r(() => !!s.default && s.default({}).some((o) => o.children)), u = () => {
|
|
69
|
+
e.value = !e.value;
|
|
70
|
+
}, i = r(() => ({
|
|
71
|
+
"demo-settings": !0,
|
|
72
|
+
"tb-v8_2_0": !0,
|
|
73
|
+
hidden: !a.value,
|
|
74
|
+
active: e.value
|
|
75
|
+
}));
|
|
76
|
+
return (o, f) => (n(), l("div", {
|
|
77
|
+
class: v(i.value),
|
|
78
|
+
onClick: u,
|
|
79
|
+
tabindex: "0",
|
|
80
|
+
role: "region",
|
|
81
|
+
"aria-label": "Demo Settings",
|
|
82
|
+
"aria-expanded": e.value
|
|
83
|
+
}, [
|
|
84
|
+
h(o.$slots, "default")
|
|
85
|
+
], 10, S));
|
|
86
|
+
}
|
|
87
|
+
}), N = /* @__PURE__ */ d({
|
|
88
|
+
__name: "DemoNotes",
|
|
89
|
+
setup(t) {
|
|
90
|
+
const c = _(), e = r(() => !!c.default && c.default({}).some((a) => a.children)), s = r(() => ({
|
|
91
|
+
"demo-notes": !0,
|
|
92
|
+
"tb-v8_2_0": !0
|
|
93
|
+
}));
|
|
94
|
+
return (a, u) => e.value ? (n(), l("div", {
|
|
95
|
+
key: 0,
|
|
96
|
+
class: v(s.value),
|
|
97
|
+
tabindex: "0"
|
|
98
|
+
}, [
|
|
99
|
+
h(a.$slots, "default")
|
|
100
|
+
], 2)) : p("", !0);
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
export {
|
|
104
|
+
A as _,
|
|
105
|
+
N as a,
|
|
106
|
+
E as b,
|
|
107
|
+
B as c
|
|
108
|
+
};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
active?: boolean;
|
|
3
|
+
};
|
|
1
4
|
declare function __VLS_template(): {
|
|
2
5
|
attrs: Partial<{}>;
|
|
3
6
|
slots: {
|
|
@@ -7,7 +10,7 @@ declare function __VLS_template(): {
|
|
|
7
10
|
rootEl: HTMLDivElement;
|
|
8
11
|
};
|
|
9
12
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
|
-
declare const __VLS_component: import('vue').DefineComponent<
|
|
13
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
11
14
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
12
15
|
export default _default;
|
|
13
16
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
active?: boolean;
|
|
3
|
+
};
|
|
1
4
|
declare function __VLS_template(): {
|
|
2
5
|
attrs: Partial<{}>;
|
|
3
6
|
slots: {
|
|
@@ -7,7 +10,7 @@ declare function __VLS_template(): {
|
|
|
7
10
|
rootEl: HTMLDivElement;
|
|
8
11
|
};
|
|
9
12
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
10
|
-
declare const __VLS_component: import('vue').DefineComponent<
|
|
13
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
11
14
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
12
15
|
export default _default;
|
|
13
16
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
2
|
publishDate?: string;
|
|
3
3
|
version?: string;
|
|
4
|
+
active?: boolean;
|
|
4
5
|
};
|
|
5
6
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
6
7
|
export default _default;
|
package/lib/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { F as a, a as t, f as o, g as r, b as S } from "./cdnVersion-DGJCb4AH.js";
|
|
2
|
-
import { _ as E, a as D, b as F, c as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-
|
|
2
|
+
import { _ as E, a as D, b as F, c as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js";
|
|
3
3
|
export {
|
|
4
4
|
E as DemoDebug,
|
|
5
5
|
D as DemoNotes,
|
package/lib/styles/demo.css
CHANGED
|
@@ -165,10 +165,10 @@
|
|
|
165
165
|
padding: var(--kendo-spacing-2);
|
|
166
166
|
padding-left: 2em;
|
|
167
167
|
border-radius: var(--kendo-border-radius-md);
|
|
168
|
-
width:
|
|
168
|
+
width: 28rem;
|
|
169
169
|
overflow-wrap: break-word;
|
|
170
170
|
word-break: break-word;
|
|
171
|
-
left: -
|
|
171
|
+
left: -26rem;
|
|
172
172
|
transition: left 0.3s ease;
|
|
173
173
|
&:hover {
|
|
174
174
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
@@ -214,10 +214,10 @@
|
|
|
214
214
|
padding: var(--kendo-spacing-2);
|
|
215
215
|
padding-left: 2em;
|
|
216
216
|
border-radius: var(--kendo-border-radius-md);
|
|
217
|
-
width:
|
|
217
|
+
width: 28rem;
|
|
218
218
|
overflow-wrap: break-word;
|
|
219
219
|
word-break: break-word;
|
|
220
|
-
left: -
|
|
220
|
+
left: -26rem;
|
|
221
221
|
transition: left 0.3s ease;
|
|
222
222
|
&:hover {
|
|
223
223
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
@@ -264,11 +264,11 @@
|
|
|
264
264
|
padding: var(--kendo-spacing-2);
|
|
265
265
|
padding-right: 2em;
|
|
266
266
|
border-radius: var(--kendo-border-radius-md);
|
|
267
|
-
width:
|
|
267
|
+
width: 28rem;
|
|
268
268
|
overflow-wrap: break-word;
|
|
269
269
|
word-break: break-word;
|
|
270
270
|
transition: right 0.3s ease;
|
|
271
|
-
right: -
|
|
271
|
+
right: -26rem;
|
|
272
272
|
&:hover {
|
|
273
273
|
background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
|
|
274
274
|
}
|
package/lib/utils/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { F as a, a as t, f as o, g as r, b as S } from "../cdnVersion-DGJCb4AH.js";
|
|
2
|
-
import { _ as E, a as D, b as F, c as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-
|
|
2
|
+
import { _ as E, a as D, b as F, c as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js";
|
|
3
3
|
export {
|
|
4
4
|
E as DemoDebug,
|
|
5
5
|
D as DemoNotes,
|
package/package.json
CHANGED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
import { defineComponent as c, openBlock as r, createElementBlock as l, toDisplayString as g, createCommentVNode as i, createElementVNode as b, useSlots as d, computed as u, normalizeClass as m, renderSlot as _ } from "vue";
|
|
2
|
-
const h = { key: 0 }, f = { key: 1 }, p = { key: 2 }, D = /* @__PURE__ */ c({
|
|
3
|
-
__name: "DemoStats",
|
|
4
|
-
props: {
|
|
5
|
-
publishDate: {},
|
|
6
|
-
version: {}
|
|
7
|
-
},
|
|
8
|
-
setup(s) {
|
|
9
|
-
const t = () => {
|
|
10
|
-
const n = document.querySelector(".demo-stats");
|
|
11
|
-
n && n.classList.toggle("active");
|
|
12
|
-
};
|
|
13
|
-
return (n, o) => s.publishDate || s.version ? (r(), l("div", {
|
|
14
|
-
key: 0,
|
|
15
|
-
class: "demo-stats tb-v8_2_0 active",
|
|
16
|
-
tabindex: "0",
|
|
17
|
-
role: "region",
|
|
18
|
-
"aria-label": "Demo Stats",
|
|
19
|
-
onClick: t
|
|
20
|
-
}, [
|
|
21
|
-
s.version ? (r(), l("div", h, "using @featherk/styles@" + g(s.version), 1)) : i("", !0),
|
|
22
|
-
s.publishDate ? (r(), l("div", f, "Published: " + g(s.publishDate), 1)) : (r(), l("div", p, [...o[0] || (o[0] = [
|
|
23
|
-
b("a", {
|
|
24
|
-
href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
|
|
25
|
-
target: "_blank",
|
|
26
|
-
rel: "noopener noreferrer",
|
|
27
|
-
style: { "pointer-events": "auto !important" }
|
|
28
|
-
}, " Setup Publish Date ", -1)
|
|
29
|
-
])]))
|
|
30
|
-
])) : i("", !0);
|
|
31
|
-
}
|
|
32
|
-
}), y = /* @__PURE__ */ c({
|
|
33
|
-
__name: "DemoDebug",
|
|
34
|
-
setup(s) {
|
|
35
|
-
const t = d(), n = u(() => !!t.default && t.default({}).some((e) => e.children)), o = () => {
|
|
36
|
-
const e = document.querySelector(".demo-debug");
|
|
37
|
-
e && e.classList.toggle("active");
|
|
38
|
-
}, a = u(() => ({
|
|
39
|
-
"demo-debug": !0,
|
|
40
|
-
"tb-v8_2_0": !0,
|
|
41
|
-
hidden: !n.value
|
|
42
|
-
}));
|
|
43
|
-
return (e, v) => (r(), l("div", {
|
|
44
|
-
class: m(a.value),
|
|
45
|
-
onClick: o,
|
|
46
|
-
tabindex: "0"
|
|
47
|
-
}, [
|
|
48
|
-
_(e.$slots, "default")
|
|
49
|
-
], 2));
|
|
50
|
-
}
|
|
51
|
-
}), S = /* @__PURE__ */ c({
|
|
52
|
-
__name: "DemoSettings",
|
|
53
|
-
setup(s) {
|
|
54
|
-
const t = d(), n = u(() => !!t.default && t.default({}).some((e) => e.children)), o = () => {
|
|
55
|
-
const e = document.querySelector(".demo-settings");
|
|
56
|
-
e && e.classList.toggle("active");
|
|
57
|
-
}, a = u(() => ({
|
|
58
|
-
"demo-settings": !0,
|
|
59
|
-
"tb-v8_2_0": !0,
|
|
60
|
-
hidden: !n.value
|
|
61
|
-
// active: true,
|
|
62
|
-
}));
|
|
63
|
-
return (e, v) => (r(), l("div", {
|
|
64
|
-
class: m(a.value),
|
|
65
|
-
onClick: o,
|
|
66
|
-
tabindex: "0"
|
|
67
|
-
}, [
|
|
68
|
-
_(e.$slots, "default")
|
|
69
|
-
], 2));
|
|
70
|
-
}
|
|
71
|
-
}), C = /* @__PURE__ */ c({
|
|
72
|
-
__name: "DemoNotes",
|
|
73
|
-
setup(s) {
|
|
74
|
-
const t = d(), n = u(() => !!t.default && t.default({}).some((a) => a.children)), o = u(() => ({
|
|
75
|
-
"demo-notes": !0,
|
|
76
|
-
"tb-v8_2_0": !0
|
|
77
|
-
}));
|
|
78
|
-
return (a, e) => n.value ? (r(), l("div", {
|
|
79
|
-
key: 0,
|
|
80
|
-
class: m(o.value),
|
|
81
|
-
tabindex: "0"
|
|
82
|
-
}, [
|
|
83
|
-
_(a.$slots, "default")
|
|
84
|
-
], 2)) : i("", !0);
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
export {
|
|
88
|
-
y as _,
|
|
89
|
-
C as a,
|
|
90
|
-
S as b,
|
|
91
|
-
D as c
|
|
92
|
-
};
|