@code-coaching/vuetiful 0.17.1 → 0.18.1

package/package.json

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

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

@@ -101,7 +101,9 @@ const showText = computed(() => {
     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>
+    <v-listbox-button data-test="v-listbox-button" :class="`${background} ${text}`">
+      {{ showText }}
+    </v-listbox-button>
     <!-- TODO: Add configurable transition -->
     <transition
       enter-active-class="transition duration-150 ease-in-out"

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>

package/src/components/molecules/index.ts

@@ -1,23 +1,31 @@
 import VDrawer from "./VDrawer.vue";
+import VPreview from "./VPreview.vue";
 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 VListboxButton from "./VListbox/VListboxButton.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";
+
+import VTab from "./VTabs/VTab.vue";
+import VTabPanel from "./VTabs/VTabPanel.vue";
+import VTabs from "./VTabs/VTabs.vue";
 
 export {
-  VRail,
-  VRailTile,
-  VShell,
   VDrawer,
-  VPreview,
   VListbox,
+  VListboxButton,
   VListboxItem,
   VListboxItems,
   VListboxLabel,
-  VListboxButton,
+  VPreview,
+  VRail,
+  VRailTile,
+  VShell,
+  VTab,
+  VTabPanel,
+  VTabs,
 };