@mekari/mekari-ui-vue/src/components/Avatar/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 '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-avatar.css';

const argTypes = {
  // Props
  size: {
    control: {
      type: 'select',
      options: ['xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge'],
    },
  },
};

export const argTypesDefault = {
  ...argTypes,
  initial: { table: { disable: true } },
  filterInitial: { table: { disable: true } },
  src: {
    defaultValue:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
  },
};

export const parametersDefault = {
  docs: {
    source: {
      code: `
      <m-avatar
        :size="params.size"
        :src="params.src"
        :name="params.name"
        :circle="params.circle"
      />
      `,
    },
  },
};

export const argTypesInitial = {
  ...argTypes,
  src: { table: { disable: true } },
  initial: {
    defaultValue: true,
  },
};

export const parametersInitial = {
  docs: {
    source: {
      code: `
      <m-avatar
        :size="params.size"
        :name="params.name"
        :initial="params.initial"
        :filter-initial="params.filterInitial"
        :circle="params.circle"
      />
      `,
    },
  },
};