@code-coaching/vuetiful 0.13.0 → 0.13.2

package/package.json

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

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

@@ -0,0 +1,55 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VRadioGroup from "./VRadioGroup.vue";
+import VRadioDescription from "./VRadioDescription.vue";
+
+test("VRadioDescription using slot", () => {
+  const wrapper = mount({
+    template: `
+      <v-radio-group>
+        <v-radio-description>John Duck</v-radio-description>
+      </v-radio-group>
+    `,
+    components: {
+      "v-radio-description": VRadioDescription,
+      "v-radio-group": VRadioGroup,
+    },
+  });
+
+  expect(wrapper.text()).toContain("John Duck");
+});
+
+describe("VRadioDescription props", () => {
+  test("default 'as' prop", () => {
+    const wrapper = mount({
+      template: `
+        <v-radio-group>
+          <v-radio-label data-test="label">John Duck</v-radio-label>
+        </v-radio-group>
+      `,
+      components: {
+        "v-radio-label": VRadioDescription,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const label = wrapper.find("[data-test='label']");
+    expect(label.element).toBeInstanceOf(HTMLParagraphElement);
+  });
+  test("custom 'as' prop", () => {
+    const wrapper = mount({
+      template: `
+        <v-radio-group>
+          <v-radio-label as="div" data-test="label">John Duck</v-radio-label>
+        </v-radio-group>
+      `,
+      components: {
+        "v-radio-label": VRadioDescription,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const label = wrapper.find("[data-test='label']");
+    expect(label.element).toBeInstanceOf(HTMLDivElement);
+  });
+});

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

@@ -2,7 +2,10 @@
 import { RadioGroupDescription } from '@headlessui/vue';
 
 defineProps({
-  as: RadioGroupDescription.props['as'],
+  as: {
+    type: String,
+    default: 'p',
+  }
 });
 </script>
 

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

@@ -0,0 +1,81 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VRadioGroup from "./VRadioGroup.vue";
+
+test("VRadioGroup using slot", () => {
+  const wrapper = mount(VRadioGroup, {
+    slots: {
+      default: "John Duck",
+    },
+  });
+
+  expect(wrapper.text()).toContain("John Duck");
+});
+
+test("VRadioGroup default props", () => {
+  const wrapper = mount(VRadioGroup);
+  const radioGroupEl = wrapper.find("div");
+  expect(radioGroupEl.classes()).toEqual([
+    "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",
+  ]);
+
+  const radioGroup = wrapper.find("[data-test='radio-group']");
+  expect(radioGroup.element.tagName).toBe("DIV");
+});
+
+test("VRadioGroup custom class props", () => {
+  const wrapper = mount(VRadioGroup, {
+    props: {
+      background: "custom-background-class",
+      text: "custom-text-class",
+    },
+  });
+  const radioGroupEl = wrapper.find("div");
+  expect(radioGroupEl.classes()).toEqual([
+    "radio-group",
+    "inline-flex",
+    "gap-1",
+    "p-1",
+    "custom-background-class",
+    "custom-text-class",
+    "border-token",
+    "border-surface-400-500-token",
+    "rounded-container-token",
+  ]);
+});
+
+test("VRadioGroup custom 'as' prop", () => {
+  const wrapper = mount(VRadioGroup, {
+    props: {
+      as: "span",
+    },
+  });
+
+  const radioGroup = wrapper.find("[data-test='radio-group']");
+  expect(radioGroup.element.tagName).toBe("SPAN");
+});
+
+describe("VRadioGroup v-model", () => {
+  describe("given value changes", () => {
+    test("should emit update:modelValue", async () => {
+      const wrapper = mount(VRadioGroup, {
+        props: {
+          modelValue: "John Duck",
+        },
+      });
+
+      wrapper.setProps({ modelValue: "Jane Duck" });
+      await wrapper.vm.$nextTick();
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual(["Jane Duck"]);
+    })
+  })
+})

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

@@ -1,30 +1,40 @@
 <script setup lang="ts">
-import { RadioGroup } from '@headlessui/vue';
-import { provide, ref, watch } from 'vue';
+import { RadioGroup } from "@headlessui/vue";
+import { provide, ref, watch } from "vue";
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
-  as: RadioGroup.props['as'],
-  disabled: RadioGroup.props['disabled'],
-  by: RadioGroup.props['by'],
-  modelValue: RadioGroup.props['modelValue'],
+  as: {
+    type: String,
+    default: "div",
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  by: {
+    type: [String, Function],
+  },
+
+  modelValue: RadioGroup.props["modelValue"],
 
   active: {
     type: String,
-    default: 'variant-filled',
+    default: "variant-filled",
   },
   hover: {
     type: String,
-    default: 'hover:variant-ghost',
+    default: "hover:variant-ghost",
   },
 
   background: {
     type: String,
-    default: 'bg-surface-200-700-token',
+    default: "bg-surface-200-700-token",
   },
   text: {
     type: String,
-    default: 'text-surface-900 dark:text-surface-50',
+    default: "text-surface-900 dark:text-surface-50",
   },
 });
 
@@ -38,22 +48,23 @@ watch(
 watch(
   () => parentModelValue.value,
   (newValue) => {
-    console.log('test: ', newValue)
-    emit('update:modelValue', newValue);
+    emit("update:modelValue", newValue);
   }
 );
 
-provide('active', props.active);
-provide('hover', props.hover);
+provide("active", props.active);
+provide("hover", props.hover);
 </script>
-
+l
 <template>
+  <!-- There is some odd behavior with test coverge, v-model must be the last property in this component -->
   <radio-group
-    v-model="parentModelValue"
+    data-test="radio-group"
     :as="as"
     :disabled="disabled"
     :by="by"
     :class="`radio-group inline-flex gap-1 p-1 ${background} ${text} border-token border-surface-400-500-token rounded-container-token`"
+    v-model="parentModelValue"
   >
     <slot></slot>
   </radio-group>

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

@@ -0,0 +1,183 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { ref } from "vue";
+import VRadioGroup from "./VRadioGroup.vue";
+import VRadioItem from "./VRadioItem.vue";
+
+test("VRadioItem using slot", () => {
+  const wrapper = mount({
+    template: `
+      <v-radio-group>
+        <v-radio-item data-test="item" value="'John Duck'">John Duck</v-radio-item>
+      </v-radio-group>
+    `,
+    components: {
+      "v-radio-item": VRadioItem,
+      "v-radio-group": VRadioGroup,
+    },
+  });
+
+  const itemEl = wrapper.find("[data-test='item']").element;
+  expect(itemEl.textContent).toBe("John Duck");
+});
+
+describe("VRadioItem slot states", () => {
+  describe("given no injected provide", () => {
+    test("should have the default active class", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group v-model="value">
+            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("variant-filled")).toBe(true);
+      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(false); 
+    });
+
+    test("should have the default hover class", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("not John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group v-model="value">
+            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("variant-filled")).toBe(false);
+      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(true);  
+    });
+  })
+  describe("given v-slot checked is true", () => {
+    test("should have the active class", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
+            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+        provide: {
+          active: "custom-active-class",
+          hover: "custom-hover-class",
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("custom-active-class")).toBe(true);
+      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(false); 
+    });
+  });
+
+  describe("given v-slot checked is false", () => {
+    test("should have the hover class", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("not John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
+            <v-radio-item data-test="item" :value="'John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+        provide: {
+          active: "custom-active-class",
+          hover: "custom-hover-class",
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("custom-active-class")).toBe(false); 
+      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(true); 
+    });
+  })
+
+  describe("given v-slot disabled is false", () => {
+    test("should not have the disabled classes", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
+            <v-radio-item data-test="item" :value="'not John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+        provide: {
+          active: "custom-active-class",
+          hover: "custom-hover-class",
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("cursor-pointer")).toBe(true); 
+      expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(false); 
+      expect(itemEl.element.classList.contains("opacity-50")).toBe(false); 
+    });
+  });
+
+  describe("given v-slot disabled is true", () => {
+    test("should have the disabled classes", () => {
+      const wrapper = mount({
+        setup() {
+          const value = ref("John Duck");
+          return { value };
+        },
+        template: `
+          <v-radio-group hover="custom-hover-class" active="custom-active-class" v-model="value">
+            <v-radio-item disabled data-test="item" :value="'not John Duck'">John Duck</v-radio-item>
+          </v-radio-group>
+        `,
+        components: {
+          "v-radio-item": VRadioItem,
+          "v-radio-group": VRadioGroup,
+        },
+        provide: {
+          active: "custom-active-class",
+          hover: "custom-hover-class",
+        },
+      });
+
+      const itemEl = wrapper.find("[data-test='item']").find("span");
+      expect(itemEl.element.classList.contains("cursor-pointer")).toBe(false); 
+      expect(itemEl.element.classList.contains("cursor-not-allowed")).toBe(true); 
+      expect(itemEl.element.classList.contains("opacity-50")).toBe(true); 
+    });
+  });
+});

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

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import { RadioGroupOption } from '@headlessui/vue';
-import { inject } from 'vue';
+import { RadioGroupOption } from "@headlessui/vue";
+import { inject } from "vue";
 
 defineProps({
   value: {
-    type: [String, Number],
+    type: [String, Number, Boolean, Object],
     required: true,
   },
 });
 
-const active = (inject('active') as string) || 'variant-filled';
-const hover = (inject('hover') as string) || 'hover:variant-ghost';
+const active = (inject("active") as string);
+const hover = (inject("hover") as string);
 </script>
 
 <template>
   <RadioGroupOption v-slot="{ checked, disabled }" :value="value">
     <span
-      :class="`radio-item px-4 py-1 text-center text-base rounded-token ${checked ? active : hover} ${
-        disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
-      }`"
+      :class="`radio-item px-4 py-1 text-center text-base rounded-token ${
+        checked ? active : hover
+      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`"
     >
       <slot />
     </span>

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

@@ -0,0 +1,55 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VRadioGroup from "./VRadioGroup.vue";
+import VRadioLabel from "./VRadioLabel.vue";
+
+test("VRadioLabel using slot", () => {
+  const wrapper = mount({
+    template: `
+      <v-radio-group>
+        <v-radio-label>John Duck</v-radio-label>
+      </v-radio-group>
+    `,
+    components: {
+      "v-radio-label": VRadioLabel,
+      "v-radio-group": VRadioGroup,
+    },
+  });
+
+  expect(wrapper.text()).toContain("John Duck");
+});
+
+describe("VRadioLabel props", () => {
+  test("default 'as' prop", () => {
+    const wrapper = mount({
+      template: `
+        <v-radio-group>
+          <v-radio-label data-test="label">John Duck</v-radio-label>
+        </v-radio-group>
+      `,
+      components: {
+        "v-radio-label": VRadioLabel,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const label = wrapper.find("[data-test='label']");
+    expect(label.element).toBeInstanceOf(HTMLParagraphElement);
+  });
+  test("custom 'as' prop", () => {
+    const wrapper = mount({
+      template: `
+        <v-radio-group>
+          <v-radio-label as="div" data-test="label">John Duck</v-radio-label>
+        </v-radio-group>
+      `,
+      components: {
+        "v-radio-label": VRadioLabel,
+        "v-radio-group": VRadioGroup,
+      },
+    });
+
+    const label = wrapper.find("[data-test='label']");
+    expect(label.element).toBeInstanceOf(HTMLDivElement);
+  });
+});

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

@@ -1,14 +1,12 @@
 <script setup lang="ts">
-import { RadioGroupLabel } from '@headlessui/vue';
+import { RadioGroupLabel } from "@headlessui/vue";
 
 defineProps({
   as: {
-    type: RadioGroupLabel.props['as'].type,
-    default: 'p'
-  }
+    type: String,
+    default: "p",
+  },
 });
-
-
 </script>
 
 <template>