MagicAccordion

MagicAccordion is a collection of components intended for building vertically stacked headlines where each reveals related content.

View source View as Markdown

DefaultDemo.vue

<template>
  <magic-accordion-provider id="magic-accordion-demo" class="w-full">
    <demo-list
      v-for="item in footer"
      :key="item.label"
      :headline="item.label"
      :list="<DemoListProps['list']>item.list"
    />
  </magic-accordion-provider>
</template>

<script lang="ts" setup>
import DemoList from './components/DemoList.vue'
import { footer } from './data/footer.json'

import type { DemoListProps } from './components/DemoList.vue'
</script>

Anatomy

<template>
  <magic-accordion-provider id="your-accordion-id">
    <magic-accordion-view>
      <magic-accordion-trigger>
        <!-- your content -->
      </magic-accordion-trigger>
      <magic-accordion-content>
        <!-- your content -->
      </magic-accordion-content>
    </magic-accordion-view>
  </magic-accordion-provider>
</template>

<script setup>
const { selectView } = useMagicAccordion('your-accordion-id')
</script>

Installation

CLI

Add @maas/vue-equipment to your dependencies.

pnpm add @maas/vue-equipment

Vue

If you are using Vue, import and add MagicAccordionPlugin to your app.

import { createApp } from 'vue'
import { MagicAccordionPlugin } from '@maas/vue-equipment/plugins/MagicAccordion'

const app = createApp({})

app.use(MagicAccordionPlugin)

Nuxt

The accordion is available as a Nuxt module. In your Nuxt config file add @maas/vue-equipment/nuxt to your modules and add MagicAccordion to the plugins in your configuration.

export default defineNuxtConfig({
  modules: ['@maas/vue-equipment/nuxt'],
  vueEquipment: {
    plugins: ['MagicAccordion'],
  },
})

Composable

In order to interact with the accordion from anywhere within your app, we provide a useMagicAccordion composable. Import it directly when needed.

import { useMagicAccordion } from '@maas/vue-equipment/plugins/MagicAccordion'

const { selectView } = useMagicAccordion('your-accordion-id')

function handleClick() {
  selectView('your-view-id')
}

Peer Dependencies

MagicAccordion relies on the following optional peer dependencies in addition to the core peer dependencies. Package managers don’t install optional peer dependencies automatically, so add them to your project.

Package
`@maas/vue-autosize`

Installation

pnpm add @maas/vue-autosize

API Reference

MagicAccordionProvider

The MagicAccordionProvider wraps the accordion and configures all child components according to the provided options.

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`true`
`asChild`	`boolean`	`false`
`options`	`MagicAccordionOptions`	`false`

Options

To customize the accordion, override the necessary options. Any custom options will be merged with the default options.

Option	Type	Default
`mode`	`AccordionMode`	`single`
`transition`	`string`	`string`
`animation.duration`	`number`	`200`
`animation.easing`	`function`	`easeOutQuad`
`disabled`	`boolean`	`false`

MagicAccordionView

Wraps a single accordion entry and manages its open/closed state.

Props

Prop	Type	Required
`id`	`MaybeRef<string>`	`false`
`asChild`	`boolean`	`false`
`active`	`boolean`	`false`

Slot Props

Prop	Type	Description
`view-active`	`boolean`	Whether the accordion view is currently open.

MagicAccordionContent

The expandable content area of an accordion view.

Props

Prop	Type	Required
`asChild`	`boolean`	`false`
`transition`	`string`	`false`
`animation.duration`	`number`	`false`
`animation.easing`	`function`	`false`

CSS Variables

Variable	Default
`--magic-accordion-content-clip-path`	`inset(0)`

Slot Props

Prop	Type	Description
`view-active`	`boolean`	Whether the accordion view is currently open.

MagicAccordionTrigger

Opens or closes the parent accordion view on click.

Props

Prop	Type	Required
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`trigger`	`Interaction[]`	`false`

CSS Variables

Variable	Default
`--magic-accordion-trigger-cursor-disabled`	`not-allowed`

Slot Props

Prop	Type	Description
`view-active`	`boolean`	Whether the accordion view is currently open.

Errors

Source	Error Code	Message
`MagicAccordionContent`	`missing_instance_id`	MagicAccordionContent must be nested inside MagicAccordionProvider
`MagicAccordionContent`	`missing_view_id`	MagicAccordionContent must be nested inside MagicAccordionView
`MagicAccordionTrigger`	`missing_instance_id`	MagicAccordionTrigger must be nested inside MagicAccordionProvider
`MagicAccordionTrigger`	`missing_view_id`	MagicAccordionTrigger must be nested inside MagicAccordionView or a viewId must be provided
`MagicAccordionView`	`missing_instance_id`	MagicAccordionView must be nested inside MagicAccordionProvider