{"version":3,"file":"time-select.mjs","sources":["../../../../../../packages/components/time-select/src/time-select.vue"],"sourcesContent":["<template>\r\n  <sg-select\r\n    ref=\"select\"\r\n    :model-value=\"value\"\r\n    :disabled=\"disabled\"\r\n    :clearable=\"clearable\"\r\n    :clear-icon=\"clearIcon\"\r\n    :size=\"size\"\r\n    :placeholder=\"placeholder\"\r\n    default-first-option\r\n    :filterable=\"editable\"\r\n    @update:model-value=\"(event) => $emit('update:modelValue', event)\"\r\n    @on-change=\"(event) => $emit('change', event)\"\r\n    @on-blur=\"(event) => $emit('blur', event)\"\r\n    @on-focus=\"(event) => $emit('focus', event)\"\r\n  >\r\n    <sg-option\r\n      v-for=\"item in items\"\r\n      :key=\"item.value\"\r\n      :label=\"item.value\"\r\n      :value=\"item.value\"\r\n      :disabled=\"item.disabled\"\r\n    />\r\n    <template #prefix>\r\n      <sg-icon v-if=\"prefixIcon\" class=\"sg-input__prefix-icon\">\r\n        <component :is=\"prefixIcon\" />\r\n      </sg-icon>\r\n    </template>\r\n  </sg-select>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, ref } from 'vue'\r\nimport dayjs from 'dayjs'\r\nimport customParseFormat from 'dayjs/plugin/customParseFormat'\r\nimport SgSelect from '@sgui-plus/components/select'\r\nimport SgIcon from '@sgui-plus/components/icon'\r\nimport { Close, Time } from '@sgui-plus/icons-vue'\r\n\r\nimport type { PropType, Component } from 'vue'\r\nimport type { ComponentSize } from '@sgui-plus/utils/size'\r\ndayjs.extend(customParseFormat)\r\n\r\nconst { Option: SgOption } = SgSelect\r\n\r\ninterface Time {\r\n  hours: number\r\n  minutes: number\r\n}\r\n\r\nconst parseTime = (time: string): null | Time => {\r\n  const values = (time || '').split(':')\r\n  if (values.length >= 2) {\r\n    let hours = parseInt(values[0], 10)\r\n    const minutes = parseInt(values[1], 10)\r\n    const timeUpper = time.toUpperCase()\r\n    if (timeUpper.includes('AM') && hours === 12) {\r\n      hours = 0\r\n    } else if (timeUpper.includes('PM') && hours !== 12) {\r\n      hours += 12\r\n    }\r\n    return {\r\n      hours,\r\n      minutes,\r\n    }\r\n  }\r\n  return null\r\n}\r\nconst compareTime = (time1: string, time2: string): number => {\r\n  const value1 = parseTime(time1)\r\n  const value2 = parseTime(time2)\r\n  const minutes1 = value1!.minutes + value1!.hours * 60\r\n  const minutes2 = value2!.minutes + value2!.hours * 60\r\n  if (minutes1 === minutes2) {\r\n    return 0\r\n  }\r\n  return minutes1 > minutes2 ? 1 : -1\r\n}\r\nconst padTime = (time: number | string) => {\r\n  return `${time}`.padStart(2, '0')\r\n}\r\nconst formatTime = (time: Time): string => {\r\n  return `${padTime(time.hours)}:${padTime(time.minutes)}`\r\n}\r\nconst nextTime = (time: string, step: string): string => {\r\n  const timeValue = parseTime(time)\r\n  const stepValue = parseTime(step)\r\n  const next = {\r\n    hours: timeValue!.hours,\r\n    minutes: timeValue!.minutes,\r\n  }\r\n  next.minutes += stepValue!.minutes\r\n  next.hours += stepValue!.hours\r\n  next.hours += Math.floor(next.minutes / 60)\r\n  next.minutes = next.minutes % 60\r\n  return formatTime(next)\r\n}\r\n\r\nexport default defineComponent({\r\n  name: 'SgTimeSelect',\r\n  components: { SgSelect, SgOption, SgIcon },\r\n  model: {\r\n    prop: 'value',\r\n    event: 'change',\r\n  },\r\n  props: {\r\n    format: {\r\n      type: String,\r\n      default: 'HH:mm',\r\n    },\r\n    modelValue: String,\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    editable: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    clearable: {\r\n      type: Boolean,\r\n      default: true,\r\n    },\r\n    size: {\r\n      type: String as PropType<ComponentSize>,\r\n      default: 'default',\r\n      validator: (value: string) =>\r\n        !value || ['large', 'default', 'small'].indexOf(value) !== -1,\r\n    },\r\n    placeholder: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    start: {\r\n      type: String,\r\n      default: '09:00',\r\n    },\r\n    end: {\r\n      type: String,\r\n      default: '18:00',\r\n    },\r\n    step: {\r\n      type: String,\r\n      default: '00:30',\r\n    },\r\n    minTime: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    maxTime: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    name: {\r\n      type: String,\r\n      default: '',\r\n    },\r\n    prefixIcon: {\r\n      type: [String, Object] as PropType<string | Component>,\r\n      default: Time,\r\n    },\r\n    clearIcon: {\r\n      type: [String, Object] as PropType<string | Component>,\r\n      default: Close,\r\n    },\r\n  },\r\n  emits: ['change', 'blur', 'focus', 'update:modelValue'],\r\n  setup(props) {\r\n    // computed\r\n    const select = ref()\r\n    const value = computed(() => props.modelValue)\r\n    const start = computed(() => {\r\n      const time = parseTime(props.start)\r\n      return formatTime(time!)\r\n    })\r\n    const end = computed(() => {\r\n      const time = parseTime(props.end)\r\n      return formatTime(time!)\r\n    })\r\n    const step = computed(() => {\r\n      const time = parseTime(props.step)\r\n      return formatTime(time!)\r\n    })\r\n    const minTime = computed(() => {\r\n      const time = parseTime(props.minTime)\r\n      return time ? formatTime(time) : null\r\n    })\r\n    const maxTime = computed(() => {\r\n      const time = parseTime(props.maxTime)\r\n      return time ? formatTime(time) : null\r\n    })\r\n    const items = computed(() => {\r\n      const result = []\r\n      if (props.start && props.end && props.step) {\r\n        let current = start.value\r\n        let currentTime\r\n        while (compareTime(current, end.value) <= 0) {\r\n          currentTime = dayjs(current, 'HH:mm').format(props.format)\r\n          result.push({\r\n            value: currentTime,\r\n            disabled:\r\n              compareTime(current, minTime.value || '-1:-1') <= 0 ||\r\n              compareTime(current, maxTime.value || '100:100') >= 0,\r\n          } as never)\r\n          current = nextTime(current, step.value)\r\n        }\r\n      }\r\n      return result\r\n    })\r\n    const blur = () => {\r\n      select.value?.blur?.()\r\n    }\r\n    const focus = () => {\r\n      select.value?.focus?.()\r\n    }\r\n\r\n    return {\r\n      select,\r\n      value,\r\n      items,\r\n      blur,\r\n      focus,\r\n    }\r\n  },\r\n})\r\n</script>\r\n"],"names":["_resolveComponent","_openBlock","_createBlock","_withCtx","_createCommentVNode","_createElementBlock","_Fragment","_renderList"],"mappings":";;;;;;;+BACEA,gBA2BY,CAAA,WAAA,CAAA,CAAA;AAzBT,EAAA,OAAAC,SAAA,EAAkB,EAAAC,WAAA,CAAA,oBAAA,EAAA;AAAA,IAClB,GAAA,EAAA,QAAA;AAAA,IACA,aAAW,EAAA,IAAA,CAAA,KAAA;AAAA,IACX,QAAY,EAAA,IAAA,CAAA,QAAA;AAAA,IACZ,WAAM,IAAI,CAAA,SAAA;AAAA,IACV,YAAa,EAAA,IAAA,CAAA,SAAA;AAAA,IACd,IAAA,EAAA,IAAA,CAAA,IAAA;AAAA,IACC,WAAY,EAAA,IAAA,CAAA,WAAA;AAAA,IACZ,sBAAkB,EAAA,EAAA;AAAA,IAClB,UAAS,EAAA,IAAA,CAAA,QAAA;AAAA,IACT,qBAAO,EAAA,MAAA,CAAA,CAAA,CAAA,KAAG,MAAK,CAAA,CAAA,CAAA,GAAK,WAAK,IAAc,CAAA,KAAA,CAAA,mBAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvC,UAAQ,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAG,CAAU,KAAA,KAAA,IAAA,CAAA,KAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAAA,IAAA,QAAA,EAAA,MAAA,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,KAAA,IAAA,CAAA,KAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA;AAS/B,IAAA,SAAA,EAAM,MAGL,CAAA,CAAA,CAAA,KAAA,MAAA,CAAA,CAAA,CAAA,GAAA,CAAA,KAAA,KAAA,IAAA,CAAA,KAAA,CAAA,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,GAAA,EAAA;AAFV,IAAA,MAAA,EAAAC,OAAA,CAAA,MAAA;AAAA,MAAA,IAAA,CAAA,UAAA,IAAAF,SAAA,EAAwD,EAAAC,WAAA,CAAA,kBAAA,EAAA;AAAA,QAAA,GAAA,EAAA,CAAA;;;;;;;AAPnC,OAAA,CAAA,IAAAE,kBAAA,CAAA,MAAA,EAAA,IAAA,CAAA;AAAA,KAAA,CAAA;;AACf,OAAAH,SAAA,CAAA,IAAK,CAAK,EAAAI,kBAAA,CAAAC,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,KAAA,EAAA,CAAA,IAAA,KAAA;eACVN,SAAY,EAAA,EAAAC,WAAA,CAAA,oBAAA,EAAA;AAAA,UACjB,KAAK,IAAE,CAAA,KAAA;AAAA,UACP,KAAU,EAAA,IAAA,CAAA,KAAA;AAAA,UAAA,KAAA,EAAA,IAAA,CAAA,KAAA;;;;;;;;;;;;"}