feather-k-demo-utils 0.0.43 → 0.0.45

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 (6) hide show
  1. package/lib/{DemoNotes.vue_vue_type_script_setup_true_lang-Ck_Zaihj.js → DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js} +14 -14
  2. package/lib/components/index.es.js +1 -1
  3. package/lib/index.es.js +1 -1
  4. package/lib/styles/demo.css +72 -96
  5. package/lib/utils/index.es.js +1 -1
  6. package/package.json +1 -1
package/lib/{DemoNotes.vue_vue_type_script_setup_true_lang-Ck_Zaihj.js → DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { defineComponent as v, ref as g, computed as c, openBlock as r, createElementBlock as i, normalizeClass as p, createElementVNode as d, toDisplayString as f, createCommentVNode as _, useSlots as m, renderSlot as b, withModifiers as k } from "vue";
1
+ import { defineComponent as v, ref as b, computed as c, openBlock as r, createElementBlock as i, normalizeClass as p, createElementVNode as d, toDisplayString as h, createCommentVNode as _, useSlots as g, renderSlot as m, withModifiers as k } from "vue";
2
2
  const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ = /* @__PURE__ */ v({
3
3
  __name: "DemoStats",
4
4
  props: {
@@ -7,7 +7,7 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
7
7
  active: { type: Boolean }
8
8
  },
9
9
  setup(t) {
10
- const e = g(t.active ?? !1), a = (n) => {
10
+ const e = b(t.active ?? !1), a = (n) => {
11
11
  e.value = !e.value, n && n.stopPropagation();
12
12
  }, s = c(() => ({
13
13
  "demo-stats": !0,
@@ -28,8 +28,8 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
28
28
  type: "button",
29
29
  tabindex: "0"
30
30
  }, " 📊 "),
31
- t.version ? (r(), i("div", x, "using @featherk/styles@" + f(t.version), 1)) : _("", !0),
32
- t.publishDate ? (r(), i("div", S, "Published: " + f(t.publishDate), 1)) : (r(), i("div", C, [...u[0] || (u[0] = [
31
+ t.version ? (r(), i("div", x, "using @featherk/styles@" + h(t.version), 1)) : _("", !0),
32
+ t.publishDate ? (r(), i("div", S, "Published: " + h(t.publishDate), 1)) : (r(), i("div", C, [...u[0] || (u[0] = [
33
33
  d("a", {
34
34
  href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
35
35
  target: "_blank",
@@ -39,18 +39,18 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
39
39
  ])]))
40
40
  ], 10, y)) : _("", !0);
41
41
  }
42
- }), h = (t, l) => {
42
+ }), f = (t, l) => {
43
43
  const e = t.__vccOpts || t;
44
44
  for (const [a, s] of l)
45
45
  e[a] = s;
46
46
  return e;
47
- }, I = /* @__PURE__ */ h($, [["__scopeId", "data-v-92a662c8"]]), B = ["aria-expanded"], A = /* @__PURE__ */ v({
47
+ }, I = /* @__PURE__ */ f($, [["__scopeId", "data-v-af654d7b"]]), B = ["aria-expanded"], A = /* @__PURE__ */ v({
48
48
  __name: "DemoDebug",
49
49
  props: {
50
50
  active: { type: Boolean }
51
51
  },
52
52
  setup(t) {
53
- const e = g(t.active ?? !1), a = m(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = (o) => {
53
+ const e = b(t.active ?? !1), a = g(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = (o) => {
54
54
  e.value = !e.value, o && o.stopPropagation();
55
55
  }, u = c(() => ({
56
56
  "demo-debug": !0,
@@ -71,16 +71,16 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
71
71
  type: "button",
72
72
  tabindex: "0"
73
73
  }, " 🐞 "),
74
- b(o.$slots, "default", {}, void 0, !0)
74
+ m(o.$slots, "default", {}, void 0, !0)
75
75
  ], 10, B));
76
76
  }
77
- }), T = /* @__PURE__ */ h(A, [["__scopeId", "data-v-a887941a"]]), E = ["aria-expanded"], N = /* @__PURE__ */ v({
77
+ }), T = /* @__PURE__ */ f(A, [["__scopeId", "data-v-25eb8f20"]]), E = ["aria-expanded"], N = /* @__PURE__ */ v({
78
78
  __name: "DemoSettings",
79
79
  props: {
80
80
  active: { type: Boolean }
81
81
  },
82
82
  setup(t) {
83
- const e = g(t.active ?? !1), a = m(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = () => {
83
+ const e = b(t.active ?? !1), a = g(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = () => {
84
84
  e.value = !e.value;
85
85
  }, u = c(() => ({
86
86
  "demo-settings": !0,
@@ -100,13 +100,13 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
100
100
  "aria-label": "Toggle Demo Settings",
101
101
  tabindex: "0"
102
102
  }, " ⚙️ "),
103
- b(o.$slots, "default", {}, void 0, !0)
103
+ m(o.$slots, "default", {}, void 0, !0)
104
104
  ], 10, E));
105
105
  }
106
- }), M = /* @__PURE__ */ h(N, [["__scopeId", "data-v-2390c38e"]]), V = /* @__PURE__ */ v({
106
+ }), M = /* @__PURE__ */ f(N, [["__scopeId", "data-v-12ecdff9"]]), V = /* @__PURE__ */ v({
107
107
  __name: "DemoNotes",
108
108
  setup(t) {
109
- const l = m(), e = c(() => !!l.default && l.default({}).some((s) => s.children)), a = c(() => ({
109
+ const l = g(), e = c(() => !!l.default && l.default({}).some((s) => s.children)), a = c(() => ({
110
110
  "demo-notes": !0,
111
111
  "tb-v8_2_0": !0
112
112
  }));
@@ -115,7 +115,7 @@ const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ =
115
115
  class: p(a.value),
116
116
  tabindex: "0"
117
117
  }, [
118
- b(s.$slots, "default")
118
+ m(s.$slots, "default")
119
119
  ], 2)) : _("", !0);
120
120
  }
121
121
  });
package/lib/components/index.es.js CHANGED
@@ -1,4 +1,4 @@
1
- import { D as s, _ as a, a as t, b as D } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Ck_Zaihj.js";
1
+ import { D as s, _ as a, a as t, b as D } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
2
2
  export {
3
3
  s as DemoDebug,
4
4
  a as DemoNotes,
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 { D, _ as E, a as F, b as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-Ck_Zaihj.js";
2
+ import { D, _ as E, a as F, b as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
3
3
  export {
4
4
  D as DemoDebug,
5
5
  E as DemoNotes,
package/lib/styles/demo.css CHANGED
@@ -153,13 +153,15 @@
153
153
  }
154
154
  }
155
155
 
156
- .demo-debug {
156
+ /* #region REFACTOR STYLE */
157
+
158
+ /* #region COMMON */
159
+ .demo-settings,
160
+ .demo-debug,
161
+ .demo-stats {
157
162
  position: fixed;
158
- font-family: var(--kendo-font-family-monospace);
159
- left: var(--kendo-spacing-4);
160
- bottom: var(--kendo-spacing-4);
161
- background-color: var(--kendo-color-light);
162
- color: var(--kendo-color-light);
163
+ background-color: hsl(from var(--kendo-color-light) h s l / 0.95);
164
+ color: hsl(from var(--kendo-color-light) h s l / 0.95);
163
165
  font-size: var(--kendo-font-size-sm);
164
166
  margin: var(--kendo-spacing-2);
165
167
  padding: var(--kendo-spacing-2);
@@ -172,136 +174,108 @@
172
174
  transition: left 0.3s ease;
173
175
  &:hover {
174
176
  background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
175
- color: var(--kendo-color-dark);
176
177
  }
178
+
177
179
  &.active,
178
180
  &:focus-visible {
179
181
  left: -1em;
180
182
  outline-offset: 4px;
181
183
  color: initial;
182
184
  }
183
- /* &:focus-visible {
184
- outline: 2px solid var(--kendo-color-primary-subtle-active);
185
- } */
185
+
186
186
  &::before {
187
- content: "DEBUG";
188
187
  font-weight: bold;
189
188
  font-size: var(--kendo-font-size-lg);
190
189
  display: block;
191
190
  margin-bottom: var(--kendo-spacing-2);
192
191
  }
193
- /* &::after {
194
- content: "🐛";
195
- content: "🐜";
196
- content: "🪳";
197
- content: "🐞";
198
- font-size: var(--kendo-font-size-xl);
199
- color: var(--kendo-color-secondary);
192
+ & .toggle-btn {
200
193
  position: absolute;
201
- top: 0.25em;
202
- right: 0.25em;
203
- display: block;
204
- margin-top: 0;
205
- } */
194
+ top: 0;
195
+ right: 0;
196
+ display: flex;
197
+ justify-content: flex-end;
198
+ border: none;
199
+ cursor: pointer;
200
+ font-size: var(--kendo-font-size-xl);
201
+ height: 100%;
202
+ border-radius: 0 0.25em 0.25em 0;
203
+ width: fit-content;
204
+ }
206
205
  }
206
+ /* #endregion COMMON: */
207
207
 
208
+ /* #region demo-settings override */
208
209
  .demo-settings {
209
- position: fixed;
210
- left: var(--kendo-spacing-4);
211
210
  top: var(--kendo-spacing-4);
212
- background-color: hsl(from var(--kendo-color-light) h s l / 0.95);
213
- color: hsl(from var(--kendo-color-light) h s l / 0.95);
214
- font-size: var(--kendo-font-size-sm);
215
- margin: var(--kendo-spacing-2);
216
- padding: var(--kendo-spacing-2);
217
- padding-left: 2em;
218
- border-radius: var(--kendo-border-radius-md);
219
- width: 28rem;
220
- overflow-wrap: break-word;
221
- word-break: break-word;
222
- left: -26rem;
223
- transition: left 0.3s ease;
224
- &:hover {
225
- background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
211
+ &::before {
212
+ content: "SETTINGS";
226
213
  }
227
-
228
- &.active,
229
- &:focus-visible {
230
- left: -1em;
231
- /* outline: 2px solid var(--kendo-color-primary-emphasis); */
232
- outline-offset: 4px;
233
- color: initial;
214
+ & .toggle-btn {
215
+ background: linear-gradient(
216
+ 28deg,
217
+ hsl(from currentColor h s 95% / 0.5) 60%,
218
+ var(--kendo-color-primary-emphasis) 75%
219
+ );
234
220
  }
221
+ }
222
+ /* #endregion demo-settings override */
235
223
 
224
+ /* #region demo-debug override */
225
+ .demo-debug {
226
+ bottom: var(--kendo-spacing-4);
236
227
  &::before {
237
- content: "SETTINGS";
238
- font-weight: bold;
239
- font-size: var(--kendo-font-size-lg);
240
- display: block;
241
- margin-bottom: var(--kendo-spacing-2);
228
+ content: "DEBUG";
229
+ }
230
+ & .toggle-btn {
231
+ background: linear-gradient(
232
+ 28deg,
233
+ hsl(from currentColor h s 95% / 0.5) 60%,
234
+ var(--kendo-color-primary-subtle-hover) 75%
235
+ );
242
236
  }
243
- /* &::after {
244
- content: "\2699";
245
- content: "⚙️";
246
- font-size: var(--kendo-font-size-xl);
247
- position: absolute;
248
- top: 0.25em;
249
- right: 0.25em;
250
- display: block;
251
- margin-top: 0;
252
- } */
253
237
  }
254
238
 
255
- /* TODO: DemoStats.vue SCOPED STYLES NOT WORKING - moved to demo.css */
239
+ /* #endregion demo-debug override */
240
+
241
+ /* #region demo-stats override */
256
242
  .demo-stats {
257
- position: fixed;
258
243
  text-align: right;
259
244
  bottom: var(--kendo-spacing-4);
260
245
  right: var(--kendo-spacing-4);
261
- background-color: var(--kendo-color-light);
262
- color: var(--kendo-color-light);
263
- font-size: var(--kendo-font-size-sm);
264
- /* color: var(--kendo-color-primary-subtle); */
265
- margin: var(--kendo-spacing-2);
266
- padding: var(--kendo-spacing-2);
246
+ left: auto;
267
247
  padding-right: 2em;
268
- border-radius: var(--kendo-border-radius-md);
269
- width: 28rem;
270
- overflow-wrap: break-word;
271
- word-break: break-word;
272
248
  transition: right 0.3s ease;
273
249
  right: -26rem;
274
- &:hover {
275
- background-color: hsl(from var(--kendo-color-light) h s 85% / 0.9);
250
+
251
+ &::before {
252
+ content: "STATS";
276
253
  }
277
254
  &.active,
278
255
  &:focus-visible {
279
256
  right: -1em;
280
- /* outline: 2px solid var(--kendo-color-primary-emphasis); */
281
- outline-offset: 4px;
282
- color: initial;
283
- }
284
- &::before {
285
- content: "STATS";
286
- font-weight: bold;
287
- font-size: var(--kendo-font-size-lg);
288
- display: block;
289
- margin-bottom: var(--kendo-spacing-2);
290
- /* position: absolute; */
291
- left: 0.5em;
292
- top: 0.25em;
257
+ left: unset;
293
258
  }
294
- /* &::after {
295
- content: "📊";
296
- font-size: var(--kendo-font-size-xl);
259
+
260
+ & .toggle-btn {
297
261
  position: absolute;
298
- top: 0.25em;
299
- left: 0.25em;
300
- display: block;
301
- margin-top: 0;
302
- } */
262
+ top: 0;
263
+ left: 0.125em;
264
+ display: flex;
265
+ justify-content: flex-start;
266
+ border-radius: 0.25em 0 0 0.25em;
267
+ background: linear-gradient(
268
+ 332deg,
269
+ hsl(from currentColor h s 95% / 0.5) 40%,
270
+ var(--kendo-color-primary-emphasis) 55%
271
+ );
272
+ }
303
273
  }
274
+ /* #endregion demo-stats override */
304
275
 
276
+ /* #endregion REFACTOR STYLE: */
277
+
278
+ /* #region PINNED CONTENT */
305
279
  .demo-debug pre,
306
280
  .demo-notes pre,
307
281
  .demo-settings {
@@ -314,6 +288,8 @@
314
288
  white-space: normal;
315
289
  }
316
290
 
291
+ /* #endregion PINNED CONTENT */
292
+
317
293
  .hidden {
318
294
  display: none;
319
295
  }
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 { D, _ as E, a as F, b as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Ck_Zaihj.js";
2
+ import { D, _ as E, a as F, b as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Rm-kVKhJ.js";
3
3
  export {
4
4
  D as DemoDebug,
5
5
  E as DemoNotes,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "feather-k-demo-utils",
3
3
  "private": false,
4
- "version": "0.0.43",
4
+ "version": "0.0.45",
5
5
  "type": "module",
6
6
  "main": "lib/index.es.js",
7
7
  "module": "lib/index.es.js",