@v-c/picker 0.0.1

package/dist/PickerInput/Popup/index.cjs

@@ -0,0 +1,528 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_rolldown_runtime = require("../../_virtual/rolldown_runtime.cjs");
+const require_context = require("../context.cjs");
+const require_miscUtil = require("../../utils/miscUtil.cjs");
+const require_Footer = require("./Footer.cjs");
+const require_PopupPanel = require("./PopupPanel.cjs");
+const require_PresetPanel = require("./PresetPanel.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
+	const activeInfo = (0, vue.computed)(() => props.activeInfo || [
+		0,
+		0,
+		0
+	]);
+	const ctx = require_context.usePickerContext();
+	const panelPrefixCls = (0, vue.computed)(() => `${ctx.value.prefixCls}-panel`);
+	const rtl = (0, vue.computed)(() => props.direction === "rtl");
+	const arrowRef = (0, vue.ref)();
+	const wrapperRef = (0, vue.ref)();
+	const containerWidth = (0, vue.ref)(0);
+	const containerOffset = (0, vue.ref)(0);
+	const arrowOffset = (0, vue.ref)(0);
+	const domRef = (0, vue.shallowRef)();
+	const onResize = (info) => {
+		if (info.width) containerWidth.value = info.width;
+	};
+	(0, vue.onMounted)(() => {
+		if (domRef.value) {
+			const observer = new ResizeObserver((entries) => {
+				const entry = entries[0];
+				onResize(entry, domRef.value);
+			});
+			observer.observe(domRef.value);
+			(0, vue.onUnmounted)(() => {
+				observer.disconnect();
+			});
+		}
+	});
+	const retryTimes = (0, vue.ref)(0);
+	(0, vue.watch)(() => activeInfo.value[0], () => {
+		retryTimes.value = 10;
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	(0, vue.watch)([
+		retryTimes,
+		rtl,
+		activeInfo,
+		() => props.range
+	], () => {
+		const [activeInputLeft, activeInputRight, selectorWidth] = activeInfo.value;
+		if (props.range && wrapperRef.value) {
+			const arrowWidth = arrowRef.value?.offsetWidth || 0;
+			const wrapperRect = wrapperRef.value.getBoundingClientRect();
+			if (!wrapperRect.height || wrapperRect.right < 0) {
+				retryTimes.value = Math.max(0, retryTimes.value - 1);
+				return;
+			}
+			arrowOffset.value = (rtl ? activeInputRight - arrowWidth : activeInputLeft) - wrapperRect.left;
+			if (containerWidth && containerWidth.value < selectorWidth) {
+				const offset = rtl ? wrapperRect.right - (activeInputRight - arrowWidth + containerWidth.value) : activeInputLeft + arrowWidth - wrapperRect.left - containerWidth.value;
+				containerOffset.value = Math.max(0, offset);
+			} else containerOffset.value = 0;
+		}
+	}, {
+		immediate: true,
+		flush: "post"
+	});
+	function filterEmpty(list) {
+		return list.filter((item) => item);
+	}
+	const valueList = (0, vue.computed)(() => filterEmpty(require_miscUtil.toArray(props.value)));
+	const isTimePickerEmptyValue = (0, vue.computed)(() => props.picker === "time" && !valueList.value.length);
+	const footerSubmitValue = (0, vue.computed)(() => {
+		if (isTimePickerEmptyValue.value) return filterEmpty([props.defaultOpenValue]);
+		return valueList.value;
+	});
+	const popupPanelValue = (0, vue.computed)(() => isTimePickerEmptyValue.value ? props.defaultOpenValue : valueList.value);
+	const disableSubmit = (0, vue.computed)(() => {
+		if (!footerSubmitValue.value.length) return true;
+		return footerSubmitValue.value.some((val) => props.isInvalid(val));
+	});
+	const onFooterSubmit = () => {
+		if (isTimePickerEmptyValue.value) props.onSelect?.(props.defaultOpenValue);
+		props.onOk();
+		props.onSubmit();
+	};
+	return () => {
+		const { classNames, panelRender, multiple, showNow, picker, range, presets, onPresetSubmit, onPresetHover, internalMode, styles, onFocus, onBlur, onPanelMouseDown } = props;
+		const onPanelFocusIn = (event) => {
+			onFocus?.(event);
+		};
+		const onPanelFocusOut = (event) => {
+			onBlur?.(event);
+		};
+		const prefixCls = ctx.value.prefixCls;
+		let mergedNodes = (0, vue.createVNode)("div", { "class": `${prefixCls}-panel-layout` }, [(0, vue.createVNode)(require_PresetPanel.default, {
+			"prefixCls": prefixCls,
+			"presets": presets,
+			"onClick": onPresetSubmit,
+			"onHover": onPresetHover
+		}, null), (0, vue.createVNode)("div", null, [(0, vue.createVNode)(require_PopupPanel.default, (0, vue.mergeProps)(props, { "value": popupPanelValue.value }), null), (0, vue.createVNode)(require_Footer.default, (0, vue.mergeProps)((0, _v_c_util.omit)(props, ["onSubmit"]), {
+			"showNow": multiple ? false : showNow,
+			"invalid": disableSubmit.value,
+			"onSubmit": onFooterSubmit
+		}), null)])]);
+		if (panelRender) mergedNodes = panelRender(mergedNodes);
+		const containerPrefixCls = `${panelPrefixCls.value}-container`;
+		const marginLeft = "marginLeft";
+		const marginRight = "marginRight";
+		let renderNode = (0, vue.createVNode)("div", {
+			"ref": domRef,
+			"onMousedown": onPanelMouseDown,
+			"tabindex": -1,
+			"class": (0, _v_c_util.clsx)(containerPrefixCls, `${ctx.value.prefixCls}-${internalMode}-panel-container`, classNames?.popup?.container),
+			"style": {
+				[rtl ? marginRight : marginLeft]: containerOffset,
+				[rtl ? marginLeft : marginRight]: "auto",
+				...styles?.popup?.container
+			},
+			"onFocusin": onPanelFocusIn,
+			"onFocusout": onPanelFocusOut
+		}, [mergedNodes]);
+		if (range) renderNode = (0, vue.createVNode)("div", {
+			"onMousedown": onPanelMouseDown,
+			"ref": wrapperRef,
+			"class": (0, _v_c_util.clsx)(`${ctx.value.prefixCls}-range-wrapper`, `${ctx.value.prefixCls}-${picker}-range-wrapper`)
+		}, [(0, vue.createVNode)("div", {
+			"ref": arrowRef,
+			"class": `${ctx.value.prefixCls}-range-arrow`,
+			"style": { left: `${arrowOffset.value}px` }
+		}, null), renderNode]);
+		return renderNode;
+	};
+}, {
+	props: {
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		mode: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		internalMode: {
+			type: String,
+			required: true,
+			default: void 0
+		},
+		renderExtraFooter: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		showNow: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		generateConfig: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		disabledDate: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		showTime: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onSubmit: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		needConfirm: {
+			type: [Boolean, null],
+			required: true,
+			default: void 0
+		},
+		onNow: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		multiplePanel: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		range: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onPickerValueChange: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onPanelChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		direction: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onSelect: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		defaultPickerValue: {
+			required: false,
+			default: void 0
+		},
+		pickerValue: {
+			required: false,
+			default: void 0
+		},
+		picker: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showWeek: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		cellRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		dateRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		monthCellRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		hoverValue: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		hoverRangeValue: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		onHover: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		hideHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		locale: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		minDate: {
+			required: false,
+			default: void 0
+		},
+		maxDate: {
+			required: false,
+			default: void 0
+		},
+		prevIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		nextIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		superPrevIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		superNextIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		format: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		showHour: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showMinute: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showSecond: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showMillisecond: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		use12Hours: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hourStep: {
+			required: false,
+			default: void 0
+		},
+		minuteStep: {
+			required: false,
+			default: void 0
+		},
+		secondStep: {
+			required: false,
+			default: void 0
+		},
+		millisecondStep: {
+			required: false,
+			default: void 0
+		},
+		hideDisabledOptions: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [Array, null],
+			required: false,
+			default: void 0
+		},
+		defaultOpenValue: {
+			type: void 0,
+			required: false,
+			default: void 0
+		},
+		disabledHours: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledMinutes: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledSeconds: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		disabledTime: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		changeOnScroll: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		tabindex: {
+			type: [
+				Number,
+				String,
+				null
+			],
+			required: false,
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		value: {
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		panelRender: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		presets: {
+			type: Array,
+			required: true,
+			default: void 0
+		},
+		onPresetHover: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onPresetSubmit: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		activeInfo: {
+			type: Array,
+			required: false,
+			default: void 0
+		},
+		isInvalid: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onOk: {
+			required: true,
+			default: void 0
+		},
+		onPanelMouseDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		}
+	},
+	name: "Popup",
+	inheritAttrs: false
+});
+var Popup_default = Popup;
+exports.default = Popup_default;

package/dist/PickerInput/Popup/index.d.ts

@@ -0,0 +1,37 @@
+import { MouseEventHandler } from '../../../../util/src/EventInterface';
+import { InputHTMLAttributes } from 'vue';
+import { RangeTimeProps, SharedPickerProps, SharedTimeProps, ValueDate } from '../../interface';
+import { FooterProps } from './Footer';
+import { PopupPanelProps } from './PopupPanel';
+export type PopupShowTimeConfig<DateType extends object = any> = Omit<RangeTimeProps<DateType>, 'defaultValue' | 'defaultOpenValue' | 'disabledTime'> & Pick<SharedTimeProps<DateType>, 'disabledTime'>;
+export type PopupProps<DateType extends object = any, PresetValue = DateType> = Pick<InputHTMLAttributes, 'onFocus' | 'onBlur'> & FooterProps<DateType> & PopupPanelProps<DateType> & {
+    panelRender?: SharedPickerProps['panelRender'];
+    presets: ValueDate<PresetValue>[];
+    onPresetHover: (presetValue: PresetValue | null) => void;
+    onPresetSubmit: (presetValue: PresetValue) => void;
+    activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
+    direction?: 'ltr' | 'rtl';
+    defaultOpenValue: DateType;
+    needConfirm: boolean | undefined;
+    isInvalid: (date: DateType | DateType[]) => boolean;
+    onOk: VoidFunction;
+    onPanelMouseDown?: MouseEventHandler;
+    classNames?: SharedPickerProps['classNames'];
+    styles?: SharedPickerProps['styles'];
+};
+declare const Popup: import('vue').DefineSetupFnComponent<PopupProps<any, any>, {}, {}, Pick<InputHTMLAttributes, "onFocus" | "onBlur"> & FooterProps<any> & PopupPanelProps<any> & {
+    panelRender?: SharedPickerProps["panelRender"];
+    presets: ValueDate<any>[];
+    onPresetHover: (presetValue: any) => void;
+    onPresetSubmit: (presetValue: any) => void;
+    activeInfo?: [activeInputLeft: number, activeInputRight: number, selectorWidth: number];
+    direction?: "ltr" | "rtl";
+    defaultOpenValue: any;
+    needConfirm: boolean | undefined;
+    isInvalid: (date: any) => boolean;
+    onOk: VoidFunction;
+    onPanelMouseDown?: MouseEventHandler;
+    classNames?: SharedPickerProps["classNames"];
+    styles?: SharedPickerProps["styles"];
+} & {}, import('vue').PublicProps>;
+export default Popup;