feather-k-demo-utils 0.0.42 → 0.0.44

package/lib/DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js

@@ -0,0 +1,127 @@
+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";
+const y = ["aria-expanded"], x = { key: 0 }, S = { key: 1 }, C = { key: 2 }, $ = /* @__PURE__ */ v({
+  __name: "DemoStats",
+  props: {
+    publishDate: {},
+    version: {},
+    active: { type: Boolean }
+  },
+  setup(t) {
+    const e = b(t.active ?? !1), a = (n) => {
+      e.value = !e.value, n && n.stopPropagation();
+    }, s = c(() => ({
+      "demo-stats": !0,
+      "tb-v8_2_0": !0,
+      active: e.value
+    }));
+    return (n, u) => t.publishDate || t.version ? (r(), i("div", {
+      key: 0,
+      class: p(s.value),
+      role: "region",
+      "aria-label": "Demo Stats",
+      "aria-expanded": e.value
+    }, [
+      d("button", {
+        class: "toggle-btn",
+        onClick: a,
+        "aria-label": "Toggle Stats",
+        type: "button",
+        tabindex: "0"
+      }, " 📊 "),
+      t.version ? (r(), i("div", x, "using @featherk/styles@" + h(t.version), 1)) : _("", !0),
+      t.publishDate ? (r(), i("div", S, "Published: " + h(t.publishDate), 1)) : (r(), i("div", C, [...u[0] || (u[0] = [
+        d("a", {
+          href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          style: { "pointer-events": "auto !important" }
+        }, " Setup Publish Date ", -1)
+      ])]))
+    ], 10, y)) : _("", !0);
+  }
+}), f = (t, l) => {
+  const e = t.__vccOpts || t;
+  for (const [a, s] of l)
+    e[a] = s;
+  return e;
+}, I = /* @__PURE__ */ f($, [["__scopeId", "data-v-af654d7b"]]), B = ["aria-expanded"], A = /* @__PURE__ */ v({
+  __name: "DemoDebug",
+  props: {
+    active: { type: Boolean }
+  },
+  setup(t) {
+    const e = b(t.active ?? !1), a = g(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = (o) => {
+      e.value = !e.value, o && o.stopPropagation();
+    }, u = c(() => ({
+      "demo-debug": !0,
+      "tb-v8_2_0": !0,
+      hidden: !s.value,
+      active: e.value
+    }));
+    return (o, D) => (r(), i("div", {
+      class: p(u.value),
+      role: "region",
+      "aria-label": "Demo Debug",
+      "aria-expanded": e.value
+    }, [
+      d("button", {
+        class: "toggle-btn",
+        onClick: n,
+        "aria-label": "Toggle Debug",
+        type: "button",
+        tabindex: "0"
+      }, " 🐞 "),
+      m(o.$slots, "default", {}, void 0, !0)
+    ], 10, B));
+  }
+}), T = /* @__PURE__ */ f(A, [["__scopeId", "data-v-2cfcbdc1"]]), E = ["aria-expanded"], N = /* @__PURE__ */ v({
+  __name: "DemoSettings",
+  props: {
+    active: { type: Boolean }
+  },
+  setup(t) {
+    const e = b(t.active ?? !1), a = g(), s = c(() => !!a.default && a.default({}).some((o) => o.children)), n = () => {
+      e.value = !e.value;
+    }, u = c(() => ({
+      "demo-settings": !0,
+      "tb-v8_2_0": !0,
+      hidden: !s.value,
+      active: e.value
+    }));
+    return (o, D) => (r(), i("div", {
+      class: p(u.value),
+      role: "region",
+      "aria-label": "Demo Settings",
+      "aria-expanded": e.value
+    }, [
+      d("button", {
+        class: "toggle-btn",
+        onClick: k(n, ["stop"]),
+        "aria-label": "Toggle Demo Settings",
+        tabindex: "0"
+      }, " ⚙️ "),
+      m(o.$slots, "default", {}, void 0, !0)
+    ], 10, E));
+  }
+}), M = /* @__PURE__ */ f(N, [["__scopeId", "data-v-12ecdff9"]]), V = /* @__PURE__ */ v({
+  __name: "DemoNotes",
+  setup(t) {
+    const l = g(), e = c(() => !!l.default && l.default({}).some((s) => s.children)), a = c(() => ({
+      "demo-notes": !0,
+      "tb-v8_2_0": !0
+    }));
+    return (s, n) => e.value ? (r(), i("div", {
+      key: 0,
+      class: p(a.value),
+      tabindex: "0"
+    }, [
+      m(s.$slots, "default")
+    ], 2)) : _("", !0);
+  }
+});
+export {
+  T as D,
+  V as _,
+  M as a,
+  I as b
+};

package/lib/components/index.es.js

@@ -1,7 +1,7 @@
-import { _ as s, a, b as t, c as m } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js";
+import { D as s, _ as a, a as t, b as D } from "../DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
 export {
   s as DemoDebug,
   a as DemoNotes,
   t as DemoSettings,
-  m as DemoStats
+  D as DemoStats
 };

package/lib/index.es.js

@@ -1,8 +1,8 @@
 import { F as a, a as t, f as o, g as r, b as S } from "./cdnVersion-DGJCb4AH.js";
-import { _ as E, a as D, b as F, c as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js";
+import { D, _ as E, a as F, b as _ } from "./DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
 export {
-  E as DemoDebug,
-  D as DemoNotes,
+  D as DemoDebug,
+  E as DemoNotes,
   F as DemoSettings,
   _ as DemoStats,
   a as FEATHERK_STYLES_CDN_URL,

package/lib/styles/demo.css

@@ -177,10 +177,12 @@
   &.active,
   &:focus-visible {
     left: -1em;
-    outline: 2px solid var(--kendo-color-primary-subtle-active);
     outline-offset: 4px;
     color: initial;
   }
+  /* &:focus-visible {
+    outline: 2px solid var(--kendo-color-primary-subtle-active);
+  } */
   &::before {
     content: "DEBUG";
     font-weight: bold;
@@ -188,7 +190,7 @@
     display: block;
     margin-bottom: var(--kendo-spacing-2);
   }
-  &::after {
+  /* &::after {
     content: "🐛";
     content: "🐜";
     content: "🪳";
@@ -200,6 +202,18 @@
     right: 0.25em;
     display: block;
     margin-top: 0;
+  } */
+  & .toggle-btn {
+    position: absolute;
+    top: 0.25em;
+    right: 0.25em;
+    font-size: var(--kendo-font-size-xl);
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--kendo-color-secondary);
+    padding: 0;
+    margin: 0;
   }
 }
 
@@ -226,7 +240,7 @@
   &.active,
   &:focus-visible {
     left: -1em;
-    outline: 2px solid var(--kendo-color-primary-emphasis);
+    /* outline: 2px solid var(--kendo-color-primary-emphasis); */
     outline-offset: 4px;
     color: initial;
   }
@@ -238,7 +252,7 @@
     display: block;
     margin-bottom: var(--kendo-spacing-2);
   }
-  &::after {
+  /* &::after {
     content: "\2699";
     content: "⚙️";
     font-size: var(--kendo-font-size-xl);
@@ -247,6 +261,23 @@
     right: 0.25em;
     display: block;
     margin-top: 0;
+  } */
+  & .toggle-btn {
+    position: absolute;
+    top: 0;
+    right: 0.125em;
+    display: flex;
+    justify-content: flex-end;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    height: 100%;
+    border-radius: 0 0.25em 0.25em 0;
+    background: linear-gradient(
+      28deg,
+      hsl(from currentColor h s 95% / 0.5) 60%,
+      var(--kendo-color-primary-emphasis) 75%
+    );
   }
 }
 
@@ -275,7 +306,7 @@
   &.active,
   &:focus-visible {
     right: -1em;
-    outline: 2px solid var(--kendo-color-primary-emphasis);
+    /* outline: 2px solid var(--kendo-color-primary-emphasis); */
     outline-offset: 4px;
     color: initial;
   }
@@ -289,7 +320,7 @@
     left: 0.5em;
     top: 0.25em;
   }
-  &::after {
+  /* &::after {
     content: "📊";
     font-size: var(--kendo-font-size-xl);
     position: absolute;
@@ -297,6 +328,24 @@
     left: 0.25em;
     display: block;
     margin-top: 0;
+  } */
+
+  & .toggle-btn {
+    position: absolute;
+    top: 0;
+    left: 0.125em;
+    display: flex;
+    justify-content: flex-end;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    height: 100%;
+    border-radius: 0 0.25em 0.25em 0;
+    background: linear-gradient(
+      315deg,
+      hsl(from currentColor h s 95% / 0.5) 40%,
+      var(--kendo-color-primary-subtle-hover) 55%
+    );
   }
 }
 

package/lib/utils/index.es.js

@@ -1,8 +1,8 @@
 import { F as a, a as t, f as o, g as r, b as S } from "../cdnVersion-DGJCb4AH.js";
-import { _ as E, a as D, b as F, c as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js";
+import { D, _ as E, a as F, b as _ } from "../DemoNotes.vue_vue_type_script_setup_true_lang-CkAIcxaN.js";
 export {
-  E as DemoDebug,
-  D as DemoNotes,
+  D as DemoDebug,
+  E as DemoNotes,
   F as DemoSettings,
   _ as DemoStats,
   a as FEATHERK_STYLES_CDN_URL,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "feather-k-demo-utils",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "main": "lib/index.es.js",
   "module": "lib/index.es.js",

package/lib/DemoNotes.vue_vue_type_script_setup_true_lang-Db3MeRJb.js

@@ -1,108 +0,0 @@
-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";
-const D = ["aria-expanded"], k = { key: 0 }, x = { key: 1 }, y = { key: 2 }, B = /* @__PURE__ */ d({
-  __name: "DemoStats",
-  props: {
-    publishDate: {},
-    version: {},
-    active: { type: Boolean }
-  },
-  setup(t) {
-    const e = m(t.active ?? !1), s = () => {
-      e.value = !e.value;
-    }, a = r(() => ({
-      "demo-stats": !0,
-      "tb-v8_2_0": !0,
-      active: e.value
-    }));
-    return (u, i) => t.publishDate || t.version ? (n(), l("div", {
-      key: 0,
-      class: v(a.value),
-      onClick: s,
-      tabindex: "0",
-      role: "region",
-      "aria-label": "Demo Stats",
-      "aria-expanded": e.value
-    }, [
-      t.version ? (n(), l("div", k, "using @featherk/styles@" + b(t.version), 1)) : p("", !0),
-      t.publishDate ? (n(), l("div", x, "Published: " + b(t.publishDate), 1)) : (n(), l("div", y, [...i[0] || (i[0] = [
-        g("a", {
-          href: "https://github.com/NantHealth/feather-k-demo-utils/blob/integration/README.md",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { "pointer-events": "auto !important" }
-        }, " Setup Publish Date ", -1)
-      ])]))
-    ], 10, D)) : p("", !0);
-  }
-}), C = ["aria-expanded"], A = /* @__PURE__ */ d({
-  __name: "DemoDebug",
-  props: {
-    active: { type: Boolean }
-  },
-  setup(t) {
-    const e = m(t.active ?? !1), s = _(), a = r(() => !!s.default && s.default({}).some((o) => o.children)), u = () => {
-      e.value = !e.value;
-    }, i = r(() => ({
-      "demo-debug": !0,
-      "tb-v8_2_0": !0,
-      hidden: !a.value,
-      active: e.value
-    }));
-    return (o, f) => (n(), l("div", {
-      class: v(i.value),
-      onClick: u,
-      tabindex: "0",
-      role: "region",
-      "aria-label": "Demo Debug",
-      "aria-expanded": e.value
-    }, [
-      h(o.$slots, "default")
-    ], 10, C));
-  }
-}), S = ["aria-expanded"], E = /* @__PURE__ */ d({
-  __name: "DemoSettings",
-  props: {
-    active: { type: Boolean }
-  },
-  setup(t) {
-    const e = m(t.active ?? !1), s = _(), a = r(() => !!s.default && s.default({}).some((o) => o.children)), u = () => {
-      e.value = !e.value;
-    }, i = r(() => ({
-      "demo-settings": !0,
-      "tb-v8_2_0": !0,
-      hidden: !a.value,
-      active: e.value
-    }));
-    return (o, f) => (n(), l("div", {
-      class: v(i.value),
-      onClick: u,
-      tabindex: "0",
-      role: "region",
-      "aria-label": "Demo Settings",
-      "aria-expanded": e.value
-    }, [
-      h(o.$slots, "default")
-    ], 10, S));
-  }
-}), N = /* @__PURE__ */ d({
-  __name: "DemoNotes",
-  setup(t) {
-    const c = _(), e = r(() => !!c.default && c.default({}).some((a) => a.children)), s = r(() => ({
-      "demo-notes": !0,
-      "tb-v8_2_0": !0
-    }));
-    return (a, u) => e.value ? (n(), l("div", {
-      key: 0,
-      class: v(s.value),
-      tabindex: "0"
-    }, [
-      h(a.$slots, "default")
-    ], 2)) : p("", !0);
-  }
-});
-export {
-  A as _,
-  N as a,
-  E as b,
-  B as c
-};