vueless 1.2.3-beta.10 → 1.2.3-beta.12

package/constants.d.ts

@@ -177,6 +177,7 @@ export namespace COMPONENTS {
     let UGroup: string;
     let UGroups: string;
     let UAccordion: string;
+    let UAccordionItem: string;
     let UCard: string;
     let UModal: string;
     let UModalConfirm: string;

package/constants.js

@@ -287,6 +287,7 @@ export const COMPONENTS = {
   UGroup: "ui.container-group",
   UGroups: "ui.container-groups",
   UAccordion: "ui.container-accordion",
+  UAccordionItem: "ui.container-accordion-item",
   UCard: "ui.container-card",
   UModal: "ui.container-modal",
   UModalConfirm: "ui.container-modal-confirm",

package/index.d.ts

@@ -94,6 +94,7 @@ export { default as URow } from "./ui.container-row/URow.vue";
 export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
+export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";

package/index.ts

@@ -100,6 +100,7 @@ export { default as URow } from "./ui.container-row/URow.vue";
 export { default as UGroup } from "./ui.container-group/UGroup.vue";
 export { default as UGroups } from "./ui.container-groups/UGroups.vue";
 export { default as UAccordion } from "./ui.container-accordion/UAccordion.vue";
+export { default as UAccordionItem } from "./ui.container-accordion-item/UAccordionItem.vue";
 export { default as UCard } from "./ui.container-card/UCard.vue";
 export { default as UModal } from "./ui.container-modal/UModal.vue";
 export { default as UModalConfirm } from "./ui.container-modal-confirm/UModalConfirm.vue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.3-beta.10",
+  "version": "1.2.3-beta.12",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/types.ts

@@ -20,6 +20,7 @@ import UDropdownBadgeConfig from "./ui.dropdown-badge/config";
 import UDropdownButtonConfig from "./ui.dropdown-button/config";
 import UDropdownLinkConfig from "./ui.dropdown-link/config";
 import UAccordionConfig from "./ui.container-accordion/config";
+import UAccordionItemConfig from "./ui.container-accordion-item/config";
 import UCardConfig from "./ui.container-card/config";
 import UColConfig from "./ui.container-col/config";
 import UDividerConfig from "./ui.container-divider/config";
@@ -252,6 +253,7 @@ export interface Components {
   UDropdownLink: Partial<typeof UDropdownLinkConfig>;
   UListbox: Partial<typeof UListboxConfig>;
   UAccordion: Partial<typeof UAccordionConfig>;
+  UAccordionItem: Partial<typeof UAccordionItemConfig>;
   UCard: Partial<typeof UCardConfig>;
   UCol: Partial<typeof UColConfig>;
   UDivider: Partial<typeof UDividerConfig>;

package/ui.container-accordion/UAccordion.vue

@@ -1,119 +1,114 @@
 <script setup lang="ts">
-import { computed, ref, useId, useSlots, useTemplateRef } from "vue";
+import { computed, provide, useTemplateRef, ref, watch } from "vue";
 
 import useUI from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
-import { hasSlotContent } from "../utils/helper";
 
-import UIcon from "../ui.image-icon/UIcon.vue";
-import UDivider from "../ui.container-divider/UDivider.vue";
+import UAccordionItem from "../ui.container-accordion-item/UAccordionItem.vue";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, SetAccordionSelectedItem } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: undefined,
+  options: () => [],
 });
 
 const emit = defineEmits([
   /**
-   * Triggers when the accordion item is toggled.
-   * @property {string} elementId
-   * @property {boolean} isOpened
+   * Triggers when the value attribute changes.
+   * @property {string} value
    */
-  "click",
+  "update:modelValue",
 ]);
 
-const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
-const contentRef = useTemplateRef<HTMLDivElement>("content");
+const accordionRef = useTemplateRef<HTMLDivElement>("accordion");
 
-const isOpened = ref(false);
+const internalValue = ref<string | string[] | null>(props.multiple ? [] : null);
 
-const slots = useSlots();
-const elementId = props.id || useId();
+const isControlled = computed(() => props.modelValue !== undefined);
 
-const toggleIconName = computed(() => {
-  if (typeof props.toggleIcon === "string") {
-    return props.toggleIcon;
-  }
+const selectedItem = computed({
+  get: () => (isControlled.value ? props.modelValue! : internalValue.value),
+  set: (value) => {
+    if (!isControlled.value) internalValue.value = value;
 
-  return props.toggleIcon ? config.value.defaults.toggleIcon : "";
+    emit("update:modelValue", value);
+  },
 });
 
-function onClickItem(event: MouseEvent) {
-  if (contentRef.value && contentRef.value.contains(event.target as Node)) {
+provide<SetAccordionSelectedItem>("setAccordionSelectedItem", (value, opened) => {
+  if (props.multiple) {
+    let current: string[] = [];
+
+    if (selectedItem.value) {
+      current = Array.isArray(selectedItem.value) ? [...selectedItem.value] : [selectedItem.value];
+    }
+
+    if (opened && !current.includes(value)) {
+      current.push(value);
+    } else {
+      const index = current.indexOf(value);
+
+      if (index !== -1) {
+        current.splice(index, 1);
+      }
+    }
+
+    selectedItem.value = current;
+
     return;
   }
 
-  isOpened.value = !isOpened.value;
+  selectedItem.value = opened ? value : null;
+});
+
+provide("getAccordionSelectedItem", () => selectedItem.value ?? null);
+provide("getAccordionSize", () => props.size);
+provide("getAccordionDisabled", () => props.disabled);
 
-  emit("click", elementId, isOpened.value);
-}
+watch(
+  () => props.multiple,
+  (isMultiple) => {
+    if (!isControlled.value) {
+      internalValue.value = isMultiple ? [] : null;
+    }
+  },
+);
 
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
    * @property {HTMLDivElement}
    */
-  wrapperRef,
+  accordionRef,
 });
 
-const mutatedProps = computed(() => ({
-  /* component state, not a props */
-  opened: isOpened.value,
-}));
-
-const {
-  getDataTest,
-  config,
-  wrapperAttrs,
-  descriptionAttrs,
-  bodyAttrs,
-  titleAttrs,
-  contentAttrs,
-  toggleIconAttrs,
-  accordionDividerAttrs,
-} = useUI<Config>(defaultConfig, mutatedProps);
+const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaultConfig);
 </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}`"
-        v-bind="descriptionAttrs"
-        v-text="description"
+  <div ref="accordion" v-bind="accordionAttrs" :data-test="getDataTest()">
+    <!-- @slot Use it to add UAccordionItem directly. -->
+    <slot>
+      <UAccordionItem
+        v-for="(option, index) in options"
+        :key="index"
+        :model-value="selectedItem"
+        :value="option.value"
+        :opened="option.opened"
+        :title="option.title"
+        :description="option.description"
+        :size="size"
+        :disabled="disabled"
+        v-bind="accordionItemAttrs"
+        :data-test="getDataTest(`item-${index}`)"
       />
-
-      <div v-if="isOpened && hasSlotContent(slots['default'])" ref="content" v-bind="contentAttrs">
-        <!-- @slot Use it to add accordion content. -->
-        <slot />
-      </div>
-    </div>
-
-    <UDivider v-bind="accordionDividerAttrs" />
+    </slot>
   </div>
 </template>

package/ui.container-accordion/config.ts

@@ -1,51 +1,9 @@
 export default /*tw*/ {
-  wrapper: "group cursor-pointer",
-  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",
-    variants: {
-      size: {
-        sm: "text-tiny",
-        md: "text-small",
-        lg: "text-medium",
-      },
-      opened: {
-        true: "pt-2 h-fit opacity-100",
-      },
-    },
-  },
-  content: "pt-3 cursor-default",
-  toggleIcon: {
-    base: "{UIcon} transition duration-300",
-    variants: {
-      opened: {
-        true: "group-[*]:rotate-180",
-      },
-    },
-  },
-  accordionDivider: {
-    base: "{UDivider} group-last:hidden",
-    variants: {
-      size: {
-        sm: "py-4",
-        md: "py-5",
-        lg: "py-6",
-      },
-    },
-  },
+  accordion: "flex flex-col w-full divide-y divide-muted",
+  accordionItem: "{UAccordionItem} py-5 first:pt-0 last:pb-0",
   defaults: {
     size: "md",
-    /* icons */
-    toggleIcon: "keyboard_arrow_down",
+    disabled: false,
+    multiple: false,
   },
 };

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

@@ -20,18 +20,41 @@ import type { Props } from "../types";
 interface UAccordionArgs extends Props {
   slotTemplate?: string;
   enum: "size";
+  class?: string;
 }
 
 export default {
-  id: "5050",
+  id: "5040",
   title: "Containers / Accordion",
   component: UAccordion,
   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.`,
-    ),
+    modelValue: "2",
+    options: [
+      {
+        value: "1",
+        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.
+        `),
+      },
+      {
+        value: "2",
+        title: "Pioneering Cutting-Edge Solutions",
+        description:
+          trimText(`Our team stays ahead of the curve, integrating the latest technologies
+          and best practices to drive innovation and create future-ready applications for your business.
+          `),
+      },
+      {
+        value: "3",
+        title: "Building Together for Long-Term Success",
+        description:
+          trimText(`We work closely with you to understand your goals, ensuring seamless communication
+          and a collaborative approach that leads to sustainable, impactful results.
+          `),
+      },
+    ],
   },
   argTypes: {
     ...getArgTypes(UAccordion.__name),
@@ -47,104 +70,42 @@ const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
   components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
-    <UAccordion v-bind="args">
-      ${args.slotTemplate || getSlotsFragment("")}
-    </UAccordion>
-  `,
-});
-
-const AccordionsTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, UButton },
-  setup() {
-    const slots = getSlotNames(UAccordion.__name);
-
-    const accordions = [
-      {
-        title: "Committed to Quality and Performance",
-        description: `
-          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.
-        `,
-      },
-      {
-        title: "Pioneering Cutting-Edge Solutions",
-        description: `
-          Our team stays ahead of the curve, integrating the latest technologies and best practices
-          to drive innovation and create future-ready applications for your business.
-        `,
-      },
-      {
-        title: "Building Together for Long-Term Success",
-        description: `
-          We work closely with you to understand your goals, ensuring seamless communication
-          and a collaborative approach that leads to sustainable, impactful results.
-        `,
-      },
-    ];
-
-    return { args, slots, accordions };
-  },
-  template: `
-    <UAccordion
-      v-for="(accordion, index) in accordions"
-      :key="index"
-      v-bind="accordion"
-    >
+    <UAccordion v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
     </UAccordion>
   `,
 });
 
 const EnumTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs, { argTypes }) => ({
-  components: { UAccordion },
+  components: { UAccordion, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UAccordion
-      v-for="option in argTypes?.[args.enum]?.options"
-      v-bind="getArgs(args, option)"
-      :key="option"
-    />
+    <UCol gap="xl" block>
+      <UAccordion
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        v-model="args.modelValue"
+        :key="option"
+      />
+    </UCol>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Accordions = AccordionsTemplate.bind({});
-Accordions.args = {};
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: 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>
-  `,
+Sizes.args = {
+  enum: "size",
+  class: "w-full",
+  options: [
+    {
+      value: "1",
+      title: "Committed to Quality and Performance",
+      description: "{enumValue}",
+    },
+  ],
 };