@v-c/input 0.0.1

package/dist/input.cjs

@@ -0,0 +1,414 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
+const require_commonUtils = require("./utils/commonUtils.cjs");
+const require_BaseInput = require("./BaseInput.cjs");
+const require_useCount = require("./hooks/useCount.cjs");
+let vue = require("vue");
+let __v_c_util = require("@v-c/util");
+let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let __v_c_util_dist_Dom_focus = require("@v-c/util/dist/Dom/focus");
+let __v_c_util_dist_omit = require("@v-c/util/dist/omit");
+__v_c_util_dist_omit = require_rolldown_runtime.__toESM(__v_c_util_dist_omit);
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
+}
+var defaults = {
+	prefixCls: "vc-input",
+	type: "text"
+};
+var Input = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots, expose, attrs }) => {
+	const focused = (0, vue.shallowRef)(false);
+	const compositionRef = (0, vue.shallowRef)(false);
+	const keyLockRef = (0, vue.shallowRef)(false);
+	const { count, showCount } = (0, __v_c_util_dist_props_util.toPropsRefs)(props, "count", "showCount");
+	const onChange = (e) => {
+		props?.onChange?.(e);
+	};
+	const inputRef = (0, vue.shallowRef)();
+	const holderRef = (0, vue.shallowRef)();
+	const focus = (option) => {
+		if (inputRef.value) (0, __v_c_util_dist_Dom_focus.triggerFocus)(inputRef.value, option);
+	};
+	const value = (0, vue.shallowRef)(props?.value ?? props?.defaultValue);
+	(0, vue.watch)(() => props.value, (newValue) => {
+		value.value = newValue;
+	});
+	const formatValue = (0, vue.computed)(() => value.value === void 0 || value.value === null ? "" : String(value.value));
+	const selection = (0, vue.shallowRef)(null);
+	(0, vue.watch)(selection, (newSelection) => {
+		if (newSelection && inputRef.value) inputRef.value.setSelectionRange(...newSelection);
+	});
+	const countConfig = require_useCount.default(count, showCount);
+	const mergedMax = (0, vue.computed)(() => countConfig?.value?.max || props?.maxLength);
+	const valueLength = (0, vue.computed)(() => countConfig.value?.strategy?.(formatValue.value) ?? 0);
+	const isOutOfRange = (0, vue.computed)(() => !!mergedMax.value && valueLength.value > mergedMax.value);
+	expose({
+		focus,
+		blur: () => {
+			inputRef.value?.blur?.();
+		},
+		setSelectionRange: (start, end, direction) => {
+			inputRef.value?.setSelectionRange(start, end, direction);
+		},
+		select: () => {
+			inputRef.value?.select();
+		},
+		input: inputRef,
+		nativeElement: (0, vue.computed)(() => holderRef.value?.nativeElement || inputRef.value)
+	});
+	(0, vue.watch)(() => props.disabled, () => {
+		if (keyLockRef.value) keyLockRef.value = false;
+		focused.value = focused.value && props.disabled ? false : focused.value;
+	}, { immediate: true });
+	const triggerChange = (e, currentValue, info) => {
+		let cutValue = currentValue;
+		const config = countConfig.value;
+		if (!compositionRef.value && config?.exceedFormatter && config.max && config.strategy(currentValue) > config.max) {
+			cutValue = config.exceedFormatter(currentValue, { max: config.max });
+			if (currentValue !== cutValue) selection.value = [inputRef.value?.selectionStart || 0, inputRef.value?.selectionEnd || 0];
+		} else if (info.source === "compositionEnd") return;
+		if (props.value === void 0) value.value = cutValue;
+		if (inputRef.value) require_commonUtils.resolveOnChange(inputRef.value, e, onChange, cutValue);
+	};
+	const onInternalChange = (e) => {
+		triggerChange(e, e.target.value, { source: "change" });
+	};
+	const onInternalCompositionStart = (e) => {
+		compositionRef.value = true;
+		props?.onCompositionStart?.(e);
+	};
+	const onInternalCompositionEnd = (e) => {
+		compositionRef.value = false;
+		triggerChange(e, e.target.value, { source: "compositionEnd" });
+		props?.onCompositionEnd?.(e);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && !keyLockRef.value && !e.isComposing) {
+			keyLockRef.value = true;
+			props.onPressEnter?.(e);
+		}
+		props?.onKeyDown?.(e);
+	};
+	const handleKeyUp = (e) => {
+		if (e.key === "Enter") keyLockRef.value = false;
+		props?.onKeyUp?.(e);
+	};
+	const handleFocus = (e) => {
+		focused.value = true;
+		props?.onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		if (keyLockRef.value) keyLockRef.value = false;
+		focused.value = false;
+		props?.onBlur?.(e);
+	};
+	const handleReset = (e) => {
+		if (props.value === void 0) value.value = "";
+		focus();
+		if (inputRef.value) require_commonUtils.resolveOnChange(inputRef.value, e, onChange);
+	};
+	const mergedAllowClear = (0, vue.computed)(() => {
+		if (!props.allowClear) return props.allowClear;
+		const clearIcon = slots.clearIcon?.();
+		if (clearIcon) return {
+			...typeof props.allowClear === "object" ? props.allowClear : {},
+			clearIcon
+		};
+		return props.allowClear;
+	});
+	return () => {
+		const { autoComplete, prefixCls = defaults.prefixCls, disabled, htmlSize, classNames, styles, suffix, type = defaults.type, classes, readOnly, hidden, dataAttrs, components } = props;
+		const { class: className, style,...restAttrs } = attrs;
+		const mergedClassName = className ?? props.class;
+		const mergedStyle = style ?? props.style;
+		const prefixNode = slots.prefix?.() ?? props.prefix;
+		const suffixNode = slots.suffix?.() ?? suffix;
+		const addonBefore = slots.addonBefore?.() ?? props.addonBefore;
+		const addonAfter = slots.addonAfter?.() ?? props.addonAfter;
+		const config = countConfig.value;
+		const hasMaxLength = Number(mergedMax.value) > 0;
+		let mergedSuffix = suffixNode;
+		if (suffixNode || config?.show) {
+			const dataCount = config?.showFormatter ? config.showFormatter({
+				value: formatValue.value,
+				count: valueLength.value,
+				maxLength: mergedMax.value
+			}) : `${valueLength.value}${hasMaxLength ? ` / ${mergedMax.value}` : ""}`;
+			mergedSuffix = (0, vue.createVNode)(vue.Fragment, null, [config?.show && (0, vue.createVNode)("span", {
+				"class": (0, __v_c_util.clsx)(`${prefixCls}-show-count-suffix`, { [`${prefixCls}-show-count-has-suffix`]: !!suffixNode }, classNames?.count),
+				"style": styles?.count
+			}, [dataCount]), suffixNode]);
+		}
+		const inputElement = (0, vue.createVNode)("input", (0, vue.mergeProps)(restAttrs, (0, __v_c_util_dist_omit.default)(props, [
+			"prefixCls",
+			"onPressEnter",
+			"addonBefore",
+			"addonAfter",
+			"prefix",
+			"suffix",
+			"allowClear",
+			"defaultValue",
+			"showCount",
+			"count",
+			"classes",
+			"htmlSize",
+			"styles",
+			"classNames",
+			"onClear",
+			"dataAttrs",
+			"components",
+			"hidden",
+			"readOnly",
+			"value",
+			"type",
+			"class",
+			"style",
+			"onFocus",
+			"onBlur",
+			"onChange",
+			"onKeyDown",
+			"onKeyUp",
+			"onCompositionStart",
+			"onCompositionEnd",
+			"onInput"
+		]), {
+			"autocomplete": autoComplete,
+			"ref": inputRef,
+			"value": formatValue.value,
+			"onChange": onInternalChange,
+			"onInput": onInternalChange,
+			"onFocus": handleFocus,
+			"onBlur": handleBlur,
+			"onKeydown": handleKeyDown,
+			"onKeyup": handleKeyUp,
+			"class": (0, __v_c_util.clsx)(prefixCls, { [`${prefixCls}-disabled`]: disabled }, classNames?.input),
+			"style": styles?.input,
+			"size": htmlSize,
+			"type": type,
+			"maxlength": props.maxLength,
+			"onCompositionstart": onInternalCompositionStart,
+			"onCompositionend": onInternalCompositionEnd,
+			"disabled": disabled,
+			"readonly": readOnly
+		}), null);
+		return (0, vue.createVNode)(require_BaseInput.default, {
+			"ref": holderRef,
+			"value": formatValue.value,
+			"prefixCls": prefixCls,
+			"class": (0, __v_c_util.clsx)(mergedClassName, isOutOfRange.value && `${prefixCls}-out-of-range`),
+			"style": mergedStyle,
+			"allowClear": mergedAllowClear.value,
+			"handleReset": handleReset,
+			"suffix": mergedSuffix,
+			"prefix": prefixNode,
+			"addonBefore": addonBefore,
+			"addonAfter": addonAfter,
+			"focused": focused.value,
+			"triggerFocus": focus,
+			"disabled": disabled,
+			"readOnly": readOnly,
+			"classNames": classNames,
+			"styles": styles,
+			"dataAttrs": dataAttrs,
+			"components": components,
+			"hidden": hidden,
+			"onClear": props.onClear,
+			"classes": classes
+		}, _isSlot(inputElement) ? inputElement : { default: () => [inputElement] });
+	};
+}, {
+	props: /* @__PURE__ */ (0, vue.mergeDefaults)({
+		value: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		type: {
+			type: [String, Object],
+			required: false,
+			default: void 0
+		},
+		showCount: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onPressEnter: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		autoComplete: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		htmlSize: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		onClear: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		hidden: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onChange: {
+			type: Function,
+			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
+		},
+		onKeyUp: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onCompositionStart: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onCompositionEnd: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		components: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		dataAttrs: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		prefix: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		addonBefore: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		addonAfter: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		classes: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "Input",
+	inheritAttrs: false
+});
+var input_default = Input;
+exports.default = input_default;

package/dist/input.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from './interface';
+declare const Input: import('vue').DefineSetupFnComponent<InputProps, {}, {}, InputProps & {}, import('vue').PublicProps>;
+export default Input;