vueless 1.2.4 → 1.2.5-beta.1

package/ui.container-accordion-item/storybook/stories.ts

@@ -0,0 +1,113 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+  trimText,
+} from "../../utils/storybook";
+
+import UAccordionItem from "../../ui.container-accordion-item/UAccordionItem.vue";
+import UButton from "../../ui.button/UButton.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types";
+
+interface UAccordionItemArgs extends Props {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+export default {
+  id: "5050",
+  title: "Containers / Accordion Item",
+  component: UAccordionItem,
+  args: {
+    title: "Committed to Quality and Performance",
+    description: trimText(
+      `We take pride in delivering high-quality solutions tailored to your needs.
+      Our expertise ensures that your project is built with efficiency, scalability, and reliability in mind.`,
+    ),
+  },
+  argTypes: {
+    ...getArgTypes(UAccordionItem.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UAccordionItem.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UAccordionItemArgs> = (args: UAccordionItemArgs) => ({
+  components: { UAccordionItem, ULink, UButton, UCol, URow, UIcon },
+  setup: () => ({ args, slots: getSlotNames(UAccordionItem.__name) }),
+  template: `
+    <UAccordionItem v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UAccordionItem>
+  `,
+});
+
+const EnumTemplate: StoryFn<UAccordionItemArgs> = (args: UAccordionItemArgs, { argTypes }) => ({
+  components: { UAccordionItem, UCol },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol gap="xl">
+      <UAccordionItem
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+      />
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
+
+export const Opened = DefaultTemplate.bind({});
+Opened.args = { opened: true };
+
+export const Sizes = EnumTemplate.bind({});
+Sizes.args = { enum: "size", description: "{enumValue}" };
+
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UCol gap="sm">
+        <URow gap="xs" align="end">
+          <UIcon name="contact_mail" size="xs" color="primary" />
+          <ULink label="Email services" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="vpn_key" size="xs" color="primary" />
+          <ULink label="VPN" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="web_traffic" size="xs" color="primary" />
+          <ULink label="SEO Tools" />
+        </URow>
+      </UCol>
+    </template>
+  `,
+};
+
+export const ToggleSlot = DefaultTemplate.bind({});
+ToggleSlot.args = {
+  slotTemplate: `
+    <template #toggle="{ opened }">
+      <ULink :label="opened ? 'Collapse' : 'Expand'" color="grayscale" />
+    </template>
+  `,
+};

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -0,0 +1,296 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UAccordionItem from "../UAccordionItem.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+
+import type { Props } from "../types";
+
+describe("UAccordionItem", () => {
+  // Props
+  describe("Props", () => {
+    // Title prop
+    it("renders with title prop", () => {
+      const title = "Accordion Title";
+
+      const component = mount(UAccordionItem, {
+        props: {
+          title,
+        },
+      });
+
+      expect(component.find("[vl-key='title']").text()).toContain(title);
+    });
+
+    // Description prop
+    it("renders with description prop", () => {
+      const description = "Accordion Description";
+
+      const component = mount(UAccordionItem, {
+        props: {
+          description,
+        },
+      });
+
+      expect(component.find("[vl-key='description']").text()).toBe(description);
+    });
+
+    // 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(UAccordionItem, {
+          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(UAccordionItem, {
+          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";
+
+      const component = mount(UAccordionItem, {
+        props: {
+          id,
+          description,
+        },
+      });
+
+      expect(component.find(`[id="description-${id}"]`).exists()).toBe(true);
+    });
+
+    // DataTest prop
+    it("applies data-test attribute", () => {
+      const dataTest = "accordion-test";
+
+      const component = mount(UAccordionItem, {
+        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(UAccordionItem, {
+        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(UAccordionItem, {
+        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(UAccordionItem, {
+        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(UAccordionItem, {
+        props: { name: "test" },
+        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(UAccordionItem, {
+        props: { name: "test" },
+        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 () => {
+      const component = mount(UAccordionItem, { props: { name: "test" } });
+
+      await component.trigger("click");
+
+      expect(component.find("[vl-key='content']").exists()).toBe(false);
+    });
+  });
+
+  // Events
+  describe("Events", () => {
+    // Click event
+    it("emits click event with id and opened state when clicked", async () => {
+      const id = "test-id";
+
+      const component = mount(UAccordionItem, {
+        props: {
+          id,
+        },
+      });
+
+      await component.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeTruthy();
+      expect(emitted?.[0]).toEqual([id, true]);
+
+      // Click again to toggle back
+      await component.trigger("click");
+
+      const emittedAgain = component.emitted("click");
+
+      expect(emittedAgain?.[1]).toEqual([id, false]);
+    });
+  });
+
+  // Exposed refs
+  describe("Exposed refs", () => {
+    // WrapperRef
+    it("exposes wrapperRef", () => {
+      const component = mount(UAccordionItem);
+
+      expect(component.vm.wrapperRef).toBeDefined();
+      expect(component.vm.wrapperRef instanceof HTMLDivElement).toBe(true);
+    });
+  });
+
+  // Component behavior
+  describe("Component behavior", () => {
+    // Toggle behavior
+    it("toggles opened state when clicked", async () => {
+      const description = "Test Description";
+      const openedClass = "opacity-100";
+
+      const component = mount(UAccordionItem, {
+        props: {
+          description,
+        },
+      });
+
+      const descriptionElement = component.find("[id^='description-']");
+
+      // Initially not opened
+      expect(descriptionElement.classes()).not.toContain(openedClass);
+
+      // Click to open
+      await component.trigger("click");
+
+      // Should be opened
+      expect(descriptionElement.classes()).toContain(openedClass);
+
+      // Click to close
+      await component.trigger("click");
+
+      // Should be closed again
+      expect(descriptionElement.classes()).not.toContain(openedClass);
+    });
+  });
+});

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

@@ -0,0 +1,56 @@
+import defaultConfig from "./config";
+import type { ComponentConfig } from "../types";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Accordion item value attribute.
+   */
+  value?: string;
+
+  /**
+   * Accordion item title.
+   */
+  title?: string;
+
+  /**
+   * Accordion item description.
+   */
+  description?: string;
+
+  /**
+   * Accordion item size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Control accordion item state (opened/closed).
+   */
+  opened?: boolean;
+
+  /**
+   * Disable accordion item.
+   */
+  disabled?: boolean;
+
+  /**
+   * Accordion item toggle icon.
+   */
+  toggleIcon?: boolean | string;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.image-icon/config.ts

@@ -40,7 +40,7 @@ export default /*tw*/ {
     interactive: false,
     /* icon library */
     library: "@material-symbols",
-    path: "", // set for `custom-icons` library only.
+    path: "", // set for `custom` library only.
     style: "outlined",
     weight: 500,
   },

package/ui.image-icon/types.ts

@@ -6,7 +6,7 @@ import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export type IconLibraries = "@material-symbols" | "bootstrap-icons" | "heroicons" | "custom-icons";
+export type IconLibraries = "@material-symbols" | "bootstrap-icons" | "heroicons" | "custom";
 
 export interface Props {
   /**

package/utils/node/loaderIcon.js

@@ -337,7 +337,11 @@ function getIconLibraryPaths(name, library) {
     sourcePath = path.join(cwd(), NODE_MODULES_DIR, library, "24", fillVariant, `${iconName}.svg`);
   }
 
-  if (library === "custom-icons") {
+  if (library === "lucide-static") {
+    sourcePath = path.join(cwd(), NODE_MODULES_DIR, library, "icons", `${name}.svg`);
+  }
+
+  if (library === "custom") {
     sourcePath = path.join(cwd(), uIconDefaults.path, `${name}.svg`);
   }