hongluan-ui/es/components/date-picker/src/date-picker-com/panel-year-range.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"panel-year-range.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-year-range.vue"],"sourcesContent":["<template>\n  <div\n    class=\"range-picker\"\n    :class=\"[{\n      'year-range': true,\n      'has-sidebar': Boolean($slots.sidebar) || hasShortcuts\n    }, namespace + '-date-picker']\"\n  >\n    <div class=\"picker-wrapper\">\n      <slot name=\"sidebar\" :class=\"['picker-sidebar', namespace + '-group', 'vertical']\"></slot>\n      <hl-group v-if=\"hasShortcuts\" :class=\"['picker-sidebar']\" dir=\"vertical\">\n        <hl-group v-for=\"(shortcut, key) in shortcuts\" :key=\"key\" class=\"p-x-sm p-y-xxs hover:text-hover cursor-pointer\" @click=\"handleShortcutClick(shortcut)\">\n          {{ shortcut.text }}\n        </hl-group>\n      </hl-group>\n      <div class=\"picker-body\">\n        <div class=\"picker-body-content is-left\">\n          <div :class=\"['picker-body-header', namespace + '-group', 'full']\">\n            <hl-button\n              size=\"sm\"\n              class=\"group-item prev-year\"\n              equal\n              @click=\"leftPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <hl-icon><system-arrow-left /></hl-icon>\n              </slot>\n            </hl-button>\n            <div class=\"header-label group-item\">\n              <hl-button>\n                {{ leftLabel }}\n              </hl-button>\n            </div>\n            <hl-button\n              v-if=\"unlinkPanels\"\n              size=\"sm\"\n              class=\"group-item next-year\"\n              equal\n              :disabled=\"!enableYearArrow\"\n              @click=\"leftNextYear\"\n            >\n              <slot name=\"next-year\">\n                <hl-icon><system-arrow-right /></hl-icon>\n              </slot>\n            </hl-button>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"leftDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n        <div class=\"picker-body-content is-right\">\n          <div :class=\"['picker-body-header', namespace + '-group', 'full']\">\n            <hl-button\n              v-if=\"unlinkPanels\"\n              size=\"sm\"\n              class=\"group-item prev-year\"\n              equal\n              :disabled=\"!enableYearArrow\"\n              @click=\"rightPrevYear\"\n            >\n              <slot name=\"prev-year\">\n                <hl-icon><system-arrow-left /></hl-icon>\n              </slot>\n            </hl-button>\n            <div class=\"header-label group-item\">\n              <hl-button>\n                {{ rightLabel }}\n              </hl-button>\n            </div>\n            <hl-button\n              size=\"sm\"\n              class=\"group-item next-year\"\n              equal\n              @click=\"rightNextYear\"\n            >\n              <slot name=\"next-year\">\n                <hl-icon><system-arrow-right /></hl-icon>\n              </slot>\n            </hl-button>\n          </div>\n          <year-table\n            selection-mode=\"range\"\n            :date=\"rightDate\"\n            :min-date=\"minDate\"\n            :max-date=\"maxDate\"\n            :range-state=\"rangeState\"\n            :disabled-date=\"disabledDate\"\n            @changerange=\"handleChangeRange\"\n            @pick=\"handleRangePick\"\n            @select=\"onSelect\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, watch } from 'vue'\nimport dayjs from 'dayjs'\nimport { isArray } from '@hongluan-ui/utils'\nimport { SystemArrowLeft, SystemArrowRight } from '@hongluan-ui/components/system-icon'\nimport HlButton from '@hongluan-ui/components/button'\nimport HlGroup from '@hongluan-ui/components/group'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { useLocale, useNamespace } from '@hongluan-ui/hooks'\nimport {\n  panelYearRangeEmits,\n  panelYearRangeProps,\n} from '../props/panel-year-range'\nimport { useShortcut } from '../composables/use-shortcut'\nimport { useYearRangeHeader } from '../composables/use-year-range-header'\nimport { isValidRange } from '../utils'\nimport YearTable from './basic-year-table.vue'\n\nimport type { Dayjs } from 'dayjs'\nimport type { RangeState } from '../props/shared'\n\ndefineOptions({\n  name: 'DatePickerYearRange',\n})\n\nconst props = defineProps(panelYearRangeProps)\nconst emit = defineEmits(panelYearRangeEmits)\n\nconst { lang } = useLocale()\nconst { namespace } = useNamespace()\n\nconst leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(leftDate.value.add(10, 'year'))\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst handleShortcutClick = useShortcut(lang)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useYearRangeHeader({\n  unlinkPanels: toRef(props, 'unlinkPanels'),\n  leftDate,\n  rightDate,\n})\n\nconst enableYearArrow = computed(() => {\n  return props.unlinkPanels && rightYear.value > leftYear.value + 1\n})\n\nconst minDate = ref<Dayjs>()\nconst maxDate = ref<Dayjs>()\n\nconst rangeState = ref<RangeState>({\n  endDate: null,\n  selecting: false,\n})\n\nconst handleChangeRange = (val: RangeState) => {\n  rangeState.value = val\n}\n\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  const minDate_ = val.minDate\n  const maxDate_ = val.maxDate\n  if (maxDate.value === maxDate_ && minDate.value === minDate_) {\n    return\n  }\n  emit('calendar-change', [minDate_.toDate(), maxDate_ && maxDate_.toDate()])\n  maxDate.value = maxDate_\n  minDate.value = minDate_\n\n  if (!close) return\n  handleConfirm()\n}\n\nconst handleConfirm = (visible = false) => {\n  if (isValidRange([minDate.value, maxDate.value])) {\n    emit('pick', [minDate.value, maxDate.value], visible)\n  }\n}\n\nconst onSelect = (selecting: boolean) => {\n  rangeState.value.selecting = selecting\n  if (!selecting) {\n    rangeState.value.endDate = null\n  }\n}\n\nconst pickerBase = inject('EP_PICKER_BASE') as any\nconst { shortcuts, disabledDate } = pickerBase.props\nconst format = toRef(pickerBase.props, 'format')\nconst defaultValue = toRef(pickerBase.props, 'defaultValue')\nconst unit = 'year'\n\nconst getDefaultValue = () => {\n  let start: Dayjs\n  if (isArray(defaultValue.value)) {\n    const left = dayjs(defaultValue.value[0])\n    let right = dayjs(defaultValue.value[1])\n    if (!props.unlinkPanels) {\n      right = left.add(10, unit)\n    }\n    return [left, right]\n  } else if (defaultValue.value) {\n    start = dayjs(defaultValue.value)\n  } else {\n    start = dayjs()\n  }\n  start = start.locale(lang.value)\n  return [start, start.add(10, unit)]\n}\n\nwatch(\n  () => defaultValue.value,\n  val => {\n    if (val) {\n      const defaultArr = getDefaultValue()\n      leftDate.value = defaultArr[0]\n      rightDate.value = defaultArr[1]\n    }\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.parsedValue,\n  newVal => {\n    if (newVal && newVal.length === 2) {\n      minDate.value = newVal[0]\n      maxDate.value = newVal[1]\n      leftDate.value = minDate.value\n      if (props.unlinkPanels && maxDate.value) {\n        const minDateYear = minDate.value.year()\n        const maxDateYear = maxDate.value.year()\n        rightDate.value =\n          minDateYear === maxDateYear\n            ? maxDate.value.add(10, 'year')\n            : maxDate.value\n      } else {\n        rightDate.value = leftDate.value.add(10, 'year')\n      }\n    } else {\n      const defaultArr = getDefaultValue()\n      minDate.value = undefined\n      maxDate.value = undefined\n      leftDate.value = defaultArr[0]\n      rightDate.value = defaultArr[1]\n    }\n  },\n  { immediate: true },\n)\n\nconst parseUserInput = (value: Dayjs | Dayjs[]) => {\n  return isArray(value)\n    ? value.map(_ => dayjs(_, format.value).locale(lang.value))\n    : dayjs(value, format.value).locale(lang.value)\n}\n\nconst formatToString = (value: Dayjs[] | Dayjs) => {\n  return isArray(value)\n    ? value.map(day => day.format(format.value))\n    : value.format(format.value)\n}\n\nconst isValidValue = (date: [Dayjs, Dayjs]) => {\n  return (\n    isValidRange(date) &&\n    (disabledDate\n      ? !disabledDate(date[0].toDate()) && !disabledDate(date[1].toDate())\n      : true)\n  )\n}\n\nconst handleClear = () => {\n  const defaultArr = getDefaultValue()\n  leftDate.value = defaultArr[0]\n  rightDate.value = defaultArr[1]\n  maxDate.value = undefined\n  minDate.value = undefined\n  emit('pick', null)\n}\n\nemit('set-picker-option', ['isValidValue', isValidValue])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['formatToString', formatToString])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"names":[],"mappings":"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"}