@mozaic-ds/vue/src/components/togglegroup/MToggleGroup.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 MToggleGroup from './MToggleGroup.vue';

const meta: Meta<typeof MToggleGroup> = {
  title: 'Form Elements/Toggle Group',
  component: MToggleGroup,
  parameters: {
    docs: {
      description: {
        component:
          'A toggle is a switch component that allows users to enable or disable a setting, representing a binary state such as on/off or active/inactive. It provides a quick and intuitive way to control preferences or system settings. Toggles are commonly used in settings menus, dark mode switches, and feature activations, offering an alternative to checkboxes for immediate visual feedback.<br><br> To put a label, requierement text, help text or to apply a valid or invalid message, the examples are available in the [Field Group section](/docs/form-elements-field-group--docs#toggle-group).',
      },
    },
  },
  args: {
    name: 'toggleGroupName',
    modelValue: ['toggle2'],
    options: [
      {
        id: 'toggle-01',
        label: 'Toggle Label',
        value: 'toggle1',
      },
      {
        id: 'toggle-02',
        label: 'Toggle Label',
        value: 'toggle2',
      },
      {
        id: 'toggle-03',
        label: 'Toggle Label',
        value: 'toggle3',
      },
      {
        id: 'toggle-04',
        label: 'Toggle Label',
        value: 'toggle4',
      },
    ],
  },
  render: (args) => ({
    components: { MToggleGroup },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MToggleGroup 
        v-bind="args"
        @update:modelValue="handleUpdate"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MToggleGroup>;

export const Default: Story = {};