@code-coaching/vuetiful 0.23.0 → 0.23.1

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

@@ -1,109 +1,69 @@
 import { CssClasses } from "@/index";
 declare const _default: import("vue").DefineComponent<{
-    bgLight: {
+    background: {
         type: () => CssClasses;
         default: string;
     };
-    bgDark: {
+    text: {
         type: () => CssClasses;
         default: string;
     };
-    textOnLight: {
+    widthPopup: {
         type: () => CssClasses;
         default: string;
     };
-    textOnDark: {
+    heightList: {
         type: () => CssClasses;
         default: string;
     };
-    width: {
+    classButton: {
         type: () => CssClasses;
         default: string;
     };
-    height: {
+    classList: {
         type: () => CssClasses;
         default: string;
     };
-    ring: {
+    classListItem: {
         type: () => CssClasses;
         default: string;
     };
-    rounded: {
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    background: {
         type: () => CssClasses;
         default: string;
     };
-    roundedContainer: {
+    text: {
         type: () => CssClasses;
         default: string;
     };
-    buttonClasses: {
+    widthPopup: {
         type: () => CssClasses;
         default: string;
     };
-}, {
-    onKeyDown: (event: KeyboardEvent) => void;
-    loadTheme: (themeName: string, callback?: Function | undefined) => void;
-    currentMode: Readonly<import("vue").Ref<boolean>>;
-    classes: import("vue").ComputedRef<string>;
-    chosenTheme: Readonly<import("vue").Ref<string>>;
-    themes: Readonly<import("vue").Ref<readonly {
-        readonly name: string;
-        readonly url: string;
-    }[]>>;
-    showPopup: import("vue").Ref<boolean>;
-    listClasses: import("vue").ComputedRef<string>;
-    listItemClasses: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    bgLight: {
+    heightList: {
         type: () => CssClasses;
         default: string;
     };
-    bgDark: {
+    classButton: {
         type: () => CssClasses;
         default: string;
     };
-    textOnLight: {
+    classList: {
         type: () => CssClasses;
         default: string;
     };
-    textOnDark: {
-        type: () => CssClasses;
-        default: string;
-    };
-    width: {
-        type: () => CssClasses;
-        default: string;
-    };
-    height: {
-        type: () => CssClasses;
-        default: string;
-    };
-    ring: {
-        type: () => CssClasses;
-        default: string;
-    };
-    rounded: {
-        type: () => CssClasses;
-        default: string;
-    };
-    roundedContainer: {
-        type: () => CssClasses;
-        default: string;
-    };
-    buttonClasses: {
+    classListItem: {
         type: () => CssClasses;
         default: string;
     };
 }>>, {
-    bgLight: string;
-    bgDark: string;
-    width: string;
-    height: string;
-    ring: string;
-    rounded: string;
-    textOnLight: string;
-    textOnDark: string;
-    roundedContainer: string;
-    buttonClasses: string;
+    background: string;
+    text: string;
+    classButton: string;
+    widthPopup: string;
+    heightList: string;
+    classList: string;
+    classListItem: string;
 }>;
 export default _default;

package/dist/vuetiful.es.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs, resolveComponent } from "vue";
+import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, onMounted, Fragment, cloneVNode, h as h$1, inject, provide, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs } from "vue";
 const Variant = {
   Filled: "filled",
   FilledPrimary: "filled-primary",
@@ -46881,7 +46881,7 @@ const _sfc_main$u = defineComponent({
 });
 const _hoisted_1$a = ["aria-checked", "title"];
 const _hoisted_2$6 = ["d"];
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
@@ -46910,7 +46910,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ], 42, _hoisted_1$a);
 }
-var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$1]]);
+var VLightSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render]]);
 function u$2(r2, n2, ...a2) {
   if (r2 in n2) {
     let e2 = n2[r2];
@@ -48446,21 +48446,21 @@ const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ create
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z" })
 ], -1));
-const _hoisted_4$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_4$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 640 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z" })
 ], -1));
-const _hoisted_5$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_5$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 384 512"
 }, [
   /* @__PURE__ */ createElementVNode("path", { d: "M16 64C16 28.7 44.7 0 80 0H304c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H80c-35.3 0-64-28.7-64-64V64zM144 448c0 8.8 7.2 16 16 16h64c8.8 0 16-7.2 16-16s-7.2-16-16-16H160c-8.8 0-16 7.2-16 16zM304 64H80V384H304V64z" })
 ], -1));
-const _hoisted_6$2 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
+const _hoisted_6$1 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 576 512"
@@ -48573,7 +48573,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "code-item", {}, () => [
-                      _hoisted_4$2
+                      _hoisted_4$1
                     ], true)
                   ]),
                   _: 3
@@ -48594,7 +48594,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "mobile-item", {}, () => [
-                      _hoisted_5$2
+                      _hoisted_5$1
                     ], true)
                   ]),
                   _: 3
@@ -48602,7 +48602,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                 createVNode(unref(_sfc_main$r), { value: "full" }, {
                   default: withCtx(() => [
                     renderSlot(_ctx.$slots, "desktop-item", {}, () => [
-                      _hoisted_6$2
+                      _hoisted_6$1
                     ], true)
                   ]),
                   _: 3
@@ -49425,15 +49425,15 @@ const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createEl
 const _hoisted_3$1 = [
   _hoisted_2$1
 ];
-const _hoisted_4$1 = {
+const _hoisted_4 = {
   key: 1,
   class: "icon",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 512 512"
 };
-const _hoisted_5$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }, null, -1));
-const _hoisted_6$1 = [
-  _hoisted_5$1
+const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" }, null, -1));
+const _hoisted_6 = [
+  _hoisted_5
 ];
 const _hoisted_7 = {
   key: 2,
@@ -49532,7 +49532,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           _ctx.$slots.pre ? renderSlot(_ctx.$slots, "pre", { key: 0 }, void 0, true) : createCommentVNode("", true),
           !_ctx.$slots.pre ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
             __props.type === "info" ? (openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$1)) : createCommentVNode("", true),
-            __props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_4$1, _hoisted_6$1)) : createCommentVNode("", true),
+            __props.type === "success" ? (openBlock(), createElementBlock("svg", _hoisted_4, _hoisted_6)) : createCommentVNode("", true),
             __props.type === "warning" ? (openBlock(), createElementBlock("svg", _hoisted_7, _hoisted_9)) : createCommentVNode("", true),
             __props.type === "error" ? (openBlock(), createElementBlock("svg", _hoisted_10, _hoisted_12)) : createCommentVNode("", true)
           ], 64)) : createCommentVNode("", true)
@@ -49858,149 +49858,87 @@ var components = /* @__PURE__ */ Object.freeze({
 });
 var main = "";
 var tailwind = "";
-const _sfc_main = defineComponent({
-  components: {
-    VLightSwitch,
-    VButton: _sfc_main$w
-  },
+const _hoisted_1 = { class: "vuetiful-theme-switcher" };
+const _hoisted_2 = { class: "flex items-center justify-between" };
+const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "text-lg" }, "Mode", -1);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "theme-switcher",
   props: {
-    bgLight: {
-      type: String,
-      default: "bg-surface-50"
-    },
-    bgDark: {
-      type: String,
-      default: "bg-surface-900"
-    },
-    textOnLight: {
+    background: {
       type: String,
-      default: "text-surface-900"
+      default: "bg-surface-50-900-token"
     },
-    textOnDark: {
+    text: {
       type: String,
-      default: "text-surface-50"
+      default: "text-surface-900-50-token"
     },
-    width: {
+    widthPopup: {
       type: String,
       default: "w-60"
     },
-    height: {
+    heightList: {
       type: String,
       default: "max-h-64 lg:max-h-[500px]"
     },
-    ring: {
-      type: String,
-      default: "ring-[1px] ring-surface-500/30"
-    },
-    rounded: {
+    classButton: {
       type: String,
-      default: "rounded-token"
+      default: ""
     },
-    roundedContainer: {
+    classList: {
       type: String,
-      default: "rounded-container-token"
+      default: ""
     },
-    buttonClasses: {
+    classListItem: {
       type: String,
-      default: "w-24"
+      default: ""
     }
   },
-  setup(props) {
+  setup(__props) {
     const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
-    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
     const showPopup = ref(false);
     onMounted(() => {
       initializeTheme();
     });
-    const cTransition = `transition-all duration-[200ms]`;
-    function onKeyDown(event) {
-      if (["Enter", "Space"].includes(event.code)) {
-        event.preventDefault();
-        event.currentTarget.click();
-      }
-    }
-    const background = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark;
-    });
-    const text = computed(() => {
-      return currentMode2.value === MODE2.LIGHT ? props.textOnLight : props.textOnDark;
-    });
-    const classes = computed(() => {
-      return `${cTransition} 
-      ${background.value} 
-      ${text.value} 
-      ${props.width} 
-      ${props.ring}
-      ${props.roundedContainer}`;
-    });
-    const listClasses = computed(() => {
-      return `${cTransition} 
-      ${props.height}`;
-    });
-    const listItemClasses = computed(() => {
-      return `${cTransition} 
-      ${props.ring} 
-      ${props.rounded}`;
-    });
-    return {
-      onKeyDown,
-      loadTheme,
-      currentMode: currentMode2,
-      classes,
-      chosenTheme: chosenTheme2,
-      themes: themes2,
-      showPopup,
-      listClasses,
-      listItemClasses
-    };
-  }
-});
-const _hoisted_1 = { class: "cc-theme-switcher" };
-const _hoisted_2 = { class: "space-y-4" };
-const _hoisted_3 = { class: "flex items-center justify-between" };
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("h6", null, "Mode", -1);
-const _hoisted_5 = { class: "flex flex-col gap-4" };
-const _hoisted_6 = ["onClick"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VButton = resolveComponent("VButton");
-  const _component_v_light_switch = resolveComponent("v-light-switch");
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_VButton, {
-      class: normalizeClass(`cc-theme-switcher__button ${_ctx.buttonClasses}`),
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.showPopup = !_ctx.showPopup)
-    }, {
-      default: withCtx(() => [
-        createTextVNode(" Theme ")
-      ]),
-      _: 1
-    }, 8, ["class"]),
-    _ctx.showPopup ? (openBlock(), createElementBlock("div", {
-      key: 0,
-      class: normalizeClass(["cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl", _ctx.classes])
-    }, [
-      createElementVNode("div", _hoisted_2, [
-        createElementVNode("section", _hoisted_3, [
-          _hoisted_4,
-          createVNode(_component_v_light_switch)
-        ]),
-        createElementVNode("nav", {
-          class: normalizeClass(["list-nav -m-4 overflow-y-auto p-4", _ctx.listClasses])
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(_sfc_main$w), {
+          class: normalizeClass(`vuetiful-theme-switcher__button ${__props.classButton}`),
+          onClick: _cache[0] || (_cache[0] = ($event) => showPopup.value = !showPopup.value)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(" Theme ")
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        showPopup.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token", `${__props.background} ${__props.text} ${__props.widthPopup} ${__props.classList}`])
         }, [
-          createElementVNode("ul", _hoisted_5, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.themes, (theme, index2) => {
-              return openBlock(), createElementBlock("li", {
-                class: normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900", `${_ctx.listItemClasses} ${_ctx.chosenTheme === theme.name ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
+          createElementVNode("section", _hoisted_2, [
+            _hoisted_3,
+            createVNode(unref(VLightSwitch))
+          ]),
+          createElementVNode("nav", {
+            class: normalizeClass(["vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4", `${__props.heightList} ${__props.classList}`])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(themes2), (theme, index2) => {
+              return openBlock(), createBlock(unref(_sfc_main$w), {
+                class: normalizeClass(["vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer", `${__props.classListItem} ${unref(chosenTheme2) === theme.name ? "variant-filled-surface" : ""}`]),
                 key: index2,
-                onClick: ($event) => _ctx.loadTheme(theme.name)
-              }, toDisplayString(theme.name), 11, _hoisted_6);
+                onClick: ($event) => unref(loadTheme)(theme.name)
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(theme.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]);
             }), 128))
-          ])
-        ], 2)
-      ])
-    ], 2)) : createCommentVNode("", true)
-  ]);
-}
-var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+          ], 2)
+        ], 2)) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
 const { isBrowser } = usePlatform();
 const THEMES = {
   VUETIFUL: "vuetiful",
@@ -50101,4 +50039,4 @@ function install(app) {
   }
 }
 var index = { install };
-export { themeSwitcher as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useSettings, useTheme, clipboard as vClipboard };
+export { _sfc_main as ThemeSwitcher, _sfc_main$8 as VAccordion, VAccordionItem, VAlert, _sfc_main$y as VAvatar, _sfc_main$x as VBadge, _sfc_main$w as VButton, _sfc_main$5 as VCard, _sfc_main$4 as VCardBody, _sfc_main$3 as VCardFooter, _sfc_main$2 as VCardHeader, _sfc_main$v as VChip, _sfc_main$1 as VCodeBlock, _sfc_main$l as VDrawer, VLightSwitch, _sfc_main$d as VListbox, VListboxButton, _sfc_main$c as VListboxItem, _sfc_main$f as VListboxItems, _sfc_main$e as VListboxLabel, VPreview, _sfc_main$t as VRadioDescription, _sfc_main$s as VRadioGroup, _sfc_main$r as VRadioItem, _sfc_main$q as VRadioLabel, _sfc_main$j as VRail, _sfc_main$i as VRailTile, _sfc_main$h as VShell, _sfc_main$p as VSwitch, _sfc_main$o as VSwitchDescription, _sfc_main$n as VSwitchGroup, _sfc_main$m as VSwitchLabel, _sfc_main$b as VTab, _sfc_main$a as VTabPanel, _sfc_main$9 as VTabs, index as default, useDarkMode, useDrawer, useHighlight, useRail, useSettings, useTheme, clipboard as vClipboard };