@code-coaching/vuetiful 0.23.1 → 0.24.0

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>

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

@@ -1,81 +1,81 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import VRadioGroup from "./VRadioGroup.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import VRadioGroup from './VRadioGroup.vue';
 
-test("VRadioGroup using slot", () => {
+test('VRadioGroup using slot', () => {
   const wrapper = mount(VRadioGroup, {
     slots: {
-      default: "John Duck",
+      default: 'John Duck',
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain('John Duck');
 });
 
-test("VRadioGroup default props", () => {
+test('VRadioGroup default props', () => {
   const wrapper = mount(VRadioGroup);
-  const radioGroupEl = wrapper.find("div");
+  const radioGroupEl = wrapper.find('div');
   expect(radioGroupEl.classes()).toEqual([
-    "vuetiful-radio-group",
-    "inline-flex",
-    "gap-1",
-    "p-1",
-    "border-token",
-    "border-surface-400-500-token",
-    "rounded-container-token",
-    "bg-surface-200-700-token",
-    "text-surface-900",
-    "dark:text-surface-50",
+    'vuetiful-radio-group',
+    'inline-flex',
+    'gap-1',
+    'p-1',
+    'border-token',
+    'border-surface-400-500-token',
+    'rounded-container-token',
+    'bg-surface-200-700-token',
+    'text-surface-900',
+    'dark:text-surface-50',
   ]);
 
   const radioGroup = wrapper.find("[data-test='radio-group']");
-  expect(radioGroup.element.tagName).toBe("DIV");
+  expect(radioGroup.element.tagName).toBe('DIV');
 });
 
-test("VRadioGroup custom class props", () => {
+test('VRadioGroup custom class props', () => {
   const wrapper = mount(VRadioGroup, {
     props: {
-      background: "custom-background-class",
-      text: "custom-text-class",
+      background: 'custom-background-class',
+      text: 'custom-text-class',
     },
   });
-  const radioGroupEl = wrapper.find("div");
+  const radioGroupEl = wrapper.find('div');
   expect(radioGroupEl.classes()).toEqual([
-    "vuetiful-radio-group",
-    "inline-flex",
-    "gap-1",
-    "p-1",
-    "border-token",
-    "border-surface-400-500-token",
-    "rounded-container-token",
-    "custom-background-class",
-    "custom-text-class",
+    'vuetiful-radio-group',
+    'inline-flex',
+    'gap-1',
+    'p-1',
+    'border-token',
+    'border-surface-400-500-token',
+    'rounded-container-token',
+    'custom-background-class',
+    'custom-text-class',
   ]);
 });
 
 test("VRadioGroup custom 'as' prop", () => {
   const wrapper = mount(VRadioGroup, {
     props: {
-      as: "span",
+      as: 'span',
     },
   });
 
   const radioGroup = wrapper.find("[data-test='radio-group']");
-  expect(radioGroup.element.tagName).toBe("SPAN");
+  expect(radioGroup.element.tagName).toBe('SPAN');
 });
 
-describe("VRadioGroup v-model", () => {
-  describe("given value changes", () => {
-    test("should emit update:modelValue", async () => {
+describe('VRadioGroup v-model', () => {
+  describe('given value changes', () => {
+    test('should emit update:modelValue', async () => {
       const wrapper = mount(VRadioGroup, {
         props: {
-          modelValue: "John Duck",
+          modelValue: 'John Duck',
         },
       });
 
-      wrapper.setProps({ modelValue: "Jane Duck" });
+      wrapper.setProps({ modelValue: 'Jane Duck' });
       await wrapper.vm.$nextTick();
-      expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Jane Duck"]);
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual(['Jane Duck']);
     });
   });
 });

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { RadioGroup } from "@headlessui/vue";
-import { provide, ref, watch } from "vue";
+import { useSettings } from '@/index';
+import { RadioGroup } from '@headlessui/vue';
+import { provide, ref, watch } from 'vue';
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
   as: {
     type: String,
-    default: "div",
+    default: 'div',
   },
 
   disabled: {
@@ -18,29 +18,29 @@ const props = defineProps({
     type: [String, Function],
   },
 
-  modelValue: RadioGroup.props["modelValue"],
+  modelValue: RadioGroup.props['modelValue'],
 
   active: {
     type: String,
-    default: "variant-filled",
+    default: 'variant-filled',
   },
   hover: {
     type: String,
-    default: "hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50",
+    default: 'hover:variant-ghost hover:text-surface-900 dark:hover:text-surface-50',
   },
 
   background: {
     type: String,
-    default: "bg-surface-200-700-token",
+    default: 'bg-surface-200-700-token',
   },
   text: {
     type: String,
-    default: "text-surface-900 dark:text-surface-50",
+    default: 'text-surface-900 dark:text-surface-50',
   },
 
   classItem: {
     type: String,
-    default: "",
+    default: '',
   },
 
   unstyled: {
@@ -54,22 +54,21 @@ watch(
   () => props.modelValue,
   (newValue) => {
     parentModelValue.value = newValue;
-  }
+  },
 );
 watch(
   () => parentModelValue.value,
   (newValue) => {
-    emit("update:modelValue", newValue);
-  }
+    emit('update:modelValue', newValue);
+  },
 );
 
-provide("active", props.active);
-provide("hover", props.hover);
-provide("classItem", props.classItem);
+provide('active', props.active);
+provide('hover', props.hover);
+provide('classItem', props.classItem);
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.radioGroup.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.radioGroup.unstyled || props.unstyled;
 </script>
 l
 <template>
@@ -80,9 +79,7 @@ l
     :disabled="disabled"
     :by="by"
     :class="`vuetiful-radio-group inline-flex ${
-      isUnstyled
-        ? ''
-        : `gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
+      isUnstyled ? '' : `gap-1 p-1 border-token border-surface-400-500-token rounded-container-token`
     } ${background} ${text}`"
     v-model="parentModelValue"
   >

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

@@ -1,10 +1,10 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { ref } from "vue";
-import VRadioGroup from "./VRadioGroup.vue";
-import VRadioItem from "./VRadioItem.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { ref } from 'vue';
+import VRadioGroup from './VRadioGroup.vue';
+import VRadioItem from './VRadioItem.vue';
 
-test("VRadioItem using slot", () => {
+test('VRadioItem using slot', () => {
   const wrapper = mount({
     template: `
       <v-radio-group>
@@ -12,21 +12,21 @@ test("VRadioItem using slot", () => {
       </v-radio-group>
     `,
     components: {
-      "v-radio-item": VRadioItem,
-      "v-radio-group": VRadioGroup,
+      'v-radio-item': VRadioItem,
+      'v-radio-group': VRadioGroup,
     },
   });
 
   const itemEl = wrapper.find("[data-test='item']").element;
-  expect(itemEl.textContent).toBe("John Duck");
+  expect(itemEl.textContent).toBe('John Duck');
 });
 
-describe("VRadioItem slot states", () => {
-  describe("given no injected provide", () => {
-    test("should have the default active class", () => {
+describe('VRadioItem slot states', () => {
+  describe('given no injected provide', () => {
+    test('should have the default active class', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("John Duck");
+          const value = ref('John Duck');
           return { value };
         },
         template: `
@@ -35,20 +35,20 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("variant-filled")).toBe(true);
-      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(false);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('variant-filled')).toBe(true);
+      expect(itemEl.element.classList.contains('hover:variant-ghost')).toBe(false);
     });
 
-    test("should have the default hover class", () => {
+    test('should have the default hover class', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("not John Duck");
+          const value = ref('not John Duck');
           return { value };
         },
         template: `
@@ -57,21 +57,21 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("variant-filled")).toBe(false);
-      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(true);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('variant-filled')).toBe(false);
+      expect(itemEl.element.classList.contains('hover:variant-ghost')).toBe(true);
     });
   });
-  describe("given v-slot checked is true", () => {
-    test("should have the active class", () => {
+  describe('given v-slot checked is true', () => {
+    test('should have the active class', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("John Duck");
+          const value = ref('John Duck');
           return { value };
         },
         template: `
@@ -80,26 +80,26 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
         provide: {
-          active: "custom-active-class",
-          hover: "custom-hover-class",
+          active: 'custom-active-class',
+          hover: 'custom-hover-class',
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("custom-active-class")).toBe(true);
-      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(false);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('custom-active-class')).toBe(true);
+      expect(itemEl.element.classList.contains('custom-hover-class')).toBe(false);
     });
   });
 
-  describe("given v-slot checked is false", () => {
-    test("should have the hover class", () => {
+  describe('given v-slot checked is false', () => {
+    test('should have the hover class', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("not John Duck");
+          const value = ref('not John Duck');
           return { value };
         },
         template: `
@@ -108,26 +108,26 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
         provide: {
-          active: "custom-active-class",
-          hover: "custom-hover-class",
+          active: 'custom-active-class',
+          hover: 'custom-hover-class',
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("custom-active-class")).toBe(false);
-      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(true);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('custom-active-class')).toBe(false);
+      expect(itemEl.element.classList.contains('custom-hover-class')).toBe(true);
     });
   });
 
-  describe("given v-slot disabled is false", () => {
-    test("should not have the disabled classes", () => {
+  describe('given v-slot disabled is false', () => {
+    test('should not have the disabled classes', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("John Duck");
+          const value = ref('John Duck');
           return { value };
         },
         template: `
@@ -136,27 +136,27 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
         provide: {
-          active: "custom-active-class",
-          hover: "custom-hover-class",
+          active: 'custom-active-class',
+          hover: 'custom-hover-class',
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("cursor-pointer")).toBe(true);
-      expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(false);
-      expect(itemEl.element.classList.contains("opacity-50")).toBe(false);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('cursor-pointer')).toBe(true);
+      expect(itemEl.element.classList.contains('cursor-not-allowed')).toBe(false);
+      expect(itemEl.element.classList.contains('opacity-50')).toBe(false);
     });
   });
 
-  describe("given v-slot disabled is true", () => {
-    test("should have the disabled classes", () => {
+  describe('given v-slot disabled is true', () => {
+    test('should have the disabled classes', () => {
       const wrapper = mount({
         setup() {
-          const value = ref("John Duck");
+          const value = ref('John Duck');
           return { value };
         },
         template: `
@@ -165,19 +165,19 @@ describe("VRadioItem slot states", () => {
           </v-radio-group>
         `,
         components: {
-          "v-radio-item": VRadioItem,
-          "v-radio-group": VRadioGroup,
+          'v-radio-item': VRadioItem,
+          'v-radio-group': VRadioGroup,
         },
         provide: {
-          active: "custom-active-class",
-          hover: "custom-hover-class",
+          active: 'custom-active-class',
+          hover: 'custom-hover-class',
         },
       });
 
-      const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("cursor-pointer")).toBe(false);
-      expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(true);
-      expect(itemEl.element.classList.contains("opacity-50")).toBe(true);
+      const itemEl = wrapper.find("[data-test='item']").find('div');
+      expect(itemEl.element.classList.contains('cursor-pointer')).toBe(false);
+      expect(itemEl.element.classList.contains('cursor-not-allowed')).toBe(true);
+      expect(itemEl.element.classList.contains('opacity-50')).toBe(true);
     });
   });
 });

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { RadioGroupOption } from "@headlessui/vue";
-import { inject } from "vue";
+import { useSettings } from '@/index';
+import { RadioGroupOption } from '@headlessui/vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   value: {
@@ -14,24 +14,21 @@ const props = defineProps({
   },
 });
 
-const active = inject("active") as string;
-const hover = inject("hover") as string;
-const classItem = inject("classItem") as string;
+const active = inject('active') as string;
+const hover = inject('hover') as string;
+const classItem = inject('classItem') as string;
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.radioItem.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.radioItem.unstyled || props.unstyled;
 </script>
 
 <template>
   <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
     <div
       data-test="radio-item"
-      :class="`vuetiful-radio-item ${
-        isUnstyled ? '' : `px-4 py-1 text-center text-base rounded-token`
-      } ${checked ? active : hover} ${
-        disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-      } ${classItem}`"
+      :class="`vuetiful-radio-item ${isUnstyled ? '' : `px-4 py-1 text-center text-base rounded-token`} ${
+        checked ? active : hover
+      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${classItem}`"
     >
       <slot />
     </div>

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

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

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

@@ -1,14 +1,16 @@
 <script setup lang="ts">
-import { RadioGroupLabel } from "@headlessui/vue";
+import { RadioGroupLabel } from '@headlessui/vue';
 
 defineProps({
   as: {
     type: String,
-    default: "p",
+    default: 'p',
   },
 });
 </script>
 
 <template>
-  <RadioGroupLabel :as="as" class="vuetiful-radio-label"><slot /></RadioGroupLabel>
+  <RadioGroupLabel :as="as" class="vuetiful-radio-label">
+    <slot />
+  </RadioGroupLabel>
 </template>