@code-coaching/vuetiful 0.26.0 → 0.27.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 (262) hide show
  1. package/README.md +47 -55
  2. package/dist/css/animations.css +2 -0
  3. package/{src → dist}/css/overrides/quasar.css +73 -58
  4. package/{src/styles → dist/css}/transitions/slide.css +6 -0
  5. package/dist/favicon.ico +0 -0
  6. package/dist/types/components/atoms/VAvatar.vue.d.ts +39 -90
  7. package/dist/types/components/atoms/VBadge.vue.d.ts +34 -21
  8. package/dist/types/components/atoms/VButton.vue.d.ts +42 -48
  9. package/dist/types/components/atoms/VChip.vue.d.ts +33 -21
  10. package/dist/types/components/atoms/VLightSwitch.vue.d.ts +5 -5
  11. package/dist/types/components/atoms/VRadio/VRadioDescription.vue.d.ts +7 -12
  12. package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts +53 -83
  13. package/dist/types/components/atoms/VRadio/VRadioItem.vue.d.ts +46 -12
  14. package/dist/types/components/atoms/VRadio/VRadioLabel.vue.d.ts +7 -12
  15. package/dist/types/components/atoms/VSwitch/VSwitch.vue.d.ts +51 -72
  16. package/dist/types/components/atoms/VSwitch/VSwitchDescription.vue.d.ts +32 -11
  17. package/dist/types/components/atoms/VSwitch/VSwitchGroup.vue.d.ts +32 -11
  18. package/dist/types/components/atoms/VSwitch/VSwitchLabel.vue.d.ts +33 -20
  19. package/dist/types/components/molecules/VAccordion/VAccordion.vue.d.ts +39 -28
  20. package/dist/types/components/molecules/VAccordion/VAccordionItem.vue.d.ts +35 -19
  21. package/dist/types/components/molecules/VAlert.vue.d.ts +50 -73
  22. package/dist/types/components/molecules/VCard/VCard.vue.d.ts +37 -48
  23. package/dist/types/components/molecules/VCard/VCardBody.vue.d.ts +33 -12
  24. package/dist/types/components/molecules/VCard/VCardFooter.vue.d.ts +36 -20
  25. package/dist/types/components/molecules/VCard/VCardHeader.vue.d.ts +36 -20
  26. package/dist/types/components/molecules/VCodeBlock.vue.d.ts +15 -16
  27. package/dist/types/components/molecules/VDrawer.vue.d.ts +13 -7
  28. package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +54 -132
  29. package/dist/types/components/molecules/VListbox/VListboxButton.vue.d.ts +22 -21
  30. package/dist/types/components/molecules/VListbox/VListboxItem.vue.d.ts +22 -19
  31. package/dist/types/components/molecules/VListbox/VListboxItems.vue.d.ts +19 -30
  32. package/dist/types/components/molecules/VListbox/VListboxLabel.vue.d.ts +7 -12
  33. package/dist/types/components/molecules/VPreview.vue.d.ts +57 -74
  34. package/dist/types/components/molecules/VRail/VRail.vue.d.ts +28 -13
  35. package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +49 -16
  36. package/dist/types/components/molecules/VShell.vue.d.ts +76 -44
  37. package/dist/types/components/molecules/VShellConfigurator.vue.d.ts +99 -0
  38. package/dist/types/components/molecules/VTabs/VTab.vue.d.ts +52 -20
  39. package/dist/types/components/molecules/VTabs/VTabPanel.vue.d.ts +8 -1
  40. package/dist/types/components/molecules/VTabs/VTabs.vue.d.ts +43 -101
  41. package/dist/types/components/molecules/Vuetiful.vue.d.ts +22 -0
  42. package/dist/types/components/molecules/index.d.ts +3 -4
  43. package/dist/types/directives/click-outside-group.d.ts +1 -1
  44. package/dist/types/directives/click-outside.d.ts +1 -1
  45. package/dist/types/directives/clipboard.d.ts +1 -1
  46. package/dist/types/index.d.ts +1 -8
  47. package/dist/types/props/props.d.ts +1 -14
  48. package/dist/types/services/dark-mode.service.d.ts +1 -1
  49. package/dist/types/services/drawer.service.d.ts +3 -3
  50. package/dist/types/services/index.d.ts +2 -2
  51. package/dist/types/utils/id-generator.d.ts +1 -0
  52. package/dist/types/utils/index.d.ts +3 -4
  53. package/dist/types/utils/tailwind-merge.d.ts +1 -0
  54. package/dist/types/utils/theme/rocket.theme.d.ts +223 -0
  55. package/dist/types/utils/theme/theme-switcher.vue.d.ts +14 -5
  56. package/dist/types/utils/theme/theme.service.d.ts +6 -9
  57. package/dist/types/utils/theme/themes.d.ts +3 -39
  58. package/dist/types/utils/theme/vuetiful.theme.d.ts +224 -0
  59. package/dist/vuetiful.es.mjs +54831 -49535
  60. package/dist/vuetiful.umd.cjs +189 -0
  61. package/package.json +53 -37
  62. package/dist/style.css +0 -10
  63. package/dist/types/components/VBootstrap.vue.d.ts +0 -15
  64. package/dist/types/components/atoms/VAvatar.test.d.ts +0 -1
  65. package/dist/types/components/atoms/VBadge.test.d.ts +0 -1
  66. package/dist/types/components/atoms/VButton.test.d.ts +0 -1
  67. package/dist/types/components/atoms/VChip.test.d.ts +0 -1
  68. package/dist/types/components/atoms/VLightSwitch.test.d.ts +0 -1
  69. package/dist/types/components/atoms/VRadio/VRadioDescription.test.d.ts +0 -1
  70. package/dist/types/components/atoms/VRadio/VRadioGroup.test.d.ts +0 -1
  71. package/dist/types/components/atoms/VRadio/VRadioItem.test.d.ts +0 -1
  72. package/dist/types/components/atoms/VRadio/VRadioLabel.test.d.ts +0 -1
  73. package/dist/types/components/atoms/VSwitch/VSwitch.test.d.ts +0 -1
  74. package/dist/types/components/atoms/VSwitch/VSwitchDescription.test.d.ts +0 -1
  75. package/dist/types/components/atoms/VSwitch/VSwitchGroup.test.d.ts +0 -1
  76. package/dist/types/components/atoms/VSwitch/VSwitchLabel.test.d.ts +0 -1
  77. package/dist/types/components/molecules/VAccordion/VAccordion.test.d.ts +0 -1
  78. package/dist/types/components/molecules/VAccordion/VAccordionItem.test.d.ts +0 -1
  79. package/dist/types/components/molecules/VAlert.test.d.ts +0 -1
  80. package/dist/types/components/molecules/VCard/VCard.test.d.ts +0 -1
  81. package/dist/types/components/molecules/VCard/VCardBody.test.d.ts +0 -1
  82. package/dist/types/components/molecules/VCard/VCardFooter.test.d.ts +0 -1
  83. package/dist/types/components/molecules/VCard/VCardHeader.test.d.ts +0 -1
  84. package/dist/types/components/molecules/VCodeBlock.test.d.ts +0 -1
  85. package/dist/types/components/molecules/VDrawer.test.d.ts +0 -1
  86. package/dist/types/components/molecules/VListbox/VListbox.test.d.ts +0 -1
  87. package/dist/types/components/molecules/VListbox/VListboxButton.test.d.ts +0 -1
  88. package/dist/types/components/molecules/VListbox/VListboxItem.test.d.ts +0 -1
  89. package/dist/types/components/molecules/VListbox/VListboxItems.test.d.ts +0 -1
  90. package/dist/types/components/molecules/VListbox/VListboxLabel.test.d.ts +0 -1
  91. package/dist/types/components/molecules/VPreview.test.d.ts +0 -1
  92. package/dist/types/components/molecules/VRail/VRail.test.d.ts +0 -1
  93. package/dist/types/components/molecules/VRail/VRailTile.test.d.ts +0 -1
  94. package/dist/types/components/molecules/VShell.test.d.ts +0 -1
  95. package/dist/types/components/molecules/VTabs/VTab.test.d.ts +0 -1
  96. package/dist/types/components/molecules/VTabs/VTabPanel.test.d.ts +0 -1
  97. package/dist/types/components/molecules/VTabs/VTabs.test.d.ts +0 -1
  98. package/dist/types/directives/click-outside-group.test.d.ts +0 -1
  99. package/dist/types/directives/click-outside.test.d.ts +0 -1
  100. package/dist/types/directives/clipboard.test.d.ts +0 -1
  101. package/dist/types/services/dark-mode.service.test.d.ts +0 -1
  102. package/dist/types/services/drawer.service.test.d.ts +0 -1
  103. package/dist/types/services/highlight.service.test.d.ts +0 -1
  104. package/dist/types/services/rail.service.test.d.ts +0 -1
  105. package/dist/types/services/settings.service.test.d.ts +0 -1
  106. package/dist/types/types/index.d.ts +0 -54
  107. package/dist/types/types/tailwind.d.ts +0 -4
  108. package/dist/types/utils/colors/colors.service.d.ts +0 -69
  109. package/dist/types/utils/platform/platform.service.test.d.ts +0 -1
  110. package/dist/types/utils/theme/callback.test.d.ts +0 -1
  111. package/dist/types/utils/theme/remove.test.d.ts +0 -1
  112. package/dist/types/utils/theme/theme.service.test.d.ts +0 -1
  113. package/dist/vuetiful.umd.js +0 -99
  114. package/src/assets/fonts/myfont.woff +0 -0
  115. package/src/assets/main.css +0 -17
  116. package/src/components/VBootstrap.vue +0 -62
  117. package/src/components/atoms/VAvatar.test.ts +0 -175
  118. package/src/components/atoms/VAvatar.vue +0 -89
  119. package/src/components/atoms/VBadge.test.ts +0 -28
  120. package/src/components/atoms/VBadge.vue +0 -17
  121. package/src/components/atoms/VButton.test.ts +0 -180
  122. package/src/components/atoms/VButton.vue +0 -76
  123. package/src/components/atoms/VChip.test.ts +0 -33
  124. package/src/components/atoms/VChip.vue +0 -17
  125. package/src/components/atoms/VLightSwitch.test.ts +0 -69
  126. package/src/components/atoms/VLightSwitch.vue +0 -121
  127. package/src/components/atoms/VRadio/VRadioDescription.test.ts +0 -55
  128. package/src/components/atoms/VRadio/VRadioDescription.vue +0 -14
  129. package/src/components/atoms/VRadio/VRadioGroup.test.ts +0 -81
  130. package/src/components/atoms/VRadio/VRadioGroup.vue +0 -88
  131. package/src/components/atoms/VRadio/VRadioItem.test.ts +0 -183
  132. package/src/components/atoms/VRadio/VRadioItem.vue +0 -36
  133. package/src/components/atoms/VRadio/VRadioLabel.test.ts +0 -55
  134. package/src/components/atoms/VRadio/VRadioLabel.vue +0 -16
  135. package/src/components/atoms/VSwitch/VSwitch.test.ts +0 -100
  136. package/src/components/atoms/VSwitch/VSwitch.vue +0 -106
  137. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +0 -55
  138. package/src/components/atoms/VSwitch/VSwitchDescription.vue +0 -16
  139. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +0 -26
  140. package/src/components/atoms/VSwitch/VSwitchGroup.vue +0 -16
  141. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +0 -89
  142. package/src/components/atoms/VSwitch/VSwitchLabel.vue +0 -20
  143. package/src/components/atoms/index.ts +0 -31
  144. package/src/components/index.ts +0 -2
  145. package/src/components/molecules/VAccordion/VAccordion.test.ts +0 -27
  146. package/src/components/molecules/VAccordion/VAccordion.vue +0 -32
  147. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +0 -134
  148. package/src/components/molecules/VAccordion/VAccordionItem.vue +0 -68
  149. package/src/components/molecules/VAlert.test.ts +0 -100
  150. package/src/components/molecules/VAlert.vue +0 -137
  151. package/src/components/molecules/VCard/VCard.test.ts +0 -47
  152. package/src/components/molecules/VCard/VCard.vue +0 -74
  153. package/src/components/molecules/VCard/VCardBody.test.ts +0 -39
  154. package/src/components/molecules/VCard/VCardBody.vue +0 -16
  155. package/src/components/molecules/VCard/VCardFooter.test.ts +0 -63
  156. package/src/components/molecules/VCard/VCardFooter.vue +0 -31
  157. package/src/components/molecules/VCard/VCardHeader.test.ts +0 -86
  158. package/src/components/molecules/VCard/VCardHeader.vue +0 -53
  159. package/src/components/molecules/VCodeBlock.test.ts +0 -133
  160. package/src/components/molecules/VCodeBlock.vue +0 -113
  161. package/src/components/molecules/VDrawer.test.ts +0 -14
  162. package/src/components/molecules/VDrawer.vue +0 -87
  163. package/src/components/molecules/VListbox/VListbox.test.ts +0 -146
  164. package/src/components/molecules/VListbox/VListbox.vue +0 -149
  165. package/src/components/molecules/VListbox/VListboxButton.test.ts +0 -66
  166. package/src/components/molecules/VListbox/VListboxButton.vue +0 -57
  167. package/src/components/molecules/VListbox/VListboxItem.test.ts +0 -51
  168. package/src/components/molecules/VListbox/VListboxItem.vue +0 -39
  169. package/src/components/molecules/VListbox/VListboxItems.test.ts +0 -44
  170. package/src/components/molecules/VListbox/VListboxItems.vue +0 -42
  171. package/src/components/molecules/VListbox/VListboxLabel.test.ts +0 -30
  172. package/src/components/molecules/VListbox/VListboxLabel.vue +0 -14
  173. package/src/components/molecules/VPreview.test.ts +0 -73
  174. package/src/components/molecules/VPreview.vue +0 -230
  175. package/src/components/molecules/VRail/VRail.test.ts +0 -14
  176. package/src/components/molecules/VRail/VRail.vue +0 -33
  177. package/src/components/molecules/VRail/VRailTile.test.ts +0 -97
  178. package/src/components/molecules/VRail/VRailTile.vue +0 -49
  179. package/src/components/molecules/VShell.test.ts +0 -14
  180. package/src/components/molecules/VShell.vue +0 -63
  181. package/src/components/molecules/VTabs/VTab.test.ts +0 -143
  182. package/src/components/molecules/VTabs/VTab.vue +0 -50
  183. package/src/components/molecules/VTabs/VTabPanel.test.ts +0 -24
  184. package/src/components/molecules/VTabs/VTabPanel.vue +0 -9
  185. package/src/components/molecules/VTabs/VTabs.test.ts +0 -92
  186. package/src/components/molecules/VTabs/VTabs.vue +0 -104
  187. package/src/components/molecules/index.ts +0 -51
  188. package/src/directives/click-outside-group.test.ts +0 -44
  189. package/src/directives/click-outside-group.ts +0 -39
  190. package/src/directives/click-outside.test.ts +0 -38
  191. package/src/directives/click-outside.ts +0 -28
  192. package/src/directives/clipboard.test.ts +0 -26
  193. package/src/directives/clipboard.ts +0 -9
  194. package/src/directives/index.ts +0 -5
  195. package/src/env.d.ts +0 -8
  196. package/src/index.ts +0 -21
  197. package/src/props/index.ts +0 -1
  198. package/src/props/props.ts +0 -62
  199. package/src/services/dark-mode.service.test.ts +0 -104
  200. package/src/services/dark-mode.service.ts +0 -75
  201. package/src/services/drawer.service.test.ts +0 -45
  202. package/src/services/drawer.service.ts +0 -46
  203. package/src/services/highlight.service.test.ts +0 -24
  204. package/src/services/highlight.service.ts +0 -19
  205. package/src/services/index.ts +0 -8
  206. package/src/services/rail.service.test.ts +0 -13
  207. package/src/services/rail.service.ts +0 -11
  208. package/src/services/settings.service.test.ts +0 -17
  209. package/src/services/settings.service.ts +0 -136
  210. package/src/styles/all.css +0 -24
  211. package/src/styles/core.css +0 -66
  212. package/src/styles/elements/alerts.css +0 -17
  213. package/src/styles/elements/badges.css +0 -31
  214. package/src/styles/elements/breadcrumbs.css +0 -26
  215. package/src/styles/elements/buttons.css +0 -103
  216. package/src/styles/elements/cards.css +0 -32
  217. package/src/styles/elements/chips.css +0 -22
  218. package/src/styles/elements/forms.css +0 -269
  219. package/src/styles/elements/lists.css +0 -48
  220. package/src/styles/elements/logo-clouds.css +0 -29
  221. package/src/styles/elements/modals.css +0 -15
  222. package/src/styles/elements/placeholders.css +0 -17
  223. package/src/styles/elements/popups.css +0 -16
  224. package/src/styles/elements/tables.css +0 -102
  225. package/src/styles/elements.css +0 -19
  226. package/src/styles/highlight-js.css +0 -116
  227. package/src/styles/tailwind.css +0 -16
  228. package/src/styles/transitions.css +0 -2
  229. package/src/styles/typography.css +0 -101
  230. package/src/styles/variants.css +0 -156
  231. package/src/tailwind/core.cjs +0 -37
  232. package/src/tailwind/generated/intellisense-classes.cjs +0 -558
  233. package/src/tailwind/intellisense.cjs +0 -21
  234. package/src/tailwind/settings.cjs +0 -20
  235. package/src/tailwind/theme/colors.cjs +0 -20
  236. package/src/tailwind/tokens/backgrounds.cjs +0 -48
  237. package/src/tailwind/tokens/border-radius.cjs +0 -21
  238. package/src/tailwind/tokens/borders.cjs +0 -24
  239. package/src/tailwind/tokens/fills.cjs +0 -20
  240. package/src/tailwind/tokens/rings.cjs +0 -50
  241. package/src/tailwind/tokens/text.cjs +0 -35
  242. package/src/tailwind/vuetiful.cjs +0 -19
  243. package/src/themes/theme-rocket.css +0 -119
  244. package/src/themes/theme-sahara.css +0 -128
  245. package/src/themes/theme-seafoam.css +0 -120
  246. package/src/themes/theme-seasonal.css +0 -115
  247. package/src/themes/theme-skeleton.css +0 -115
  248. package/src/themes/theme-vintage.css +0 -125
  249. package/src/themes/theme-vuetiful.css +0 -136
  250. package/src/types/index.ts +0 -59
  251. package/src/types/tailwind.ts +0 -7
  252. package/src/utils/colors/colors.service.ts +0 -293
  253. package/src/utils/index.ts +0 -8
  254. package/src/utils/platform/platform.service.test.ts +0 -19
  255. package/src/utils/platform/platform.service.ts +0 -8
  256. package/src/utils/theme/callback.test.ts +0 -28
  257. package/src/utils/theme/remove.test.ts +0 -27
  258. package/src/utils/theme/theme-switcher.vue +0 -78
  259. package/src/utils/theme/theme.service.test.ts +0 -269
  260. package/src/utils/theme/theme.service.ts +0 -173
  261. package/src/utils/theme/themes.ts +0 -282
  262. /package/{src/styles → dist/css}/transitions/fade.css +0 -0
package/src/services/dark-mode.service.test.ts DELETED
@@ -1,104 +0,0 @@
1
- import { afterEach, describe, expect, vi, test } from 'vitest';
2
-
3
- const localStorageMock = {
4
- getItem: vi.fn(),
5
- setItem: vi.fn(),
6
- };
7
- const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
8
-
9
- describe('useDarkMode', () => {
10
- afterEach(() => {
11
- vi.resetModules();
12
- });
13
-
14
- describe('applyMode', () => {
15
- test('light mode set', async () => {
16
- const { useDarkMode } = await import('./dark-mode.service');
17
- const { applyMode, chosenMode, MODE } = useDarkMode();
18
-
19
- applyMode(MODE.LIGHT);
20
- expect(chosenMode.value).toBe(MODE.LIGHT);
21
- expect(document.documentElement.classList.contains('dark')).toBe(false);
22
- });
23
- test('dark mode set', async () => {
24
- const { useDarkMode } = await import('./dark-mode.service');
25
- const { applyMode, chosenMode, MODE } = useDarkMode();
26
-
27
- applyMode(MODE.DARK);
28
- expect(chosenMode.value).toBe(MODE.DARK);
29
- expect(document.documentElement.classList.contains('dark')).toBe(true);
30
- });
31
- });
32
-
33
- describe('autoModeWatcher', () => {
34
- describe('given mode changes', () => {
35
- test('should set modeCurrent', async () => {
36
- const { useDarkMode } = await import('./dark-mode.service');
37
- const darkMode = useDarkMode();
38
-
39
- const mql = {
40
- matches: true,
41
- onchange: () => {
42
- const mode = mql.matches ? darkMode.MODE.LIGHT : darkMode.MODE.DARK;
43
- darkMode.applyMode(mode);
44
- },
45
- };
46
- vi.spyOn(window, 'matchMedia').mockReturnValueOnce(mql as any);
47
-
48
- darkMode.autoModeWatcher();
49
-
50
- mql.matches = false;
51
- mql.onchange?.();
52
- expect(darkMode.chosenMode.value).toBe('dark');
53
-
54
- mql.matches = true;
55
- mql.onchange?.();
56
- expect(darkMode.chosenMode.value).toBe('light');
57
- });
58
- });
59
- });
60
-
61
- describe('applyModeSSR', () => {
62
- test('should add dark class to html tag', async () => {
63
- const { useDarkMode } = await import('./dark-mode.service');
64
- const darkMode = useDarkMode();
65
-
66
- const html = '<html>';
67
- const mode = darkMode.MODE.DARK;
68
- const result = darkMode.applyModeSSR(html, mode);
69
- expect(result).toBe('<html class="dark">');
70
- });
71
- });
72
-
73
- describe('getModeFromCookie', () => {
74
- test('should return default mode if cookie is not set', async () => {
75
- const { useDarkMode } = await import('./dark-mode.service');
76
- const darkMode = useDarkMode();
77
-
78
- const cookies = '';
79
- const result = darkMode.getModeFromCookie(cookies);
80
- expect(result).toBe('dark');
81
- });
82
- test('should return mode from cookie', async () => {
83
- const { useDarkMode } = await import('./dark-mode.service');
84
- const darkMode = useDarkMode();
85
-
86
- const cookies = 'vuetiful-mode=light';
87
- const result = darkMode.getModeFromCookie(cookies);
88
- expect(result).toBe('light');
89
- });
90
- });
91
-
92
- describe('initializeMode', () => {
93
- test('should set mode from cookie', async () => {
94
- const { useDarkMode } = await import('./dark-mode.service');
95
- const darkMode = useDarkMode();
96
-
97
- const cookies = 'vuetiful-mode=dark';
98
- vi.spyOn(document, 'cookie', 'get').mockReturnValueOnce(cookies);
99
-
100
- darkMode.initializeMode();
101
- expect(darkMode.chosenMode.value).toBe('dark');
102
- });
103
- });
104
- });
package/src/services/dark-mode.service.ts DELETED
@@ -1,75 +0,0 @@
1
- import { computed, readonly, ref } from 'vue';
2
- import { usePlatform } from '../utils/platform/platform.service';
3
-
4
- const { isBrowser } = usePlatform();
5
-
6
- const MODE = {
7
- LIGHT: 'light',
8
- DARK: 'dark',
9
- };
10
- export type Mode = (typeof MODE)[keyof typeof MODE];
11
-
12
- const defaultMode = MODE.DARK;
13
- const chosenMode = ref(defaultMode);
14
- const isDark = computed(() => chosenMode.value === MODE.DARK);
15
-
16
- const useDarkMode = () => {
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;
22
- }
23
- return defaultMode;
24
- };
25
-
26
- const applyModeSSR = (html: string, mode: Mode): string => {
27
- if (mode === MODE.DARK) html = html.replace('<html', '<html class="dark"');
28
- return html;
29
- };
30
-
31
- const initializeMode = () => {
32
- if (isBrowser) {
33
- const mode = getModeFromCookie(document.cookie);
34
- applyMode(mode);
35
- }
36
- };
37
-
38
- const applyMode = (value: Mode) => {
39
- const elemHtmlClasses = document.documentElement.classList;
40
- const classDark = 'dark';
41
- value === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
42
- if (isBrowser) {
43
- document.cookie = `vuetiful-mode=${value};path=/;max-age=31536000;SameSite=Lax`;
44
- }
45
- chosenMode.value = value;
46
- };
47
-
48
- const autoModeWatcher = (): void => {
49
- const mql = window.matchMedia('(prefers-color-scheme: light)');
50
- const setMode = (value: boolean) => {
51
- const elemHtmlClasses = document.documentElement.classList;
52
- const classDark = `dark`;
53
- const mode = value ? MODE.LIGHT : MODE.DARK;
54
- mode === MODE.LIGHT ? elemHtmlClasses.remove(classDark) : elemHtmlClasses.add(classDark);
55
- applyMode(mode);
56
- };
57
- setMode(mql.matches);
58
- mql.onchange = () => {
59
- setMode(mql.matches);
60
- };
61
- };
62
-
63
- return {
64
- chosenMode,
65
- isDark: readonly(isDark),
66
- initializeMode,
67
- applyMode,
68
- autoModeWatcher,
69
- applyModeSSR,
70
- getModeFromCookie,
71
- MODE,
72
- };
73
- };
74
-
75
- export { useDarkMode };
package/src/services/drawer.service.test.ts DELETED
@@ -1,45 +0,0 @@
1
- import { describe, expect, test } from 'vitest';
2
- import { useDrawer } from './drawer.service';
3
-
4
- const { drawer, open, close } = useDrawer();
5
-
6
- describe('useDrawer', () => {
7
- describe('defaults', () => {
8
- test('should have the default values', () => {
9
- expect(drawer.id).toBe('default');
10
- expect(drawer.open).toBe(false);
11
- expect(drawer.position).toBe('left');
12
- expect(drawer.duration).toBe(300);
13
- expect(drawer.regionBackdrop).toBe('');
14
- expect(drawer.regionDrawer).toBe('');
15
- });
16
- });
17
-
18
- describe('open', () => {
19
- test('should use the settings', () => {
20
- open({
21
- id: 'test',
22
- open: true,
23
- position: 'right',
24
- duration: 150,
25
- regionBackdrop: 'backdrop',
26
- regionDrawer: 'drawer',
27
- });
28
- expect(drawer.id).toBe('test');
29
- expect(drawer.open).toBe(true);
30
- expect(drawer.position).toBe('right');
31
- expect(drawer.duration).toBe(150);
32
- expect(drawer.regionBackdrop).toBe('backdrop');
33
- expect(drawer.regionDrawer).toBe('drawer');
34
- });
35
- });
36
-
37
- describe('close', () => {
38
- test('should set the drawer to close', () => {
39
- open();
40
- expect(drawer.open).toBe(true);
41
- close();
42
- expect(drawer.open).toBe(false);
43
- });
44
- });
45
- });
package/src/services/drawer.service.ts DELETED
@@ -1,46 +0,0 @@
1
- import { reactive, readonly } from 'vue';
2
-
3
- export interface DrawerSettings {
4
- id?: string;
5
- open?: boolean;
6
-
7
- position?: 'left' | 'top' | 'right' | 'bottom';
8
- duration?: 150 | 300;
9
-
10
- regionBackdrop?: string;
11
- regionDrawer?: string;
12
-
13
- [key: string]: unknown;
14
- }
15
-
16
- const drawer = reactive<DrawerSettings>({
17
- id: 'default',
18
- open: false,
19
- position: 'left',
20
- duration: 300,
21
- regionBackdrop: '',
22
- regionDrawer: '',
23
- });
24
-
25
- const useDrawer = () => {
26
- const open = (settings?: DrawerSettings) => {
27
- drawer.open = true;
28
- drawer.id = settings?.id ?? 'default';
29
- drawer.duration = settings?.duration ?? 300;
30
- drawer.regionBackdrop = settings?.regionBackdrop ?? '';
31
- drawer.regionDrawer = settings?.regionDrawer ?? '';
32
- drawer.position = settings?.position ?? 'left';
33
- };
34
-
35
- const close = () => {
36
- drawer.open = false;
37
- };
38
-
39
- return {
40
- drawer: readonly(drawer),
41
- open,
42
- close,
43
- };
44
- };
45
-
46
- export { useDrawer };
package/src/services/highlight.service.test.ts DELETED
@@ -1,24 +0,0 @@
1
- import { describe, expect, test } from 'vitest';
2
- import { useHighlight } from './highlight.service';
3
-
4
- const { highlight } = useHighlight();
5
-
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
- );
13
- });
14
- });
15
-
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
- );
21
- });
22
- });
23
- });
24
- });
package/src/services/highlight.service.ts DELETED
@@ -1,19 +0,0 @@
1
- import hljs from 'highlight.js';
2
-
3
- const highlighter = hljs;
4
-
5
- const useHighlight = () => {
6
- const highlight = (code: string, language: string) => {
7
- if (language && highlighter.getLanguage(language)) {
8
- return highlighter.highlight(code, { language }).value.trim();
9
- } else {
10
- return highlighter.highlightAuto(code).value.trim();
11
- }
12
- };
13
-
14
- return {
15
- highlight,
16
- };
17
- };
18
-
19
- export { useHighlight };
package/src/services/index.ts DELETED
@@ -1,8 +0,0 @@
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
-
7
- export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
8
- export type { VuetifulSettings, Mode };
package/src/services/rail.service.test.ts DELETED
@@ -1,13 +0,0 @@
1
- import { describe, expect, test } from 'vitest';
2
- import { useRail } from './rail.service';
3
-
4
- const { selectedRailTile } = useRail();
5
-
6
- describe('useRail', () => {
7
- describe('selectedRailTile', () => {
8
- test('should expose selectedRailTile', () => {
9
- selectedRailTile.value = 'John Duck';
10
- expect(selectedRailTile.value).toBe('John Duck');
11
- });
12
- });
13
- });
package/src/services/rail.service.ts DELETED
@@ -1,11 +0,0 @@
1
- import { ref } from 'vue';
2
-
3
- const selectedRailTile = ref('');
4
-
5
- const useRail = () => {
6
- return {
7
- selectedRailTile,
8
- };
9
- };
10
-
11
- export { useRail };
package/src/services/settings.service.test.ts DELETED
@@ -1,17 +0,0 @@
1
- import { afterEach, describe, expect, test, vi } from 'vitest';
2
-
3
- describe('useSettings', () => {
4
- afterEach(() => {
5
- vi.resetModules();
6
- });
7
- describe('updateSettings', () => {
8
- test('should update settings', async () => {
9
- const { useSettings } = await import('./settings.service');
10
- const { updateSettings, settings } = useSettings();
11
-
12
- expect(settings.global.unstyled).toBe(false);
13
- updateSettings({ global: { unstyled: true } });
14
- expect(settings.global.unstyled).toBe(true);
15
- });
16
- });
17
- });
package/src/services/settings.service.ts DELETED
@@ -1,136 +0,0 @@
1
- import { reactive } from 'vue';
2
-
3
- interface UnstyledSettings {
4
- unstyled: boolean;
5
- }
6
-
7
- interface GlobalSettings extends UnstyledSettings {}
8
- interface RadioGroupSettings extends UnstyledSettings {}
9
- interface RadioItemSettings extends UnstyledSettings {}
10
- interface AccordionSettings extends UnstyledSettings {}
11
- interface AccordionItemSettings extends UnstyledSettings {}
12
- interface AlertSettings extends UnstyledSettings {}
13
- interface AvatarSettings extends UnstyledSettings {}
14
- interface BadgeSettings extends UnstyledSettings {}
15
- interface ButtonSettings extends UnstyledSettings {}
16
- interface ListboxSettings extends UnstyledSettings {}
17
- interface ListboxItemSettings extends UnstyledSettings {}
18
- interface CodeBlockSettings extends UnstyledSettings {}
19
- interface SwitchSettings extends UnstyledSettings {}
20
- interface CardSettings extends UnstyledSettings {}
21
- interface CardHeaderSettings extends UnstyledSettings {}
22
- interface CardBodySettings extends UnstyledSettings {}
23
- interface CardFooterSettings extends UnstyledSettings {}
24
- interface TabsSettings extends UnstyledSettings {}
25
- interface TabSettings extends UnstyledSettings {}
26
-
27
- export interface VuetifulSettings {
28
- global: GlobalSettings;
29
- components: Partial<{
30
- avatar: AvatarSettings;
31
- alert: AlertSettings;
32
- badge: BadgeSettings;
33
- button: ButtonSettings;
34
- codeBlock: CodeBlockSettings;
35
- switch: SwitchSettings;
36
-
37
- accordion: AccordionSettings;
38
- accordionItem: AccordionItemSettings;
39
-
40
- listbox: ListboxSettings;
41
- listboxItem: ListboxItemSettings;
42
-
43
- radioGroup: RadioGroupSettings;
44
- radioItem: RadioItemSettings;
45
-
46
- card: CardSettings;
47
- cardHeader: CardHeaderSettings;
48
- cardBody: CardBodySettings;
49
- cardFooter: CardFooterSettings;
50
-
51
- tabs: TabsSettings;
52
- tab: TabSettings;
53
- }>;
54
- }
55
-
56
- const settings = reactive({
57
- global: {
58
- unstyled: false,
59
- },
60
- components: {
61
- radioGroup: {
62
- unstyled: false,
63
- },
64
- radioItem: {
65
- unstyled: false,
66
- },
67
- switch: {
68
- unstyled: false,
69
- },
70
- avatar: {
71
- unstyled: false,
72
- },
73
- badge: {
74
- unstyled: false,
75
- },
76
- button: {
77
- unstyled: false,
78
- },
79
- chip: {
80
- unstyled: false,
81
- },
82
- codeBlock: {
83
- unstyled: false,
84
- },
85
- listbox: {
86
- unstyled: false,
87
- },
88
- listboxItem: {
89
- unstyled: false,
90
- },
91
- accordion: {
92
- unstyled: false,
93
- },
94
- accordionItem: {
95
- unstyled: false,
96
- },
97
- alert: {
98
- unstyled: false,
99
- },
100
- card: {
101
- unstyled: false,
102
- },
103
- cardHeader: {
104
- unstyled: false,
105
- },
106
- cardBody: {
107
- unstyled: false,
108
- },
109
- cardFooter: {
110
- unstyled: false,
111
- },
112
- tabs: {
113
- unstyled: false,
114
- },
115
- tab: {
116
- unstyled: false,
117
- },
118
- },
119
- });
120
-
121
- const useSettings = () => {
122
- const updateSettings = (partialSettings: Partial<VuetifulSettings>) => {
123
- for (const key in partialSettings) {
124
- if (key in settings) {
125
- Object.assign((settings as any)[key], (partialSettings as any)[key]);
126
- }
127
- }
128
- };
129
-
130
- return {
131
- updateSettings,
132
- settings,
133
- };
134
- };
135
-
136
- export { useSettings };
package/src/styles/all.css DELETED
@@ -1,24 +0,0 @@
1
- /* Stylesheet: all.css */
2
- /* Import AFTER your theme, but BEFORE your global stylesheet. */
3
- /* NOTE: The order shown below is required */
4
-
5
- /* Tailwind Directives */
6
- @import 'tailwind.css';
7
-
8
- /* Global Styles */
9
- @import 'core.css';
10
-
11
- /* Typographical Settings */
12
- @import 'typography.css';
13
-
14
- /* Imports all Tailwind Elements */
15
- @import 'elements.css';
16
-
17
- /* Imports all Variant Styles */
18
- @import 'variants.css';
19
-
20
- /* Imports all Transitions */
21
- @import 'transitions.css';
22
-
23
- /* Imports all Component Styles */
24
- @import '../../dist/style.css';
package/src/styles/core.css DELETED
@@ -1,66 +0,0 @@
1
- /* Stylesheet: core.css */
2
-
3
- @layer base {
4
- /* === Body Styles === */
5
-
6
- body {
7
- @apply bg-surface-50-900-token;
8
- }
9
-
10
- /* === Selection === */
11
-
12
- ::selection {
13
- @apply bg-primary-500/30;
14
- }
15
-
16
- /* === Focus === */
17
-
18
- /* Outline (do not change) */
19
- /* http://www.outlinenone.com/ */
20
-
21
- /* Mobile tap highlight */
22
- /* https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color */
23
- html {
24
- -webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
25
- }
26
-
27
- /* === Scrollbars === */
28
-
29
- ::-webkit-scrollbar {
30
- @apply w-2;
31
- @apply h-2;
32
- }
33
- ::-webkit-scrollbar-track {
34
- @apply px-[1px] !bg-surface-50-900-token;
35
- }
36
- ::-webkit-scrollbar-thumb {
37
- @apply bg-surface-400-500-token rounded-token;
38
- }
39
-
40
- /* Firefox */
41
- /* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
42
- html {
43
- scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.05);
44
- }
45
- html.dark {
46
- scrollbar-color: rgba(255, 255, 255, 0.1) rgba(0, 0, 0, 0.05);
47
- }
48
-
49
- /* Hide Scrollbars */
50
- .hide-scrollbar::-webkit-scrollbar {
51
- display: none;
52
- }
53
- .hide-scrollbar {
54
- -ms-overflow-style: none; /* IE/Edge */
55
- scrollbar-width: none; /* Firefox */
56
- }
57
-
58
- /* === Horizontal Rules === */
59
-
60
- hr:not(.divider) {
61
- @apply block border-t border-solid border-surface-300-600-token;
62
- }
63
- .divider-vertical {
64
- @apply mx-auto inline-block min-h-[10px] border-l border-solid border-surface-300-600-token;
65
- }
66
- }
package/src/styles/elements/alerts.css DELETED
@@ -1,17 +0,0 @@
1
- /* Tailwind Elements: alerts.css */
2
-
3
- @layer components {
4
- .alert {
5
- @apply flex flex-col items-start space-y-4 p-4 lg:flex-row lg:items-center lg:space-x-4 lg:space-y-0;
6
- /* Text */
7
- @apply text-surface-900-50-token;
8
- /* Rounded */
9
- @apply rounded-container-token;
10
- }
11
- .alert-message {
12
- @apply flex-auto space-y-2;
13
- }
14
- .alert-actions {
15
- @apply flex items-center space-x-2;
16
- }
17
- }
package/src/styles/elements/badges.css DELETED
@@ -1,31 +0,0 @@
1
- /* Tailwind Elements: badges.css */
2
-
3
- @layer components {
4
- .badge {
5
- /* Core */
6
- @apply inline-flex items-center justify-center space-x-2 whitespace-nowrap;
7
- /* Text */
8
- @apply text-xs font-semibold;
9
- /* Padding */
10
- @apply px-2 py-1;
11
- /* Theme: Rounded */
12
- @apply rounded-token;
13
- }
14
-
15
- .badge-icon {
16
- /* Core */
17
- @apply flex h-5 w-5 items-center justify-center rounded-full;
18
- /* Text */
19
- @apply text-xs font-semibold;
20
- /* Shadow */
21
- @apply shadow;
22
- }
23
-
24
- /* === Variants === */
25
-
26
- /* Glass */
27
- .badge-glass {
28
- @apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20;
29
- @apply ring-[1px] ring-inset ring-neutral-900/5 dark:ring-neutral-50/5;
30
- }
31
- }
package/src/styles/elements/breadcrumbs.css DELETED
@@ -1,26 +0,0 @@
1
- /* Tailwind Elements: breadcrumbs.css */
2
-
3
- @layer components {
4
- .breadcrumb,
5
- .breadcrumb-nonresponsive {
6
- @apply hide-scrollbar flex w-full items-center space-x-4 overflow-x-auto;
7
- }
8
-
9
- .crumb {
10
- @apply flex items-center justify-center space-x-2;
11
- }
12
- .crumb-separator {
13
- @apply flex opacity-50 text-surface-700-200-token;
14
- }
15
-
16
- /* === Auto-Responsive === */
17
-
18
- .breadcrumb li {
19
- @apply hidden md:block;
20
- }
21
- .breadcrumb li:nth-last-child(3),
22
- .breadcrumb li:nth-last-child(2),
23
- .breadcrumb li:nth-last-child(1) {
24
- @apply block;
25
- }
26
- }