@mekari/mekari-ui-vue/src/components/FormGroup/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-form.css';

export const argTypesDefault = {
  // Props
  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',
  },
  contentCols: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the content width `xs` screens and up',
  },
  contentColsLg: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the content width `lg` screens and up',
  },
  contentColsMd: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the content width `md` screens and up',
  },
  contentColsSm: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the content width `sm` screens and up',
  },
  contentColsXl: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the content width `xl` screens and up',
  },
  description: {
    description: 'Text to place in the help text area of the form group',
  },
  disabled: {
    description: 'Disabled the fieldset element, which in turn disables the form controls (on browsers that support disabled fieldsets). Has no effect if `label-for` is set',
  },
  feedbackAriaLive: {
    description: 'Value to use for the `aria-live` attribute on the feedback text',
  },
  invalidFeedback: {
    description: 'Text to show when the form group has an invalid state',
  },
  label: {
    description: 'Text to place in the label/legend of the form group',
  },
  labelAlign: {
    description: 'Text alignment `left`, `center`, `right` for the label `xs` screens and up',
  },
  labelAlignLg: {
    description: 'Text alignment `left`, `center`, `right` for the label `lg` screens and up',
  },
  labelAlignMd: {
    description: 'Text alignment `left`, `center`, `right` for the label `md` screens and up',
  },
  labelAlignSm: {
    description: 'Text alignment `left`, `center`, `right` for the label `sm` screens and up',
  },
  labelAlignXl: {
    description: 'Text alignment `left`, `center`, `right` for the label `xl` screens and up',
  },
  labelClass: {
    control: {
      type: 'object',
    },
    description: 'CSS class (or classes) to add to the label/legend element',
  },
  labelCols: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the label width `xs` screens and up',
  },
  labelColsLg: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the label width `lg` screens and up',
  },
  labelColsMd: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the label width `md` screens and up',
  },
  labelColsSm: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the label width `sm` screens and up',
  },
  labelColsXl: {
    control: {
      type: 'number',
    },
    description: 'Number of columns for the label width `xl` screens and up',
  },
  labelFor: {
    description: 'Set to the ID of the singular form control in the form group. Do not set a value if there is more than one form control in the group',
  },
  labelSize: {
    control: {
      type: 'select',
      options: ['sm', 'md', 'lg'],
    },
    description: 'Sets the text size of the label: `sm`, `md` (default) or `lg`. Use this prop to have the label size match the form control size',
  },
  labelSrOnly: {
    description: 'Visually hides the label content, but makes it available to screen reader users',
  },
  state: {
    description: 'Controls the validation state of the feedback. `true` force shows valid-feedback, `false` force shows invalid feedback, `null` does not force show the feedback',
  },
  tooltip: {
    description: 'Renders the feedback text in a rudimentary tooltip style',
  },
  validFeedback: {
    description: 'Text to show when the form group has a valid state',
  },
  validated: {
    description: 'When set, adds the Bootstrap validation trigger class `was-validated` on the component',
  },
  maxInputLength: {
    description: 'When set, it will limit the input of the length of input used inside form group',
  },
};

const codeDefault = `
data() {
  return {
    defaultModel: ''
  }
},
template: \`
  <m-form-group
    :max-input-length="maxInputLength"
  >
    <template v-slot="{ setInputLength, inputRemaining, limitInput }">
      <m-form-group-counter-label :label="inputRemaining" />
      <m-label>Label</m-label>
      <m-form-input
        ref="inputCounter"
        v-model="defaultModel"
        @input="setInputLength($event)"
        :formatter="limitInput"
      />
      <small>Caption</small>
    </template>
  </m-form-group>
\`,
mounted() {
  this.$refs.inputCounter.$emit('input', this.defaultModel);
}
`;

export const parametersDefault = {
  docs: { source: { code: codeDefault } },
};