@mekari/mekari-ui-vue/src/components/DatePicker/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-icons.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-form.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-tables.css';
import '@mekari/mekari-ui-toolkit/dist/css/components/mekari-ui-date-picker.css';

export default {
  // Props
  value: {
    control: {
      type: 'date',
    },
    table: {
      type: {
        summary: 'date | string | number | null',
      },
    },
    description: 'Set the initial value of the date picker. By default, use `new Date()` format. <br><br> If using `null`, the first date selected will be `null` too. This can be used if date is not mandatory.<br><br> If want to use `String`, please use `YYYY-MM-DD` format.<br> (example: `2020-12-31`)<br><br> If want to use `Number`, please use `date.getTime()` format.<br> (example: `1609129699276`)',
  },
  language: {
    control: {
      type: 'select',
      options: ['en', 'id'],
    },
    table: {
      type: {
        summary: 'string',
        detail: 'en | id',
      },
    },
    description: 'Set the language of the datepicker. This will affect month and weekdays name.',
  },
  dateFormat: {
    type: 'string',
    description: 'Set the date format that will be shown inside input of date picker. Commonly used date format can be seen on the section below.',
  },
  state: {
    control: {
      type: 'select',
      options: [true, false, null],
    },
    table: {
      type: {
        summary: 'boolean',
        detail: 'true | false | null',
      },
    },
    description: 'If set `false`, will add `.is-invalid` class to input that will have red border. Basically, if set to `true`, will make the border to have green border, however on this date picker case, the green border is overriden so it will not look green. Default value is `null`.',
  },
  hintText: {
    control: {
      type: 'text',
    },
    description: 'Set small hint text that will be placed below the input.',
  },
  errorText: {
    control: {
      type: 'text',
    },
    description: 'Will show error message if prop `state` is `false`.',
  },
  clickableReadonly: {
    control: {
      type: 'boolean',
    },
    description: 'If `false`, will set the input to be fully readonly (you cannot click or select date). This prop will be deprecated in the future. Please use prop `disabled` instead. Basically, this props is just a negation to prop `disabled`.',
  },
  disabled: {
    control: {
      type: 'select',
      options: [false, true, null],
    },
    table: {
      defaultValue: {
        summary: 'null',
      },
    },
    description: 'If `true`, will set the input to be fully readonly (you cannot click or select date). If you set the this prop to `true` or `false`, the prop `clickableReadonly` value will not be used.',
  },
  labelText: {
    description: 'Set the label for date picker. If value is falsy, the label won\'t be added to the template.',
  },
  placeholder: {
    description: 'Set placeholder of datepicker input.',
  },
  clearable: {
    description: 'If set to `false`, the date picker input reset icon will always be hidden.',
  },
  placement: {
    control: {
      type: 'select',
      options: ['left', 'right'],
    },
    description: 'Set placement of date picker relative to date picker input. By default, the value will be `right`.',
  },
  offsetX: {
    description: 'Set offset between date picker and date picker input horizontally. The higher the value is, the more right the date picker is. The value of offset will be converted into pixel.',
  },
  offsetY: {
    description: 'Set offset between date picker and date picker input vertically. The higher the value is, the more bottom the date picker is. The value of offset will be converted into pixel.',
  },
  disablePastDates: {
    description: 'if `true` the dates before today will be disabled',
    control: {
      type: 'boolean',
    },
    defaultValue: true,
  },
  readonly: {
    control: {
      type: 'boolean',
    },
    description: 'if `false` the date can be filled manually from the input',
  },
  // Event
  input: {
    description: 'After changing the selected date, there will be input event that emit selected date. The emitted date will follow format `new Date(selectedDate)`.  When `readonly` props set to `false`, it will return selected date with format `YYYY-MM-DD`.',
  },
  blur: {
    description: 'Triggered when the trigger of date picker hidden. Will return the blur event',
  },
  // Slot
  datePickerInputCustom: {
    description: 'Date picker input can be customized using this slot.',
  },
};