@mozaic-ds/vue/src/components/actionlistbox/MActionListbox.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';

import MActionListbox from './MActionListbox.vue';
import MButton from '../button/MButton.vue';
import {
  Copy20,
  ArrowTopRight20,
  Download20,
  Trash20,
} from '@mozaic-ds/icons-vue';

const meta: Meta<typeof MActionListbox> = {
  title: 'Overlay/Action Listbox',
  component: MActionListbox,
  parameters: {
    layout: 'centered',
    docs: {
      story: { height: '700px' },
      description: {
        component:
          'An action list is a contextual menu that presents a list of available actions related to a specific element or interface area. It allows users to quickly access functions such as editing, sharing, deleting, or navigating to sub-actions. Action Lists are commonly triggered by buttons, icons (e.g., three-dot menus), or right-click interactions, ensuring a clean and efficient UI.',
      },
      source: {
        code: `
        <template>
          <MActionListbox
            :items="[
              { id: 'item-1', label: 'Duplicate', icon: Copy20, disabled: true },
              { id: 'item-2', label: 'Move to...', icon: ArrowTopRight20 },
              { id: 'item-3', label: 'Download', icon: Download20 },
              { id: 'item-4', label: 'Delete', icon: Trash20, appearance: 'danger', divider: true }
            ]"
            title="Listbox title (optional)"
          />
        </template>
      `,
      },
    },
  },
  args: {
    title: 'Listbox title (optional)',
    items: [
      {
        id: 'item-1',
        label: 'Duplicate',
        icon: Copy20,
        disabled: true,
      },
      {
        id: 'item-2',
        label: 'Move to...',
        icon: ArrowTopRight20,
      },
      {
        id: 'item-3',
        label: 'Download',
        icon: Download20,
      },
      {
        id: 'item-4',
        label: 'Delete',
        icon: Trash20,
        appearance: 'danger',
        divider: true,
      },
    ],
  },
  render: (args) => ({
    components: { MActionListbox },
    setup() {
      const handleAction = action('action');
      return { args, handleAction };
    },
    template: `
        <MActionListbox v-bind="args" @action="handleAction" />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MActionListbox>;

export const Default: Story = {};

export const Activator: Story = {
  render: (args) => ({
    components: { MActionListbox, MButton },
    setup() {
      const handleAction = action('action');
      return { args, handleAction };
    },
    template: `
      <div>
        <MActionListbox v-bind="args" @action="handleAction">
          <template #activator="{id}">
            <MButton :popovertarget="id">Activator</MButton>
          </template>
        </MActionListbox>
      </div>
    `,
  }),
};