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

const meta: Meta<typeof MSelect> = {
  title: 'Form Elements/Select',
  component: MSelect,
  parameters: {
    docs: {
      description: {
        component:
          'A select component allows users to choose a single option from a predefined list within a native dropdown menu. It helps simplify input by displaying only relevant choices, reducing the need for manual text entry. Select components are commonly used in forms, settings, and filters where structured selection is required.<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 section](/docs/form-elements-field--docs#select).',
      },
    },
  },
  argTypes: {
    ariaLabel: {
      table: {
        disable: true,
      },
    },
  },
  args: {
    id: 'selectId',
    placeholder: 'Choose an option',
    options: [
      {
        text: 'Option 1',
        value: 'option1',
      },
      {
        text: 'Option 2',
        value: 'option2',
        disabled: true,
      },
      {
        text: 'Option 3',
        value: 'option3',
      },
      {
        text: 'Option 4',
        value: 'option4',
      },
    ],
    ariaLabel: 'Choose an option',
  },
  render: (args) => ({
    components: { MSelect },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const WithValue: Story = {
  args: {
    id: 'withValueId',
    modelValue: 'option1',
  },
};

export const Default: Story = {};

export const Small: Story = {
  args: {
    id: 'smallId',
    size: 's',
  },
};

export const Disabled: Story = {
  args: {
    id: 'disabledId',
    disabled: true,
  },
};

export const ReadOnly: Story = {
  args: {
    id: 'readonlyId',
    readonly: true,
  },
};

export const Invalid: Story = {
  args: {
    id: 'invalidId',
    isInvalid: true,
  },
};