@code-coaching/vuetiful 0.23.0 → 0.23.2

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

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VAccordion, VAccordionItem } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VAccordion, VAccordionItem } from '..';
 
-describe("VAccordionItem", () => {
-  test("defaults", async () => {
+describe('VAccordionItem', () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-accordion>
@@ -11,36 +11,36 @@ describe("VAccordionItem", () => {
           <v-accordion-item title="Is">Janine Duck</v-accordion-item>
         </v-accordion>`,
       components: {
-        "v-accordion": VAccordion,
-        "v-accordion-item": VAccordionItem,
+        'v-accordion': VAccordion,
+        'v-accordion-item': VAccordionItem,
       },
     });
 
     const accordionItems = wrapper.findAllComponents(VAccordionItem);
     accordionItems.forEach((accordionItem) => {
-      expect(accordionItem.classes()).toEqual(["vuetiful-accordion-item"]);
+      expect(accordionItem.classes()).toEqual(['vuetiful-accordion-item']);
 
-      const accordionItemButton = accordionItem.find(".vuetiful-accordion-item-button");
+      const accordionItemButton = accordionItem.find('.vuetiful-accordion-item-button');
       expect(accordionItemButton.classes()).toEqual([
-        "items-center",
-        "justify-between",
-        "p-4",
-        "py-2",
-        "rounded-container-token",
-        "hover:cursor-pointer",
-        "bg-surface-200-700-token",
-        "hover:variant-soft",
-        "vuetiful-accordion-item-button",
-        "flex",
-        "w-full",
+        'items-center',
+        'justify-between',
+        'p-4',
+        'py-2',
+        'rounded-container-token',
+        'hover:cursor-pointer',
+        'bg-surface-200-700-token',
+        'hover:variant-soft',
+        'vuetiful-accordion-item-button',
+        'flex',
+        'w-full',
       ]);
 
-      const accordionItemTitle = accordionItem.find(".vuetiful-accordion-title");
+      const accordionItemTitle = accordionItem.find('.vuetiful-accordion-title');
       expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
     });
   });
 
-  test("unstyled", async () => {
+  test('unstyled', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-accordion>
@@ -48,30 +48,30 @@ describe("VAccordionItem", () => {
           <v-accordion-item title="Is" unstyled>Janine Duck</v-accordion-item>
         </v-accordion>`,
       components: {
-        "v-accordion": VAccordion,
-        "v-accordion-item": VAccordionItem,
+        'v-accordion': VAccordion,
+        'v-accordion-item': VAccordionItem,
       },
     });
 
     const accordionItems = wrapper.findAllComponents(VAccordionItem);
     accordionItems.forEach((accordionItem) => {
-      expect(accordionItem.classes()).toEqual(["vuetiful-accordion-item"]);
+      expect(accordionItem.classes()).toEqual(['vuetiful-accordion-item']);
 
-      const accordionItemButton = accordionItem.find(".vuetiful-accordion-item-button");
+      const accordionItemButton = accordionItem.find('.vuetiful-accordion-item-button');
       expect(accordionItemButton.classes()).toEqual([
-        "bg-surface-200-700-token",
-        "hover:variant-soft",
-        "vuetiful-accordion-item-button",
-        "flex",
-        "w-full",
+        'bg-surface-200-700-token',
+        'hover:variant-soft',
+        'vuetiful-accordion-item-button',
+        'flex',
+        'w-full',
       ]);
 
-      const accordionItemTitle = accordionItem.find(".vuetiful-accordion-title");
+      const accordionItemTitle = accordionItem.find('.vuetiful-accordion-title');
       expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
     });
   });
 
-  test("open", async () => {
+  test('open', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-accordion>
@@ -79,31 +79,31 @@ describe("VAccordionItem", () => {
           <v-accordion-item title="Is">Janine Duck</v-accordion-item>
         </v-accordion>`,
       components: {
-        "v-accordion": VAccordion,
-        "v-accordion-item": VAccordionItem,
+        'v-accordion': VAccordion,
+        'v-accordion-item': VAccordionItem,
       },
     });
 
     const accordionItems = wrapper.findAllComponents(VAccordionItem);
-    const accordionItemButtonOne = accordionItems[0].find(".vuetiful-accordion-item-button");
-    const accordionItemButtonTwo = accordionItems[1].find(".vuetiful-accordion-item-button");
+    const accordionItemButtonOne = accordionItems[0].find('.vuetiful-accordion-item-button');
+    const accordionItemButtonTwo = accordionItems[1].find('.vuetiful-accordion-item-button');
 
-    await accordionItemButtonOne.trigger("click");
+    await accordionItemButtonOne.trigger('click');
 
     expect(accordionItemButtonOne.classes()).toEqual([
-      "!rounded-bl-none",
-      "!rounded-br-none",
-      "items-center",
-      "justify-between",
-      "p-4",
-      "py-2",
-      "rounded-container-token",
-      "hover:cursor-pointer",
-      "bg-surface-200-700-token",
-      "hover:variant-soft",
-      "vuetiful-accordion-item-button",
-      "flex",
-      "w-full",
+      '!rounded-bl-none',
+      '!rounded-br-none',
+      'items-center',
+      'justify-between',
+      'p-4',
+      'py-2',
+      'rounded-container-token',
+      'hover:cursor-pointer',
+      'bg-surface-200-700-token',
+      'hover:variant-soft',
+      'vuetiful-accordion-item-button',
+      'flex',
+      'w-full',
     ]);
     expect(accordionItemButtonTwo.classes()).toEqual([
       'items-center',
@@ -116,10 +116,10 @@ describe("VAccordionItem", () => {
       'hover:variant-soft',
       'vuetiful-accordion-item-button',
       'flex',
-      'w-full'
+      'w-full',
     ]);
-    
-    const accordionItemPanelOne = accordionItems[0].find(".vuetiful-accordion-item-panel");
+
+    const accordionItemPanelOne = accordionItems[0].find('.vuetiful-accordion-item-panel');
 
     expect(accordionItemPanelOne.classes()).toEqual([
       'vuetiful-accordion-item-panel',
@@ -128,7 +128,7 @@ describe("VAccordionItem", () => {
       'p-4',
       'py-2',
       'rounded-container-token',
-      'bg-surface-200-700-token'
+      'bg-surface-200-700-token',
     ]);
   });
 });

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useSettings } from "@/services";
-import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
-import { inject } from "vue";
+import { useSettings } from '@/services';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue';
+import { inject } from 'vue';
 
 const props = defineProps({
   title: {
@@ -15,34 +15,25 @@ const props = defineProps({
   },
 });
 
-const classQuestion = inject("classQuestion");
-const classAnswer = inject("classAnswer");
+const classQuestion = inject('classQuestion');
+const classAnswer = inject('classAnswer');
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.accordionItem.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.accordionItem.unstyled || props.unstyled;
 </script>
 
 <template>
   <Disclosure class="vuetiful-accordion-item" as="div" v-slot="{ open }">
     <DisclosureButton
       :class="`${isUnstyled ? '' : `${open ? '!rounded-bl-none !rounded-br-none' : ''}`}
-      ${
-        isUnstyled
-          ? ''
-          : 'items-center justify-between p-4 py-2 rounded-container-token hover:cursor-pointer'
-      }
+      ${isUnstyled ? '' : 'items-center justify-between p-4 py-2 rounded-container-token hover:cursor-pointer'}
       ${classQuestion}`"
       class="vuetiful-accordion-item-button flex w-full"
     >
       <span class="vuetiful-accordion-title">{{ title }}</span>
       <slot v-if="!open" name="open-item">
         <!-- https://fontawesome.com/icons/plus?f=classic&s=solid -->
-        <svg
-          class="vuetiful-accordion-item-icon-plus icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-        >
+        <svg class="vuetiful-accordion-item-icon-plus icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
           <path
             d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
@@ -51,11 +42,7 @@ const isUnstyled =
       </slot>
       <slot v-if="open" name="close-item">
         <!-- https://fontawesome.com/icons/minus?f=classic&s=solid -->
-        <svg
-          class="vuetiful-accordion-item-icon-minus icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-        >
+        <svg class="vuetiful-accordion-item-icon-minus icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
           <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
           <path
             d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"

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

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VAlert } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VAlert } from '..';
 
-describe("VAlert", () => {
-  test("types", () => {
+describe('VAlert', () => {
+  test('types', () => {
     const wrapper = mount({
       template: /*html*/ `
           <v-alert data-test="default"></v-alert>
@@ -13,88 +13,88 @@ describe("VAlert", () => {
           <v-alert data-test="error" type="error"></v-alert>
         `,
       components: {
-        "v-alert": VAlert,
+        'v-alert': VAlert,
       },
     });
 
-    const defaultAlert = wrapper.find("[data-test=default]");
-    expect(defaultAlert.classes()).not.toContain("variant-filled-primary");
+    const defaultAlert = wrapper.find('[data-test=default]');
+    expect(defaultAlert.classes()).not.toContain('variant-filled-primary');
 
-    const infoAlert = wrapper.find("[data-test=info]");
-    expect(infoAlert.classes()).toContain("variant-filled");
+    const infoAlert = wrapper.find('[data-test=info]');
+    expect(infoAlert.classes()).toContain('variant-filled');
 
-    const successAlert = wrapper.find("[data-test=success]");
-    expect(successAlert.classes()).toContain("variant-filled-success");
+    const successAlert = wrapper.find('[data-test=success]');
+    expect(successAlert.classes()).toContain('variant-filled-success');
 
-    const warningAlert = wrapper.find("[data-test=warning]");
-    expect(warningAlert.classes()).toContain("variant-filled-warning");
+    const warningAlert = wrapper.find('[data-test=warning]');
+    expect(warningAlert.classes()).toContain('variant-filled-warning');
   });
 
-  test("unstyled", () => {
+  test('unstyled', () => {
     const wrapper = mount(VAlert, {
       props: {
         unstyled: true,
       },
     });
 
-    expect(wrapper.classes()).toEqual(["vuetiful-alert", "flex"]);
+    expect(wrapper.classes()).toEqual(['vuetiful-alert', 'flex']);
   });
 
-  describe("given close icon is clicked", () => {
-    test("should emit close", async () => {
+  describe('given close icon is clicked', () => {
+    test('should emit close', async () => {
       const wrapper = mount(VAlert, { props: { showClose: true } });
-      await wrapper.find("[data-test=close]").trigger("click");
-      expect(wrapper.emitted()["close"][0]).toEqual([]);
+      await wrapper.find('[data-test=close]').trigger('click');
+      expect(wrapper.emitted()['close'][0]).toEqual([]);
 
-      await wrapper.find("[data-test=close]").trigger("keydown", { key: "Enter" });
-      expect(wrapper.emitted()["close"][0]).toEqual([]);
+      await wrapper.find('[data-test=close]').trigger('keydown', { key: 'Enter' });
+      expect(wrapper.emitted()['close'][0]).toEqual([]);
 
-      await wrapper.find("[data-test=close]").trigger("keydown", { key: " " });
-      expect(wrapper.emitted()["close"][0]).toEqual([]);
+      await wrapper.find('[data-test=close]').trigger('keydown', { key: ' ' });
+      expect(wrapper.emitted()['close'][0]).toEqual([]);
     });
   });
 
-  describe("given a pre slot is provided", () => {
-    test("should render the pre slot", () => {
+  describe('given a pre slot is provided', () => {
+    test('should render the pre slot', () => {
       const wrapper = mount(VAlert, {
         slots: {
-          pre: "John Duck",
+          pre: 'John Duck',
         },
       });
-      expect(wrapper.text()).toContain("John Duck");
+      expect(wrapper.text()).toContain('John Duck');
     });
   });
 
-  describe("given a actions slot is provided", () => {
-    test("should render the actions slot", () => {
+  describe('given a actions slot is provided', () => {
+    test('should render the actions slot', () => {
       const wrapper = mount(VAlert, {
         slots: {
-          actions: "John Duck",
+          actions: 'John Duck',
         },
       });
-      expect(wrapper.text()).toContain("John Duck");
+      expect(wrapper.text()).toContain('John Duck');
     });
   });
 
-  describe("given hide-icon prop is present", () => {
-    test("should not render an icon", () => {
+  describe('given hide-icon prop is present', () => {
+    test('should not render an icon', () => {
       const wrapper = mount(VAlert, {
         props: {
           hideIcon: true,
         },
       });
-      expect(wrapper.findAll(".icon").length).toBe(0);
+      expect(wrapper.findAll('.icon').length).toBe(0);
     });
   });
 
-  describe("given show-close prop is present", () => {
-    test("should render a close icon", () => {
+  describe('given show-close prop is present', () => {
+    test('should render a close icon', () => {
       const wrapper = mount(VAlert, {
         props: {
           showClose: true,
         },
       });
-      expect(wrapper.find("[data-test=close]").exists()).toBe(true);
+      expect(wrapper.find('[data-test=close]').exists()).toBe(true);
     });
   });
 });

package/src/components/molecules/VAlert.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useSettings } from "@/services";
-import { PropType, computed } from "vue";
+import { useSettings } from '@/services';
+import { PropType, computed } from 'vue';
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits(['close']);
 const props = defineProps({
   hideIcon: {
     type: Boolean,
@@ -18,21 +18,21 @@ const props = defineProps({
     default: true,
   },
   type: {
-    type: String as PropType<"info" | "success" | "warning" | "error" | "">,
-    default: "",
+    type: String as PropType<'info' | 'success' | 'warning' | 'error' | ''>,
+    default: '',
   },
 
   classPre: {
     type: String,
-    default: "",
+    default: '',
   },
   classMessage: {
     type: String,
-    default: "",
+    default: '',
   },
   classClose: {
     type: String,
-    default: "",
+    default: '',
   },
 
   unstyled: {
@@ -43,22 +43,22 @@ const props = defineProps({
 
 const typeBackground = computed(() => {
   switch (props.type) {
-    case "info":
-      return "variant-filled";
-    case "success":
-      return "variant-filled-success";
-    case "warning":
-      return "variant-filled-warning";
-    case "error":
-      return "variant-filled-error";
-    case "":
-      return "";
+    case 'info':
+      return 'variant-filled';
+    case 'success':
+      return 'variant-filled-success';
+    case 'warning':
+      return 'variant-filled-warning';
+    case 'error':
+      return 'variant-filled-error';
+    case '':
+      return '';
   }
 });
 
-const close = () => emit("close");
+const close = () => emit('close');
 const handleKeydown = (event: KeyboardEvent) => {
-  if (event.key === "Enter" || event.key === " ") {
+  if (event.key === 'Enter' || event.key === ' ') {
     close();
   }
 };
@@ -71,57 +71,35 @@ const isUnstyled = settings.global.unstyled || settings.components.alert.unstyle
   <aside
     v-if="show"
     :class="`vuetiful-alert flex ${
-      isUnstyled
-        ? ''
-        : 'w-full items-center gap-4 p-4 border-token rounded-container-token'
+      isUnstyled ? '' : 'w-full items-center gap-4 p-4 border-token rounded-container-token'
     } ${typeBackground}`"
   >
     <div v-if="!hideIcon" :class="`vuetiful-alert-pre ${classPre}`">
       <slot v-if="$slots.pre" name="pre" />
       <template v-if="!$slots.pre">
         <!-- https://fontawesome.com/icons/circle-info?f=classic&s=solid -->
-        <svg
-          v-if="type === 'info'"
-          class="icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
+        <svg v-if="type === 'info'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
             d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
           />
         </svg>
 
         <!-- https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
-        <svg
-          v-if="type === 'success'"
-          class="icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
+        <svg v-if="type === 'success'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
             d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
           />
         </svg>
 
         <!-- https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
-        <svg
-          v-if="type === 'warning'"
-          class="icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
+        <svg v-if="type === 'warning'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
             d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
           />
         </svg>
 
         <!-- https://fontawesome.com/icons/triangle-exclamation?f=classic&s=solid -->
-        <svg
-          v-if="type === 'error'"
-          class="icon"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
+        <svg v-if="type === 'error'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
           <path
             d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
           />

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

@@ -1,46 +1,46 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VCard } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VCard } from '..';
 
-describe("VCard", () => {
-  test("defaults", async () => {
+describe('VCard', () => {
+  test('defaults', async () => {
     const wrapper = mount(VCard);
     expect(wrapper.props()).toEqual({
-      background: "bg-surface-200-700-token",
+      background: 'bg-surface-200-700-token',
       clickable: false,
       hideSeparator: false,
-      text: "text-surface-900-50-token",
+      text: 'text-surface-900-50-token',
       unstyled: false,
     });
   });
 
-  describe("given the card is clicked", () => {
-    describe("given the card is not clickable", () => {
-      test("should not emit click", async () => {
+  describe('given the card is clicked', () => {
+    describe('given the card is not clickable', () => {
+      test('should not emit click', async () => {
         const wrapper = mount(VCard, { props: { clickable: false } });
         expect(wrapper.attributes()['tabindex']).toBeUndefined();
-        await wrapper.trigger("click");
-        expect(wrapper.emitted()["click"]).toBeUndefined();
+        await wrapper.trigger('click');
+        expect(wrapper.emitted()['click']).toBeUndefined();
 
-        await wrapper.trigger("keydown", { key: "Enter" });
-        expect(wrapper.emitted()["click"]).toBeUndefined();
+        await wrapper.trigger('keydown', { key: 'Enter' });
+        expect(wrapper.emitted()['click']).toBeUndefined();
 
-        await wrapper.trigger("keydown", { key: " " });
-        expect(wrapper.emitted()["click"]).toBeUndefined();
+        await wrapper.trigger('keydown', { key: ' ' });
+        expect(wrapper.emitted()['click']).toBeUndefined();
       });
     });
-    describe("given the card is clickable", () => {
-      test("should emit click", async () => {
+    describe('given the card is clickable', () => {
+      test('should emit click', async () => {
         const wrapper = mount(VCard, { props: { clickable: true } });
-        expect(wrapper.attributes()['tabindex']).toEqual("0");
-        await wrapper.trigger("click");
-        expect(wrapper.emitted()["click"].length).toEqual(1);
+        expect(wrapper.attributes()['tabindex']).toEqual('0');
+        await wrapper.trigger('click');
+        expect(wrapper.emitted()['click'].length).toEqual(1);
 
-        await wrapper.trigger("keydown", { key: "Enter" });
-        expect(wrapper.emitted()["click"].length).toEqual(2);
+        await wrapper.trigger('keydown', { key: 'Enter' });
+        expect(wrapper.emitted()['click'].length).toEqual(2);
 
-        await wrapper.trigger("keydown", { key: " " });
-        expect(wrapper.emitted()["click"].length).toEqual(3);
+        await wrapper.trigger('keydown', { key: ' ' });
+        expect(wrapper.emitted()['click'].length).toEqual(3);
       });
     });
   });