{"size": 3777, "ext": "js", "max_stars_repo_path": "src/components/TimePicker/TimePicker.stories.js", "max_stars_repo_name": "one-kind/carbon-vue", "max_stars_repo_stars_event_min_datetime": "2021-03-05T19:43:06.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-05T19:43:06.000Z", "max_issues_repo_path": "src/components/TimePicker/TimePicker.stories.js", "max_issues_repo_name": "one-kind/carbon-vue", "max_issues_repo_issues_event_min_datetime": "2021-03-05T21:47:58.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-05T22:20:44.000Z", "max_forks_repo_path": "src/components/TimePicker/TimePicker.stories.js", "max_forks_repo_name": "one-kind/carbon-vue", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 26.5985915493, "max_line_length": 94, "alphanum_fraction": 0.5832671432}
export default {
  title: 'Components/TimePicker',
}

export const Default = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `
    <TimePicker
      :theme="theme"
      :label="label"
      :time="time"
      :ampm="ampm"
      :timezone="timezone"
      :timezones="timezones"
      :pattern="pattern"
      :placeholder="placeholder"
      :timzones-select-label="timezonesSelectLabel"
      :ampm-select-label="ampmSelectLabel"
      :invalid-message="invalidMessage"
      :disabled="disabled" :form-item="true"
    />
  `
})
Default.argTypes = {
  theme: { control: { type: 'text' } },
  label: { control: { type: 'text' } },
  time: { control: { type: 'text' } },
  ampm: { control: { type: 'text' } },
  timezone: { control: { type: 'text' } },
  timezones: { control: { type: 'array' } },
  pattern: { control: { type: 'text' } },
  placeholder: { control: { type: 'text' } },
  timezonesSelectLabel: { control: { type: 'text' } },
  ampmSelectLabel: { control: { type: 'text' } },
  disabled: { control: { type: 'boolean' } },
  invalidMessage: { control: { type: 'text' } },
}
Default.args = {
  theme: '',
  label: 'Select time',
  time: '',
  ampm: 'AM',
  timezone: 'timezone1',
  timezones: [
    {
      'label': 'Timezone-1',
      'value': 'timezone1',
    },
    {
      'label': 'Timezone-2',
      'value': 'timezone2',
    }
  ],
  pattern: '(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)',
  placeholder: 'hh:mm',
  timezonesSelectLabel: 'Timezone label',
  ampmSelectLabel: 'AM/PM',
  disabled: false,
  invalidMessage: '',
}

export const InvalidSlot = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `
    <TimePicker
      :theme="theme"
      :label="label"
      :time="time"
      :ampm="ampm"
      :timezone="timezone"
      :timezones="timezones"
      :pattern="pattern"
      :placeholder="placeholder"
      :timzones-select-label="timezonesSelectLabel"
      :ampm-select-label="ampmSelectLabel"
      :invalid-message="invalidMessage"
      :disabled="disabled" :form-item="true">
        <template v-if="useInvalidMessageSlot" slot="invalid-message">Invalid time.</template>
    </TimePicker>
  `
})
InvalidSlot.argTypes = {
  theme: { control: { type: 'text' } },
  label: { control: { type: 'text' } },
  time: { control: { type: 'text' } },
  ampm: { control: { type: 'text' } },
  timezone: { control: { type: 'text' } },
  timezones: { control: { type: 'array' } },
  pattern: { control: { type: 'text' } },
  placeholder: { control: { type: 'text' } },
  timezonesSelectLabel: { control: { type: 'text' } },
  ampmSelectLabel: { control: { type: 'text' } },
  useInvalidMessageSlot: { control: { type: 'boolean' } },
  disabled: { control: { type: 'boolean' } },
  invalidMessage: { control: { type: 'text' } },
}
InvalidSlot.args = {
  theme: '',
  label: 'Select time',
  time: '',
  ampm: 'AM',
  timezone: 'timezone1',
  timezones: [
    {
      'label': 'Timezone-1',
      'value': 'timezone1',
    },
    {
      'label': 'Timezone-2',
      'value': 'timezone2',
    }
  ],
  pattern: '(1[012]|[1-9]):[0-5][0-9](\\s)?(?i)',
  placeholder: 'hh:mm',
  timezonesSelectLabel: 'Timezone label',
  ampmSelectLabel: 'AM/PM',
  useInvalidMessageSlot: true,
  disabled: false,
  invalidMessage: '',
}

export const Minimal = () => ({
  template: `
    <TimePicker :form-item="true" />
  `
})

export const Events = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: `
    <TimePicker
    @update:time="onUpdateTime"
    @update:ampm="onUpdateAmpm"
    @update:timezone="onUpdateTimezone" :form-item="true" />
  `
})
Events.argTypes = {
  onUpdateTime: { action: 'onUpdateTime' },
  onUpdateAmpm: { action: 'onUpdateAmpm' },
  onUpdateTimezone: { action: 'onUpdateTimezone' },
}
