vueless 1.2.4 → 1.2.5-beta.0

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -2,293 +2,98 @@ import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
 import UAccordion from "../UAccordion.vue";
-import UIcon from "../../ui.image-icon/UIcon.vue";
-
-import type { Props } from "../types";
+import UAccordionItem from "../../ui.container-accordion-item/UAccordionItem.vue";
 
 describe("UAccordion", () => {
+  const options = [
+    { value: "a", title: "A" },
+    { value: "b", title: "B" },
+  ];
+
   // Props
   describe("Props", () => {
-    // Title prop
-    it("renders with title prop", () => {
-      const title = "Accordion Title";
-
+    it("renders items from options", () => {
       const component = mount(UAccordion, {
-        props: {
-          title,
-        },
+        props: { options },
       });
 
-      expect(component.find("[vl-key='title']").text()).toContain(title);
-    });
-
-    // Description prop
-    it("renders with description prop", () => {
-      const description = "Accordion Description";
+      const items = component.findAllComponents(UAccordionItem);
 
-      const component = mount(UAccordion, {
-        props: {
-          description,
-        },
-      });
-
-      expect(component.find("[vl-key='description']").text()).toBe(description);
+      expect(items.length).toBe(options.length);
     });
 
-    // Size prop
-    it("applies correct size classes", () => {
-      const sizeClasses = {
-        sm: "text-small",
-        md: "text-medium",
-        lg: "text-large",
-      };
-
-      Object.entries(sizeClasses).forEach(([size, classes]) => {
-        const component = mount(UAccordion, {
-          props: {
-            size: size as Props["size"],
-          },
-        });
-
-        expect(component.find("[vl-key='title']").classes()).toContain(classes);
-      });
-    });
-
-    // ToggleIcon prop
-    it("applies correct toggle icon behavior", () => {
-      const toggleIconTests = [
-        { toggleIcon: true, exists: true, iconName: "keyboard_arrow_down" },
-        { toggleIcon: "custom_icon", exists: true, iconName: "custom_icon" },
-        { toggleIcon: false, exists: false, iconName: undefined },
-      ];
-
-      toggleIconTests.forEach(({ toggleIcon, exists, iconName }) => {
-        const component = mount(UAccordion, {
-          props: {
-            toggleIcon: toggleIcon as Props["toggleIcon"],
-          },
-        });
-
-        const icon = component.findComponent(UIcon);
-
-        expect(icon.exists()).toBe(exists);
-
-        if (exists) {
-          expect(icon.props("name")).toBe(iconName);
-        }
-      });
-    });
-
-    // ID prop
-    it("uses provided id prop", () => {
-      const id = "custom-id";
-      const description = "some text";
-
+    it("passes base props down to items", () => {
       const component = mount(UAccordion, {
-        props: {
-          id,
-          description,
-        },
+        props: { size: "md", disabled: true, options },
       });
 
-      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+      const item = component.findComponent(UAccordionItem);
+
+      expect(item.props("size")).toBe("md");
+      expect(item.props("disabled")).toBe(true);
     });
 
-    // DataTest prop
-    it("applies data-test attribute", () => {
+    it("applies data-test attribute to wrapper", () => {
       const dataTest = "accordion-test";
 
       const component = mount(UAccordion, {
-        props: {
-          dataTest,
-        },
+        props: { dataTest },
       });
 
       expect(component.attributes("data-test")).toBe(dataTest);
     });
   });
 
-  // Slots
-  describe("Slots", () => {
-    // Toggle slot
-    it("renders default toggle icon when toggle slot is not provided", () => {
-      const toggleIcon = true;
-
-      const component = mount(UAccordion, {
-        props: {
-          toggleIcon,
-        },
-      });
-
-      const icon = component.findComponent(UIcon);
-
-      expect(icon.exists()).toBe(true);
-    });
-
-    // Custom toggle slot
-    it("renders custom content in toggle slot", () => {
-      const toggleIcon = true;
-      const slotClass = "custom-toggle";
-      const slotContent = "Custom Toggle";
-
-      const component = mount(UAccordion, {
-        props: {
-          toggleIcon,
-        },
-        slots: {
-          toggle: `<div class="${slotClass}">${slotContent}</div>`,
-        },
-      });
-
-      expect(component.find(`.${slotClass}`).exists()).toBe(true);
-      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
-      expect(component.findComponent(UIcon).exists()).toBe(false);
-    });
-
-    // Toggle slot bindings
-    it("provides icon-name and opened bindings to toggle slot", async () => {
-      const toggleIcon = true;
-      const toggleClass = "custom-toggle";
-      const defaultIconName = "keyboard_arrow_down";
-
-      const component = mount(UAccordion, {
-        props: {
-          toggleIcon,
-        },
-        slots: {
-          toggle: `
-            <template #default="{ iconName, opened }">
-              <div class="${toggleClass}" :data-icon="iconName" :data-opened="opened"></div>
-            </template>
-          `,
-        },
-      });
-
-      const toggleElement = component.find(`.${toggleClass}`);
-
-      expect(toggleElement.exists()).toBe(true);
-      expect(toggleElement.attributes("data-icon")).toBe(defaultIconName);
-      expect(toggleElement.attributes("data-opened")).toBe("false");
-
-      // Click to toggle
-      await component.trigger("click");
-
-      expect(toggleElement.attributes("data-opened")).toBe("true");
-    });
-
-    // Default slot
-    it("renders default slot content when accordion is opened", async () => {
-      const slotContent = "Custom accordion content";
-      const slotClass = "custom-content";
-
-      const component = mount(UAccordion, {
-        slots: {
-          default: `<div class="${slotClass}">${slotContent}</div>`,
-        },
-      });
-
-      expect(component.find(`.${slotClass}`).exists()).toBe(false);
-
-      await component.trigger("click");
-
-      expect(component.find(`.${slotClass}`).exists()).toBe(true);
-      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
-
-      await component.trigger("click");
-
-      expect(component.find(`.${slotClass}`).exists()).toBe(false);
-    });
-
-    it("does not render default slot content when accordion is closed", () => {
-      const slotContent = "Custom accordion content";
-      const slotClass = "custom-content";
-
-      const component = mount(UAccordion, {
-        slots: {
-          default: `<div class="${slotClass}">${slotContent}</div>`,
-        },
-      });
-
-      expect(component.find(`.${slotClass}`).exists()).toBe(false);
-    });
-
-    it("does not render content wrapper when default slot is empty", async () => {
+  // Exposed refs
+  describe("Exposed refs", () => {
+    it("exposes accordionRef", () => {
       const component = mount(UAccordion);
 
-      await component.trigger("click");
-
-      expect(component.find("[vl-key='content']").exists()).toBe(false);
+      expect(component.vm.accordionRef).toBeDefined();
+      expect(component.vm.accordionRef instanceof HTMLDivElement).toBe(true);
     });
   });
 
   // Events
   describe("Events", () => {
-    // Click event
-    it("emits click event with id and opened state when clicked", async () => {
-      const id = "test-id";
-
+    it("emits update:modelValue when an item is toggled (single)", async () => {
       const component = mount(UAccordion, {
-        props: {
-          id,
-        },
+        props: { options },
       });
 
-      await component.trigger("click");
-
-      const emitted = component.emitted("click");
+      const firstItem = component.findAllComponents(UAccordionItem)[0];
 
-      expect(emitted).toBeTruthy();
-      expect(emitted?.[0]).toEqual([id, true]);
+      await firstItem.trigger("click");
 
-      // Click again to toggle back
-      await component.trigger("click");
+      const updates = component.emitted("update:modelValue");
 
-      const emittedAgain = component.emitted("click");
+      expect(updates).toBeTruthy();
+      expect(updates?.[0]).toEqual(["a"]);
 
-      expect(emittedAgain?.[1]).toEqual([id, false]);
-    });
-  });
+      await firstItem.trigger("click");
+      const updates2 = component.emitted("update:modelValue");
 
-  // Exposed refs
-  describe("Exposed refs", () => {
-    // WrapperRef
-    it("exposes wrapperRef", () => {
-      const component = mount(UAccordion);
-
-      expect(component.vm.wrapperRef).toBeDefined();
-      expect(component.vm.wrapperRef instanceof HTMLDivElement).toBe(true);
+      expect(updates2?.[1]).toEqual([null]);
     });
-  });
-
-  // Component behavior
-  describe("Component behavior", () => {
-    // Toggle behavior
-    it("toggles opened state when clicked", async () => {
-      const description = "Test Description";
-      const openedClass = "opacity-100";
 
+    it("emits update:modelValue with arrays when multiple=true", async () => {
       const component = mount(UAccordion, {
-        props: {
-          description,
-        },
+        props: { options, multiple: true },
       });
 
-      const descriptionElement = component.find("[id^='description-']");
-
-      // Initially not opened
-      expect(descriptionElement.classes()).not.toContain(openedClass);
+      const [firstItem, secondItem] = component.findAllComponents(UAccordionItem);
 
-      // Click to open
-      await component.trigger("click");
+      await firstItem.trigger("click");
+      await secondItem.trigger("click");
+      const updates = component.emitted("update:modelValue");
 
-      // Should be opened
-      expect(descriptionElement.classes()).toContain(openedClass);
+      expect(updates?.[0]).toEqual([["a"]]);
+      expect(updates?.[1]).toEqual([["a", "b"]]);
 
-      // Click to close
-      await component.trigger("click");
+      await firstItem.trigger("click");
+      const updates2 = component.emitted("update:modelValue");
 
-      // Should be closed again
-      expect(descriptionElement.classes()).not.toContain(openedClass);
+      expect(updates2?.[2]).toEqual([["b"]]);
     });
   });
 });

package/ui.container-accordion/types.ts

@@ -3,16 +3,25 @@ import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
+export interface UAccordionOption {
+  value: string;
+  title: string;
+  description?: string;
+  opened?: boolean;
+}
+
+export type SetAccordionSelectedItem = (value: string, opened: boolean) => void;
+
 export interface Props {
   /**
-   * Accordion title.
+   * Accordion items state control.
    */
-  title?: string;
+  modelValue?: string | string[] | null;
 
   /**
-   * Accordion description.
+   * Accordion options.
    */
-  description?: string;
+  options?: UAccordionOption[];
 
   /**
    * Accordion size.
@@ -20,9 +29,14 @@ export interface Props {
   size?: "sm" | "md" | "lg";
 
   /**
-   * Accordion toggle icon.
+   * Allow multiple items to be opened at the same time.
+   */
+  multiple?: boolean;
+
+  /**
+   * Disable an accordion.
    */
-  toggleIcon?: boolean | string;
+  disabled?: boolean;
 
   /**
    * Unique element id.

package/ui.container-accordion-item/UAccordionItem.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, inject, useId, useSlots, useTemplateRef, toValue, watchEffect } from "vue";
+
+import { isEqual } from "lodash-es";
+
+import useUI from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+import { hasSlotContent } from "../utils/helper";
+
+import UIcon from "../ui.image-icon/UIcon.vue";
+
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+import type { SetAccordionSelectedItem } from "../ui.container-accordion/types";
+
+defineOptions({ inheritAttrs: false });
+
+const setAccordionSelectedItem = inject<SetAccordionSelectedItem | null>(
+  "setAccordionSelectedItem",
+  null,
+);
+const getAccordionSize = inject("getAccordionSize", null);
+const getAccordionDisabled = inject("getAccordionDisabled", null);
+const getAccordionSelectedItem = inject<(() => string | string[] | null) | null>(
+  "getAccordionSelectedItem",
+  null,
+);
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when the accordion item is toggled.
+   * @property {string} elementId
+   * @property {boolean} isOpened
+   */
+  "click",
+]);
+
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const descriptionRef = useTemplateRef<HTMLDivElement>("description");
+const contentRef = useTemplateRef<HTMLDivElement>("content");
+
+const accordionSize = ref(toValue(getAccordionSize) || props.size);
+const accordionDisabled = ref(toValue(getAccordionDisabled) || props.disabled);
+
+watchEffect(() => (accordionSize.value = toValue(getAccordionSize) || props.size));
+watchEffect(() => (accordionDisabled.value = toValue(getAccordionDisabled) || props.disabled));
+
+const slots = useSlots();
+const elementId = props.id || useId();
+
+const internalOpened = ref(false);
+
+const isOpened = computed(() => {
+  const selectedItem = toValue(getAccordionSelectedItem);
+
+  if (selectedItem !== null) {
+    if (Array.isArray(selectedItem)) {
+      return selectedItem.includes(props.value ?? "");
+    }
+
+    return isEqual(selectedItem, props.value);
+  }
+
+  return props.opened || internalOpened.value;
+});
+
+const toggleIconName = computed(() => {
+  if (typeof props.toggleIcon === "string") {
+    return props.toggleIcon;
+  }
+
+  return props.toggleIcon ? config.value.defaults.toggleIcon : "";
+});
+
+function onClickItem(event: MouseEvent) {
+  const clickedInsideContent = contentRef.value?.contains(event.target as Node);
+  const clickedDescription = descriptionRef.value?.contains(event.target as Node);
+
+  if (props.disabled || clickedDescription || clickedInsideContent) return;
+
+  emit("click", elementId, !isOpened.value);
+
+  if (setAccordionSelectedItem) {
+    setAccordionSelectedItem(props.value ?? "", !isOpened.value);
+
+    return;
+  }
+
+  internalOpened.value = !internalOpened.value;
+}
+
+defineExpose({
+  /**
+   * A reference to the component's wrapper element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  wrapperRef,
+});
+
+const mutatedProps = computed(() => ({
+  /* component state, not a props */
+  opened: isOpened.value,
+}));
+
+const {
+  getDataTest,
+  config,
+  wrapperAttrs,
+  descriptionAttrs,
+  bodyAttrs,
+  titleAttrs,
+  contentAttrs,
+  toggleIconAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
+</script>
+
+<template>
+  <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
+    <div v-bind="bodyAttrs">
+      <div v-bind="titleAttrs">
+        {{ title }}
+        <!--
+          @slot Use it to add something instead of the toggle icon.
+          @binding {string} icon-name
+          @binding {boolean} opened
+        -->
+        <slot name="toggle" :icon-name="toggleIconName" :opened="isOpened">
+          <UIcon
+            v-if="toggleIconName"
+            :name="toggleIconName"
+            :size="size"
+            color="neutral"
+            v-bind="toggleIconAttrs"
+          />
+        </slot>
+      </div>
+
+      <div
+        v-if="description"
+        :id="`description-${elementId}`"
+        ref="description"
+        v-bind="descriptionAttrs"
+        v-text="description"
+      />
+
+      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
+        <!-- @slot Use it to add accordion content. -->
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/ui.container-accordion-item/config.ts

@@ -0,0 +1,52 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "group cursor-pointer",
+    variants: {
+      disabled: {
+        true: "cursor-not-allowed text-default/(--vl-disabled-opacity)",
+      },
+    },
+  },
+  body: "",
+  title: {
+    base: "flex items-center justify-between font-medium",
+    variants: {
+      size: {
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      },
+    },
+  },
+  description: {
+    base: "text-accented h-0 opacity-0 transition-all cursor-default",
+    variants: {
+      size: {
+        sm: "text-tiny",
+        md: "text-small",
+        lg: "text-medium",
+      },
+      opened: {
+        true: "pt-2 h-fit opacity-100",
+      },
+      disabled: {
+        true: "text-accented/(--vl-disabled-opacity)",
+      },
+    },
+  },
+  content: "pt-3 cursor-default",
+  toggleIcon: {
+    base: "{UIcon} transition duration-300",
+    variants: {
+      opened: {
+        true: "group-[*]:rotate-180",
+      },
+    },
+  },
+  defaults: {
+    size: "md",
+    disabled: false,
+    /* icons */
+    toggleIcon: "keyboard_arrow_down",
+  },
+};

package/ui.container-accordion-item/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UAccordionItem";

package/ui.container-accordion-item/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />