@code-coaching/vuetiful 0.18.1 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-coaching/vuetiful",
-  "version": "0.18.1",
+  "version": "0.20.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/VAlert.test.ts

@@ -0,0 +1,90 @@
+import { mount } from "@vue/test-utils";
+import { describe, expect, test } from "vitest";
+import { VAlert } from "..";
+
+describe("VAlert", () => {
+  test("types", () => {
+    const wrapper = mount({
+      template: /*html*/ `
+          <v-alert data-test="default"></v-alert>
+          <v-alert data-test="info" type="info"></v-alert>
+          <v-alert data-test="success" type="success"></v-alert>
+          <v-alert data-test="warning" type="warning"></v-alert>
+          <v-alert data-test="error" type="error"></v-alert>
+        `,
+      components: {
+        "v-alert": VAlert,
+      },
+    });
+
+    const defaultAlert = wrapper.find("[data-test=default]");
+    expect(defaultAlert.classes()).toContain("variant-filled-primary");
+
+    const infoAlert = wrapper.find("[data-test=info]");
+    expect(infoAlert.classes()).toContain("variant-filled");
+
+    const successAlert = wrapper.find("[data-test=success]");
+    expect(successAlert.classes()).toContain("variant-filled-success");
+
+    const warningAlert = wrapper.find("[data-test=warning]");
+    expect(warningAlert.classes()).toContain("variant-filled-warning");
+  });
+
+  describe("given close icon is clicked", () => {
+    test("should emit close", async () => {
+      const wrapper = mount(VAlert);
+      await wrapper.find("[data-test=close]").trigger("click");
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+
+      await wrapper.find("[data-test=close]").trigger("keydown", { key: "Enter" });
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+
+      await wrapper.find("[data-test=close]").trigger("keydown", { key: " " });
+      expect(wrapper.emitted()["close"][0]).toEqual([]);
+    });
+  });
+
+  describe("given a pre slot is provided", () => {
+    test("should render the pre slot", () => {
+      const wrapper = mount(VAlert, {
+        slots: {
+          pre: "John Duck",
+        },
+      });
+      expect(wrapper.text()).toContain("John Duck");
+    });
+  })
+
+  describe("given a actions slot is provided", () => {
+    test("should render the actions slot", () => {
+      const wrapper = mount(VAlert, {
+        slots: {
+          actions: "John Duck",
+        },
+      });
+      expect(wrapper.text()).toContain("John Duck");
+    });
+  })
+
+  describe("given hide-icon prop is present", () => {
+    test("should not render an icon", () => {
+      const wrapper = mount(VAlert, {
+        props: {
+          hideIcon: true,
+        },
+      });
+      expect(wrapper.findAll(".icon").length).toBe(1);
+    });
+  })
+
+  describe("given hide-close prop is present", () => {
+    test("should not render a close icon", () => {
+      const wrapper = mount(VAlert, {
+        props: {
+          hideClose: true,
+        },
+      });
+      expect(wrapper.find("[data-test=close]").exists()).toBe(false);
+    });
+  })
+});

package/src/components/molecules/VAlert.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { PropType, computed } from "vue";
+
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  hideIcon: {
+    type: Boolean,
+    default: false,
+  },
+  hideClose: {
+    type: Boolean,
+    default: false,
+  },
+
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  type: {
+    type: String as PropType<"info" | "success" | "warning" | "error">,
+    default: "",
+  },
+});
+
+const typeBackground = computed(() => {
+  switch (props.type) {
+    case "info":
+      return "variant-filled";
+    case "success":
+      return "variant-filled-success";
+    case "warning":
+      return "variant-filled-warning";
+    case "error":
+      return "variant-filled-error";
+    default:
+      return "variant-filled-primary";
+  }
+});
+
+const close = () => emit("close");
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Enter" || event.key === " ") {
+    close();
+  }
+};
+</script>
+
+<template>
+  <aside
+    v-if="show"
+    :class="`vuetiful-alert flex w-full flex-row items-center gap-4 p-4 border-token rounded-container-token ${typeBackground}`"
+  >
+    <div v-if="!hideIcon">
+      <slot v-if="$slots.pre" name="pre" />
+      <template v-if="!$slots.pre">
+        <!-- https://fontawesome.com/icons/circle-info?f=classic&s=solid -->
+        <svg
+          v-if="type === 'info'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/circle-check?f=classic&s=solid -->
+        <svg
+          v-if="type === 'success'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/circle-exclamation?f=classic&s=solid -->
+        <svg
+          v-if="type === 'warning'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
+          />
+        </svg>
+
+        <!-- https://fontawesome.com/icons/triangle-exclamation?f=classic&s=solid -->
+        <svg
+          v-if="type === 'error'"
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"
+          />
+        </svg>
+      </template>
+    </div>
+
+    <div class="vuetiful-alert-message flex-auto">
+      <slot />
+    </div>
+
+    <slot name="actions"> </slot>
+    <!-- https://fontawesome.com/icons/xmark?f=classic&s=solid -->
+    <svg
+      data-test="close"
+      v-if="!hideClose"
+      tabindex="0"
+      @keydown="handleKeydown"
+      @click="close"
+      class="icon hover:cursor-pointer"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 384 512"
+    >
+      <path
+        d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
+      />
+    </svg>
+  </aside>
+</template>
+
+<style scoped>
+.icon {
+  @apply my-1 h-6 min-h-[1.5rem] w-6 min-w-[1.5rem] fill-current;
+}
+</style>

package/src/components/molecules/index.ts

@@ -14,7 +14,15 @@ 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";
+
+import VAlert from "./VAlert.vue";
+
 export {
+  VAccordion,
+  VAccordionItem,
+  VAlert,
   VDrawer,
   VListbox,
   VListboxButton,