@code-coaching/vuetiful 0.23.0 → 0.23.2

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 (144) 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 +2 -2
  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 +1 -1
  19. package/dist/types/services/drawer.service.d.ts +1 -1
  20. package/dist/types/services/index.d.ts +5 -5
  21. package/dist/types/types/index.d.ts +1 -1
  22. package/dist/types/utils/index.d.ts +2 -2
  23. package/dist/types/utils/theme/theme-switcher.vue.d.ts +23 -63
  24. package/dist/types/utils/theme/theme.service.d.ts +1 -1
  25. package/dist/vuetiful.es.mjs +82 -150
  26. package/dist/vuetiful.umd.js +7 -15
  27. package/package.json +1 -1
  28. package/src/assets/main.css +6 -6
  29. package/src/components/VBootstrap.vue +43 -43
  30. package/src/components/atoms/VAvatar.test.ts +71 -71
  31. package/src/components/atoms/VAvatar.vue +22 -23
  32. package/src/components/atoms/VBadge.test.ts +11 -11
  33. package/src/components/atoms/VBadge.vue +2 -2
  34. package/src/components/atoms/VButton.test.ts +82 -82
  35. package/src/components/atoms/VButton.vue +20 -21
  36. package/src/components/atoms/VChip.test.ts +11 -11
  37. package/src/components/atoms/VChip.vue +3 -3
  38. package/src/components/atoms/VLightSwitch.test.ts +6 -6
  39. package/src/components/atoms/VLightSwitch.vue +26 -31
  40. package/src/components/atoms/VRadio/VRadioDescription.test.ts +13 -13
  41. package/src/components/atoms/VRadio/VRadioDescription.vue +2 -2
  42. package/src/components/atoms/VRadio/VRadioGroup.test.ts +40 -40
  43. package/src/components/atoms/VRadio/VRadioGroup.vue +19 -22
  44. package/src/components/atoms/VRadio/VRadioItem.test.ts +67 -67
  45. package/src/components/atoms/VRadio/VRadioItem.vue +10 -13
  46. package/src/components/atoms/VRadio/VRadioLabel.test.ts +13 -13
  47. package/src/components/atoms/VRadio/VRadioLabel.vue +5 -3
  48. package/src/components/atoms/VSwitch/VSwitch.test.ts +33 -33
  49. package/src/components/atoms/VSwitch/VSwitch.vue +24 -27
  50. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +13 -13
  51. package/src/components/atoms/VSwitch/VSwitchDescription.vue +2 -2
  52. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +9 -9
  53. package/src/components/atoms/VSwitch/VSwitchGroup.vue +2 -2
  54. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +19 -19
  55. package/src/components/atoms/VSwitch/VSwitchLabel.vue +2 -2
  56. package/src/components/atoms/index.ts +13 -13
  57. package/src/components/index.test.ts +3 -3
  58. package/src/components/index.ts +2 -2
  59. package/src/components/molecules/VAccordion/VAccordion.test.ts +11 -17
  60. package/src/components/molecules/VAccordion/VAccordion.vue +3 -3
  61. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +55 -55
  62. package/src/components/molecules/VAccordion/VAccordionItem.vue +9 -22
  63. package/src/components/molecules/VAlert.test.ts +38 -38
  64. package/src/components/molecules/VAlert.vue +25 -47
  65. package/src/components/molecules/VCard/VCard.test.ts +25 -25
  66. package/src/components/molecules/VCard/VCard.vue +13 -15
  67. package/src/components/molecules/VCard/VCardBody.test.ts +14 -14
  68. package/src/components/molecules/VCard/VCardBody.vue +4 -8
  69. package/src/components/molecules/VCard/VCardFooter.test.ts +22 -22
  70. package/src/components/molecules/VCard/VCardFooter.vue +10 -8
  71. package/src/components/molecules/VCard/VCardHeader.test.ts +25 -25
  72. package/src/components/molecules/VCard/VCardHeader.vue +7 -8
  73. package/src/components/molecules/VCodeBlock.test.ts +63 -63
  74. package/src/components/molecules/VCodeBlock.vue +27 -34
  75. package/src/components/molecules/VDrawer.test.ts +5 -5
  76. package/src/components/molecules/VDrawer.vue +10 -10
  77. package/src/components/molecules/VListbox/VListbox.test.ts +53 -53
  78. package/src/components/molecules/VListbox/VListbox.vue +31 -32
  79. package/src/components/molecules/VListbox/VListboxButton.test.ts +13 -13
  80. package/src/components/molecules/VListbox/VListboxButton.vue +5 -5
  81. package/src/components/molecules/VListbox/VListboxItem.test.ts +25 -25
  82. package/src/components/molecules/VListbox/VListboxItem.vue +7 -8
  83. package/src/components/molecules/VListbox/VListboxItems.test.ts +14 -14
  84. package/src/components/molecules/VListbox/VListboxItems.vue +9 -11
  85. package/src/components/molecules/VListbox/VListboxLabel.test.ts +10 -10
  86. package/src/components/molecules/VListbox/VListboxLabel.vue +2 -2
  87. package/src/components/molecules/VPreview.test.ts +26 -26
  88. package/src/components/molecules/VPreview.vue +22 -27
  89. package/src/components/molecules/VRail/VRail.test.ts +5 -5
  90. package/src/components/molecules/VRail/VRail.vue +7 -7
  91. package/src/components/molecules/VRail/VRailTile.test.ts +26 -28
  92. package/src/components/molecules/VRail/VRailTile.vue +13 -11
  93. package/src/components/molecules/VShell.test.ts +5 -5
  94. package/src/components/molecules/VShell.vue +11 -20
  95. package/src/components/molecules/VTabs/VTab.test.ts +48 -52
  96. package/src/components/molecules/VTabs/VTab.vue +13 -17
  97. package/src/components/molecules/VTabs/VTabPanel.test.ts +8 -8
  98. package/src/components/molecules/VTabs/VTabPanel.vue +1 -1
  99. package/src/components/molecules/VTabs/VTabs.test.ts +36 -36
  100. package/src/components/molecules/VTabs/VTabs.vue +18 -22
  101. package/src/components/molecules/index.ts +21 -21
  102. package/src/directives/clipboard.test.ts +9 -9
  103. package/src/directives/clipboard.ts +2 -2
  104. package/src/directives/index.ts +1 -1
  105. package/src/env.d.ts +2 -2
  106. package/src/index.test.ts +6 -6
  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 +115 -93
  111. package/src/services/dark-mode.service.ts +9 -9
  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 +5 -5
  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/index.test.ts +3 -3
  137. package/src/utils/index.ts +2 -2
  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 +6 -6
  141. package/src/utils/theme/remove.test.ts +8 -8
  142. package/src/utils/theme/theme-switcher.vue +58 -131
  143. package/src/utils/theme/theme.service.test.ts +69 -61
  144. package/src/utils/theme/theme.service.ts +19 -20
package/src/themes/theme-vuetiful-0.0.1.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
2
- @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap");
2
+ @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
3
3
 
4
4
  :root {
5
5
  /* =~= Theme Properties =~= */
6
- --theme-font-family-base: "Quicksand", sans-serif;
7
- --theme-font-family-heading: "Quicksand", sans-serif;
6
+ --theme-font-family-base: 'Quicksand', sans-serif;
7
+ --theme-font-family-heading: 'Quicksand', sans-serif;
8
8
  --theme-font-color-base: var(--color-surface-900);
9
9
  --theme-font-color-dark: var(--color-tertiary-50);
10
10
  --theme-rounded-base: 12px;
@@ -98,27 +98,27 @@
98
98
  --color-surface-900: 49 50 118; /* ⬅ #313276 */
99
99
  }
100
100
 
101
- [data-theme="vuetiful"] h1,
102
- [data-theme="vuetiful"] h2,
103
- [data-theme="vuetiful"] h3,
104
- [data-theme="vuetiful"] h4,
105
- [data-theme="vuetiful"] h5,
106
- [data-theme="vuetiful"] h6,
107
- [data-theme="vuetiful"] a,
108
- [data-theme="vuetiful"] button {
101
+ [data-theme='vuetiful'] h1,
102
+ [data-theme='vuetiful'] h2,
103
+ [data-theme='vuetiful'] h3,
104
+ [data-theme='vuetiful'] h4,
105
+ [data-theme='vuetiful'] h5,
106
+ [data-theme='vuetiful'] h6,
107
+ [data-theme='vuetiful'] a,
108
+ [data-theme='vuetiful'] button {
109
109
  font-weight: bold;
110
110
  }
111
111
 
112
112
  /* Applied to body with `<body data-theme="vuetiful">` */
113
113
  /* Created with: https://csshero.org/mesher/ */
114
- [data-theme="vuetiful"] {
114
+ [data-theme='vuetiful'] {
115
115
  /* prettier-ignore */
116
116
  background-image:
117
117
  radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
118
118
  radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
119
119
  radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
120
120
  }
121
- .dark [data-theme="vuetiful"] {
121
+ .dark [data-theme='vuetiful'] {
122
122
  /* prettier-ignore */
123
123
  background-image:
124
124
  radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
package/src/types/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from "./tailwind";
1
+ export * from './tailwind';
2
2
 
3
3
  /**
4
4
  * The commented string unions are to use in PropType<> for Vue components,
@@ -6,54 +6,54 @@ export * from "./tailwind";
6
6
  **/
7
7
 
8
8
  export const Variant = {
9
- Filled: "filled",
10
- FilledPrimary: "filled-primary",
11
- FilledSecondary: "filled-secondary",
12
- FilledTertiary: "filled-tertiary",
13
- FilledSuccess: "filled-success",
14
- FilledWarning: "filled-warning",
15
- FilledError: "filled-error",
16
- FilledSurface: "filled-surface",
17
- Ringed: "ringed",
18
- RingedPrimary: "ringed-primary",
19
- RingedSecondary: "ringed-secondary",
20
- RingedTertiary: "ringed-tertiary",
21
- RingedSuccess: "ringed-success",
22
- RingedWarning: "ringed-warning",
23
- RingedError: "ringed-error",
24
- RingedSurface: "ringed-surface",
25
- Ghost: "ghost",
26
- GhostPrimary: "ghost-primary",
27
- GhostSecondary: "ghost-secondary",
28
- GhostTertiary: "ghost-tertiary",
29
- GhostSuccess: "ghost-success",
30
- GhostWarning: "ghost-warning",
31
- GhostError: "ghost-error",
32
- GhostSurface: "ghost-surface",
33
- Soft: "soft",
34
- SoftPrimary: "soft-primary",
35
- SoftSecondary: "soft-secondary",
36
- SoftTertiary: "soft-tertiary",
37
- SoftSuccess: "soft-success",
38
- SoftWarning: "soft-warning",
39
- SoftError: "soft-error",
40
- SoftSurface: "soft-surface",
41
- Glass: "glass",
42
- GlassPrimary: "glass-primary",
43
- GlassSecondary: "glass-secondary",
44
- GlassTertiary: "glass-tertiary",
45
- GlassSuccess: "glass-success",
46
- GlassWarning: "glass-warning",
47
- GlassError: "glass-error",
48
- GlassSurface: "glass-surface",
9
+ Filled: 'filled',
10
+ FilledPrimary: 'filled-primary',
11
+ FilledSecondary: 'filled-secondary',
12
+ FilledTertiary: 'filled-tertiary',
13
+ FilledSuccess: 'filled-success',
14
+ FilledWarning: 'filled-warning',
15
+ FilledError: 'filled-error',
16
+ FilledSurface: 'filled-surface',
17
+ Ringed: 'ringed',
18
+ RingedPrimary: 'ringed-primary',
19
+ RingedSecondary: 'ringed-secondary',
20
+ RingedTertiary: 'ringed-tertiary',
21
+ RingedSuccess: 'ringed-success',
22
+ RingedWarning: 'ringed-warning',
23
+ RingedError: 'ringed-error',
24
+ RingedSurface: 'ringed-surface',
25
+ Ghost: 'ghost',
26
+ GhostPrimary: 'ghost-primary',
27
+ GhostSecondary: 'ghost-secondary',
28
+ GhostTertiary: 'ghost-tertiary',
29
+ GhostSuccess: 'ghost-success',
30
+ GhostWarning: 'ghost-warning',
31
+ GhostError: 'ghost-error',
32
+ GhostSurface: 'ghost-surface',
33
+ Soft: 'soft',
34
+ SoftPrimary: 'soft-primary',
35
+ SoftSecondary: 'soft-secondary',
36
+ SoftTertiary: 'soft-tertiary',
37
+ SoftSuccess: 'soft-success',
38
+ SoftWarning: 'soft-warning',
39
+ SoftError: 'soft-error',
40
+ SoftSurface: 'soft-surface',
41
+ Glass: 'glass',
42
+ GlassPrimary: 'glass-primary',
43
+ GlassSecondary: 'glass-secondary',
44
+ GlassTertiary: 'glass-tertiary',
45
+ GlassSuccess: 'glass-success',
46
+ GlassWarning: 'glass-warning',
47
+ GlassError: 'glass-error',
48
+ GlassSurface: 'glass-surface',
49
49
  };
50
50
  // "filled" | "filled-primary" | "filled-secondary" | "filled-tertiary" | "filled-success" | "filled-warning" | "filled-error" | "filled-surface" | "ringed" | "ringed-primary" | "ringed-secondary" | "ringed-tertiary" | "ringed-success" | "ringed-warning" | "ringed-error" | "ringed-surface" | "ghost" | "ghost-primary" | "ghost-secondary" | "ghost-tertiary" | "ghost-success" | "ghost-warning" | "ghost-error" | "ghost-surface" | "soft" | "soft-primary" | "soft-secondary" | "soft-tertiary" | "soft-success" | "soft-warning" | "soft-error" | "soft-surface" | "glass" | "glass-primary" | "glass-secondary" | "glass-tertiary" | "glass-success" | "glass-warning" | "glass-error" | "glass-surface" |
51
51
 
52
52
  export const Size = {
53
- XS: "xs",
54
- SM: "sm",
55
- MD: "md",
56
- LG: "lg",
57
- XL: "xl",
53
+ XS: 'xs',
54
+ SM: 'sm',
55
+ MD: 'md',
56
+ LG: 'lg',
57
+ XL: 'xl',
58
58
  };
59
59
  // "xs" | "sm" | "md" | "lg" | "xl"
package/src/types/tailwind.ts CHANGED
@@ -1,26 +1,7 @@
1
- export const tailwindNumbers = [
2
- "50",
3
- "100",
4
- "200",
5
- "300",
6
- "400",
7
- "500",
8
- "600",
9
- "700",
10
- "800",
11
- "900",
12
- ] as const;
1
+ export const tailwindNumbers = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'] as const;
13
2
 
14
3
  export type TailwindNumbers = (typeof tailwindNumbers)[number];
15
4
 
16
- export const semanticNames = [
17
- "primary",
18
- "secondary",
19
- "tertiary",
20
- "success",
21
- "warning",
22
- "error",
23
- "surface",
24
- ] as const;
5
+ export const semanticNames = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface'] as const;
25
6
 
26
7
  export type SemanticNames = (typeof semanticNames)[number];
package/src/utils/index.test.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  // test that all exports are defined
2
- import * as utils from "./index";
3
- import { describe, it, expect } from "vitest";
2
+ import * as utils from './index';
3
+ import { describe, it, expect } from 'vitest';
4
4
 
5
- describe("utils", () => {
5
+ describe('utils', () => {
6
6
  Object.entries(utils).forEach(([key, value]) => {
7
7
  it(`${key} is defined`, () => {
8
8
  expect(value).toBeDefined();
package/src/utils/index.ts CHANGED
@@ -1,4 +1,4 @@
1
- import ThemeSwitcher from "./theme/theme-switcher.vue";
2
- import { useTheme } from "./theme/theme.service";
1
+ import ThemeSwitcher from './theme/theme-switcher.vue';
2
+ import { useTheme } from './theme/theme.service';
3
3
 
4
4
  export { ThemeSwitcher, useTheme };
package/src/utils/platform/platform.service.test.ts CHANGED
@@ -1,16 +1,16 @@
1
- import { describe, expect, it, vi } from "vitest";
2
- import { usePlatform } from "./platform.service";
1
+ import { describe, expect, it, vi } from 'vitest';
2
+ import { usePlatform } from './platform.service';
3
3
 
4
4
  const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
5
5
 
6
- describe("usePlatform", () => {
7
- describe("isBrowser", () => {
8
- it("should return true when window is defined", () => {
6
+ describe('usePlatform', () => {
7
+ describe('isBrowser', () => {
8
+ it('should return true when window is defined', () => {
9
9
  const { isBrowser } = usePlatform();
10
10
  expect(isBrowser).toBe(true);
11
11
  });
12
12
 
13
- it("should return false when window is not defined", () => {
13
+ it('should return false when window is not defined', () => {
14
14
  window = undefined as any;
15
15
  const { isBrowser } = usePlatform();
16
16
  expect(isBrowser).toBe(false);
package/src/utils/platform/platform.service.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  const usePlatform = () => {
2
- const isBrowser = typeof window !== "undefined";
2
+ const isBrowser = typeof window !== 'undefined';
3
3
  return {
4
4
  isBrowser,
5
5
  };
package/src/utils/theme/callback.test.ts CHANGED
@@ -1,21 +1,21 @@
1
- import { describe, expect, it, vi } from "vitest";
1
+ import { describe, expect, it, vi } from 'vitest';
2
2
 
3
3
  /**
4
4
  * No clue why, but when this test is added to theme.service.test.ts, it fails.
5
5
  * Running it in isolation works fine.
6
6
  */
7
7
 
8
- describe("given there is a callback", () => {
9
- it("should call the callback", async () => {
10
- const { useTheme } = await import("./theme.service");
8
+ describe('given there is a callback', () => {
9
+ it('should call the callback', async () => {
10
+ const { useTheme } = await import('./theme.service');
11
11
  const { loadTheme } = useTheme();
12
12
 
13
13
  const callbackSpy = vi.fn();
14
14
  const callbackFunction = () => {
15
15
  callbackSpy();
16
16
  };
17
- loadTheme("vuetiful", callbackFunction);
18
- const link = document.querySelector("#theme") as HTMLLinkElement;
17
+ loadTheme('vuetiful', callbackFunction);
18
+ const link = document.querySelector('#theme') as HTMLLinkElement;
19
19
  // @ts-ignore
20
20
  link.onload();
21
21
 
package/src/utils/theme/remove.test.ts CHANGED
@@ -1,22 +1,22 @@
1
- import { describe, expect, it, vi } from "vitest";
1
+ import { describe, expect, it, vi } from 'vitest';
2
2
 
3
3
  /**
4
4
  * No clue why, but when this test is added to theme.service.test.ts, it fails.
5
5
  * Running it in isolation works fine.
6
6
  */
7
7
 
8
- describe("given there is no existing theme style tag", () => {
9
- it("should create a new theme style tag", async () => {
10
- const { useTheme } = await import("./theme.service");
8
+ describe('given there is no existing theme style tag', () => {
9
+ it('should create a new theme style tag', async () => {
10
+ const { useTheme } = await import('./theme.service');
11
11
  const { loadTheme } = useTheme();
12
12
 
13
13
  const removeObject = { remove: () => {} };
14
- const removeSpy = vi.spyOn(removeObject, "remove");
15
- vi.spyOn(window.document, "getElementById").mockReturnValueOnce(removeObject as any);
14
+ const removeSpy = vi.spyOn(removeObject, 'remove');
15
+ vi.spyOn(window.document, 'getElementById').mockReturnValueOnce(removeObject as any);
16
16
 
17
- loadTheme("vuetiful");
17
+ loadTheme('vuetiful');
18
18
 
19
- const link = document.querySelector("#theme") as HTMLLinkElement;
19
+ const link = document.querySelector('#theme') as HTMLLinkElement;
20
20
  // @ts-ignore
21
21
  link.onload();
22
22
 
package/src/utils/theme/theme-switcher.vue CHANGED
@@ -1,150 +1,77 @@
1
1
  <template>
2
- <div class="cc-theme-switcher">
3
- <VButton :class="`cc-theme-switcher__button ${buttonClasses}`" @click="showPopup = !showPopup">
2
+ <div class="vuetiful-theme-switcher">
3
+ <v-button :class="`vuetiful-theme-switcher__button ${classButton}`" @click="showPopup = !showPopup">
4
4
  Theme
5
- </VButton>
5
+ </v-button>
6
6
 
7
7
  <div
8
8
  v-if="showPopup"
9
- class="cc-theme-switcher__popup absolute z-10 mt-1 p-4 shadow-xl"
10
- :class="classes"
9
+ class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
10
+ :class="`${background} ${text} ${widthPopup} ${classList}`"
11
11
  >
12
- <div class="space-y-4">
13
- <section class="flex items-center justify-between">
14
- <h6>Mode</h6>
15
- <v-light-switch />
16
- </section>
17
- <nav class="list-nav -m-4 overflow-y-auto p-4" :class="listClasses">
18
- <ul class="flex flex-col gap-4">
19
- <li
20
- class="h-full w-full p-2 text-center capitalize hover:cursor-pointer hover:bg-primary-100 hover:text-primary-900"
21
- :class="`${listItemClasses} ${
22
- chosenTheme === theme.name
23
- ? 'bg-primary-50 text-primary-900'
24
- : 'bg-surface-200 text-surface-900'
25
- }`"
26
- v-for="(theme, index) in themes"
27
- :key="index"
28
- @click="loadTheme(theme.name)"
29
- >
30
- {{ theme.name }}
31
- </li>
32
- </ul>
33
- </nav>
34
- </div>
12
+ <section class="flex items-center justify-between">
13
+ <div class="text-lg">Mode</div>
14
+ <v-light-switch />
15
+ </section>
16
+ <nav
17
+ class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
18
+ :class="`${heightList} ${classList}`"
19
+ >
20
+ <v-button
21
+ class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
22
+ v-for="(theme, index) in themes"
23
+ :class="`${classListItem} ${chosenTheme === theme.name ? 'variant-filled-surface' : ''}`"
24
+ :key="index"
25
+ @click="loadTheme(theme.name)"
26
+ >
27
+ {{ theme.name }}
28
+ </v-button>
29
+ </nav>
35
30
  </div>
36
31
  </div>
37
32
  </template>
38
33
 
39
- <script lang="ts">
40
- import { CssClasses, useDarkMode, useTheme, VButton, VLightSwitch } from "@/index";
41
- import { computed, defineComponent, onMounted, ref } from "vue";
34
+ <script setup lang="ts">
35
+ import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
36
+ import { onMounted, ref } from 'vue';
42
37
 
43
- export default defineComponent({
44
- components: {
45
- VLightSwitch,
46
- VButton,
38
+ defineProps({
39
+ background: {
40
+ type: String as () => CssClasses,
41
+ default: 'bg-surface-50-900-token',
47
42
  },
48
- props: {
49
- bgLight: {
50
- type: String as () => CssClasses,
51
- default: "bg-surface-50",
52
- },
53
- bgDark: {
54
- type: String as () => CssClasses,
55
- default: "bg-surface-900",
56
- },
57
- textOnLight: {
58
- type: String as () => CssClasses,
59
- default: "text-surface-900",
60
- },
61
- textOnDark: {
62
- type: String as () => CssClasses,
63
- default: "text-surface-50",
64
- },
65
- width: {
66
- type: String as () => CssClasses,
67
- default: "w-60",
68
- },
69
- height: {
70
- type: String as () => CssClasses,
71
- default: "max-h-64 lg:max-h-[500px]",
72
- },
73
- ring: {
74
- type: String as () => CssClasses,
75
- default: "ring-[1px] ring-surface-500/30",
76
- },
77
- rounded: {
78
- type: String as () => CssClasses,
79
- default: "rounded-token",
80
- },
81
- roundedContainer: {
82
- type: String as () => CssClasses,
83
- default: "rounded-container-token",
84
- },
85
- buttonClasses: {
86
- type: String as () => CssClasses,
87
- default: "w-24",
88
- },
43
+ text: {
44
+ type: String as () => CssClasses,
45
+ default: 'text-surface-900-50-token',
89
46
  },
90
- setup(props) {
91
- const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
92
- const { currentMode, MODE } = useDarkMode();
93
47
 
94
- const showPopup = ref(false);
95
- onMounted(() => {
96
- initializeTheme();
97
- });
98
-
99
- const cTransition = `transition-all duration-[200ms]`;
100
-
101
- type OnKeyDownEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement };
102
- function onKeyDown(event: KeyboardEvent): void {
103
- if (["Enter", "Space"].includes(event.code)) {
104
- event.preventDefault();
105
- (event as OnKeyDownEvent).currentTarget.click();
106
- }
107
- }
108
-
109
- const background = computed(() => {
110
- return currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark;
111
- });
112
-
113
- const text = computed(() => {
114
- return currentMode.value === MODE.LIGHT ? props.textOnLight : props.textOnDark;
115
- });
116
-
117
- const classes = computed(() => {
118
- return `${cTransition}
119
- ${background.value}
120
- ${text.value}
121
- ${props.width}
122
- ${props.ring}
123
- ${props.roundedContainer}`;
124
- });
48
+ widthPopup: {
49
+ type: String as () => CssClasses,
50
+ default: 'w-60',
51
+ },
52
+ heightList: {
53
+ type: String as () => CssClasses,
54
+ default: 'max-h-64 lg:max-h-[500px]',
55
+ },
125
56
 
126
- const listClasses = computed(() => {
127
- return `${cTransition}
128
- ${props.height}`;
129
- });
57
+ classButton: {
58
+ type: String as () => CssClasses,
59
+ default: '',
60
+ },
61
+ classList: {
62
+ type: String as () => CssClasses,
63
+ default: '',
64
+ },
65
+ classListItem: {
66
+ type: String as () => CssClasses,
67
+ default: '',
68
+ },
69
+ });
130
70
 
131
- const listItemClasses = computed(() => {
132
- return `${cTransition}
133
- ${props.ring}
134
- ${props.rounded}`;
135
- });
71
+ const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
136
72
 
137
- return {
138
- onKeyDown,
139
- loadTheme,
140
- currentMode,
141
- classes,
142
- chosenTheme,
143
- themes,
144
- showPopup,
145
- listClasses,
146
- listItemClasses,
147
- };
148
- },
73
+ const showPopup = ref(false);
74
+ onMounted(() => {
75
+ initializeTheme();
149
76
  });
150
77
  </script>