@code-coaching/vuetiful 0.0.1 → 0.0.3

package/dist/types/index.d.ts

@@ -1,7 +1,6 @@
 declare function install(app: any): void;
 import "./assets/main.css";
 import "./styles/tailwind.css";
-import "./themes/theme-vuetiful.css";
 declare const _default: {
     install: typeof install;
 };

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

@@ -48,7 +48,7 @@ declare const _default: import("vue").DefineComponent<{
     chosenTheme: Readonly<import("vue").Ref<string>>;
     themes: Readonly<import("vue").Ref<readonly {
         readonly name: string;
-        readonly url?: string | undefined;
+        readonly url: string;
     }[]>>;
     showPopup: import("vue").Ref<boolean>;
     listClasses: import("vue").ComputedRef<string>;

package/dist/types/utils/theme/theme.d.ts

@@ -1,27 +1,27 @@
 import { Ref } from "vue";
 interface Theme {
     name: string;
-    url?: string;
+    url: string;
 }
 declare const useTheme: () => {
     themes: Readonly<Ref<readonly {
         readonly name: string;
-        readonly url?: string | undefined;
+        readonly url: string;
     }[]>>;
     chosenTheme: Readonly<Ref<string>>;
     initializeTheme: (callback?: Function | undefined) => void;
     loadTheme: (themeName: string, callback?: Function | undefined) => void;
     THEMES: {
         VUETIFUL: string;
-        MODERN: string;
         ROCKET: string;
         SAHARA: string;
         SEAFOAM: string;
         SEASONAL: string;
+        SKELETON: string;
         VINTAGE: string;
     };
     overwriteThemes: (newThemes: Array<Theme>) => void;
     registerAllBuiltInThemes: () => Array<Theme>;
-    registerTheme: (name: string, url?: string | undefined) => Theme;
+    registerTheme: (name: string, url: string) => Theme;
 };
 export { useTheme };

package/dist/vuetiful.es.mjs

@@ -87,7 +87,6 @@ var components = /* @__PURE__ */ Object.freeze({
 });
 var main = "";
 var tailwind = "";
-var themeVuetiful = "";
 const MAGIC_NUM = 100;
 var MyConstants = /* @__PURE__ */ Object.freeze({
   __proto__: null,
@@ -309,21 +308,24 @@ var MyUtil = {
 const { isBrowser } = usePlatform();
 const THEMES = {
   VUETIFUL: "vuetiful",
-  MODERN: "modern",
   ROCKET: "rocket",
   SAHARA: "sahara",
   SEAFOAM: "seafoam",
   SEASONAL: "seasonal",
+  SKELETON: "skeleton",
   VINTAGE: "vintage"
 };
+const builtInUrl = (name) => {
+  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+};
 const builtInThemes = [
-  { name: THEMES.VUETIFUL },
-  { name: THEMES.MODERN },
-  { name: THEMES.ROCKET },
-  { name: THEMES.SAHARA },
-  { name: THEMES.SEAFOAM },
-  { name: THEMES.SEASONAL },
-  { name: THEMES.VINTAGE }
+  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
+  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
+  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
+  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
+  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
+  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
+  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) }
 ];
 const themes = ref([...builtInThemes]);
 const defaultTheme = THEMES.VUETIFUL;
@@ -355,9 +357,6 @@ const useTheme = () => {
     chosenTheme.value = theme.name;
     const existingStyle = document.getElementById("theme");
     let themeUrl = theme.url;
-    if (!themeUrl) {
-      themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme.name}.css`;
-    }
     const link = document.createElement("link");
     link.id = "theme";
     link.href = themeUrl;
@@ -379,9 +378,7 @@ const useTheme = () => {
     return [...builtInThemes];
   };
   const registerTheme = (name, url) => {
-    if (url)
-      return { url, name };
-    return { name };
+    return { url, name };
   };
   const overwriteThemes = (newThemes) => {
     themes.value = [...newThemes];

package/dist/vuetiful.umd.js

@@ -1,17 +1,17 @@
-(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l["@code-coaching/vuetiful"]={},l.Vue))})(this,function(l,e){"use strict";var b=(t,s)=>{const c=t.__vccOpts||t;for(const[d,m]of s)c[d]=m;return c};const H=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:d}=M(),m="transition-all duration-[200ms]",i=e.computed(()=>c.value===d.LIGHT?t.bgLight:t.bgDark),o=e.computed(()=>c.value===d.LIGHT?t.textOnLight:t.textOnDark);return{classes:e.computed(()=>{var n;return`${m} 
-      ${i.value} 
+(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 L=(t,s)=>{const c=t.__vccOpts||t;for(const[m,u]of s)c[m]=u;return c};const z=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:m}=E(),u="transition-all duration-[200ms]",l=e.computed(()=>c.value===m.LIGHT?t.bgLight:t.bgDark),o=e.computed(()=>c.value===m.LIGHT?t.textOnLight:t.textOnDark);return{classes:e.computed(()=>{var n;return`${u} 
+      ${l.value} 
       ${o.value} 
       ${t.width} 
       ${t.height} 
       ${t.ring} 
       ${t.rounded} 
-      ${(n=s.class)!=null?n:""}`})}}});function U(t,s,c,d,m,i){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 L=b(H,[["render",U]]),_=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",VButton:L}),de="",me="",ue="";const x=100;var G=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",MAGIC_NUM:x});const I=()=>({isBrowser:typeof window!="undefined"}),{isBrowser:C}=I(),T={LIGHT:!0,DARK:!1},B=e.ref(T.DARK),O=e.ref(T.DARK),w=e.ref(void 0),M=()=>{const t=()=>{const n=window.matchMedia("(prefers-color-scheme: light)").matches;return d(n),n},s=()=>{if(C){const n=localStorage.getItem("modeUserPrefers");n!==null&&(w.value=n==="true")}return w.value},c=()=>{const n=t(),a=s();return a!==void 0?a:n},d=n=>{B.value=n,C&&localStorage.setItem("modeOsPrefers",n.toString())},m=n=>{w.value=n,C&&localStorage.setItem("modeUserPrefers",n.toString())},i=n=>{const a=document.documentElement.classList,u="dark";n===T.LIGHT?a.remove(u):a.add(u),O.value=n},o=()=>{const n=c();i(n)},r=()=>{const n=window.matchMedia("(prefers-color-scheme: light)"),a=u=>{const g=document.documentElement.classList,h="dark";u===T.LIGHT?g.remove(h):g.add(h),i(u)};a(n.matches),n.onchange=()=>{a(n.matches)}};return{modeOsPrefers:e.readonly(B),modeUserPrefers:e.readonly(w),currentMode:e.readonly(O),getModeOsPrefers:t,getModeUserPrefers:s,getModeAutoPrefers:c,setModeUserPrefers:m,setModeCurrent:i,autoModeWatcher:r,initializeMode:o,MODE:T}},K=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:d,setModeUserPrefers:m,currentMode:i,MODE:o}=M();e.onMounted(()=>{c()});const r="transition-all duration-[200ms]",n="cursor-pointer",a="aspect-square scale-[0.8] flex justify-center items-center",u="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"},h=()=>{const p=!i.value;m(p),d(p)},$=p=>{["Enter","Space"].includes(p.code)&&(p.preventDefault(),p.currentTarget.click())},S=e.computed(()=>i.value===o.LIGHT?t.bgLight:t.bgDark),D=e.computed(()=>i.value===o.LIGHT?t.bgDark:t.bgLight),y=e.computed(()=>i.value===o.LIGHT?"translate-x-[100%]":""),ae=e.computed(()=>i.value===o.LIGHT?t.textLight:t.textDark),ce=e.computed(()=>{var p;return`${n} ${r} ${t.width} ${t.height} ${t.ring} ${t.rounded} ${S.value} ${(p=s.class)!=null?p:""}`}),ie=e.computed(()=>`${a} ${r} ${t.height} ${t.rounded} ${D.value} ${y.value}`),le=e.computed(()=>`${u}`);return{classesTrack:ce,classesThumb:ie,classesIcon:le,svgPath:g,onToggleHandler:h,onKeyDown:$,currentMode:i,iconFill:ae}}}),F=["aria-checked","title"],R=["d"];function j(t,s,c,d,m,i){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,R)],2))],2)],42,F)}var V=b(K,[["render",j]]);function q(t,s){return t+s}var W={add:q};const{isBrowser:A}=I(),f={VUETIFUL:"vuetiful",MODERN:"modern",ROCKET:"rocket",SAHARA:"sahara",SEAFOAM:"seafoam",SEASONAL:"seasonal",VINTAGE:"vintage"},P=[{name:f.VUETIFUL},{name:f.MODERN},{name:f.ROCKET},{name:f.SAHARA},{name:f.SEAFOAM},{name:f.SEASONAL},{name:f.VINTAGE}],k=e.ref([...P]),E=f.VUETIFUL,N=e.ref(E),z=()=>{const t=o=>{const r=k.value.find(n=>n.name===o);!r||A&&(localStorage.setItem("vuetiful-theme",r.name),document.body.setAttribute("data-theme",r.name))},s=o=>{if(A){const r=localStorage.getItem("vuetiful-theme");c(r||E,o)}},c=(o,r)=>{let n=k.value.find(S=>S.name===o);n||(n=k.value.find(S=>S.name===E)||k.value[0]);const a=n;N.value=a.name;const u=document.getElementById("theme");let g=a.url;g||(g=`https://code-coaching.dev/vuetiful-themes/theme-${a.name}.css`);const h=document.createElement("link");h.id="theme",h.href=g,h.type="text/css",h.rel="stylesheet",h.onload=()=>{u&&u.remove(),t(a.name),r&&r()};const $=document.querySelector("head");$&&$.appendChild(h)},d=()=>[...P],m=(o,r)=>r?{url:r,name:o}:{name:o},i=o=>{k.value=[...o]};return{themes:e.readonly(k),chosenTheme:e.readonly(N),initializeTheme:s,loadTheme:c,THEMES:f,overwriteThemes:i,registerAllBuiltInThemes:d,registerTheme:m}};var he="";const J=e.defineComponent({components:{DarkModeSwitch:V,VButton:L},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:d,themes:m,chosenTheme:i}=z(),{currentMode:o,MODE:r}=M(),n=e.ref(!1);e.onMounted(()=>{c()});const a="transition-all duration-[200ms]";function u(y){["Enter","Space"].includes(y.code)&&(y.preventDefault(),y.currentTarget.click())}const g=e.computed(()=>o.value===r.LIGHT?t.bgLight:t.bgDark),h=e.computed(()=>o.value===r.LIGHT?t.textOnLight:t.textOnDark),$=e.computed(()=>{var y;return`${a} 
+      ${(n=s.class)!=null?n:""}`})}}});function x(t,s,c,m,u,l){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 b=L(z,[["render",x]]),D=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",VButton:b}),me="",ue="";const G=100;var K=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",MAGIC_NUM:G});const O=()=>({isBrowser:typeof window!="undefined"}),{isBrowser:C}=O(),w={LIGHT:!0,DARK:!1},A=e.ref(w.DARK),B=e.ref(w.DARK),M=e.ref(void 0),E=()=>{const t=()=>{const n=window.matchMedia("(prefers-color-scheme: light)").matches;return m(n),n},s=()=>{if(C){const n=localStorage.getItem("modeUserPrefers");n!==null&&(M.value=n==="true")}return M.value},c=()=>{const n=t(),a=s();return a!==void 0?a:n},m=n=>{A.value=n,C&&localStorage.setItem("modeOsPrefers",n.toString())},u=n=>{M.value=n,C&&localStorage.setItem("modeUserPrefers",n.toString())},l=n=>{const a=document.documentElement.classList,h="dark";n===w.LIGHT?a.remove(h):a.add(h),B.value=n},o=()=>{const n=c();l(n)},r=()=>{const n=window.matchMedia("(prefers-color-scheme: light)"),a=h=>{const p=document.documentElement.classList,g="dark";h===w.LIGHT?p.remove(g):p.add(g),l(h)};a(n.matches),n.onchange=()=>{a(n.matches)}};return{modeOsPrefers:e.readonly(A),modeUserPrefers:e.readonly(M),currentMode:e.readonly(B),getModeOsPrefers:t,getModeUserPrefers:s,getModeAutoPrefers:c,setModeUserPrefers:u,setModeCurrent:l,autoModeWatcher:r,initializeMode:o,MODE:w}},F=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:m,setModeUserPrefers:u,currentMode:l,MODE:o}=E();e.onMounted(()=>{c()});const r="transition-all duration-[200ms]",n="cursor-pointer",a="aspect-square scale-[0.8] flex justify-center items-center",h="w-[70%] aspect-square",p={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"},g=()=>{const f=!l.value;u(f),m(f)},T=f=>{["Enter","Space"].includes(f.code)&&(f.preventDefault(),f.currentTarget.click())},$=e.computed(()=>l.value===o.LIGHT?t.bgLight:t.bgDark),_=e.computed(()=>l.value===o.LIGHT?t.bgDark:t.bgLight),y=e.computed(()=>l.value===o.LIGHT?"translate-x-[100%]":""),ce=e.computed(()=>l.value===o.LIGHT?t.textLight:t.textDark),le=e.computed(()=>{var f;return`${n} ${r} ${t.width} ${t.height} ${t.ring} ${t.rounded} ${$.value} ${(f=s.class)!=null?f:""}`}),ie=e.computed(()=>`${a} ${r} ${t.height} ${t.rounded} ${_.value} ${y.value}`),de=e.computed(()=>`${h}`);return{classesTrack:le,classesThumb:ie,classesIcon:de,svgPath:p,onToggleHandler:g,onKeyDown:T,currentMode:l,iconFill:ce}}}),R=["aria-checked","title"],j=["d"];function q(t,s,c,m,u,l){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,j)],2))],2)],42,R)}var V=L(F,[["render",q]]);function W(t,s){return t+s}var J={add:W};const{isBrowser:N}=O(),i={VUETIFUL:"vuetiful",ROCKET:"rocket",SAHARA:"sahara",SEAFOAM:"seafoam",SEASONAL:"seasonal",SKELETON:"skeleton",VINTAGE:"vintage"},S=t=>`https://code-coaching.dev/vuetiful-themes/theme-${t}.css`,P=[{name:i.VUETIFUL,url:S(`${i.VUETIFUL}-0.0.1`)},{name:i.ROCKET,url:S(`${i.ROCKET}`)},{name:i.SAHARA,url:S(`${i.SAHARA}`)},{name:i.SEAFOAM,url:S(`${i.SEAFOAM}`)},{name:i.SEASONAL,url:S(`${i.SEASONAL}`)},{name:i.SKELETON,url:S(`${i.SKELETON}`)},{name:i.VINTAGE,url:S(`${i.VINTAGE}`)}],k=e.ref([...P]),I=i.VUETIFUL,U=e.ref(I),H=()=>{const t=o=>{const r=k.value.find(n=>n.name===o);!r||N&&(localStorage.setItem("vuetiful-theme",r.name),document.body.setAttribute("data-theme",r.name))},s=o=>{if(N){const r=localStorage.getItem("vuetiful-theme");c(r||I,o)}},c=(o,r)=>{let n=k.value.find($=>$.name===o);n||(n=k.value.find($=>$.name===I)||k.value[0]);const a=n;U.value=a.name;const h=document.getElementById("theme");let p=a.url;const g=document.createElement("link");g.id="theme",g.href=p,g.type="text/css",g.rel="stylesheet",g.onload=()=>{h&&h.remove(),t(a.name),r&&r()};const T=document.querySelector("head");T&&T.appendChild(g)},m=()=>[...P],u=(o,r)=>({url:r,name:o}),l=o=>{k.value=[...o]};return{themes:e.readonly(k),chosenTheme:e.readonly(U),initializeTheme:s,loadTheme:c,THEMES:i,overwriteThemes:l,registerAllBuiltInThemes:m,registerTheme:u}};var he="";const Q=e.defineComponent({components:{DarkModeSwitch:V,VButton:b},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:m,themes:u,chosenTheme:l}=H(),{currentMode:o,MODE:r}=E(),n=e.ref(!1);e.onMounted(()=>{c()});const a="transition-all duration-[200ms]";function h(y){["Enter","Space"].includes(y.code)&&(y.preventDefault(),y.currentTarget.click())}const p=e.computed(()=>o.value===r.LIGHT?t.bgLight:t.bgDark),g=e.computed(()=>o.value===r.LIGHT?t.textOnLight:t.textOnDark),T=e.computed(()=>{var y;return`${a} 
+      ${p.value} 
       ${g.value} 
-      ${h.value} 
       ${t.width} 
       ${t.ring}
       ${t.roundedContainer}
-      ${(y=s.class)!=null?y:""}`}),S=e.computed(()=>`${a} 
-      ${t.height}`),D=e.computed(()=>`${a} 
+      ${(y=s.class)!=null?y:""}`}),$=e.computed(()=>`${a} 
+      ${t.height}`),_=e.computed(()=>`${a} 
       ${t.ring} 
-      ${t.rounded}`);return{onKeyDown:u,loadTheme:d,currentMode:o,classes:$,chosenTheme:i,themes:m,showPopup:n,listClasses:S,listItemClasses:D}}}),Q=t=>(e.pushScopeId("data-v-3283243a"),t=t(),e.popScopeId(),t),X={class:"cc-theme-switcher"},Y={class:"space-y-4"},Z={class:"flex items-center justify-between"},v=Q(()=>e.createElementVNode("h6",null,"Mode",-1)),ee={class:"flex flex-col gap-4"},te=["onClick"];function ne(t,s,c,d,m,i){const o=e.resolveComponent("VButton"),r=e.resolveComponent("DarkModeSwitch");return e.openBlock(),e.createElementBlock("div",X,[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",Y,[e.createElementVNode("section",Z,[v,e.createVNode(r)]),e.createElementVNode("nav",{class:e.normalizeClass(["list-nav -m-4 overflow-y-auto p-4",t.listClasses])},[e.createElementVNode("ul",ee,[(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.name?"bg-primary-50 text-primary-900":"bg-surface-200 text-surface-900"}`]),key:a,onClick:u=>t.loadTheme(n.name)},e.toDisplayString(n.name),11,te))),128))])],2)])],2)):e.createCommentVNode("",!0)])}var oe=b(J,[["render",ne],["__scopeId","data-v-3283243a"]]);function se(t){for(const s in _)t.component(s,_[s])}var re={install:se};l.DarkModeSwitch=V,l.MyConstants=G,l.MyUtil=W,l.ThemeSwitcher=oe,l.VButton=L,l.default=re,l.useDarkMode=M,l.useTheme=z,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+      ${t.rounded}`);return{onKeyDown:h,loadTheme:m,currentMode:o,classes:T,chosenTheme:l,themes:u,showPopup:n,listClasses:$,listItemClasses:_}}}),X=t=>(e.pushScopeId("data-v-3283243a"),t=t(),e.popScopeId(),t),Y={class:"cc-theme-switcher"},Z={class:"space-y-4"},v={class:"flex items-center justify-between"},ee=X(()=>e.createElementVNode("h6",null,"Mode",-1)),te={class:"flex flex-col gap-4"},ne=["onClick"];function oe(t,s,c,m,u,l){const o=e.resolveComponent("VButton"),r=e.resolveComponent("DarkModeSwitch");return e.openBlock(),e.createElementBlock("div",Y,[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",Z,[e.createElementVNode("section",v,[ee,e.createVNode(r)]),e.createElementVNode("nav",{class:e.normalizeClass(["list-nav -m-4 overflow-y-auto p-4",t.listClasses])},[e.createElementVNode("ul",te,[(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.name?"bg-primary-50 text-primary-900":"bg-surface-200 text-surface-900"}`]),key:a,onClick:h=>t.loadTheme(n.name)},e.toDisplayString(n.name),11,ne))),128))])],2)])],2)):e.createCommentVNode("",!0)])}var se=L(Q,[["render",oe],["__scopeId","data-v-3283243a"]]);function re(t){for(const s in D)t.component(s,D[s])}var ae={install:re};d.DarkModeSwitch=V,d.MyConstants=K,d.MyUtil=J,d.ThemeSwitcher=se,d.VButton=b,d.default=ae,d.useDarkMode=E,d.useTheme=H,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
     "prebuild": "node 'scripts/intellisense.js'",

package/src/index.ts

@@ -10,15 +10,6 @@ function install(app: any) {
 import "./assets/main.css";
 import "./styles/tailwind.css";
 
-import "./themes/theme-vuetiful.css";
-// import "./themes/theme-modern.css";
-// import "./themes/theme-rocket.css";
-// import "./themes/theme-sahara.css";
-// import "./themes/theme-seafoam.css";
-// import "./themes/theme-seasonal.css";
-// import "./themes/theme-test.css";
-// import "./themes/theme-vintage.css";
-
 export default { install };
 
 export * from "./components";

package/src/themes/{theme-vuetiful.css → theme-skeleton.css}

@@ -99,19 +99,19 @@
 }
 
 /* Headings */
-[data-theme='vuetiful'] h1,
-[data-theme='vuetiful'] h2,
-[data-theme='vuetiful'] h3,
-[data-theme='vuetiful'] h4,
-[data-theme='vuetiful'] h5,
-[data-theme='vuetiful'] h6 {
+[data-theme='skeleton'] h1,
+[data-theme='skeleton'] h2,
+[data-theme='skeleton'] h3,
+[data-theme='skeleton'] h4,
+[data-theme='skeleton'] h5,
+[data-theme='skeleton'] h6 {
 	font-weight: bold;
 }
 
-/* Applied to body with `<body data-theme="vuetiful">` */
+/* Applied to body with `<body data-theme="skeleton">` */
 /* Created with: https://csshero.org/mesher/ */
 /* prettier-ignore */
-[data-theme='vuetiful'] {
+[data-theme='skeleton'] {
 	background-image:
 			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
 			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);

package/src/themes/{theme-modern.css → theme-vuetiful-0.0.1.css}

@@ -7,9 +7,9 @@
 	--theme-font-family-heading: 'Quicksand', sans-serif;
 	--theme-font-color-base: var(--color-surface-900);
 	--theme-font-color-dark: var(--color-tertiary-50);
-	--theme-rounded-base: 9999px;
-	--theme-rounded-container: 24px;
-	--theme-border-base: 3px;
+	--theme-rounded-base: 12px;
+	--theme-rounded-container: 12px;
+	--theme-border-base: 0px;
 	/* =~= Theme On-X Colors =~= */
 	--on-primary: 0 0 0;
 	--on-secondary: 0 0 0;
@@ -98,27 +98,27 @@
 	--color-surface-900: 49 50 118; /* ⬅ #313276 */
 }
 
-[data-theme='modern'] h1,
-[data-theme='modern'] h2,
-[data-theme='modern'] h3,
-[data-theme='modern'] h4,
-[data-theme='modern'] h5,
-[data-theme='modern'] h6,
-[data-theme='modern'] a,
-[data-theme='modern'] button {
+[data-theme='vuetiful'] h1,
+[data-theme='vuetiful'] h2,
+[data-theme='vuetiful'] h3,
+[data-theme='vuetiful'] h4,
+[data-theme='vuetiful'] h5,
+[data-theme='vuetiful'] h6,
+[data-theme='vuetiful'] a,
+[data-theme='vuetiful'] button {
 	font-weight: bold;
 }
 
-/* Applied to body with `<body data-theme="modern">` */
+/* Applied to body with `<body data-theme="vuetiful">` */
 /* Created with: https://csshero.org/mesher/ */
-[data-theme='modern'] {
+[data-theme='vuetiful'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
 		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
 		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
 }
-.dark [data-theme='modern'] {
+.dark [data-theme='vuetiful'] {
 	/* prettier-ignore */
 	background-image:
 		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),

package/src/utils/theme/theme.ts

@@ -5,27 +5,31 @@ const { isBrowser } = usePlatform();
 
 interface Theme {
   name: string;
-  url?: string;
+  url: string;
 }
 
 const THEMES = {
   VUETIFUL: "vuetiful",
-  MODERN: "modern",
   ROCKET: "rocket",
   SAHARA: "sahara",
   SEAFOAM: "seafoam",
   SEASONAL: "seasonal",
+  SKELETON: "skeleton",
   VINTAGE: "vintage",
 };
 
+const builtInUrl = (name: string): string => {
+  return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
+};
+
 const builtInThemes: Array<Theme> = [
-  { name: THEMES.VUETIFUL },
-  { name: THEMES.MODERN },
-  { name: THEMES.ROCKET },
-  { name: THEMES.SAHARA },
-  { name: THEMES.SEAFOAM },
-  { name: THEMES.SEASONAL },
-  { name: THEMES.VINTAGE },
+  { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
+  { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
+  { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
+  { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
+  { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
+  { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
+  { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) },
 ];
 
 const themes: Ref<Array<Theme>> = ref([...builtInThemes]);
@@ -62,9 +66,6 @@ const useTheme = () => {
 
     const existingStyle = document.getElementById("theme");
     let themeUrl = theme.url;
-    if (!themeUrl) {
-      themeUrl = `https://code-coaching.dev/vuetiful-themes/theme-${theme.name}.css`;
-    }
 
     const link = document.createElement("link");
     link.id = "theme";
@@ -87,9 +88,8 @@ const useTheme = () => {
     return [...builtInThemes];
   };
 
-  const registerTheme = (name: string, url?: string): Theme => {
-    if (url) return { url, name };
-    return { name };
+  const registerTheme = (name: string, url: string): Theme => {
+    return { url, name };
   };
 
   const overwriteThemes = (newThemes: Array<Theme>): void => {