@code-coaching/vuetiful 0.0.0

package/dist/vuetiful.es.mjs

@@ -0,0 +1,515 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString, createCommentVNode, renderSlot, ref, readonly, onMounted, createElementVNode, resolveComponent, createVNode, withCtx, 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$2 = defineComponent({
+  props: {
+    bgLight: {
+      type: String,
+      default: "bg-primary-50"
+    },
+    bgDark: {
+      type: String,
+      default: "bg-primary-900"
+    },
+    textOnLight: {
+      type: String,
+      default: "text-primary-900"
+    },
+    textOnDark: {
+      type: String,
+      default: "text-primary-50"
+    },
+    width: {
+      type: String,
+      default: "w-fit"
+    },
+    height: {
+      type: String,
+      default: "h-fit"
+    },
+    ring: {
+      type: String,
+      default: "ring-[1px] ring-primary-500/30"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-token"
+    },
+    msg: {
+      type: String
+    }
+  },
+  setup(props, { attrs }) {
+    const { currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
+    const cTransition = `transition-all duration-[200ms]`;
+    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(() => {
+      var _a;
+      return `${cTransition} 
+      ${background.value} 
+      ${text.value} 
+      ${props.width} 
+      ${props.height} 
+      ${props.ring} 
+      ${props.rounded} 
+      ${(_a = attrs.class) != null ? _a : ""}`;
+    });
+    return {
+      classes
+    };
+  }
+});
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("button", {
+    class: normalizeClass(`cc-button btn ${_ctx.classes}`)
+  }, [
+    _ctx.msg ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      createTextVNode(toDisplayString(_ctx.msg), 1)
+    ], 64)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+var VButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+var components = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  VButton
+});
+var main = "";
+var tailwind = "";
+var themeVuetiful = "";
+const MAGIC_NUM = 100;
+var MyConstants = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  MAGIC_NUM
+});
+const usePlatform = () => {
+  const isBrowser2 = typeof window !== "undefined";
+  return {
+    isBrowser: isBrowser2
+  };
+};
+const { isBrowser: isBrowser$1 } = usePlatform();
+const MODE = {
+  LIGHT: true,
+  DARK: false
+};
+const modeOsPrefers = ref(MODE.DARK);
+const currentMode = ref(MODE.DARK);
+const modeUserPrefers = ref(void 0);
+const useDarkMode = () => {
+  const getModeOsPrefers = () => {
+    const prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
+    setModeOsPrefers(prefersLightMode);
+    return prefersLightMode;
+  };
+  const getModeUserPrefers = () => {
+    if (isBrowser$1) {
+      const mode = localStorage.getItem("modeUserPrefers");
+      if (mode !== null)
+        modeUserPrefers.value = mode === "true";
+    }
+    return modeUserPrefers.value;
+  };
+  const getModeAutoPrefers = () => {
+    const os = getModeOsPrefers();
+    const user = getModeUserPrefers();
+    const modeValue = user !== void 0 ? user : os;
+    return modeValue;
+  };
+  const setModeOsPrefers = (value) => {
+    modeOsPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeOsPrefers", value.toString());
+    }
+  };
+  const setModeUserPrefers = (value) => {
+    modeUserPrefers.value = value;
+    if (isBrowser$1) {
+      localStorage.setItem("modeUserPrefers", value.toString());
+    }
+  };
+  const setModeCurrent = (value) => {
+    const elemHtmlClasses = document.documentElement.classList;
+    const classDark = "dark";
+    value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    currentMode.value = value;
+  };
+  const initializeMode = () => {
+    const mode = getModeAutoPrefers();
+    setModeCurrent(mode);
+  };
+  const autoModeWatcher = () => {
+    const mql = window.matchMedia("(prefers-color-scheme: light)");
+    const setMode = (value) => {
+      const elemHtmlClasses = document.documentElement.classList;
+      const classDark = `dark`;
+      value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
+    };
+    setMode(mql.matches);
+    mql.onchange = () => {
+      setMode(mql.matches);
+    };
+  };
+  return {
+    modeOsPrefers: readonly(modeOsPrefers),
+    modeUserPrefers: readonly(modeUserPrefers),
+    currentMode: readonly(currentMode),
+    getModeOsPrefers,
+    getModeUserPrefers,
+    getModeAutoPrefers,
+    setModeUserPrefers,
+    setModeCurrent,
+    autoModeWatcher,
+    initializeMode,
+    MODE
+  };
+};
+const _sfc_main$1 = defineComponent({
+  props: {
+    bgLight: {
+      type: String,
+      default: "bg-surface-50"
+    },
+    bgDark: {
+      type: String,
+      default: "bg-surface-900"
+    },
+    textLight: {
+      type: String,
+      default: "text-surface-50"
+    },
+    textDark: {
+      type: String,
+      default: "text-surface-900"
+    },
+    width: {
+      type: String,
+      default: "w-12"
+    },
+    height: {
+      type: String,
+      default: "h-6"
+    },
+    ring: {
+      type: String,
+      default: "ring-[1px] ring-surface-500/30"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-token"
+    }
+  },
+  setup(props, { attrs }) {
+    const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
+    onMounted(() => {
+      initializeMode();
+    });
+    const cTransition = `transition-all duration-[200ms]`;
+    const cTrack = "cursor-pointer";
+    const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
+    const cIcon = "w-[70%] aspect-square";
+    const svgPath = {
+      sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",
+      moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+    };
+    const onToggleHandler = () => {
+      const toggle = !currentMode2.value;
+      setModeUserPrefers(toggle);
+      setModeCurrent(toggle);
+    };
+    const onKeyDown = (event) => {
+      if (["Enter", "Space"].includes(event.code)) {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const trackBg = computed(
+      () => currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark
+    );
+    const thumbBg = computed(
+      () => currentMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight
+    );
+    const thumbPosition = computed(
+      () => currentMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : ""
+    );
+    const iconFill = computed(() => {
+      return currentMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
+    });
+    const classesTrack = computed(() => {
+      var _a;
+      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${props.rounded} ${trackBg.value} ${(_a = attrs.class) != null ? _a : ""}`;
+    });
+    const classesThumb = computed(
+      () => `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`
+    );
+    const classesIcon = computed(() => `${cIcon}`);
+    return {
+      classesTrack,
+      classesThumb,
+      classesIcon,
+      svgPath,
+      onToggleHandler,
+      onKeyDown,
+      currentMode: currentMode2,
+      iconFill
+    };
+  }
+});
+const _hoisted_1$1 = ["aria-checked", "title"];
+const _hoisted_2$1 = ["d"];
+function _sfc_render$1(_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)),
+    onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args)),
+    "on:keyup": "",
+    "on:keypress": "",
+    role: "switch",
+    "aria-label": "Light Switch",
+    "aria-checked": _ctx.currentMode,
+    title: `Toggle ${_ctx.currentMode === false ? "Dark" : "Light"} Mode`,
+    tabindex: "0"
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(`lightswitch-thumb ${_ctx.classesThumb}`)
+    }, [
+      (openBlock(), createElementBlock("svg", {
+        class: normalizeClass(`lightswitch-icon ${_ctx.classesIcon} ${_ctx.iconFill}`),
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 512 512"
+      }, [
+        createElementVNode("path", {
+          fill: "currentColor",
+          d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
+        }, null, 8, _hoisted_2$1)
+      ], 2))
+    ], 2)
+  ], 42, _hoisted_1$1);
+}
+var DarkModeSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+function add(a, b) {
+  return a + b;
+}
+var MyUtil = {
+  add
+};
+const { isBrowser } = usePlatform();
+const chosenTheme = ref("vuetiful");
+const useTheme = () => {
+  const themes = ["vuetiful", "modern", "rocket", "sahara", "seafoam", "seasonal", "vintage"];
+  const theme = ref("vuetiful");
+  const setTheme = (name) => {
+    theme.value = name;
+    if (isBrowser) {
+      localStorage.setItem("vuetiful-theme", name);
+      applyTheme(name);
+    }
+  };
+  const applyTheme = (name) => {
+    document.body.setAttribute("data-theme", name);
+  };
+  const initializeTheme = (callback) => {
+    var _a;
+    if (isBrowser) {
+      const themeName = (_a = localStorage.getItem("vuetiful-theme")) != null ? _a : "vuetiful";
+      if (themeName)
+        loadTheme(themeName, callback);
+    }
+  };
+  const loadTheme = (theme2, callback) => {
+    chosenTheme.value = theme2;
+    const existingStyle = document.getElementById("theme");
+    const themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme2}.css`;
+    const link = document.createElement("link");
+    link.id = "theme";
+    link.href = themeUrl;
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.onload = () => {
+      if (existingStyle)
+        existingStyle.remove();
+      setTheme(theme2);
+      if (callback) {
+        callback();
+        console.log("callback");
+      }
+    };
+    const head = document.querySelector("head");
+    if (head)
+      head.appendChild(link);
+  };
+  return {
+    theme: readonly(theme),
+    themes: readonly(themes),
+    chosenTheme: readonly(chosenTheme),
+    setTheme,
+    initializeTheme,
+    loadTheme
+  };
+};
+var themeSwitcher_vue_vue_type_style_index_0_scoped_true_lang = "";
+const _sfc_main = defineComponent({
+  components: {
+    DarkModeSwitch,
+    VButton
+  },
+  props: {
+    bgLight: {
+      type: String,
+      default: "bg-surface-50"
+    },
+    bgDark: {
+      type: String,
+      default: "bg-surface-900"
+    },
+    textOnLight: {
+      type: String,
+      default: "text-surface-900"
+    },
+    textOnDark: {
+      type: String,
+      default: "text-surface-50"
+    },
+    width: {
+      type: String,
+      default: "w-60"
+    },
+    height: {
+      type: String,
+      default: "max-h-64 lg:max-h-[500px]"
+    },
+    ring: {
+      type: String,
+      default: "ring-[1px] ring-surface-500/30"
+    },
+    rounded: {
+      type: String,
+      default: "rounded-token"
+    },
+    roundedContainer: {
+      type: String,
+      default: "rounded-container-token"
+    },
+    buttonClasses: {
+      type: String,
+      default: "w-24"
+    }
+  },
+  setup(props, { attrs }) {
+    const { initializeTheme, loadTheme, themes, 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(() => {
+      var _a;
+      return `${cTransition} 
+      ${background.value} 
+      ${text.value} 
+      ${props.width} 
+      ${props.ring}
+      ${props.roundedContainer}
+      ${(_a = attrs.class) != null ? _a : ""}`;
+    });
+    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,
+      showPopup,
+      listClasses,
+      listItemClasses
+    };
+  }
+});
+const _withScopeId = (n) => (pushScopeId("data-v-74718370"), n = n(), popScopeId(), n);
+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__ */ _withScopeId(() => /* @__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_DarkModeSwitch = resolveComponent("DarkModeSwitch");
+  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 p-4 shadow-xl", _ctx.classes])
+    }, [
+      createElementVNode("div", _hoisted_2, [
+        createElementVNode("section", _hoisted_3, [
+          _hoisted_4,
+          createVNode(_component_DarkModeSwitch)
+        ]),
+        createElementVNode("nav", {
+          class: normalizeClass(["list-nav -m-4 overflow-y-auto p-4", _ctx.listClasses])
+        }, [
+          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 ? "bg-primary-50 text-primary-900" : "bg-surface-200 text-surface-900"}`]),
+                key: index2,
+                onClick: ($event) => _ctx.loadTheme(theme)
+              }, toDisplayString(theme), 11, _hoisted_6);
+            }), 128))
+          ])
+        ], 2)
+      ])
+    ], 2)) : createCommentVNode("", true)
+  ]);
+}
+var themeSwitcher = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-74718370"]]);
+function install(app) {
+  for (const key in components) {
+    app.component(key, components[key]);
+  }
+}
+var index = { install };
+export { DarkModeSwitch, MyConstants, MyUtil, themeSwitcher as ThemeSwitcher, VButton, index as default, useDarkMode, useTheme };

package/dist/vuetiful.umd.js

@@ -0,0 +1,17 @@
+(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d["@code-coaching/vuetiful"]={},d.Vue))})(this,function(d,e){"use strict";var S=(t,s)=>{const c=t.__vccOpts||t;for(const[u,m]of s)c[u]=m;return c};const O=e.defineComponent({props:{bgLight:{type:String,default:"bg-primary-50"},bgDark:{type:String,default:"bg-primary-900"},textOnLight:{type:String,default:"text-primary-900"},textOnDark:{type:String,default:"text-primary-50"},width:{type:String,default:"w-fit"},height:{type:String,default:"h-fit"},ring:{type:String,default:"ring-[1px] ring-primary-500/30"},rounded:{type:String,default:"rounded-token"},msg:{type:String}},setup(t,{attrs:s}){const{currentMode:c,MODE:u}=$(),m="transition-all duration-[200ms]",r=e.computed(()=>c.value===u.LIGHT?t.bgLight:t.bgDark),o=e.computed(()=>c.value===u.LIGHT?t.textOnLight:t.textOnDark);return{classes:e.computed(()=>{var n;return`${m} 
+      ${r.value} 
+      ${o.value} 
+      ${t.width} 
+      ${t.height} 
+      ${t.ring} 
+      ${t.rounded} 
+      ${(n=s.class)!=null?n:""}`})}}});function z(t,s,c,u,m,r){return e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(`cc-button btn ${t.classes}`)},[t.msg?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(t.msg),1)],64)):e.createCommentVNode("",!0),e.renderSlot(t.$slots,"default")],2)}var w=S(O,[["render",z]]),L=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",VButton:w}),ce="",ae="",le="";const x=100;var H=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",MAGIC_NUM:x});const _=()=>({isBrowser:typeof window!="undefined"}),{isBrowser:M}=_(),y={LIGHT:!0,DARK:!1},D=e.ref(y.DARK),B=e.ref(y.DARK),k=e.ref(void 0),$=()=>{const t=()=>{const n=window.matchMedia("(prefers-color-scheme: light)").matches;return u(n),n},s=()=>{if(M){const n=localStorage.getItem("modeUserPrefers");n!==null&&(k.value=n==="true")}return k.value},c=()=>{const n=t(),a=s();return a!==void 0?a:n},u=n=>{D.value=n,M&&localStorage.setItem("modeOsPrefers",n.toString())},m=n=>{k.value=n,M&&localStorage.setItem("modeUserPrefers",n.toString())},r=n=>{const a=document.documentElement.classList,l="dark";n===y.LIGHT?a.remove(l):a.add(l),B.value=n},o=()=>{const n=c();r(n)},i=()=>{const n=window.matchMedia("(prefers-color-scheme: light)"),a=l=>{const g=document.documentElement.classList,p="dark";l===y.LIGHT?g.remove(p):g.add(p)};a(n.matches),n.onchange=()=>{a(n.matches)}};return{modeOsPrefers:e.readonly(D),modeUserPrefers:e.readonly(k),currentMode:e.readonly(B),getModeOsPrefers:t,getModeUserPrefers:s,getModeAutoPrefers:c,setModeUserPrefers:m,setModeCurrent:r,autoModeWatcher:i,initializeMode:o,MODE:y}},N=e.defineComponent({props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textLight:{type:String,default:"text-surface-50"},textDark:{type:String,default:"text-surface-900"},width:{type:String,default:"w-12"},height:{type:String,default:"h-6"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"}},setup(t,{attrs:s}){const{initializeMode:c,setModeCurrent:u,setModeUserPrefers:m,currentMode:r,MODE:o}=$();e.onMounted(()=>{c()});const i="transition-all duration-[200ms]",n="cursor-pointer",a="aspect-square scale-[0.8] flex justify-center items-center",l="w-[70%] aspect-square",g={sun:"M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",moon:"M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"},p=()=>{const h=!r.value;m(h),u(h)},b=h=>{["Enter","Space"].includes(h.code)&&(h.preventDefault(),h.currentTarget.click())},T=e.computed(()=>r.value===o.LIGHT?t.bgLight:t.bgDark),C=e.computed(()=>r.value===o.LIGHT?t.bgDark:t.bgLight),f=e.computed(()=>r.value===o.LIGHT?"translate-x-[100%]":""),ne=e.computed(()=>r.value===o.LIGHT?t.textLight:t.textDark),oe=e.computed(()=>{var h;return`${n} ${i} ${t.width} ${t.height} ${t.ring} ${t.rounded} ${T.value} ${(h=s.class)!=null?h:""}`}),se=e.computed(()=>`${a} ${i} ${t.height} ${t.rounded} ${C.value} ${f.value}`),re=e.computed(()=>`${l}`);return{classesTrack:oe,classesThumb:se,classesIcon:re,svgPath:g,onToggleHandler:p,onKeyDown:b,currentMode:r,iconFill:ne}}}),G=["aria-checked","title"],U=["d"];function K(t,s,c,u,m,r){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(`lightswitch-track ${t.classesTrack}`),onClick:s[0]||(s[0]=(...o)=>t.onToggleHandler&&t.onToggleHandler(...o)),onKeydown:s[1]||(s[1]=(...o)=>t.onKeyDown&&t.onKeyDown(...o)),"on:keyup":"","on:keypress":"",role:"switch","aria-label":"Light Switch","aria-checked":t.currentMode,title:`Toggle ${t.currentMode===!1?"Dark":"Light"} Mode`,tabindex:"0"},[e.createElementVNode("div",{class:e.normalizeClass(`lightswitch-thumb ${t.classesThumb}`)},[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(`lightswitch-icon ${t.classesIcon} ${t.iconFill}`),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},[e.createElementVNode("path",{fill:"currentColor",d:t.currentMode?t.svgPath.sun:t.svgPath.moon},null,8,U)],2))],2)],42,G)}var I=S(N,[["render",K]]);function A(t,s){return t+s}var j={add:A};const{isBrowser:E}=_(),P=e.ref("vuetiful"),V=()=>{const t=["vuetiful","modern","rocket","sahara","seafoam","seasonal","vintage"],s=e.ref("vuetiful"),c=o=>{s.value=o,E&&(localStorage.setItem("vuetiful-theme",o),u(o))},u=o=>{document.body.setAttribute("data-theme",o)},m=o=>{var i;if(E){const n=(i=localStorage.getItem("vuetiful-theme"))!=null?i:"vuetiful";n&&r(n,o)}},r=(o,i)=>{P.value=o;const n=document.getElementById("theme"),a=`https://code-coaching.dev/vuetiful-themes/theme-${o}.css`,l=document.createElement("link");l.id="theme",l.href=a,l.type="text/css",l.rel="stylesheet",l.onload=()=>{n&&n.remove(),c(o),i&&(i(),console.log("callback"))};const g=document.querySelector("head");g&&g.appendChild(l)};return{theme:e.readonly(s),themes:e.readonly(t),chosenTheme:e.readonly(P),setTheme:c,initializeTheme:m,loadTheme:r}};var ie="";const q=e.defineComponent({components:{DarkModeSwitch:I,VButton:w},props:{bgLight:{type:String,default:"bg-surface-50"},bgDark:{type:String,default:"bg-surface-900"},textOnLight:{type:String,default:"text-surface-900"},textOnDark:{type:String,default:"text-surface-50"},width:{type:String,default:"w-60"},height:{type:String,default:"max-h-64 lg:max-h-[500px]"},ring:{type:String,default:"ring-[1px] ring-surface-500/30"},rounded:{type:String,default:"rounded-token"},roundedContainer:{type:String,default:"rounded-container-token"},buttonClasses:{type:String,default:"w-24"}},setup(t,{attrs:s}){const{initializeTheme:c,loadTheme:u,themes:m,chosenTheme:r}=V(),{currentMode:o,MODE:i}=$(),n=e.ref(!1);e.onMounted(()=>{c()});const a="transition-all duration-[200ms]";function l(f){["Enter","Space"].includes(f.code)&&(f.preventDefault(),f.currentTarget.click())}const g=e.computed(()=>o.value===i.LIGHT?t.bgLight:t.bgDark),p=e.computed(()=>o.value===i.LIGHT?t.textOnLight:t.textOnDark),b=e.computed(()=>{var f;return`${a} 
+      ${g.value} 
+      ${p.value} 
+      ${t.width} 
+      ${t.ring}
+      ${t.roundedContainer}
+      ${(f=s.class)!=null?f:""}`}),T=e.computed(()=>`${a} 
+      ${t.height}`),C=e.computed(()=>`${a} 
+      ${t.ring} 
+      ${t.rounded}`);return{onKeyDown:l,loadTheme:u,currentMode:o,classes:b,chosenTheme:r,themes:m,showPopup:n,listClasses:T,listItemClasses:C}}}),F=t=>(e.pushScopeId("data-v-74718370"),t=t(),e.popScopeId(),t),R={class:"cc-theme-switcher"},W={class:"space-y-4"},J={class:"flex items-center justify-between"},Q=F(()=>e.createElementVNode("h6",null,"Mode",-1)),X={class:"flex flex-col gap-4"},Y=["onClick"];function Z(t,s,c,u,m,r){const o=e.resolveComponent("VButton"),i=e.resolveComponent("DarkModeSwitch");return e.openBlock(),e.createElementBlock("div",R,[e.createVNode(o,{class:e.normalizeClass(`cc-theme-switcher__button ${t.buttonClasses}`),onClick:s[0]||(s[0]=n=>t.showPopup=!t.showPopup)},{default:e.withCtx(()=>[e.createTextVNode(" Theme ")]),_:1},8,["class"]),t.showPopup?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["cc-theme-switcher__popup p-4 shadow-xl",t.classes])},[e.createElementVNode("div",W,[e.createElementVNode("section",J,[Q,e.createVNode(i)]),e.createElementVNode("nav",{class:e.normalizeClass(["list-nav -m-4 overflow-y-auto p-4",t.listClasses])},[e.createElementVNode("ul",X,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.themes,(n,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900",`${t.listItemClasses} ${t.chosenTheme===n?"bg-primary-50 text-primary-900":"bg-surface-200 text-surface-900"}`]),key:a,onClick:l=>t.loadTheme(n)},e.toDisplayString(n),11,Y))),128))])],2)])],2)):e.createCommentVNode("",!0)])}var v=S(q,[["render",Z],["__scopeId","data-v-74718370"]]);function ee(t){for(const s in L)t.component(s,L[s])}var te={install:ee};d.DarkModeSwitch=I,d.MyConstants=H,d.MyUtil=j,d.ThemeSwitcher=v,d.VButton=w,d.default=te,d.useDarkMode=$,d.useTheme=V,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@code-coaching/vuetiful",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
+    "prebuild": "node 'scripts/intellisense.js'",
+    "build": "rimraf dist && vue-tsc && vite build && npm run build:style",
+    "build:style": "npx tailwindcss -i ./src/styles/all.css -o ./dist/styles/all.css",
+    "docs:dev": "cd docs && npm run dev",
+    "docs:build": "cd docs && npm run build",
+    "docs:serve": "cd docs && npm run serve"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.25"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.14",
+    "@vitejs/plugin-vue": "^2.0.0",
+    "autoprefixer": "^10.4.14",
+    "onchange": "^7.1.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.4",
+    "rimraf": "^3.0.2",
+    "tailwindcss": "^3.2.7",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2",
+    "vue": "^3.2.25",
+    "vue-tsc": "^0.29.8"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "types": "./dist/types/index.d.ts",
+  "module": "./dist/vuetiful.es.mjs",
+  "exports": {
+    ".": {
+      "import": "./dist/vuetiful.es.mjs",
+      "require": "./dist/vuetiful.umd.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./themes/*": "./src/themes/*",
+    "./styles/*": "./src/styles/*",
+    "./tailwind/*": "./src/tailwind/*"
+  }
+}

package/src/assets/main.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: 'myfont';
+  src: url('fonts/myfont.woff');
+}
+
+[class^='icon-'],
+[class*=' icon-'] {
+  font-family: 'myfont' !important;
+}
+
+.icon-heart:before {
+  content: '\e9da';
+}
+
+.global-example {
+  color: red;
+}

package/src/components/atoms/VButton.vue

@@ -0,0 +1,78 @@
+<template>
+  <button :class="`cc-button btn ${classes}`">
+    <template v-if="msg">{{ msg }}</template>
+    <slot />
+  </button>
+</template>
+
+<script lang="ts">
+import { CssClasses, useDarkMode } from "@/index";
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+  props: {
+    bgLight: {
+      type: String as () => CssClasses,
+      default: "bg-primary-50",
+    },
+    bgDark: {
+      type: String as () => CssClasses,
+      default: "bg-primary-900",
+    },
+    textOnLight: {
+      type: String as () => CssClasses,
+      default: "text-primary-900",
+    },
+    textOnDark: {
+      type: String as () => CssClasses,
+      default: "text-primary-50",
+    },
+    width: {
+      type: String as () => CssClasses,
+      default: "w-fit",
+    },
+    height: {
+      type: String as () => CssClasses,
+      default: "h-fit",
+    },
+    ring: {
+      type: String as () => CssClasses,
+      default: "ring-[1px] ring-primary-500/30",
+    },
+    rounded: {
+      type: String as () => CssClasses,
+      default: "rounded-token",
+    },
+
+    msg: {
+      type: String,
+    },
+  },
+  setup(props, { attrs }) {
+    const { currentMode, MODE } = useDarkMode();
+    const cTransition = `transition-all duration-[200ms]`;
+
+    const background = computed(() => {
+      return currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark;
+    });
+    const text = computed(() => {
+      return currentMode.value === MODE.LIGHT ? props.textOnLight : props.textOnDark;
+    });
+
+    const classes = computed(() => {
+      return `${cTransition} 
+      ${background.value} 
+      ${text.value} 
+      ${props.width} 
+      ${props.height} 
+      ${props.ring} 
+      ${props.rounded} 
+      ${attrs.class ?? ""}`;
+    });
+
+    return {
+      classes,
+    };
+  },
+});
+</script>