VAccordionItem

The VAccordionItem component is a flexible, customizable component that can be used as an individual collapsible element or as a part of a group of collapsible elements within a VAccordion component. It can work independently or as a child of the VAccordion component, providing smooth collapse and expand effects along with a simple and intuitive API.

Usage

The VAccordionItem component can be used with or without the VAccordion component. Below is an example of how to use the VAccordionItem component independently.

<template>
  <div class="flex flex-col">
    <VCollapseItem v-model="expanded" header="Click here to see my home">
      Welcome to my home, this is where I live all year round. It's not very big, and I see the light of day or night when you click on my header :)
    </VCollapseItem>
  </div>
</template>
<script setup>
const expanded = ref(false)
</script>

Props

Customization

VAccordionItem component is highly customizable using the AccordionItemConfig configuration interface. You can create custom presets to modify various aspects of the component, such as header, button, content, and icon styles.

export interface AccordionItemConfig extends DefaultConfig {
  header: {
    class?: MethodOrStringType,
    sizes?: MethodOrObject, // Contain all sizes key / value
    size?: MethodOrStringType,
    button: {
      class: MethodOrStringType,
      sizes?: MethodOrObject, // Contain all sizes key / value
      size?: MethodOrStringType,
      icon?: {
        icon?: IconType
        class: MethodOrStringType,
        sizes?: MethodOrObject,
        size?: MethodOrStringType,
      },
      content: { // Header content
        class: MethodOrStringType,
        sizes?: MethodOrObject,
        size?: MethodOrStringType,
      }
    }
  },
  content?: {
    wrapper?: MethodOrStringType, // Wrapper of content element
    class?: MethodOrStringType
  }
}

Here's an example of a custom preset created for VAccordionItem:

const config = {
  header: {
    button: {
      class: 'flex items-center justify-between w-full rounded-none border-b border-gray-200',
      sizes: {
        [SizeEnum.sm]: 'px-2 py-2',
        [SizeEnum.md]: 'px-2 py-2',
        [SizeEnum.lg]: 'px-2 py-2',
        [SizeEnum.xl]: 'px-2.5 py-2.5'
      },
      content: {
        class: 'font-medium grow text-left',
        sizes: {
          [SizeEnum.sm]: 'text-sm',
          [SizeEnum.md]: '',
          [SizeEnum.lg]: 'text-xl',
          [SizeEnum.xl]: 'text-2xl'
        },
      },
      icon: {
        class: ({ opened }) => {
          const classes = 'transition transform duration-500 ease-in-out'
          return opened.value ? `rotate-180 ${classes} text-blue-600 hover:text-blue-700` : `text-gray-300 hover:text-gray-400 ${classes}`
        },
        icon: 'heroicons-solid:chevron-down',
        sizes: {
          [SizeEnum.sm]: '1.25rem',
          [SizeEnum.md]: '1.5rem',
          [SizeEnum.lg]: '1.75rem',
          [SizeEnum.xl]: '1.75rem'
        },
      }
    },
  },
  content: {
    class: 'p-2'
  }
} as AccordionItemConfig;

In this example, the header, button, content, and icon properties are defined with custom classes and sizes based on the SizeEnum. The icon property also has a custom class that depends on the opened state of the VAccordionItem, allowing it to change its appearance based on whether the item is expanded or collapsed.

By using custom presets like this, you can easily modify the appearance and behavior of the VAccordionItem component to suit your specific design requirements.

Custom Slots

The VAccordionItem component provides several custom slots that allow you to further customize its appearance and functionality. These slots enable you to override the default content and replace it with your custom content.

Here are the available custom slots:

Header

The header slot allows you to completely override the default header section of the VAccordionItem. You can provide your custom header content and styling.

<template>
  <VAccordionItem v-model="expanded">
    <template #header="{ toggle }">
      <div @click="toggle" class="custom-header">
        Custom Header Content
      </div>
    </template>
    <!-- ... -->
  </VAccordionItem>
</template>

Header Content

The header-content slot allows you to customize the content of the header without overriding the entire header structure. This slot is useful when you want to change the text or add additional elements to the header.

<template>
  <VAccordionItem v-model="expanded">
    <template #header-content>
      Custom Header Content
    </template>
    <!-- ... -->
  </VAccordionItem>
</template>

Icon

The icon slot allows you to replace the default icon used in the VAccordionItem header. You can provide your custom icon component or an SVG icon.

<template>
  <VAccordionItem v-model="expanded" header="Click here to see my home">
    <template #icon>
      <MyCustomIcon />
    </template>
    <!-- ... -->
  </VAccordionItem>
</template>

By utilizing these custom slots, you can easily customize the appearance and behavior of the VAccordionItem component, making it even more versatile and adaptable to your project's requirements.

Accessibility

The VAccordionItem component has been designed with accessibility in mind, ensuring that it is usable by as many people as possible, including those with disabilities. Here are some accessibility features included in the VAccordionItem:

• The aria-expanded attribute is set on the header button, indicating the current state of the accordion item (expanded or collapsed) to screen reader users.
• The aria-controls attribute is set on the header button, linking it to the content area of the accordion item, providing context for screen reader users.
• The aria-labelledby attribute is set on the content area of the accordion item, linking it back to the header button, making it easier for screen reader users to understand the relationship between the header and the content.

The header button has a focusable tabindex attribute, ensuring that keyboard users can navigate to and interact with the accordion item. By implementing these accessibility features, the VAccordionItem component ensures that your content is accessible to a wider range of users, promoting an inclusive user experience.