@code-coaching/vuetiful 0.23.1 → 0.24.0

package/src/components/molecules/VCard/VCard.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { useSettings } from "@/index";
-import { unstyledProp } from "@/props";
-import { provide } from "vue";
+import { useSettings } from '@/index';
+import { unstyledProp } from '@/props';
+import { provide } from 'vue';
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits(['click']);
 
 const props = defineProps({
   hideSeparator: {
@@ -12,11 +12,11 @@ const props = defineProps({
   },
   background: {
     type: String,
-    default: "bg-surface-200-700-token",
+    default: 'bg-surface-200-700-token',
   },
   text: {
     type: String,
-    default: "text-surface-900-50-token",
+    default: 'text-surface-900-50-token',
   },
   clickable: {
     type: Boolean,
@@ -26,21 +26,21 @@ const props = defineProps({
   unstyled: unstyledProp,
 });
 
-provide("hideSeparator", props.hideSeparator);
+provide('hideSeparator', props.hideSeparator);
 
 const onClick = () => {
   if (!props.clickable) return;
-  emit("click");
+  emit('click');
 };
 const onKeydown = (event: KeyboardEvent) => {
   if (!props.clickable) return;
-  if (event.key === "Enter") {
+  if (event.key === 'Enter') {
     event.preventDefault();
-    emit("click");
+    emit('click');
   }
-  if (event.key === " ") {
+  if (event.key === ' ') {
     event.preventDefault();
-    emit("click");
+    emit('click');
   }
 };
 
@@ -55,9 +55,7 @@ const isUnstyled = settings.global.unstyled || settings.components.card.unstyled
     :tabindex="clickable ? 0 : undefined"
     :class="`vuetiful-card flex flex-col ${
       isUnstyled ? '' : 'border-token rounded-container-token ring-outline-token'
-    } ${background} ${text} ${
-      clickable ? `${isUnstyled ? '' : 'card-hover'} hover:cursor-pointer` : ''
-    }`"
+    } ${background} ${text} ${clickable ? `${isUnstyled ? '' : 'card-hover'} hover:cursor-pointer` : ''}`"
   >
     <slot />
   </div>

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

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VCard, VCardBody } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VCard, VCardBody } from '..';
 
-describe("VCardBody", () => {
-  test("unstyled", () => {
+describe('VCardBody', () => {
+  test('unstyled', () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -11,17 +11,17 @@ describe("VCardBody", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-body": VCardBody,
+        'v-card': VCard,
+        'v-card-body': VCardBody,
       },
     });
 
     const content = wrapper.find("[data-test='vuetiful-card-body-content']");
-    expect(content.text()).toEqual("John Duck");
-    expect(content.classes()).not.toContain("p-4");
+    expect(content.text()).toEqual('John Duck');
+    expect(content.classes()).not.toContain('p-4');
   });
 
-  test("defaults", async () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -29,11 +29,11 @@ describe("VCardBody", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-body": VCardBody,
+        'v-card': VCard,
+        'v-card-body': VCardBody,
       },
     });
 
-    expect(wrapper.text()).toEqual("John Duck");
+    expect(wrapper.text()).toEqual('John Duck');
   });
-});
+});

package/src/components/molecules/VCard/VCardBody.vue

@@ -1,20 +1,16 @@
 <script setup lang="ts">
-import { unstyledProp } from "@/props";
-import { useSettings } from "@/services";
+import { unstyledProp } from '@/props';
+import { useSettings } from '@/services';
 
 const props = defineProps({
   unstyled: unstyledProp,
 });
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
 </script>
 <template>
-  <div
-    data-test="vuetiful-card-body-content"
-    :class="`vuetiful-card-body ${isUnstyled ? '' : 'p-4'}`"
-  >
+  <div data-test="vuetiful-card-body-content" :class="`vuetiful-card-body ${isUnstyled ? '' : 'p-4'}`">
     <slot />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VCard, VCardFooter } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VCard, VCardFooter } from '..';
 
-describe("VCardFooter", () => {
-  test("unstyled", () => {
+describe('VCardFooter', () => {
+  test('unstyled', () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -11,17 +11,17 @@ describe("VCardFooter", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-footer": VCardFooter,
+        'v-card': VCard,
+        'v-card-footer': VCardFooter,
       },
     });
 
     const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
-    expect(content.text()).toEqual("John Duck");
-    expect(content.classes()).not.toContain("p-4");
+    expect(content.text()).toEqual('John Duck');
+    expect(content.classes()).not.toContain('p-4');
   });
 
-  test("defaults", async () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -29,19 +29,19 @@ describe("VCardFooter", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-footer": VCardFooter,
+        'v-card': VCard,
+        'v-card-footer': VCardFooter,
       },
     });
 
     const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
     const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
-    expect(separator.element.tagName).toEqual("HR");
-    expect(content.text()).toEqual("John Duck");
+    expect(separator.element.tagName).toEqual('HR');
+    expect(content.text()).toEqual('John Duck');
   });
 
-  describe("given hideSeparator is true", () => {
-    test("should not show separator", async () => {
+  describe('given hideSeparator is true', () => {
+    test('should not show separator', async () => {
       const wrapper = mount({
         template: /*html*/ `
           <v-card hide-separator>
@@ -49,15 +49,15 @@ describe("VCardFooter", () => {
           </v-card>
         `,
         components: {
-          "v-card": VCard,
-          "v-card-footer": VCardFooter,
+          'v-card': VCard,
+          'v-card-footer': VCardFooter,
         },
       });
-  
+
       const separator = wrapper.find("[data-test='vuetiful-card-footer-separator']");
       const content = wrapper.find("[data-test='vuetiful-card-footer-content']");
       expect(separator.exists()).toEqual(false);
-      expect(content.text()).toEqual("John Duck"); 
-    })
-  })
+      expect(content.text()).toEqual('John Duck');
+    });
+  });
 });

package/src/components/molecules/VCard/VCardFooter.vue

@@ -1,29 +1,31 @@
 <script setup lang="ts">
-import { inject, useAttrs } from "vue";
-import { unstyledProp } from "@/props";
-import { useSettings } from "@/services";
+import { inject, useAttrs } from 'vue';
+import { unstyledProp } from '@/props';
+import { useSettings } from '@/services';
 
 const props = defineProps({
   classSeparator: {
     type: String as () => string,
-    default: "opacity-90",
+    default: 'opacity-90',
   },
   unstyled: unstyledProp,
 });
 
-const hideSeparator = inject("hideSeparator", false);
+const hideSeparator = inject('hideSeparator', false);
 
 const attrs = useAttrs();
 const classAttribute = attrs.class as string;
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.cardBody.unstyled || props.unstyled;
 </script>
 
 <template>
   <hr v-if="!hideSeparator" data-test="vuetiful-card-footer-separator" class="divider" :class="classSeparator" />
-  <div data-test="vuetiful-card-footer-content" :class="`vuetiful-card-footer ${isUnstyled ? '' : 'p-4'} ${classAttribute}`">
+  <div
+    data-test="vuetiful-card-footer-content"
+    :class="`vuetiful-card-footer ${isUnstyled ? '' : 'p-4'} ${classAttribute}`"
+  >
     <slot />
   </div>
 </template>

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

@@ -1,9 +1,9 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VCard, VCardHeader } from "..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VCard, VCardHeader } from '..';
 
-describe("VCardHeader", () => {
-  test("unstyled", () => {
+describe('VCardHeader', () => {
+  test('unstyled', () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -11,17 +11,17 @@ describe("VCardHeader", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-header": VCardHeader,
+        'v-card': VCard,
+        'v-card-header': VCardHeader,
       },
     });
 
     const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-    expect(content.text()).toEqual("John Duck");
-    expect(content.classes()).not.toContain("p-4");
+    expect(content.text()).toEqual('John Duck');
+    expect(content.classes()).not.toContain('p-4');
   });
 
-  test("defaults", async () => {
+  test('defaults', async () => {
     const wrapper = mount({
       template: /*html*/ `
         <v-card>
@@ -29,20 +29,20 @@ describe("VCardHeader", () => {
         </v-card>
       `,
       components: {
-        "v-card": VCard,
-        "v-card-header": VCardHeader,
+        'v-card': VCard,
+        'v-card-header': VCardHeader,
       },
     });
 
     const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
     const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-    expect(separator.element.tagName).toEqual("HR");
-    expect(content.text()).toEqual("John Duck");
-    expect(content.classes()).toContain("p-4");
+    expect(separator.element.tagName).toEqual('HR');
+    expect(content.text()).toEqual('John Duck');
+    expect(content.classes()).toContain('p-4');
   });
 
-  describe("given hideSeparator is true", () => {
-    test("should not show separator", async () => {
+  describe('given hideSeparator is true', () => {
+    test('should not show separator', async () => {
       const wrapper = mount({
         template: /*html*/ `
           <v-card hide-separator>
@@ -50,20 +50,20 @@ describe("VCardHeader", () => {
           </v-card>
         `,
         components: {
-          "v-card": VCard,
-          "v-card-header": VCardHeader,
+          'v-card': VCard,
+          'v-card-header': VCardHeader,
         },
       });
 
       const separator = wrapper.find("[data-test='vuetiful-card-header-separator']");
       const content = wrapper.find("[data-test='vuetiful-card-header-content']");
       expect(separator.exists()).toEqual(false);
-      expect(content.text()).toEqual("John Duck");
+      expect(content.text()).toEqual('John Duck');
     });
   });
 
-  describe("given an image is present", () => {
-    test("should not have padding", async () => {
+  describe('given an image is present', () => {
+    test('should not have padding', async () => {
       const wrapper = mount({
         template: /*html*/ `
         <v-card>
@@ -73,14 +73,14 @@ describe("VCardHeader", () => {
         </v-card>
       `,
         components: {
-          "v-card": VCard,
-          "v-card-header": VCardHeader,
+          'v-card': VCard,
+          'v-card-header': VCardHeader,
         },
       });
       await wrapper.vm.$nextTick();
 
       const content = wrapper.find("[data-test='vuetiful-card-header-content']");
-      expect(content.classes()).not.toContain("p-4");
+      expect(content.classes()).not.toContain('p-4');
     });
   });
 });

package/src/components/molecules/VCard/VCardHeader.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { unstyledProp } from "@/props";
-import { useSettings } from "@/services";
-import { Ref, computed, inject, ref, useAttrs } from "vue";
+import { unstyledProp } from '@/props';
+import { useSettings } from '@/services';
+import { Ref, computed, inject, ref, useAttrs } from 'vue';
 
 const props = defineProps({
   classSeparator: {
     type: String as () => string,
-    default: "opacity-90",
+    default: 'opacity-90',
   },
   unstyled: unstyledProp,
 });
@@ -17,17 +17,16 @@ const hasImageAsChild = computed(() => {
   const children = headerRef.value?.children;
   if (!children) return false;
   const childrenArray = Array.from(children);
-  return childrenArray.some((child) => child.tagName === "IMG");
+  return childrenArray.some((child) => child.tagName === 'IMG');
 });
 
-const hideSeparator = inject("hideSeparator", false);
+const hideSeparator = inject('hideSeparator', false);
 
 const attrs = useAttrs();
 const classAttribute = attrs.class as string;
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.cardHeader.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.cardHeader.unstyled || props.unstyled;
 </script>
 
 <template>

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

@@ -1,21 +1,21 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test, vi } from "vitest";
-import { VCodeBlock } from "../..";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test, vi } from 'vitest';
+import { VCodeBlock } from '../..';
 
 const clipboardMock = {
   writeText: vi.fn(),
 };
 
-Object.defineProperty(window.navigator, "clipboard", {
+Object.defineProperty(window.navigator, 'clipboard', {
   value: clipboardMock,
   writable: true,
 });
 
-describe("VCodeBlock", () => {
-  test("copy button copies code to clipboard", async () => {
+describe('VCodeBlock', () => {
+  test('copy button copies code to clipboard', async () => {
     const mockClipboardDirective = {
       mounted(el: HTMLElement, binding: any) {
-        el.addEventListener("click", () => {
+        el.addEventListener('click', () => {
           el.dataset.copied = binding.value;
         });
       },
@@ -23,7 +23,7 @@ describe("VCodeBlock", () => {
 
     const wrapper = mount(VCodeBlock, {
       props: {
-        code: "John Duck",
+        code: 'John Duck',
       },
       global: {
         directives: {
@@ -32,32 +32,32 @@ describe("VCodeBlock", () => {
       },
     });
 
-    await wrapper.find(".vuetiful-code-block-button").trigger("click");
+    await wrapper.find('.vuetiful-code-block-button').trigger('click');
 
-    expect(clipboardMock.writeText).toHaveBeenCalledWith("John Duck");
+    expect(clipboardMock.writeText).toHaveBeenCalledWith('John Duck');
 
     await new Promise((resolve) => setTimeout(resolve, 2000));
 
-    expect(wrapper.emitted("copy")).toBeTruthy();
+    expect(wrapper.emitted('copy')).toBeTruthy();
   });
 
-  test("renders the component with default props", () => {
+  test('renders the component with default props', () => {
     const wrapper = mount(VCodeBlock);
     expect(wrapper.exists()).toBe(true);
-    expect(wrapper.text()).toContain("Copy");
-    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("plaintext");
-    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-plaintext");
+    expect(wrapper.text()).toContain('Copy');
+    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('plaintext');
+    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-plaintext');
   });
 
-  test("renders the component with custom props", () => {
+  test('renders the component with custom props', () => {
     const customProps = {
-      language: "javascript",
-      code: "const x = 10;",
-      buttonText: "Copy Code",
-      buttonCopiedText: "Copied!",
-      classButton: "custom-button-class",
-      classLanguage: "custom-language-class",
-      classCode: "custom-code-class",
+      language: 'javascript',
+      code: 'const x = 10;',
+      buttonText: 'Copy Code',
+      buttonCopiedText: 'Copied!',
+      classButton: 'custom-button-class',
+      classLanguage: 'custom-language-class',
+      classCode: 'custom-code-class',
       preventOverflow: true,
     };
 
@@ -65,69 +65,69 @@ describe("VCodeBlock", () => {
       props: customProps,
     });
 
-    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
-    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("javascript");
-    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-javascript");
-    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
+    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('javascript');
+    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-javascript');
+    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
   });
 
-  test("renders the component with custom props", () => {
+  test('renders the component with custom props', () => {
     const customProps = {
-      language: "js",
-      code: "const x = 10;",
-      buttonText: "Copy Code",
-      buttonCopiedText: "Copied!",
-      classButton: "custom-button-class",
-      classLanguage: "custom-language-class",
-      classCode: "custom-code-class",
+      language: 'js',
+      code: 'const x = 10;',
+      buttonText: 'Copy Code',
+      buttonCopiedText: 'Copied!',
+      classButton: 'custom-button-class',
+      classLanguage: 'custom-language-class',
+      classCode: 'custom-code-class',
       preventOverflow: true,
     };
 
     const wrapper = mount(VCodeBlock, { props: customProps });
 
-    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
-    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("javascript");
-    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-js");
-    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
+    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('javascript');
+    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-js');
+    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
   });
 
-  test("renders the component with custom props", () => {
+  test('renders the component with custom props', () => {
     const customProps = {
-      language: "ts",
-      code: "const x = 10;",
-      buttonText: "Copy Code",
-      buttonCopiedText: "Copied!",
-      classButton: "custom-button-class",
-      classLanguage: "custom-language-class",
-      classCode: "custom-code-class",
+      language: 'ts',
+      code: 'const x = 10;',
+      buttonText: 'Copy Code',
+      buttonCopiedText: 'Copied!',
+      classButton: 'custom-button-class',
+      classLanguage: 'custom-language-class',
+      classCode: 'custom-code-class',
       preventOverflow: true,
     };
 
     const wrapper = mount(VCodeBlock, { props: customProps });
 
-    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
-    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("typescript");
-    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-ts");
-    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
+    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('typescript');
+    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-ts');
+    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
   });
 
-  test("renders the component with custom props", () => {
+  test('renders the component with custom props', () => {
     const customProps = {
-      language: "sh",
-      code: "const x = 10;",
-      buttonText: "Copy Code",
-      buttonCopiedText: "Copied!",
-      classButton: "custom-button-class",
-      classLanguage: "custom-language-class",
-      classCode: "custom-code-class",
+      language: 'sh',
+      code: 'const x = 10;',
+      buttonText: 'Copy Code',
+      buttonCopiedText: 'Copied!',
+      classButton: 'custom-button-class',
+      classLanguage: 'custom-language-class',
+      classCode: 'custom-code-class',
       preventOverflow: true,
     };
 
     const wrapper = mount(VCodeBlock, { props: customProps });
 
-    expect(wrapper.find(".vuetiful-code-block-button").text()).toContain("Copy Code");
-    expect(wrapper.find(".vuetiful-code-block-language").text()).toBe("console");
-    expect(wrapper.find(".vuetiful-code-block-code").classes()).toContain("language-sh");
-    expect(wrapper.find(".vuetiful-code-block-pre").classes()).toContain("whitespace-pre-wrap");
+    expect(wrapper.find('.vuetiful-code-block-button').text()).toContain('Copy Code');
+    expect(wrapper.find('.vuetiful-code-block-language').text()).toBe('console');
+    expect(wrapper.find('.vuetiful-code-block-code').classes()).toContain('language-sh');
+    expect(wrapper.find('.vuetiful-code-block-pre').classes()).toContain('whitespace-pre-wrap');
   });
 });