@code-coaching/vuetiful 0.16.6 → 0.17.1

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ListboxButton } from "@headlessui/vue";
+
+defineProps({
+  as: {
+    type: String,
+    default: "button",
+  },
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <ListboxButton
+    v-slot="{ open }"
+    :as="as"
+    class="variant-filled btn flex w-full justify-between active:scale-[100%]"
+  >
+    <slot />
+    <span v-if="!hideIcon">
+      <slot v-if="!open" name="open-icon">
+        <!-- https://fontawesome.com/icons/chevron-down?f=classic&s=solid -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path
+            d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+          />
+        </svg>
+      </slot>
+      <slot v-if="open" name="close-icon">
+        <!-- https://fontawesome.com/icons/chevron-up?f=classic&s=solid -->
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+          <path
+            d="M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
+          />
+        </svg>
+      </slot>
+    </span>
+  </ListboxButton>
+</template>
+
+<style scoped>
+.icon {
+  @apply my-1 h-4 w-4 fill-current;
+}
+</style>

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

@@ -0,0 +1,51 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { ref } from "vue";
+import VListbox from "./VListbox.vue";
+import VListboxItem from "./VListboxItem.vue";
+
+describe("VListboxItem props", () => {
+  test("defaults", async () => {
+    const listboxValue = ref("John");
+    const wrapper = mount({
+      setup() {
+        return { listboxValue };
+      },
+      template: /* html */ `
+        <v-listbox v-model="listboxValue">
+          <v-listbox-item value="John">John Duck</v-listbox-item>
+          <v-listbox-item value="Jane">Jane Duck</v-listbox-item>
+        </v-listbox>
+      `,
+      components: {
+        "v-listbox": VListbox,
+        "v-listbox-item": VListboxItem,
+      },
+    });
+
+    const listbox = wrapper.find("[data-test='v-listbox']");
+    await listbox.find("button").trigger("click");
+
+    const listboxItems = listbox.findAll("[data-test='v-listbox-item']");
+    const selectedItem = listboxItems[0];
+    const normalItem = listboxItems[1];
+    expect(selectedItem.classes()).toEqual([
+      "vuetiful-listbox-item",
+      "px-4",
+      "py-1",
+      "text-base",
+      "rounded-token",
+      "variant-filled",
+      "cursor-pointer",
+    ]);
+    expect(normalItem.classes()).toEqual([
+      "vuetiful-listbox-item",
+      "px-4",
+      "py-1",
+      "text-base",
+      "rounded-token",
+      "hover:variant-ghost",
+      "cursor-pointer",
+    ]);
+  });
+});

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { ListboxOption } from "@headlessui/vue";
+import { inject } from "vue";
+
+defineProps({
+  value: {
+    type: [String, Number, Boolean, Object],
+    required: true,
+  },
+});
+
+const activeClass = inject("active") as string;
+const hoverClass = inject("hover") as string;
+</script>
+
+<template>
+  <ListboxOption v-slot="{ selected, disabled, active }" :value="value">
+    <div
+      data-test="v-listbox-item"
+      :class="`vuetiful-listbox-item px-4 py-1 text-base rounded-token ${
+        selected ? activeClass : `hover:${hoverClass}`
+      } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} ${
+        active && !selected ? hoverClass : ''
+      }`"
+    >
+      <slot />
+    </div>
+  </ListboxOption>
+</template>

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

@@ -0,0 +1,44 @@
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import VListbox from "./VListbox.vue";
+import VListboxItem from "./VListboxItem.vue";
+
+test("VListboxItems defaults", async () => {
+  const wrapper = mount({
+    template: /*html*/ `
+      <v-listbox>
+        <v-listbox-item value="John">John Duck</v-listbox-item>
+      </v-listbox>
+    `,
+    components: {
+      "v-listbox": VListbox,
+      "v-listbox-item": VListboxItem,
+    },
+  });
+
+  const listbox = wrapper.find("[data-test='v-listbox']");
+  await listbox.find("button").trigger("click");
+
+  const listboxItems = listbox.find("[data-test='listbox-items']");
+  expect(listboxItems.classes()).toContain("flex-col");
+});
+
+test("VListboxItems horizontal", async () => {
+  const wrapper = mount({
+    template: /*html*/ `
+      <v-listbox horizontal>
+        <v-listbox-item value="John">John Duck</v-listbox-item>
+      </v-listbox>
+    `,
+    components: {
+      "v-listbox": VListbox,
+      "v-listbox-item": VListboxItem,
+    },
+  });
+
+  const listbox = wrapper.find("[data-test='v-listbox']");
+  await listbox.find("button").trigger("click");
+
+  const listboxItems = listbox.find("[data-test='listbox-items']");
+  expect(listboxItems.classes()).not.toContain("flex-col");
+});

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ListboxOptions } from "@headlessui/vue";
+import { inject } from "vue";
+
+defineProps({
+  as: {
+    type: String,
+    default: "ul",
+  },
+  static: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const background = inject("background") as string;
+const text = inject("text") as string;
+const horizontal = inject("horizontal") as boolean;
+</script>
+
+<template>
+  <ListboxOptions
+    :as="as"
+    :static="static"
+    :class="`p-4 border-token border-surface-400-500-token rounded-container-token ${background} ${text}`"
+  >
+    <div data-test="listbox-items" :class="`flex ${horizontal ? 'flex' : 'flex-col'} gap-1`">
+      <slot />
+    </div>
+  </ListboxOptions>
+</template>

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

@@ -0,0 +1,31 @@
+import { mount } from "@vue/test-utils";
+import { expect, test } from "vitest";
+import { ref } from "vue";
+import VListbox from "./VListbox.vue";
+
+test("VListboxLabel using slot", () => {
+  const wrapper = mount({
+    template: `
+      <v-listbox></v-listbox>
+    `,
+    components: {
+      "v-listbox": VListbox,
+    },
+  });
+
+  expect(wrapper.text()).toBe("Select an option");
+});
+
+test("VListboxLabel custom label", () => {
+  const wrapper = mount({
+    template: `
+      <v-listbox label-text="John Duck"></v-listbox>
+    `,
+    components: {
+      "v-listbox": VListbox,
+    },
+  });
+
+  const label = wrapper.find("label");
+  expect(label.text()).toBe("John Duck");
+});

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

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

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

@@ -69,5 +69,5 @@ describe("VPreview", () => {
       expect(after.classes()).toContain("mobile-screen");
       expect(after.classes()).not.toContain("w-full");
     });
-  })
-});
+  });
+});

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

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

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

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

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

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

package/src/components/molecules/index.ts

@@ -3,5 +3,21 @@ import VRail from "./VRail.vue";
 import VRailTile from "./VRailTile.vue";
 import VShell from "./VShell.vue";
 import VPreview from "./VPreview.vue";
+import VListbox from "./VListbox/VListbox.vue";
+import VListboxItem from "./VListbox/VListboxItem.vue";
+import VListboxItems from "./VListbox/VListboxItems.vue";
+import VListboxLabel from "./VListbox/VListboxLabel.vue";
+import VListboxButton from "./VListbox/VListboxButton.vue";
 
-export { VRail, VRailTile, VShell, VDrawer, VPreview };
+export {
+  VRail,
+  VRailTile,
+  VShell,
+  VDrawer,
+  VPreview,
+  VListbox,
+  VListboxItem,
+  VListboxItems,
+  VListboxLabel,
+  VListboxButton,
+};

package/src/styles/elements/buttons.css

@@ -67,7 +67,7 @@
 
   /* File Input Button */
   input[type="file"]:not(.file-dropzone-input)::file-selector-button {
-    @apply btn variant-filled btn-sm mr-2 border-0;
+    @apply variant-filled btn btn-sm mr-2 border-0;
   }
 
   /* === Button Groups === */