@code-coaching/vuetiful 0.23.1 → 0.24.0

package/src/components/molecules/VListbox/VListboxItem.test.ts

@@ -1,12 +1,12 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { ref } from "vue";
-import VListbox from "./VListbox.vue";
-import VListboxItem from "./VListboxItem.vue";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { ref } from 'vue';
+import VListbox from './VListbox.vue';
+import VListboxItem from './VListboxItem.vue';
 
-describe("VListboxItem props", () => {
-  test("defaults", async () => {
-    const listboxValue = ref("John");
+describe('VListboxItem props', () => {
+  test('defaults', async () => {
+    const listboxValue = ref('John');
     const wrapper = mount({
       setup() {
         return { listboxValue };
@@ -18,34 +18,34 @@ describe("VListboxItem props", () => {
         </v-listbox>
       `,
       components: {
-        "v-listbox": VListbox,
-        "v-listbox-item": VListboxItem,
+        'v-listbox': VListbox,
+        'v-listbox-item': VListboxItem,
       },
     });
 
     const listbox = wrapper.find("[data-test='listbox']");
-    await listbox.find("button").trigger("click");
+    await listbox.find('button').trigger('click');
 
     const listboxItems = listbox.findAll("[data-test='listbox-item']");
     const selectedItem = listboxItems[0];
     const normalItem = listboxItems[1];
     expect(selectedItem.classes()).toEqual([
-      "vuetiful-listbox-item",
-      "px-4",
-      "py-1",
-      "text-base",
-      "rounded-token",
-      "variant-filled",
-      "cursor-pointer",
+      'vuetiful-listbox-item',
+      'px-4',
+      'py-1',
+      'text-base',
+      'rounded-token',
+      'variant-filled',
+      'cursor-pointer',
     ]);
     expect(normalItem.classes()).toEqual([
-      "vuetiful-listbox-item",
-      "px-4",
-      "py-1",
-      "text-base",
-      "rounded-token",
-      "hover:variant-ghost",
-      "cursor-pointer",
+      'vuetiful-listbox-item',
+      'px-4',
+      'py-1',
+      'text-base',
+      'rounded-token',
+      'hover:variant-ghost',
+      'cursor-pointer',
     ]);
   });
 });

package/src/components/molecules/VListbox/VListboxItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useSettings } from "@/services";
-import { ListboxOption } from "@headlessui/vue";
-import { inject } from "vue";
+import { useSettings } from '@/services';
+import { ListboxOption } from '@headlessui/vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   value: {
@@ -15,13 +15,12 @@ const props = defineProps({
   },
 });
 
-const activeClass = inject("active") as string;
-const hoverClass = inject("hover") as string;
-const classItem = inject("classItem") as string;
+const activeClass = inject('active') as string;
+const hoverClass = inject('hover') as string;
+const classItem = inject('classItem') as string;
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.listboxItem.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.listboxItem.unstyled || props.unstyled;
 </script>
 
 <template>

package/src/components/molecules/VListbox/VListboxItems.test.ts

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import VListbox from "./VListbox.vue";
-import VListboxItem from "./VListboxItem.vue";
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import VListbox from './VListbox.vue';
+import VListboxItem from './VListboxItem.vue';
 
-test("VListboxItems defaults", async () => {
+test('VListboxItems defaults', async () => {
   const wrapper = mount({
     template: /*html*/ `
       <v-listbox>
@@ -11,19 +11,19 @@ test("VListboxItems defaults", async () => {
       </v-listbox>
     `,
     components: {
-      "v-listbox": VListbox,
-      "v-listbox-item": VListboxItem,
+      'v-listbox': VListbox,
+      'v-listbox-item': VListboxItem,
     },
   });
 
   const listbox = wrapper.find("[data-test='listbox']");
-  await listbox.find("button").trigger("click");
+  await listbox.find('button').trigger('click');
 
   const listboxItems = listbox.find("[data-test='listbox-items']");
-  expect(listboxItems.classes()).toContain("flex-col");
+  expect(listboxItems.classes()).toContain('flex-col');
 });
 
-test("VListboxItems horizontal", async () => {
+test('VListboxItems horizontal', async () => {
   const wrapper = mount({
     template: /*html*/ `
       <v-listbox horizontal>
@@ -31,14 +31,14 @@ test("VListboxItems horizontal", async () => {
       </v-listbox>
     `,
     components: {
-      "v-listbox": VListbox,
-      "v-listbox-item": VListboxItem,
+      'v-listbox': VListbox,
+      'v-listbox-item': VListboxItem,
     },
   });
 
   const listbox = wrapper.find("[data-test='listbox']");
-  await listbox.find("button").trigger("click");
+  await listbox.find('button').trigger('click');
 
   const listboxItems = listbox.find("[data-test='listbox-items']");
-  expect(listboxItems.classes()).not.toContain("flex-col");
+  expect(listboxItems.classes()).not.toContain('flex-col');
 });

package/src/components/molecules/VListbox/VListboxItems.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { ListboxOptions } from "@headlessui/vue";
-import { inject } from "vue";
+import { useSettings } from '@/index';
+import { ListboxOptions } from '@headlessui/vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   as: {
     type: String,
-    default: "ul",
+    default: 'ul',
   },
   static: {
     type: Boolean,
@@ -19,10 +19,10 @@ const props = defineProps({
   },
 });
 
-const background = inject("background") as string;
-const text = inject("text") as string;
-const horizontal = inject("horizontal") as boolean;
-const classItems = inject("classItems") as string;
+const background = inject('background') as string;
+const text = inject('text') as string;
+const horizontal = inject('horizontal') as boolean;
+const classItems = inject('classItems') as string;
 
 const { settings } = useSettings();
 const isUnstyled = settings.global.unstyled || settings.components.listbox.unstyled || props.unstyled;
@@ -33,9 +33,7 @@ const isUnstyled = settings.global.unstyled || settings.components.listbox.unsty
     :as="as"
     :static="static"
     :class="`z-10 ${
-      isUnstyled
-        ? ''
-        : `rounded-container-token' gap-1 p-4 border-token border-surface-400-500-token`
+      isUnstyled ? '' : `rounded-container-token' gap-1 p-4 border-token border-surface-400-500-token`
     } ${background} ${text} ${horizontal ? 'flex' : 'flex-col'} ${classItems}`"
     data-test="listbox-items"
   >

package/src/components/molecules/VListbox/VListboxLabel.test.ts

@@ -1,30 +1,30 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import VListbox from "./VListbox.vue";
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import VListbox from './VListbox.vue';
 
-test("VListboxLabel using slot", () => {
+test('VListboxLabel using slot', () => {
   const wrapper = mount({
     template: `
       <v-listbox></v-listbox>
     `,
     components: {
-      "v-listbox": VListbox,
+      'v-listbox': VListbox,
     },
   });
 
-  expect(wrapper.text()).toBe("Select an option");
+  expect(wrapper.text()).toBe('Select an option');
 });
 
-test("VListboxLabel custom label", () => {
+test('VListboxLabel custom label', () => {
   const wrapper = mount({
     template: `
       <v-listbox text-label="John Duck"></v-listbox>
     `,
     components: {
-      "v-listbox": VListbox,
+      'v-listbox': VListbox,
     },
   });
 
-  const label = wrapper.find("label");
-  expect(label.text()).toBe("John Duck");
+  const label = wrapper.find('label');
+  expect(label.text()).toBe('John Duck');
 });

package/src/components/molecules/VListbox/VListboxLabel.vue

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

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

@@ -1,32 +1,32 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VPreview } from ".";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VPreview } from '.';
 
-test("VPreview", () => {
+test('VPreview', () => {
   expect(VPreview).toBeTruthy();
 });
 
-describe("VPreview", () => {
-  test("defaults", () => {
+describe('VPreview', () => {
+  test('defaults', () => {
     const wrapper = mount(VPreview);
 
     expect(wrapper.props()).toEqual({
-      background: "neutral",
+      background: 'neutral',
       hideSwatches: false,
-      regionFooter: "",
-      regionHeader: "",
-      regionPreview: "",
-      regionSource: "",
-      regionViewport: "",
+      regionFooter: '',
+      regionHeader: '',
+      regionPreview: '',
+      regionSource: '',
+      regionViewport: '',
       hideMobileToggle: false,
     });
   });
 
-  describe("given code radio item is selected", () => {
-    test("renders source code", async () => {
+  describe('given code radio item is selected', () => {
+    test('renders source code', async () => {
       const wrapper = mount(VPreview, {
         props: {
-          regionSource: "source",
+          regionSource: 'source',
         },
       });
 
@@ -34,40 +34,40 @@ describe("VPreview", () => {
       expect(wrapper.find("[data-test='previewer-preview']").exists()).toBe(true);
 
       const radioItemCode = wrapper.find("[data-test='radio-item-code']");
-      await radioItemCode.trigger("click");
+      await radioItemCode.trigger('click');
 
       expect(wrapper.find("[data-test='previewer-source']").exists()).toBe(true);
       expect(wrapper.find("[data-test='previewer-preview']").exists()).toBe(false);
     });
   });
 
-  describe("given the swatch button is clicked", () => {
-    test("renders swatches", async () => {
+  describe('given the swatch button is clicked', () => {
+    test('renders swatches', async () => {
       const wrapper = mount(VPreview);
 
       expect(wrapper.find("[data-test='swatches']").exists()).toBe(false);
 
       const swatchButton = wrapper.find("[data-test='swatch-button']");
-      await swatchButton.trigger("click");
+      await swatchButton.trigger('click');
 
       expect(wrapper.find("[data-test='swatches']").exists()).toBe(true);
     });
   });
 
-  describe("given the mobile toggle button is clicked", () => {
-    test("renders mobile preview", async () => {
+  describe('given the mobile toggle button is clicked', () => {
+    test('renders mobile preview', async () => {
       const wrapper = mount(VPreview);
 
       const before = wrapper.find("[data-test='previewer-preview']");
-      expect(before.classes()).not.toContain("mobile-screen");
-      expect(before.classes()).toContain("w-full");
+      expect(before.classes()).not.toContain('mobile-screen');
+      expect(before.classes()).toContain('w-full');
 
       const radioItemMobile = wrapper.find("[data-test='radio-item-mobile']");
-      await radioItemMobile.trigger("click");
+      await radioItemMobile.trigger('click');
 
       const after = wrapper.find("[data-test='previewer-preview']");
-      expect(after.classes()).toContain("mobile-screen");
-      expect(after.classes()).not.toContain("w-full");
+      expect(after.classes()).toContain('mobile-screen');
+      expect(after.classes()).not.toContain('w-full');
     });
   });
 });

package/src/components/molecules/VPreview.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { VButton, VRadioGroup, VRadioItem } from "@/index";
-import { ref } from "vue";
+import { VButton, VRadioGroup, VRadioItem } from '@/index';
+import { ref } from 'vue';
 
 const backgrounds: Record<string, string> = {
-  "bg-transparent": "bg-transparent",
-  "neutral-opaque": "bg-white/50 dark:bg-black/50",
-  neutral: "bg-surface-100-800-token",
+  'bg-transparent': 'bg-transparent',
+  'neutral-opaque': 'bg-white/50 dark:bg-black/50',
+  neutral: 'bg-surface-100-800-token',
 
-  "variant-filled-surface": "variant-filled-surface",
-  "variant-filled-primary": "variant-filled-primary",
-  "variant-filled-secondary": "variant-filled-secondary",
-  "variant-filled-tertiary": "variant-filled-tertiary",
-  "variant-filled-success": "variant-filled-success",
-  "variant-filled-warning": "variant-filled-warning",
-  "variant-filled-error": "variant-filled-error",
+  'variant-filled-surface': 'variant-filled-surface',
+  'variant-filled-primary': 'variant-filled-primary',
+  'variant-filled-secondary': 'variant-filled-secondary',
+  'variant-filled-tertiary': 'variant-filled-tertiary',
+  'variant-filled-success': 'variant-filled-success',
+  'variant-filled-warning': 'variant-filled-warning',
+  'variant-filled-error': 'variant-filled-error',
 
   // TODO: implement gradient backgrounds
   // 'primary-to-secondary': 'bg-gradient-to-br variant-gradient-primary-secondary',
@@ -41,35 +41,35 @@ const props = defineProps({
   },
   background: {
     type: String,
-    default: "neutral",
+    default: 'neutral',
   },
 
   // Props (regions)
   regionHeader: {
     type: String,
-    default: "",
+    default: '',
   },
   regionViewport: {
     type: String,
-    default: "",
+    default: '',
   },
   regionPreview: {
     type: String,
-    default: "",
+    default: '',
   },
   regionFooter: {
     type: String,
-    default: "",
+    default: '',
   },
   regionSource: {
     type: String,
-    default: "",
+    default: '',
   },
 });
 
 const chosenBackground = ref(props.background);
-const tabView = ref("preview");
-const radioSize = ref("full");
+const tabView = ref('preview');
+const radioSize = ref('full');
 const swatches = ref(false);
 
 const toggleSwatches = () => (swatches.value = !swatches.value);
@@ -193,9 +193,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
     </v-radio-group>
 
     <template v-if="tabView === 'preview'">
-      <div
-        :class="`vuetiful-previewer-viewport p-4 md:p-10 ${backgrounds[chosenBackground]} ${regionViewport}`"
-      >
+      <div :class="`vuetiful-previewer-viewport p-4 md:p-10 ${backgrounds[chosenBackground]} ${regionViewport}`">
         <!-- <div v-if="$slots.lead" class="vuetiful-previewer-lead"><slot name="lead" /></div> -->
         <div
           data-test="previewer-preview"
@@ -209,10 +207,7 @@ const toggleSwatches = () => (swatches.value = !swatches.value);
         </div>
         <!-- <div v-if="$slots.trail" class="vuetiful-previewer-trail"><slot name="trail" /></div> -->
       </div>
-      <footer
-        v-if="$slots.footer"
-        :class="`vuetiful-previewer-footer variant-soft p-4 ${regionFooter}`"
-      >
+      <footer v-if="$slots.footer" :class="`vuetiful-previewer-footer variant-soft p-4 ${regionFooter}`">
         <slot name="footer" />
       </footer>
     </template>

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

@@ -1,13 +1,13 @@
-import { VRail } from "@/index";
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
+import { VRail } from '@/index';
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
 
-test("VRail", () => {
+test('VRail', () => {
   expect(VRail).toBeTruthy();
 });
 
 // TODO: add tests
-test("VRail using slot", () => {
+test('VRail using slot', () => {
   const wrapper = mount(VRail);
 
   expect(wrapper).toBeTruthy();

package/src/components/molecules/VRail/VRail.vue

@@ -1,23 +1,23 @@
 <script setup lang="ts">
-import type { CssClasses } from "@/index";
-import { VRadioGroup, useRail } from "@/index";
-import { provide } from "vue";
+import type { CssClasses } from '@/index';
+import { VRadioGroup, useRail } from '@/index';
+import { provide } from 'vue';
 
 const { selectedRailTile } = useRail();
 
 const props = defineProps({
   active: {
     type: String as () => CssClasses,
-    default: "variant-filled",
+    default: 'variant-filled',
   },
   hover: {
     type: String as () => CssClasses,
-    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',
   },
 });
 
-provide("activeRail", props.active);
-provide("hoverRail", props.hover);
+provide('activeRail', props.active);
+provide('hoverRail', props.hover);
 </script>
 
 <template>

package/src/components/molecules/VRail/VRailTile.test.ts

@@ -1,37 +1,36 @@
-import { mount } from "@vue/test-utils";
-import { expect, test, describe } from "vitest";
-import { VRadioGroup, VRail, VRailTile, useRail } from "@/index";
+import { mount } from '@vue/test-utils';
+import { expect, test, describe } from 'vitest';
+import { VRadioGroup, VRail, VRailTile, useRail } from '@/index';
 
-
-describe("VRailTile", () => {
+describe('VRailTile', () => {
   // TODO: add tests
-  test("default slot", () => {
+  test('default slot', () => {
     const wrapper = mount({
       provide: {
         activeRail: null,
         hoverRail: null,
       },
-      template: /*html*/`
+      template: /*html*/ `
         <v-radio-group>
           <v-rail-tile>John Duck</v-rail-tile>
         </v-radio-group>
       `,
       components: {
-        "v-rail-tile": VRailTile,
-        "v-radio-group": VRadioGroup,
+        'v-rail-tile': VRailTile,
+        'v-radio-group': VRadioGroup,
       },
     });
-  
+
     expect(wrapper).toBeTruthy();
   });
 
-  test("label prop", () => {
+  test('label prop', () => {
     const wrapper = mount({
       provide: {
         activeRail: null,
         hoverRail: null,
       },
-      template: /*html*/`
+      template: /*html*/ `
         <v-radio-group>
           <v-rail-tile label="John Duck label">
             John Duck
@@ -39,44 +38,44 @@ describe("VRailTile", () => {
         </v-radio-group>
       `,
       components: {
-        "v-rail-tile": VRailTile,
-        "v-radio-group": VRadioGroup,
+        'v-rail-tile': VRailTile,
+        'v-radio-group': VRadioGroup,
       },
     });
 
     const label = wrapper.find('.vuetiful-rail-tile-label');
     expect(label.text()).toContain('John Duck label');
-  })
+  });
 
-  test("no default slot", () => {
+  test('no default slot', () => {
     const wrapper = mount({
       provide: {
         activeRail: null,
         hoverRail: null,
       },
-      template: /*html*/`
+      template: /*html*/ `
         <v-radio-group>
           <v-rail-tile label="John Duck label">
           </v-rail-tile>
         </v-radio-group>
       `,
       components: {
-        "v-rail-tile": VRailTile,
-        "v-radio-group": VRadioGroup,
+        'v-rail-tile': VRailTile,
+        'v-radio-group': VRadioGroup,
       },
     });
 
     const icon = wrapper.find('.vuetiful-rail-tile-icon');
     expect(icon.exists()).toBeFalsy();
-  })
+  });
 
-  test("selected rail tile", async () => {
+  test('selected rail tile', async () => {
     const wrapper = mount({
       provide: {
         activeRail: 'fake-active-class',
         hoverRail: null,
       },
-      template: /*html*/`
+      template: /*html*/ `
         <v-rail data-test="rail">
           <v-rail-tile data-test='rail-tile' label="John Duck label" value="John Duck">
             John Duck
@@ -84,16 +83,15 @@ describe("VRailTile", () => {
         </v-rail>
       `,
       components: {
-        "v-rail-tile": VRailTile,
-        "v-rail": VRail,
+        'v-rail-tile': VRailTile,
+        'v-rail': VRail,
       },
     });
 
     const { selectedRailTile } = useRail();
-    expect(selectedRailTile.value).toBe("");
+    expect(selectedRailTile.value).toBe('');
     const railTile = wrapper.find('.vuetiful-rail-tile');
     await railTile.trigger('click');
     expect(selectedRailTile.value).toBe('John Duck');
-  })
-})
-
+  });
+});