@sdata/web-vue 1.3.0 → 1.4.1

package/lib/date-picker/range-picker.vue_vue_type_script_lang.js

@@ -1,513 +0,0 @@
-require("../_virtual/_rolldown/runtime.js");
-const require_use_form_item = require("../_hooks/use-form-item.js");
-const require_context = require("../config-provider/context.js");
-const require_objectSpread2 = require("../_virtual/_@oxc-project_runtime@0.124.0/helpers/objectSpread2.js");
-const require_global_config = require("../_utils/global-config.js");
-const require_is = require("../_utils/is.js");
-const require_omit = require("../_utils/omit.js");
-const require_pick = require("../_utils/pick.js");
-const require_use_state = require("../_hooks/use-state.js");
-const require_use_merge_state = require("../_hooks/use-merge-state.js");
-const require_index = require("../locale/index.js");
-const require_index$1 = require("../trigger/index.js");
-const require_date = require("../_utils/date.js");
-const require_index$2 = require("../icon/icon-calendar/index.js");
-const require_index$3 = require("../time-picker/utils/index.js");
-const require_use_format = require("./hooks/use-format.js");
-const require_use_is_disabled_date = require("./hooks/use-is-disabled-date.js");
-const require_use_provide_datepicker_transform = require("./hooks/use-provide-datepicker-transform.js");
-const require_use_value_format = require("./hooks/use-value-format.js");
-const require_index$4 = require("./utils/index.js");
-const require_input_range = require("../_components/picker/input-range.js");
-const require_use_range_header_value = require("./hooks/use-range-header-value.js");
-const require_use_range_picker_state = require("./hooks/use-range-picker-state.js");
-const require_use_range_time_picker_value = require("./hooks/use-range-time-picker-value.js");
-const require_range_picker_panel = require("./range-picker-panel.js");
-let vue = require("vue");
-//#region components/date-picker/range-picker.vue?vue&type=script&lang.ts
-var range_picker_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
-	name: "RangePicker",
-	components: {
-		RangePickerPanel: require_range_picker_panel.default,
-		DateRangeInput: require_input_range.default,
-		Trigger: require_index$1.default,
-		IconCalendar: require_index$2.default
-	},
-	inheritAttrs: false,
-	props: {
-		mode: {
-			type: String,
-			default: "date"
-		},
-		modelValue: { type: Array },
-		defaultValue: { type: Array },
-		pickerValue: { type: Array },
-		defaultPickerValue: { type: Array },
-		disabled: {
-			type: [Boolean, Array],
-			default: false
-		},
-		dayStartOfWeek: {
-			type: Number,
-			default: 0
-		},
-		format: { type: String },
-		valueFormat: { type: String },
-		showTime: { type: Boolean },
-		timePickerProps: { type: Object },
-		placeholder: { type: Array },
-		disabledDate: { type: Function },
-		disabledTime: { type: Function },
-		separator: { type: String },
-		exchangeTime: {
-			type: Boolean,
-			default: true
-		},
-		popupContainer: { type: [String, Object] },
-		locale: { type: Object },
-		hideTrigger: { type: Boolean },
-		allowClear: {
-			type: Boolean,
-			default: true
-		},
-		readonly: { type: Boolean },
-		error: { type: Boolean },
-		size: { type: String },
-		shortcuts: {
-			type: Array,
-			default: () => []
-		},
-		shortcutsPosition: {
-			type: String,
-			default: "bottom"
-		},
-		position: {
-			type: String,
-			default: "bl"
-		},
-		popupVisible: {
-			type: Boolean,
-			default: void 0
-		},
-		defaultPopupVisible: { type: Boolean },
-		triggerProps: { type: Object },
-		unmountOnClose: { type: Boolean },
-		previewShortcut: {
-			type: Boolean,
-			default: true
-		},
-		showConfirmBtn: { type: Boolean },
-		disabledInput: {
-			type: Boolean,
-			default: false
-		},
-		abbreviation: {
-			type: Boolean,
-			default: true
-		}
-	},
-	emits: {
-		"change": (value, date, dateString) => {
-			return true;
-		},
-		"update:modelValue": (value) => {
-			return true;
-		},
-		"select": (value, date, dateString) => {
-			return true;
-		},
-		"popup-visible-change": (visible) => {
-			return true;
-		},
-		"update:popupVisible": (visible) => {
-			return true;
-		},
-		"ok": (value, date, dateString) => {
-			return true;
-		},
-		"clear": () => {
-			return true;
-		},
-		"select-shortcut": (shortcut) => {
-			return true;
-		},
-		"picker-value-change": (value, date, dateString) => {
-			return true;
-		},
-		"update:pickerValue": (value) => {
-			return true;
-		}
-	},
-	setup(props, { emit, slots }) {
-		const { mode, showTime, format, modelValue, defaultValue, popupVisible, defaultPopupVisible, placeholder, timePickerProps, disabled, disabledDate, disabledTime, locale, pickerValue, defaultPickerValue, valueFormat, size, error, dayStartOfWeek, exchangeTime, previewShortcut, showConfirmBtn } = (0, vue.toRefs)(props);
-		const { locale: globalLocal } = require_index.useI18n();
-		const configCtx = (0, vue.inject)(require_context.configProviderInjectionKey, void 0);
-		(0, vue.watchEffect)(() => {
-			require_date.initializeDateLocale(globalLocal.value, dayStartOfWeek.value);
-		});
-		const mergedExchangeTime = (0, vue.computed)(() => {
-			var _configCtx$exchangeTi;
-			return !(!exchangeTime.value || !((_configCtx$exchangeTi = configCtx === null || configCtx === void 0 ? void 0 : configCtx.exchangeTime) !== null && _configCtx$exchangeTi !== void 0 ? _configCtx$exchangeTi : true));
-		});
-		const { mergedSize, mergedDisabled: formDisabled, mergedError, eventHandlers } = require_use_form_item.useFormItem({
-			size,
-			error
-		});
-		const datePickerT = require_use_provide_datepicker_transform.default((0, vue.reactive)({ locale }));
-		const prefixCls = require_global_config.getPrefixCls("picker");
-		const computedPlaceholder = (0, vue.computed)(() => (placeholder === null || placeholder === void 0 ? void 0 : placeholder.value) || {
-			date: datePickerT("datePicker.rangePlaceholder.date"),
-			month: datePickerT("datePicker.rangePlaceholder.month"),
-			year: datePickerT("datePicker.rangePlaceholder.year"),
-			week: datePickerT("datePicker.rangePlaceholder.week"),
-			quarter: datePickerT("datePicker.rangePlaceholder.quarter")
-		}[mode.value] || datePickerT("datePicker.rangePlaceholder.date"));
-		const { format: computedFormat, valueFormat: returnValueFormat, parseValueFormat } = require_use_format.default((0, vue.reactive)({
-			mode,
-			format,
-			showTime,
-			valueFormat
-		}));
-		const disabledArray = (0, vue.computed)(() => {
-			return [disabled.value === true || formDisabled.value || require_is.isArray(disabled.value) && disabled.value[0] === true, disabled.value === true || formDisabled.value || require_is.isArray(disabled.value) && disabled.value[1] === true];
-		});
-		const triggerDisabled = (0, vue.computed)(() => disabledArray.value[0] && disabledArray.value[1]);
-		function getFocusedIndex(cur = 0) {
-			return disabledArray.value[cur] ? cur ^ 1 : cur;
-		}
-		const refInput = (0, vue.ref)();
-		const focusedIndex = (0, vue.ref)(getFocusedIndex());
-		const nextFocusedIndex = (0, vue.computed)(() => {
-			const cur = focusedIndex.value;
-			const next = cur ^ 1;
-			return disabledArray.value[next] ? cur : next;
-		});
-		const isNextDisabled = (0, vue.computed)(() => disabledArray.value[focusedIndex.value ^ 1]);
-		const { value: selectedValue, setValue: setSelectedValue } = require_use_range_picker_state.default((0, vue.reactive)({
-			modelValue,
-			defaultValue,
-			format: parseValueFormat
-		}));
-		const [processValue, setProcessValue] = require_use_state.default();
-		const [previewValue, setPreviewValue] = require_use_state.default();
-		const forSelectedValue = (0, vue.computed)(() => {
-			var _processValue$value;
-			return (_processValue$value = processValue.value) !== null && _processValue$value !== void 0 ? _processValue$value : selectedValue.value;
-		});
-		const panelValue = (0, vue.computed)(() => {
-			var _ref, _previewValue$value;
-			return (_ref = (_previewValue$value = previewValue.value) !== null && _previewValue$value !== void 0 ? _previewValue$value : processValue.value) !== null && _ref !== void 0 ? _ref : selectedValue.value;
-		});
-		const [inputValue, setInputValue] = require_use_state.default();
-		const startHeaderMode = (0, vue.ref)();
-		const endHeaderMode = (0, vue.ref)();
-		const [panelVisible, setLocalPanelVisible] = require_use_merge_state.default(defaultPopupVisible.value, (0, vue.reactive)({ value: popupVisible }));
-		const setPanelVisible = (newVisible) => {
-			if (panelVisible.value !== newVisible) {
-				setLocalPanelVisible(newVisible);
-				emit("popup-visible-change", newVisible);
-				emit("update:popupVisible", newVisible);
-			}
-		};
-		const { startHeaderValue, endHeaderValue, startHeaderOperations, endHeaderOperations, resetHeaderValue, setHeaderValue } = require_use_range_header_value.default((0, vue.reactive)({
-			mode,
-			startHeaderMode,
-			endHeaderMode,
-			value: pickerValue,
-			defaultValue: defaultPickerValue,
-			selectedValue: panelValue,
-			format: parseValueFormat,
-			onChange: (newVal) => {
-				const returnValue = require_use_value_format.getReturnRangeValue(newVal, returnValueFormat.value);
-				const formattedValue = require_index$3.getFormattedValue(newVal, parseValueFormat.value);
-				emit("picker-value-change", returnValue, require_date.getDateValue(newVal), formattedValue);
-				emit("update:pickerValue", returnValue);
-			}
-		}));
-		function onStartPanelHeaderLabelClick(type) {
-			startHeaderMode.value = type;
-		}
-		function onEndPanelHeaderLabelClick(type) {
-			endHeaderMode.value = type;
-		}
-		function onStartPanelHeaderSelect(date) {
-			let newStartValue = startHeaderValue.value;
-			newStartValue = newStartValue.set("year", date.year());
-			if (startHeaderMode.value === "month") newStartValue = newStartValue.set("month", date.month());
-			setHeaderValue([newStartValue, endHeaderValue.value]);
-			startHeaderMode.value = void 0;
-		}
-		function onEndPanelHeaderSelect(date) {
-			let newEndValue = endHeaderValue.value;
-			newEndValue = newEndValue.set("year", date.year());
-			if (endHeaderMode.value === "month") newEndValue = newEndValue.set("month", date.month());
-			setHeaderValue([startHeaderValue.value, newEndValue]);
-			endHeaderMode.value = void 0;
-		}
-		const footerValue = (0, vue.ref)([panelValue.value[0] || require_date.getNow(), panelValue.value[1] || require_date.getNow()]);
-		(0, vue.watch)(panelValue, () => {
-			const [value0, value1] = panelValue.value;
-			footerValue.value[0] = value0 || footerValue.value[0];
-			footerValue.value[1] = value1 || footerValue.value[1];
-		});
-		const [timePickerValue, setTimePickerValue, resetTimePickerValue] = require_use_range_time_picker_value.default((0, vue.reactive)({
-			timePickerProps,
-			selectedValue: panelValue
-		}));
-		const isDateTime = (0, vue.computed)(() => mode.value === "date" && showTime.value);
-		const hasTime = (0, vue.computed)(() => isDateTime.value || timePickerProps.value);
-		const isDisabledDate = require_use_is_disabled_date.default((0, vue.reactive)({
-			mode,
-			isRange: true,
-			showTime,
-			disabledDate,
-			disabledTime
-		}));
-		const needConfirm = (0, vue.computed)(() => isDateTime.value || showConfirmBtn.value);
-		const confirmBtnDisabled = (0, vue.computed)(() => needConfirm.value && (!require_index$4.isCompleteRangeValue(forSelectedValue.value) || isDisabledDate(forSelectedValue.value[0], "start") || isDisabledDate(forSelectedValue.value[1], "end")));
-		(0, vue.watch)(panelVisible, (newVisible) => {
-			startHeaderMode.value = void 0;
-			endHeaderMode.value = void 0;
-			setProcessValue(void 0);
-			setPreviewValue(void 0);
-			if (newVisible) {
-				resetHeaderValue();
-				resetTimePickerValue();
-				focusedIndex.value = getFocusedIndex(focusedIndex.value);
-				(0, vue.nextTick)(() => focusInput(focusedIndex.value));
-			}
-			if (!newVisible) setInputValue(void 0);
-		});
-		(0, vue.watch)(focusedIndex, () => {
-			if (props.disabledInput) {
-				focusInput(focusedIndex.value);
-				setInputValue(void 0);
-			}
-		});
-		function emitChange(value, emitOk) {
-			const returnValue = value ? require_use_value_format.getReturnRangeValue(value, returnValueFormat.value) : void 0;
-			const formattedValue = require_index$3.getFormattedValue(value, parseValueFormat.value);
-			const dateValue = require_date.getDateValue(value);
-			if (require_date.isValueChange(value, selectedValue.value)) {
-				var _eventHandlers$value, _eventHandlers$value$;
-				emit("update:modelValue", returnValue);
-				emit("change", returnValue, dateValue, formattedValue);
-				(_eventHandlers$value = eventHandlers.value) === null || _eventHandlers$value === void 0 || (_eventHandlers$value$ = _eventHandlers$value.onChange) === null || _eventHandlers$value$ === void 0 || _eventHandlers$value$.call(_eventHandlers$value);
-			}
-			if (emitOk) emit("ok", returnValue, dateValue, formattedValue);
-		}
-		function getSortedDayjsArrayByExchangeTimeOrNot(newValue) {
-			let sortedValue = require_date.getSortedDayjsArray(newValue);
-			if (hasTime.value && !mergedExchangeTime.value) sortedValue = [getMergedOpValue(sortedValue[0], newValue[0]), getMergedOpValue(sortedValue[1], newValue[1])];
-			return sortedValue;
-		}
-		function confirm(value, showPanel, emitOk) {
-			if (isDisabledDate(value === null || value === void 0 ? void 0 : value[0], "start") || isDisabledDate(value === null || value === void 0 ? void 0 : value[1], "end")) return;
-			let newValue = value ? [...value] : void 0;
-			if (require_index$4.isCompleteRangeValue(newValue)) newValue = getSortedDayjsArrayByExchangeTimeOrNot(newValue);
-			emitChange(newValue, emitOk);
-			setSelectedValue(newValue || []);
-			setProcessValue(void 0);
-			setPreviewValue(void 0);
-			setInputValue(void 0);
-			startHeaderMode.value = void 0;
-			endHeaderMode.value = void 0;
-			if (require_is.isBoolean(showPanel)) setPanelVisible(showPanel);
-		}
-		function emitSelectEvent(value) {
-			const returnValue = require_use_value_format.getReturnRangeValue(value, returnValueFormat.value);
-			const formattedValue = require_index$3.getFormattedValue(value, parseValueFormat.value);
-			emit("select", returnValue, require_date.getDateValue(value), formattedValue);
-		}
-		function select(value, options) {
-			const { emitSelect = false, updateHeader = false } = options || {};
-			let newValue = [...value];
-			if (require_index$4.isCompleteRangeValue(newValue)) newValue = getSortedDayjsArrayByExchangeTimeOrNot(newValue);
-			setProcessValue(newValue);
-			setPreviewValue(void 0);
-			setInputValue(void 0);
-			startHeaderMode.value = void 0;
-			endHeaderMode.value = void 0;
-			if (emitSelect) emitSelectEvent(newValue);
-			if (updateHeader) resetHeaderValue();
-		}
-		function preview(value, options) {
-			const { updateHeader = false } = options || {};
-			setPreviewValue(value);
-			setInputValue(void 0);
-			if (updateHeader) resetHeaderValue();
-		}
-		function focusInput(index) {
-			refInput.value && refInput.value.focus && refInput.value.focus(index);
-		}
-		function getMergedOpValue(date, time) {
-			if (!hasTime.value) return date;
-			return require_index$4.mergeValueWithTime(require_date.getNow(), date, time);
-		}
-		function onPanelVisibleChange(visible) {
-			setPanelVisible(visible);
-		}
-		function onPanelCellMouseEnter(date) {
-			if (processValue.value && panelValue.value[nextFocusedIndex.value] && (!needConfirm.value || !require_index$4.isCompleteRangeValue(processValue.value))) {
-				const newValue = [...panelValue.value];
-				const mergedOpValue = getMergedOpValue(date, timePickerValue.value[focusedIndex.value]);
-				newValue[focusedIndex.value] = mergedOpValue;
-				preview(newValue);
-			}
-		}
-		function getValueToModify(isTime = false) {
-			if (isNextDisabled.value) return [...selectedValue.value];
-			if (processValue.value) return isTime || !require_index$4.isCompleteRangeValue(processValue.value) ? [...processValue.value] : [];
-			return isTime ? [...selectedValue.value] : [];
-		}
-		function onPanelCellClick(date) {
-			const newValue = getValueToModify();
-			const mergedOpValue = getMergedOpValue(date, timePickerValue.value[focusedIndex.value]);
-			newValue[focusedIndex.value] = mergedOpValue;
-			emitSelectEvent(newValue);
-			if (!needConfirm.value && require_index$4.isCompleteRangeValue(newValue)) confirm(newValue, false);
-			else {
-				select(newValue);
-				if (!require_index$4.isCompleteRangeValue(newValue)) focusedIndex.value = nextFocusedIndex.value;
-				else focusedIndex.value = 0;
-			}
-		}
-		function onTimePickerSelect(time, type) {
-			const updateIndex = type === "start" ? 0 : 1;
-			const mergedOpValue = getMergedOpValue(timePickerValue.value[updateIndex], time);
-			const newTimeValue = [...timePickerValue.value];
-			newTimeValue[updateIndex] = mergedOpValue;
-			setTimePickerValue(newTimeValue);
-			const newValue = getValueToModify(true);
-			if (newValue[updateIndex]) {
-				newValue[updateIndex] = mergedOpValue;
-				select(newValue, { emitSelect: true });
-			}
-		}
-		let clearShortcutPreviewTimer;
-		(0, vue.onUnmounted)(() => {
-			clearTimeout(clearShortcutPreviewTimer);
-		});
-		function onPanelShortcutMouseEnter(value) {
-			clearTimeout(clearShortcutPreviewTimer);
-			preview(value, { updateHeader: true });
-		}
-		function onPanelShortcutMouseLeave() {
-			clearTimeout(clearShortcutPreviewTimer);
-			clearShortcutPreviewTimer = setTimeout(() => {
-				setPreviewValue(void 0);
-				setInputValue(void 0);
-				resetHeaderValue();
-			}, 100);
-		}
-		function onPanelShortcutClick(value, shortcut) {
-			emit("select-shortcut", shortcut);
-			confirm(value, false);
-		}
-		function onPanelConfirm() {
-			confirm(panelValue.value, false, true);
-		}
-		function onInputClear(e) {
-			e.stopPropagation();
-			confirm(void 0);
-			emit("clear");
-		}
-		function onInputChange(e) {
-			setPanelVisible(true);
-			const targetValue = e.target.value;
-			if (!targetValue) {
-				setInputValue(void 0);
-				return;
-			}
-			const formattedPanelValue = require_index$3.getFormattedValue(panelValue.value, computedFormat.value);
-			const newInputValue = require_is.isArray(inputValue.value) ? [...inputValue.value] : formattedPanelValue || [];
-			newInputValue[focusedIndex.value] = targetValue;
-			setInputValue(newInputValue);
-			if (!require_index$3.isValidInputValue(targetValue, computedFormat.value)) return;
-			const targetValueDayjs = require_date.dayjs(targetValue, computedFormat.value);
-			if (isDisabledDate(targetValueDayjs, focusedIndex.value === 0 ? "start" : "end")) return;
-			const newValue = require_is.isArray(panelValue.value) ? [...panelValue.value] : [];
-			newValue[focusedIndex.value] = targetValueDayjs;
-			select(newValue, { updateHeader: true });
-		}
-		function onInputPressEnter() {
-			if (require_index$4.isValidRangeValue(panelValue.value)) confirm(panelValue.value, false);
-			else focusedIndex.value = nextFocusedIndex.value;
-		}
-		const computedTimePickerProps = (0, vue.computed)(() => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({ format: computedFormat.value }, require_omit.omit((timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.value) || {}, ["defaultValue"])), {}, { visible: panelVisible.value }));
-		const headerIcons = (0, vue.computed)(() => ({
-			prev: slots["icon-prev"],
-			prevDouble: slots["icon-prev-double"],
-			next: slots["icon-next"],
-			nextDouble: slots["icon-next-double"]
-		}));
-		const startHeaderProps = (0, vue.reactive)({
-			headerValue: startHeaderValue,
-			headerOperations: startHeaderOperations,
-			headerIcons
-		});
-		const endHeaderProps = (0, vue.reactive)({
-			headerValue: endHeaderValue,
-			headerOperations: endHeaderOperations,
-			headerIcons
-		});
-		return {
-			prefixCls,
-			refInput,
-			computedFormat,
-			computedPlaceholder,
-			panelVisible,
-			panelValue,
-			inputValue,
-			focusedIndex,
-			triggerDisabled,
-			mergedSize,
-			mergedError,
-			onPanelVisibleChange,
-			onInputClear,
-			onInputChange,
-			onInputPressEnter,
-			rangePanelProps: (0, vue.computed)(() => require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, require_pick.default(props, [
-				"mode",
-				"showTime",
-				"shortcuts",
-				"shortcutsPosition",
-				"dayStartOfWeek",
-				"disabledDate",
-				"disabledTime",
-				"hideTrigger",
-				"abbreviation"
-			])), {}, {
-				prefixCls,
-				format: parseValueFormat.value,
-				value: panelValue.value,
-				showConfirmBtn: needConfirm.value,
-				confirmBtnDisabled: confirmBtnDisabled.value,
-				timePickerValue: timePickerValue.value,
-				timePickerProps: computedTimePickerProps.value,
-				extra: slots.extra,
-				dateRender: slots.cell,
-				startHeaderProps,
-				endHeaderProps,
-				footerValue: footerValue.value,
-				disabled: disabledArray.value,
-				visible: panelVisible.value,
-				onCellClick: onPanelCellClick,
-				onCellMouseEnter: onPanelCellMouseEnter,
-				onShortcutClick: onPanelShortcutClick,
-				onShortcutMouseEnter: previewShortcut.value ? onPanelShortcutMouseEnter : void 0,
-				onShortcutMouseLeave: previewShortcut.value ? onPanelShortcutMouseLeave : void 0,
-				onConfirm: onPanelConfirm,
-				onTimePickerSelect,
-				startHeaderMode: startHeaderMode.value,
-				endHeaderMode: endHeaderMode.value,
-				onStartHeaderLabelClick: onStartPanelHeaderLabelClick,
-				onEndHeaderLabelClick: onEndPanelHeaderLabelClick,
-				onStartHeaderSelect: onStartPanelHeaderSelect,
-				onEndHeaderSelect: onEndPanelHeaderSelect
-			}))
-		};
-	}
-});
-//#endregion
-exports.default = range_picker_vue_vue_type_script_lang_default;

package/lib/date-picker/style/css.js

@@ -1,5 +0,0 @@
-require("../../time-picker/style/index.js");
-require("../../link/style/index.js");
-require("../../style/index.css");
-require("../../_components/picker/style/index.css");
-require("./index.css");

package/lib/date-picker/style/date.less

@@ -1,128 +0,0 @@
-@import '../../time-picker/style/token.less';
-
-@date-panel-prefix-cls: ~'@{prefix}-panel-date';
-@time-picker-prefix-cls: ~'@{prefix}-timepicker';
-
-@datepicker-timepicker-height: 276px;
-
-.@{date-panel-prefix-cls} {
-  display: flex;
-  box-sizing: border-box;
-
-  &-inner {
-    width: @picker-panel-date-width;
-  }
-
-  &-inner .@{prefix}-picker-body {
-    padding-top: 0;
-  }
-
-  &-timepicker {
-    display: flex;
-    flex-direction: column;
-    border-left: 1px solid @picker-panel-color-border;
-
-    &-title {
-      width: 100%;
-      height: 40px;
-      color: var(~'@{sd-cssvars-prefix}-color-text-1');
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 40px;
-      text-align: center;
-      border-bottom: 1px solid @picker-panel-color-border;
-    }
-
-    .@{time-picker-prefix-cls} {
-      height: @datepicker-timepicker-height;
-      padding: 0 6px;
-      overflow: hidden;
-
-      &-column {
-        box-sizing: border-box;
-        width: auto;
-        height: 100%;
-        padding: 0 4px;
-
-        &::-webkit-scrollbar {
-          width: 0;
-        }
-      }
-
-      &-column:not(:last-child) {
-        border-right: 0;
-      }
-
-      ul::after {
-        height: @datepicker-timepicker-height - @timepicker-cell-height - @timepicker-cell-spacing *
-          2;
-      }
-
-      &-cell {
-        width: 36px;
-
-        &-inner {
-          padding-left: 10px;
-        }
-      }
-    }
-  }
-
-  &-footer {
-    border-right: 1px solid @picker-panel-color-border;
-  }
-
-  &-with-view-tabs {
-    flex-direction: column;
-    min-width: 265px;
-
-    .@{date-panel-prefix-cls}-timepicker {
-      .@{time-picker-prefix-cls} {
-        &-column {
-          flex: 1;
-
-          &::-webkit-scrollbar {
-            width: 0;
-          }
-        }
-
-        &-cell {
-          width: 100%;
-          text-align: center;
-
-          &-inner {
-            padding-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &-view-tabs {
-    display: flex;
-    border-top: 1px solid @picker-panel-color-border;
-  }
-
-  &-view-tab-pane {
-    flex: 1;
-    height: @datepicker-view-tabs-height;
-    color: @datepicker-view-tab-pane-color-text_unactive;
-    font-size: @datepicker-view-tab-pane-font-size;
-    line-height: @datepicker-view-tabs-height;
-    text-align: center;
-    border-right: 1px solid @picker-panel-color-border;
-    cursor: pointer;
-
-    &:last-child {
-      border-right: none;
-    }
-
-    &-text {
-      margin-left: @datepicker-view-tab-pane-spacing-text-icon;
-    }
-
-    &-active {
-      color: @datepicker-view-tab-pane-color-text_active;
-    }
-  }
-}