@code-coaching/vuetiful 0.16.6 → 0.18.0

package/package.json

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

package/src/components/atoms/VAvatar.vue

@@ -33,7 +33,13 @@ const fillInitials = computed(() => {
   <figure
     :class="`avatar isolate flex aspect-square items-center justify-center overflow-hidden font-semibold ${rounded} ${width}`"
   >
-    <img class="avatar-image" v-if="src" :src="imgSrc" :alt="alt" @error="() => (imgSrc = fallback)" />
+    <img
+      class="avatar-image"
+      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">
       <text
         x="50%"

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

@@ -15,4 +15,4 @@ test("VBadge using slot", () => {
 
   expect(wrapper.text()).toContain("John Duck");
   expect(wrapper.classes()).toContain("badge");
-});
+});

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

@@ -15,4 +15,4 @@ test("VChip using slot", () => {
 
   expect(wrapper.text()).toContain("John Duck");
   expect(wrapper.classes()).toContain("chip");
-});
+});

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

@@ -6,9 +6,9 @@ test("VCodeBlock", () => {
   expect(VCodeBlock).toBeTruthy();
 });
 
-// TODO: add tests 
+// TODO: add tests
 test("VCodeBlock using slot", () => {
   const wrapper = mount(VCodeBlock);
 
   expect(wrapper).toBeTruthy();
-});
+});

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

@@ -11,10 +11,10 @@ test("VLightSwitch", () => {
   expect(VLightSwitch).toBeTruthy();
 });
 
-// TODO: add tests 
+// TODO: add tests
 test("VLightSwitch using slot", () => {
   window.matchMedia = matchMediaMock(MODE.LIGHT) as any;
   const wrapper = mount(VLightSwitch);
 
   expect(wrapper).toBeTruthy();
-});
+});

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

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

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

@@ -75,7 +75,7 @@ describe("VRadioGroup v-model", () => {
 
       wrapper.setProps({ modelValue: "Jane Duck" });
       await wrapper.vm.$nextTick();
-      expect(wrapper.emitted()['update:modelValue'][0]).toEqual(["Jane Duck"]);
-    })
-  })
-})
+      expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Jane Duck"]);
+    });
+  });
+});

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

@@ -42,7 +42,7 @@ describe("VRadioItem slot states", () => {
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("variant-filled")).toBe(true);
-      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(false); 
+      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(false);
     });
 
     test("should have the default hover class", () => {
@@ -64,9 +64,9 @@ describe("VRadioItem slot states", () => {
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("variant-filled")).toBe(false);
-      expect(itemEl.element.classList.contains("hover:variant-ghost")).toBe(true);  
+      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({
@@ -91,7 +91,7 @@ describe("VRadioItem slot states", () => {
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
       expect(itemEl.element.classList.contains("custom-active-class")).toBe(true);
-      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(false); 
+      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(false);
     });
   });
 
@@ -118,10 +118,10 @@ describe("VRadioItem slot states", () => {
       });
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
-      expect(itemEl.element.classList.contains("custom-active-class")).toBe(false); 
-      expect(itemEl.element.classList.contains("custom-hover-class")).toBe(true); 
+      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", () => {
@@ -146,9 +146,9 @@ describe("VRadioItem slot states", () => {
       });
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
-      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); 
+      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);
     });
   });
 
@@ -175,9 +175,9 @@ describe("VRadioItem slot states", () => {
       });
 
       const itemEl = wrapper.find("[data-test='item']").find("div");
-      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); 
+      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/VSwitch/VSwitch.test.ts

@@ -1,26 +1,6 @@
 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", () => {
@@ -102,9 +82,6 @@ describe("VSwitch props", () => {
     const track = wrapper.find(".slide-toggle-track");
     expect(track.attributes("class")).toContain("custom");
   });
-
-
-
 });
 
 describe("VSwitch events", () => {
@@ -112,10 +89,10 @@ describe("VSwitch events", () => {
     const wrapper = mount(VSwitch, {
       props: {
         modelValue: false,
-      }
+      },
     });
 
-    await wrapper.setProps({ modelValue: true});
+    await wrapper.setProps({ modelValue: true });
     expect(wrapper.emitted()).toHaveProperty("update:modelValue");
-  })
-})
+  });
+});

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

@@ -1,7 +1,7 @@
 import { mount } from "@vue/test-utils";
 import { describe, expect, test } from "vitest";
-import VSwitchGroup from "./VSwitchGroup.vue";
 import VSwitchDescription from "./VSwitchDescription.vue";
+import VSwitchGroup from "./VSwitchGroup.vue";
 
 test("VSwitchDescription using slot", () => {
   const wrapper = mount({
@@ -52,5 +52,4 @@ describe("VSwitchDescription props", () => {
     const label = wrapper.find("[data-test='label']");
     expect(label.element).toBeInstanceOf(HTMLDivElement);
   });
-
 });

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

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

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

@@ -22,5 +22,5 @@ describe("VSwitchGroup props", () => {
 
     const divEl = wrapper.find("div");
     expect(divEl).not.toBeUndefined();
-  })
-})
+  });
+});

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

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

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

@@ -67,7 +67,7 @@ describe("VSwitchLabel props", () => {
     });
 
     const label = wrapper.findComponent(VSwitchLabel);
-    expect(label.props('passive')).toBe(false);
+    expect(label.props("passive")).toBe(false);
   });
 
   test("custom 'passive' prop'", () => {
@@ -84,6 +84,6 @@ describe("VSwitchLabel props", () => {
     });
 
     const label = wrapper.findComponent(VSwitchLabel);
-    expect(label.props('passive')).toBe(true);
-  })
+    expect(label.props("passive")).toBe(true);
+  });
 });

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

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

package/src/components/index.ts

@@ -1,2 +1,2 @@
-export * from './atoms';
-export * from './molecules';
+export * from "./atoms";
+export * from "./molecules";

package/src/components/molecules/VDrawer.test.ts

@@ -6,9 +6,9 @@ test("VDrawer", () => {
   expect(VDrawer).toBeTruthy();
 });
 
-// TODO: add tests 
+// TODO: add tests
 test("VDrawer using slot", () => {
   const wrapper = mount(VDrawer);
 
   expect(wrapper).toBeTruthy();
-});
+});

package/src/components/molecules/VDrawer.vue

@@ -79,7 +79,7 @@ onMounted(() => {
     <div
       v-if="drawer.open"
       ref="elemBackdrop"
-      :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 flex bg-surface-backdrop-token z-40 ${regionBackdrop}`"
+      :class="`drawer-backdrop backdrop-blur-xs fixed bottom-0 left-0 right-0 top-0 z-40 flex bg-surface-backdrop-token ${regionBackdrop}`"
       @mousedown="onBackdropInteraction"
       @touchstart="onBackdropInteraction"
     ></div>

package/src/components/molecules/VListbox/VListbox.test.ts

@@ -0,0 +1,119 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { ref } from "vue";
+import { VListboxItem } from "..";
+import VListbox from "./VListbox.vue";
+
+describe("VListbox", () => {
+  test("default props", () => {
+    const wrapper = mount(VListbox);
+
+    expect(wrapper.props()).toEqual({
+      active: "variant-filled",
+      background: "bg-surface-200-700-token",
+      buttonText: "Select an option",
+      by: undefined,
+      display: undefined,
+      horizontal: false,
+      hover: "variant-ghost",
+      labelClasses: false,
+      labelText: undefined,
+      modelValue: undefined,
+      multiple: false,
+      text: "text-surface-900 dark:text-surface-50",
+    });
+  });
+
+  describe("modelValue", () => {
+    test("should update modelValue", async () => {
+      const choice = ref();
+      const wrapper = mount({
+        setup() {
+          return { choice };
+        },
+        template: /*html*/ `
+          <v-listbox class="w-60" v-model="choice">
+            <v-listbox-item data-test="vuetiful" value="vuetiful">Vuetiful</v-listbox-item>
+            <v-listbox-item data-test="is" value="is">Is</v-listbox-item>
+            <v-listbox-item data-test="beautiful" value="beautiful">Beautiful</v-listbox-item>
+          </v-listbox>
+        `,
+        components: {
+          "v-listbox": VListbox,
+          "v-listbox-item": VListboxItem,
+        },
+      });
+
+      const listbox = wrapper.find("[data-test='v-listbox']");
+      await listbox.find("[data-test='v-listbox-button']").trigger("click");
+      await listbox.find("[data-test='vuetiful']").trigger("click");
+      expect(choice.value).toBe("vuetiful");
+    });
+  });
+
+  describe("object modelValue", () => {
+    test("should use display prop", async () => {
+      const choice = ref();
+      const wrapper = mount({
+        setup() {
+          return { choice };
+        },
+        template: /*html*/ `
+          <v-listbox class="w-60" v-model="choice" by="id" display="name">
+            <v-listbox-item data-test="vuetiful" :value="{ name: 'vuetiful', id: 0 }">Vuetiful</v-listbox-item>
+            <v-listbox-item data-test="is" :value="{ name: 'is', id: 1 }">Is</v-listbox-item>
+            <v-listbox-item data-test="beautiful" :value="{ name: 'Beautiful', id: 2 }">Beautiful</v-listbox-item>
+          </v-listbox>
+        `,
+        components: {
+          "v-listbox": VListbox,
+          "v-listbox-item": VListboxItem,
+        },
+      });
+
+      const listbox = wrapper.find("[data-test='v-listbox']");
+      const button = listbox.find("[data-test='v-listbox-button']");
+      expect(button.text()).toBe("Select an option");
+      await button.trigger("click");
+      await listbox.find("[data-test='vuetiful']").trigger("click");
+
+      expect(choice.value).toEqual({ name: "vuetiful", id: 0 });
+      expect(button.text()).toBe("vuetiful");
+    });
+  });
+
+  describe("multiple", () => {
+    test("should update modelValue and button text", async () => {
+      const choice = ref([]);
+      const wrapper = mount({
+        setup() {
+          return { choice };
+        },
+        template: /*html*/ `
+          <v-listbox class="w-60" v-model="choice" multiple>
+            <v-listbox-item data-test="vuetiful" value="vuetiful">Vuetiful</v-listbox-item>
+            <v-listbox-item data-test="is" value="is">Is</v-listbox-item>
+            <v-listbox-item data-test="beautiful" value="beautiful">Beautiful</v-listbox-item>
+          </v-listbox>
+        `,
+        components: {
+          "v-listbox": VListbox,
+          "v-listbox-item": VListboxItem,
+        },
+      });
+
+      const listbox = wrapper.find("[data-test='v-listbox']");
+      const button = listbox.find("[data-test='v-listbox-button']");
+      expect(button.text()).toBe("Select an option");
+
+      await button.trigger("click");
+      await listbox.find("[data-test='vuetiful']").trigger("click");
+      expect(choice.value).toEqual(["vuetiful"]);
+      expect(button.text()).toBe("vuetiful");
+
+      await listbox.find("[data-test='is']").trigger("click");
+      expect(choice.value).toEqual(["vuetiful", "is"]);
+      expect(button.text()).toBe("2 options selected");
+    });
+  });
+});

package/src/components/molecules/VListbox/VListbox.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { Listbox } from "@headlessui/vue";
+import { computed, provide, ref, watch } from "vue";
+import VListboxButton from "./VListboxButton.vue";
+import VListboxItems from "./VListboxItems.vue";
+import VListboxLabel from "./VListboxLabel.vue";
+
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  by: {
+    type: String,
+  },
+  display: {
+    type: String,
+  },
+
+  labelText: {
+    type: String,
+  },
+  labelClasses: {
+    type: Boolean,
+    default: false,
+  },
+
+  buttonText: {
+    type: String,
+    default: "Select an option",
+  },
+
+  modelValue: Listbox.props["modelValue"],
+  horizontal: {
+    type: Boolean,
+    default: false,
+  },
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+
+  active: {
+    type: String,
+    default: "variant-filled",
+  },
+  hover: {
+    type: String,
+    default: "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);
+provide("background", props.background);
+provide("text", props.text);
+provide("horizontal", props.horizontal);
+
+const showText = computed(() => {
+  if (props.display && parentModelValue.value) return parentModelValue.value[props.display];
+
+  const length = parentModelValue.value?.length;
+  if (props.multiple && length === 0) return props.buttonText;
+  if (props.multiple && length === 1) return parentModelValue.value[0];
+  if (props.multiple && length > 1) return `${length} options selected`; // TODO: i18n
+
+  if (parentModelValue.value) return parentModelValue.value;
+
+  return props.buttonText;
+});
+</script>
+
+<template>
+  <!-- There is some odd behavior with test coverge, v-model must be the last property in this component -->
+  <Listbox
+    data-test="v-listbox"
+    as="div"
+    :by="by"
+    :multiple="multiple"
+    class="vuetiful-listbox relative rounded-container-token"
+    v-model="parentModelValue"
+  >
+    <v-listbox-label v-if="labelText" :class="labelClasses">{{ labelText }}</v-listbox-label>
+    <v-listbox-button data-test="v-listbox-button">{{ showText }}</v-listbox-button>
+    <!-- TODO: Add configurable transition -->
+    <transition
+      enter-active-class="transition duration-150 ease-in-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition duration-150 ease-in-out"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <v-listbox-items class="absolute mt-1 min-w-full">
+        <slot />
+      </v-listbox-items>
+    </transition>
+  </Listbox>
+</template>

package/src/components/molecules/VListbox/VListboxButton.test.ts

@@ -0,0 +1,57 @@
+import { Listbox } from "@headlessui/vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import VListboxButton from "./VListboxButton.vue";
+
+describe("VListboxButton props", () => {
+  test("defaults", () => {
+    const wrapper = mount({
+      template: /* html */ `
+        <Listbox>
+          <v-listbox-button data-test="v-listbox-button">John Duck</v-listbox-button>
+        </Listbox>
+      `,
+      components: {
+        "v-listbox-button": VListboxButton,
+        Listbox: Listbox,
+      },
+    });
+
+    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    expect(listboxButton.element.tagName).toBe("BUTTON");
+  });
+
+  test("custom 'as' prop", () => {
+    const wrapper = mount({
+      template: /* html */ `
+        <Listbox>
+          <v-listbox-button as="div" data-test="v-listbox-button">John Duck</v-listbox-button>
+        </Listbox>
+      `,
+      components: {
+        "v-listbox-button": VListboxButton,
+        Listbox: Listbox,
+      },
+    });
+
+    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    expect(listboxButton.element.tagName).toBe("DIV");
+  });
+
+  test("should hide icon", () => {
+    const wrapper = mount({
+      template: /* html */ `
+        <Listbox>
+          <v-listbox-button hide-icon data-test="v-listbox-button">John Duck</v-listbox-button>
+        </Listbox>
+      `,
+      components: {
+        "v-listbox-button": VListboxButton,
+        Listbox: Listbox,
+      },
+    });
+
+    const listboxButton = wrapper.find("[data-test='v-listbox-button']");
+    expect(listboxButton.find("svg").exists()).toBe(false);
+  });
+});