@code-coaching/vuetiful 0.23.1 → 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 +1 -1
  24. package/dist/types/utils/theme/theme.service.d.ts +1 -1
  25. package/dist/vuetiful.es.mjs +12 -18
  26. package/dist/vuetiful.umd.js +3 -3
  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 +10 -13
  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,9 +1,6 @@
1
1
  <template>
2
2
  <div class="vuetiful-theme-switcher">
3
- <v-button
4
- :class="`vuetiful-theme-switcher__button ${classButton}`"
5
- @click="showPopup = !showPopup"
6
- >
3
+ <v-button :class="`vuetiful-theme-switcher__button ${classButton}`" @click="showPopup = !showPopup">
7
4
  Theme
8
5
  </v-button>
9
6
 
@@ -35,39 +32,39 @@
35
32
  </template>
36
33
 
37
34
  <script setup lang="ts">
38
- import { CssClasses, useTheme, VButton, VLightSwitch } from "@/index";
39
- import { onMounted, ref } from "vue";
35
+ import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
36
+ import { onMounted, ref } from 'vue';
40
37
 
41
38
  defineProps({
42
39
  background: {
43
40
  type: String as () => CssClasses,
44
- default: "bg-surface-50-900-token",
41
+ default: 'bg-surface-50-900-token',
45
42
  },
46
43
  text: {
47
44
  type: String as () => CssClasses,
48
- default: "text-surface-900-50-token",
45
+ default: 'text-surface-900-50-token',
49
46
  },
50
47
 
51
48
  widthPopup: {
52
49
  type: String as () => CssClasses,
53
- default: "w-60",
50
+ default: 'w-60',
54
51
  },
55
52
  heightList: {
56
53
  type: String as () => CssClasses,
57
- default: "max-h-64 lg:max-h-[500px]",
54
+ default: 'max-h-64 lg:max-h-[500px]',
58
55
  },
59
56
 
60
57
  classButton: {
61
58
  type: String as () => CssClasses,
62
- default: "",
59
+ default: '',
63
60
  },
64
61
  classList: {
65
62
  type: String as () => CssClasses,
66
- default: "",
63
+ default: '',
67
64
  },
68
65
  classListItem: {
69
66
  type: String as () => CssClasses,
70
- default: "",
67
+ default: '',
71
68
  },
72
69
  });
73
70
 
package/src/utils/theme/theme.service.test.ts CHANGED
@@ -1,24 +1,26 @@
1
- import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
2
- import { Theme } from "./theme.service";
1
+ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
2
+ import { Theme } from './theme.service';
3
3
 
4
4
  const localStorageMock = {
5
5
  getItem: vi.fn(),
6
6
  setItem: vi.fn(),
7
7
  };
8
8
 
9
- describe("useTheme", () => {
9
+ describe('useTheme', () => {
10
10
  afterEach(() => {
11
11
  vi.resetModules();
12
12
  });
13
- describe("initializetheme", () => {
14
- describe("given not in browser", () => {
15
- it("should set the theme to the default theme if no theme is stored", async () => {
16
- const platform = await import("../platform/platform.service");
17
- vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: false });
13
+ describe('initializetheme', () => {
14
+ describe('given not in browser', () => {
15
+ it('should set the theme to the default theme if no theme is stored', async () => {
16
+ const platform = await import('../platform/platform.service');
17
+ vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
18
+ isBrowser: false,
19
+ });
18
20
 
19
- const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
21
+ const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
20
22
 
21
- const { useTheme } = await import("./theme.service");
23
+ const { useTheme } = await import('./theme.service');
22
24
  const { initializeTheme } = useTheme();
23
25
 
24
26
  initializeTheme();
@@ -27,68 +29,74 @@ describe("useTheme", () => {
27
29
  });
28
30
  });
29
31
 
30
- describe("given in browser", () => {
32
+ describe('given in browser', () => {
31
33
  beforeEach(() => {
32
34
  window.localStorage = localStorageMock as any;
33
35
  });
34
- describe("given no theme is stored", () => {
35
- it("should set the theme to the default theme", async () => {
36
- const platform = await import("../platform/platform.service");
37
- vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
36
+ describe('given no theme is stored', () => {
37
+ it('should set the theme to the default theme', async () => {
38
+ const platform = await import('../platform/platform.service');
39
+ vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
40
+ isBrowser: true,
41
+ });
38
42
 
39
- const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
43
+ const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
40
44
 
41
- const { useTheme } = await import("./theme.service");
45
+ const { useTheme } = await import('./theme.service');
42
46
  const { initializeTheme, THEMES, chosenTheme } = useTheme();
43
47
 
44
48
  initializeTheme();
45
49
 
46
- expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
50
+ expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
47
51
  expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
48
52
  });
49
53
  });
50
- describe("given a theme is stored", () => {
51
- it("should set the theme to the stored theme", async () => {
52
- const platform = await import("../platform/platform.service");
53
- vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
54
-
55
- const { useTheme } = await import("./theme.service");
54
+ describe('given a theme is stored', () => {
55
+ it('should set the theme to the stored theme', async () => {
56
+ const platform = await import('../platform/platform.service');
57
+ vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
58
+ isBrowser: true,
59
+ });
60
+
61
+ const { useTheme } = await import('./theme.service');
56
62
  const { initializeTheme, THEMES, chosenTheme } = useTheme();
57
63
 
58
- const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
64
+ const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
59
65
  localStorageSpy.mockReturnValueOnce(THEMES.ROCKET);
60
66
 
61
67
  initializeTheme();
62
68
 
63
- expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
69
+ expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
64
70
  expect(chosenTheme.value).toBe(THEMES.ROCKET);
65
71
  });
66
72
  });
67
73
 
68
- describe("given the theme is not valid", () => {
69
- it("should set the theme to the default theme", async () => {
70
- const platform = await import("../platform/platform.service");
71
- vi.spyOn(platform, "usePlatform").mockReturnValueOnce({ isBrowser: true });
74
+ describe('given the theme is not valid', () => {
75
+ it('should set the theme to the default theme', async () => {
76
+ const platform = await import('../platform/platform.service');
77
+ vi.spyOn(platform, 'usePlatform').mockReturnValueOnce({
78
+ isBrowser: true,
79
+ });
72
80
 
73
- const { useTheme } = await import("./theme.service");
81
+ const { useTheme } = await import('./theme.service');
74
82
  const { initializeTheme, THEMES, chosenTheme } = useTheme();
75
83
 
76
- const localStorageSpy = vi.spyOn(window.localStorage, "getItem");
77
- localStorageSpy.mockReturnValueOnce("invalid-theme");
84
+ const localStorageSpy = vi.spyOn(window.localStorage, 'getItem');
85
+ localStorageSpy.mockReturnValueOnce('invalid-theme');
78
86
 
79
87
  initializeTheme();
80
88
 
81
- expect(localStorageSpy).toHaveBeenCalledWith("vuetiful-theme");
89
+ expect(localStorageSpy).toHaveBeenCalledWith('vuetiful-theme');
82
90
  expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
83
91
  });
84
92
  });
85
93
  });
86
94
  });
87
95
 
88
- describe("loadTheme", () => {
89
- describe("given theme name exists in themes", () => {
90
- it("should set the theme to the given theme", async () => {
91
- const { useTheme } = await import("./theme.service");
96
+ describe('loadTheme', () => {
97
+ describe('given theme name exists in themes', () => {
98
+ it('should set the theme to the given theme', async () => {
99
+ const { useTheme } = await import('./theme.service');
92
100
  const { loadTheme, THEMES, chosenTheme } = useTheme();
93
101
 
94
102
  loadTheme(THEMES.ROCKET);
@@ -96,34 +104,34 @@ describe("useTheme", () => {
96
104
  expect(chosenTheme.value).toBe(THEMES.ROCKET);
97
105
  });
98
106
  });
99
- describe("given theme name does not exist in themes", () => {
100
- it("should set the theme to the default theme", async () => {
101
- const { useTheme } = await import("./theme.service");
107
+ describe('given theme name does not exist in themes', () => {
108
+ it('should set the theme to the default theme', async () => {
109
+ const { useTheme } = await import('./theme.service');
102
110
  const { loadTheme, THEMES, chosenTheme } = useTheme();
103
111
 
104
- loadTheme("invalid-theme");
112
+ loadTheme('invalid-theme');
105
113
 
106
114
  expect(chosenTheme.value).toBe(THEMES.VUETIFUL);
107
115
  });
108
116
  });
109
- describe("given default theme is not in themes", () => {
110
- it("should set the theme to the first theme in the themes object", async () => {
111
- const { useTheme } = await import("./theme.service");
117
+ describe('given default theme is not in themes', () => {
118
+ it('should set the theme to the first theme in the themes object', async () => {
119
+ const { useTheme } = await import('./theme.service');
112
120
  const { loadTheme, THEMES, chosenTheme, overwriteThemes, themes } = useTheme();
113
121
 
114
- const theme: Theme = { name: "fake theme", url: "" };
122
+ const theme: Theme = { name: 'fake theme', url: '' };
115
123
  overwriteThemes([themes.value[1], theme]);
116
124
 
117
- loadTheme("invalid-theme");
125
+ loadTheme('invalid-theme');
118
126
 
119
127
  expect(chosenTheme.value).toBe(themes.value[0].name);
120
128
  });
121
129
  });
122
130
  });
123
131
 
124
- describe("registerAllBuiltInThemes", () => {
125
- it("should register all built in themes", async () => {
126
- const { useTheme } = await import("./theme.service");
132
+ describe('registerAllBuiltInThemes', () => {
133
+ it('should register all built in themes', async () => {
134
+ const { useTheme } = await import('./theme.service');
127
135
  const { registerAllBuiltInThemes, THEMES, themes } = useTheme();
128
136
 
129
137
  registerAllBuiltInThemes();
@@ -132,25 +140,25 @@ describe("useTheme", () => {
132
140
  });
133
141
  });
134
142
 
135
- describe("registerTheme", () => {
136
- it("should register a theme", async () => {
137
- const { useTheme } = await import("./theme.service");
143
+ describe('registerTheme', () => {
144
+ it('should register a theme', async () => {
145
+ const { useTheme } = await import('./theme.service');
138
146
  const { registerTheme } = useTheme();
139
147
 
140
- const theme: Theme = { name: "fake theme", url: "" };
141
- expect(registerTheme(theme.name, "")).toEqual(theme);
148
+ const theme: Theme = { name: 'fake theme', url: '' };
149
+ expect(registerTheme(theme.name, '')).toEqual(theme);
142
150
  });
143
151
  });
144
152
 
145
- describe("saveThemeToStorage", () => {
146
- describe("given the theme does not exist", () => {
147
- it("should not save the theme to storage", async () => {
148
- const { useTheme } = await import("./theme.service");
153
+ describe('saveThemeToStorage', () => {
154
+ describe('given the theme does not exist', () => {
155
+ it('should not save the theme to storage', async () => {
156
+ const { useTheme } = await import('./theme.service');
149
157
  const { saveThemeToStorage } = useTheme();
150
158
 
151
- const localStorageSpy = vi.spyOn(window.localStorage, "setItem");
159
+ const localStorageSpy = vi.spyOn(window.localStorage, 'setItem');
152
160
 
153
- saveThemeToStorage("invalid-theme");
161
+ saveThemeToStorage('invalid-theme');
154
162
 
155
163
  expect(localStorageSpy).not.toHaveBeenCalled();
156
164
  });