UNPKG

xdesign-vue-next

Version:

XDesign Component for vue-next

588 lines (584 loc) 24.4 kB
/** * xdesign v1.0.6 * (c) 2023 xdesign * @license MIT */ import { _ as _toConsumableArray } from '../_chunks/dep-5bec687c.mjs'; import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs'; import { defineComponent, computed, ref, watch, createVNode } from 'vue'; import { d as dayjs } from '../_chunks/dep-6fe15f5a.mjs'; import { useFormDisabled } from '../form/hooks.mjs'; import { usePrefixClass } from '../hooks/useConfig.mjs'; import { i as isFunction_1 } from '../_chunks/dep-1cc1c24f.mjs'; import { i as isArray_1 } from '../_chunks/dep-a95026f2.mjs'; import dateRangePickerProps from './date-range-picker-props.mjs'; import { RangeInputPopup } from '../range-input/index.mjs'; import TRangePanel from './panel/RangePanel.mjs'; import useRange from './hooks/useRange.mjs'; import { getDefaultFormat, formatDate, formatTime, initYearMonthTime, parseToDayjs, isValidDate } from '../_common/js/date-picker/format.mjs'; import { subtractMonth, addMonth, extractTimeObj } from '../_common/js/date-picker/utils.mjs'; import '../_chunks/dep-89b966f4.mjs'; import '../_chunks/dep-82805301.mjs'; import '../_chunks/dep-10a947a6.mjs'; import '../config-provider/useConfig.mjs'; import '../_chunks/dep-91ac8f71.mjs'; import '../_chunks/dep-c4737535.mjs'; import '../_chunks/dep-81c83986.mjs'; import '../_chunks/dep-6aa0223b.mjs'; import '../_chunks/dep-db381ece.mjs'; import '../_chunks/dep-5755c21c.mjs'; import '../_chunks/dep-b75d8d74.mjs'; import '../_chunks/dep-6ad18815.mjs'; import '../_chunks/dep-7f239c43.mjs'; import '../_chunks/dep-6f04869e.mjs'; import '../_chunks/dep-d32fbbb3.mjs'; import '../_chunks/dep-dafada74.mjs'; import '../_chunks/dep-addc2a84.mjs'; import '../_chunks/dep-068e912d.mjs'; import '../_chunks/dep-6e7b37b8.mjs'; import '../_chunks/dep-e1ab85c5.mjs'; import '../_chunks/dep-5f0e0453.mjs'; import '../_chunks/dep-71f84cf2.mjs'; import '../_chunks/dep-0e832fc7.mjs'; import '../_chunks/dep-69963a8c.mjs'; import '../_chunks/dep-8d1c9a23.mjs'; import '../_chunks/dep-03412fab.mjs'; import '../_chunks/dep-205ff58d.mjs'; import '../_chunks/dep-11fa9c2c.mjs'; import '../_chunks/dep-b09f48fa.mjs'; import '../_chunks/dep-26bf361a.mjs'; import '../_chunks/dep-3ec3335a.mjs'; import '../_chunks/dep-ed4e7c50.mjs'; import '../_chunks/dep-a666b9ad.mjs'; import '../_common/js/global-config/default-config.mjs'; import '../_common/js/global-config/locale/en_US.mjs'; import '../config-provider/type.mjs'; import '../range-input/range-input.mjs'; import '../_chunks/dep-8b0014b3.mjs'; import '../_chunks/dep-32d4c595.mjs'; import '../input/index.mjs'; import '../input/input.mjs'; import '../_chunks/dep-84ddb5ec.mjs'; import '../_chunks/dep-53e379cd.mjs'; import '../input/props.mjs'; import '../hooks/tnode.mjs'; import '../_chunks/dep-a628549d.mjs'; import '../_chunks/dep-4903a8a8.mjs'; import '../_chunks/dep-7dcfa37a.mjs'; import '../_chunks/dep-f4eba04c.mjs'; import '../_chunks/dep-735bcd0d.mjs'; import '../_chunks/dep-765678ef.mjs'; import '../_chunks/dep-8db27830.mjs'; import '../_chunks/dep-ae4bffa5.mjs'; import '../utils/render-tnode.mjs'; import '../_chunks/dep-9d7ebc32.mjs'; import '../input/useInput.mjs'; import '../form/const.mjs'; import '../hooks/index.mjs'; import '../hooks/icon.mjs'; import '../hooks/slot.mjs'; import '../hooks/useCommonClassName.mjs'; import '../hooks/useDefaultValue.mjs'; import '../hooks/useDestroyOnClose.mjs'; import '../hooks/useKeepAnimation.mjs'; import '../hooks/useRipple.mjs'; import '../utils/set-style.mjs'; import '../hooks/useVirtualScroll.mjs'; import '../hooks/useVModel.mjs'; import '../hooks/useImagePreviewUrl.mjs'; import '../_common/js/upload/utils.mjs'; import '../_common/js/log/log.mjs'; import '../input/useLengthLimit.mjs'; import '../_common/js/log/index.mjs'; import '../_common/js/utils/helper.mjs'; import '../_chunks/dep-5a2ce53e.mjs'; import '../_chunks/dep-1bae6a97.mjs'; import '../_chunks/dep-23f91684.mjs'; import '../input/useInputEventHandler.mjs'; import '../input/useInputWidth.mjs'; import '../input/input-group.mjs'; import '../input/input-group-props.mjs'; import '../utils/withInstall.mjs'; import './style/css.mjs'; import '../input/type.mjs'; import '../range-input/props.mjs'; import '../range-input/range-input-popup.mjs'; import '../popup/index.mjs'; import '../popup/popup.mjs'; import '@popperjs/core'; import '../_chunks/dep-0c786bea.mjs'; import '../_chunks/dep-e727a519.mjs'; import '../utils/dom.mjs'; import '../utils/easing.mjs'; import '../_common/js/utils/set-style.mjs'; import '../popup/container.mjs'; import '../popup/props.mjs'; import '../hooks/useResizeObserver.mjs'; import '../popup/type.mjs'; import '../range-input/range-input-popup-props.mjs'; import '../select-input/useOverlayInnerStyle.mjs'; import '../range-input/type.mjs'; import './panel/PanelContent.mjs'; import './base/Header.mjs'; import '../pagination/index.mjs'; import '../pagination/pagination.mjs'; import '../_chunks/dep-8b4428a1.mjs'; import '../_chunks/dep-a2289dc5.mjs'; import '../_chunks/dep-6af44080.mjs'; import '../input-number/index.mjs'; import '../input-number/input-number.mjs'; import '../_chunks/dep-35169507.mjs'; import '../_chunks/dep-c4f9949a.mjs'; import '../_chunks/dep-cf7b0304.mjs'; import '../button/index.mjs'; import '../button/button.mjs'; import '../loading/index.mjs'; import '../loading/directive.mjs'; import '../loading/plugin.mjs'; import '../loading/loading.mjs'; import '../loading/icon/gradient.mjs'; import '../_common/js/loading/circle-adapter.mjs'; import '../loading/props.mjs'; import '../hooks/useTeleport.mjs'; import '../loading/type.mjs'; import '../button/props.mjs'; import '../hooks/useDisabled.mjs'; import '../_chunks/dep-b9fae426.mjs'; import '../button/type.mjs'; import '../input-number/props.mjs'; import '../input-number/useInputNumber.mjs'; import '../_common/js/input-number/number.mjs'; import '../_common/js/input-number/large-number.mjs'; import '../input-number/type.mjs'; import '../select/index.mjs'; import '../select/select.mjs'; import '../_chunks/dep-abf7f90d.mjs'; import '../_chunks/dep-fa6608fd.mjs'; import '../_chunks/dep-cc9bfda3.mjs'; import '../_chunks/dep-b57a2815.mjs'; import '../_chunks/dep-983ce253.mjs'; import '../_chunks/dep-7fa157cd.mjs'; import '../_chunks/dep-6269eaa3.mjs'; import '../_chunks/dep-4265f69a.mjs'; import '../common-components/fake-arrow.mjs'; import '../select-input/index.mjs'; import '../select-input/select-input.mjs'; import '../select-input/props.mjs'; import '../select-input/useSingle.mjs'; import '../select-input/useMultiple.mjs'; import '../tag-input/index.mjs'; import '../tag-input/tag-input.mjs'; import '../tag-input/props.mjs'; import '../tag-input/hooks/useTagScroll.mjs'; import '../tag-input/useTagList.mjs'; import '../tag/index.mjs'; import '../tag/tag.mjs'; import '../_chunks/dep-7f8588b1.mjs'; import '../tag/props.mjs'; import '../tag/check-tag.mjs'; import '../tag/check-tag-props.mjs'; import '../tag/type.mjs'; import '../tag-input/hooks/useHover.mjs'; import '../tag-input/hooks/useDragSorter.mjs'; import '../tag-input/type.mjs'; import '../select-input/type.mjs'; import '../select/select-panel.mjs'; import '../_chunks/dep-60f1d7ee.mjs'; import '../_chunks/dep-e901316d.mjs'; import '../select/option.mjs'; import '../select/option-props.mjs'; import '../checkbox/index.mjs'; import '../checkbox/checkbox.mjs'; import '../checkbox/props.mjs'; import '../checkbox/constants.mjs'; import '../checkbox/hooks/useCheckboxLazyLoad.mjs'; import '../_common/js/utils/observe.mjs'; import '../checkbox/hooks/useKeyboard.mjs'; import '../checkbox/group.mjs'; import '../checkbox/checkbox-group-props.mjs'; import '../checkbox/type.mjs'; import '../select/helper.mjs'; import '../select/optionGroup.mjs'; import '../select/option-group-props.mjs'; import '../select/props.mjs'; import '../select/hooks/usePanelVirtualScroll.mjs'; import '../select/hooks/useSelectOptions.mjs'; import '../select/type.mjs'; import '../input-adornment/index.mjs'; import '../input-adornment/input-adornment.mjs'; import '../input-adornment/props.mjs'; import '../input-adornment/type.mjs'; import '../pagination/props.mjs'; import '../pagination/usePaginationClasses.mjs'; import '../pagination/useMoreAction.mjs'; import '../pagination/pagination-mini.mjs'; import '../pagination/pagination-mini-props.mjs'; import '../pagination/type.mjs'; import './base/Table.mjs'; import './base/Cell.mjs'; import '../time-picker/panel/time-picker-panel.mjs'; import '../_chunks/dep-1671cde7.mjs'; import '../_common/js/time-picker/const.mjs'; import '../time-picker/panel/props.mjs'; import '../time-picker/props.mjs'; import '../time-picker/panel/single-panel.mjs'; import '../_chunks/dep-2f9d2f2d.mjs'; import '../_common/js/time-picker/utils.mjs'; import './panel/ExtraContent.mjs'; import './base/Footer.mjs'; import './hooks/useTableData.mjs'; import './hooks/useDisableDate.mjs'; import '../_chunks/dep-80f871ed.mjs'; import './hooks/useRangeValue.mjs'; function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } var _DateRangePicker = defineComponent({ name: "XDateRangePicker", props: _objectSpread({}, dateRangePickerProps), setup: function setup(props2, _ref) { var slots = _ref.slots; var COMPONENT_NAME = usePrefixClass("date-range-picker"); var _useRange = useRange(props2), inputValue = _useRange.inputValue, popupVisible = _useRange.popupVisible, rangeInputProps = _useRange.rangeInputProps, popupProps = _useRange.popupProps, value = _useRange.value, year = _useRange.year, month = _useRange.month, time = _useRange.time, cacheValue = _useRange.cacheValue, activeIndex = _useRange.activeIndex, isHoverCell = _useRange.isHoverCell, isFirstValueSelected = _useRange.isFirstValueSelected, onChange = _useRange.onChange; var disabled = useFormDisabled(); var formatRef = computed(function () { return getDefaultFormat({ mode: props2.mode, enableTimePicker: props2.enableTimePicker, format: props2.format, valueType: props2.valueType }); }); var isSelected = ref(false); watch(popupVisible, function (visible) { if (visible) { isSelected.value = false; cacheValue.value = formatDate(value.value || [], { format: formatRef.value.format }); time.value = formatTime(value.value || [dayjs().format(formatRef.value.timeFormat), dayjs().format(formatRef.value.timeFormat)], formatRef.value.format, formatRef.value.timeFormat, props2.defaultTime); if (!value.value.length) { var _initYearMonthTime = initYearMonthTime({ value: value.value, mode: props2.mode, format: formatRef.value.format, enableTimePicker: props2.enableTimePicker }), defaultYear = _initYearMonthTime.year, defaultMonth = _initYearMonthTime.month; year.value = defaultYear; month.value = defaultMonth; } else if (value.value.length === 2 && !props2.enableTimePicker) { var nextMonth = value.value.map(function (v) { return parseToDayjs(v, formatRef.value.format).month(); }); if (year.value[0] === year.value[1] && nextMonth[0] === nextMonth[1]) { nextMonth[0] === 11 ? nextMonth[0] -= 1 : nextMonth[1] += 1; } month.value = nextMonth; year.value = value.value.map(function (v) { return parseToDayjs(v, formatRef.value.format).year(); }); if ((props2.mode === "month" || props2.mode === "quarter") && year.value[0] === year.value[1]) { year.value = [year.value[0], year.value[0] + 1]; } } else { year.value = value.value.map(function (v) { return parseToDayjs(v, formatRef.value.format).year(); }); if (year.value.length === 1) year.value = [year.value[0], year.value[0]]; month.value = value.value.map(function (v) { return parseToDayjs(v, formatRef.value.format).month(); }); if (month.value.length === 1) month.value = [month.value[0], Math.min(month.value[0] + 1, 11)]; } } else { activeIndex.value = 0; isHoverCell.value = false; isFirstValueSelected.value = false; inputValue.value = formatDate(value.value, { format: formatRef.value.format }); } }); function onCellMouseEnter(date) { isHoverCell.value = true; var nextValue = _toConsumableArray(inputValue.value); nextValue[activeIndex.value] = formatDate(date, { format: formatRef.value.format }); inputValue.value = nextValue; } function onCellMouseLeave() { isHoverCell.value = false; inputValue.value = cacheValue.value; } function onCellClick(date, _ref2) { var _props2$onPick; var e = _ref2.e, partial = _ref2.partial; (_props2$onPick = props2.onPick) === null || _props2$onPick === void 0 ? void 0 : _props2$onPick.call(props2, date, { e: e, partial: activeIndex.value ? "end" : "start" }); isHoverCell.value = false; isSelected.value = true; var nextValue = _toConsumableArray(inputValue.value); nextValue[activeIndex.value] = formatDate(date, { format: formatRef.value.format }); cacheValue.value = nextValue; inputValue.value = nextValue; if (props2.mode === "date") { var partialIndex = partial === "start" ? 0 : 1; var isAdditional = dayjs(date).month() !== month.value[partialIndex]; if (isAdditional) { if (activeIndex.value === 0) month.value = [dayjs(date).month(), Math.min(dayjs(date).month() + 1, 11)]; if (activeIndex.value === 1) month.value = [Math.max(dayjs(date).month() - 1, 0), dayjs(date).month()]; } } if (props2.enableTimePicker) return; var notValidIndex = nextValue.findIndex(function (v) { return !v || !isValidDate(v, formatRef.value.format); }); if (notValidIndex === -1 && nextValue.length === 2) { if (!isFirstValueSelected.value && parseToDayjs(nextValue[0], formatRef.value.format).isAfter(parseToDayjs(nextValue[1], formatRef.value.format))) { nextValue[activeIndex.value ? 0 : 1] = ""; cacheValue.value = nextValue; inputValue.value = nextValue; } else { onChange === null || onChange === void 0 ? void 0 : onChange(formatDate(nextValue, { format: formatRef.value.format, targetFormat: formatRef.value.valueType, autoSwap: true }), { dayjsValue: nextValue.map(function (v) { return parseToDayjs(v, formatRef.value.format); }), trigger: "pick" }); } } if (!isFirstValueSelected.value) { var nextIndex = notValidIndex; if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1; activeIndex.value = nextIndex; isFirstValueSelected.value = true; } else { popupVisible.value = false; } } function onJumperClick(_ref3) { var trigger = _ref3.trigger, partial = _ref3.partial; var partialIndex = partial === "start" ? 0 : 1; var monthCountMap = { date: 1, week: 1, month: 12, quarter: 12, year: 120 }; var monthCount = monthCountMap[props2.mode] || 0; var current = new Date(year.value[partialIndex], month.value[partialIndex]); var next = null; if (trigger === "prev") { next = subtractMonth(current, monthCount); } else if (trigger === "current") { next = new Date(); } else if (trigger === "next") { next = addMonth(current, monthCount); } var nextYear = _toConsumableArray(year.value); nextYear[partialIndex] = next.getFullYear(); var nextMonth = _toConsumableArray(month.value); nextMonth[partialIndex] = next.getMonth(); if (partialIndex === 0) { nextYear[1] = Math.max(nextYear[0], nextYear[1]); if (nextYear[0] === nextYear[1]) { nextMonth[1] = Math.max(nextMonth[0], nextMonth[1]); } } if (partialIndex === 1) { nextYear[0] = Math.min(nextYear[0], nextYear[1]); if (nextYear[0] === nextYear[1]) { nextMonth[0] = Math.min(nextMonth[0], nextMonth[1]); } } year.value = nextYear; month.value = nextMonth; } function onTimePickerChange(val) { var _extractTimeObj = extractTimeObj(val), hours = _extractTimeObj.hours, minutes = _extractTimeObj.minutes, seconds = _extractTimeObj.seconds, milliseconds = _extractTimeObj.milliseconds, meridiem = _extractTimeObj.meridiem; var nextInputValue = _toConsumableArray(inputValue.value); var changedInputValue = inputValue.value[activeIndex.value]; var currentDate = !dayjs(changedInputValue, formatRef.value.format).isValid() ? dayjs().year(year.value[activeIndex.value]).month(month.value[activeIndex.value]) : dayjs(changedInputValue, formatRef.value.format); var nextHours = hours; if (/am/i.test(meridiem) && nextHours === 12) nextHours -= 12; if (/pm/i.test(meridiem) && nextHours < 12) nextHours += 12; var nextDate = currentDate.hour(nextHours).minute(minutes).second(seconds).millisecond(milliseconds).toDate(); nextInputValue[activeIndex.value] = nextDate; var nextTime = _toConsumableArray(time.value); nextTime[activeIndex.value] = val; time.value = nextTime; isSelected.value = true; inputValue.value = formatDate(nextInputValue, { format: formatRef.value.format }); cacheValue.value = formatDate(nextInputValue, { format: formatRef.value.format }); } function onConfirmClick(_ref4) { var e = _ref4.e; var nextValue = _toConsumableArray(inputValue.value); var notValidIndex = nextValue.findIndex(function (v) { return !v || !isValidDate(v, formatRef.value.format); }); if (notValidIndex === -1 && nextValue.length === 2) { if (!isFirstValueSelected.value && parseToDayjs(nextValue[0], formatRef.value.format).isAfter(parseToDayjs(nextValue[1], formatRef.value.format))) { nextValue[activeIndex.value ? 0 : 1] = ""; cacheValue.value = nextValue; inputValue.value = nextValue; } else { var _props2$onConfirm; props2 === null || props2 === void 0 || (_props2$onConfirm = props2.onConfirm) === null || _props2$onConfirm === void 0 ? void 0 : _props2$onConfirm.call(props2, { date: nextValue.map(function (v) { return dayjs(v).toDate(); }), e: e, partial: activeIndex.value ? "end" : "start" }); onChange === null || onChange === void 0 ? void 0 : onChange(formatDate(nextValue, { format: formatRef.value.format, targetFormat: formatRef.value.valueType, autoSwap: true }), { dayjsValue: nextValue.map(function (v) { return parseToDayjs(v, formatRef.value.format); }), trigger: "confirm" }); } } if (!isFirstValueSelected.value || nextValue.length === 1) { var nextIndex = notValidIndex; if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1; activeIndex.value = nextIndex; isFirstValueSelected.value = true; } else if (nextValue.length === 2) { popupVisible.value = false; } } function onPresetClick(preset, context) { var presetValue = preset; if (isFunction_1(preset)) { presetValue = preset(); } if (!isArray_1(presetValue)) { console.error("preset: ".concat(preset, " \u9884\u8BBE\u503C\u5FC5\u987B\u662F\u6570\u7EC4!")); } else { var _props2$onPresetClick; onChange === null || onChange === void 0 ? void 0 : onChange(formatDate(presetValue, { format: formatRef.value.format, targetFormat: formatRef.value.valueType, autoSwap: true }), { dayjsValue: presetValue.map(function (p) { return parseToDayjs(p, formatRef.value.format); }), trigger: "preset" }); popupVisible.value = false; (_props2$onPresetClick = props2.onPresetClick) === null || _props2$onPresetClick === void 0 ? void 0 : _props2$onPresetClick.call(props2, context); } } function onYearChange(nextVal, _ref5) { var partial = _ref5.partial; var partialIndex = partial === "start" ? 0 : 1; if (props2.enableTimePicker) partialIndex = activeIndex.value; var nextYear = _toConsumableArray(year.value); nextYear[partialIndex] = nextVal; if (partialIndex === 0) nextYear[1] = Math.max(nextYear[0], nextYear[1]); if (partialIndex === 1) nextYear[0] = Math.min(nextYear[0], nextYear[1]); year.value = nextYear; } function onMonthChange(nextVal, _ref6) { var partial = _ref6.partial; var partialIndex = partial === "start" ? 0 : 1; if (props2.enableTimePicker) partialIndex = activeIndex.value; var nextMonth = _toConsumableArray(month.value); nextMonth[partialIndex] = nextVal; if (year.value[0] === year.value[1]) { if (partialIndex === 0) nextMonth[1] = Math.max(nextMonth[0], nextMonth[1]); if (partialIndex === 1) nextMonth[0] = Math.min(nextMonth[0], nextMonth[1]); } month.value = nextMonth; } var panelProps = computed(function () { return { hoverValue: isHoverCell.value ? inputValue.value : [], value: isSelected.value ? cacheValue.value : value.value, isFirstValueSelected: isFirstValueSelected.value, activeIndex: activeIndex.value, year: year.value, month: month.value, format: formatRef.value.format, mode: props2.mode, presets: props2.presets, time: time.value, disableDate: props2.disableDate, firstDayOfWeek: props2.firstDayOfWeek, timePickerProps: props2.timePickerProps, enableTimePicker: props2.enableTimePicker, presetsPlacement: props2.presetsPlacement, popupVisible: popupVisible.value, panelPreselection: props2.panelPreselection, onCellClick: onCellClick, onCellMouseEnter: onCellMouseEnter, onCellMouseLeave: onCellMouseLeave, onJumperClick: onJumperClick, onConfirmClick: onConfirmClick, onPresetClick: onPresetClick, onYearChange: onYearChange, onMonthChange: onMonthChange, onTimePickerChange: onTimePickerChange }; }); return function () { return createVNode("div", { "class": COMPONENT_NAME.value }, [createVNode(RangeInputPopup, { "disabled": disabled.value, "status": props2.status, "tips": props2.tips || slots.tips, "inputValue": inputValue.value, "popupProps": popupProps.value, "rangeInputProps": rangeInputProps.value, "popupVisible": popupVisible.value, "panel": function panel() { return createVNode(TRangePanel, panelProps.value, null); } }, null)]); }; } }); export { _DateRangePicker as default }; //# sourceMappingURL=DateRangePicker.mjs.map