@code-coaching/vuetiful 0.12.1 → 0.13.1

package/dist/types/components/atoms/VRadio/VRadioDescription.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/VRadio/VRadioDescription.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    as: string;
+}>;
+export default _default;

package/dist/types/components/atoms/VRadio/VRadioGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts

@@ -0,0 +1,70 @@
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    modelValue: any;
+    active: {
+        type: StringConstructor;
+        default: string;
+    };
+    hover: {
+        type: StringConstructor;
+        default: string;
+    };
+    background: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    by: {
+        type: (StringConstructor | FunctionConstructor)[];
+    };
+    modelValue: any;
+    active: {
+        type: StringConstructor;
+        default: string;
+    };
+    hover: {
+        type: StringConstructor;
+        default: string;
+    };
+    background: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    as: string;
+    disabled: boolean;
+    modelValue: any;
+    active: string;
+    hover: string;
+    background: string;
+    text: string;
+}>;
+export default _default;

package/dist/types/components/atoms/VRadio/VRadioItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/{VRadioItem.vue.d.ts → VRadio/VRadioItem.vue.d.ts}

@@ -1,11 +1,11 @@
 declare const _default: import("vue").DefineComponent<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor)[];
         required: true;
     };
 }, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor)[];
         required: true;
     };
 }>>, {}>;

package/dist/types/components/atoms/VRadio/VRadioLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/atoms/VRadio/VRadioLabel.vue.d.ts

@@ -0,0 +1,14 @@
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    as: string;
+}>;
+export default _default;

package/dist/types/components/atoms/index.d.ts

@@ -1,6 +1,8 @@
 import VBadge from "./VBadge.vue";
 import VButton from "./VButton.vue";
 import VChip from "./VChip.vue";
-import VRadioGroup from "./VRadioGroup.vue";
-import VRadioItem from "./VRadioItem.vue";
-export { VButton, VBadge, VChip, VRadioGroup, VRadioItem };
+import VRadioDescription from "./VRadio/VRadioDescription.vue";
+import VRadioGroup from "./VRadio/VRadioGroup.vue";
+import VRadioItem from "./VRadio/VRadioItem.vue";
+import VRadioLabel from "./VRadio/VRadioLabel.vue";
+export { VButton, VBadge, VChip, VRadioGroup, VRadioItem, VRadioLabel, VRadioDescription };

package/dist/types/components/index.d.ts

@@ -1,3 +1,2 @@
-import { VBadge, VButton, VChip, VRadioGroup, VRadioItem } from "./atoms";
-import { VDrawer, VRail, VRailTile, VShell } from "./molecules";
-export { VButton, VRail, VRailTile, VShell, VDrawer, VBadge, VChip, VRadioGroup, VRadioItem };
+export * from './atoms';
+export * from './molecules';

package/dist/types/components/molecules/VDrawer.vue.d.ts

@@ -34,9 +34,9 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }>>, {
-    labelledby: string;
     regionBackdrop: string;
     regionDrawer: string;
+    labelledby: string;
     describedby: string;
 }>;
 export default _default;

package/dist/types/utils/code-block/VCodeBlock.vue.d.ts

@@ -71,8 +71,8 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onCopy?: (() => any) | undefined;
 }, {
-    code: string;
     language: string;
+    code: string;
     preventOverflow: boolean;
     headerClass: string;
     preClass: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "license": "MIT",
   "scripts": {
     "dev": "onchange 'src/**/*.vue' 'src/**/*.ts' 'src/**/*.css' -- npm run build",
@@ -18,6 +18,7 @@
     "vue": "^3.2.25"
   },
   "dependencies": {
+    "@headlessui/vue": "^1.7.13",
     "highlight.js": "^11.7.0"
   },
   "devDependencies": {

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { RadioGroupDescription } from '@headlessui/vue';
+
+defineProps({
+  as: {
+    type: String,
+    default: 'p',
+  }
+});
+</script>
+
+<template>
+  <RadioGroupDescription :as="as"><slot /></RadioGroupDescription>
+</template>

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { RadioGroup } from "@headlessui/vue";
+import { provide, ref, watch } from "vue";
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  as: {
+    type: String,
+    default: "div",
+  },
+
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  by: {
+    type: [String, Function],
+  },
+
+  modelValue: RadioGroup.props["modelValue"],
+
+  active: {
+    type: String,
+    default: "variant-filled",
+  },
+  hover: {
+    type: String,
+    default: "hover:variant-ghost",
+  },
+
+  background: {
+    type: String,
+    default: "bg-surface-200-700-token",
+  },
+  text: {
+    type: String,
+    default: "text-surface-900 dark:text-surface-50",
+  },
+});
+
+const parentModelValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    parentModelValue.value = newValue;
+  }
+);
+watch(
+  () => parentModelValue.value,
+  (newValue) => {
+    emit("update:modelValue", newValue);
+  }
+);
+
+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
+    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>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { RadioGroupOption } from "@headlessui/vue";
+import { inject } from "vue";
+
+defineProps({
+  value: {
+    type: [String, Number, Boolean, Object],
+    required: true,
+  },
+});
+
+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'}`"
+    >
+      <slot />
+    </span>
+  </RadioGroupOption>
+</template>

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);
+  });
+});