@v-c/picker 0.0.1

package/dist/PickerInput/Selector/Icon.cjs

@@ -0,0 +1,89 @@
+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");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var Icon = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
+	const ctx = require_context.usePickerContext();
+	return () => {
+		const { icon, type } = props;
+		if (!icon) return null;
+		const { prefixCls, classNames, styles } = ctx.value;
+		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+		const mergedAttrStyle = attrStyle && typeof attrStyle === "object" ? attrStyle : {};
+		return (0, vue.createVNode)("span", (0, vue.mergeProps)(restAttrs, {
+			"class": (0, _v_c_util.clsx)(`${prefixCls}-${type}`, classNames.suffix, attrClass),
+			"style": {
+				...styles.suffix || {},
+				...mergedAttrStyle
+			}
+		}), [icon]);
+	};
+}, {
+	props: {
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "Icon",
+	inheritAttrs: false
+});
+var Icon_default = Icon;
+const ClearIcon = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs }) => {
+	return () => {
+		return (0, vue.createVNode)(Icon, (0, vue.mergeProps)(attrs, {
+			"icon": props.icon,
+			"type": "clear",
+			"role": "button",
+			"onMousedown": (e) => {
+				e.preventDefault();
+			},
+			"onClick": (e) => {
+				e.stopPropagation();
+				props.onClear();
+			}
+		}), null);
+	};
+}, {
+	props: {
+		onClear: {
+			required: true,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ClearIcon",
+	inheritAttrs: false
+});
+exports.ClearIcon = ClearIcon;
+exports.default = Icon_default;

package/dist/PickerInput/Selector/Icon.d.ts

@@ -0,0 +1,11 @@
+import { VueNode } from '../../../../util/src/type';
+export interface IconProps {
+    icon?: VueNode;
+    type: 'suffix' | 'clear';
+}
+declare const Icon: import('vue').DefineSetupFnComponent<IconProps, {}, {}, IconProps & {}, import('vue').PublicProps>;
+export default Icon;
+export interface ClearIconProps extends Omit<IconProps, 'type'> {
+    onClear: VoidFunction;
+}
+export declare const ClearIcon: import('vue').DefineSetupFnComponent<ClearIconProps, {}, {}, ClearIconProps & {}, import('vue').PublicProps>;

package/dist/PickerInput/Selector/Icon.js

@@ -0,0 +1,83 @@
+import { usePickerContext } from "../context.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+import { clsx } from "@v-c/util";
+var Icon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	const ctx = usePickerContext();
+	return () => {
+		const { icon, type } = props;
+		if (!icon) return null;
+		const { prefixCls, classNames, styles } = ctx.value;
+		const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+		const mergedAttrStyle = attrStyle && typeof attrStyle === "object" ? attrStyle : {};
+		return createVNode("span", mergeProps(restAttrs, {
+			"class": clsx(`${prefixCls}-${type}`, classNames.suffix, attrClass),
+			"style": {
+				...styles.suffix || {},
+				...mergedAttrStyle
+			}
+		}), [icon]);
+	};
+}, {
+	props: {
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: String,
+			required: true,
+			default: void 0
+		}
+	},
+	name: "Icon",
+	inheritAttrs: false
+});
+var Icon_default = Icon;
+const ClearIcon = /* @__PURE__ */ defineComponent((props, { attrs }) => {
+	return () => {
+		return createVNode(Icon, mergeProps(attrs, {
+			"icon": props.icon,
+			"type": "clear",
+			"role": "button",
+			"onMousedown": (e) => {
+				e.preventDefault();
+			},
+			"onClick": (e) => {
+				e.stopPropagation();
+				props.onClear();
+			}
+		}), null);
+	};
+}, {
+	props: {
+		onClear: {
+			required: true,
+			default: void 0
+		},
+		icon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "ClearIcon",
+	inheritAttrs: false
+});
+export { ClearIcon, Icon_default as default };

package/dist/PickerInput/Selector/Input.cjs

@@ -0,0 +1,376 @@
+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_util = require("./util.cjs");
+const require_useLockEffect = require("../hooks/useLockEffect.cjs");
+const require_Icon = require("./Icon.cjs");
+const require_MaskFormat = require("./MaskFormat.cjs");
+let vue = require("vue");
+let _v_c_util = require("@v-c/util");
+var Input = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, expose }) => {
+	const pickerCtx = require_context.usePickerContext();
+	const prefixCls = (0, vue.computed)(() => pickerCtx.value.prefixCls);
+	const classNames = (0, vue.computed)(() => pickerCtx.value.classNames);
+	const styles = (0, vue.computed)(() => pickerCtx.value.styles);
+	const inputPrefixCls = (0, vue.computed)(() => `${prefixCls.value}-input`);
+	const focused = (0, vue.ref)(false);
+	const internalInputValue = (0, vue.ref)(props.value);
+	const focusCellText = (0, vue.ref)("");
+	const focusCellIndex = (0, vue.ref)(null);
+	const forceSelectionSyncMark = (0, vue.ref)(null);
+	const inputValue = (0, vue.computed)(() => internalInputValue.value || "");
+	(0, vue.watch)(() => props.value, (val) => {
+		internalInputValue.value = val;
+	});
+	const holderRef = (0, vue.ref)();
+	const inputRef = (0, vue.ref)();
+	expose({
+		get nativeElement() {
+			return holderRef.value;
+		},
+		get inputElement() {
+			return inputRef.value;
+		},
+		focus: (options) => {
+			inputRef.value?.focus(options);
+		},
+		blur: () => {
+			inputRef.value?.blur();
+		}
+	});
+	const maskFormat = (0, vue.computed)(() => new require_MaskFormat.default(props.format || ""));
+	const selectionRange = (0, vue.computed)(() => {
+		if (props.helped) return [0, 0];
+		return maskFormat.value.getSelection(focusCellIndex.value);
+	});
+	const selectionStart = (0, vue.computed)(() => selectionRange.value[0]);
+	const selectionEnd = (0, vue.computed)(() => selectionRange.value[1]);
+	const onModify = (text) => {
+		if (text && text !== props.format && text !== props.value) props?.onHelp?.();
+	};
+	const triggerInputChange = (text) => {
+		if (props.validateFormat?.(text)) props?.onChange?.(text);
+		internalInputValue.value = text;
+		onModify(text);
+	};
+	const onInternalChange = (event) => {
+		const target = event.target;
+		if (!props.format) {
+			const text = target.value;
+			onModify(text);
+			internalInputValue.value = text;
+			props?.onChange?.(text);
+		}
+	};
+	const onFormatPaste = (event) => {
+		const pasteText = event.clipboardData?.getData("text") || "";
+		if (props?.validateFormat?.(pasteText)) triggerInputChange(pasteText);
+	};
+	const mouseDownRef = (0, vue.ref)(false);
+	const onFormatMouseDown = () => {
+		mouseDownRef.value = true;
+	};
+	const onFormatMouseUp = (event) => {
+		const { selectionStart: start } = event.target;
+		focusCellIndex.value = maskFormat.value.getMaskCellIndex(start);
+		forceSelectionSyncMark.value = {};
+		props.onMouseUp?.(event);
+		mouseDownRef.value = false;
+	};
+	const onFormatFocus = (event) => {
+		focused.value = true;
+		focusCellIndex.value = 0;
+		focusCellText.value = "";
+		props.onFocus?.(event);
+	};
+	const onSharedBlur = (event) => {
+		props.onBlur?.(event);
+	};
+	const onFormatBlur = (event) => {
+		focused.value = false;
+		onSharedBlur(event);
+	};
+	require_useLockEffect.default((0, vue.toRef)(props, "active"), () => {
+		if (!props.active && !props.preserveInvalidOnBlur) internalInputValue.value = props.value;
+	});
+	const onSharedKeyDown = (event) => {
+		if (event.key === "Enter" && props?.validateFormat?.(inputValue.value)) props?.onSubmit?.();
+		props.onKeyDown?.(event);
+	};
+	const onFormatKeyDown = (event) => {
+		onSharedKeyDown(event);
+		const { key } = event;
+		let nextCellText = null;
+		let nextFillText = null;
+		const maskCellLen = selectionEnd.value - selectionStart.value;
+		const cellFormat = props.format.slice(selectionStart.value, selectionEnd.value);
+		const offsetCellIndex = (offset) => {
+			let nextIndex = focusCellIndex.value + offset;
+			nextIndex = Math.max(nextIndex, 0);
+			nextIndex = Math.min(nextIndex, maskFormat.value.size() - 1);
+			focusCellIndex.value = nextIndex;
+		};
+		const offsetCellValue = (offset) => {
+			const [rangeStart, rangeEnd, rangeDefault] = require_util.getMaskRange(cellFormat);
+			const currentText = inputValue.value.slice(selectionStart.value, selectionEnd.value);
+			const currentTextNum = Number(currentText);
+			if (Number.isNaN(currentTextNum)) return String(rangeDefault || (offset > 0 ? rangeStart : rangeEnd));
+			const num = currentTextNum + offset;
+			const range = rangeEnd - rangeStart + 1;
+			return String(rangeStart + (range + num - rangeStart) % range);
+		};
+		switch (key) {
+			case "Backspace":
+			case "Delete":
+				nextCellText = "";
+				nextFillText = cellFormat;
+				break;
+			case "ArrowLeft":
+				nextCellText = "";
+				offsetCellIndex(-1);
+				break;
+			case "ArrowRight":
+				nextCellText = "";
+				offsetCellIndex(1);
+				break;
+			case "ArrowUp":
+				nextCellText = "";
+				nextFillText = offsetCellValue(1);
+				break;
+			case "ArrowDown":
+				nextCellText = "";
+				nextFillText = offsetCellValue(-1);
+				break;
+			default:
+				if (!Number.isNaN(Number(key))) {
+					nextCellText = focusCellText.value + key;
+					nextFillText = nextCellText;
+				}
+				break;
+		}
+		if (nextCellText !== null) {
+			focusCellText.value = nextCellText;
+			if (nextCellText.length >= maskCellLen) {
+				offsetCellIndex(1);
+				focusCellText.value = "";
+			}
+		}
+		if (nextFillText !== null) triggerInputChange((inputValue.value.slice(0, selectionStart.value) + require_miscUtil.leftPad(nextFillText, maskCellLen) + inputValue.value.slice(selectionEnd.value)).slice(0, props.format.length));
+		forceSelectionSyncMark.value = {};
+	};
+	const rafRef = (0, vue.ref)();
+	(0, vue.watch)([
+		maskFormat,
+		() => props.format,
+		focused,
+		inputValue,
+		focusCellIndex,
+		selectionStart,
+		selectionEnd,
+		forceSelectionSyncMark
+	], () => {
+		if (!focused.value || !props.format || mouseDownRef.value) return;
+		if (!maskFormat.value.match(inputValue.value)) {
+			triggerInputChange(props.format);
+			return;
+		}
+		inputRef.value?.setSelectionRange(selectionStart.value, selectionEnd.value);
+		rafRef.value = require_util.raf(() => {
+			inputRef.value?.setSelectionRange(selectionStart.value, selectionEnd.value);
+		});
+	}, { flush: "post" });
+	(0, vue.onBeforeUnmount)(() => {
+		require_util.raf.cancel(rafRef.value);
+	});
+	return () => {
+		const { className, active, showActiveCls, suffixIcon, format, validateFormat, onChange, onInput, helped, onHelp, onSubmit, onKeyDown, preserveInvalidOnBlur, invalid, clearIcon, ...restProps } = props;
+		const inputProps = props.format ? {
+			onFocus: onFormatFocus,
+			onBlur: onFormatBlur,
+			onKeydown: onFormatKeyDown,
+			onMousedown: onFormatMouseDown,
+			onMouseup: onFormatMouseUp,
+			onPaste: onFormatPaste
+		} : {};
+		const Component = pickerCtx.value.input ?? "input";
+		return (0, vue.createVNode)("div", {
+			"ref": holderRef,
+			"class": (0, _v_c_util.clsx)(inputPrefixCls.value, {
+				[`${inputPrefixCls.value}-active`]: props.active && props.showActiveCls,
+				[`${inputPrefixCls.value}-placeholder`]: props.helped
+			}, attrs.class),
+			"style": attrs.style
+		}, [
+			(0, vue.createVNode)(Component, (0, vue.mergeProps)({
+				"ref": inputRef,
+				"aria-invalid": props.invalid,
+				"autoComplete": "off"
+			}, attrs, restProps, {
+				"onKeydown": onSharedKeyDown,
+				"onBlur": onSharedBlur
+			}, inputProps, {
+				"value": inputValue.value,
+				"onInput": onInternalChange,
+				"class": classNames.value.input,
+				"style": styles.value.input,
+				"readonly": props.inputReadOnly
+			}), null),
+			(0, vue.createVNode)(require_Icon.default, {
+				"type": "suffix",
+				"icon": props.suffixIcon
+			}, null),
+			props.clearIcon
+		]);
+	};
+}, {
+	props: {
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		"aria-required": {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		name: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		size: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		id: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onFocus: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onBlur: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		format: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		validateFormat: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		active: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		showActiveCls: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		suffixIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		value: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		onSubmit: {
+			required: true,
+			default: void 0
+		},
+		helped: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onHelp: {
+			type: Function,
+			required: true,
+			default: void 0
+		},
+		preserveInvalidOnBlur: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		clearIcon: {
+			type: [
+				Object,
+				Function,
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "Input",
+	inheritAttrs: false
+});
+var Input_default = Input;
+exports.default = Input_default;

package/dist/PickerInput/Selector/Input.d.ts

@@ -0,0 +1,9 @@
+import { InputProps } from './hooks/useInputHooks.ts';
+export interface InputRef {
+    nativeElement?: HTMLDivElement;
+    inputElement?: HTMLInputElement;
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+}
+declare const Input: import('vue').DefineSetupFnComponent<InputProps, {}, {}, InputProps & {}, import('vue').PublicProps>;
+export default Input;