@code-coaching/vuetiful 0.13.1 → 0.14.0

package/package.json

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

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

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

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

@@ -7,36 +7,36 @@ test("VButton", () => {
 });
 
 test("VButton using slot", () => {
-  const vButtonElement = mount(VButton, {
+  const wrapper = mount(VButton, {
     slots: {
       default: "John Duck",
     },
   });
 
-  expect(vButtonElement.text()).toContain("John Duck");
+  expect(wrapper.text()).toContain("John Duck");
 });
 
 describe("VButton props", () => {
   describe("given icon is true", () => {
     test("should have btn-icon class, not have btn class", () => {
-      const vButtonElement = mount(VButton, {
+      const wrapper = mount(VButton, {
         props: {
           icon: true,
         },
       });
-      expect(vButtonElement.classes()).toContain("btn-icon");
-      expect(vButtonElement.classes()).not.toContain("btn");
+      expect(wrapper.classes()).toContain("btn-icon");
+      expect(wrapper.classes()).not.toContain("btn");
     });
   });
   describe("given icon is false", () => {
     test("should have btn class, not have btn-icon class", () => {
-      const vButtonElement = mount(VButton, {
+      const wrapper = mount(VButton, {
         props: {
           icon: false,
         },
       });
-      expect(vButtonElement.classes()).not.toContain("btn-icon");
-      expect(vButtonElement.classes()).toContain("btn");
+      expect(wrapper.classes()).not.toContain("btn-icon");
+      expect(wrapper.classes()).toContain("btn");
     });
   });
 });
@@ -44,13 +44,13 @@ describe("VButton props", () => {
 describe("VButton events", () => {
   describe("given click event", () => {
     test("should preventDefault and emit click event", async () => {
-      const vButtonElement = mount(VButton);
+      const wrapper = mount(VButton);
       const clickEvent = { preventDefault: () => {} };
       const preventDefaultSpy = vi.spyOn(clickEvent, "preventDefault");
-      vButtonElement.trigger("click", clickEvent);
-      await vButtonElement.vm.$nextTick();
+      wrapper.trigger("click", clickEvent);
+      await wrapper.vm.$nextTick();
       expect(preventDefaultSpy).toHaveBeenCalled();
-      expect(vButtonElement.emitted("click")).toBeTruthy();
+      expect(wrapper.emitted("click")).toBeTruthy();
     });
   });
 });
@@ -58,50 +58,50 @@ describe("VButton events", () => {
 describe("VButton a11y", () => {
   describe("a11y role", () => {
     test("should have role button", () => {
-      const vButtonElement = mount(VButton);
-      expect(vButtonElement.attributes("role")).toBe("button");
+      const wrapper = mount(VButton);
+      expect(wrapper.attributes("role")).toBe("button");
     });
   });
   describe("a11y tabindex", () => {
     test("should have tabindex 0", () => {
-      const vButtonElement = mount(VButton);
-      expect(vButtonElement.attributes("tabindex")).toBe("0");
+      const wrapper = mount(VButton);
+      expect(wrapper.attributes("tabindex")).toBe("0");
     });
   });
   describe("given keydown event", () => {
     describe("given key is Enter", () => {
       test("should preventDefault and emit click event", async () => {
-        const vButtonElement = mount(VButton);
+        const wrapper = mount(VButton);
         const keydownEvent = { key: "Enter", preventDefault: () => {} };
         const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        vButtonElement.trigger("keydown", keydownEvent);
-        await vButtonElement.vm.$nextTick();
+        wrapper.trigger("keydown", keydownEvent);
+        await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(vButtonElement.emitted("click")).toBeTruthy();
+        expect(wrapper.emitted("click")).toBeTruthy();
       });
     });
 
     describe("given key is Space", () => {
       test("should preventDefault and not emit click event", async () => {
-        const vButtonElement = mount(VButton);
+        const wrapper = mount(VButton);
         const keydownEvent = { key: " ", preventDefault: () => {} };
         const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        vButtonElement.trigger("keydown", keydownEvent);
-        await vButtonElement.vm.$nextTick();
+        wrapper.trigger("keydown", keydownEvent);
+        await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(vButtonElement.emitted("click")).toBeFalsy();
+        expect(wrapper.emitted("click")).toBeFalsy();
       });
     });
 
     describe("given key is not Enter or Space", () => {
       test("should not preventDefault and not emit click event", async () => {
-        const vButtonElement = mount(VButton);
+        const wrapper = mount(VButton);
         const keydownEvent = { key: "a", preventDefault: () => {} };
         const preventDefaultSpy = vi.spyOn(keydownEvent, "preventDefault");
-        vButtonElement.trigger("keydown", keydownEvent);
-        await vButtonElement.vm.$nextTick();
+        wrapper.trigger("keydown", keydownEvent);
+        await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).not.toHaveBeenCalled();
-        expect(vButtonElement.emitted("click")).toBeFalsy();
+        expect(wrapper.emitted("click")).toBeFalsy();
       });
     });
   });
@@ -109,13 +109,13 @@ describe("VButton a11y", () => {
   describe("given keyup event", () => {
     describe("given key is Space", () => {
       test("should preventDefault and emit click event", async () => {
-        const vButtonElement = mount(VButton);
+        const wrapper = mount(VButton);
         const keyupEvent = { key: " ", preventDefault: () => {} };
         const preventDefaultSpy = vi.spyOn(keyupEvent, "preventDefault");
-        vButtonElement.trigger("keyup", keyupEvent);
-        await vButtonElement.vm.$nextTick();
+        wrapper.trigger("keyup", keyupEvent);
+        await wrapper.vm.$nextTick();
         expect(preventDefaultSpy).toHaveBeenCalled();
-        expect(vButtonElement.emitted("click")).toBeTruthy();
+        expect(wrapper.emitted("click")).toBeTruthy();
       });
     });
   });

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

@@ -0,0 +1,18 @@
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { VChip } from ".";
+
+test("VChip", () => {
+  expect(VChip).toBeTruthy();
+});
+
+test("VChip using slot", () => {
+  const wrapper = mount(VChip, {
+    slots: {
+      default: "John Duck",
+    },
+  });
+
+  expect(wrapper.text()).toContain("John Duck");
+  expect(wrapper.classes()).toContain("chip");
+});

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

@@ -0,0 +1,121 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VSwitch from "./VSwitch.vue";
+import { ref } from "vue";
+
+describe("VSwitch slots", () => {
+  test("should not add screen reader text by default", () => {
+    const wrapper = mount(VSwitch);
+
+    const srOnly = wrapper.find(".sr-only");
+    expect(srOnly.exists()).toBe(false);
+  });
+  test("should add screen reader text if default slot is present", () => {
+    const wrapper = mount(VSwitch, {
+      slots: {
+        default: "John Duck",
+      },
+    });
+
+    const srOnly = wrapper.find(".sr-only");
+    expect(srOnly.text()).toContain("John Duck");
+  });
+});
+
+describe("VSwitch props", () => {
+  test("defaults", () => {
+    const wrapper = mount(VSwitch);
+
+    expect(wrapper.props()).toEqual({
+      modelValue: false,
+      disabled: false,
+      size: "md",
+      switchClass: "variant-filled",
+      thumbClass: "bg-surface-100-800-token",
+      as: "button",
+      name: "",
+    });
+  });
+
+  test("size xs", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "xs",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("w-8 h-4");
+  });
+
+  test("size sm", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "sm",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("w-12 h-6");
+  });
+
+  test("size md", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "md",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("w-16 h-8");
+  });
+
+  test("size lg", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "lg",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("w-20 h-10");
+  });
+
+  test("size xl", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "xl",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("w-24 h-12");
+  });
+
+  test("size custom", () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        size: "custom",
+      },
+    });
+
+    const track = wrapper.find(".slide-toggle-track");
+    expect(track.attributes("class")).toContain("custom");
+  });
+
+
+
+});
+
+describe("VSwitch events", () => {
+  test("update:modelValue", async () => {
+    const wrapper = mount(VSwitch, {
+      props: {
+        modelValue: false,
+      }
+    });
+
+    await wrapper.setProps({ modelValue: true});
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+  })
+})

package/src/components/atoms/VSwitch/VSwitch.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { Switch } from "@headlessui/vue";
+import { computed, ref, watch } from "vue";
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String,
+    default: "md",
+  },
+
+  switchClass: {
+    type: String,
+    default: "variant-filled",
+  },
+  thumbClass: {
+    type: String,
+    default: "bg-surface-100-800-token",
+  },
+
+  as: {
+    type: String,
+    default: "button",
+  },
+  name: {
+    type: String,
+    default: "",
+  },
+});
+
+const parentModelValue = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    parentModelValue.value = newValue;
+  }
+);
+watch(
+  () => parentModelValue.value,
+  (newValue) => {
+    emit("update:modelValue", newValue);
+  }
+);
+
+const trackSize = computed(() => {
+  switch (props.size) {
+    case "xs":
+      return "w-8 h-4";
+    case "sm":
+      return "w-12 h-6";
+    case "md":
+      return "w-16 h-8";
+    case "lg":
+      return "w-20 h-10";
+    case "xl":
+      return "w-24 h-12";
+    default:
+      return props.size;
+  }
+});
+</script>
+
+<template>
+  <!-- There is some odd behavior with test coverge, v-model must be the last property in this component -->
+  <Switch
+    :class="`slide-toggle rounded-container-token ${
+      disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+    }`"
+    :name="name"
+    :as="as"
+    v-slot="{ checked }"
+    v-model="parentModelValue"
+  >
+    <button
+      :class="`slide-toggle-track flex transition-all duration-[150ms] border-token rounded-token ${trackSize} ${
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+      } ${switchClass}`"
+    >
+      <template v-if="$slots.default">
+        <span class="sr-only"><slot /></span>
+      </template>
+      <div
+        :class="`slide-toggle-thumb h-full w-[50%] scale-[0.8] shadow transition-all duration-[150ms] rounded-token ${
+          checked ? 'translate-x-full' : 'opacity-90'
+        } ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} ${thumbClass} bg-opacity-90`"
+      ></div>
+    </button>
+  </Switch>
+</template>

package/src/components/atoms/VSwitch/VSwitchDescription.test.ts

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

package/src/components/atoms/VSwitch/VSwitchDescription.vue

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

package/src/components/atoms/VSwitch/VSwitchGroup.test.ts

@@ -0,0 +1,26 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VSwitchGroup from "./VSwitchGroup.vue";
+
+test("VSwitchGroup using slot", () => {
+  const wrapper = mount(VSwitchGroup as any, {
+    slots: {
+      default: "John Duck",
+    },
+  });
+
+  expect(wrapper.text()).toContain("John Duck");
+});
+
+describe("VSwitchGroup props", () => {
+  test("custom 'as' prop", () => {
+    const wrapper = mount(VSwitchGroup as any, {
+      props: {
+        as: "div",
+      },
+    });
+
+    const divEl = wrapper.find("div");
+    expect(divEl).not.toBeUndefined();
+  })
+})

package/src/components/atoms/VSwitch/VSwitchGroup.vue

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

package/src/components/atoms/VSwitch/VSwitchLabel.test.ts

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

package/src/components/atoms/VSwitch/VSwitchLabel.vue

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

package/src/components/atoms/index.ts

@@ -7,4 +7,21 @@ 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 };
+import VSwitch from "./VSwitch/VSwitch.vue";
+import VSwitchDescription from "./VSwitch/VSwitchDescription.vue";
+import VSwitchGroup from "./VSwitch/VSwitchGroup.vue";
+import VSwitchLabel from "./VSwitch/VSwitchLabel.vue";
+
+export {
+  VButton,
+  VBadge,
+  VChip,
+  VRadioGroup,
+  VRadioItem,
+  VRadioLabel,
+  VRadioDescription,
+  VSwitchGroup,
+  VSwitchLabel,
+  VSwitchDescription,
+  VSwitch,
+};

package/src/components/molecules/VRail.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CssClasses } from "@/index";
-import { defineProps, provide } from "vue";
+import { provide } from "vue";
 
 const props = defineProps({
   active: {

package/src/utils/theme/remove.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, it, vi } from "vitest";
  */
 
 describe("given there is no existing theme style tag", () => {
-  it.only("should create a new theme style tag", async () => {
+  it("should create a new theme style tag", async () => {
     const { useTheme } = await import("./theme.service");
     const { loadTheme } = useTheme();