@mekari/mekari-ui-vue/src/components/AvatarGroup/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';

export const predefinedUsers = [
  {
    src:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
    name: 'John Doe',
  },
  {
    src:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
    name: 'John Doe',
  },
  {
    src:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
    name: 'John Doe',
  },
  {
    src:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
    name: 'John Doe',
  },
  {
    src:
      'http://mekari-ui.sleekr.id/docs/1.0/assets/img/avatar/profile-example-xl.png',
    name: 'John Doe',
  },
];

const argTypes = {
  // Props
  avatarSize: {
    control: {
      type: 'select',
      options: ['small', 'medium', 'large', 'xlarge', 80],
    },
  },
  users: {
    control: {
      type: 'object',
    },
  },
};

export const argTypesDefault = {
  ...argTypes,
  grid: { table: { disable: true } },
  rowSize: { table: { disable: true } },
};

export const argTypesGrid = {
  ...argTypes,
  grid: {
    control: {
      disable: true,
    },
    table: {
      type: {
        summary: 'string',
      },
      defaultValue: {
        summary: true,
      },
    },
    defaultValue: true,
  },
  reversed: { table: { disable: true } },
  sparse: { table: { disable: true } },
};

export const parameters = {
  docs: {
    source: {
      code: `
      <m-avatar-group
        :grid="params.grid"
        :avatar-size="params.avatarSize"
        :circle="params.circle"
        :users="params.users"
        :selector-image="params.selectorImage"
        :selector-name="params.selectorName"
        :auto="params.auto"
        :size="params.size"
        :row-size="params.rowSize"
        :reversed="params.reversed"
        :sparse="params.sparse" />
      `,
    },
  },
};