@code-coaching/vuetiful 0.23.1 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (151) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/types/components/VBootstrap.vue.d.ts +1 -1
  3. package/dist/types/components/atoms/VAvatar.vue.d.ts +1 -1
  4. package/dist/types/components/atoms/VLightSwitch.vue.d.ts +7 -3
  5. package/dist/types/components/atoms/index.d.ts +13 -13
  6. package/dist/types/components/index.d.ts +2 -2
  7. package/dist/types/components/molecules/VAlert.vue.d.ts +1 -1
  8. package/dist/types/components/molecules/VCodeBlock.vue.d.ts +2 -2
  9. package/dist/types/components/molecules/VDrawer.vue.d.ts +1 -1
  10. package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +1 -1
  11. package/dist/types/components/molecules/VRail/VRail.vue.d.ts +1 -1
  12. package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +1 -1
  13. package/dist/types/components/molecules/index.d.ts +21 -21
  14. package/dist/types/directives/clipboard.d.ts +1 -1
  15. package/dist/types/directives/index.d.ts +1 -1
  16. package/dist/types/index.d.ts +6 -6
  17. package/dist/types/props/props.d.ts +1 -1
  18. package/dist/types/services/dark-mode.service.d.ts +13 -13
  19. package/dist/types/services/drawer.service.d.ts +1 -1
  20. package/dist/types/services/index.d.ts +6 -6
  21. package/dist/types/types/index.d.ts +1 -1
  22. package/dist/types/utils/colors/colors.service.d.ts +69 -0
  23. package/dist/types/utils/index.d.ts +7 -3
  24. package/dist/types/utils/theme/theme-switcher.vue.d.ts +1 -1
  25. package/dist/types/utils/theme/theme.service.d.ts +9 -24
  26. package/dist/types/utils/theme/themes.d.ts +35 -0
  27. package/dist/vuetiful.es.mjs +456 -161
  28. package/dist/vuetiful.umd.js +71 -16
  29. package/package.json +1 -1
  30. package/src/assets/main.css +6 -6
  31. package/src/components/VBootstrap.vue +43 -43
  32. package/src/components/atoms/VAvatar.test.ts +71 -71
  33. package/src/components/atoms/VAvatar.vue +22 -23
  34. package/src/components/atoms/VBadge.test.ts +11 -11
  35. package/src/components/atoms/VBadge.vue +2 -2
  36. package/src/components/atoms/VButton.test.ts +82 -82
  37. package/src/components/atoms/VButton.vue +20 -21
  38. package/src/components/atoms/VChip.test.ts +11 -11
  39. package/src/components/atoms/VChip.vue +3 -3
  40. package/src/components/atoms/VLightSwitch.test.ts +63 -14
  41. package/src/components/atoms/VLightSwitch.vue +35 -46
  42. package/src/components/atoms/VRadio/VRadioDescription.test.ts +13 -13
  43. package/src/components/atoms/VRadio/VRadioDescription.vue +2 -2
  44. package/src/components/atoms/VRadio/VRadioGroup.test.ts +40 -40
  45. package/src/components/atoms/VRadio/VRadioGroup.vue +19 -22
  46. package/src/components/atoms/VRadio/VRadioItem.test.ts +67 -67
  47. package/src/components/atoms/VRadio/VRadioItem.vue +10 -13
  48. package/src/components/atoms/VRadio/VRadioLabel.test.ts +13 -13
  49. package/src/components/atoms/VRadio/VRadioLabel.vue +5 -3
  50. package/src/components/atoms/VSwitch/VSwitch.test.ts +33 -33
  51. package/src/components/atoms/VSwitch/VSwitch.vue +24 -27
  52. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +13 -13
  53. package/src/components/atoms/VSwitch/VSwitchDescription.vue +2 -2
  54. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +9 -9
  55. package/src/components/atoms/VSwitch/VSwitchGroup.vue +2 -2
  56. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +19 -19
  57. package/src/components/atoms/VSwitch/VSwitchLabel.vue +2 -2
  58. package/src/components/atoms/index.ts +13 -13
  59. package/src/components/index.ts +2 -2
  60. package/src/components/molecules/VAccordion/VAccordion.test.ts +11 -17
  61. package/src/components/molecules/VAccordion/VAccordion.vue +3 -3
  62. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +55 -55
  63. package/src/components/molecules/VAccordion/VAccordionItem.vue +9 -22
  64. package/src/components/molecules/VAlert.test.ts +38 -38
  65. package/src/components/molecules/VAlert.vue +25 -47
  66. package/src/components/molecules/VCard/VCard.test.ts +25 -25
  67. package/src/components/molecules/VCard/VCard.vue +13 -15
  68. package/src/components/molecules/VCard/VCardBody.test.ts +14 -14
  69. package/src/components/molecules/VCard/VCardBody.vue +4 -8
  70. package/src/components/molecules/VCard/VCardFooter.test.ts +22 -22
  71. package/src/components/molecules/VCard/VCardFooter.vue +10 -8
  72. package/src/components/molecules/VCard/VCardHeader.test.ts +25 -25
  73. package/src/components/molecules/VCard/VCardHeader.vue +7 -8
  74. package/src/components/molecules/VCodeBlock.test.ts +63 -63
  75. package/src/components/molecules/VCodeBlock.vue +27 -34
  76. package/src/components/molecules/VDrawer.test.ts +5 -5
  77. package/src/components/molecules/VDrawer.vue +10 -10
  78. package/src/components/molecules/VListbox/VListbox.test.ts +53 -53
  79. package/src/components/molecules/VListbox/VListbox.vue +31 -32
  80. package/src/components/molecules/VListbox/VListboxButton.test.ts +13 -13
  81. package/src/components/molecules/VListbox/VListboxButton.vue +5 -5
  82. package/src/components/molecules/VListbox/VListboxItem.test.ts +25 -25
  83. package/src/components/molecules/VListbox/VListboxItem.vue +7 -8
  84. package/src/components/molecules/VListbox/VListboxItems.test.ts +14 -14
  85. package/src/components/molecules/VListbox/VListboxItems.vue +9 -11
  86. package/src/components/molecules/VListbox/VListboxLabel.test.ts +10 -10
  87. package/src/components/molecules/VListbox/VListboxLabel.vue +2 -2
  88. package/src/components/molecules/VPreview.test.ts +26 -26
  89. package/src/components/molecules/VPreview.vue +22 -27
  90. package/src/components/molecules/VRail/VRail.test.ts +5 -5
  91. package/src/components/molecules/VRail/VRail.vue +7 -7
  92. package/src/components/molecules/VRail/VRailTile.test.ts +26 -28
  93. package/src/components/molecules/VRail/VRailTile.vue +13 -11
  94. package/src/components/molecules/VShell.test.ts +5 -5
  95. package/src/components/molecules/VShell.vue +11 -20
  96. package/src/components/molecules/VTabs/VTab.test.ts +69 -52
  97. package/src/components/molecules/VTabs/VTab.vue +13 -17
  98. package/src/components/molecules/VTabs/VTabPanel.test.ts +8 -8
  99. package/src/components/molecules/VTabs/VTabPanel.vue +1 -1
  100. package/src/components/molecules/VTabs/VTabs.test.ts +36 -36
  101. package/src/components/molecules/VTabs/VTabs.vue +18 -22
  102. package/src/components/molecules/index.ts +21 -21
  103. package/src/directives/clipboard.test.ts +9 -9
  104. package/src/directives/clipboard.ts +2 -2
  105. package/src/directives/index.ts +1 -1
  106. package/src/env.d.ts +2 -2
  107. package/src/index.ts +7 -7
  108. package/src/props/index.ts +1 -1
  109. package/src/props/props.ts +44 -44
  110. package/src/services/dark-mode.service.test.ts +64 -194
  111. package/src/services/dark-mode.service.ts +35 -54
  112. package/src/services/drawer.service.test.ts +21 -21
  113. package/src/services/drawer.service.ts +10 -10
  114. package/src/services/highlight.service.test.ts +12 -12
  115. package/src/services/highlight.service.ts +1 -1
  116. package/src/services/index.ts +6 -6
  117. package/src/services/rail.service.test.ts +7 -7
  118. package/src/services/rail.service.ts +2 -2
  119. package/src/services/settings.service.test.ts +5 -5
  120. package/src/services/settings.service.ts +1 -1
  121. package/src/styles/all.css +7 -7
  122. package/src/styles/elements/buttons.css +1 -1
  123. package/src/styles/elements/forms.css +7 -7
  124. package/src/styles/elements.css +13 -13
  125. package/src/styles/transitions.css +2 -2
  126. package/src/styles/typography.css +5 -5
  127. package/src/themes/theme-rocket.css +10 -10
  128. package/src/themes/theme-sahara.css +13 -13
  129. package/src/themes/theme-seafoam.css +13 -13
  130. package/src/themes/theme-seasonal.css +4 -4
  131. package/src/themes/theme-skeleton.css +7 -7
  132. package/src/themes/theme-vintage.css +12 -12
  133. package/src/themes/theme-vuetiful-0.0.1.css +13 -13
  134. package/src/types/index.ts +46 -46
  135. package/src/types/tailwind.ts +2 -21
  136. package/src/utils/colors/colors.service.ts +293 -0
  137. package/src/utils/index.ts +7 -3
  138. package/src/utils/platform/platform.service.test.ts +6 -6
  139. package/src/utils/platform/platform.service.ts +1 -1
  140. package/src/utils/theme/callback.test.ts +11 -7
  141. package/src/utils/theme/remove.test.ts +11 -9
  142. package/src/utils/theme/theme-switcher.vue +43 -49
  143. package/src/utils/theme/theme.service.test.ts +194 -84
  144. package/src/utils/theme/theme.service.ts +141 -81
  145. package/src/utils/theme/themes.ts +122 -0
  146. package/dist/types/components/index.test.d.ts +0 -1
  147. package/dist/types/index.test.d.ts +0 -1
  148. package/dist/types/utils/index.test.d.ts +0 -1
  149. package/src/components/index.test.ts +0 -10
  150. package/src/index.test.ts +0 -26
  151. package/src/utils/index.test.ts +0 -11
package/dist/vuetiful.es.mjs CHANGED
@@ -1,4 +1,4 @@
1
- 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";
1
+ import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, readonly, reactive, renderSlot, createBlock, resolveDynamicComponent, withCtx, Fragment, cloneVNode, h as h$1, inject, provide, onMounted, watchEffect, onUnmounted, watch, nextTick, toRaw, createCommentVNode, toRefs, createVNode, Transition, renderList, createTextVNode, pushScopeId, popScopeId, isRef, withDirectives, vShow, useAttrs } from "vue";
2
2
  const Variant = {
3
3
  Filled: "filled",
4
4
  FilledPrimary: "filled-primary",
@@ -144,65 +144,49 @@ const usePlatform = () => {
144
144
  };
145
145
  const { isBrowser: isBrowser$1 } = usePlatform();
146
146
  const MODE = {
147
- LIGHT: true,
148
- DARK: false
147
+ LIGHT: "light",
148
+ DARK: "dark"
149
149
  };
150
- const modeOsPrefers = ref(MODE.DARK);
151
- const currentMode = ref(MODE.DARK);
152
- const modeUserPrefers = ref(void 0);
153
- const isDark = computed(() => currentMode.value === MODE.DARK);
150
+ const defaultMode = MODE.DARK;
151
+ const chosenMode = ref(defaultMode);
152
+ const isDark = computed(() => chosenMode.value === MODE.DARK);
154
153
  const useDarkMode = () => {
155
- const getModeOsPrefers = () => {
156
- let prefersLightMode = false;
157
- if (isBrowser$1)
158
- prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
159
- setModeOsPrefers(prefersLightMode);
160
- return prefersLightMode;
161
- };
162
- const getModeUserPrefers = () => {
163
- if (isBrowser$1) {
164
- const mode = localStorage.getItem("modeUserPrefers");
165
- if (mode !== null)
166
- modeUserPrefers.value = mode === "true";
154
+ const getModeFromCookie = (cookies) => {
155
+ const cookie = cookies.split(";").find((c2) => c2.trim().startsWith("vuetiful-mode="));
156
+ if (cookie) {
157
+ const value = cookie.split("=")[1];
158
+ return value;
167
159
  }
168
- return modeUserPrefers.value;
169
- };
170
- const getModeAutoPrefers = () => {
171
- const os = getModeOsPrefers();
172
- const user = getModeUserPrefers();
173
- if (user === void 0)
174
- return os;
175
- return user;
160
+ return defaultMode;
176
161
  };
177
- const setModeOsPrefers = (value) => {
178
- modeOsPrefers.value = value;
179
- if (isBrowser$1) {
180
- localStorage.setItem("modeOsPrefers", value.toString());
181
- }
162
+ const applyModeSSR = (html, mode) => {
163
+ if (mode === MODE.DARK)
164
+ html = html.replace("<html", '<html class="dark"');
165
+ return html;
182
166
  };
183
- const setModeUserPrefers = (value) => {
184
- modeUserPrefers.value = value;
167
+ const initializeMode = () => {
185
168
  if (isBrowser$1) {
186
- localStorage.setItem("modeUserPrefers", value.toString());
169
+ const mode = getModeFromCookie(document.cookie);
170
+ applyMode(mode);
187
171
  }
188
172
  };
189
- const setModeCurrent = (value) => {
173
+ const applyMode = (value) => {
190
174
  const elemHtmlClasses = document.documentElement.classList;
191
175
  const classDark = "dark";
192
176
  value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
193
- currentMode.value = value;
194
- };
195
- const initializeMode = () => {
196
- const mode = getModeAutoPrefers();
197
- setModeCurrent(mode);
177
+ if (isBrowser$1) {
178
+ document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
179
+ }
180
+ chosenMode.value = value;
198
181
  };
199
182
  const autoModeWatcher = () => {
200
183
  const mql = window.matchMedia("(prefers-color-scheme: light)");
201
184
  const setMode = (value) => {
202
185
  const elemHtmlClasses = document.documentElement.classList;
203
186
  const classDark = `dark`;
204
- value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
205
- setModeCurrent(value);
187
+ const mode = value ? MODE.LIGHT : MODE.DARK;
188
+ mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
189
+ applyMode(mode);
206
190
  };
207
191
  setMode(mql.matches);
208
192
  mql.onchange = () => {
@@ -210,17 +194,13 @@ const useDarkMode = () => {
210
194
  };
211
195
  };
212
196
  return {
213
- modeOsPrefers: readonly(modeOsPrefers),
214
- modeUserPrefers: readonly(modeUserPrefers),
215
- currentMode: readonly(currentMode),
197
+ chosenMode,
216
198
  isDark: readonly(isDark),
217
- getModeOsPrefers,
218
- getModeUserPrefers,
219
- getModeAutoPrefers,
220
- setModeUserPrefers,
221
- setModeCurrent,
222
- autoModeWatcher,
223
199
  initializeMode,
200
+ applyMode,
201
+ autoModeWatcher,
202
+ applyModeSSR,
203
+ getModeFromCookie,
224
204
  MODE
225
205
  };
226
206
  };
@@ -46824,10 +46804,7 @@ const _sfc_main$u = defineComponent({
46824
46804
  }
46825
46805
  },
46826
46806
  setup(props, { attrs }) {
46827
- const { initializeMode, setModeCurrent, setModeUserPrefers, currentMode: currentMode2, MODE: MODE2 } = useDarkMode();
46828
- onMounted(() => {
46829
- initializeMode();
46830
- });
46807
+ const { applyMode, chosenMode: chosenMode2, MODE: MODE2 } = useDarkMode();
46831
46808
  const cTransition = `transition-all duration-[200ms]`;
46832
46809
  const cTrack = "cursor-pointer";
46833
46810
  const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
@@ -46837,9 +46814,8 @@ const _sfc_main$u = defineComponent({
46837
46814
  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"
46838
46815
  };
46839
46816
  const onToggleHandler = () => {
46840
- const toggle = !currentMode2.value;
46841
- setModeUserPrefers(toggle);
46842
- setModeCurrent(toggle);
46817
+ const toggle = chosenMode2.value === MODE2.LIGHT ? MODE2.DARK : MODE2.LIGHT;
46818
+ applyMode(toggle);
46843
46819
  };
46844
46820
  const onKeyDown = (event) => {
46845
46821
  if (["Enter", "Space"].includes(event.code)) {
@@ -46847,17 +46823,11 @@ const _sfc_main$u = defineComponent({
46847
46823
  event.currentTarget.click();
46848
46824
  }
46849
46825
  };
46850
- const trackBg = computed(
46851
- () => currentMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark
46852
- );
46853
- const thumbBg = computed(
46854
- () => currentMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight
46855
- );
46856
- const thumbPosition = computed(
46857
- () => currentMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : ""
46858
- );
46826
+ const trackBg = computed(() => chosenMode2.value === MODE2.LIGHT ? props.bgLight : props.bgDark);
46827
+ const thumbBg = computed(() => chosenMode2.value === MODE2.LIGHT ? props.bgDark : props.bgLight);
46828
+ const thumbPosition = computed(() => chosenMode2.value === MODE2.LIGHT ? "translate-x-[100%]" : "");
46859
46829
  const iconFill = computed(() => {
46860
- return currentMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
46830
+ return chosenMode2.value === MODE2.LIGHT ? props.textLight : props.textDark;
46861
46831
  });
46862
46832
  const classesTrack = computed(() => {
46863
46833
  var _a;
@@ -46874,8 +46844,9 @@ const _sfc_main$u = defineComponent({
46874
46844
  svgPath,
46875
46845
  onToggleHandler,
46876
46846
  onKeyDown,
46877
- currentMode: currentMode2,
46878
- iconFill
46847
+ chosenMode: chosenMode2,
46848
+ iconFill,
46849
+ MODE: MODE2
46879
46850
  };
46880
46851
  }
46881
46852
  });
@@ -46886,12 +46857,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
46886
46857
  class: normalizeClass(`lightswitch-track ${_ctx.classesTrack}`),
46887
46858
  onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onToggleHandler && _ctx.onToggleHandler(...args)),
46888
46859
  onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args)),
46889
- "on:keyup": "",
46890
- "on:keypress": "",
46891
46860
  role: "switch",
46892
46861
  "aria-label": "Light Switch",
46893
- "aria-checked": _ctx.currentMode,
46894
- title: `Toggle ${_ctx.currentMode === false ? "Dark" : "Light"} Mode`,
46862
+ "aria-checked": _ctx.chosenMode === _ctx.MODE.LIGHT,
46863
+ title: `Toggle ${_ctx.chosenMode === _ctx.MODE.DARK ? "Dark" : "Light"} Mode`,
46895
46864
  tabindex: "0"
46896
46865
  }, [
46897
46866
  createElementVNode("div", {
@@ -46904,7 +46873,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
46904
46873
  }, [
46905
46874
  createElementVNode("path", {
46906
46875
  fill: "currentColor",
46907
- d: _ctx.currentMode ? _ctx.svgPath.sun : _ctx.svgPath.moon
46876
+ d: _ctx.chosenMode === _ctx.MODE.LIGHT ? _ctx.svgPath.sun : _ctx.svgPath.moon
46908
46877
  }, null, 8, _hoisted_2$6)
46909
46878
  ], 2))
46910
46879
  ], 2)
@@ -48436,7 +48405,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
48436
48405
  }
48437
48406
  });
48438
48407
  var VPreview_vue_vue_type_style_index_0_scoped_true_lang = "";
48439
- const _withScopeId$3 = (n2) => (pushScopeId("data-v-73195296"), n2 = n2(), popScopeId(), n2);
48408
+ const _withScopeId$3 = (n2) => (pushScopeId("data-v-ef253f90"), n2 = n2(), popScopeId(), n2);
48440
48409
  const _hoisted_1$7 = { class: "vuetiful-previewer overflow-hidden shadow-2xl shadow-surface-500/10 rounded-container-token dark:shadow-black/10" };
48441
48410
  const _hoisted_2$5 = { class: "flex items-center gap-2" };
48442
48411
  const _hoisted_3$4 = /* @__PURE__ */ _withScopeId$3(() => /* @__PURE__ */ createElementVNode("svg", {
@@ -48694,7 +48663,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
48694
48663
  };
48695
48664
  }
48696
48665
  });
48697
- var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-73195296"]]);
48666
+ var VPreview = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ef253f90"]]);
48698
48667
  const _sfc_main$j = /* @__PURE__ */ defineComponent({
48699
48668
  __name: "VRail",
48700
48669
  props: {
@@ -48847,7 +48816,7 @@ const _sfc_main$h = defineComponent({
48847
48816
  }
48848
48817
  });
48849
48818
  var VListboxButton_vue_vue_type_style_index_0_scoped_true_lang = "";
48850
- const _withScopeId$2 = (n2) => (pushScopeId("data-v-5635c35e"), n2 = n2(), popScopeId(), n2);
48819
+ const _withScopeId$2 = (n2) => (pushScopeId("data-v-31089628"), n2 = n2(), popScopeId(), n2);
48851
48820
  const _hoisted_1$5 = { key: 0 };
48852
48821
  const _hoisted_2$3 = /* @__PURE__ */ _withScopeId$2(() => /* @__PURE__ */ createElementVNode("svg", {
48853
48822
  class: "icon",
@@ -48900,7 +48869,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
48900
48869
  };
48901
48870
  }
48902
48871
  });
48903
- var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-5635c35e"]]);
48872
+ var VListboxButton = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-31089628"]]);
48904
48873
  const _sfc_main$f = /* @__PURE__ */ defineComponent({
48905
48874
  __name: "VListboxItems",
48906
48875
  props: {
@@ -49342,7 +49311,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
49342
49311
  }
49343
49312
  });
49344
49313
  var VAccordionItem_vue_vue_type_style_index_0_scoped_true_lang = "";
49345
- const _withScopeId$1 = (n2) => (pushScopeId("data-v-6c055e30"), n2 = n2(), popScopeId(), n2);
49314
+ const _withScopeId$1 = (n2) => (pushScopeId("data-v-513d21fc"), n2 = n2(), popScopeId(), n2);
49346
49315
  const _hoisted_1$4 = { class: "vuetiful-accordion-title" };
49347
49316
  const _hoisted_2$2 = /* @__PURE__ */ _withScopeId$1(() => /* @__PURE__ */ createElementVNode("svg", {
49348
49317
  class: "vuetiful-accordion-item-icon-plus icon",
@@ -49412,9 +49381,9 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
49412
49381
  };
49413
49382
  }
49414
49383
  });
49415
- var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-6c055e30"]]);
49384
+ var VAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-513d21fc"]]);
49416
49385
  var VAlert_vue_vue_type_style_index_0_scoped_true_lang = "";
49417
- const _withScopeId = (n2) => (pushScopeId("data-v-5df26a83"), n2 = n2(), popScopeId(), n2);
49386
+ const _withScopeId = (n2) => (pushScopeId("data-v-5d6982bd"), n2 = n2(), popScopeId(), n2);
49418
49387
  const _hoisted_1$3 = {
49419
49388
  key: 0,
49420
49389
  class: "icon",
@@ -49557,7 +49526,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
49557
49526
  };
49558
49527
  }
49559
49528
  });
49560
- var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-5df26a83"]]);
49529
+ var VAlert = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-5d6982bd"]]);
49561
49530
  var VCard_vue_vue_type_style_index_0_lang = "";
49562
49531
  const _hoisted_1$2 = ["tabindex"];
49563
49532
  const _sfc_main$5 = /* @__PURE__ */ defineComponent({
@@ -49795,7 +49764,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
49795
49764
  }, toDisplayString(languageFormatter(__props.language)), 3),
49796
49765
  withDirectives((openBlock(), createBlock(unref(_sfc_main$w), {
49797
49766
  size: "sm",
49798
- class: normalizeClass(`vuetiful-code-block-button ${__props.classButton ? __props.classButton : "bg-[#171717] dark:bg-[#171717] text-[#a4a4a4] dark:text-[#a4a4a4]"}`),
49767
+ class: normalizeClass(`vuetiful-code-block-button ${__props.classButton ? __props.classButton : "bg-[#171717] text-[#a4a4a4] dark:bg-[#171717] dark:text-[#a4a4a4]"}`),
49799
49768
  onClick: _cache[0] || (_cache[0] = ($event) => onCopyClick())
49800
49769
  }, {
49801
49770
  default: withCtx(() => [
@@ -49858,6 +49827,198 @@ var components = /* @__PURE__ */ Object.freeze({
49858
49827
  });
49859
49828
  var main = "";
49860
49829
  var tailwind = "";
49830
+ const semanticNames = ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
49831
+ const useColors = () => {
49832
+ function hexToRgb(hex) {
49833
+ const sanitizedHex = hex.replaceAll("##", "#");
49834
+ const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
49835
+ if (!colorParts)
49836
+ return null;
49837
+ const [, r2, g2, b2] = colorParts;
49838
+ return {
49839
+ r: parseInt(r2, 16),
49840
+ g: parseInt(g2, 16),
49841
+ b: parseInt(b2, 16)
49842
+ };
49843
+ }
49844
+ function hexToTailwindRgbString(hex) {
49845
+ const sanitizedHex = hex.replaceAll("##", "#");
49846
+ const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
49847
+ if (!colorParts)
49848
+ return "(invalid)";
49849
+ const [, r2, g2, b2] = colorParts;
49850
+ return `${parseInt(r2, 16)} ${parseInt(g2, 16)} ${parseInt(b2, 16)}`;
49851
+ }
49852
+ function rgbToHex(r2, g2, b2) {
49853
+ const toHex = (c2) => `0${c2.toString(16)}`.slice(-2);
49854
+ return `#${toHex(r2)}${toHex(g2)}${toHex(b2)}`;
49855
+ }
49856
+ function generateA11yOnColor(hex) {
49857
+ const black = calculateRatio(hex, "#000000");
49858
+ const white = calculateRatio(hex, "#FFFFFF");
49859
+ return black < white ? "0 0 0" : "255 255 255";
49860
+ }
49861
+ function lighten(hex, intensity) {
49862
+ const color = hexToRgb(`#${hex}`);
49863
+ if (!color)
49864
+ return "";
49865
+ const r2 = Math.round(color.r + (255 - color.r) * intensity);
49866
+ const g2 = Math.round(color.g + (255 - color.g) * intensity);
49867
+ const b2 = Math.round(color.b + (255 - color.b) * intensity);
49868
+ return rgbToHex(r2, g2, b2);
49869
+ }
49870
+ function darken(hex, intensity) {
49871
+ const color = hexToRgb(hex);
49872
+ if (!color)
49873
+ return "";
49874
+ const r2 = Math.round(color.r * intensity);
49875
+ const g2 = Math.round(color.g * intensity);
49876
+ const b2 = Math.round(color.b * intensity);
49877
+ return rgbToHex(r2, g2, b2);
49878
+ }
49879
+ function generatePalette2(baseColor) {
49880
+ const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
49881
+ if (!hexValidation.test(baseColor))
49882
+ baseColor = "#CCCCCC";
49883
+ const hex500 = `#${baseColor}`.replace("##", "#");
49884
+ const response = {
49885
+ 500: { hex: hex500, rgb: hexToTailwindRgbString(hex500), on: generateA11yOnColor(hex500) }
49886
+ };
49887
+ const intensityMap = {
49888
+ 50: 0.85,
49889
+ 100: 0.8,
49890
+ 200: 0.75,
49891
+ 300: 0.6,
49892
+ 400: 0.3,
49893
+ 600: 0.9,
49894
+ 700: 0.75,
49895
+ 800: 0.6,
49896
+ 900: 0.49
49897
+ };
49898
+ [50, 100, 200, 300, 400].forEach((level) => {
49899
+ const hex = lighten(baseColor, intensityMap[level]);
49900
+ response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
49901
+ });
49902
+ [600, 700, 800, 900].forEach((level) => {
49903
+ const hex = darken(baseColor, intensityMap[level]);
49904
+ response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
49905
+ });
49906
+ return response;
49907
+ }
49908
+ const contrastLevels = {
49909
+ small: {
49910
+ AA: 1 / 4.5,
49911
+ AAA: 1 / 7
49912
+ },
49913
+ large: {
49914
+ AA: 1 / 3,
49915
+ AAA: 1 / 4.5
49916
+ }
49917
+ };
49918
+ function getLuminance(r2, g2, b2) {
49919
+ const { _r, _g, _b } = typeof r2 === "object" ? { _r: r2.r, _g: r2.g, _b: r2.b } : { _r: r2, _g: g2, _b: b2 };
49920
+ if (_r === void 0 || _g === void 0 || _b === void 0)
49921
+ throw new Error("Invalid RGB value!");
49922
+ const a2 = [_r, _g, _b].map(function(v2) {
49923
+ v2 /= 255;
49924
+ return v2 <= 0.03928 ? v2 / 12.92 : Math.pow((v2 + 0.055) / 1.055, 2.4);
49925
+ });
49926
+ return a2[0] * 0.2126 + a2[1] * 0.7152 + a2[2] * 0.0722;
49927
+ }
49928
+ function destringRgb(rgbString) {
49929
+ const rgb = rgbString.match(/(\d+),?\s*(\d+),?\s*(\d+)/);
49930
+ if (!rgb)
49931
+ throw new Error("Invalid RGB string!");
49932
+ return { r: parseInt(rgb[1], 10), g: parseInt(rgb[2], 10), b: parseInt(rgb[3], 10) };
49933
+ }
49934
+ function handleStringColor(colorString, returnType = "rgb") {
49935
+ if (colorString.includes("--")) {
49936
+ colorString = colorString.replace(/var\(|\)/g, "");
49937
+ const cssVarHydrated = getComputedStyle(document.documentElement).getPropertyValue(colorString).trim();
49938
+ return handleStringColor(cssVarHydrated, returnType);
49939
+ }
49940
+ if (colorString.includes(" ")) {
49941
+ const rgb = destringRgb(colorString);
49942
+ return returnType === "hex" ? rgbToHex(rgb.r, rgb.g, rgb.b) : rgb;
49943
+ }
49944
+ if (colorString.includes("#")) {
49945
+ const rgb = hexToRgb(colorString);
49946
+ if (!rgb)
49947
+ return "(invalid)";
49948
+ return returnType === "hex" ? colorString : rgb;
49949
+ }
49950
+ return colorString;
49951
+ }
49952
+ function calculateRatio(luminance1, luminance2) {
49953
+ const lum1 = typeof luminance1 === "string" ? getLuminance(handleStringColor(luminance1)) : luminance1;
49954
+ const lum2 = typeof luminance2 === "string" ? getLuminance(handleStringColor(luminance2)) : luminance2;
49955
+ if (lum1 === void 0 || lum2 === void 0)
49956
+ throw new Error("Luminance is undefined!");
49957
+ return lum1 > lum2 ? (lum2 + 0.05) / (lum1 + 0.05) : (lum1 + 0.05) / (lum2 + 0.05);
49958
+ }
49959
+ function textPasses(textColor, backgroundColor, size, level) {
49960
+ const ratio = calculateRatio(textColor, backgroundColor);
49961
+ return ratio <= contrastLevels[size][level];
49962
+ }
49963
+ function hexValueIsValid(textColor) {
49964
+ return /^#[0-9A-F]{6}$/i.test(textColor);
49965
+ }
49966
+ function getPassReport(textColor, backgroundColor) {
49967
+ const _textColor = handleStringColor(textColor, "hex");
49968
+ const _backgroundColor = handleStringColor(backgroundColor, "hex");
49969
+ const contrast = calculateRatio(_textColor, _backgroundColor);
49970
+ const smallAA = textPasses(_textColor, _backgroundColor, "small", "AA");
49971
+ const smallAAA = textPasses(_textColor, _backgroundColor, "small", "AAA");
49972
+ const largeAA = textPasses(_textColor, _backgroundColor, "large", "AA");
49973
+ const largeAAA = textPasses(_textColor, _backgroundColor, "large", "AAA");
49974
+ const fails = !smallAA && !smallAAA && !largeAA && !largeAAA;
49975
+ const AAAEmoji = '<i class="fa-solid fa-heart"></i>';
49976
+ const AAEmoji = '<i class="fa-solid fa-star"></i>';
49977
+ const largeAAEmoji = '<i class="fa-solid fa-star-half-stroke"></i>';
49978
+ const failEmoji = '<i class="fa-solid fa-triangle-exclamation"></i>';
49979
+ const report = {
49980
+ emoji: smallAAA ? AAAEmoji : smallAA ? AAEmoji : largeAA ? largeAAEmoji : failEmoji,
49981
+ note: `${_textColor} and ${_backgroundColor} ` + (smallAAA ? "has great contrast!" : smallAA ? "is satisfactory for larger text" : largeAA ? "has poor contrast" : "fail contrast guidelines")
49982
+ };
49983
+ return {
49984
+ textColor: _textColor,
49985
+ backgroundColor: _backgroundColor,
49986
+ contrast,
49987
+ report,
49988
+ smallAA,
49989
+ smallAAA,
49990
+ largeAA,
49991
+ largeAAA,
49992
+ fails
49993
+ };
49994
+ }
49995
+ const hexValuesAreValid2 = (colors) => {
49996
+ let valid = true;
49997
+ colors == null ? void 0 : colors.forEach((color) => {
49998
+ valid = valid && hexValueIsValid(color.hex);
49999
+ });
50000
+ return valid;
50001
+ };
50002
+ return {
50003
+ hexToRgb,
50004
+ hexToTailwindRgbString,
50005
+ rgbToHex,
50006
+ generateA11yOnColor,
50007
+ lighten,
50008
+ darken,
50009
+ generatePalette: generatePalette2,
50010
+ contrastLevels,
50011
+ getLuminance,
50012
+ destringRgb,
50013
+ handleStringColor,
50014
+ calculateRatio,
50015
+ textPasses,
50016
+ hexValueIsValid,
50017
+ getPassReport,
50018
+ hexValuesAreValid: hexValuesAreValid2,
50019
+ semanticNames
50020
+ };
50021
+ };
49861
50022
  const _hoisted_1 = { class: "vuetiful-theme-switcher" };
49862
50023
  const _hoisted_2 = { class: "flex items-center justify-between" };
49863
50024
  const _hoisted_3 = /* @__PURE__ */ createElementVNode("div", { class: "text-lg" }, "Mode", -1);
@@ -49894,11 +50055,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
49894
50055
  }
49895
50056
  },
49896
50057
  setup(__props) {
49897
- const { initializeTheme, loadTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
50058
+ const { applyTheme, themes: themes2, chosenTheme: chosenTheme2 } = useTheme();
49898
50059
  const showPopup = ref(false);
49899
- onMounted(() => {
49900
- initializeTheme();
49901
- });
49902
50060
  return (_ctx, _cache) => {
49903
50061
  return openBlock(), createElementBlock("div", _hoisted_1, [
49904
50062
  createVNode(unref(_sfc_main$w), {
@@ -49923,9 +50081,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
49923
50081
  }, [
49924
50082
  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(themes2), (theme, index2) => {
49925
50083
  return openBlock(), createBlock(unref(_sfc_main$w), {
49926
- 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" : ""}`]),
50084
+ class: normalizeClass(["vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer", `${__props.classListItem} ${unref(chosenTheme2).name === theme.name ? "variant-filled-surface" : ""}`]),
49927
50085
  key: index2,
49928
- onClick: ($event) => unref(loadTheme)(theme.name)
50086
+ onClick: ($event) => unref(applyTheme)(theme)
49929
50087
  }, {
49930
50088
  default: withCtx(() => [
49931
50089
  createTextVNode(toDisplayString(theme.name), 1)
@@ -49939,92 +50097,229 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
49939
50097
  };
49940
50098
  }
49941
50099
  });
50100
+ const themes = [
50101
+ {
50102
+ name: "vuetiful",
50103
+ gradients: {
50104
+ light: "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%)",
50105
+ dark: "radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%), radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%), radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%)"
50106
+ },
50107
+ colors: {
50108
+ primary: { key: "primary", label: "Primary", hex: "#EC4899", rgb: "0 0 0", on: "0 0 0" },
50109
+ secondary: { key: "secondary", label: "Secondary", hex: "#06B6D4", rgb: "0 0 0", on: "0 0 0" },
50110
+ tertiary: { key: "tertiary", label: "Tertiary", hex: "#14B8A6", rgb: "0 0 0", on: "0 0 0" },
50111
+ success: { key: "success", label: "Success", hex: "#84CC16", rgb: "0 0 0", on: "0 0 0" },
50112
+ warning: { key: "warning", label: "Warning", hex: "#EAB308", rgb: "0 0 0", on: "0 0 0" },
50113
+ error: { key: "error", label: "Error", hex: "#EF4444", rgb: "0 0 0", on: "255 255 255" },
50114
+ surface: { key: "surface", label: "Surface", hex: "#6366F1", rgb: "0 0 0", on: "255 255 255" }
50115
+ },
50116
+ fonts: {
50117
+ base: "system",
50118
+ customBase: "Quicksand",
50119
+ baseImports: '@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");',
50120
+ headings: "system",
50121
+ customHeadings: "Quicksand",
50122
+ headingImports: ""
50123
+ },
50124
+ textColorLight: "0 0 0",
50125
+ textColorDark: "255 255 255",
50126
+ roundedBase: "12px",
50127
+ roundedContainer: "12px",
50128
+ borderBase: "0px",
50129
+ customCss: `
50130
+ [data-theme="vuetiful"] h1,
50131
+ [data-theme="vuetiful"] h2,
50132
+ [data-theme="vuetiful"] h3,
50133
+ [data-theme="vuetiful"] h4,
50134
+ [data-theme="vuetiful"] h5,
50135
+ [data-theme="vuetiful"] h6,
50136
+ [data-theme="vuetiful"] a,
50137
+ [data-theme="vuetiful"] button {
50138
+ font-weight: bold;
50139
+ }`
50140
+ },
50141
+ {
50142
+ name: "rocket",
50143
+ gradients: {
50144
+ light: "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%)",
50145
+ dark: "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%)"
50146
+ },
50147
+ colors: {
50148
+ primary: { key: "primary", label: "Primary", hex: "#06b6d4", rgb: "0 0 0", on: "0 0 0" },
50149
+ secondary: { key: "secondary", label: "Secondary", hex: "#3b82f6", rgb: "0 0 0", on: "255 255 255" },
50150
+ tertiary: { key: "tertiary", label: "Tertiary", hex: "#3b82f6", rgb: "0 0 0", on: "255 255 255" },
50151
+ success: { key: "success", label: "Success", hex: "#4ccb15", rgb: "0 0 0", on: "0 0 0" },
50152
+ warning: { key: "warning", label: "Warning", hex: "#f4c12a", rgb: "0 0 0", on: "0 0 0" },
50153
+ error: { key: "error", label: "Error", hex: "#b52c55", rgb: "0 0 0", on: "255 255 255" },
50154
+ surface: { key: "surface", label: "Surface", hex: "#64748b", rgb: "0 0 0", on: "255 255 255" }
50155
+ },
50156
+ fonts: {
50157
+ base: "system",
50158
+ customBase: "Roboto",
50159
+ baseImports: '@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");',
50160
+ headings: "system",
50161
+ customHeadings: "Space Grotesk",
50162
+ headingImports: '@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");'
50163
+ },
50164
+ textColorLight: "0 0 0",
50165
+ textColorDark: "255 255 255",
50166
+ roundedBase: "0px",
50167
+ roundedContainer: "0px",
50168
+ borderBase: "0px",
50169
+ customCss: `
50170
+ [data-theme='rocket'] h1,
50171
+ [data-theme='rocket'] h2,
50172
+ [data-theme='rocket'] h3,
50173
+ [data-theme='rocket'] h4,
50174
+ [data-theme='rocket'] h5,
50175
+ [data-theme='rocket'] h6 {
50176
+ font-weight: bold;
50177
+ }`
50178
+ }
50179
+ ];
49942
50180
  const { isBrowser } = usePlatform();
49943
- const THEMES = {
49944
- VUETIFUL: "vuetiful",
49945
- ROCKET: "rocket",
49946
- SAHARA: "sahara",
49947
- SEAFOAM: "seafoam",
49948
- SEASONAL: "seasonal",
49949
- SKELETON: "skeleton",
49950
- VINTAGE: "vintage"
49951
- };
49952
- const builtInUrl = (name) => {
49953
- return `https://code-coaching.dev/vuetiful-themes/theme-${name}.css`;
50181
+ const chosenTheme = ref(themes[0]);
50182
+ const { generatePalette, hexValuesAreValid } = useColors();
50183
+ const generateColorCSS = (theme) => {
50184
+ let newCSS = "";
50185
+ const newPalette = {};
50186
+ Object.values(theme.colors).forEach((color) => {
50187
+ const colorKey = color.key;
50188
+ newPalette[color.key] = generatePalette(color.hex);
50189
+ newCSS += "\n ";
50190
+ newCSS += `/* ${colorKey} | ${newPalette[colorKey][500].hex} */
50191
+ `;
50192
+ for (let [k2, v2] of Object.entries(newPalette[colorKey])) {
50193
+ newCSS += `--color-${colorKey}-${k2}: ${v2.rgb}; /* \u2B05 ${v2.hex} */
50194
+ `;
50195
+ }
50196
+ });
50197
+ return newCSS;
49954
50198
  };
49955
- const builtInThemes = [
49956
- { name: THEMES.VUETIFUL, url: builtInUrl(`${THEMES.VUETIFUL}-0.0.1`) },
49957
- { name: THEMES.ROCKET, url: builtInUrl(`${THEMES.ROCKET}`) },
49958
- { name: THEMES.SAHARA, url: builtInUrl(`${THEMES.SAHARA}`) },
49959
- { name: THEMES.SEAFOAM, url: builtInUrl(`${THEMES.SEAFOAM}`) },
49960
- { name: THEMES.SEASONAL, url: builtInUrl(`${THEMES.SEASONAL}`) },
49961
- { name: THEMES.SKELETON, url: builtInUrl(`${THEMES.SKELETON}`) },
49962
- { name: THEMES.VINTAGE, url: builtInUrl(`${THEMES.VINTAGE}`) }
49963
- ];
49964
- const themes = ref([...builtInThemes]);
49965
- const defaultTheme = THEMES.VUETIFUL;
49966
- const chosenTheme = ref(defaultTheme);
49967
50199
  const useTheme = () => {
49968
- const saveThemeToStorage = (name) => {
49969
- const theme = themes.value.find((t2) => t2.name === name);
49970
- if (!theme)
49971
- return;
49972
- if (isBrowser) {
49973
- localStorage.setItem("vuetiful-theme", theme.name);
49974
- document.body.setAttribute("data-theme", theme.name);
49975
- }
49976
- };
49977
- const initializeTheme = (callback) => {
49978
- if (isBrowser) {
49979
- const storedTheme = localStorage.getItem("vuetiful-theme");
49980
- if (storedTheme)
49981
- loadTheme(storedTheme, callback);
49982
- else
49983
- loadTheme(defaultTheme, callback);
50200
+ const changeDataTheme = (name) => document.body.setAttribute("data-theme", name);
50201
+ const getThemeFromCookie = (cookies) => {
50202
+ const themeName = getThemeNameFromCookie(cookies);
50203
+ const theme = themes.find((t2) => t2.name === themeName);
50204
+ if (theme)
50205
+ return theme;
50206
+ return themes[0];
50207
+ };
50208
+ const getThemeNameFromCookie = (cookies) => {
50209
+ const cookie = cookies.split(";").find((c2) => c2.trim().startsWith(`vuetiful-theme=`));
50210
+ const value = cookie == null ? void 0 : cookie.split("=")[1];
50211
+ return value || "";
50212
+ };
50213
+ const applyThemeSSR = (html, theme) => {
50214
+ chosenTheme.value = theme;
50215
+ const css2 = generateCss(theme);
50216
+ html = html.replace("</head>", `<style type="text/css" id="vuetiful-theme">${css2}</style></head>`);
50217
+ html = html.replace("<body", `<body data-theme="${theme.name}"`);
50218
+ return html;
50219
+ };
50220
+ const generateCss = (theme) => {
50221
+ if (hexValuesAreValid(Object.values(theme.colors))) {
50222
+ return `${theme.fonts.baseImports}
50223
+ ${theme.fonts.headingImports}
50224
+ :root {
50225
+ /* =~= Theme Properties =~= */
50226
+ --theme-font-family-base: ${theme.fonts.customBase ? `"${theme.fonts.customBase}", ` : ""}${theme.fonts.base};
50227
+ --theme-font-family-heading: ${theme.fonts.customHeadings ? `"${theme.fonts.customHeadings}", ` : ""}${theme.fonts.headings};
50228
+ --theme-font-color-base: ${theme.textColorLight};
50229
+ --theme-font-color-dark: ${theme.textColorDark};
50230
+ --theme-rounded-base: ${theme.roundedBase};
50231
+ --theme-rounded-container: ${theme.roundedContainer};
50232
+ --theme-border-base: ${theme.borderBase};
50233
+
50234
+ /* =~= Theme On-X Colors =~= */
50235
+ --on-primary: ${theme.colors.primary.on};
50236
+ --on-secondary: ${theme.colors.secondary.on};
50237
+ --on-tertiary: ${theme.colors.tertiary.on};
50238
+ --on-success: ${theme.colors.success.on};
50239
+ --on-warning: ${theme.colors.warning.on};
50240
+ --on-error: ${theme.colors.error.on};
50241
+ --on-surface: ${theme.colors.surface.on};
50242
+
50243
+ /* =~= Theme Colors =~= */
50244
+ ${generateColorCSS(theme)}
50245
+ }
50246
+
50247
+ ${theme.gradients.light.length ? `[data-theme="${theme.name}"] {
50248
+ background-image:
50249
+ ${theme.gradients.light};
50250
+ }` : ""}
50251
+ ${theme.gradients.dark.length ? `.dark [data-theme="${theme.name}"] {
50252
+ background-image:
50253
+ ${theme.gradients.dark};
50254
+ }` : ""}
50255
+ ${theme.customCss}
50256
+ `;
49984
50257
  }
50258
+ return "";
49985
50259
  };
49986
- const loadTheme = (themeName, callback) => {
49987
- let themeToLoad = themes.value.find((t2) => t2.name === themeName);
49988
- if (!themeToLoad)
49989
- themeToLoad = themes.value.find((t2) => t2.name === defaultTheme) || themes.value[0];
49990
- const theme = themeToLoad;
49991
- chosenTheme.value = theme.name;
49992
- const existingStyle = document.getElementById("theme");
49993
- let themeUrl = theme.url;
49994
- const link = document.createElement("link");
49995
- link.id = "theme";
49996
- link.href = themeUrl;
49997
- link.type = "text/css";
49998
- link.rel = "stylesheet";
49999
- link.onload = () => {
50260
+ const applyTheme = (theme, callback) => {
50261
+ const existingStyle = document.getElementById("vuetiful-theme");
50262
+ const themeCss = generateCss(theme);
50263
+ const style = document.createElement("style");
50264
+ style.innerHTML = themeCss;
50265
+ style.id = "vuetiful-theme";
50266
+ style.onload = () => {
50000
50267
  if (existingStyle)
50001
50268
  existingStyle.remove();
50002
- saveThemeToStorage(theme.name);
50003
50269
  if (callback)
50004
50270
  callback();
50005
50271
  };
50006
50272
  const head = document.querySelector("head");
50007
50273
  if (head)
50008
- head.appendChild(link);
50009
- };
50010
- const registerAllBuiltInThemes = () => {
50011
- return [...builtInThemes];
50274
+ head.appendChild(style);
50275
+ chosenTheme.value = theme;
50276
+ if (isBrowser) {
50277
+ document.cookie = `vuetiful-theme=${theme.name};path=/;max-age=31536000;SameSite=Lax`;
50278
+ changeDataTheme(theme.name);
50279
+ }
50012
50280
  };
50013
- const registerTheme = (name, url) => {
50014
- return { url, name };
50281
+ const initializeTheme = (callback) => {
50282
+ if (isBrowser) {
50283
+ const themeName = getThemeNameFromCookie(document.cookie);
50284
+ if (themeName === "custom") {
50285
+ const storedThemeJson = localStorage.getItem("vuetiful-custom-theme");
50286
+ let storedTheme = null;
50287
+ try {
50288
+ storedTheme = storedThemeJson ? JSON.parse(storedThemeJson) : null;
50289
+ if (storedTheme) {
50290
+ applyTheme(storedTheme, callback);
50291
+ registerTheme(storedTheme);
50292
+ }
50293
+ } catch (e2) {
50294
+ applyTheme(themes[0], callback);
50295
+ }
50296
+ } else {
50297
+ const theme = themes.find((t2) => t2.name === themeName);
50298
+ if (theme) {
50299
+ applyTheme(theme, callback);
50300
+ } else {
50301
+ applyTheme(themes[0], callback);
50302
+ }
50303
+ }
50304
+ }
50015
50305
  };
50016
- const overwriteThemes = (newThemes) => {
50017
- themes.value = [...newThemes];
50306
+ const registerTheme = (theme) => {
50307
+ const existingTheme = themes.find((t2) => t2.name === theme.name);
50308
+ if (existingTheme) {
50309
+ const index2 = themes.indexOf(existingTheme);
50310
+ themes[index2] = theme;
50311
+ } else {
50312
+ themes.push(theme);
50313
+ }
50018
50314
  };
50019
50315
  return {
50020
- themes: readonly(themes),
50021
- chosenTheme: readonly(chosenTheme),
50316
+ chosenTheme,
50317
+ themes,
50318
+ applyThemeSSR,
50319
+ applyTheme,
50320
+ getThemeFromCookie,
50022
50321
  initializeTheme,
50023
- loadTheme,
50024
- saveThemeToStorage,
50025
- THEMES,
50026
- overwriteThemes,
50027
- registerAllBuiltInThemes,
50322
+ changeDataTheme,
50028
50323
  registerTheme
50029
50324
  };
50030
50325
  };
@@ -50039,4 +50334,4 @@ function install(app) {
50039
50334
  }
50040
50335
  }
50041
50336
  var index = { install };
50042
- 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 };
50337
+ 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, useColors, useDarkMode, useDrawer, useHighlight, usePlatform, useRail, useSettings, useTheme, clipboard as vClipboard };