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

Hongluan Component Library for Vue 3

{"version":3,"file":"panel-month-range.mjs","sources":["../../../../../../../packages/components/date-picker/src/date-picker-com/panel-month-range.vue"],"sourcesContent":["<template>\n  <div\n    class=\"range-picker\"\n    :class=\"[{\n      'month-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>\n                  <system-arrow-left />\n                </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>\n                  <system-arrow-right />\n                </hl-icon>\n              </slot>\n            </hl-button>\n          </div>\n          <month-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>\n                  <system-arrow-left />\n                </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>\n                  <system-arrow-right />\n                </hl-icon>\n              </slot>\n            </hl-button>\n          </div>\n          <month-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\n<script lang=\"ts\" setup>\nimport { computed, inject, ref, toRef, unref } from 'vue'\nimport dayjs from 'dayjs'\nimport { useLocale, useNamespace } from '@hongluan-ui/hooks'\nimport HlButton from '@hongluan-ui/components/button'\nimport HlGroup from '@hongluan-ui/components/group'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { isArray } from '@hongluan-ui/utils'\nimport { SystemArrowLeft, SystemArrowRight } from '@hongluan-ui/components/system-icon'\nimport { getDefaultValue, isValidRange } from '../utils'\nimport {\n  panelMonthRangeEmits,\n  panelMonthRangeProps,\n} from '../props/panel-month-range'\nimport { useMonthRangeHeader } from '../composables/use-month-range-header'\nimport { useRangePicker } from '../composables/use-range-picker'\nimport MonthTable from './basic-month-table.vue'\n\nimport type { Dayjs } from 'dayjs'\n\ndefineOptions({\n  name: 'DatePickerMonthRange',\n})\n\nconst props = defineProps(panelMonthRangeProps)\nconst emit = defineEmits(panelMonthRangeEmits)\nconst unit = 'year'\n\nconst { lang } = useLocale()\nconst { namespace } = useNamespace()\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 leftDate = ref(dayjs().locale(lang.value))\nconst rightDate = ref(dayjs().locale(lang.value).add(1, unit))\n\nconst {\n  minDate,\n  maxDate,\n  rangeState,\n\n  handleChangeRange,\n  handleRangeConfirm,\n  handleShortcutClick,\n  onSelect,\n} = useRangePicker(props, {\n  defaultValue,\n  leftDate,\n  rightDate,\n  unit,\n  onParsedValueChanged,\n})\n\nconst hasShortcuts = computed(() => !!shortcuts.length)\n\nconst {\n  leftPrevYear,\n  rightNextYear,\n  leftNextYear,\n  rightPrevYear,\n  leftLabel,\n  rightLabel,\n  leftYear,\n  rightYear,\n} = useMonthRangeHeader({\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\ntype RangePickValue = {\n  minDate: Dayjs\n  maxDate: Dayjs\n}\n\nconst handleRangePick = (val: RangePickValue, close = true) => {\n  // const defaultTime = props.defaultTime || []\n  // const minDate_ = modifyWithTimeString(val.minDate, defaultTime[0])\n  // const maxDate_ = modifyWithTimeString(val.maxDate, defaultTime[1])\n  // todo\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  handleRangeConfirm()\n}\n\nconst handleClear = () => {\n  leftDate.value = getDefaultValue(unref(defaultValue), {\n    lang: unref(lang),\n    unit: 'year',\n    unlinkPanels: props.unlinkPanels,\n  })[0]\n  rightDate.value = leftDate.value.add(1, 'year')\n  emit('pick', null)\n}\n\nconst formatToString = (value: Dayjs | Dayjs[]) => {\n  return isArray(value)\n    ? value.map(_ => _.format(format.value))\n    : value.format(format.value)\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\nfunction onParsedValueChanged(\n  minDate: Dayjs | undefined,\n  maxDate: Dayjs | undefined,\n) {\n  if (props.unlinkPanels && maxDate) {\n    const minDateYear = minDate?.year() || 0\n    const maxDateYear = maxDate.year()\n    rightDate.value =\n      minDateYear === maxDateYear ? maxDate.add(1, unit) : maxDate\n  } else {\n    rightDate.value = leftDate.value.add(1, unit)\n  }\n}\n\nemit('set-picker-option', ['isValidValue', isValidRange])\nemit('set-picker-option', ['formatToString', formatToString])\nemit('set-picker-option', ['parseUserInput', parseUserInput])\nemit('set-picker-option', ['handleClear', handleClear])\n</script>\n"],"names":[],"mappings":"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"}