@code-coaching/vuetiful 0.26.0 → 0.28.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 (266) 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/dist/css/transitions/fade.css +9 -0
  5. package/{src/styles → dist/css}/transitions/slide.css +0 -24
  6. package/dist/favicon.ico +0 -0
  7. package/dist/types/components/atoms/VAvatar.vue.d.ts +39 -90
  8. package/dist/types/components/atoms/VBadge.vue.d.ts +34 -21
  9. package/dist/types/components/atoms/VButton.vue.d.ts +42 -48
  10. package/dist/types/components/atoms/VChip.vue.d.ts +33 -21
  11. package/dist/types/components/atoms/VRadio/VRadioDescription.vue.d.ts +7 -12
  12. package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts +54 -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 +52 -73
  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/atoms/index.d.ts +1 -2
  20. package/dist/types/components/molecules/VAccordion/VAccordion.vue.d.ts +39 -28
  21. package/dist/types/components/molecules/VAccordion/VAccordionItem.vue.d.ts +35 -19
  22. package/dist/types/components/molecules/VAlert.vue.d.ts +50 -73
  23. package/dist/types/components/molecules/VCard/VCard.vue.d.ts +37 -48
  24. package/dist/types/components/molecules/VCard/VCardBody.vue.d.ts +33 -12
  25. package/dist/types/components/molecules/VCard/VCardFooter.vue.d.ts +36 -20
  26. package/dist/types/components/molecules/VCard/VCardHeader.vue.d.ts +36 -20
  27. package/dist/types/components/molecules/VCodeBlock.vue.d.ts +15 -16
  28. package/dist/types/components/molecules/VDrawer.vue.d.ts +13 -7
  29. package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +54 -132
  30. package/dist/types/components/molecules/VListbox/VListboxButton.vue.d.ts +22 -21
  31. package/dist/types/components/molecules/VListbox/VListboxItem.vue.d.ts +22 -19
  32. package/dist/types/components/molecules/VListbox/VListboxItems.vue.d.ts +19 -30
  33. package/dist/types/components/molecules/VListbox/VListboxLabel.vue.d.ts +7 -12
  34. package/dist/types/components/molecules/VPreview.vue.d.ts +57 -74
  35. package/dist/types/components/molecules/VRail/VRail.vue.d.ts +28 -13
  36. package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +49 -16
  37. package/dist/types/components/molecules/VShell.vue.d.ts +76 -44
  38. package/dist/types/components/molecules/VShellConfigurator.vue.d.ts +99 -0
  39. package/dist/types/components/molecules/VTabs/VTab.vue.d.ts +52 -20
  40. package/dist/types/components/molecules/VTabs/VTabPanel.vue.d.ts +8 -1
  41. package/dist/types/components/molecules/VTabs/VTabs.vue.d.ts +43 -101
  42. package/dist/types/components/molecules/Vuetiful.vue.d.ts +22 -0
  43. package/dist/types/components/molecules/index.d.ts +3 -4
  44. package/dist/types/directives/click-outside-group.d.ts +1 -1
  45. package/dist/types/directives/click-outside.d.ts +1 -1
  46. package/dist/types/directives/clipboard.d.ts +1 -1
  47. package/dist/types/index.d.ts +1 -8
  48. package/dist/types/props/props.d.ts +1 -14
  49. package/dist/types/services/drawer.service.d.ts +2 -2
  50. package/dist/types/services/index.d.ts +3 -4
  51. package/dist/types/utils/id-generator.d.ts +1 -0
  52. package/dist/types/utils/index.d.ts +7 -5
  53. package/dist/types/utils/tailwind-merge.d.ts +1 -0
  54. package/dist/types/utils/theme/VLightSwitch.vue.d.ts +16 -0
  55. package/dist/types/utils/theme/VThemeSwitch.vue.d.ts +41 -0
  56. package/dist/types/{services → utils/theme}/dark-mode.service.d.ts +1 -1
  57. package/dist/types/utils/theme/rocket.theme.d.ts +223 -0
  58. package/dist/types/utils/theme/theme.service.d.ts +6 -9
  59. package/dist/types/utils/theme/themes.d.ts +3 -39
  60. package/dist/types/utils/theme/vuetiful.theme.d.ts +224 -0
  61. package/dist/vuetiful.es.mjs +54782 -49507
  62. package/dist/vuetiful.umd.cjs +189 -0
  63. package/package.json +53 -37
  64. package/dist/style.css +0 -10
  65. package/dist/types/components/VBootstrap.vue.d.ts +0 -15
  66. package/dist/types/components/atoms/VAvatar.test.d.ts +0 -1
  67. package/dist/types/components/atoms/VBadge.test.d.ts +0 -1
  68. package/dist/types/components/atoms/VButton.test.d.ts +0 -1
  69. package/dist/types/components/atoms/VChip.test.d.ts +0 -1
  70. package/dist/types/components/atoms/VLightSwitch.test.d.ts +0 -1
  71. package/dist/types/components/atoms/VLightSwitch.vue.d.ts +0 -95
  72. package/dist/types/components/atoms/VRadio/VRadioDescription.test.d.ts +0 -1
  73. package/dist/types/components/atoms/VRadio/VRadioGroup.test.d.ts +0 -1
  74. package/dist/types/components/atoms/VRadio/VRadioItem.test.d.ts +0 -1
  75. package/dist/types/components/atoms/VRadio/VRadioLabel.test.d.ts +0 -1
  76. package/dist/types/components/atoms/VSwitch/VSwitch.test.d.ts +0 -1
  77. package/dist/types/components/atoms/VSwitch/VSwitchDescription.test.d.ts +0 -1
  78. package/dist/types/components/atoms/VSwitch/VSwitchGroup.test.d.ts +0 -1
  79. package/dist/types/components/atoms/VSwitch/VSwitchLabel.test.d.ts +0 -1
  80. package/dist/types/components/molecules/VAccordion/VAccordion.test.d.ts +0 -1
  81. package/dist/types/components/molecules/VAccordion/VAccordionItem.test.d.ts +0 -1
  82. package/dist/types/components/molecules/VAlert.test.d.ts +0 -1
  83. package/dist/types/components/molecules/VCard/VCard.test.d.ts +0 -1
  84. package/dist/types/components/molecules/VCard/VCardBody.test.d.ts +0 -1
  85. package/dist/types/components/molecules/VCard/VCardFooter.test.d.ts +0 -1
  86. package/dist/types/components/molecules/VCard/VCardHeader.test.d.ts +0 -1
  87. package/dist/types/components/molecules/VCodeBlock.test.d.ts +0 -1
  88. package/dist/types/components/molecules/VDrawer.test.d.ts +0 -1
  89. package/dist/types/components/molecules/VListbox/VListbox.test.d.ts +0 -1
  90. package/dist/types/components/molecules/VListbox/VListboxButton.test.d.ts +0 -1
  91. package/dist/types/components/molecules/VListbox/VListboxItem.test.d.ts +0 -1
  92. package/dist/types/components/molecules/VListbox/VListboxItems.test.d.ts +0 -1
  93. package/dist/types/components/molecules/VListbox/VListboxLabel.test.d.ts +0 -1
  94. package/dist/types/components/molecules/VPreview.test.d.ts +0 -1
  95. package/dist/types/components/molecules/VRail/VRail.test.d.ts +0 -1
  96. package/dist/types/components/molecules/VRail/VRailTile.test.d.ts +0 -1
  97. package/dist/types/components/molecules/VShell.test.d.ts +0 -1
  98. package/dist/types/components/molecules/VTabs/VTab.test.d.ts +0 -1
  99. package/dist/types/components/molecules/VTabs/VTabPanel.test.d.ts +0 -1
  100. package/dist/types/components/molecules/VTabs/VTabs.test.d.ts +0 -1
  101. package/dist/types/directives/click-outside-group.test.d.ts +0 -1
  102. package/dist/types/directives/click-outside.test.d.ts +0 -1
  103. package/dist/types/directives/clipboard.test.d.ts +0 -1
  104. package/dist/types/services/dark-mode.service.test.d.ts +0 -1
  105. package/dist/types/services/drawer.service.test.d.ts +0 -1
  106. package/dist/types/services/highlight.service.test.d.ts +0 -1
  107. package/dist/types/services/rail.service.test.d.ts +0 -1
  108. package/dist/types/services/settings.service.test.d.ts +0 -1
  109. package/dist/types/types/index.d.ts +0 -54
  110. package/dist/types/types/tailwind.d.ts +0 -4
  111. package/dist/types/utils/colors/colors.service.d.ts +0 -69
  112. package/dist/types/utils/platform/platform.service.test.d.ts +0 -1
  113. package/dist/types/utils/theme/callback.test.d.ts +0 -1
  114. package/dist/types/utils/theme/remove.test.d.ts +0 -1
  115. package/dist/types/utils/theme/theme-switcher.vue.d.ts +0 -69
  116. package/dist/types/utils/theme/theme.service.test.d.ts +0 -1
  117. package/dist/vuetiful.umd.js +0 -99
  118. package/src/assets/fonts/myfont.woff +0 -0
  119. package/src/assets/main.css +0 -17
  120. package/src/components/VBootstrap.vue +0 -62
  121. package/src/components/atoms/VAvatar.test.ts +0 -175
  122. package/src/components/atoms/VAvatar.vue +0 -89
  123. package/src/components/atoms/VBadge.test.ts +0 -28
  124. package/src/components/atoms/VBadge.vue +0 -17
  125. package/src/components/atoms/VButton.test.ts +0 -180
  126. package/src/components/atoms/VButton.vue +0 -76
  127. package/src/components/atoms/VChip.test.ts +0 -33
  128. package/src/components/atoms/VChip.vue +0 -17
  129. package/src/components/atoms/VLightSwitch.test.ts +0 -69
  130. package/src/components/atoms/VLightSwitch.vue +0 -121
  131. package/src/components/atoms/VRadio/VRadioDescription.test.ts +0 -55
  132. package/src/components/atoms/VRadio/VRadioDescription.vue +0 -14
  133. package/src/components/atoms/VRadio/VRadioGroup.test.ts +0 -81
  134. package/src/components/atoms/VRadio/VRadioGroup.vue +0 -88
  135. package/src/components/atoms/VRadio/VRadioItem.test.ts +0 -183
  136. package/src/components/atoms/VRadio/VRadioItem.vue +0 -36
  137. package/src/components/atoms/VRadio/VRadioLabel.test.ts +0 -55
  138. package/src/components/atoms/VRadio/VRadioLabel.vue +0 -16
  139. package/src/components/atoms/VSwitch/VSwitch.test.ts +0 -100
  140. package/src/components/atoms/VSwitch/VSwitch.vue +0 -106
  141. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +0 -55
  142. package/src/components/atoms/VSwitch/VSwitchDescription.vue +0 -16
  143. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +0 -26
  144. package/src/components/atoms/VSwitch/VSwitchGroup.vue +0 -16
  145. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +0 -89
  146. package/src/components/atoms/VSwitch/VSwitchLabel.vue +0 -20
  147. package/src/components/atoms/index.ts +0 -31
  148. package/src/components/index.ts +0 -2
  149. package/src/components/molecules/VAccordion/VAccordion.test.ts +0 -27
  150. package/src/components/molecules/VAccordion/VAccordion.vue +0 -32
  151. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +0 -134
  152. package/src/components/molecules/VAccordion/VAccordionItem.vue +0 -68
  153. package/src/components/molecules/VAlert.test.ts +0 -100
  154. package/src/components/molecules/VAlert.vue +0 -137
  155. package/src/components/molecules/VCard/VCard.test.ts +0 -47
  156. package/src/components/molecules/VCard/VCard.vue +0 -74
  157. package/src/components/molecules/VCard/VCardBody.test.ts +0 -39
  158. package/src/components/molecules/VCard/VCardBody.vue +0 -16
  159. package/src/components/molecules/VCard/VCardFooter.test.ts +0 -63
  160. package/src/components/molecules/VCard/VCardFooter.vue +0 -31
  161. package/src/components/molecules/VCard/VCardHeader.test.ts +0 -86
  162. package/src/components/molecules/VCard/VCardHeader.vue +0 -53
  163. package/src/components/molecules/VCodeBlock.test.ts +0 -133
  164. package/src/components/molecules/VCodeBlock.vue +0 -113
  165. package/src/components/molecules/VDrawer.test.ts +0 -14
  166. package/src/components/molecules/VDrawer.vue +0 -87
  167. package/src/components/molecules/VListbox/VListbox.test.ts +0 -146
  168. package/src/components/molecules/VListbox/VListbox.vue +0 -149
  169. package/src/components/molecules/VListbox/VListboxButton.test.ts +0 -66
  170. package/src/components/molecules/VListbox/VListboxButton.vue +0 -57
  171. package/src/components/molecules/VListbox/VListboxItem.test.ts +0 -51
  172. package/src/components/molecules/VListbox/VListboxItem.vue +0 -39
  173. package/src/components/molecules/VListbox/VListboxItems.test.ts +0 -44
  174. package/src/components/molecules/VListbox/VListboxItems.vue +0 -42
  175. package/src/components/molecules/VListbox/VListboxLabel.test.ts +0 -30
  176. package/src/components/molecules/VListbox/VListboxLabel.vue +0 -14
  177. package/src/components/molecules/VPreview.test.ts +0 -73
  178. package/src/components/molecules/VPreview.vue +0 -230
  179. package/src/components/molecules/VRail/VRail.test.ts +0 -14
  180. package/src/components/molecules/VRail/VRail.vue +0 -33
  181. package/src/components/molecules/VRail/VRailTile.test.ts +0 -97
  182. package/src/components/molecules/VRail/VRailTile.vue +0 -49
  183. package/src/components/molecules/VShell.test.ts +0 -14
  184. package/src/components/molecules/VShell.vue +0 -63
  185. package/src/components/molecules/VTabs/VTab.test.ts +0 -143
  186. package/src/components/molecules/VTabs/VTab.vue +0 -50
  187. package/src/components/molecules/VTabs/VTabPanel.test.ts +0 -24
  188. package/src/components/molecules/VTabs/VTabPanel.vue +0 -9
  189. package/src/components/molecules/VTabs/VTabs.test.ts +0 -92
  190. package/src/components/molecules/VTabs/VTabs.vue +0 -104
  191. package/src/components/molecules/index.ts +0 -51
  192. package/src/directives/click-outside-group.test.ts +0 -44
  193. package/src/directives/click-outside-group.ts +0 -39
  194. package/src/directives/click-outside.test.ts +0 -38
  195. package/src/directives/click-outside.ts +0 -28
  196. package/src/directives/clipboard.test.ts +0 -26
  197. package/src/directives/clipboard.ts +0 -9
  198. package/src/directives/index.ts +0 -5
  199. package/src/env.d.ts +0 -8
  200. package/src/index.ts +0 -21
  201. package/src/props/index.ts +0 -1
  202. package/src/props/props.ts +0 -62
  203. package/src/services/dark-mode.service.test.ts +0 -104
  204. package/src/services/dark-mode.service.ts +0 -75
  205. package/src/services/drawer.service.test.ts +0 -45
  206. package/src/services/drawer.service.ts +0 -46
  207. package/src/services/highlight.service.test.ts +0 -24
  208. package/src/services/highlight.service.ts +0 -19
  209. package/src/services/index.ts +0 -8
  210. package/src/services/rail.service.test.ts +0 -13
  211. package/src/services/rail.service.ts +0 -11
  212. package/src/services/settings.service.test.ts +0 -17
  213. package/src/services/settings.service.ts +0 -136
  214. package/src/styles/all.css +0 -24
  215. package/src/styles/core.css +0 -66
  216. package/src/styles/elements/alerts.css +0 -17
  217. package/src/styles/elements/badges.css +0 -31
  218. package/src/styles/elements/breadcrumbs.css +0 -26
  219. package/src/styles/elements/buttons.css +0 -103
  220. package/src/styles/elements/cards.css +0 -32
  221. package/src/styles/elements/chips.css +0 -22
  222. package/src/styles/elements/forms.css +0 -269
  223. package/src/styles/elements/lists.css +0 -48
  224. package/src/styles/elements/logo-clouds.css +0 -29
  225. package/src/styles/elements/modals.css +0 -15
  226. package/src/styles/elements/placeholders.css +0 -17
  227. package/src/styles/elements/popups.css +0 -16
  228. package/src/styles/elements/tables.css +0 -102
  229. package/src/styles/elements.css +0 -19
  230. package/src/styles/highlight-js.css +0 -116
  231. package/src/styles/tailwind.css +0 -16
  232. package/src/styles/transitions/fade.css +0 -14
  233. package/src/styles/transitions.css +0 -2
  234. package/src/styles/typography.css +0 -101
  235. package/src/styles/variants.css +0 -156
  236. package/src/tailwind/core.cjs +0 -37
  237. package/src/tailwind/generated/intellisense-classes.cjs +0 -558
  238. package/src/tailwind/intellisense.cjs +0 -21
  239. package/src/tailwind/settings.cjs +0 -20
  240. package/src/tailwind/theme/colors.cjs +0 -20
  241. package/src/tailwind/tokens/backgrounds.cjs +0 -48
  242. package/src/tailwind/tokens/border-radius.cjs +0 -21
  243. package/src/tailwind/tokens/borders.cjs +0 -24
  244. package/src/tailwind/tokens/fills.cjs +0 -20
  245. package/src/tailwind/tokens/rings.cjs +0 -50
  246. package/src/tailwind/tokens/text.cjs +0 -35
  247. package/src/tailwind/vuetiful.cjs +0 -19
  248. package/src/themes/theme-rocket.css +0 -119
  249. package/src/themes/theme-sahara.css +0 -128
  250. package/src/themes/theme-seafoam.css +0 -120
  251. package/src/themes/theme-seasonal.css +0 -115
  252. package/src/themes/theme-skeleton.css +0 -115
  253. package/src/themes/theme-vintage.css +0 -125
  254. package/src/themes/theme-vuetiful.css +0 -136
  255. package/src/types/index.ts +0 -59
  256. package/src/types/tailwind.ts +0 -7
  257. package/src/utils/colors/colors.service.ts +0 -293
  258. package/src/utils/index.ts +0 -8
  259. package/src/utils/platform/platform.service.test.ts +0 -19
  260. package/src/utils/platform/platform.service.ts +0 -8
  261. package/src/utils/theme/callback.test.ts +0 -28
  262. package/src/utils/theme/remove.test.ts +0 -27
  263. package/src/utils/theme/theme-switcher.vue +0 -78
  264. package/src/utils/theme/theme.service.test.ts +0 -269
  265. package/src/utils/theme/theme.service.ts +0 -173
  266. package/src/utils/theme/themes.ts +0 -282
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
- }