@v-c/input 0.0.1

package/dist/input.js

@@ -0,0 +1,410 @@
+import { resolveOnChange } from "./utils/commonUtils.js";
+import BaseInput_default from "./BaseInput.js";
+import useCount from "./hooks/useCount.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, mergeProps, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { toPropsRefs } from "@v-c/util/dist/props-util";
+import { triggerFocus } from "@v-c/util/dist/Dom/focus";
+import omit from "@v-c/util/dist/omit";
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var defaults = {
+	prefixCls: "vc-input",
+	type: "text"
+};
+var input_default = /* @__PURE__ */ defineComponent((props, { slots, expose, attrs }) => {
+	const focused = shallowRef(false);
+	const compositionRef = shallowRef(false);
+	const keyLockRef = shallowRef(false);
+	const { count, showCount } = toPropsRefs(props, "count", "showCount");
+	const onChange = (e) => {
+		props?.onChange?.(e);
+	};
+	const inputRef = shallowRef();
+	const holderRef = shallowRef();
+	const focus = (option) => {
+		if (inputRef.value) triggerFocus(inputRef.value, option);
+	};
+	const value = shallowRef(props?.value ?? props?.defaultValue);
+	watch(() => props.value, (newValue) => {
+		value.value = newValue;
+	});
+	const formatValue = computed(() => value.value === void 0 || value.value === null ? "" : String(value.value));
+	const selection = shallowRef(null);
+	watch(selection, (newSelection) => {
+		if (newSelection && inputRef.value) inputRef.value.setSelectionRange(...newSelection);
+	});
+	const countConfig = useCount(count, showCount);
+	const mergedMax = computed(() => countConfig?.value?.max || props?.maxLength);
+	const valueLength = computed(() => countConfig.value?.strategy?.(formatValue.value) ?? 0);
+	const isOutOfRange = 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: computed(() => holderRef.value?.nativeElement || inputRef.value)
+	});
+	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) 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) resolveOnChange(inputRef.value, e, onChange);
+	};
+	const mergedAllowClear = 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 = createVNode(Fragment, null, [config?.show && createVNode("span", {
+				"class": clsx(`${prefixCls}-show-count-suffix`, { [`${prefixCls}-show-count-has-suffix`]: !!suffixNode }, classNames?.count),
+				"style": styles?.count
+			}, [dataCount]), suffixNode]);
+		}
+		const inputElement = createVNode("input", mergeProps(restAttrs, omit(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": 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 createVNode(BaseInput_default, {
+			"ref": holderRef,
+			"value": formatValue.value,
+			"prefixCls": prefixCls,
+			"class": 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__ */ 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
+});
+export { input_default as default };

package/dist/interface.d.ts

@@ -0,0 +1,119 @@
+import { InputFocusOptions } from '@v-c/util/dist/Dom/focus';
+import { ChangeEventHandler, CompositionEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from '@v-c/util/dist/EventInterface';
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties, InputHTMLAttributes } from 'vue';
+import { LiteralUnion } from './utils/types';
+export interface CommonInputProps {
+    prefix?: VueNode;
+    suffix?: VueNode;
+    addonBefore?: VueNode;
+    addonAfter?: VueNode;
+    /** @deprecated Use `classNames` instead */
+    classes?: {
+        affixWrapper?: string;
+        group?: string;
+        wrapper?: string;
+    };
+    classNames?: {
+        affixWrapper?: string;
+        prefix?: string;
+        suffix?: string;
+        groupWrapper?: string;
+        wrapper?: string;
+        variant?: string;
+    };
+    styles?: {
+        affixWrapper?: CSSProperties;
+        prefix?: CSSProperties;
+        suffix?: CSSProperties;
+    };
+    allowClear?: boolean | {
+        clearIcon?: VueNode;
+    };
+}
+type DataAttr = Record<`data-${string}`, string>;
+export type ValueType = InputHTMLAttributes['value'] | bigint;
+export interface BaseInputProps extends CommonInputProps {
+    value?: ValueType;
+    prefixCls?: string;
+    disabled?: boolean;
+    focused?: boolean;
+    triggerFocus?: () => void;
+    readOnly?: boolean;
+    handleReset?: MouseEventHandler;
+    onClear?: () => void;
+    hidden?: boolean;
+    dataAttrs?: {
+        affixWrapper?: DataAttr;
+    };
+    components?: {
+        affixWrapper?: 'span' | 'div';
+        groupWrapper?: 'span' | 'div';
+        wrapper?: 'span' | 'div';
+        groupAddon?: 'span' | 'div';
+    };
+}
+export type ShowCountFormatter = (args: {
+    value: string;
+    count: number;
+    maxLength?: number;
+}) => any;
+export type ExceedFormatter = (value: string, config: {
+    max: number;
+}) => string;
+export interface CountConfig {
+    max?: number;
+    strategy?: (value: string) => number;
+    show?: boolean | ShowCountFormatter;
+    /** Trigger when content larger than the `max` limitation */
+    exceedFormatter?: ExceedFormatter;
+}
+export interface InputProps extends Omit<CommonInputProps, 'classNames' | 'styles'> {
+    value?: ValueType;
+    defaultValue?: any;
+    disabled?: boolean;
+    prefixCls?: string;
+    type?: LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+    /** It's better to use `count.show` instead */
+    showCount?: boolean | {
+        formatter: ShowCountFormatter;
+    };
+    onPressEnter?: KeyboardEventHandler;
+    autoComplete?: string;
+    htmlSize?: number;
+    placeholder?: string;
+    classNames?: CommonInputProps['classNames'] & {
+        input?: string;
+        count?: string;
+    };
+    styles?: CommonInputProps['styles'] & {
+        input?: CSSProperties;
+        count?: CSSProperties;
+    };
+    count?: CountConfig;
+    onClear?: () => void;
+    maxLength?: number;
+    readOnly?: boolean;
+    hidden?: boolean;
+    onChange?: ChangeEventHandler;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    onKeyDown?: KeyboardEventHandler;
+    onKeyUp?: KeyboardEventHandler;
+    onCompositionStart?: CompositionEventHandler;
+    onCompositionEnd?: CompositionEventHandler;
+    components?: BaseInputProps['components'];
+    dataAttrs?: BaseInputProps['dataAttrs'];
+}
+export interface InputRef {
+    focus: (options?: InputFocusOptions) => void;
+    blur: () => void;
+    setSelectionRange: (start: number, end: number, direction?: 'forward' | 'backward' | 'none') => void;
+    select: () => void;
+    input: HTMLInputElement | null;
+    nativeElement: HTMLElement | null;
+}
+export interface ChangeEventInfo {
+    source: 'compositionEnd' | 'change';
+}
+export {};

package/dist/utils/commonUtils.cjs

@@ -0,0 +1,44 @@
+const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
+let __v_c_util_dist_Dom_focus = require("@v-c/util/dist/Dom/focus");
+function cloneEvent(event, target, value) {
+	const currentTarget = target.cloneNode(true);
+	const newEvent = Object.create(event, {
+		target: { value: currentTarget },
+		currentTarget: { value: currentTarget }
+	});
+	currentTarget.value = value;
+	if (typeof target.selectionStart === "number" && typeof target.selectionEnd === "number") {
+		currentTarget.selectionStart = target.selectionStart;
+		currentTarget.selectionEnd = target.selectionEnd;
+	}
+	currentTarget.setSelectionRange = (start, end, direction) => {
+		target.setSelectionRange(start, end, direction);
+	};
+	return newEvent;
+}
+function hasAddon(props) {
+	return !!(props.addonBefore || props.addonAfter);
+}
+function hasPrefixSuffix(props) {
+	return !!(props.prefix || props.suffix || props.allowClear);
+}
+function resolveOnChange(target, e, onChange, targetValue) {
+	if (!onChange) return;
+	let event = e;
+	if (e.type === "click") {
+		event = cloneEvent(e, target, "");
+		onChange(event);
+		return;
+	}
+	if (target.type !== "file" && targetValue !== void 0) {
+		event = cloneEvent(e, target, targetValue);
+		onChange(event);
+		return;
+	}
+	onChange(event);
+}
+const triggerFocus = __v_c_util_dist_Dom_focus.triggerFocus;
+exports.hasAddon = hasAddon;
+exports.hasPrefixSuffix = hasPrefixSuffix;
+exports.resolveOnChange = resolveOnChange;
+exports.triggerFocus = triggerFocus;

package/dist/utils/commonUtils.d.ts

@@ -0,0 +1,6 @@
+import { BaseInputProps, InputProps } from '../interface';
+import { triggerFocus as rcTriggerFocus } from '@v-c/util/dist/Dom/focus';
+export declare function hasAddon(props: BaseInputProps | InputProps): boolean;
+export declare function hasPrefixSuffix(props: BaseInputProps | InputProps): boolean;
+export declare function resolveOnChange<E extends HTMLInputElement | HTMLTextAreaElement>(target: E, e: Event | MouseEvent | CompositionEvent, onChange: undefined | ((event: Event) => void), targetValue?: string): void;
+export declare const triggerFocus: typeof rcTriggerFocus;

package/dist/utils/commonUtils.js

@@ -0,0 +1,40 @@
+import { triggerFocus as triggerFocus$1 } from "@v-c/util/dist/Dom/focus";
+function cloneEvent(event, target, value) {
+	const currentTarget = target.cloneNode(true);
+	const newEvent = Object.create(event, {
+		target: { value: currentTarget },
+		currentTarget: { value: currentTarget }
+	});
+	currentTarget.value = value;
+	if (typeof target.selectionStart === "number" && typeof target.selectionEnd === "number") {
+		currentTarget.selectionStart = target.selectionStart;
+		currentTarget.selectionEnd = target.selectionEnd;
+	}
+	currentTarget.setSelectionRange = (start, end, direction) => {
+		target.setSelectionRange(start, end, direction);
+	};
+	return newEvent;
+}
+function hasAddon(props) {
+	return !!(props.addonBefore || props.addonAfter);
+}
+function hasPrefixSuffix(props) {
+	return !!(props.prefix || props.suffix || props.allowClear);
+}
+function resolveOnChange(target, e, onChange, targetValue) {
+	if (!onChange) return;
+	let event = e;
+	if (e.type === "click") {
+		event = cloneEvent(e, target, "");
+		onChange(event);
+		return;
+	}
+	if (target.type !== "file" && targetValue !== void 0) {
+		event = cloneEvent(e, target, targetValue);
+		onChange(event);
+		return;
+	}
+	onChange(event);
+}
+const triggerFocus = triggerFocus$1;
+export { hasAddon, hasPrefixSuffix, resolveOnChange, triggerFocus };

package/dist/utils/types.d.ts

@@ -0,0 +1,2 @@
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
+export type LiteralUnion<T extends U, U> = T | (U & Record<never, never>);

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@v-c/input",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "@v-c/util": "0.0.18"
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublish": "pnpm build",
+    "test": "vitest run",
+    "bump": "bumpp --release patch"
+  }
+}