@v-c/picker 0.0.1

package/dist/PickerInput/Selector/Input.js

@@ -0,0 +1,370 @@
+import { usePickerContext } from "../context.js";
+import { leftPad } from "../../utils/miscUtil.js";
+import { getMaskRange, raf as raf$1 } from "./util.js";
+import useLockEffect from "../hooks/useLockEffect.js";
+import Icon_default from "./Icon.js";
+import MaskFormat from "./MaskFormat.js";
+import { computed, createVNode, defineComponent, mergeProps, onBeforeUnmount, ref, toRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+var Input_default = /* @__PURE__ */ defineComponent((props, { attrs, expose }) => {
+	const pickerCtx = usePickerContext();
+	const prefixCls = computed(() => pickerCtx.value.prefixCls);
+	const classNames = computed(() => pickerCtx.value.classNames);
+	const styles = computed(() => pickerCtx.value.styles);
+	const inputPrefixCls = computed(() => `${prefixCls.value}-input`);
+	const focused = ref(false);
+	const internalInputValue = ref(props.value);
+	const focusCellText = ref("");
+	const focusCellIndex = ref(null);
+	const forceSelectionSyncMark = ref(null);
+	const inputValue = computed(() => internalInputValue.value || "");
+	watch(() => props.value, (val) => {
+		internalInputValue.value = val;
+	});
+	const holderRef = ref();
+	const inputRef = ref();
+	expose({
+		get nativeElement() {
+			return holderRef.value;
+		},
+		get inputElement() {
+			return inputRef.value;
+		},
+		focus: (options) => {
+			inputRef.value?.focus(options);
+		},
+		blur: () => {
+			inputRef.value?.blur();
+		}
+	});
+	const maskFormat = computed(() => new MaskFormat(props.format || ""));
+	const selectionRange = computed(() => {
+		if (props.helped) return [0, 0];
+		return maskFormat.value.getSelection(focusCellIndex.value);
+	});
+	const selectionStart = computed(() => selectionRange.value[0]);
+	const selectionEnd = 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 = 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);
+	};
+	useLockEffect(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] = 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) + leftPad(nextFillText, maskCellLen) + inputValue.value.slice(selectionEnd.value)).slice(0, props.format.length));
+		forceSelectionSyncMark.value = {};
+	};
+	const rafRef = ref();
+	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 = raf$1(() => {
+			inputRef.value?.setSelectionRange(selectionStart.value, selectionEnd.value);
+		});
+	}, { flush: "post" });
+	onBeforeUnmount(() => {
+		raf$1.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 createVNode("div", {
+			"ref": holderRef,
+			"class": clsx(inputPrefixCls.value, {
+				[`${inputPrefixCls.value}-active`]: props.active && props.showActiveCls,
+				[`${inputPrefixCls.value}-placeholder`]: props.helped
+			}, attrs.class),
+			"style": attrs.style
+		}, [
+			createVNode(Component, 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),
+			createVNode(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
+});
+export { Input_default as default };

package/dist/PickerInput/Selector/MaskFormat.cjs

@@ -0,0 +1,72 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+var FORMAT_KEYS = [
+	"YYYY",
+	"MM",
+	"DD",
+	"HH",
+	"mm",
+	"ss",
+	"SSS"
+];
+var REPLACE_KEY = "顧";
+var MaskFormat = class {
+	format;
+	maskFormat;
+	cells;
+	maskCells;
+	constructor(format) {
+		this.format = format;
+		const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join("|");
+		const replaceReg = new RegExp(replaceKeys, "g");
+		this.maskFormat = format.replace(replaceReg, (key) => REPLACE_KEY.repeat(key.length));
+		const cellReg = /* @__PURE__ */ new RegExp(`(${FORMAT_KEYS.join("|")})`);
+		const strCells = (format.split(cellReg) || []).filter((str) => str);
+		let offset = 0;
+		this.cells = strCells.map((text) => {
+			const mask = FORMAT_KEYS.includes(text);
+			const start = offset;
+			const end = offset + text.length;
+			offset = end;
+			return {
+				text,
+				mask,
+				start,
+				end
+			};
+		});
+		this.maskCells = this.cells.filter((cell) => cell.mask);
+	}
+	getSelection(maskCellIndex) {
+		const { start, end } = this.maskCells[maskCellIndex] || {};
+		return [start || 0, end || 0];
+	}
+	match(text) {
+		for (let i = 0; i < this.maskFormat.length; i += 1) {
+			const maskChar = this.maskFormat[i];
+			const textChar = text[i];
+			if (!textChar || maskChar !== REPLACE_KEY && maskChar !== textChar) return false;
+		}
+		return true;
+	}
+	size() {
+		return this.maskCells.length;
+	}
+	getMaskCellIndex(anchorIndex) {
+		let closetDist = Number.MAX_SAFE_INTEGER;
+		let closetIndex = 0;
+		for (let i = 0; i < this.maskCells.length; i += 1) {
+			const { start, end } = this.maskCells[i];
+			if (anchorIndex >= start && anchorIndex <= end) return i;
+			const dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));
+			if (dist < closetDist) {
+				closetDist = dist;
+				closetIndex = i;
+			}
+		}
+		return closetIndex;
+	}
+};
+exports.default = MaskFormat;

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

@@ -0,0 +1,22 @@
+declare const FORMAT_KEYS: readonly ["YYYY", "MM", "DD", "HH", "mm", "ss", "SSS"];
+export type FormatKey = (typeof FORMAT_KEYS)[number];
+export interface Cell {
+    text: string;
+    mask: boolean;
+    start: number;
+    end: number;
+}
+export default class MaskFormat {
+    format: string;
+    maskFormat: string;
+    cells: Cell[];
+    maskCells: Cell[];
+    constructor(format: string);
+    getSelection(maskCellIndex: number): [start: number, end: number];
+    /** Check given text match format */
+    match(text: string): boolean;
+    /** Get mask cell count */
+    size(): number;
+    getMaskCellIndex(anchorIndex: number): number;
+}
+export {};

package/dist/PickerInput/Selector/MaskFormat.js

@@ -0,0 +1,68 @@
+var FORMAT_KEYS = [
+	"YYYY",
+	"MM",
+	"DD",
+	"HH",
+	"mm",
+	"ss",
+	"SSS"
+];
+var REPLACE_KEY = "顧";
+var MaskFormat = class {
+	format;
+	maskFormat;
+	cells;
+	maskCells;
+	constructor(format) {
+		this.format = format;
+		const replaceKeys = FORMAT_KEYS.map((key) => `(${key})`).join("|");
+		const replaceReg = new RegExp(replaceKeys, "g");
+		this.maskFormat = format.replace(replaceReg, (key) => REPLACE_KEY.repeat(key.length));
+		const cellReg = /* @__PURE__ */ new RegExp(`(${FORMAT_KEYS.join("|")})`);
+		const strCells = (format.split(cellReg) || []).filter((str) => str);
+		let offset = 0;
+		this.cells = strCells.map((text) => {
+			const mask = FORMAT_KEYS.includes(text);
+			const start = offset;
+			const end = offset + text.length;
+			offset = end;
+			return {
+				text,
+				mask,
+				start,
+				end
+			};
+		});
+		this.maskCells = this.cells.filter((cell) => cell.mask);
+	}
+	getSelection(maskCellIndex) {
+		const { start, end } = this.maskCells[maskCellIndex] || {};
+		return [start || 0, end || 0];
+	}
+	match(text) {
+		for (let i = 0; i < this.maskFormat.length; i += 1) {
+			const maskChar = this.maskFormat[i];
+			const textChar = text[i];
+			if (!textChar || maskChar !== REPLACE_KEY && maskChar !== textChar) return false;
+		}
+		return true;
+	}
+	size() {
+		return this.maskCells.length;
+	}
+	getMaskCellIndex(anchorIndex) {
+		let closetDist = Number.MAX_SAFE_INTEGER;
+		let closetIndex = 0;
+		for (let i = 0; i < this.maskCells.length; i += 1) {
+			const { start, end } = this.maskCells[i];
+			if (anchorIndex >= start && anchorIndex <= end) return i;
+			const dist = Math.min(Math.abs(anchorIndex - start), Math.abs(anchorIndex - end));
+			if (dist < closetDist) {
+				closetDist = dist;
+				closetIndex = i;
+			}
+		}
+		return closetIndex;
+	}
+};
+export { MaskFormat as default };