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

const meta: Meta<typeof MDatepicker> = {
  title: 'Form Elements/Datepicker',
  component: MDatepicker,
  parameters: {
    docs: {
      description: {
        component:
          'A date picker is an input component that allows users to select a date from a calendar interface or manually enter a date value. It enhances usability by providing structured date selection, reducing input errors, and ensuring format consistency. Date Pickers are commonly used in forms, booking systems, scheduling tools, and data filtering interfaces to facilitate accurate date entry.',
      },
    },
  },
  args: {
    id: 'datepickerId',
    ariaLabel: 'enter the date',
  },
  render: (args) => ({
    components: { MDatepicker },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const WithValue: Story = {
  args: {
    id: 'withValueId',
    modelValue: '2025-07-22',
    isClearable: true,
  },
};

export const Default: Story = {};

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,
  },
};