@mozaic-ds/vue/src/components/textinput/MTextInput.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 MTextInput from './MTextInput.vue';
import Search24 from '@mozaic-ds/icons-vue/src/components/Search24/Search24.vue';

const meta: Meta<typeof MTextInput> = {
  title: 'Form Elements/TextInput',
  component: MTextInput,
  parameters: {
    docs: {
      description: {
        component:
          'A text input is a single-line input that allows users to enter and edit short text-based content. It is commonly used for names, email addresses, search queries, and form entries. Text Inputs often include placeholders, validation rules, and assistive text to guide users and ensure accurate data entry.<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#input).',
      },
    },
  },
  args: {
    id: 'textInputId',
    placeholder: 'Placeholder',
  },
  render: (args) => ({
    components: { MTextInput, Search24 },
    setup() {
      const handleUpdate = action('update:modelValue');

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

export const WithValue: Story = {
  args: {
    id: 'withValueId',
    modelValue: 'Value of the input component',
    isClearable: true,
  },
};

export const Default: Story = {};

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

export const WithIcon: Story = {
  args: {
    id: 'withIconId',
    icon: `
      <template v-slot:icon>
        <Search24/>
      </template>
    `,
  },
  render: (args) => ({
    components: { MTextInput, Search24 },
    setup() {
      return { args };
    },
    template: `
      <MTextInput v-bind="args">
        ${args.icon}
      </MTextInput>
    `,
  }),
};

export const minValue: Story = {
  args: {
    id: 'minValueId',
    inputType: 'number',
    modelValue: '4',
    min: '3',
  },
};

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