@mekari/mekari-ui-vue/src/components/FormInput/stories/config/index.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

import '@/.storybook/story-config';
import '@mekari/mekari-ui-toolkit/dist/css/full-bundle/mekari-ui.css';

const argTypesDefault = {
  // Props
  value: {
    description: 'Sets the value of the input.',
  },
  id: {
    description: 'Sets the id of the input.',
  },
  name: {
    description: 'Sets the name of the input.',
  },
  form: {
    description: 'Sets the id of the form of the input.',
  },
  disabled: {
    description: 'Sets the `disabled` attribute of the input.',
  },
  required: {
    description: 'Sets the `required` attribute of the input',
  },
  type: {
    control: {
      type: 'select',
      options: [
        'text',
        'number',
        'email',
        'password',
        'search',
        'url',
        'tel',
        'date',
        'time',
        'range',
        'color',
      ],
    },
    description: 'Set the type of the input.',
  },
  size: {
    control: {
      type: 'select',
      options: ['sm', 'md', 'lg'],
    },
    description: 'Set the sizez of the input.',
  },
  autofocus: {
    description: 'When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control',
  },
  autocomplete: {
    description: 'Sets the `autocomplete` attribute value on the form control',
  },
  state: {
    description: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
  },
  ariaInvalid: {
    description: 'Sets the `aria-invalid` attribute with the specified value',
  },
  trim: {
    description: 'When set, trims any leading and trailing white space from the input value. However, in current version of Mekari UI Vue, it is needed to implement `.trim` on v-model modifier. Will be fixed soon.',
  },
  placeholder: {
    description: 'Sets the `placeholder` attribute value on the form control',
  },
  lazyFormatter: {
    description: 'When set, the input is formatted on blur instead of each keystroke (if there is a formatter specified)',
  },
  formatter: {
    description: 'Reference to a function for formatting the input',
  },
  readonly: {
    description: 'Sets the `readonly` attribute on the form control',
  },
  plaintext: {
    description: 'Set the form control as readonly and renders the control to look like plain text (no borders)',
  },
  number: {
    description: 'However, in current version of Mekari UI Vue, it is needed to implement `.number` on v-model modifier. Will be fixed soon.',
  },
  lazy: {
    description: 'When set, updates the v-model on `change`/`blur` events instead of `input`. Emulates the Vue `.lazy` v-model modifier',
  },
  debounce: {
    description: 'When set to a number of milliseconds greater than zero, will debounce the user input. Has no effect if prop `lazy` is set',
  },
  noWheel: {
    description: 'For number-like inputs, disables the mouse wheel from incrementing or decrementing the value',
  },
  min: {
    description: 'Value to set in the `min` attribute on the input. Used by number-like inputs',
  },
  max: {
    description: 'Value to set in the `max` attribute on the input. Used by number-like inputs',
  },
  step: {
    description: 'Value to set in the `step` attribute on the input. Used by number-like inputs',
  },
  list: {
    description: 'The ID of the associated datalist element or component',
  },
  hasPrefixIcon: {
    description: 'FormInputWithIconContainer must be a wrapper to FormInput component to make this prop has effect. Input can have prefix icon. To enable it, just use `true` on this prop.',
  },
  hasSuffixIcon: {
    description: 'FormInputWithIconContainer must be a wrapper to FormInput component to make this prop has effect. Input can have suffix icon. To enable it, just use `true` on this prop.',
  },
  hasDoubleSuffixIcon: {
    description: 'FormInputWithIconContainer must be a wrapper to FormInput component to make this prop has effect. Input can have two suffix icon. To enable it, just use `true` on this prop. Remember also to set `hasIconSuffix` to `true` to make it possible.',
  },
  clickableReadonly: {
    description: 'Sets the input styling to be just like a clickable input even though the `readonly` prop is `true`.',
  },
  // Events
  input: {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Input event triggered by user interaction. Emitted after any formatting (not including `trim` or `number` props) and after the v-model is updated',
  },
};

export default argTypesDefault;