@code-coaching/vuetiful 0.8.1 → 0.10.0

package/dist/types/utils/theme/theme-switcher.vue.d.ts

@@ -95,12 +95,12 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    rounded: string;
     bgLight: string;
     bgDark: string;
     width: string;
     height: string;
     ring: string;
+    rounded: string;
     textOnLight: string;
     textOnDark: string;
     roundedContainer: string;

package/dist/vuetiful.es.mjs

@@ -1,61 +1,81 @@
-import { defineComponent, useAttrs, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createBlock, resolveDynamicComponent, withCtx, Fragment, createTextVNode, toDisplayString, createCommentVNode, ref, reactive, readonly, toRefs, computed, onMounted, createVNode, Transition, provide, createElementVNode, inject, mergeProps, withDirectives, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
-  __name: "VBadge",
-  setup(__props) {
-    const attrs = useAttrs();
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`vuetiful-badge badge ${(_a = unref(attrs).class) != null ? _a : ""}`)
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
+import { openBlock, createElementBlock, renderSlot, normalizeClass, defineComponent, createBlock, resolveDynamicComponent, withCtx, ref, reactive, readonly, toRefs, computed, onMounted, Fragment, createVNode, Transition, unref, createCommentVNode, provide, createElementVNode, useAttrs, inject, mergeProps, toDisplayString, withDirectives, createTextVNode, resolveComponent, renderList, pushScopeId, popScopeId } from "vue";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
   }
-});
+  return target;
+};
+const _sfc_main$9 = {};
+const _hoisted_1$7 = {
+  class: /* @__PURE__ */ normalizeClass(`vuetiful-badge badge`)
+};
+function _sfc_render$3(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$7, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var VBadge = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$3]]);
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "VButton",
   props: {
+    icon: {
+      type: Boolean,
+      default: false
+    },
     tag: {
       type: String,
       default: "button"
-    },
-    msg: {
-      type: String
     }
   },
-  setup(__props) {
-    const attrs = useAttrs();
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const activate = () => {
+      emit("click");
+    };
+    const clickHandler = (event) => {
+      event.preventDefault();
+      activate();
+    };
+    const keydownHandler = (event) => {
+      if (["Enter", " "].includes(event.key))
+        event.preventDefault();
+      if (event.key === "Enter")
+        activate();
+    };
+    const keyupHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
+    };
     return (_ctx, _cache) => {
-      var _a;
       return openBlock(), createBlock(resolveDynamicComponent(__props.tag), {
-        class: normalizeClass(`vuetiful-button btn border-token hover:cursor-pointer ${(_a = unref(attrs).class) != null ? _a : ""}`)
+        tabindex: "0",
+        role: "button",
+        class: normalizeClass(`vuetiful-button ${__props.icon ? "btn-icon" : "btn"} border-token hover:cursor-pointer`),
+        onClick: clickHandler,
+        onKeydown: keydownHandler,
+        onKeyup: keyupHandler
       }, {
         default: withCtx(() => [
-          __props.msg ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-            createTextVNode(toDisplayString(__props.msg), 1)
-          ], 64)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 8, ["class"]);
-    };
-  }
-});
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "VChip",
-  setup(__props) {
-    const attrs = useAttrs();
-    return (_ctx, _cache) => {
-      var _a;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`vuetiful-chip chip ${(_a = unref(attrs).class) != null ? _a : ""}`)
-      }, [
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
+      }, 40, ["class"]);
     };
   }
 });
+const _sfc_main$7 = {};
+const _hoisted_1$6 = {
+  class: /* @__PURE__ */ normalizeClass(`vuetiful-chip chip`)
+};
+function _sfc_render$2(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", _hoisted_1$6, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+var VChip = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$2]]);
 const selectedRailTile = ref("");
 const useRail = () => {
   return {
@@ -89,7 +109,7 @@ const useDrawer = () => {
     close
   };
 };
-const _hoisted_1$4 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_1$5 = ["aria-labelledby", "aria-describedby"];
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "VDrawer",
   props: {
@@ -113,7 +133,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const { drawer: drawer2, close } = useDrawer();
-    const attrs = useAttrs();
     const { regionBackdrop, regionDrawer, labelledby, describedby } = toRefs(props);
     const presets = {
       top: { alignment: "top-0", width: "w-full", height: "h-[50%]", rounded: "rounded-bl-container-token rounded-br-container-token" },
@@ -155,32 +174,30 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               "aria-describedby": unref(describedby)
             }, [
               renderSlot(_ctx.$slots, "default")
-            ], 10, _hoisted_1$4)) : createCommentVNode("", true)
+            ], 10, _hoisted_1$5)) : createCommentVNode("", true)
           ]),
           _: 3
         }, 8, ["name"]),
         createVNode(Transition, {
           name: `fade-${unref(drawer2).duration}`
         }, {
-          default: withCtx(() => {
-            var _a;
-            return [
-              unref(drawer2).open ? (openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "elemBackdrop",
-                ref: elemBackdrop,
-                class: normalizeClass(`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token ${unref(regionBackdrop)} z-40 ${(_a = unref(attrs).class) != null ? _a : ""}`),
-                onMousedown: onBackdropInteraction,
-                onTouchstart: onBackdropInteraction
-              }, null, 34)) : createCommentVNode("", true)
-            ];
-          }),
+          default: withCtx(() => [
+            unref(drawer2).open ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              ref_key: "elemBackdrop",
+              ref: elemBackdrop,
+              class: normalizeClass(`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token z-40 ${unref(regionBackdrop)}`),
+              onMousedown: onBackdropInteraction,
+              onTouchstart: onBackdropInteraction
+            }, null, 34)) : createCommentVNode("", true)
+          ]),
           _: 1
         }, 8, ["name"])
       ], 64);
     };
   }
 });
+const _hoisted_1$4 = { class: "v-rail grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20" };
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "VRail",
   props: {
@@ -207,13 +224,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const attrs = useAttrs();
     provide("active", props.active);
     provide("hover", props.hover);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["v-rail", `grid h-full w-[70px] grid-rows-[auto_1fr_auto] gap-0 overflow-y-auto sm:w-20 ${unref(attrs).class || ""}`])
-      }, [
+      return openBlock(), createElementBlock("div", _hoisted_1$4, [
         createElementVNode("div", {
           class: normalizeClass(["v-bar-lead", __props.regionLead])
         }, [
@@ -229,7 +243,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         }, [
           renderSlot(_ctx.$slots, "trail")
         ], 2)
-      ], 2);
+      ]);
     };
   }
 });
@@ -264,47 +278,53 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const { selectedRailTile: selectedRailTile2 } = useRail();
     const active = inject("active");
     const hover = inject("hover");
-    const onClickHandler = () => {
-      if (!props.value)
-        return;
+    const activate = () => {
       selectedRailTile2.value = props.value;
       emit("click");
     };
-    const onKeyHandler = (event) => {
-      if (!props.value)
-        return;
-      if (!["Enter", "Space"].includes(event.key))
-        return;
-      selectedRailTile2.value = props.value;
-      emit("click");
+    const clickHandler = (event) => {
+      event.preventDefault();
+      activate();
+    };
+    const keydownHandler = (event) => {
+      if (["Enter", " "].includes(event.key))
+        event.preventDefault();
+      if (event.key === "Enter")
+        activate();
+    };
+    const keyupHandler = (event) => {
+      if (event.key === " ") {
+        event.preventDefault();
+        activate();
+      }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        onClick: onClickHandler,
-        onKeydown: onKeyHandler
-      }, [
-        (openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps(unref(attrs), {
-          class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""} ${unref(attrs).class || ""}`
-        }), {
-          default: withCtx(() => [
-            _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
-            }, [
-              renderSlot(_ctx.$slots, "default")
-            ], 2)) : createCommentVNode("", true),
-            __props.label ? (openBlock(), createElementBlock("div", {
-              key: 1,
-              class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
-            }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 16, ["class"]))
-      ], 32);
+      return openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
+        onClick: clickHandler,
+        onKeydown: keydownHandler,
+        onKeyup: keyupHandler
+      }, unref(attrs), {
+        class: `app-rail-tile unstyled grid aspect-square w-full cursor-pointer place-content-center place-items-center space-y-1.5 ${unref(hover)} ${unref(selectedRailTile2) === __props.value ? `${unref(active)}` : ""}`
+      }), {
+        default: withCtx(() => [
+          _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass(`app-rail-tile-icon ${__props.regionIcon}`)
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 2)) : createCommentVNode("", true),
+          __props.label ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(`app-rail-tile-label text-center text-xs font-bold ${__props.regionLabel}`)
+          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16, ["class"]);
     };
   }
 });
-const _hoisted_1$3 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
+const _hoisted_1$3 = { class: "vuetiful-shell flex h-full w-full flex-col overflow-hidden" };
+const _hoisted_2$3 = { class: "vuetiful-shell-content flex h-full w-full flex-auto overflow-hidden" };
 const _sfc_main$3 = defineComponent({
   __name: "VShell",
   props: {
@@ -318,19 +338,16 @@ const _sfc_main$3 = defineComponent({
     slotFixedFooter: { type: String, default: "" }
   },
   setup(__props) {
-    const attrs = useAttrs();
     return (_ctx, _cache) => {
-      var _a, _b;
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(`vuetiful-shell flex h-full w-full flex-col overflow-hidden ${(_a = unref(attrs).class) != null ? _a : ""}`)
-      }, [
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
         _ctx.$slots.fixedHeader ? (openBlock(), createElementBlock("header", {
           key: 0,
           class: normalizeClass(`vuetiful-fixed-header ${__props.slotFixedHeader}`)
         }, [
           renderSlot(_ctx.$slots, "fixedHeader")
         ], 2)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_1$3, [
+        createElementVNode("div", _hoisted_2$3, [
           _ctx.$slots.sidebarLeft ? (openBlock(), createElementBlock("aside", {
             key: 0,
             class: normalizeClass(`vuetiful-sidebar-left overflow-y-auto overflow-x-hidden ${__props.slotSidebarLeft}`)
@@ -338,7 +355,7 @@ const _sfc_main$3 = defineComponent({
             renderSlot(_ctx.$slots, "sidebarLeft")
           ], 2)) : createCommentVNode("", true),
           createElementVNode("div", {
-            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_b = __props.regionPage) != null ? _b : ""}`)
+            class: normalizeClass(`vuetiful-page flex flex-1 flex-col overflow-x-hidden ${(_a = __props.regionPage) != null ? _a : ""}`)
           }, [
             _ctx.$slots.pageHeader ? (openBlock(), createElementBlock("header", {
               key: 0,
@@ -371,7 +388,7 @@ const _sfc_main$3 = defineComponent({
         }, [
           renderSlot(_ctx.$slots, "fixedFooter")
         ], 2)) : createCommentVNode("", true)
-      ], 2);
+      ]);
     };
   }
 });
@@ -383,8 +400,8 @@ var components = /* @__PURE__ */ Object.freeze({
   VRailTile: _sfc_main$4,
   VShell: _sfc_main$3,
   VDrawer: _sfc_main$6,
-  VBadge: _sfc_main$9,
-  VChip: _sfc_main$7
+  VBadge,
+  VChip
 });
 var main = "";
 var tailwind = "";
@@ -46728,7 +46745,7 @@ const useHighlight = () => {
     highlight: highlight2
   };
 };
-const _hoisted_1$2 = { key: 0 };
+const _hoisted_1$2 = { class: "code-block bg-neutral-900/90 text-sm text-white shadow rounded-container-token" };
 const _hoisted_2$2 = {
   class: /* @__PURE__ */ normalizeClass(`code-block-language`)
 };
@@ -46744,39 +46761,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       type: String,
       default: ""
     },
-    background: {
-      type: String,
-      default: "bg-neutral-900/90"
-    },
-    blur: {
-      type: String,
-      default: ""
-    },
-    text: {
-      type: String,
-      default: "text-sm"
-    },
-    color: {
-      type: String,
-      default: "text-white"
-    },
-    rounded: {
-      type: String,
-      default: "rounded-container-token"
+    headerClass: {
+      type: String
     },
-    shadow: {
-      type: String,
-      default: "shadow"
+    preClass: {
+      type: String
     },
-    button: {
+    buttonClass: {
       type: String,
       default: "btn btn-sm variant-soft !text-white"
     },
-    buttonLabel: {
+    buttonText: {
       type: String,
       default: "Copy"
     },
-    buttonCopied: {
+    buttonCopiedText: {
       type: String,
       default: "\u{1F44D}"
     }
@@ -46785,10 +46784,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   setup(__props, { emit }) {
     const props = __props;
     const { highlight: highlight2 } = useHighlight();
-    const attrs = useAttrs();
-    const cBase = "overflow-hidden shadow";
-    const cHeader = "text-xs text-white/50 uppercase flex justify-between items-center p-2 pl-4 pb-0";
-    const cPre = "whitespace-pre-wrap break-all p-4 pt-1";
     const copyState = ref(false);
     function languageFormatter(lang) {
       if (lang === "js")
@@ -46806,41 +46801,30 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }, 2e3);
       emit("copy");
     }
-    const classesBase = computed(
-      () => {
-        var _a;
-        return `${cBase} ${props.background} ${props.blur} ${props.text} ${props.color} ${props.rounded} ${props.shadow} ${(_a = attrs.class) != null ? _a : ""}`;
-      }
-    );
     return (_ctx, _cache) => {
-      return __props.language && __props.code ? (openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createElementVNode("div", {
-          class: normalizeClass(`code-block ${unref(classesBase)}`),
-          "data-testid": "code-block"
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
+        createElementVNode("header", {
+          class: normalizeClass(`code-block-header flex items-center justify-between p-2 pb-0 pl-4 text-xs uppercase text-white/50 ${__props.headerClass}`)
         }, [
-          createElementVNode("header", {
-            class: normalizeClass(`code-block-header ${cHeader}`)
-          }, [
-            createElementVNode("span", _hoisted_2$2, toDisplayString(languageFormatter(__props.language)), 1),
-            withDirectives((openBlock(), createElementBlock("button", {
-              class: normalizeClass(`code-block-btn ${__props.button}`),
-              onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
-            }, [
-              createTextVNode(toDisplayString(!copyState.value ? __props.buttonLabel : __props.buttonCopied), 1)
-            ], 2)), [
-              [unref(clipboard), props.code]
-            ])
-          ], 2),
-          createElementVNode("pre", {
-            class: normalizeClass(`code-block-pre ${cPre}`)
+          createElementVNode("span", _hoisted_2$2, toDisplayString(languageFormatter(__props.language)), 1),
+          withDirectives((openBlock(), createElementBlock("button", {
+            class: normalizeClass(`code-block-btn ${__props.buttonClass}`),
+            onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
           }, [
-            createElementVNode("code", {
-              class: normalizeClass(`code-block-code language-${__props.language}`),
-              innerHTML: unref(highlight2)(props.code, props.language)
-            }, null, 10, _hoisted_3$1)
-          ], 2)
+            createTextVNode(toDisplayString(!copyState.value ? __props.buttonText : __props.buttonCopiedText), 1)
+          ], 2)), [
+            [unref(clipboard), props.code]
+          ])
+        ], 2),
+        createElementVNode("pre", {
+          class: normalizeClass(`code-block-pre whitespace-pre-wrap break-all p-4 pt-1 ${__props.preClass}`)
+        }, [
+          createElementVNode("code", {
+            class: normalizeClass(`code-block-code language-${__props.language}`),
+            innerHTML: unref(highlight2)(props.code, props.language)
+          }, null, 10, _hoisted_3$1)
         ], 2)
-      ])) : createCommentVNode("", true);
+      ]);
     };
   }
 });
@@ -46930,13 +46914,6 @@ const useDarkMode = () => {
     MODE
   };
 };
-var _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
 const _sfc_main$1 = defineComponent({
   props: {
     bgLight: {
@@ -47307,4 +47284,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, _sfc_main$9 as VBadge, _sfc_main$8 as VButton, _sfc_main$7 as VChip, _sfc_main$6 as VDrawer, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };
+export { _sfc_main$2 as CodeBlock, DarkModeSwitch, themeSwitcher as ThemeSwitcher, VBadge, _sfc_main$8 as VButton, VChip, _sfc_main$6 as VDrawer, _sfc_main$5 as VRail, _sfc_main$4 as VRailTile, _sfc_main$3 as VShell, index as default, useDarkMode, useDrawer, useRail, useTheme, clipboard as vClipboard };