UNPKG

tdesign-vue

Version:
383 lines (379 loc) 15.3 kB
/** * tdesign v1.11.2 * (c) 2025 tdesign * @license MIT */ import _defineProperty from '@babel/runtime/helpers/defineProperty'; import _slicedToArray from '@babel/runtime/helpers/slicedToArray'; import { defineComponent, computed } from '@vue/composition-api'; import { isFunction } from 'lodash-es'; import { usePrefixClass } from '../../hooks/useConfig.js'; import TPanelContent from './PanelContent.js'; import TExtraContent from './ExtraContent.js'; import { getDefaultFormat, parseToDayjs } from '../../_common/js/date-picker/format.js'; import useTableData from '../hooks/useTableData.js'; import useDisableDate from '../hooks/useDisableDate.js'; import { parseToDateTime } from '../utils.js'; import { useConfig } from '../../config-provider/useConfig.js'; import '../../config-provider/context.js'; import '../../_common/js/global-config/default-config.js'; import '../../_common/js/global-config/locale/zh_CN.js'; import '../../_chunks/dep-a883488c.js'; import '@babel/runtime/helpers/typeof'; import '../../_chunks/dep-90ffe67f.js'; import 'dayjs'; import '../../_chunks/dep-9d1c0d31.js'; import '../../config-provider/type.js'; import '../../_chunks/dep-8db32566.js'; import '../base/Header.js'; import '@babel/runtime/helpers/toConsumableArray'; import '../../pagination/index.js'; import '../../pagination/pagination.js'; import 'tdesign-icons-vue'; import '../../utils/mixins.js'; import 'vue'; import '../../config-provider/config-receiver.js'; import '../../input-number/index.js'; import '../../input-number/input-number.js'; import '../../button/index.js'; import '../../button/button.js'; import '../../loading/index.js'; import '../../loading/directive.js'; import '../../loading/plugin.js'; import '../../loading/loading.js'; import '../../loading/icon/gradient.js'; import '../../_common/js/loading/circle-adapter.js'; import '../../_common/js/utils/setStyle.js'; import '../../_common/js/utils/helper.js'; import '@babel/runtime/helpers/objectWithoutProperties'; import '../../utils/dom.js'; import 'raf'; import '../../utils/easing.js'; import '../../utils/render-tnode.js'; import '@babel/runtime/helpers/readOnlyError'; import '../../utils/transfer-dom.js'; import '../../loading/props.js'; import '../../config.js'; import '../../utils/withInstall.js'; import './style/css.js'; import '../../loading/type.js'; import '../../button/props.js'; import '../../utils/ripple.js'; import '../../button/type.js'; import '../../input/index.js'; import '../../input/input.js'; import '../../utils/helper.js'; import '../../utils/event.js'; import '../../input/props.js'; import '../../_common/js/log/index.js'; import '../../_common/js/log/log.js'; import '../../input/input-group.js'; import '../../utils/map-props.js'; import '../../input/type.js'; import '../../input-number/props.js'; import '../../input-number/useInputNumber.js'; import '../../hooks/useCommonClassName.js'; import '../../hooks/useVModel.js'; import '../../_common/js/input-number/number.js'; import '../../_common/js/input-number/large-number.js'; import '../../hooks/useFormDisabled.js'; import '../../hooks/useGlobalIcon.js'; import '../../input-number/type.js'; import '../../select/index.js'; import '../../select/select.js'; import '../../hooks/useDefaultValue.js'; import '../../hooks/tnode.js'; import '../../hooks/render-tnode.js'; import '../../select/props.js'; import '../../popup/index.js'; import '../../popup/popup.js'; import '@popperjs/core'; import '../../popup/props.js'; import '../../popup/container.js'; import '../../popup/utils.js'; import '../../popup/type.js'; import '../../popup/plugin.js'; import '../../tag/index.js'; import '../../tag/tag.js'; import 'tinycolor2'; import '../../tag/props.js'; import '../../tag/check-tag.js'; import '../../tag/check-tag-props.js'; import '../../_common/js/common.js'; import '../../hooks/index.js'; import '../../hooks/slots.js'; import '../../hooks/useDestroyOnClose.js'; import '../../hooks/useElementLazyRender.js'; import '../../_common/js/utils/observe.js'; import '../../hooks/useLazyLoad.js'; import '../../hooks/useResizeObserver.js'; import '../../hooks/useVirtualScrollNew.js'; import '../../hooks/useImagePreviewUrl.js'; import '../../_common/js/upload/utils.js'; import '../../tag/check-tag-group.js'; import '../../tag/check-tag-group-props.js'; import '../../tag/type.js'; import '../../select-input/index.js'; import '../../select-input/select-input.js'; import '../../select-input/props.js'; import '../../select-input/useSingle.js'; import '../../select-input/useMultiple.js'; import '../../tag-input/index.js'; import '../../tag-input/tag-input.js'; import '../../tag-input/props.js'; import '../../tag-input/hooks/useTagScroll.js'; import '../../tag-input/useTagList.js'; import '../../tag-input/hooks/useHover.js'; import '../../tag-input/hooks/useDragSorter.js'; import '../../tag-input/type.js'; import '../../tag-input/interface.js'; import '../../select-input/useOverlayInnerStyle.js'; import '../../select-input/type.js'; import '../../common-components/fake-arrow.js'; import '../../select/option.js'; import '../../select/option-props.js'; import '../../checkbox/index.js'; import '../../checkbox/group.js'; import '../../checkbox/checkbox.js'; import '../../checkbox/props.js'; import '../../checkbox/constants.js'; import '../../checkbox/store.js'; import '@babel/runtime/helpers/classCallCheck'; import '@babel/runtime/helpers/createClass'; import '../../checkbox/hooks/useKeyboardEvent.js'; import '../../checkbox/checkbox-group-props.js'; import '../../checkbox/type.js'; import '../../select/util.js'; import '../../select/select-panel.js'; import '../../select/optionGroup.js'; import '../../select/option-group-props.js'; import '../../hooks/useVirtualScroll.js'; import '../../select/hooks/useSelectOptions.js'; import '../../select/type.js'; import '../../input-adornment/index.js'; import '../../input-adornment/input-adornment.js'; import '../../input-adornment/props.js'; import '../../input-adornment/type.js'; import '../../pagination/props.js'; import '../../pagination/pagination-mini.js'; import '../../pagination/pagination-mini-props.js'; import '../../pagination/type.js'; import '../base/Table.js'; import '../base/Cell.js'; import '../../_common/js/date-picker/utils.js'; import '@babel/runtime/helpers/objectDestructuringEmpty'; import '@babel/runtime/helpers/extends'; import '../../_chunks/dep-2d584f67.js'; import '../../time-picker/panel/time-picker-panel.js'; import '../../_common/js/time-picker/const.js'; import '../../time-picker/panel/props.js'; import '../../time-picker/props.js'; import '../../time-picker/panel/single-panel.js'; import '../../_common/js/time-picker/utils.js'; import '../base/Footer.js'; function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; } function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } var TRangePanel = defineComponent({ name: "TRangePanel", props: { hoverValue: Array, activeIndex: Number, isFirstValueSelected: Boolean, disableDate: [Object, Array, Function], disableTime: Function, mode: { type: String, "default": "date" }, format: String, presetsPlacement: { type: String, "default": "bottom" }, value: Array, timePickerProps: Object, presets: Object, enableTimePicker: Boolean, firstDayOfWeek: Number, panelPreselection: Boolean, hidePreselection: { type: Boolean, defaultValue: true }, popupVisible: Boolean, year: Array, month: Array, time: Array, cancelRangeSelectLimit: Boolean, onClick: Function, onCellClick: Function, onCellMouseEnter: Function, onCellMouseLeave: Function, onJumperClick: Function, onConfirmClick: Function, onPresetClick: Function, onYearChange: Function, onMonthChange: Function, onTimePickerChange: Function }, setup: function setup(props) { var COMPONENT_NAME = usePrefixClass("date-range-picker__panel"); var _useConfig = useConfig("datePicker"), global = _useConfig.global; var _getDefaultFormat = getDefaultFormat({ mode: props.mode, format: props.format, enableTimePicker: props.enableTimePicker }), format = _getDefaultFormat.format; var hidePreselection = !props.panelPreselection && props.value.length === 2; var disableDateOptions = computed(function () { return useDisableDate({ format: format, mode: props.mode, disableDate: props.disableDate, start: props.isFirstValueSelected && props.activeIndex === 1 ? new Date(parseToDayjs(props.value[0], format, "start").toDate().setHours(0, 0, 0)) : void 0, end: props.isFirstValueSelected && props.activeIndex === 0 ? new Date(parseToDayjs(props.value[1], format).toDate().setHours(23, 59, 59)) : void 0 }); }); var disableTime = function disableTime(h, m, s, context) { if (!isFunction(props.disableTime)) { return {}; } var _ref = props.value || [], _ref2 = _slicedToArray(_ref, 2), startTime = _ref2[0], endTime = _ref2[1]; if (context.partial) { return props.disableTime([parseToDateTime(startTime, format, [h, m, s]), parseToDateTime(endTime, format)], context); } return props.disableTime([parseToDateTime(startTime, format), parseToDateTime(endTime, format, [h, m, s])], context); }; var startTableData = computed(function () { return useTableData(_objectSpread(_objectSpread({ isRange: true, start: props.value[0] ? parseToDayjs(props.value[0], format).toDate() : void 0, end: props.value[1] ? parseToDayjs(props.value[1], format).toDate() : void 0, hoverStart: !hidePreselection && props.hoverValue[0] ? parseToDayjs(props.hoverValue[0], format).toDate() : void 0, hoverEnd: !hidePreselection && props.hoverValue[1] ? parseToDayjs(props.hoverValue[1], format).toDate() : void 0, year: props.year[0], month: props.month[0], mode: props.mode, firstDayOfWeek: props.firstDayOfWeek || global.value.firstDayOfWeek }, disableDateOptions.value), {}, { cancelRangeSelectLimit: props.cancelRangeSelectLimit })); }); var endTableData = computed(function () { return useTableData(_objectSpread(_objectSpread({ isRange: true, start: props.value[0] ? parseToDayjs(props.value[0], format).toDate() : void 0, end: props.value[1] ? parseToDayjs(props.value[1], format).toDate() : void 0, hoverStart: !hidePreselection && props.hoverValue[0] ? parseToDayjs(props.hoverValue[0], format).toDate() : void 0, hoverEnd: !hidePreselection && props.hoverValue[1] ? parseToDayjs(props.hoverValue[1], format).toDate() : void 0, year: props.year[1], month: props.month[1], mode: props.mode, firstDayOfWeek: props.firstDayOfWeek || global.value.firstDayOfWeek }, disableDateOptions.value), {}, { cancelRangeSelectLimit: props.cancelRangeSelectLimit })); }); var panelContentProps = computed(function () { return { format: format, mode: props.mode, firstDayOfWeek: props.firstDayOfWeek || global.value.firstDayOfWeek, popupVisible: props.popupVisible, enableTimePicker: props.enableTimePicker, timePickerProps: _objectSpread({ disableTime: disableTime }, props.timePickerProps), onMonthChange: props.onMonthChange, onYearChange: props.onYearChange, onJumperClick: props.onJumperClick, onCellClick: props.onCellClick, onCellMouseEnter: props.onCellMouseEnter, onCellMouseLeave: props.onCellMouseLeave, onTimePickerChange: props.onTimePickerChange }; }); return { COMPONENT_NAME: COMPONENT_NAME, startTableData: startTableData, endTableData: endTableData, panelContentProps: panelContentProps }; }, render: function render() { var _this = this; var h = arguments[0]; var COMPONENT_NAME = this.COMPONENT_NAME, startTableData = this.startTableData, endTableData = this.endTableData, panelContentProps = this.panelContentProps; return h("div", { "class": [COMPONENT_NAME, _defineProperty({}, "".concat(COMPONENT_NAME, "--direction-row"), ["left", "right"].includes(this.presetsPlacement))], "on": { "click": function click(e) { var _this$onClick; return (_this$onClick = _this.onClick) === null || _this$onClick === void 0 ? void 0 : _this$onClick.call(_this, { e: e }); } } }, [["top", "left"].includes(this.presetsPlacement) ? h(TExtraContent, { "props": _objectSpread({}, { presets: this.presets, selectedValue: this.value[this.activeIndex], enableTimePicker: this.enableTimePicker, onPresetClick: this.onPresetClick, onConfirmClick: this.onConfirmClick, presetsPlacement: this.presetsPlacement }) }) : null, h("div", { "class": "".concat(COMPONENT_NAME, "-content-wrapper") }, [!this.enableTimePicker ? [h(TPanelContent, { "key": "startPanel", "props": _objectSpread({}, _objectSpread({ partial: "start", year: this.year[0], month: this.month[0], time: this.time[0], value: this.value, tableData: startTableData }, panelContentProps)) }), h(TPanelContent, { "key": "endPanel", "props": _objectSpread({}, _objectSpread({ partial: "end", year: this.year[1], month: this.month[1], time: this.time[1], value: this.value, tableData: endTableData }, panelContentProps)) })] : h(TPanelContent, { "key": "start", "props": _objectSpread({}, _objectSpread({ partial: this.activeIndex ? "end" : "start", year: this.activeIndex ? this.year[1] : this.year[0], month: this.activeIndex ? this.month[1] : this.month[0], time: this.activeIndex ? this.time[1] : this.time[0], value: this.value, tableData: this.activeIndex ? endTableData : startTableData }, panelContentProps)) })]), ["bottom", "right"].includes(this.presetsPlacement) ? h(TExtraContent, { "props": _objectSpread({}, { presets: this.presets, selectedValue: this.value[this.activeIndex], enableTimePicker: this.enableTimePicker, onPresetClick: this.onPresetClick, onConfirmClick: this.onConfirmClick, presetsPlacement: this.presetsPlacement }) }) : null]); } }); export { TRangePanel as default }; //# sourceMappingURL=RangePanel.js.map