@mekari/mekari-ui-vue/src/components/FormTextarea/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/components/mekari-ui-icons.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-button.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-form.css';

export const argTypesDefault = {
  // Props
  ariaInvalid: {
    description: 'Sets the `aria-invalid` attribute with the specified value',
  },
  autocomplete: {
    description: 'Sets the `autocomplete` attribute value on the form control',
  },
  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',
  },
  debounce: {
    control: {
      type: 'number',
    },
    description: 'When set to a number of milliseconds greater than zero, will debounce the user input. Has no effect if prop `lazy` is set',
  },
  disabled: {
    description: 'When set to `true`, disables the component\'s functionality and places it in a disabled state',
  },
  form: {
    description: 'ID of the form that the form control belongs to. Sets the `form` attribute on the control',
  },
  formatter: {
    description: 'Reference to a function for formatting the textarea',
  },
  id: {
    description: 'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
  },
  lazy: {
    description: 'When set, updates the v-model on `change`/`blur` events instead of `input`. Emulates the Vue `.lazy` v-model modifier',
  },
  lazyFormatter: {
    description: 'When set, the textarea is formatted on blur instead of each keystroke (if there is a formatter specified)',
  },
  maxRows: {
    control: {
      type: 'number',
    },
    description: 'The maximum number of rows to show. When provided, the textarea will grow (or shrink) to fit the content up to maximum rows',
  },
  name: {
    description: 'Sets the value of the `name` attribute on the form control',
  },
  noAutoShrink: {
    description: 'When set, prevents the auto height textarea from shrinking to fit the content',
  },
  noResize: {
    description: 'When set, disabled the browser\'s resize handle which prevents the user from changing the height of the textarea. Automatically set when in auto height mode',
  },
  number: {
    description: 'When set attempts to convert the input value to a native number. Emulates the Vue `.number` v-model modifier',
  },
  placeholder: {
    description: 'Sets the `placeholder` attribute value on the form control',
  },
  plaintext: {
    description: 'Set the form control as readonly and renders the control to look like plain text (no borders)',
  },
  readonly: {
    description: 'Sets the `readonly` attribute on the form control',
  },
  required: {
    description: 'Adds the `required` attribute to the form control',
  },
  rows: {
    control: {
      type: 'number',
    },
    description: 'The minimum number of rows to display. Must be a value greater than 1',
  },
  size: {
    control: {
      type: 'select',
      options: ['sm', 'md', 'lg'],
    },
    description: 'Set the size of the component\'s appearance. `sm`, `md` (default), or `lg`',
  },
  state: {
    description: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
  },
  trim: {
    description: 'When set, trims any leading and trailing white space from the input value. Emulates the Vue `.trim` v-model modifier',
  },
  value: {
    description: 'The current value of the textarea. Result will always be a string, except when the `number` prop is used',
  },
  wrap: {
    description: 'The value to place on the textarea\'s `wrap` attribute. Controls how line break are returned',
  },
  // 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',
  },
  change: {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Change event triggered by user interaction. Emitted after any formatting (not including `trim` or `number` props) and after the v-model is updated.',
  },
  update: {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Emitted to update the v-model',
  },
};

const codeDefault = (type = 'text') => `<m-form-textarea type="${type}">`;

export const parametersDefault = type => ({
  docs: { source: { code: codeDefault(type) } },
});