@code-coaching/vuetiful 0.23.0 → 0.23.2

package/src/components/atoms/VSwitch/VSwitch.test.ts

@@ -1,81 +1,81 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VSwitch from "./VSwitch.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import VSwitch from './VSwitch.vue';
 
-describe("VSwitch props", () => {
-  test("defaults", () => {
+describe('VSwitch props', () => {
+  test('defaults', () => {
     const wrapper = mount(VSwitch);
 
     expect(wrapper.props()).toEqual({
       modelValue: false,
       disabled: false,
-      size: "md",
-      classTrack: "variant-filled",
-      classThumb: "bg-surface-100-800-token",
-      as: "button",
-      name: "",
+      size: 'md',
+      classTrack: 'variant-filled',
+      classThumb: 'bg-surface-100-800-token',
+      as: 'button',
+      name: '',
       unstyled: false,
     });
   });
 
-  test("size xs", () => {
+  test('size xs', () => {
     const wrapper = mount(VSwitch, {
       props: {
-        size: "xs",
+        size: 'xs',
       },
     });
 
     const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes("class")).toContain("w-8 h-4");
+    expect(track.attributes('class')).toContain('w-8 h-4');
   });
 
-  test("size sm", () => {
+  test('size sm', () => {
     const wrapper = mount(VSwitch, {
       props: {
-        size: "sm",
+        size: 'sm',
       },
     });
 
     const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes("class")).toContain("w-12 h-6");
+    expect(track.attributes('class')).toContain('w-12 h-6');
   });
 
-  test("size md", () => {
+  test('size md', () => {
     const wrapper = mount(VSwitch, {
       props: {
-        size: "md",
+        size: 'md',
       },
     });
 
     const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes("class")).toContain("w-16 h-8");
+    expect(track.attributes('class')).toContain('w-16 h-8');
   });
 
-  test("size lg", () => {
+  test('size lg', () => {
     const wrapper = mount(VSwitch, {
       props: {
-        size: "lg",
+        size: 'lg',
       },
     });
 
     const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes("class")).toContain("w-20 h-10");
+    expect(track.attributes('class')).toContain('w-20 h-10');
   });
 
-  test("size xl", () => {
+  test('size xl', () => {
     const wrapper = mount(VSwitch, {
       props: {
-        size: "xl",
+        size: 'xl',
       },
     });
 
     const track = wrapper.find("[data-test='switch-track']");
-    expect(track.attributes("class")).toContain("w-24 h-12");
+    expect(track.attributes('class')).toContain('w-24 h-12');
   });
 });
 
-describe("VSwitch events", () => {
-  test("update:modelValue", async () => {
+describe('VSwitch events', () => {
+  test('update:modelValue', async () => {
     const wrapper = mount(VSwitch, {
       props: {
         modelValue: false,
@@ -83,18 +83,18 @@ describe("VSwitch events", () => {
     });
 
     await wrapper.setProps({ modelValue: true });
-    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue');
   });
 });
 
-describe("VSwitch default slot", () => {
-  test("default slot", () => {
+describe('VSwitch default slot', () => {
+  test('default slot', () => {
     const wrapper = mount(VSwitch, {
       slots: {
-        default: "John Duck",
+        default: 'John Duck',
       },
     });
 
-    expect(wrapper.text()).toContain("John Duck");
+    expect(wrapper.text()).toContain('John Duck');
   });
-})
+});

package/src/components/atoms/VSwitch/VSwitch.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { sizeProp, unstyledProp } from "@/props";
-import { Switch } from "@headlessui/vue";
-import { computed, ref, watch } from "vue";
+import { useSettings } from '@/index';
+import { sizeProp, unstyledProp } from '@/props';
+import { Switch } from '@headlessui/vue';
+import { computed, ref, watch } from 'vue';
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
   modelValue: {
     type: Boolean,
@@ -17,20 +17,20 @@ const props = defineProps({
 
   classTrack: {
     type: String,
-    default: "variant-filled",
+    default: 'variant-filled',
   },
   classThumb: {
     type: String,
-    default: "bg-surface-100-800-token",
+    default: 'bg-surface-100-800-token',
   },
 
   as: {
     type: String,
-    default: "button",
+    default: 'button',
   },
   name: {
     type: String,
-    default: "",
+    default: '',
   },
 
   size: sizeProp,
@@ -42,33 +42,32 @@ watch(
   () => props.modelValue,
   (newValue) => {
     parentModelValue.value = newValue;
-  }
+  },
 );
 watch(
   () => parentModelValue.value,
   (newValue) => {
-    emit("update:modelValue", newValue);
-  }
+    emit('update:modelValue', newValue);
+  },
 );
 
 const trackSize = computed(() => {
   switch (props.size) {
-    case "xs":
-      return "w-8 h-4";
-    case "sm":
-      return "w-12 h-6";
-    case "md":
-      return "w-16 h-8";
-    case "lg":
-      return "w-20 h-10";
-    case "xl":
-      return "w-24 h-12";
+    case 'xs':
+      return 'w-8 h-4';
+    case 'sm':
+      return 'w-12 h-6';
+    case 'md':
+      return 'w-16 h-8';
+    case 'lg':
+      return 'w-20 h-10';
+    case 'xl':
+      return 'w-24 h-12';
   }
 });
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.switch.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.switch.unstyled || props.unstyled;
 </script>
 
 <template>
@@ -76,9 +75,7 @@ const isUnstyled =
   <Switch
     data-test="switch"
     :class="`vuetiful-slide-toggle ${
-      isUnstyled
-        ? ''
-        : `rounded-container-token ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`
+      isUnstyled ? '' : `rounded-container-token ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`
     }`"
     :name="name"
     :as="as"

package/src/components/atoms/VSwitch/VSwitchDescription.test.ts

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VSwitchDescription from "./VSwitchDescription.vue";
-import VSwitchGroup from "./VSwitchGroup.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import VSwitchDescription from './VSwitchDescription.vue';
+import VSwitchGroup from './VSwitchGroup.vue';
 
-test("VSwitchDescription using slot", () => {
+test('VSwitchDescription using slot', () => {
   const wrapper = mount({
     template: `
       <v-switch-group>
@@ -11,15 +11,15 @@ test("VSwitchDescription using slot", () => {
       </v-switch-group>
     `,
     components: {
-      "v-switch-label": VSwitchDescription,
-      "v-switch-group": VSwitchGroup,
+      'v-switch-label': VSwitchDescription,
+      'v-switch-group': VSwitchGroup,
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain('John Duck');
 });
 
-describe("VSwitchDescription props", () => {
+describe('VSwitchDescription props', () => {
   test("default 'as' prop", () => {
     const wrapper = mount({
       template: `
@@ -28,8 +28,8 @@ describe("VSwitchDescription props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchDescription,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchDescription,
+        'v-switch-group': VSwitchGroup,
       },
     });
 
@@ -44,8 +44,8 @@ describe("VSwitchDescription props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchDescription,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchDescription,
+        'v-switch-group': VSwitchGroup,
       },
     });
 

package/src/components/atoms/VSwitch/VSwitchDescription.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { SwitchDescription } from "@headlessui/vue";
+import { SwitchDescription } from '@headlessui/vue';
 
 defineProps({
   as: {
     type: String,
-    default: "p",
+    default: 'p',
   },
 });
 </script>

package/src/components/atoms/VSwitch/VSwitchGroup.test.ts

@@ -1,26 +1,26 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VSwitchGroup from "./VSwitchGroup.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import VSwitchGroup from './VSwitchGroup.vue';
 
-test("VSwitchGroup using slot", () => {
+test('VSwitchGroup using slot', () => {
   const wrapper = mount(VSwitchGroup as any, {
     slots: {
-      default: "John Duck",
+      default: 'John Duck',
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain('John Duck');
 });
 
-describe("VSwitchGroup props", () => {
+describe('VSwitchGroup props', () => {
   test("custom 'as' prop", () => {
     const wrapper = mount(VSwitchGroup as any, {
       props: {
-        as: "div",
+        as: 'div',
       },
     });
 
-    const divEl = wrapper.find("div");
+    const divEl = wrapper.find('div');
     expect(divEl).not.toBeUndefined();
   });
 });

package/src/components/atoms/VSwitch/VSwitchGroup.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { SwitchGroup } from "@headlessui/vue";
+import { SwitchGroup } from '@headlessui/vue';
 
 defineProps({
   as: {
     type: String,
-    default: "div",
+    default: 'div',
   },
 });
 </script>

package/src/components/atoms/VSwitch/VSwitchLabel.test.ts

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VSwitchGroup from "./VSwitchGroup.vue";
-import VSwitchLabel from "./VSwitchLabel.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import VSwitchGroup from './VSwitchGroup.vue';
+import VSwitchLabel from './VSwitchLabel.vue';
 
-test("VSwitchLabel using slot", () => {
+test('VSwitchLabel using slot', () => {
   const wrapper = mount({
     template: `
       <v-switch-group>
@@ -11,15 +11,15 @@ test("VSwitchLabel using slot", () => {
       </v-switch-group>
     `,
     components: {
-      "v-switch-label": VSwitchLabel,
-      "v-switch-group": VSwitchGroup,
+      'v-switch-label': VSwitchLabel,
+      'v-switch-group': VSwitchGroup,
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain('John Duck');
 });
 
-describe("VSwitchLabel props", () => {
+describe('VSwitchLabel props', () => {
   test("default 'as' prop", () => {
     const wrapper = mount({
       template: `
@@ -28,8 +28,8 @@ describe("VSwitchLabel props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchLabel,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchLabel,
+        'v-switch-group': VSwitchGroup,
       },
     });
 
@@ -44,8 +44,8 @@ describe("VSwitchLabel props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchLabel,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchLabel,
+        'v-switch-group': VSwitchGroup,
       },
     });
 
@@ -61,13 +61,13 @@ describe("VSwitchLabel props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchLabel,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchLabel,
+        'v-switch-group': VSwitchGroup,
       },
     });
 
     const label = wrapper.findComponent(VSwitchLabel);
-    expect(label.props("passive")).toBe(false);
+    expect(label.props('passive')).toBe(false);
   });
 
   test("custom 'passive' prop'", () => {
@@ -78,12 +78,12 @@ describe("VSwitchLabel props", () => {
         </v-switch-group>
       `,
       components: {
-        "v-switch-label": VSwitchLabel,
-        "v-switch-group": VSwitchGroup,
+        'v-switch-label': VSwitchLabel,
+        'v-switch-group': VSwitchGroup,
       },
     });
 
     const label = wrapper.findComponent(VSwitchLabel);
-    expect(label.props("passive")).toBe(true);
+    expect(label.props('passive')).toBe(true);
   });
 });

package/src/components/atoms/VSwitch/VSwitchLabel.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { SwitchLabel } from "@headlessui/vue";
+import { SwitchLabel } from '@headlessui/vue';
 
 defineProps({
   as: {
     type: String,
-    default: "p",
+    default: 'p',
   },
   passive: {
     type: Boolean,

package/src/components/atoms/index.ts

@@ -1,18 +1,18 @@
-import VAvatar from "./VAvatar.vue";
-import VBadge from "./VBadge.vue";
-import VButton from "./VButton.vue";
-import VChip from "./VChip.vue";
-import VLightSwitch from "./VLightSwitch.vue";
+import VAvatar from './VAvatar.vue';
+import VBadge from './VBadge.vue';
+import VButton from './VButton.vue';
+import VChip from './VChip.vue';
+import VLightSwitch from './VLightSwitch.vue';
 
-import VRadioDescription from "./VRadio/VRadioDescription.vue";
-import VRadioGroup from "./VRadio/VRadioGroup.vue";
-import VRadioItem from "./VRadio/VRadioItem.vue";
-import VRadioLabel from "./VRadio/VRadioLabel.vue";
+import VRadioDescription from './VRadio/VRadioDescription.vue';
+import VRadioGroup from './VRadio/VRadioGroup.vue';
+import VRadioItem from './VRadio/VRadioItem.vue';
+import VRadioLabel from './VRadio/VRadioLabel.vue';
 
-import VSwitch from "./VSwitch/VSwitch.vue";
-import VSwitchDescription from "./VSwitch/VSwitchDescription.vue";
-import VSwitchGroup from "./VSwitch/VSwitchGroup.vue";
-import VSwitchLabel from "./VSwitch/VSwitchLabel.vue";
+import VSwitch from './VSwitch/VSwitch.vue';
+import VSwitchDescription from './VSwitch/VSwitchDescription.vue';
+import VSwitchGroup from './VSwitch/VSwitchGroup.vue';
+import VSwitchLabel from './VSwitch/VSwitchLabel.vue';
 
 export {
   VAvatar,

package/src/components/index.test.ts

@@ -1,7 +1,7 @@
-import { describe, expect, it, vi } from "vitest";
-import * as index from "./index";
+import { describe, expect, it, vi } from 'vitest';
+import * as index from './index';
 
-describe("src", () => {
+describe('src', () => {
   Object.entries(index).forEach(([key, value]) => {
     it(`${key} is defined`, () => {
       expect(value).toBeDefined();

package/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from "./atoms";
-export * from "./molecules";
+export * from './atoms';
+export * from './molecules';

package/src/components/molecules/VAccordion/VAccordion.test.ts

@@ -1,33 +1,27 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VAccordion } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VAccordion } from '..';
 
-describe("VAccordion", () => {
-  test("defaults", async () => {
+describe('VAccordion', () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `<v-accordion></v-accordion>`,
       components: {
-        "v-accordion": VAccordion,
+        'v-accordion': VAccordion,
       },
     });
 
-    expect(wrapper.classes()).toEqual([
-      "vuetiful-accordion",
-      "flex",
-      "w-full",
-      "flex-col",
-      "gap-1",
-    ]);
+    expect(wrapper.classes()).toEqual(['vuetiful-accordion', 'flex', 'w-full', 'flex-col', 'gap-1']);
   });
 
-  test("unstyled", async () => {
+  test('unstyled', async () => {
     const wrapper = mount({
       template: /*html*/ `<v-accordion unstyled></v-accordion>`,
       components: {
-        "v-accordion": VAccordion,
+        'v-accordion': VAccordion,
       },
     });
 
-    expect(wrapper.classes()).toEqual(["vuetiful-accordion"]);
-  })
+    expect(wrapper.classes()).toEqual(['vuetiful-accordion']);
+  });
 });

package/src/components/molecules/VAccordion/VAccordion.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useSettings } from '@/services';
-import { provide, useSSRContext } from 'vue';
+import { provide } from 'vue';
 
 const props = defineProps({
   classQuestion: {
@@ -21,8 +21,8 @@ const props = defineProps({
 provide('classQuestion', props.classQuestion);
 provide('classAnswer', props.classAnswer);
 
-const { settings } = useSettings()
-const isUnstyled =  settings.global.unstyled || settings.components.accordion.unstyled || props.unstyled
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.accordion.unstyled || props.unstyled;
 </script>
 
 <template>