@code-coaching/vuetiful 0.22.0 → 0.23.0

package/package.json

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

package/src/components/VBootstrap.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Variant } from "@/types";
+import { PropType } from "vue";
+
+/**
+ * VBoostrap is a component that should not be used directly.
+ * It is used to make sure that the variant-classes are bundled with the application.
+ * This allows us to use `variant-${variant}` in the template.
+ *
+ * In the future it might be a good idea to just add .filled, .ringed, etc. as alternatives for .variant-filled, .variant-ringed, etc. and remove this component.
+ */
+
+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"
+    >,
+    default: Variant.Filled,
+  },
+});
+</script>

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

@@ -2,48 +2,63 @@ import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
 import { VAvatar } from ".";
 
-test("VAvatar", () => {
-  expect(VAvatar).toBeTruthy();
-});
-
-describe("VAvatar props", () => {
-  test("VAvatar defaults", () => {
+describe("VAvatar", () => {
+  test("defaults", () => {
     const wrapper = mount(VAvatar);
 
-    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("vuetiful-avatar");
     expect(wrapper.classes()).toContain("w-16");
     expect(wrapper.classes()).toContain("rounded-token");
 
-    const avatarText = wrapper.find(".avatar-text");
+    const avatarText = wrapper.find(".vuetiful-avatar-text");
     expect(avatarText.exists()).toBe(true);
     expect(avatarText.text()).toBe("");
-    expect(avatarText.classes()).toContain("dark:fill-on-surface-token");
-    expect(avatarText.classes()).toContain("fill-base-token");
+    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-white", "dark:fill-black"]);
   });
 
-  test("VAvatar initials", () => {
+  test("custom variant", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        variant: "ghost",
+      },
+    });
+
+    const avatarText = wrapper.find(".vuetiful-avatar-text");
+    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-black", "dark:fill-white"]);
+  });
+
+  test("variant with hyphen", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        variant: "filled-primary",
+      },
+    });
+
+    expect(wrapper.classes()).toContain("variant-filled-primary");
+  })
+
+  test("initials", () => {
     const wrapper = mount(VAvatar, {
       props: {
         initials: "JD",
-        class: "variant-filled",
+        variant: "filled",
       },
     });
 
-    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("vuetiful-avatar");
     expect(wrapper.classes()).toContain("w-16");
     expect(wrapper.classes()).toContain("rounded-token");
 
-    const avatarText = wrapper.find(".avatar-text");
+    const avatarText = wrapper.find(".vuetiful-avatar-text");
     expect(avatarText.exists()).toBe(true);
     expect(avatarText.text()).toBe("JD");
-    expect(avatarText.classes()).toContain("dark:fill-base-token");
-    expect(avatarText.classes()).toContain("fill-on-surface-token");
+    expect(avatarText.classes()).toEqual(["vuetiful-avatar-text", "fill-white", "dark:fill-black"]);
 
-    const avatarImage = wrapper.find(".avatar-image");
+    const avatarImage = wrapper.find(".vuetiful-avatar-image");
     expect(avatarImage.exists()).toBe(false);
   });
 
-  test("VAvatar initials fill", () => {
+  test("initials fill", () => {
     const wrapper = mount(VAvatar, {
       props: {
         initials: "JD",
@@ -51,36 +66,36 @@ describe("VAvatar props", () => {
       },
     });
 
-    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("vuetiful-avatar");
     expect(wrapper.classes()).toContain("w-16");
     expect(wrapper.classes()).toContain("rounded-token");
 
-    const avatarText = wrapper.find(".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");
   });
 
-  test("VAvatar image", () => {
+  test("image", () => {
     const wrapper = mount(VAvatar, {
       props: {
         src: "https://via.placeholder.com/150",
       },
     });
 
-    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("vuetiful-avatar");
     expect(wrapper.classes()).toContain("w-16");
     expect(wrapper.classes()).toContain("rounded-token");
 
-    const avatarText = wrapper.find(".avatar-text");
+    const avatarText = wrapper.find(".vuetiful-avatar-text");
     expect(avatarText.exists()).toBe(false);
 
-    const avatarImage = wrapper.find(".avatar-image");
+    const avatarImage = wrapper.find(".vuetiful-avatar-image");
     expect(avatarImage.exists()).toBe(true);
     expect(avatarImage.attributes("src")).toBe("https://via.placeholder.com/150");
   });
 
-  test("VAvatar image fallback", async () => {
+  test("image fallback", async () => {
     const wrapper = mount(VAvatar, {
       props: {
         src: "https://via.placeholder.com/150",
@@ -88,18 +103,73 @@ describe("VAvatar props", () => {
       },
     });
 
-    expect(wrapper.classes()).toContain("avatar");
+    expect(wrapper.classes()).toContain("vuetiful-avatar");
     expect(wrapper.classes()).toContain("w-16");
     expect(wrapper.classes()).toContain("rounded-token");
 
-    const avatarText = wrapper.find(".avatar-text");
+    const avatarText = wrapper.find(".vuetiful-avatar-text");
     expect(avatarText.exists()).toBe(false);
 
-    const avatarImage = wrapper.find(".avatar-image");
+    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");
   });
+
+  test("size xs", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        size: "xs",
+      },
+    });
+
+    const avatar = wrapper.find("[data-test='avatar']");
+    expect(avatar.attributes("class")).toContain("w-8");
+  });
+
+  test("size sm", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        size: "sm",
+      },
+    });
+
+    const avatar = wrapper.find("[data-test='avatar']");
+    expect(avatar.attributes("class")).toContain("w-12");
+  });
+
+  test("size md", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        size: "md",
+      },
+    });
+
+    const avatar = wrapper.find("[data-test='avatar']");
+    expect(avatar.attributes("class")).toContain("w-16");
+  });
+
+  test("size lg", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        size: "lg",
+      },
+    });
+
+    const avatar = wrapper.find("[data-test='avatar']");
+    expect(avatar.attributes("class")).toContain("w-20");
+  });
+
+  test("size xl", () => {
+    const wrapper = mount(VAvatar, {
+      props: {
+        size: "xl",
+      },
+    });
+
+    const avatar = wrapper.find("[data-test='avatar']");
+    expect(avatar.attributes("class")).toContain("w-24");
+  });
 });

package/src/components/atoms/VAvatar.vue

@@ -1,46 +1,79 @@
 <script setup lang="ts">
-import { CssClasses } from "@/index";
-import { computed, ref, useAttrs } 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: "" },
 
   // Image
   src: { type: String, default: "" },
   alt: { type: String, default: "" },
   fallback: { type: String, default: "" },
+  classImage: { type: String, default: "" },
 
-  width: { type: String as () => CssClasses, default: "w-16" },
-  rounded: { type: String as () => CssClasses, default: "rounded-token" },
+  size: sizeProp,
+  variant: variantProp,
+  unstyled: unstyledProp,
 });
 
 const imgSrc = ref(props.src);
 const fillInitials = computed(() => {
   if (props.fill) return props.fill;
 
-  const attrs = useAttrs();
-  const classString = attrs.class as string | undefined;
+  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";
+  }
+  return "fill-black dark:fill-white";
+});
 
-  if (classString?.includes("variant-filled")) {
-    return "fill-on-surface-token dark:fill-base-token";
+const avatarSize = computed(() => {
+  switch (props.size) {
+    case Size.XS:
+      return "w-8";
+    case Size.SM:
+      return "w-12";
+    case Size.MD:
+      return "w-16";
+    case Size.LG:
+      return "w-20";
+    case Size.XL:
+      return "w-24";
   }
-  return "dark:fill-on-surface-token fill-base-token";
 });
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.avatar.unstyled || props.unstyled;
 </script>
 <template>
   <figure
-    :class="`avatar isolate flex aspect-square items-center justify-center overflow-hidden font-semibold ${rounded} ${width}`"
+    data-test="avatar"
+    :class="`vuetiful-avatar ${
+      isUnstyled
+        ? ''
+        : 'isolate flex aspect-square items-center justify-center overflow-hidden font-semibold rounded-token'
+    } ${avatarSize} variant-${variant}`"
   >
     <img
-      class="avatar-image"
+      :class="`vuetiful-avatar-image ${classImage}`"
       v-if="src"
       :src="imgSrc"
       :alt="alt"
       @error="() => (imgSrc = fallback)"
     />
-    <svg v-else class="avatar-initials h-full w-full" viewBox="0 0 512 512">
+    <svg
+      v-else
+      :class="`vuetiful-avatar-initials ${isUnstyled ? '' : 'h-full w-full'} ${classInitials}`"
+      viewBox="0 0 512 512"
+    >
       <text
         x="50%"
         y="50%"
@@ -48,7 +81,7 @@ const fillInitials = computed(() => {
         text-anchor="middle"
         font-weight="bold"
         :font-size="150"
-        :class="`avatar-text ${fillInitials}`"
+        :class="`vuetiful-avatar-text ${fillInitials}`"
       >
         {{ String(initials).substring(0, 2).toUpperCase() }}
       </text>

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

@@ -16,3 +16,13 @@ test("VBadge using slot", () => {
   expect(wrapper.text()).toContain("John Duck");
   expect(wrapper.classes()).toContain("badge");
 });
+
+test("VBadge unstyled", () => {
+  const wrapper = mount(VBadge, {
+    props: {
+      unstyled: true,
+    },
+  });
+
+  expect(wrapper.classes()).not.toContain("badge");
+})

package/src/components/atoms/VBadge.vue

@@ -1,5 +1,17 @@
+<script setup lang="ts">
+import { unstyledProp, variantProp } from "@/props";
+import { useSettings } from "@/services";
+
+const props = defineProps({
+  variant: variantProp,
+  unstyled: unstyledProp,
+});
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.badge.unstyled || props.unstyled;
+</script>
 <template>
-  <div :class="`vuetiful-badge badge`">
+  <div :class="`vuetiful-badge ${isUnstyled ? '' : 'badge'} variant-${variant}`">
     <slot />
   </div>
 </template>

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

@@ -17,6 +17,64 @@ test("VButton using slot", () => {
 });
 
 describe("VButton props", () => {
+  describe("size", () => {
+    test("xs", () => {
+      const wrapper = mount(VButton, {
+        props: {
+          size: "xs",
+        },
+      });
+      expect(wrapper.classes()).toContain("px-2.5");
+      expect(wrapper.classes()).toContain("py-1.5");
+      expect(wrapper.classes()).toContain("text-xs");
+    });
+
+    test("sm", () => {
+      const wrapper = mount(VButton, {
+        props: {
+          size: "sm",
+        },
+      });
+      expect(wrapper.classes()).toContain("px-3");
+      expect(wrapper.classes()).toContain("py-2");
+      expect(wrapper.classes()).toContain("text-sm");
+      expect(wrapper.classes()).toContain("leading-4");
+    });
+
+    test("md", () => {
+      const wrapper = mount(VButton, {
+        props: {
+          size: "md",
+        },
+      });
+      expect(wrapper.classes()).toContain("px-4");
+      expect(wrapper.classes()).toContain("py-2");
+      expect(wrapper.classes()).toContain("text-sm");
+    });
+
+    test("lg", () => {
+      const wrapper = mount(VButton, {
+        props: {
+          size: "lg",
+        },
+      });
+      expect(wrapper.classes()).toContain("px-4");
+      expect(wrapper.classes()).toContain("py-2");
+      expect(wrapper.classes()).toContain("text-base");
+    });
+
+    test("xl", () => {
+      const wrapper = mount(VButton, {
+        props: {
+          size: "xl",
+        },
+      });
+      expect(wrapper.classes()).toContain("px-6");
+      expect(wrapper.classes()).toContain("py-3");
+      expect(wrapper.classes()).toContain("text-base"); 
+    });
+  });
+
   describe("given icon is true", () => {
     test("should have btn-icon class, not have btn class", () => {
       const wrapper = mount(VButton, {

package/src/components/atoms/VButton.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
-defineProps({
+import { sizeProp, unstyledProp, variantProp } from "@/props";
+import { useSettings } from "@/services";
+import { computed } from "vue";
+
+const props = defineProps({
   icon: {
     type: Boolean as () => boolean,
     default: false,
@@ -8,6 +12,10 @@ defineProps({
     type: String as () => string,
     default: "button",
   },
+
+  size: sizeProp,
+  variant: variantProp,
+  unstyled: unstyledProp,
 });
 const emit = defineEmits<{ (event: "click"): void }>();
 
@@ -31,6 +39,25 @@ const keyupHandler = (event: KeyboardEvent) => {
     activate();
   }
 };
+
+const btnSize = computed(() => {
+  switch (props.size) {
+    case "xs":
+      return "px-2.5 py-1.5 text-xs";
+    case "sm":
+      return "px-3 py-2 text-sm leading-4";
+    case "md":
+      return "px-4 py-2 text-sm";
+    case "lg":
+      return "px-4 py-2 text-base";
+    case "xl":
+      return "px-6 py-3 text-base";
+  }
+});
+
+const { settings } = useSettings();
+const isUnstyled =
+  settings.global.unstyled || settings.components.button.unstyled || props.unstyled;
 </script>
 
 <template>
@@ -38,7 +65,9 @@ const keyupHandler = (event: KeyboardEvent) => {
     tabindex="0"
     role="button"
     :is="tag"
-    :class="`vuetiful-button ${icon ? 'btn-icon' : 'btn'} border-token hover:cursor-pointer`"
+    :class="`vuetiful-button ${
+      isUnstyled ? '' : `${icon ? 'btn-icon' : 'btn'} border-token hover:cursor-pointer`
+    } ${btnSize} variant-${variant}`"
     @click="clickHandler"
     @keydown="keydownHandler"
     @keyup="keyupHandler"

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

@@ -1,18 +1,33 @@
 import { mount } from "@vue/test-utils";
-import { expect, test } from "vitest";
+import { describe, expect, test } from "vitest";
 import { VChip } from ".";
 
-test("VChip", () => {
-  expect(VChip).toBeTruthy();
-});
+describe("VChip", () => {
+  test("default slot", () => {
+    const wrapper = mount({
+      template: `<v-chip>John Duck</v-chip>`,
+      components: { VChip },
+    });
+
+    expect(wrapper.text()).toContain("John Duck");
+    expect(wrapper.classes()).toContain("chip");
+  });
 
-test("VChip using slot", () => {
-  const wrapper = mount(VChip, {
-    slots: {
-      default: "John Duck",
-    },
+  test("unstyled", () => {
+    const wrapper = mount({
+      template: `<v-chip unstyled>John Duck</v-chip>`,
+      components: { VChip },
+    });
+
+    expect(wrapper.classes()).not.toContain("chip");
   });
 
-  expect(wrapper.text()).toContain("John Duck");
-  expect(wrapper.classes()).toContain("chip");
+  test("variant", () => {
+    const wrapper = mount({
+      template: `<v-chip variant="primary">John Duck</v-chip>`,
+      components: { VChip },
+    });
+
+    expect(wrapper.classes()).toContain("variant-primary");
+  });
 });

package/src/components/atoms/VChip.vue

@@ -1,5 +1,17 @@
+<script setup lang="ts">
+import { unstyledProp, variantProp } from "@/props";
+import { useSettings } from "@/services";
+
+const props = defineProps({
+  unstyled: unstyledProp, 
+  variant: variantProp,
+});
+
+const { settings } = useSettings();
+const isUnstyled = settings.global.unstyled || settings.components.chip.unstyled || props.unstyled;
+</script>
 <template>
-  <div :class="`vuetiful-chip chip`">
+  <div :class="`vuetiful-chip ${isUnstyled ? '' : 'chip'} variant-${variant}`">
     <slot />
   </div>
 </template>

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

@@ -10,5 +10,5 @@ defineProps({
 </script>
 
 <template>
-  <RadioGroupDescription :as="as"><slot /></RadioGroupDescription>
+  <RadioGroupDescription :as="as" class="vuetiful-radio-group-description"><slot /></RadioGroupDescription>
 </template>

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

@@ -16,16 +16,16 @@ test("VRadioGroup default props", () => {
   const wrapper = mount(VRadioGroup);
   const radioGroupEl = wrapper.find("div");
   expect(radioGroupEl.classes()).toEqual([
-    "radio-group",
+    "vuetiful-radio-group",
     "inline-flex",
     "gap-1",
     "p-1",
-    "bg-surface-200-700-token",
-    "text-surface-900",
-    "dark:text-surface-50",
     "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']");
@@ -41,15 +41,15 @@ test("VRadioGroup custom class props", () => {
   });
   const radioGroupEl = wrapper.find("div");
   expect(radioGroupEl.classes()).toEqual([
-    "radio-group",
+    "vuetiful-radio-group",
     "inline-flex",
     "gap-1",
     "p-1",
-    "custom-background-class",
-    "custom-text-class",
     "border-token",
     "border-surface-400-500-token",
     "rounded-container-token",
+    "custom-background-class",
+    "custom-text-class",
   ]);
 });