@code-coaching/vuetiful 0.18.1 → 0.19.0

package/package.json

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

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

@@ -0,0 +1,22 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VAccordion } from "..";
+
+describe("VAccordion", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `<v-accordion></v-accordion>`,
+      components: {
+        "v-accordion": VAccordion,
+      },
+    });
+
+    expect(wrapper.classes()).toEqual([
+      "vuetiful-accordion",
+      "flex",
+      "w-full",
+      "flex-col",
+      "gap-1",
+    ]);
+  });
+});

package/src/components/molecules/VAccordion/VAccordion.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const props = defineProps({
+  hover: {
+    type: String,
+    default: 'hover:variant-soft',
+  },
+  background: {
+    type: String,
+    default: 'bg-surface-200-700-token',
+  },
+});
+
+provide('hover', props.hover);
+provide('background', props.background);
+</script>
+
+<template>
+  <div class="vuetiful-accordion flex w-full flex-col gap-1">
+    <slot></slot>
+  </div>
+</template>

package/src/components/molecules/VAccordion/VAccordionItem.test.ts

@@ -0,0 +1,85 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VAccordion, VAccordionItem } from "..";
+
+describe("VAccordionItem", () => {
+  test("defaults", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-accordion>
+          <v-accordion-item title="Vuetiful">John Duck</v-accordion-item>
+          <v-accordion-item title="Is">Janine Duck</v-accordion-item>
+        </v-accordion>`,
+      components: {
+        "v-accordion": VAccordion,
+        "v-accordion-item": VAccordionItem,
+      },
+    });
+
+    const accordionItems = wrapper.findAllComponents(VAccordionItem);
+    accordionItems.forEach((accordionItem) => {
+      expect(accordionItem.classes()).toEqual(["vuetiful-accordion-item"]);
+
+      const accordionItemButton = accordionItem.find(".vuetiful-accordion-item-button");
+      expect(accordionItemButton.classes()).toEqual([
+        "bg-surface-200-700-token",
+        "hover:variant-soft",
+        "vuetiful-accordion-item-button",
+        "w-full",
+        "rounded-container-token",
+      ]);
+
+      const accordionItemTitle = accordionItem.find(".vuetiful-accordion-title");
+      expect(accordionItemTitle.text()).toEqual(accordionItem.props().title);
+    });
+  });
+
+  test("open", async () => {
+    const wrapper = mount({
+      template: /*html*/ `
+        <v-accordion>
+          <v-accordion-item title="Vuetiful" open>John Duck</v-accordion-item>
+          <v-accordion-item title="Is">Janine Duck</v-accordion-item>
+        </v-accordion>`,
+      components: {
+        "v-accordion": VAccordion,
+        "v-accordion-item": VAccordionItem,
+      },
+    });
+
+    const accordionItems = wrapper.findAllComponents(VAccordionItem);
+    const accordionItemButtonOne = accordionItems[0].find(".vuetiful-accordion-item-button");
+    const accordionItemButtonTwo = accordionItems[1].find(".vuetiful-accordion-item-button");
+
+    await accordionItemButtonOne.trigger("click");
+
+    expect(accordionItemButtonOne.classes()).toEqual([
+      "bg-surface-200-700-token",
+      "hover:variant-soft",
+      "!rounded-bl-none",
+      "!rounded-br-none",
+      "vuetiful-accordion-item-button",
+      "w-full",
+      "rounded-container-token",
+    ]);
+    expect(accordionItemButtonTwo.classes()).toEqual([
+      "bg-surface-200-700-token",
+      "hover:variant-soft",
+      "vuetiful-accordion-item-button",
+      "w-full",
+      "rounded-container-token",
+    ]);
+
+    const accordionItemPanelOne = accordionItems[0].find(".vuetiful-accordion-item-panel");
+
+    expect(accordionItemPanelOne.classes()).toEqual([
+      "vuetiful-accordion-item-panel",
+      "p-4",
+      "pt-0",
+      "rounded-container-token",
+      "bg-surface-200-700-token",
+      "!rounded-tl-none",
+      "!rounded-tr-none",
+    ]);
+  });
+});

package/src/components/molecules/VAccordion/VAccordionItem.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue";
+import { inject } from "vue";
+
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+});
+
+const hover = inject("hover");
+const background = inject("background");
+</script>
+
+<template>
+  <Disclosure class="vuetiful-accordion-item" as="div" v-slot="{ open }">
+    <DisclosureButton
+      :class="`${background} ${hover} ${open ? '!rounded-bl-none !rounded-br-none' : ''}`"
+      class="vuetiful-accordion-item-button w-full rounded-container-token"
+    >
+      <div
+        class="flex items-center justify-between p-4 rounded-container-token hover:cursor-pointer"
+        :class="`${background} ${hover} ${open ? '!rounded-bl-none !rounded-br-none' : ''}`"
+      >
+        <span class="vuetiful-accordion-title">{{ title }}</span>
+        <slot v-if="!open" name="open-item">
+          <!-- https://fontawesome.com/icons/plus?f=classic&s=solid -->
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path
+              d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+            />
+          </svg>
+        </slot>
+        <slot v-if="open" name="close-item">
+          <!-- https://fontawesome.com/icons/minus?f=classic&s=solid -->
+          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+            <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+            <path
+              d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+            />
+          </svg>
+        </slot>
+      </div>
+    </DisclosureButton>
+    <DisclosurePanel
+      class="vuetiful-accordion-item-panel p-4 pt-0 rounded-container-token"
+      :class="`${open ? `${background} !rounded-tl-none !rounded-tr-none` : ''}`"
+    >
+      <slot></slot>
+    </DisclosurePanel>
+  </Disclosure>
+</template>
+
+<style scoped>
+.icon {
+  @apply my-1 h-4 w-4 fill-current;
+}
+</style>

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

@@ -101,9 +101,7 @@ 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" :class="`${background} ${text}`">
-      {{ showText }}
-    </v-listbox-button>
+    <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"

package/src/components/molecules/index.ts

@@ -14,7 +14,12 @@ import VTab from "./VTabs/VTab.vue";
 import VTabPanel from "./VTabs/VTabPanel.vue";
 import VTabs from "./VTabs/VTabs.vue";
 
+import VAccordion from "./VAccordion/VAccordion.vue";
+import VAccordionItem from "./VAccordion/VAccordionItem.vue";
+
 export {
+  VAccordion,
+  VAccordionItem,
   VDrawer,
   VListbox,
   VListboxButton,