@code-coaching/vuetiful 0.23.0 → 0.23.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",

package/src/assets/main.css

@@ -1,15 +1,15 @@
 @font-face {
-  font-family: "myfont";
-  src: url("fonts/myfont.woff");
+  font-family: 'myfont';
+  src: url('fonts/myfont.woff');
 }
 
-[class^="icon-"],
-[class*=" icon-"] {
-  font-family: "myfont" !important;
+[class^='icon-'],
+[class*=' icon-'] {
+  font-family: 'myfont' !important;
 }
 
 .icon-heart:before {
-  content: "\e9da";
+  content: '\e9da';
 }
 
 .global-example {

package/src/components/VBootstrap.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Variant } from "@/types";
-import { PropType } from "vue";
+import { Variant } from '@/types';
+import { PropType } from 'vue';
 
 /**
  * VBoostrap is a component that should not be used directly.
@@ -14,47 +14,47 @@ defineProps({
   variant: {
     // explicit string union because TypeScript type won't throw error if invalid value is passed
     type: String as PropType<
-      | ""
-      | "variant-filled"
-      | "variant-filled-primary"
-      | "variant-filled-secondary"
-      | "variant-filled-tertiary"
-      | "variant-filled-success"
-      | "variant-filled-warning"
-      | "variant-filled-error"
-      | "variant-filled-surface"
-      | "variant-ringed"
-      | "variant-ringed-primary"
-      | "variant-ringed-secondary"
-      | "variant-ringed-tertiary"
-      | "variant-ringed-success"
-      | "variant-ringed-warning"
-      | "variant-ringed-error"
-      | "variant-ringed-surface"
-      | "variant-ghost"
-      | "variant-ghost-primary"
-      | "variant-ghost-secondary"
-      | "variant-ghost-tertiary"
-      | "variant-ghost-success"
-      | "variant-ghost-warning"
-      | "variant-ghost-error"
-      | "variant-ghost-surface"
-      | "variant-soft"
-      | "variant-soft-primary"
-      | "variant-soft-secondary"
-      | "variant-soft-tertiary"
-      | "variant-soft-success"
-      | "variant-soft-warning"
-      | "variant-soft-error"
-      | "variant-soft-surface"
-      | "variant-glass"
-      | "variant-glass-primary"
-      | "variant-glass-secondary"
-      | "variant-glass-tertiary"
-      | "variant-glass-success"
-      | "variant-glass-warning"
-      | "variant-glass-error"
-      | "variant-glass-surface"
+      | ''
+      | 'variant-filled'
+      | 'variant-filled-primary'
+      | 'variant-filled-secondary'
+      | 'variant-filled-tertiary'
+      | 'variant-filled-success'
+      | 'variant-filled-warning'
+      | 'variant-filled-error'
+      | 'variant-filled-surface'
+      | 'variant-ringed'
+      | 'variant-ringed-primary'
+      | 'variant-ringed-secondary'
+      | 'variant-ringed-tertiary'
+      | 'variant-ringed-success'
+      | 'variant-ringed-warning'
+      | 'variant-ringed-error'
+      | 'variant-ringed-surface'
+      | 'variant-ghost'
+      | 'variant-ghost-primary'
+      | 'variant-ghost-secondary'
+      | 'variant-ghost-tertiary'
+      | 'variant-ghost-success'
+      | 'variant-ghost-warning'
+      | 'variant-ghost-error'
+      | 'variant-ghost-surface'
+      | 'variant-soft'
+      | 'variant-soft-primary'
+      | 'variant-soft-secondary'
+      | 'variant-soft-tertiary'
+      | 'variant-soft-success'
+      | 'variant-soft-warning'
+      | 'variant-soft-error'
+      | 'variant-soft-surface'
+      | 'variant-glass'
+      | 'variant-glass-primary'
+      | 'variant-glass-secondary'
+      | 'variant-glass-tertiary'
+      | 'variant-glass-success'
+      | 'variant-glass-warning'
+      | 'variant-glass-error'
+      | 'variant-glass-surface'
     >,
     default: Variant.Filled,
   },

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

@@ -1,175 +1,175 @@
-import { mount } from "@vue/test-utils";
-import { describe, expect, test } from "vitest";
-import { VAvatar } from ".";
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import { VAvatar } from '.';
 
-describe("VAvatar", () => {
-  test("defaults", () => {
+describe('VAvatar', () => {
+  test('defaults', () => {
     const wrapper = mount(VAvatar);
 
-    expect(wrapper.classes()).toContain("vuetiful-avatar");
-    expect(wrapper.classes()).toContain("w-16");
-    expect(wrapper.classes()).toContain("rounded-token");
+    expect(wrapper.classes()).toContain('vuetiful-avatar');
+    expect(wrapper.classes()).toContain('w-16');
+    expect(wrapper.classes()).toContain('rounded-token');
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
     expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe("");
-    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-white", "dark:fill-black"]);
+    expect(avatarText.text()).toBe('');
+    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-white', 'dark:fill-black']);
   });
 
-  test("custom variant", () => {
+  test('custom variant', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        variant: "ghost",
+        variant: 'ghost',
       },
     });
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
-    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-black", "dark:fill-white"]);
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
+    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-black', 'dark:fill-white']);
   });
 
-  test("variant with hyphen", () => {
+  test('variant with hyphen', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        variant: "filled-primary",
+        variant: 'filled-primary',
       },
     });
 
-    expect(wrapper.classes()).toContain("variant-filled-primary");
-  })
+    expect(wrapper.classes()).toContain('variant-filled-primary');
+  });
 
-  test("initials", () => {
+  test('initials', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        initials: "JD",
-        variant: "filled",
+        initials: 'JD',
+        variant: 'filled',
       },
     });
 
-    expect(wrapper.classes()).toContain("vuetiful-avatar");
-    expect(wrapper.classes()).toContain("w-16");
-    expect(wrapper.classes()).toContain("rounded-token");
+    expect(wrapper.classes()).toContain('vuetiful-avatar');
+    expect(wrapper.classes()).toContain('w-16');
+    expect(wrapper.classes()).toContain('rounded-token');
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
     expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe("JD");
-    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-white", "dark:fill-black"]);
+    expect(avatarText.text()).toBe('JD');
+    expect(avatarText.classes()).toEqual(['vuetiful-avatar-text', 'fill-white', 'dark:fill-black']);
 
-    const avatarImage = wrapper.find(".vuetiful-avatar-image");
+    const avatarImage = wrapper.find('.vuetiful-avatar-image');
     expect(avatarImage.exists()).toBe(false);
   });
 
-  test("initials fill", () => {
+  test('initials fill', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        initials: "JD",
-        fill: "custom-fill-class",
+        initials: 'JD',
+        fill: 'custom-fill-class',
       },
     });
 
-    expect(wrapper.classes()).toContain("vuetiful-avatar");
-    expect(wrapper.classes()).toContain("w-16");
-    expect(wrapper.classes()).toContain("rounded-token");
+    expect(wrapper.classes()).toContain('vuetiful-avatar');
+    expect(wrapper.classes()).toContain('w-16');
+    expect(wrapper.classes()).toContain('rounded-token');
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
     expect(avatarText.exists()).toBe(true);
-    expect(avatarText.text()).toBe("JD");
-    expect(avatarText.classes()).toContain("custom-fill-class");
+    expect(avatarText.text()).toBe('JD');
+    expect(avatarText.classes()).toContain('custom-fill-class');
   });
 
-  test("image", () => {
+  test('image', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        src: "https://via.placeholder.com/150",
+        src: 'https://via.placeholder.com/150',
       },
     });
 
-    expect(wrapper.classes()).toContain("vuetiful-avatar");
-    expect(wrapper.classes()).toContain("w-16");
-    expect(wrapper.classes()).toContain("rounded-token");
+    expect(wrapper.classes()).toContain('vuetiful-avatar');
+    expect(wrapper.classes()).toContain('w-16');
+    expect(wrapper.classes()).toContain('rounded-token');
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
     expect(avatarText.exists()).toBe(false);
 
-    const avatarImage = wrapper.find(".vuetiful-avatar-image");
+    const avatarImage = wrapper.find('.vuetiful-avatar-image');
     expect(avatarImage.exists()).toBe(true);
-    expect(avatarImage.attributes("src")).toBe("https://via.placeholder.com/150");
+    expect(avatarImage.attributes('src')).toBe('https://via.placeholder.com/150');
   });
 
-  test("image fallback", async () => {
+  test('image fallback', async () => {
     const wrapper = mount(VAvatar, {
       props: {
-        src: "https://via.placeholder.com/150",
-        fallback: "/image/john-duck.png",
+        src: 'https://via.placeholder.com/150',
+        fallback: '/image/john-duck.png',
       },
     });
 
-    expect(wrapper.classes()).toContain("vuetiful-avatar");
-    expect(wrapper.classes()).toContain("w-16");
-    expect(wrapper.classes()).toContain("rounded-token");
+    expect(wrapper.classes()).toContain('vuetiful-avatar');
+    expect(wrapper.classes()).toContain('w-16');
+    expect(wrapper.classes()).toContain('rounded-token');
 
-    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    const avatarText = wrapper.find('.vuetiful-avatar-text');
     expect(avatarText.exists()).toBe(false);
 
-    const avatarImage = wrapper.find(".vuetiful-avatar-image");
-    avatarImage.trigger("error");
+    const avatarImage = wrapper.find('.vuetiful-avatar-image');
+    avatarImage.trigger('error');
     await wrapper.vm.$nextTick();
 
     expect(avatarImage.exists()).toBe(true);
-    expect(avatarImage.attributes("src")).toBe("/image/john-duck.png");
+    expect(avatarImage.attributes('src')).toBe('/image/john-duck.png');
   });
 
-  test("size xs", () => {
+  test('size xs', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        size: "xs",
+        size: 'xs',
       },
     });
 
     const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes("class")).toContain("w-8");
+    expect(avatar.attributes('class')).toContain('w-8');
   });
 
-  test("size sm", () => {
+  test('size sm', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        size: "sm",
+        size: 'sm',
       },
     });
 
     const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes("class")).toContain("w-12");
+    expect(avatar.attributes('class')).toContain('w-12');
   });
 
-  test("size md", () => {
+  test('size md', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        size: "md",
+        size: 'md',
       },
     });
 
     const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes("class")).toContain("w-16");
+    expect(avatar.attributes('class')).toContain('w-16');
   });
 
-  test("size lg", () => {
+  test('size lg', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        size: "lg",
+        size: 'lg',
       },
     });
 
     const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes("class")).toContain("w-20");
+    expect(avatar.attributes('class')).toContain('w-20');
   });
 
-  test("size xl", () => {
+  test('size xl', () => {
     const wrapper = mount(VAvatar, {
       props: {
-        size: "xl",
+        size: 'xl',
       },
     });
 
     const avatar = wrapper.find("[data-test='avatar']");
-    expect(avatar.attributes("class")).toContain("w-24");
+    expect(avatar.attributes('class')).toContain('w-24');
   });
 });

package/src/components/atoms/VAvatar.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { CssClasses, useSettings } from "@/index";
-import { sizeProp, unstyledProp, variantProp } from "@/props";
-import { Size } from "@/types";
-import { computed, ref } from "vue";
+import { CssClasses, useSettings } from '@/index';
+import { sizeProp, unstyledProp, variantProp } from '@/props';
+import { Size } from '@/types';
+import { computed, ref } from 'vue';
 
 const props = defineProps({
   // Initials
-  initials: { type: String, default: "" },
-  fill: { type: String as () => CssClasses, default: "" },
-  classInitials: { type: String, default: "" },
+  initials: { type: String, default: '' },
+  fill: { type: String as () => CssClasses, default: '' },
+  classInitials: { type: String, default: '' },
 
   // Image
-  src: { type: String, default: "" },
-  alt: { type: String, default: "" },
-  fallback: { type: String, default: "" },
-  classImage: { type: String, default: "" },
+  src: { type: String, default: '' },
+  alt: { type: String, default: '' },
+  fallback: { type: String, default: '' },
+  classImage: { type: String, default: '' },
 
   size: sizeProp,
   variant: variantProp,
@@ -26,32 +26,31 @@ const fillInitials = computed(() => {
   if (props.fill) return props.fill;
 
   const variantString = props.variant as string | undefined;
-  const type = variantString?.split("-")[1];
-  if (variantString?.includes("filled")) {
-    if (!type) return "fill-white dark:fill-black";
-    return "fill-white";
+  const type = variantString?.split('-')[1];
+  if (variantString?.includes('filled')) {
+    if (!type) return 'fill-white dark:fill-black';
+    return 'fill-white';
   }
-  return "fill-black dark:fill-white";
+  return 'fill-black dark:fill-white';
 });
 
 const avatarSize = computed(() => {
   switch (props.size) {
     case Size.XS:
-      return "w-8";
+      return 'w-8';
     case Size.SM:
-      return "w-12";
+      return 'w-12';
     case Size.MD:
-      return "w-16";
+      return 'w-16';
     case Size.LG:
-      return "w-20";
+      return 'w-20';
     case Size.XL:
-      return "w-24";
+      return 'w-24';
   }
 });
 
 const { settings } = useSettings();
-const isUnstyled =
-  settings.global.unstyled || settings.components.avatar.unstyled || props.unstyled;
+const isUnstyled = settings.global.unstyled || settings.components.avatar.unstyled || props.unstyled;
 </script>
 <template>
   <figure

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

@@ -1,28 +1,28 @@
-import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
-import { VBadge } from ".";
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { VBadge } from '.';
 
-test("VBadge", () => {
+test('VBadge', () => {
   expect(VBadge).toBeTruthy();
 });
 
-test("VBadge using slot", () => {
+test('VBadge using slot', () => {
   const wrapper = mount(VBadge, {
     slots: {
-      default: "John Duck",
+      default: 'John Duck',
     },
   });
 
-  expect(wrapper.text()).toContain("John Duck");
-  expect(wrapper.classes()).toContain("badge");
+  expect(wrapper.text()).toContain('John Duck');
+  expect(wrapper.classes()).toContain('badge');
 });
 
-test("VBadge unstyled", () => {
+test('VBadge unstyled', () => {
   const wrapper = mount(VBadge, {
     props: {
       unstyled: true,
     },
   });
 
-  expect(wrapper.classes()).not.toContain("badge");
-})
+  expect(wrapper.classes()).not.toContain('badge');
+});

package/src/components/atoms/VBadge.vue

@@ -1,6 +1,6 @@
 <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({
   variant: variantProp,