@mekari/mekari-ui-vue/src/components/FormInput/stories/content/FormInputTemplate.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 argTypesDefault from '../config';

import MFormInput from '../../../FormInput';
import MIcon from '../../../Icon';
import MInputGroup from '../../../InputGroup';

export const Template = args => ({
  props: Object.keys(argTypesDefault),
  components: { MFormInput },
  template: `
    <div>
      <m-form-input
        v-model.number.trim="value"
        :id="id"
        :name="name"
        :form="form"
        :disabled="disabled"
        :required="required"
        :type="type"
        :size="size"
        :autofocus="autofocus"
        :autocomplete="autocomplete"
        :state="state"
        :aria-invalid="ariaInvalid"
        :trim="trim"
        :placeholder="placeholder"
        :lazy-formatter="lazyFormatter"
        :formatter="formatter"
        :readonly="readonly"
        :plaintext="plaintext"
        :number="number"
        :lazy="lazy"
        :debounce="debounce"
        :no-wheel="noWheel"
        :min="min"
        :max="max"
        :step="step"
        :list="list"
        :clickableReadonly="clickableReadonly"
      />
      <p>Value: "{{ value }}"</p>
    </div>
  `,
});

export const TemplateWithIcon = args => ({
  props: Object.keys(argTypesDefault),
  components: { MFormInput,
    MIcon, MInputGroup },
  template: `
    <m-input-group>
      <m-form-input
        :value="value"
        :id="id"
        :name="name"
        :form="form"
        :disabled="disabled"
        :required="required"
        :type="type"
        :size="size"
        :autofocus="autofocus"
        :autocomplete="autocomplete"
        :state="state"
        :aria-invalid="ariaInvalid"
        :trim="trim"
        :placeholder="placeholder"
        :lazy-formatter="lazyFormatter"
        :formatter="formatter"
        :readonly="readonly"
        :plaintext="plaintext"
        :number="number"
        :lazy="lazy"
        :debounce="debounce"
        :no-wheel="noWheel"
        :min="min"
        :max="max"
        :step="step"
        :list="list"
        :has-prefix-icon="true"
        :has-suffix-icon="true"
        :has-double-suffix-icon="true"
      />
      <m-icon
        variant="calendar"
        :is-prefix-icon="true"
      />
      <m-icon
        variant="calendar"
        :is-suffix-icon="true"
      />
      <m-icon
        variant="reset-fill"
        :is-double-suffix-icon="true"
      />
    </m-input-group>
  `,
});