@mekari/mekari-ui-vue/src/components/Dropdown/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 contentDummy from './dummy-content';
import { colorList, iconList } from '@/.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';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-dropdown.css';
import MDropdownPlugin from '@/src/plugins/Dropdown';
import Vue from 'vue';

Vue.use(MDropdownPlugin);

export const buttonColors = [...colorList, 'ghost'];

export const argTypesDefault = {
  // Props
  placement: {
    control: {
      type: 'select',
      options: ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end',
      },
    },
    description: 'Set the placement of dropdown, relatively to the activator element of dropdown.',
  },
  childrenPlacement: {
    control: {
      type: 'select',
      options: ['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-start', 'bottom', 'bottom-end', 'left-start', 'left', 'left-end'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'top-start | top | top-end | right-start | right | right-end | bottom-start | bottom | bottom-end | left-start | left | left-end',
      },
    },
    description: 'Set the placement of dropdown\'s children (if there is any), relatively to the parent element.',
  },
  content: {
    type: 'arrayOfShape',
    table: {
      type: {
        summary: 'array',
        detail: '[{"id": "1", "content": "content of dropdown"}]',
      },
      defaultValue: {
        summary: '[]',
      },
    },
    control: {
      type: 'object',
    },
    defaultValue: [...contentDummy],
    description: 'Set the content inside the dropdown. This props can be blank, and use default slot instead. If default slot is not blank, the props `content` will be ignored.',
  },
  triggerLabel: {
    control: { type: 'text' },
    defaultValue: 'Buttons',
    description: 'Set the default button trigger\'s label.',
  },
  triggerVariant: {
    control: {
      type: 'select',
      options: ['default', 'icon-left', 'icon-right', 'icon-only', 'loading'],
    },
    table: {
      type: {
        summary: 'string',
        detail: '"default" | "icon-left" | "icon-right" | "icon-only" | "loading"',
      },
    },
    description: 'Set the default button trigger\'s variant.',
  },
  triggerIconVariant: {
    control: {
      type: 'select',
      options: [...iconList],
    },
    defaultValue: 'dropdown',
    description: 'Set the default button trigger\'s icon.',
  },
  triggerTheme: {
    control: {
      type: 'select',
      options: [...buttonColors],
    },
    description: 'Set the default button trigger\'s theme.',
  },
  triggerSize: {
    control: {
      type: 'select',
      options: ['sm', 'default', 'lg'],
    },
    defaultValue: 'default',
    description: 'Set the default button trigger\'s size.',
  },
  triggerDisabled: {
    description: 'Set the `disabled` attribute on default trigger button.',
  },
  enableSearch: {
    control: {
      type: 'array',
    },
    defaultValue: [false, true],
    description: 'Enable the search inside dropdown menu. Currently still in WIP',
  },
  heightLimit: {
    control: {
      type: 'select',
      options: ['auto', 'fixed'],
    },
    description: 'Set the height of dropdown menu width. Can be `auto` or `fixed`.',
  },
  width: {
    control: {
      type: 'select',
      options: ['auto', 'inherit', 'max-content', 'md', 'lg'],
    },
    description: 'Set the width of dropdown menu width. Can be `auto`, `inherit`, `max-content`, `md`, `lg`.',
  },
  dropdownDistance: {
    control: {
      type: 'number',
    },
    description: 'Set the distance between dropdown trigger and dropdown menu in pixel.',
  },
  state: {
    description: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
  },
  placeholder: {
    description: 'Sets the `placeholder` attribute value on the search input',
  },
  emptyDropdownText: {
    description: 'Sets the empty message when the item is empty. The item can be empty because of input search too (the value on input search is not found on any item\'s content).',
  },
  enableMultiLevel: {
    description: 'When set as `true`, it can have a multi level dropdown menu.',
  },
  debounce: {
    description: 'Set debounce value on dropdown search. The number stand for the millisecond of debounce\'s duration..',
  },
  // Event
  'selected-dropdown': {
    description: 'After dropdown item trigger an action, the value of dropdown item will be emitted with name `selected-dropdown`. Currently only support emit one item per event.',
  },
  // Slot
  'dropdown-trigger': {
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: '',
      },
    },
    description: 'Scoped slot that set the element that will act as a trigger to toggle dropdown. By default, the trigger will be a button',
  },
};

const defaultTemplate = `
<m-dropdown
  :placement="placement"
  :children-placement="childrenPlacement"
  :content="content"
  :enable-search="enableSearch"
  :trigger-label="triggerLabel"
  :trigger-variant="triggerVariant"
  :trigger-icon-variant="triggerIconVariant"
  :trigger-theme="triggerTheme"
  :trigger-size="triggerSize"
  :height-limit="heightLimit"
  :size="size"
  :state="state"
  :placeholder="placeholder"
  :empty-dropdown-text="emptyDropdownText"
>
    <template #dropdown-trigger>
      <m-input-group>
        <m-form-input
          placeholder="Placeholder of input"
          clickable-readonly
          has-suffix-icon
        />
        <m-icon
          variant="chevron-bottom"
          is-suffix-icon
        />
      </m-input-group>
    </template>
    <template #default="{
      content
    }">
      <m-dropdown-item
        v-for="item in content"
        :key="item.id"
        :disabled="item.disabled"
        :isGroupTitle="item.isGroupTitle"
      >
        {{ item.content }}
      </m-dropdown-item>
  </template>
</m-dropdown>
`;

const multiLevelTemplate = `
<m-dropdown
  :placement="placement"
  :children-placement="childrenPlacement"
  :content="content"
  :enable-search="enableSearch"
  :trigger-label="triggerLabel"
  :trigger-variant="triggerVariant"
  :trigger-icon-variant="triggerIconVariant"
  :trigger-theme="triggerTheme"
  :trigger-size="triggerSize"
  :height-limit="heightLimit"
  :size="size"
  :state="state"
  :placeholder="placeholder"
  :empty-dropdown-text="emptyDropdownText"
>
  <template
    v-for="slotNumber in getContentDepth(content)"
    v-slot:['menu-'+slotNumber]="{
      content,
      getItemAction,
      menuNumber,
      activeIndex,
      isChildrenActive,
    }"
  >
    <m-dropdown-item
      v-for="(item, index) in content"
      :key="item.id"
      :isActive="isChildrenActive && index === activeIndex"
      @mouseenter.native="getItemAction(item, menuNumber, index)"
    >
      {{ item.content }}
    </m-dropdown-item>
  </template>
</m-dropdown>
`;

export const modifiedParameters = (type = 'default') => ({
  docs: { source: { code: type === 'default' ? defaultTemplate : multiLevelTemplate } },
});