@code-coaching/vuetiful 0.16.6 → 0.18.0

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/VTabs/VTab.test.ts

@@ -0,0 +1,122 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VTab, VTabs } from "..";
+
+describe("VTab", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs>
+            <template v-slot="tabs">
+              <v-tab data-test="vuetiful">Vuetiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+      },
+    });
+
+    const vuetiful = wrapper.find("[data-test='vuetiful']");
+    const slotContainer = vuetiful.find("[data-test='slot-container']");
+    expect(vuetiful.classes()).toEqual(["flex", "flex-col"]);
+    expect(slotContainer.classes()).toEqual([
+      "text-base",
+      "rounded-token",
+      "w-full",
+      "px-4",
+      "py-2",
+    ]);
+  });
+
+  test("vertical", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs vertical>
+            <template v-slot="tabs">
+              <v-tab data-test="vuetiful">Vuetiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+      },
+    });
+
+    const vuetiful = wrapper.find("[data-test='vuetiful']");
+    expect(vuetiful.classes()).toEqual(["flex", "flex-row", "justify-between"]);
+  });
+
+  test("class-tab", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs class-tab="my-custom-class">
+            <template v-slot="tabs">
+              <v-tab data-test="vuetiful">Vuetiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+      },
+    });
+
+    const vuetiful = wrapper.find("[data-test='vuetiful']");
+    const slotContainer = vuetiful.find("[data-test='slot-container']");
+    expect(slotContainer.classes()).toEqual(["text-base", "rounded-token", "my-custom-class"]);
+  });
+
+  test("hover/active", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs active="my-custom-active-class">
+            <template v-slot="tabs">
+              <v-tab data-test="vuetiful">Vuetiful</v-tab>
+              <v-tab data-test="is">Is</v-tab>
+              <v-tab data-test="beautiful">Beautiful</v-tab>
+            </template>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+      },
+    });
+
+    const vuetifulSlotContainer = wrapper
+      .find("[data-test='vuetiful']")
+      .find("[data-test='slot-container']");
+    const isSlotContainer = wrapper.find("[data-test='is']").find("[data-test='slot-container']");
+    const beautifulSlotContainer = wrapper
+      .find("[data-test='beautiful']")
+      .find("[data-test='slot-container']");
+
+    expect(vuetifulSlotContainer.classes()).toEqual([
+      "text-base",
+      "rounded-token",
+      "my-custom-active-class",
+      "w-full",
+      "px-4",
+      "py-2",
+    ]);
+    expect(isSlotContainer.classes()).toEqual([
+      "text-base",
+      "rounded-token",
+      "hover:variant-ghost",
+      "w-full",
+      "px-4",
+      "py-2",
+    ]);
+    expect(beautifulSlotContainer.classes()).toEqual([
+      "text-base",
+      "rounded-token",
+      "hover:variant-ghost",
+      "w-full",
+      "px-4",
+      "py-2",
+    ]);
+  });
+});

package/src/components/molecules/VTabs/VTab.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Tab } from "@headlessui/vue";
+import { computed, inject } from "vue";
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const activeClass = inject("active") as string;
+const hoverClass = inject("hover") as string;
+const vertical = inject("vertical") as boolean;
+const classTab = inject("classTab") as string;
+const hideSeparator = inject("hideSeparator") as boolean;
+
+const tabClass = computed(() => {
+  return classTab ? classTab : "w-full px-4 py-2";
+});
+</script>
+
+<template>
+  <Tab
+    :disabled="disabled"
+    v-slot="{ selected }"
+    :class="`flex ${vertical ? 'flex-row justify-between' : 'flex-col'}`"
+  >
+    <div data-test="slot-container" :class="`text-base rounded-token ${selected ? activeClass : hoverClass} ${tabClass}`">
+      <slot />
+    </div>
+    <div
+      v-show="selected && !hideSeparator"
+      :class="`z-10 border-surface-900-50-token ${
+        vertical ? 'mr-[-2px] h-full border-r-2' : 'mb-[-2px] border-b-2'
+      }`"
+    ></div>
+  </Tab>
+</template>

package/src/components/molecules/VTabs/VTabPanel.test.ts

@@ -0,0 +1,23 @@
+import { TabGroup } from "@headlessui/vue";
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VTabPanel } from "..";
+
+describe("VTabs", () => {
+  test("default props", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <TabGroup>
+            <v-tab-panel data-test='tab-panel'>John Duck</v-tab-panel>
+          </TabGroup>
+        `,
+      components: {
+        TabGroup: TabGroup,
+        "v-tab-panel": VTabPanel,
+      },
+    });
+
+    const tabPanel = wrapper.find("[data-test='tab-panel']");
+    expect(tabPanel.text()).toEqual("John Duck");
+  });
+});

package/src/components/molecules/VTabs/VTabPanel.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { TabPanel } from '@headlessui/vue';
+</script>
+
+<template>
+  <TabPanel>
+    <slot />
+  </TabPanel>
+</template>

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

@@ -0,0 +1,90 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VTab, VTabPanel, VTabs } from "..";
+
+describe("VTabs", () => {
+  test("hide separator", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs hide-separator></v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+      },
+    });
+
+    const separator = wrapper.find("[data-test='vuetiful-separator']");
+    expect(separator.exists()).toBeFalsy();
+  });
+
+  test("default props", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs>
+            <template v-slot="tabs">
+              <v-tab>John Duck</v-tab>
+            </template>
+            <v-tab-panel>John Duck Panel</v-tab-panel>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+        "v-tab-panel": VTabPanel,
+      },
+    });
+
+    const tabList = wrapper.find("[data-test='vuetiful-tab-list']");
+    expect(tabList.classes()).toEqual([
+      "vuetiful-tab-list",
+      "flex",
+      "!rounded-bl-none",
+      "!rounded-br-none",
+      "rounded-container-token",
+    ]);
+    expect(tabList.classes()).not.toContain("flex-col");
+
+    const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
+    expect(tabPanels.classes()).toEqual([
+      "vuetiful-tab-panels",
+      "!rounded-tl-none",
+      "!rounded-tr-none",
+      "rounded-container-token",
+    ]);
+  });
+
+  test("vertical", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-tabs vertical>
+            <template v-slot="tabs">
+              <v-tab>Tab 1</v-tab>
+            </template>
+            <v-tab-panel>Panel 1</v-tab-panel>
+          </v-tabs>
+        `,
+      components: {
+        "v-tabs": VTabs,
+        "v-tab": VTab,
+        "v-tab-panel": VTabPanel,
+      },
+    });
+    const tabList = wrapper.find("[data-test='vuetiful-tab-list']");
+    expect(tabList.classes()).toEqual([
+      "vuetiful-tab-list",
+      "flex",
+      "flex-col",
+      "!rounded-br-none",
+      "!rounded-tr-none",
+      "rounded-container-token",
+    ]);
+
+    const tabPanels = wrapper.find("[data-test='vuetiful-tab-panels']");
+    expect(tabPanels.classes()).toEqual([
+      "vuetiful-tab-panels",
+      "!rounded-bl-none",
+      "!rounded-tl-none",
+      "rounded-container-token",
+    ]);
+  });
+});

package/src/components/molecules/VTabs/VTabs.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { TabGroup, TabList, TabPanels } from "@headlessui/vue";
+import { provide } from "vue";
+
+const props = defineProps({
+  hideSeparator: {
+    type: Boolean,
+    default: false,
+  },
+
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+
+  active: {
+    type: String,
+    default: "",
+  },
+  hover: {
+    type: String,
+    default: "hover:variant-ghost",
+  },
+
+  classPanels: {
+    type: String,
+    default: "",
+  },
+  classTabs: {
+    type: String,
+    default: "",
+  },
+  classTab: {
+    type: String,
+    default: "",
+  },
+  classSeparator: {
+    type: String,
+    default: "border border-surface-400-500-token",
+  },
+
+  defaultIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+provide("active", props.active);
+provide("hover", props.hover);
+provide("vertical", props.vertical);
+provide("classTab", props.classTab);
+provide("hideSeparator", props.hideSeparator);
+</script>
+
+<template>
+  <TabGroup
+    as="div"
+    :vertical="vertical"
+    :defaultIndex="defaultIndex"
+    :class="`${vertical ? 'flex' : ''}`"
+  >
+    <TabList
+      data-test="vuetiful-tab-list"
+      :class="`vuetiful-tab-list flex ${vertical ? 'flex-col' : ''} ${
+        vertical ? '!rounded-br-none !rounded-tr-none' : '!rounded-bl-none !rounded-br-none'
+      } rounded-container-token ${classTabs}`"
+    >
+      <slot name="tabs" />
+    </TabList>
+    <div
+      data-test="vuetiful-tab-separator"
+      v-if="!hideSeparator"
+      :class="`${classSeparator}`"
+    ></div>
+    <TabPanels
+      data-test="vuetiful-tab-panels"
+      :class="`vuetiful-tab-panels ${
+        vertical ? '!rounded-bl-none !rounded-tl-none' : '!rounded-tl-none !rounded-tr-none'
+      } rounded-container-token ${classPanels}`"
+    >
+      <slot />
+    </TabPanels>
+  </TabGroup>
+</template>