@mekari/mekari-ui-vue/src/components/FormSelect/stories/FormSelect.stories.mdx

--- 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 { Meta, Story, Canvas, ArgsTable, Anchor } from '@storybook/addon-docs/blocks';
import FormSelectIntroduction from './content/FormSelectIntroduction.mdx';

import argTypesDefault from './config';

import { BFormSelect as MFormSelect } from 'bootstrap-vue';
import { BFormSelectOption as MFormSelectOption } from 'bootstrap-vue';
import { BFormSelectOptionGroup as MFormSelectOptionGroup } from 'bootstrap-vue';

<Meta title="Form Select" component={MFormSelect} />

export const Template = (args) => ({
  props: Object.keys(argTypesDefault),
  components: { MFormSelect },
  data() {
    return {
      selected: null
    }
  },
  template: `
    <m-form-select
      v-model="selected"
      :ariaInvalid="ariaInvalid"
      :autofocus="autofocus"
      :disabled="disabled"
      :disabled-field="disabledField"
      :form="form"
      :html-field="htmlField"
      :id="id"
      :label-field="labelField"
      :multiple="multiple"
      :name="name"
      :options="options"
      :options-field="optionsField"
      :plain="plain"
      :required="required"
      :select-size="selectSize"
      :size="size"
      :state="state"
      :text-field="textField"
      :value-field="valueField"
    />
  `
});

# Form Select

<FormSelectIntroduction />

<Anchor storyId="form-select--default-story"></Anchor>

## Default

<Canvas>
  <Story
    name="Default"
    argTypes={{ ...argTypesDefault }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />