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

const meta: Meta<typeof MQuantitySelector> = {
  title: 'Form Elements/Quantity Selector',
  component: MQuantitySelector,
  parameters: {
    docs: {
      description: {
        component:
          'A quantity selector is an input component that allows users to increment or decrement a numeric value, typically using plus (+) and minus (−) buttons. It provides a simple and efficient way to adjust quantities without manual typing, ensuring controlled input. This component is commonly used in e-commerce, inventory management, and settings where users need to specify amounts.',
      },
    },
  },
  args: {
    id: 'quantitySelectorId',
    modelValue: 10,
    min: 5,
    max: 20,
  },
  argTypes: {
    size: {
      control: 'radio',
      options: ['s', 'm'],
    },
  },
  render: (args) => ({
    components: { MQuantitySelector },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const Default: Story = {};

export const Step: Story = {
  args: {
    id: 'stepId',
    step: 5,
  },
};

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

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

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

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

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