@code-coaching/vuetiful 0.23.0 → 0.23.2

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

@@ -1,179 +1,179 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, vi } from "vitest";
-import { VButton } from ".";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi } from 'vitest';
+import { VButton } from '.';
 
-test("VButton", () => {
+test('VButton', () => {
   expect(VButton).toBeTruthy();
 });
 
-test("VButton using slot", () => {
+test('VButton using slot', () => {
   const wrapper = mount(VButton, {
     slots: {
-      default: "John Duck",
+      default: 'John Duck',
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain('John Duck');
 });
 
-describe("VButton props", () => {
-  describe("size", () => {
-    test("xs", () => {
+describe('VButton props', () => {
+  describe('size', () => {
+    test('xs', () => {
       const wrapper = mount(VButton, {
         props: {
-          size: "xs",
+          size: 'xs',
         },
       });
-      expect(wrapper.classes()).toContain("px-2.5");
-      expect(wrapper.classes()).toContain("py-1.5");
-      expect(wrapper.classes()).toContain("text-xs");
+      expect(wrapper.classes()).toContain('px-2.5');
+      expect(wrapper.classes()).toContain('py-1.5');
+      expect(wrapper.classes()).toContain('text-xs');
     });
 
-    test("sm", () => {
+    test('sm', () => {
       const wrapper = mount(VButton, {
         props: {
-          size: "sm",
+          size: 'sm',
         },
       });
-      expect(wrapper.classes()).toContain("px-3");
-      expect(wrapper.classes()).toContain("py-2");
-      expect(wrapper.classes()).toContain("text-sm");
-      expect(wrapper.classes()).toContain("leading-4");
+      expect(wrapper.classes()).toContain('px-3');
+      expect(wrapper.classes()).toContain('py-2');
+      expect(wrapper.classes()).toContain('text-sm');
+      expect(wrapper.classes()).toContain('leading-4');
     });
 
-    test("md", () => {
+    test('md', () => {
       const wrapper = mount(VButton, {
         props: {
-          size: "md",
+          size: 'md',
         },
       });
-      expect(wrapper.classes()).toContain("px-4");
-      expect(wrapper.classes()).toContain("py-2");
-      expect(wrapper.classes()).toContain("text-sm");
+      expect(wrapper.classes()).toContain('px-4');
+      expect(wrapper.classes()).toContain('py-2');
+      expect(wrapper.classes()).toContain('text-sm');
     });
 
-    test("lg", () => {
+    test('lg', () => {
       const wrapper = mount(VButton, {
         props: {
-          size: "lg",
+          size: 'lg',
         },
       });
-      expect(wrapper.classes()).toContain("px-4");
-      expect(wrapper.classes()).toContain("py-2");
-      expect(wrapper.classes()).toContain("text-base");
+      expect(wrapper.classes()).toContain('px-4');
+      expect(wrapper.classes()).toContain('py-2');
+      expect(wrapper.classes()).toContain('text-base');
     });
 
-    test("xl", () => {
+    test('xl', () => {
       const wrapper = mount(VButton, {
         props: {
-          size: "xl",
+          size: 'xl',
         },
       });
-      expect(wrapper.classes()).toContain("px-6");
-      expect(wrapper.classes()).toContain("py-3");
-      expect(wrapper.classes()).toContain("text-base"); 
+      expect(wrapper.classes()).toContain('px-6');
+      expect(wrapper.classes()).toContain('py-3');
+      expect(wrapper.classes()).toContain('text-base');
     });
   });
 
-  describe("given icon is true", () => {
-    test("should have btn-icon class, not have btn class", () => {
+  describe('given icon is true', () => {
+    test('should have btn-icon class, not have btn class', () => {
       const wrapper = mount(VButton, {
         props: {
           icon: true,
         },
       });
-      expect(wrapper.classes()).toContain("btn-icon");
-      expect(wrapper.classes()).not.toContain("btn");
+      expect(wrapper.classes()).toContain('btn-icon');
+      expect(wrapper.classes()).not.toContain('btn');
     });
   });
-  describe("given icon is false", () => {
-    test("should have btn class, not have btn-icon class", () => {
+  describe('given icon is false', () => {
+    test('should have btn class, not have btn-icon class', () => {
       const wrapper = mount(VButton, {
         props: {
           icon: false,
         },
       });
-      expect(wrapper.classes()).not.toContain("btn-icon");
-      expect(wrapper.classes()).toContain("btn");
+      expect(wrapper.classes()).not.toContain('btn-icon');
+      expect(wrapper.classes()).toContain('btn');
     });
   });
 });
 
-describe("VButton events", () => {
-  describe("given click event", () => {
-    test("should preventDefault and emit click event", async () => {
+describe('VButton events', () => {
+  describe('given click event', () => {
+    test('should preventDefault and emit click event', async () => {
       const wrapper = mount(VButton);
       const clickEvent = { preventDefault: () => {} };
-      const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
-      wrapper.trigger("click", clickEvent);
+      const preventDefaultSpy = vi.spyOn(clickEvent, 'preventDefault');
+      wrapper.trigger('click', clickEvent);
       await wrapper.vm.$nextTick();
       expect(preventDefaultSpy).toHaveBeenCalled();
-      expect(wrapper.emitted("click")).toBeTruthy();
+      expect(wrapper.emitted('click')).toBeTruthy();
     });
   });
 });
 
-describe("VButton a11y", () => {
-  describe("a11y role", () => {
-    test("should have role button", () => {
+describe('VButton a11y', () => {
+  describe('a11y role', () => {
+    test('should have role button', () => {
       const wrapper = mount(VButton);
-      expect(wrapper.attributes("role")).toBe("button");
+      expect(wrapper.attributes('role')).toBe('button');
     });
   });
-  describe("a11y tabindex", () => {
-    test("should have tabindex 0", () => {
+  describe('a11y tabindex', () => {
+    test('should have tabindex 0', () => {
       const wrapper = mount(VButton);
-      expect(wrapper.attributes("tabindex")).toBe("0");
+      expect(wrapper.attributes('tabindex')).toBe('0');
     });
   });
-  describe("given keydown event", () => {
-    describe("given key is Enter", () => {
-      test("should preventDefault and emit click event", async () => {
+  describe('given keydown event', () => {
+    describe('given key is Enter', () => {
+      test('should preventDefault and emit click event', async () => {
         const wrapper = mount(VButton);
-        const keydownEvent = { key: "Enter", preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        wrapper.trigger("keydown", keydownEvent);
+        const keydownEvent = { key: 'Enter', preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
+        wrapper.trigger('keydown', keydownEvent);
         await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted("click")).toBeTruthy();
+        expect(wrapper.emitted('click')).toBeTruthy();
       });
     });
 
-    describe("given key is Space", () => {
-      test("should preventDefault and not emit click event", async () => {
+    describe('given key is Space', () => {
+      test('should preventDefault and not emit click event', async () => {
         const wrapper = mount(VButton);
-        const keydownEvent = { key: " ", preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        wrapper.trigger("keydown", keydownEvent);
+        const keydownEvent = { key: ' ', preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
+        wrapper.trigger('keydown', keydownEvent);
         await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted("click")).toBeFalsy();
+        expect(wrapper.emitted('click')).toBeFalsy();
       });
     });
 
-    describe("given key is not Enter or Space", () => {
-      test("should not preventDefault and not emit click event", async () => {
+    describe('given key is not Enter or Space', () => {
+      test('should not preventDefault and not emit click event', async () => {
         const wrapper = mount(VButton);
-        const keydownEvent = { key: "a", preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        wrapper.trigger("keydown", keydownEvent);
+        const keydownEvent = { key: 'a', preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keydownEvent, 'preventDefault');
+        wrapper.trigger('keydown', keydownEvent);
         await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).not.toHaveBeenCalled();
-        expect(wrapper.emitted("click")).toBeFalsy();
+        expect(wrapper.emitted('click')).toBeFalsy();
       });
     });
   });
 
-  describe("given keyup event", () => {
-    describe("given key is Space", () => {
-      test("should preventDefault and emit click event", async () => {
+  describe('given keyup event', () => {
+    describe('given key is Space', () => {
+      test('should preventDefault and emit click event', async () => {
         const wrapper = mount(VButton);
-        const keyupEvent = { key: " ", preventDefault: () => {} };
-        const preventDefaultSpy = vi.spyOn(keyupEvent, "preventDefault");
-        wrapper.trigger("keyup", keyupEvent);
+        const keyupEvent = { key: ' ', preventDefault: () => {} };
+        const preventDefaultSpy = vi.spyOn(keyupEvent, 'preventDefault');
+        wrapper.trigger('keyup', keyupEvent);
         await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(wrapper.emitted("click")).toBeTruthy();
+        expect(wrapper.emitted('click')).toBeTruthy();
       });
     });
   });

package/src/components/atoms/VButton.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { sizeProp, unstyledProp, variantProp } from "@/props";
-import { useSettings } from "@/services";
-import { computed } from "vue";
+import { sizeProp, unstyledProp, variantProp } from '@/props';
+import { useSettings } from '@/services';
+import { computed } from 'vue';
 
 const props = defineProps({
   icon: {
@@ -10,17 +10,17 @@ const props = defineProps({
   },
   tag: {
     type: String as () => string,
-    default: "button",
+    default: 'button',
   },
 
   size: sizeProp,
   variant: variantProp,
   unstyled: unstyledProp,
 });
-const emit = defineEmits<{ (event: "click"): void }>();
+const emit = defineEmits<{ (event: 'click'): void }>();
 
 const activate = () => {
-  emit("click");
+  emit('click');
 };
 
 const clickHandler = (event: MouseEvent) => {
@@ -29,12 +29,12 @@ const clickHandler = (event: MouseEvent) => {
 };
 
 const keydownHandler = (event: KeyboardEvent) => {
-  if (["Enter", " "].includes(event.key)) event.preventDefault();
-  if (event.key === "Enter") activate();
+  if (['Enter', ' '].includes(event.key)) event.preventDefault();
+  if (event.key === 'Enter') activate();
 };
 
 const keyupHandler = (event: KeyboardEvent) => {
-  if (event.key === " ") {
+  if (event.key === ' ') {
     event.preventDefault();
     activate();
   }
@@ -42,22 +42,21 @@ const keyupHandler = (event: KeyboardEvent) => {
 
 const btnSize = computed(() => {
   switch (props.size) {
-    case "xs":
-      return "px-2.5 py-1.5 text-xs";
-    case "sm":
-      return "px-3 py-2 text-sm leading-4";
-    case "md":
-      return "px-4 py-2 text-sm";
-    case "lg":
-      return "px-4 py-2 text-base";
-    case "xl":
-      return "px-6 py-3 text-base";
+    case 'xs':
+      return 'px-2.5 py-1.5 text-xs';
+    case 'sm':
+      return 'px-3 py-2 text-sm leading-4';
+    case 'md':
+      return 'px-4 py-2 text-sm';
+    case 'lg':
+      return 'px-4 py-2 text-base';
+    case 'xl':
+      return 'px-6 py-3 text-base';
   }
 });
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.button.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.button.unstyled || props.unstyled;
 </script>
 
 <template>

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

@@ -1,33 +1,33 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VChip } from ".";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VChip } from '.';
 
-describe("VChip", () => {
-  test("default slot", () => {
+describe('VChip', () => {
+  test('default slot', () => {
     const wrapper = mount({
       template: `<v-chip>John Duck</v-chip>`,
       components: { VChip },
     });
 
-    expect(wrapper.text()).toContain("John Duck");
-    expect(wrapper.classes()).toContain("chip");
+    expect(wrapper.text()).toContain('John Duck');
+    expect(wrapper.classes()).toContain('chip');
   });
 
-  test("unstyled", () => {
+  test('unstyled', () => {
     const wrapper = mount({
       template: `<v-chip unstyled>John Duck</v-chip>`,
       components: { VChip },
     });
 
-    expect(wrapper.classes()).not.toContain("chip");
+    expect(wrapper.classes()).not.toContain('chip');
   });
 
-  test("variant", () => {
+  test('variant', () => {
     const wrapper = mount({
       template: `<v-chip variant="primary">John Duck</v-chip>`,
       components: { VChip },
     });
 
-    expect(wrapper.classes()).toContain("variant-primary");
+    expect(wrapper.classes()).toContain('variant-primary');
   });
 });

package/src/components/atoms/VChip.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { unstyledProp, variantProp } from "@/props";
-import { useSettings } from "@/services";
+import { unstyledProp, variantProp } from '@/props';
+import { useSettings } from '@/services';
 
 const props = defineProps({
-  unstyled: unstyledProp, 
+  unstyled: unstyledProp,
   variant: variantProp,
 });
 

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

@@ -1,18 +1,18 @@
-import { mount } from "@vue/test-utils";
-import { expect, test, vi } from "vitest";
-import { VLightSwitch } from ".";
-import { useDarkMode } from "@/services";
+import { mount } from '@vue/test-utils';
+import { expect, test, vi } from 'vitest';
+import { VLightSwitch } from '.';
+import { useDarkMode } from '@/services';
 
 const { MODE } = useDarkMode();
 
 const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
 
-test("VLightSwitch", () => {
+test('VLightSwitch', () => {
   expect(VLightSwitch).toBeTruthy();
 });
 
 // TODO: add tests
-test("VLightSwitch using slot", () => {
+test('VLightSwitch using slot', () => {
   window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
   const wrapper = mount(VLightSwitch);
 

package/src/components/atoms/VLightSwitch.vue

@@ -24,42 +24,42 @@
 </template>
 
 <script lang="ts">
-import { CssClasses, useDarkMode } from "@/index";
-import { computed, ComputedRef, defineComponent, onMounted } from "vue";
+import { CssClasses, useDarkMode } from '@/index';
+import { computed, ComputedRef, defineComponent, onMounted } from 'vue';
 
 export default defineComponent({
   props: {
     bgLight: {
       type: String as () => CssClasses,
-      default: "bg-surface-50",
+      default: 'bg-surface-50',
     },
     bgDark: {
       type: String as () => CssClasses,
-      default: "bg-surface-900",
+      default: 'bg-surface-900',
     },
     textLight: {
       type: String as () => CssClasses,
-      default: "text-surface-50",
+      default: 'text-surface-50',
     },
     textDark: {
       type: String as () => CssClasses,
-      default: "text-surface-900",
+      default: 'text-surface-900',
     },
     width: {
       type: String as () => CssClasses,
-      default: "w-12",
+      default: 'w-12',
     },
     height: {
       type: String as () => CssClasses,
-      default: "h-6",
+      default: 'h-6',
     },
     ring: {
       type: String as () => CssClasses,
-      default: "ring-[1px] ring-surface-500/30",
+      default: 'ring-[1px] ring-surface-500/30',
     },
     rounded: {
       type: String as () => CssClasses,
-      default: "rounded-token",
+      default: 'rounded-token',
     },
   },
   setup(props, { attrs }) {
@@ -70,13 +70,13 @@ export default defineComponent({
     });
 
     const cTransition = `transition-all duration-[200ms]`;
-    const cTrack = "cursor-pointer";
-    const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
-    const cIcon = "w-[70%] aspect-square";
+    const cTrack = 'cursor-pointer';
+    const cThumb = 'aspect-square scale-[0.8] flex justify-center items-center';
+    const cIcon = 'w-[70%] aspect-square';
 
     const svgPath = {
-      sun: "M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z",
-      moon: "M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z",
+      sun: 'M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z',
+      moon: 'M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z',
     };
 
     const onToggleHandler = () => {
@@ -85,35 +85,30 @@ export default defineComponent({
       setModeCurrent(toggle);
     };
 
-    type OnKeyDownEvent = KeyboardEvent & { currentTarget: EventTarget & HTMLDivElement };
+    type OnKeyDownEvent = KeyboardEvent & {
+      currentTarget: EventTarget & HTMLDivElement;
+    };
     const onKeyDown = (event: KeyboardEvent) => {
-      if (["Enter", "Space"].includes(event.code)) {
+      if (['Enter', 'Space'].includes(event.code)) {
         event.preventDefault();
         (event as OnKeyDownEvent).currentTarget.click();
       }
     };
 
-    const trackBg = computed(() =>
-      currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark
-    );
-    const thumbBg = computed(() =>
-      currentMode.value === MODE.LIGHT ? props.bgDark : props.bgLight
-    );
-    const thumbPosition = computed(() =>
-      currentMode.value === MODE.LIGHT ? "translate-x-[100%]" : ""
-    );
+    const trackBg = computed(() => (currentMode.value === MODE.LIGHT ? props.bgLight : props.bgDark));
+    const thumbBg = computed(() => (currentMode.value === MODE.LIGHT ? props.bgDark : props.bgLight));
+    const thumbPosition = computed(() => (currentMode.value === MODE.LIGHT ? 'translate-x-[100%]' : ''));
     const iconFill = computed(() => {
       return currentMode.value === MODE.LIGHT ? props.textLight : props.textDark;
     });
 
     const classesTrack: ComputedRef<string> = computed(() => {
-      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${
-        props.rounded
-      } ${trackBg.value} ${attrs.class ?? ""}`;
+      return `${cTrack} ${cTransition} ${props.width} ${props.height} ${props.ring} ${props.rounded} ${trackBg.value} ${
+        attrs.class ?? ''
+      }`;
     });
     const classesThumb: ComputedRef<string> = computed(
-      () =>
-        `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`
+      () => `${cThumb} ${cTransition} ${props.height} ${props.rounded} ${thumbBg.value} ${thumbPosition.value}`,
     );
     const classesIcon: ComputedRef<string> = computed(() => `${cIcon}`);
 

package/src/components/atoms/VRadio/VRadioDescription.test.ts

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

package/src/components/atoms/VRadio/VRadioDescription.vue

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