@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/src/services/dark-mode.service.ts CHANGED
@@ -1,73 +1,58 @@
1
- import { computed, readonly, Ref, ref } from "vue";
2
- import { usePlatform } from "../utils/platform/platform.service";
1
+ import { computed, readonly, ref } from 'vue';
2
+ import { usePlatform } from '../utils/platform/platform.service';
3
3
 
4
4
  const { isBrowser } = usePlatform();
5
5
 
6
6
  const MODE = {
7
- LIGHT: true,
8
- DARK: false,
7
+ LIGHT: 'light',
8
+ DARK: 'dark',
9
9
  };
10
+ export type Mode = (typeof MODE)[keyof typeof MODE];
10
11
 
11
- const modeOsPrefers = ref(MODE.DARK);
12
- const currentMode = ref(MODE.DARK);
13
- const modeUserPrefers: Ref<boolean | undefined> = ref(undefined);
14
- const isDark = computed(() => currentMode.value === MODE.DARK);
12
+ const defaultMode = MODE.DARK;
13
+ const chosenMode = ref(defaultMode);
14
+ const isDark = computed(() => chosenMode.value === MODE.DARK);
15
15
 
16
16
  const useDarkMode = () => {
17
- const getModeOsPrefers = (): boolean => {
18
- let prefersLightMode = false;
19
- if (isBrowser) prefersLightMode = window.matchMedia("(prefers-color-scheme: light)").matches;
20
- setModeOsPrefers(prefersLightMode);
21
- return prefersLightMode;
22
- };
23
-
24
- const getModeUserPrefers = (): boolean | undefined => {
25
- if (isBrowser) {
26
- const mode = localStorage.getItem("modeUserPrefers");
27
- if (mode !== null) modeUserPrefers.value = mode === "true";
17
+ const getModeFromCookie = (cookies: string) => {
18
+ const cookie = cookies.split(';').find((c) => c.trim().startsWith('vuetiful-mode='));
19
+ if (cookie) {
20
+ const value = cookie.split('=')[1];
21
+ return value;
28
22
  }
29
- return modeUserPrefers.value;
23
+ return defaultMode;
30
24
  };
31
25
 
32
- const getModeAutoPrefers = (): boolean => {
33
- const os = getModeOsPrefers();
34
- const user = getModeUserPrefers();
35
- if (user === undefined) return os;
36
- return user;
26
+ const applyModeSSR = (html: string, mode: Mode): string => {
27
+ if (mode === MODE.DARK) html = html.replace('<html', '<html class="dark"');
28
+ return html;
37
29
  };
38
30
 
39
- const setModeOsPrefers = (value: boolean) => {
40
- modeOsPrefers.value = value;
41
- if (isBrowser) {
42
- localStorage.setItem("modeOsPrefers", value.toString());
43
- }
44
- };
45
- const setModeUserPrefers = (value: boolean): void => {
46
- modeUserPrefers.value = value;
31
+ const initializeMode = () => {
47
32
  if (isBrowser) {
48
- localStorage.setItem("modeUserPrefers", value.toString());
33
+ const mode = getModeFromCookie(document.cookie);
34
+ applyMode(mode);
49
35
  }
50
36
  };
51
37
 
52
- const setModeCurrent = (value: boolean) => {
38
+ const applyMode = (value: Mode) => {
53
39
  const elemHtmlClasses = document.documentElement.classList;
54
- const classDark = "dark";
40
+ const classDark = 'dark';
55
41
  value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
56
- currentMode.value = value;
57
- };
58
-
59
- const initializeMode = (): void => {
60
- const mode = getModeAutoPrefers();
61
- setModeCurrent(mode);
42
+ if (isBrowser) {
43
+ document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
44
+ }
45
+ chosenMode.value = value;
62
46
  };
63
47
 
64
48
  const autoModeWatcher = (): void => {
65
- const mql = window.matchMedia("(prefers-color-scheme: light)");
49
+ const mql = window.matchMedia('(prefers-color-scheme: light)');
66
50
  const setMode = (value: boolean) => {
67
51
  const elemHtmlClasses = document.documentElement.classList;
68
52
  const classDark = `dark`;
69
- value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
70
- setModeCurrent(value);
53
+ const mode = value ? MODE.LIGHT : MODE.DARK;
54
+ mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
55
+ applyMode(mode);
71
56
  };
72
57
  setMode(mql.matches);
73
58
  mql.onchange = () => {
@@ -76,17 +61,13 @@ const useDarkMode = () => {
76
61
  };
77
62
 
78
63
  return {
79
- modeOsPrefers: readonly(modeOsPrefers),
80
- modeUserPrefers: readonly(modeUserPrefers),
81
- currentMode: readonly(currentMode),
64
+ chosenMode,
82
65
  isDark: readonly(isDark),
83
- getModeOsPrefers,
84
- getModeUserPrefers,
85
- getModeAutoPrefers,
86
- setModeUserPrefers,
87
- setModeCurrent,
88
- autoModeWatcher,
89
66
  initializeMode,
67
+ applyMode,
68
+ autoModeWatcher,
69
+ applyModeSSR,
70
+ getModeFromCookie,
90
71
  MODE,
91
72
  };
92
73
  };
package/src/services/drawer.service.test.ts CHANGED
@@ -1,41 +1,41 @@
1
- import { describe, expect, it } from "vitest";
2
- import { useDrawer } from "./drawer.service";
1
+ import { describe, expect, test } from 'vitest';
2
+ import { useDrawer } from './drawer.service';
3
3
 
4
4
  const { drawer, open, close } = useDrawer();
5
5
 
6
- describe("useDrawer", () => {
7
- describe("defaults", () => {
8
- it("should have the default values", () => {
9
- expect(drawer.id).toBe("default");
6
+ describe('useDrawer', () => {
7
+ describe('defaults', () => {
8
+ test('should have the default values', () => {
9
+ expect(drawer.id).toBe('default');
10
10
  expect(drawer.open).toBe(false);
11
- expect(drawer.position).toBe("left");
11
+ expect(drawer.position).toBe('left');
12
12
  expect(drawer.duration).toBe(300);
13
- expect(drawer.regionBackdrop).toBe("");
14
- expect(drawer.regionDrawer).toBe("");
13
+ expect(drawer.regionBackdrop).toBe('');
14
+ expect(drawer.regionDrawer).toBe('');
15
15
  });
16
16
  });
17
17
 
18
- describe("open", () => {
19
- it("should use the settings", () => {
18
+ describe('open', () => {
19
+ test('should use the settings', () => {
20
20
  open({
21
- id: "test",
21
+ id: 'test',
22
22
  open: true,
23
- position: "right",
23
+ position: 'right',
24
24
  duration: 150,
25
- regionBackdrop: "backdrop",
26
- regionDrawer: "drawer",
25
+ regionBackdrop: 'backdrop',
26
+ regionDrawer: 'drawer',
27
27
  });
28
- expect(drawer.id).toBe("test");
28
+ expect(drawer.id).toBe('test');
29
29
  expect(drawer.open).toBe(true);
30
- expect(drawer.position).toBe("right");
30
+ expect(drawer.position).toBe('right');
31
31
  expect(drawer.duration).toBe(150);
32
- expect(drawer.regionBackdrop).toBe("backdrop");
33
- expect(drawer.regionDrawer).toBe("drawer");
32
+ expect(drawer.regionBackdrop).toBe('backdrop');
33
+ expect(drawer.regionDrawer).toBe('drawer');
34
34
  });
35
35
  });
36
36
 
37
- describe("close", () => {
38
- it("should set the drawer to close", () => {
37
+ describe('close', () => {
38
+ test('should set the drawer to close', () => {
39
39
  open();
40
40
  expect(drawer.open).toBe(true);
41
41
  close();
package/src/services/drawer.service.ts CHANGED
@@ -1,10 +1,10 @@
1
- import { reactive, readonly } from "vue";
1
+ import { reactive, readonly } from 'vue';
2
2
 
3
3
  export interface DrawerSettings {
4
4
  id?: string;
5
5
  open?: boolean;
6
6
 
7
- position?: "left" | "top" | "right" | "bottom";
7
+ position?: 'left' | 'top' | 'right' | 'bottom';
8
8
  duration?: 150 | 300;
9
9
 
10
10
  regionBackdrop?: string;
@@ -14,22 +14,22 @@ export interface DrawerSettings {
14
14
  }
15
15
 
16
16
  const drawer = reactive<DrawerSettings>({
17
- id: "default",
17
+ id: 'default',
18
18
  open: false,
19
- position: "left",
19
+ position: 'left',
20
20
  duration: 300,
21
- regionBackdrop: "",
22
- regionDrawer: "",
21
+ regionBackdrop: '',
22
+ regionDrawer: '',
23
23
  });
24
24
 
25
25
  const useDrawer = () => {
26
26
  const open = (settings?: DrawerSettings) => {
27
27
  drawer.open = true;
28
- drawer.id = settings?.id ?? "default";
28
+ drawer.id = settings?.id ?? 'default';
29
29
  drawer.duration = settings?.duration ?? 300;
30
- drawer.regionBackdrop = settings?.regionBackdrop ?? "";
31
- drawer.regionDrawer = settings?.regionDrawer ?? "";
32
- drawer.position = settings?.position ?? "left";
30
+ drawer.regionBackdrop = settings?.regionBackdrop ?? '';
31
+ drawer.regionDrawer = settings?.regionDrawer ?? '';
32
+ drawer.position = settings?.position ?? 'left';
33
33
  };
34
34
 
35
35
  const close = () => {
package/src/services/highlight.service.test.ts CHANGED
@@ -1,22 +1,22 @@
1
- import { describe, expect, it } from "vitest";
2
- import { useHighlight } from "./highlight.service";
1
+ import { describe, expect, test } from 'vitest';
2
+ import { useHighlight } from './highlight.service';
3
3
 
4
4
  const { highlight } = useHighlight();
5
5
 
6
- describe("useHighlight", () => {
7
- describe("highlight", () => {
8
- describe("given a known language is passed", () => {
9
- it("should trim and highlight the code", () => {
10
- expect(highlight(" const name = 'John Duck' ", "javascript")).toEqual(
11
- '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
6
+ describe('useHighlight', () => {
7
+ describe('highlight', () => {
8
+ describe('given a known language is passed', () => {
9
+ test('should trim and highlight the code', () => {
10
+ expect(highlight(" const name = 'John Duck' ", 'javascript')).toEqual(
11
+ '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
12
12
  );
13
13
  });
14
14
  });
15
15
 
16
- describe("given an unknown language is passed", () => {
17
- it("should trim and auto highlight the code", () => {
18
- expect(highlight(" const name = 'John Duck' ", "unknown")).toEqual(
19
- '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
16
+ describe('given an unknown language is passed', () => {
17
+ test('should trim and auto highlight the code', () => {
18
+ expect(highlight(" const name = 'John Duck' ", 'unknown')).toEqual(
19
+ '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
20
20
  );
21
21
  });
22
22
  });
package/src/services/highlight.service.ts CHANGED
@@ -1,4 +1,4 @@
1
- import hljs from "highlight.js";
1
+ import hljs from 'highlight.js';
2
2
 
3
3
  const highlighter = hljs;
4
4
 
package/src/services/index.ts CHANGED
@@ -1,8 +1,8 @@
1
- import { useDarkMode } from "./dark-mode.service";
2
- import { useDrawer } from "./drawer.service";
3
- import { useHighlight } from "./highlight.service";
4
- import { useRail } from "./rail.service";
5
- import { useSettings, VuetifulSettings } from "./settings.service";
1
+ import { useDarkMode, Mode } from './dark-mode.service';
2
+ import { useDrawer } from './drawer.service';
3
+ import { useHighlight } from './highlight.service';
4
+ import { useRail } from './rail.service';
5
+ import { useSettings, VuetifulSettings } from './settings.service';
6
6
 
7
7
  export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
8
- export type { VuetifulSettings };
8
+ export type { VuetifulSettings, Mode };
package/src/services/rail.service.test.ts CHANGED
@@ -1,13 +1,13 @@
1
- import { describe, expect, it } from "vitest";
2
- import { useRail } from "./rail.service";
1
+ import { describe, expect, test } from 'vitest';
2
+ import { useRail } from './rail.service';
3
3
 
4
4
  const { selectedRailTile } = useRail();
5
5
 
6
- describe("useRail", () => {
7
- describe("selectedRailTile", () => {
8
- it("should expose selectedRailTile", () => {
9
- selectedRailTile.value = "John Duck";
10
- expect(selectedRailTile.value).toBe("John Duck");
6
+ describe('useRail', () => {
7
+ describe('selectedRailTile', () => {
8
+ test('should expose selectedRailTile', () => {
9
+ selectedRailTile.value = 'John Duck';
10
+ expect(selectedRailTile.value).toBe('John Duck');
11
11
  });
12
12
  });
13
13
  });
package/src/services/rail.service.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { ref } from "vue";
1
+ import { ref } from 'vue';
2
2
 
3
- const selectedRailTile = ref("");
3
+ const selectedRailTile = ref('');
4
4
 
5
5
  const useRail = () => {
6
6
  return {
package/src/services/settings.service.test.ts CHANGED
@@ -1,12 +1,12 @@
1
- import { afterEach, describe, expect, test, vi } from "vitest";
1
+ import { afterEach, describe, expect, test, vi } from 'vitest';
2
2
 
3
- describe("useSettings", () => {
3
+ describe('useSettings', () => {
4
4
  afterEach(() => {
5
5
  vi.resetModules();
6
6
  });
7
- describe("updateSettings", () => {
8
- test("should update settings", async () => {
9
- const { useSettings } = await import("./settings.service");
7
+ describe('updateSettings', () => {
8
+ test('should update settings', async () => {
9
+ const { useSettings } = await import('./settings.service');
10
10
  const { updateSettings, settings } = useSettings();
11
11
 
12
12
  expect(settings.global.unstyled).toBe(false);
package/src/services/settings.service.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { reactive } from "vue";
1
+ import { reactive } from 'vue';
2
2
 
3
3
  interface UnstyledSettings {
4
4
  unstyled: boolean;
package/src/styles/all.css CHANGED
@@ -3,22 +3,22 @@
3
3
  /* NOTE: The order shown below is required */
4
4
 
5
5
  /* Tailwind Directives */
6
- @import "tailwind.css";
6
+ @import 'tailwind.css';
7
7
 
8
8
  /* Global Styles */
9
- @import "core.css";
9
+ @import 'core.css';
10
10
 
11
11
  /* Typographical Settings */
12
- @import "typography.css";
12
+ @import 'typography.css';
13
13
 
14
14
  /* Imports all Tailwind Elements */
15
- @import "elements.css";
15
+ @import 'elements.css';
16
16
 
17
17
  /* Imports all Variant Styles */
18
- @import "variants.css";
18
+ @import 'variants.css';
19
19
 
20
20
  /* Imports all Transitions */
21
- @import "transitions.css";
21
+ @import 'transitions.css';
22
22
 
23
23
  /* Imports all Component Styles */
24
- @import "../../dist/style.css";
24
+ @import '../../dist/style.css';
package/src/styles/elements/buttons.css CHANGED
@@ -66,7 +66,7 @@
66
66
  }
67
67
 
68
68
  /* File Input Button */
69
- input[type="file"]:not(.file-dropzone-input)::file-selector-button {
69
+ input[type='file']:not(.file-dropzone-input)::file-selector-button {
70
70
  @apply variant-filled btn btn-sm mr-2 border-0;
71
71
  }
72
72
 
package/src/styles/elements/forms.css CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
  /* Range Input */
50
50
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
51
- [type="range"] {
51
+ [type='range'] {
52
52
  @apply w-full accent-surface-900 dark:accent-surface-50;
53
53
  }
54
54
 
@@ -138,23 +138,23 @@
138
138
  /* === Specialized === */
139
139
 
140
140
  /* File Inputs */
141
- .input[type="file"] {
141
+ .input[type='file'] {
142
142
  @apply p-1;
143
143
  }
144
144
 
145
145
  /* Color Picker */
146
146
  /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
147
- .input[type="color"] {
147
+ .input[type='color'] {
148
148
  @apply h-10 w-10 cursor-pointer overflow-hidden border-none rounded-token;
149
149
  -webkit-appearance: none; /* WebKit Only */
150
150
  }
151
- .input[type="color"]::-webkit-color-swatch-wrapper {
151
+ .input[type='color']::-webkit-color-swatch-wrapper {
152
152
  @apply p-0;
153
153
  }
154
- .input[type="color"]::-webkit-color-swatch {
154
+ .input[type='color']::-webkit-color-swatch {
155
155
  @apply border-none hover:brightness-110;
156
156
  }
157
- .input[type="color"]::-moz-color-swatch {
157
+ .input[type='color']::-moz-color-swatch {
158
158
  @apply border-none;
159
159
  }
160
160
 
@@ -263,7 +263,7 @@
263
263
  /* Blur */
264
264
  @apply backdrop-blur;
265
265
  }
266
- .variant-form-material[type="file"] {
266
+ .variant-form-material[type='file'] {
267
267
  @apply !py-1.5;
268
268
  }
269
269
  }
package/src/styles/elements.css CHANGED
@@ -2,18 +2,18 @@
2
2
  /* Import AFTER your theme, but BEFORE your global stylesheet. */
3
3
  /* Recommended as the LAST stylesheet in the set */
4
4
 
5
- @import "elements/alerts.css";
6
- @import "elements/badges.css";
7
- @import "elements/breadcrumbs.css";
8
- @import "elements/buttons.css";
9
- @import "elements/cards.css";
10
- @import "elements/chips.css";
11
- @import "elements/forms.css";
12
- @import "elements/lists.css";
13
- @import "elements/logo-clouds.css";
14
- @import "elements/placeholders.css";
15
- @import "elements/tables.css";
5
+ @import 'elements/alerts.css';
6
+ @import 'elements/badges.css';
7
+ @import 'elements/breadcrumbs.css';
8
+ @import 'elements/buttons.css';
9
+ @import 'elements/cards.css';
10
+ @import 'elements/chips.css';
11
+ @import 'elements/forms.css';
12
+ @import 'elements/lists.css';
13
+ @import 'elements/logo-clouds.css';
14
+ @import 'elements/placeholders.css';
15
+ @import 'elements/tables.css';
16
16
 
17
17
  /* Utilities */
18
- @import "elements/modals.css";
19
- @import "elements/popups.css";
18
+ @import 'elements/modals.css';
19
+ @import 'elements/popups.css';
package/src/styles/transitions.css CHANGED
@@ -1,2 +1,2 @@
1
- @import "transitions/fade.css";
2
- @import "transitions/slide.css";
1
+ @import 'transitions/fade.css';
2
+ @import 'transitions/slide.css';
package/src/styles/typography.css CHANGED
@@ -33,9 +33,9 @@
33
33
  @apply text-base;
34
34
  }
35
35
 
36
- a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
37
- .logo-item
38
- ):not(a.card):not(.list-nav a) {
36
+ a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
37
+ a.card
38
+ ):not(.list-nav a) {
39
39
  @apply text-primary-700 underline hover:brightness-110 dark:text-primary-500;
40
40
  }
41
41
 
@@ -79,10 +79,10 @@
79
79
  @apply absolute left-1 font-mono;
80
80
  }
81
81
  ins:not(.unstyled):is(:not(.prose *))::before {
82
- content: "+";
82
+ content: '+';
83
83
  }
84
84
  del:not(.unstyled):is(:not(.prose *))::before {
85
- content: "−";
85
+ content: '−';
86
86
  }
87
87
 
88
88
  ins:not(.unstyled):is(:not(.prose *)) {
package/src/themes/theme-rocket.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /* https://fonts.google.com/specimen/Space+Grotesk */
2
- @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
3
3
  /* https://fonts.google.com/specimen/Roboto?query=roboto */
4
- @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
4
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
5
5
 
6
6
  :root {
7
7
  /* =~= Theme Properties =~= */
8
- --theme-font-family-base: "Roboto", sans-serif;
9
- --theme-font-family-heading: "Space Grotesk", sans-serif;
8
+ --theme-font-family-base: 'Roboto', sans-serif;
9
+ --theme-font-family-heading: 'Space Grotesk', sans-serif;
10
10
  --theme-font-color-base: var(--color-primary-900);
11
11
  --theme-font-color-dark: var(--color-primary-100);
12
12
  --theme-rounded-base: 0px;
@@ -100,12 +100,12 @@
100
100
  --color-surface-900: 49 57 68; /* ⬅ #313944 */
101
101
  }
102
102
 
103
- [data-theme="rocket"] h1,
104
- [data-theme="rocket"] h2,
105
- [data-theme="rocket"] h3,
106
- [data-theme="rocket"] h4,
107
- [data-theme="rocket"] h5,
108
- [data-theme="rocket"] h6 {
103
+ [data-theme='rocket'] h1,
104
+ [data-theme='rocket'] h2,
105
+ [data-theme='rocket'] h3,
106
+ [data-theme='rocket'] h4,
107
+ [data-theme='rocket'] h5,
108
+ [data-theme='rocket'] h6 {
109
109
  font-weight: bold;
110
110
  }
111
111
 
package/src/themes/theme-sahara.css CHANGED
@@ -1,12 +1,12 @@
1
1
  /* https://fonts.google.com/specimen/Raleway */
2
- @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
3
  /* https://fonts.google.com/specimen/Lato?query=lato&noto.query=Abril */
4
- @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
4
+ @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
5
5
 
6
6
  :root {
7
7
  /* =~= Theme Styles =~= */
8
- --theme-font-family-base: "Lato", sans-serif;
9
- --theme-font-family-heading: "Raleway", sans-serif;
8
+ --theme-font-family-base: 'Lato', sans-serif;
9
+ --theme-font-family-heading: 'Raleway', sans-serif;
10
10
  --theme-font-color-base: var(--color-secondary-900);
11
11
  --theme-font-color-dark: var(--color-primary-100);
12
12
  --theme-rounded-base: 9999px;
@@ -100,27 +100,27 @@
100
100
  --color-surface-900: 107 38 49; /* ⬅ #6b2631 */
101
101
  }
102
102
 
103
- [data-theme="sahara"] h1,
104
- [data-theme="sahara"] h2,
105
- [data-theme="sahara"] h3,
106
- [data-theme="sahara"] h4,
107
- [data-theme="sahara"] h5,
108
- [data-theme="sahara"] h6 {
103
+ [data-theme='sahara'] h1,
104
+ [data-theme='sahara'] h2,
105
+ [data-theme='sahara'] h3,
106
+ [data-theme='sahara'] h4,
107
+ [data-theme='sahara'] h5,
108
+ [data-theme='sahara'] h6 {
109
109
  font-weight: 600;
110
110
  }
111
- [data-theme="sahara"] p {
111
+ [data-theme='sahara'] p {
112
112
  font-weight: 400;
113
113
  }
114
114
 
115
115
  /* Applied to body with `<body data-theme="sahara">` */
116
116
  /* Created with: https://csshero.org/mesher/ */
117
- [data-theme="sahara"] {
117
+ [data-theme='sahara'] {
118
118
  /* prettier-ignore */
119
119
  background-image:
120
120
  radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
121
121
  radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
122
122
  }
123
- .dark [data-theme="sahara"] {
123
+ .dark [data-theme='sahara'] {
124
124
  /* prettier-ignore */
125
125
  background-image:
126
126
  radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),