@sdata/web-vue 3.27.0 → 3.28.0

package/es/input-mask/input-mask.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,346 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import { getPrefixCls } from "../_utils/global-config.js";
+import Input from "../input/index.js";
+import { formatInputMask, resolveDeletion } from "./mask-engine.js";
+import { inputMaskPresets } from "./presets.js";
+import { computed, createBlock, createSlots, defineComponent, mergeProps, nextTick, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useAttrs, watch, withCtx } from "vue";
+//#region components/input-mask/input-mask.vue?vue&type=script&setup=true&lang.ts
+var input_mask_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "InputMask",
+	inheritAttrs: false
+}), {}, {
+	__name: "input-mask",
+	props: {
+		modelValue: {},
+		defaultValue: { default: "" },
+		mask: {},
+		preset: {},
+		maskChar: { default: "_" },
+		formatChars: {},
+		alwaysShowMask: {
+			type: Boolean,
+			default: false
+		},
+		beforeMaskedValueChange: {},
+		size: {},
+		allowClear: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: [Boolean, String],
+			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
+		},
+		placeholder: {},
+		fitWidth: {
+			type: Boolean,
+			default: false
+		},
+		maxWFull: {
+			type: Boolean,
+			default: true
+		},
+		showWordLimit: {
+			type: Boolean,
+			default: false
+		},
+		maxLength: {},
+		wordLength: {},
+		wordSlice: {},
+		inputAttrs: {},
+		prepend: {},
+		append: {}
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"complete",
+		"pressEnter",
+		"clear",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		var _props$modelValue;
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const prefixCls = getPrefixCls("input-mask");
+		const inputComponentRef = ref();
+		const focused = ref(false);
+		const lastSelection = ref(null);
+		const complete = ref(false);
+		const presetDefinition = computed(() => props.preset ? inputMaskPresets[props.preset] : void 0);
+		const effectiveMask = computed(() => {
+			var _props$mask, _presetDefinition$val;
+			return (_props$mask = props.mask) !== null && _props$mask !== void 0 ? _props$mask : (_presetDefinition$val = presetDefinition.value) === null || _presetDefinition$val === void 0 ? void 0 : _presetDefinition$val.mask;
+		});
+		const effectiveFormatChars = computed(() => {
+			var _presetDefinition$val2;
+			return _objectSpread2(_objectSpread2({}, (_presetDefinition$val2 = presetDefinition.value) === null || _presetDefinition$val2 === void 0 ? void 0 : _presetDefinition$val2.formatChars), props.formatChars);
+		});
+		const effectiveMaskChar = computed(() => {
+			var _Array$from$;
+			if (props.maskChar === null) return null;
+			return (_Array$from$ = Array.from(props.maskChar)[0]) !== null && _Array$from$ !== void 0 ? _Array$from$ : "_";
+		});
+		const lengthManaged = computed(() => Boolean(effectiveMask.value) || Boolean(props.preset));
+		const normalizePresetValue = (value, previousValue) => {
+			var _preset$normalize, _preset$normalize2, _preset$accepts;
+			const preset = presetDefinition.value;
+			if (!preset || effectiveMask.value) return value;
+			const normalized = (_preset$normalize = (_preset$normalize2 = preset.normalize) === null || _preset$normalize2 === void 0 ? void 0 : _preset$normalize2.call(preset, value)) !== null && _preset$normalize !== void 0 ? _preset$normalize : value;
+			return ((_preset$accepts = preset.accepts) === null || _preset$accepts === void 0 ? void 0 : _preset$accepts.call(preset, normalized)) === false ? previousValue : normalized;
+		};
+		const applyNormalization = (value) => {
+			if (effectiveMask.value) {
+				const result = formatInputMask(value, null, effectiveMask.value, {
+					maskChar: effectiveMaskChar.value,
+					showMask: Boolean(value),
+					formatChars: effectiveFormatChars.value
+				});
+				return {
+					value: result.value,
+					complete: result.complete
+				};
+			}
+			return {
+				value: normalizePresetValue(value, ""),
+				complete: false
+			};
+		};
+		const normalizeStoredValue = (value) => applyNormalization(value).value;
+		const innerValue = ref(normalizeStoredValue((_props$modelValue = props.modelValue) !== null && _props$modelValue !== void 0 ? _props$modelValue : props.defaultValue));
+		const displayValue = computed(() => {
+			if (!effectiveMask.value) return innerValue.value;
+			return formatInputMask(innerValue.value, null, effectiveMask.value, {
+				maskChar: effectiveMaskChar.value,
+				showMask: focused.value || props.alwaysShowMask || Boolean(innerValue.value),
+				formatChars: effectiveFormatChars.value
+			}).value;
+		});
+		const mergedPlaceholder = computed(() => {
+			var _props$placeholder, _presetDefinition$val3;
+			return (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : (_presetDefinition$val3 = presetDefinition.value) === null || _presetDefinition$val3 === void 0 ? void 0 : _presetDefinition$val3.placeholder;
+		});
+		const mergedInputAttrs = computed(() => {
+			var _presetDefinition$val4;
+			const result = _objectSpread2({}, props.inputAttrs);
+			if (result.inputmode === void 0 && ((_presetDefinition$val4 = presetDefinition.value) === null || _presetDefinition$val4 === void 0 ? void 0 : _presetDefinition$val4.inputMode)) result.inputmode = presetDefinition.value.inputMode;
+			if (props.preset) result["data-mask-preset"] = props.preset;
+			return result;
+		});
+		const forwardedAttrs = computed(() => _objectSpread2(_objectSpread2({}, attrs), {}, { class: [prefixCls, attrs.class] }));
+		const getInputElement = () => {
+			var _inputComponentRef$va;
+			return (_inputComponentRef$va = inputComponentRef.value) === null || _inputComponentRef$va === void 0 ? void 0 : _inputComponentRef$va.inputRef;
+		};
+		const syncComplete = (value, nextComplete) => {
+			if (nextComplete && !complete.value) emit("complete", value);
+			complete.value = nextComplete;
+		};
+		const commitValue = (rawValue) => {
+			var _input$selectionStart, _props$beforeMaskedVa, _props$beforeMaskedVa2;
+			const input = getInputElement();
+			const rawCursor = (_input$selectionStart = input === null || input === void 0 ? void 0 : input.selectionStart) !== null && _input$selectionStart !== void 0 ? _input$selectionStart : rawValue.length;
+			const previousState = {
+				value: innerValue.value,
+				selection: lastSelection.value
+			};
+			let nextState;
+			let nextComplete = false;
+			if (effectiveMask.value) {
+				const deletion = lastSelection.value ? resolveDeletion(innerValue.value, lastSelection.value, rawValue, rawCursor, effectiveMask.value, effectiveFormatChars.value, effectiveMaskChar.value) : null;
+				if (deletion) {
+					nextState = {
+						value: deletion.value,
+						selection: {
+							start: deletion.cursor,
+							end: deletion.cursor
+						}
+					};
+					nextComplete = deletion.complete;
+				} else {
+					const result = formatInputMask(rawValue, rawCursor, effectiveMask.value, {
+						maskChar: effectiveMaskChar.value,
+						showMask: focused.value || props.alwaysShowMask || Boolean(rawValue),
+						formatChars: effectiveFormatChars.value
+					});
+					nextState = {
+						value: result.value,
+						selection: result.selection
+					};
+					nextComplete = result.complete;
+				}
+			} else {
+				const value = normalizePresetValue(rawValue, innerValue.value);
+				const cursor = rawCursor === rawValue.length ? value.length : Math.min(rawCursor, value.length);
+				nextState = {
+					value,
+					selection: {
+						start: cursor,
+						end: cursor
+					}
+				};
+			}
+			nextState = (_props$beforeMaskedVa = (_props$beforeMaskedVa2 = props.beforeMaskedValueChange) === null || _props$beforeMaskedVa2 === void 0 ? void 0 : _props$beforeMaskedVa2.call(props, nextState, previousState)) !== null && _props$beforeMaskedVa !== void 0 ? _props$beforeMaskedVa : nextState;
+			innerValue.value = nextState.value;
+			lastSelection.value = nextState.selection;
+			emit("update:modelValue", nextState.value);
+			syncComplete(nextState.value, nextComplete);
+			nextTick(() => {
+				const element = getInputElement();
+				if (focused.value && element && nextState.selection) element.setSelectionRange(nextState.selection.start, nextState.selection.end);
+			});
+		};
+		const handleModelUpdate = (value) => commitValue(value);
+		const handleInput = (_value, event) => emit("input", innerValue.value, event);
+		const handleChange = (_value, event) => emit("change", innerValue.value, event);
+		const handlePressEnter = (event) => emit("pressEnter", event);
+		const handleClear = (event) => emit("clear", event);
+		const handleFocus = (event) => {
+			focused.value = true;
+			emit("focus", event);
+		};
+		const handleBlur = (event) => {
+			focused.value = false;
+			emit("blur", event);
+		};
+		const trackedEvents = [
+			"keyup",
+			"mouseup",
+			"select"
+		];
+		const updateSelectionFromDom = () => {
+			const el = getInputElement();
+			if (!el || document.activeElement !== el) return;
+			const start = el.selectionStart;
+			const end = el.selectionEnd;
+			if (start !== null && end !== null) lastSelection.value = {
+				start,
+				end
+			};
+		};
+		onMounted(() => {
+			const input = getInputElement();
+			if (input) trackedEvents.forEach((event) => input.addEventListener(event, updateSelectionFromDom));
+			document.addEventListener("selectionchange", updateSelectionFromDom);
+		});
+		onBeforeUnmount(() => {
+			const input = getInputElement();
+			if (input) trackedEvents.forEach((event) => input.removeEventListener(event, updateSelectionFromDom));
+			document.removeEventListener("selectionchange", updateSelectionFromDom);
+		});
+		watch(() => props.modelValue, (value) => {
+			if (value === void 0) return;
+			const { value: next, complete: nextComplete } = applyNormalization(value !== null && value !== void 0 ? value : "");
+			innerValue.value = next;
+			if (next !== value) emit("update:modelValue", next);
+			syncComplete(next, nextComplete);
+		});
+		watch([
+			effectiveMask,
+			presetDefinition,
+			effectiveMaskChar,
+			effectiveFormatChars
+		], () => {
+			const { value: next, complete: nextComplete } = applyNormalization(innerValue.value);
+			const changed = next !== innerValue.value;
+			innerValue.value = next;
+			if (changed) emit("update:modelValue", next);
+			syncComplete(next, nextComplete);
+		});
+		__expose({
+			get inputRef() {
+				return getInputElement();
+			},
+			focus: () => {
+				var _inputComponentRef$va2;
+				return (_inputComponentRef$va2 = inputComponentRef.value) === null || _inputComponentRef$va2 === void 0 ? void 0 : _inputComponentRef$va2.focus();
+			},
+			blur: () => {
+				var _inputComponentRef$va3;
+				return (_inputComponentRef$va3 = inputComponentRef.value) === null || _inputComponentRef$va3 === void 0 ? void 0 : _inputComponentRef$va3.blur();
+			}
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Input), mergeProps({
+				ref_key: "inputComponentRef",
+				ref: inputComponentRef
+			}, forwardedAttrs.value, {
+				"model-value": displayValue.value,
+				size: __props.size,
+				"allow-clear": __props.allowClear && Boolean(innerValue.value),
+				disabled: __props.disabled,
+				readonly: __props.readonly,
+				error: __props.error,
+				placeholder: mergedPlaceholder.value,
+				"fit-width": __props.fitWidth,
+				"max-w-full": __props.maxWFull,
+				"max-length": lengthManaged.value ? void 0 : __props.maxLength,
+				"show-word-limit": lengthManaged.value ? false : __props.showWordLimit,
+				"word-length": __props.wordLength,
+				"word-slice": __props.wordSlice,
+				"input-attrs": mergedInputAttrs.value,
+				prepend: __props.prepend,
+				append: __props.append,
+				"onUpdate:modelValue": handleModelUpdate,
+				onInput: handleInput,
+				onChange: handleChange,
+				onPressEnter: handlePressEnter,
+				onClear: handleClear,
+				onFocus: handleFocus,
+				onBlur: handleBlur
+			}), createSlots({ _: 2 }, [
+				_ctx.$slots.prefix ? {
+					name: "prefix",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "prefix")]),
+					key: "0"
+				} : void 0,
+				_ctx.$slots.suffix ? {
+					name: "suffix",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "suffix")]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots.prepend ? {
+					name: "prepend",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "prepend")]),
+					key: "2"
+				} : void 0,
+				_ctx.$slots.append ? {
+					name: "append",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "append")]),
+					key: "3"
+				} : void 0
+			]), 1040, [
+				"model-value",
+				"size",
+				"allow-clear",
+				"disabled",
+				"readonly",
+				"error",
+				"placeholder",
+				"fit-width",
+				"max-w-full",
+				"max-length",
+				"show-word-limit",
+				"word-length",
+				"word-slice",
+				"input-attrs",
+				"prepend",
+				"append"
+			]);
+		};
+	}
+}));
+//#endregion
+export { input_mask_vue_vue_type_script_setup_true_lang_default as default };

package/es/input-mask/mask-engine.d.ts

@@ -0,0 +1,18 @@
+import type { InputMaskPattern, InputMaskSelection } from './types';
+export interface FormatMaskOptions {
+    maskChar: string | null;
+    showMask: boolean;
+    formatChars?: Readonly<Record<string, RegExp>>;
+}
+export interface FormatMaskResult {
+    value: string;
+    selection: InputMaskSelection;
+    complete: boolean;
+}
+export declare const defaultInputMaskFormatChars: Readonly<Record<string, RegExp>>;
+export declare function formatInputMask(rawValue: string, rawCursor: number | null, mask: InputMaskPattern, options: FormatMaskOptions): FormatMaskResult;
+export declare function resolveDeletion(previousValue: string, previousSelection: InputMaskSelection | null, rawValue: string, rawCursor: number, mask: InputMaskPattern, formatChars?: Readonly<Record<string, RegExp>>, maskChar?: string | null): {
+    value: string;
+    cursor: number;
+    complete: boolean;
+} | null;

package/es/input-mask/mask-engine.js

@@ -0,0 +1,176 @@
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
+import { codeUnitToGraphemeIndex, graphemeIndexToCodeUnit, splitGraphemes } from "../_utils/grapheme.js";
+//#region components/input-mask/mask-engine.ts
+var defaultInputMaskFormatChars = {
+	"9": /[0-9]/,
+	"a": /[A-Za-z]/,
+	"*": /[A-Za-z0-9]/,
+	"H": /* @__PURE__ */ new RegExp("\\p{Script=Han}", "u"),
+	"L": /* @__PURE__ */ new RegExp("\\p{Letter}", "u"),
+	"N": /* @__PURE__ */ new RegExp("[\\p{Letter}\\p{Number}]", "u")
+};
+var matches = (pattern, character) => {
+	pattern.lastIndex = 0;
+	return pattern.test(character);
+};
+var parseStringMask = (mask, formatChars) => {
+	const tokens = [];
+	let escaped = false;
+	for (const character of Array.from(mask)) {
+		if (!escaped && character === "\\") {
+			escaped = true;
+			continue;
+		}
+		const pattern = !escaped ? formatChars[character] : void 0;
+		tokens.push(pattern ? { pattern } : { literal: character });
+		escaped = false;
+	}
+	if (escaped) tokens.push({ literal: "\\" });
+	return tokens;
+};
+var parseMask = (mask, formatChars) => {
+	if (typeof mask === "string") return parseStringMask(mask, formatChars);
+	return mask.map((token) => token instanceof RegExp ? { pattern: token } : { literal: token });
+};
+var mergeFormatChars = (formatChars) => _objectSpread2(_objectSpread2({}, defaultInputMaskFormatChars), formatChars);
+var readEditableCharacters = (rawValue, tokens, maskChar) => {
+	const input = splitGraphemes(rawValue);
+	const values = [];
+	let inputIndex = 0;
+	for (const token of tokens) {
+		if (token.literal !== void 0) {
+			if (input[inputIndex] === token.literal) inputIndex += 1;
+			continue;
+		}
+		while (inputIndex < input.length) {
+			const character = input[inputIndex++];
+			if (maskChar && character === maskChar) continue;
+			if (token.pattern && matches(token.pattern, character)) {
+				values.push(character);
+				break;
+			}
+		}
+	}
+	return values;
+};
+var buildLayout = (tokens, values, maskChar, showMask) => {
+	const positions = [];
+	const showTemplate = showMask && Boolean(maskChar);
+	let valueIndex = 0;
+	let previousEditableFilled = false;
+	for (const token of tokens) {
+		if (token.literal !== void 0) {
+			if (showTemplate || valueIndex < values.length || previousEditableFilled) positions.push({
+				char: token.literal,
+				literal: true,
+				filled: false
+			});
+			previousEditableFilled = false;
+			continue;
+		}
+		const value = values[valueIndex];
+		if (value !== void 0) {
+			positions.push({
+				char: value,
+				literal: false,
+				filled: true
+			});
+			valueIndex += 1;
+			previousEditableFilled = true;
+		} else if (showTemplate) {
+			positions.push({
+				char: maskChar,
+				literal: false,
+				filled: false
+			});
+			previousEditableFilled = false;
+		} else previousEditableFilled = false;
+	}
+	return positions;
+};
+var renderMask = (tokens, values, maskChar, showMask) => {
+	if (!values.length && !showMask) return "";
+	return buildLayout(tokens, values, maskChar, showMask).map((position) => position.char).join("");
+};
+var sliceToGraphemeBoundary = (value, cursor) => {
+	const graphemeIndex = codeUnitToGraphemeIndex(value, cursor);
+	return value.slice(0, graphemeIndexToCodeUnit(value, graphemeIndex));
+};
+function formatInputMask(rawValue, rawCursor, mask, options) {
+	const tokens = parseMask(mask, mergeFormatChars(options.formatChars));
+	const values = readEditableCharacters(rawValue, tokens, options.maskChar);
+	const value = renderMask(tokens, values, options.maskChar, options.showMask);
+	const editableCount = tokens.filter((token) => token.pattern).length;
+	const cursorValue = renderMask(tokens, readEditableCharacters(rawCursor === null ? rawValue : sliceToGraphemeBoundary(rawValue, rawCursor), tokens, options.maskChar), null, false);
+	const cursor = Math.min(cursorValue.length, value.length);
+	return {
+		value,
+		selection: {
+			start: cursor,
+			end: cursor
+		},
+		complete: values.length === editableCount
+	};
+}
+var layoutOffset = (positions, index) => {
+	let offset = 0;
+	for (let i = 0; i < index && i < positions.length; i++) offset += positions[i].char.length;
+	return offset;
+};
+var layoutIndexAtOffset = (positions, offset) => {
+	let acc = 0;
+	for (let i = 0; i < positions.length; i++) {
+		const len = positions[i].char.length;
+		if (offset < acc + len) return i;
+		acc += len;
+	}
+	return positions.length - 1;
+};
+var nearestFilled = (positions, fromIndex, step) => {
+	for (let i = fromIndex + step; i >= 0 && i < positions.length; i += step) if (positions[i].filled) return i;
+	return -1;
+};
+/**
+* Resolves a single-character deletion so that backspace/delete on a fixed
+* separator (or an attempt to delete an empty placeholder) clears the adjacent
+* filled editable value instead of being a no-op. This mirrors react-input-mask's
+* `getLeftEditablePosition` / `getRightEditablePosition` behavior.
+*
+* Returns the re-formatted value, cursor and completeness, or `null` to let the
+* caller fall back to a full reformat (insertions, multi-char deletions, range
+* edits, or nothing-to-delete). The result is always canonical (re-packed), so
+* the stored value, the displayed value and the emitted modelValue stay in sync.
+*/
+function resolveDeletion(previousValue, previousSelection, rawValue, rawCursor, mask, formatChars, maskChar = null) {
+	if (!previousSelection || previousSelection.start !== previousSelection.end) return null;
+	if (previousValue.length - rawValue.length !== 1) return null;
+	const prevCursor = previousSelection.start;
+	const backspace = rawCursor === prevCursor - 1;
+	if (!backspace && !(rawCursor === prevCursor)) return null;
+	const merged = mergeFormatChars(formatChars);
+	const tokens = parseMask(mask, merged);
+	const layout = buildLayout(tokens, readEditableCharacters(previousValue, tokens, maskChar), maskChar, true);
+	const deletedIndex = layoutIndexAtOffset(layout, backspace ? prevCursor - 1 : prevCursor);
+	if (deletedIndex < 0) return null;
+	const deleted = layout[deletedIndex];
+	let targetIndex;
+	if (deleted.literal) {
+		targetIndex = nearestFilled(layout, deletedIndex, backspace ? -1 : 1);
+		if (targetIndex < 0) return null;
+	} else if (deleted.filled) targetIndex = deletedIndex;
+	else return null;
+	const targetOffset = layoutOffset(layout, targetIndex);
+	const targetLen = layout[targetIndex].char.length;
+	const result = formatInputMask(previousValue.slice(0, targetOffset) + previousValue.slice(targetOffset + targetLen), targetOffset, mask, {
+		maskChar,
+		showMask: true,
+		formatChars: merged
+	});
+	return {
+		value: result.value,
+		cursor: result.selection.start,
+		complete: result.complete
+	};
+}
+//#endregion
+export { defaultInputMaskFormatChars, formatInputMask, resolveDeletion };

package/es/input-mask/presets.d.ts

@@ -0,0 +1,2 @@
+import type { InputMaskPresetDefinition, InputMaskPresetName } from './types';
+export declare const inputMaskPresets: Readonly<Record<InputMaskPresetName, InputMaskPresetDefinition>>;