@v-c/textarea 0.0.1

package/dist/TextArea.js

@@ -0,0 +1,360 @@
+import ResizableTextArea_default from "./ResizableTextArea.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, watch } from "vue";
+import { classNames } from "@v-c/util";
+import { BaseInput, resolveOnChange, useCount } from "@v-c/input";
+import omit from "@v-c/util/dist/omit";
+var defaults = { prefixCls: "vc-textarea" };
+var TextArea_default = /* @__PURE__ */ defineComponent((props, { attrs, expose, slots, emit }) => {
+	const stateValue = shallowRef(props.value ?? props.defaultValue);
+	watch(() => props.value, (newValue) => {
+		if ("value" in props || {}) stateValue.value = newValue;
+	});
+	const setValue = (val, callback) => {
+		if (stateValue.value === val) return;
+		if (props.value === void 0) stateValue.value = val;
+		nextTick(() => {
+			callback?.();
+		});
+	};
+	const formatValue = computed(() => stateValue.value === void 0 || stateValue.value === null ? "" : String(stateValue.value));
+	const focused = shallowRef(false);
+	const compositionRef = shallowRef(false);
+	const textareaResized = shallowRef(false);
+	const holderRef = shallowRef();
+	const resizableTextAreaRef = shallowRef();
+	const getTextArea = () => resizableTextAreaRef.value?.textArea();
+	const focus = () => {
+		getTextArea()?.focus();
+	};
+	expose({
+		resizableTextArea: computed(() => resizableTextAreaRef.value),
+		focus,
+		blur: () => {
+			getTextArea()?.blur();
+		},
+		nativeElement: computed(() => holderRef.value?.nativeElement || getTextArea() || null)
+	});
+	watch(() => props.disabled, (newDisabled) => {
+		focused.value = !newDisabled && focused.value;
+	});
+	const selection = shallowRef(null);
+	watch(selection, (newSelection) => {
+		if (newSelection) getTextArea()?.setSelectionRange(...newSelection);
+	});
+	const countConfig = useCount(computed(() => props.count), computed(() => props.showCount));
+	const mergedMax = computed(() => countConfig.value.max ?? props.maxLength);
+	const hasMaxLength = computed(() => Number(mergedMax.value) > 0);
+	const valueLength = computed(() => countConfig.value.strategy(formatValue.value));
+	const isOutOfRange = computed(() => !!mergedMax.value && valueLength.value > mergedMax.value);
+	const onChange = (e) => {
+		emit("change", e);
+		props.onChange?.(e);
+	};
+	const triggerChange = (e, currentValue) => {
+		let cutValue = currentValue;
+		const cfg = countConfig.value;
+		if (!compositionRef.value && cfg.exceedFormatter && cfg.max && cfg.strategy(currentValue) > cfg.max) {
+			cutValue = cfg.exceedFormatter(currentValue, { max: cfg.max });
+			if (currentValue !== cutValue) selection.value = [getTextArea()?.selectionStart || 0, getTextArea()?.selectionEnd || 0];
+		}
+		setValue(cutValue);
+		emit("update:value", cutValue);
+		nextTick(() => {
+			resizableTextAreaRef.value?.setValue?.(cutValue);
+		});
+		resolveOnChange(e.currentTarget, e, onChange, cutValue);
+	};
+	const onInternalCompositionStart = (e) => {
+		compositionRef.value = true;
+		emit("compositionStart", e);
+		props.onCompositionStart?.(e);
+	};
+	const onInternalCompositionEnd = (e) => {
+		compositionRef.value = false;
+		triggerChange(e, e.target.value);
+		emit("compositionEnd", e);
+		props.onCompositionEnd?.(e);
+	};
+	const onInternalChange = (e) => {
+		triggerChange(e, e.target.value);
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && props.onPressEnter && !e.isComposing) {
+			emit("pressEnter", e);
+			props.onPressEnter?.(e);
+		}
+		emit("keydown", e);
+		props.onKeyDown?.(e);
+	};
+	const handleFocus = (e) => {
+		focused.value = true;
+		emit("focus", e);
+		props.onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		focused.value = false;
+		emit("blur", e);
+		props.onBlur?.(e);
+	};
+	const handleReset = (e) => {
+		resolveOnChange(getTextArea(), e, onChange);
+		setValue("", () => focus());
+		emit("update:value", "");
+	};
+	const handleResize = (size) => {
+		emit("resize", size);
+		props.onResize?.(size);
+		if (getTextArea()?.style.height) textareaResized.value = true;
+	};
+	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 { allowClear, maxLength, prefixCls = defaults.prefixCls, showCount, disabled, hidden, classNames: classNames$1, styles, onClear, readOnly, autoSize, suffix } = props;
+		const { class: attrClass, style: attrStyle,...restAttrs } = attrs;
+		const mergedClassName = props.className || attrClass;
+		const mergedStyle = {
+			...props.style,
+			...attrStyle
+		};
+		let suffixNode = slots.suffix?.() ?? suffix;
+		let dataCount;
+		if (countConfig.value.show) {
+			if (countConfig.value.showFormatter) dataCount = countConfig.value.showFormatter({
+				value: formatValue.value,
+				count: valueLength.value,
+				maxLength: mergedMax.value
+			});
+			else dataCount = `${valueLength.value}${hasMaxLength.value ? ` / ${mergedMax.value}` : ""}`;
+			suffixNode = createVNode(Fragment, null, [suffixNode, createVNode("span", {
+				"class": classNames(`${prefixCls}-data-count`, classNames$1?.count),
+				"style": styles?.count
+			}, [dataCount])]);
+		}
+		const isPureTextArea = !autoSize && !showCount && !allowClear;
+		const baseInputClassNames = {
+			...classNames$1,
+			affixWrapper: classNames(classNames$1?.affixWrapper, {
+				[`${prefixCls}-show-count`]: showCount,
+				[`${prefixCls}-textarea-allow-clear`]: allowClear
+			})
+		};
+		const inputAttrs = omit(restAttrs, [
+			"class",
+			"style",
+			"onFocus",
+			"onBlur",
+			"onChange",
+			"onCompositionstart",
+			"onCompositionend",
+			"onKeydown",
+			"onKeyup",
+			"onInput"
+		]);
+		return createVNode(BaseInput, {
+			"ref": holderRef,
+			"value": formatValue.value,
+			"allowClear": mergedAllowClear.value,
+			"handleReset": handleReset,
+			"suffix": suffixNode,
+			"prefixCls": prefixCls,
+			"classNames": baseInputClassNames,
+			"disabled": disabled,
+			"focused": focused.value,
+			"class": classNames([mergedClassName], isOutOfRange.value && `${prefixCls}-out-of-range`),
+			"style": {
+				...mergedStyle,
+				...textareaResized.value && !isPureTextArea ? { height: "auto" } : {}
+			},
+			"dataAttrs": { affixWrapper: { "data-count": typeof dataCount === "string" ? dataCount : void 0 } },
+			"hidden": hidden,
+			"readOnly": readOnly,
+			"onClear": onClear
+		}, { default: () => [createVNode(ResizableTextArea_default, mergeProps(inputAttrs, {
+			"value": stateValue.value,
+			"autoSize": autoSize,
+			"maxLength": maxLength,
+			"onKeydown": handleKeyDown,
+			"onChange": onInternalChange,
+			"onFocus": handleFocus,
+			"onBlur": handleBlur,
+			"onCompositionstart": onInternalCompositionStart,
+			"onCompositionend": onInternalCompositionEnd,
+			"class": classNames(classNames$1?.textarea),
+			"style": {
+				...styles?.textarea,
+				resize: attrStyle?.resize
+			},
+			"disabled": disabled,
+			"prefixCls": prefixCls,
+			"onResize": handleResize,
+			"ref": resizableTextAreaRef,
+			"readOnly": readOnly
+		}), null)] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		value: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		defaultValue: {
+			type: [String, Number],
+			required: false,
+			default: void 0
+		},
+		prefixCls: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		autoSize: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		onPressEnter: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onResize: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onClear: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		readOnly: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		classNames: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		styles: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		allowClear: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		showCount: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		count: {
+			type: Object,
+			required: false,
+			default: void 0
+		},
+		maxLength: {
+			type: Number,
+			required: false,
+			default: void 0
+		},
+		suffix: {
+			type: [
+				String,
+				Number,
+				null,
+				Boolean,
+				Array
+			],
+			required: false,
+			skipCheck: true,
+			default: void 0
+		},
+		disabled: {
+			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
+		},
+		onCompositionStart: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onCompositionEnd: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		onKeyDown: {
+			type: Function,
+			required: false,
+			default: void 0
+		},
+		className: {
+			type: String,
+			required: false,
+			default: void 0
+		},
+		class: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		style: {
+			type: null,
+			required: false,
+			default: void 0
+		},
+		placeholder: {
+			type: String,
+			required: false,
+			default: void 0
+		}
+	}, defaults),
+	name: "TextArea",
+	inheritAttrs: false,
+	emits: [
+		"update:value",
+		"change",
+		"compositionStart",
+		"compositionEnd",
+		"pressEnter",
+		"keydown",
+		"focus",
+		"blur",
+		"resize"
+	]
+});
+export { TextArea_default as default };

package/dist/_virtual/rolldown_runtime.cjs

@@ -0,0 +1,21 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+exports.__toESM = __toESM;

package/dist/calculateNodeHeight.cjs

@@ -0,0 +1,96 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+var HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
+  pointer-events: none !important;
+`;
+var SIZING_STYLE = [
+	"letter-spacing",
+	"line-height",
+	"padding-top",
+	"padding-bottom",
+	"font-family",
+	"font-weight",
+	"font-size",
+	"font-variant",
+	"text-rendering",
+	"text-transform",
+	"width",
+	"text-indent",
+	"padding-left",
+	"padding-right",
+	"border-width",
+	"box-sizing",
+	"word-break",
+	"white-space"
+];
+var computedStyleCache = {};
+var hiddenTextarea;
+function calculateNodeStyling(node, useCache = false) {
+	const nodeRef = node.getAttribute("id") || node.getAttribute("data-id") || node.getAttribute("name");
+	if (useCache && computedStyleCache[nodeRef]) return computedStyleCache[nodeRef];
+	const style = window.getComputedStyle(node);
+	const boxSizing = style.getPropertyValue("box-sizing") || style.getPropertyValue("-moz-box-sizing") || style.getPropertyValue("-webkit-box-sizing");
+	const paddingSize = parseFloat(style.getPropertyValue("padding-bottom")) + parseFloat(style.getPropertyValue("padding-top"));
+	const borderSize = parseFloat(style.getPropertyValue("border-bottom-width")) + parseFloat(style.getPropertyValue("border-top-width"));
+	const nodeInfo = {
+		sizingStyle: SIZING_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";"),
+		paddingSize,
+		borderSize,
+		boxSizing
+	};
+	if (useCache && nodeRef) computedStyleCache[nodeRef] = nodeInfo;
+	return nodeInfo;
+}
+function calculateAutoSizeStyle(uiTextNode, useCache = false, minRows = null, maxRows = null) {
+	if (!hiddenTextarea) {
+		hiddenTextarea = document.createElement("textarea");
+		hiddenTextarea.setAttribute("tab-index", "-1");
+		hiddenTextarea.setAttribute("aria-hidden", "true");
+		hiddenTextarea.setAttribute("name", "hiddenTextarea");
+		document.body.appendChild(hiddenTextarea);
+	}
+	if (uiTextNode.getAttribute("wrap")) hiddenTextarea.setAttribute("wrap", uiTextNode.getAttribute("wrap"));
+	else hiddenTextarea.removeAttribute("wrap");
+	const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(uiTextNode, useCache);
+	hiddenTextarea.setAttribute("style", `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
+	hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || "";
+	let minHeight;
+	let maxHeight;
+	let overflowY;
+	let height = hiddenTextarea.scrollHeight;
+	if (boxSizing === "border-box") height += borderSize;
+	else if (boxSizing === "content-box") height -= paddingSize;
+	if (minRows !== null || maxRows !== null) {
+		hiddenTextarea.value = " ";
+		const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+		if (minRows !== null) {
+			minHeight = singleRowHeight * minRows;
+			if (boxSizing === "border-box") minHeight = minHeight + paddingSize + borderSize;
+			height = Math.max(minHeight, height);
+		}
+		if (maxRows !== null) {
+			maxHeight = singleRowHeight * maxRows;
+			if (boxSizing === "border-box") maxHeight = maxHeight + paddingSize + borderSize;
+			overflowY = height > maxHeight ? "" : "hidden";
+			height = Math.min(maxHeight, height);
+		}
+	}
+	const style = {
+		height: `${height}px`,
+		overflowY,
+		resize: "none"
+	};
+	if (minHeight) style.minHeight = `${minHeight}px`;
+	if (maxHeight) style.maxHeight = `${maxHeight}px`;
+	return style;
+}
+exports.calculateNodeStyling = calculateNodeStyling;
+exports.default = calculateAutoSizeStyle;

package/dist/calculateNodeHeight.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'vue';
+export interface NodeType {
+    sizingStyle: string;
+    paddingSize: number;
+    borderSize: number;
+    boxSizing: string;
+}
+export declare function calculateNodeStyling(node: HTMLElement, useCache?: boolean): NodeType;
+export default function calculateAutoSizeStyle(uiTextNode: HTMLTextAreaElement, useCache?: boolean, minRows?: number | null, maxRows?: number | null): CSSProperties;

package/dist/calculateNodeHeight.js

@@ -0,0 +1,94 @@
+var HIDDEN_TEXTAREA_STYLE = `
+  min-height:0 !important;
+  max-height:none !important;
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important;
+  pointer-events: none !important;
+`;
+var SIZING_STYLE = [
+	"letter-spacing",
+	"line-height",
+	"padding-top",
+	"padding-bottom",
+	"font-family",
+	"font-weight",
+	"font-size",
+	"font-variant",
+	"text-rendering",
+	"text-transform",
+	"width",
+	"text-indent",
+	"padding-left",
+	"padding-right",
+	"border-width",
+	"box-sizing",
+	"word-break",
+	"white-space"
+];
+var computedStyleCache = {};
+var hiddenTextarea;
+function calculateNodeStyling(node, useCache = false) {
+	const nodeRef = node.getAttribute("id") || node.getAttribute("data-id") || node.getAttribute("name");
+	if (useCache && computedStyleCache[nodeRef]) return computedStyleCache[nodeRef];
+	const style = window.getComputedStyle(node);
+	const boxSizing = style.getPropertyValue("box-sizing") || style.getPropertyValue("-moz-box-sizing") || style.getPropertyValue("-webkit-box-sizing");
+	const paddingSize = parseFloat(style.getPropertyValue("padding-bottom")) + parseFloat(style.getPropertyValue("padding-top"));
+	const borderSize = parseFloat(style.getPropertyValue("border-bottom-width")) + parseFloat(style.getPropertyValue("border-top-width"));
+	const nodeInfo = {
+		sizingStyle: SIZING_STYLE.map((name) => `${name}:${style.getPropertyValue(name)}`).join(";"),
+		paddingSize,
+		borderSize,
+		boxSizing
+	};
+	if (useCache && nodeRef) computedStyleCache[nodeRef] = nodeInfo;
+	return nodeInfo;
+}
+function calculateAutoSizeStyle(uiTextNode, useCache = false, minRows = null, maxRows = null) {
+	if (!hiddenTextarea) {
+		hiddenTextarea = document.createElement("textarea");
+		hiddenTextarea.setAttribute("tab-index", "-1");
+		hiddenTextarea.setAttribute("aria-hidden", "true");
+		hiddenTextarea.setAttribute("name", "hiddenTextarea");
+		document.body.appendChild(hiddenTextarea);
+	}
+	if (uiTextNode.getAttribute("wrap")) hiddenTextarea.setAttribute("wrap", uiTextNode.getAttribute("wrap"));
+	else hiddenTextarea.removeAttribute("wrap");
+	const { paddingSize, borderSize, boxSizing, sizingStyle } = calculateNodeStyling(uiTextNode, useCache);
+	hiddenTextarea.setAttribute("style", `${sizingStyle};${HIDDEN_TEXTAREA_STYLE}`);
+	hiddenTextarea.value = uiTextNode.value || uiTextNode.placeholder || "";
+	let minHeight;
+	let maxHeight;
+	let overflowY;
+	let height = hiddenTextarea.scrollHeight;
+	if (boxSizing === "border-box") height += borderSize;
+	else if (boxSizing === "content-box") height -= paddingSize;
+	if (minRows !== null || maxRows !== null) {
+		hiddenTextarea.value = " ";
+		const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
+		if (minRows !== null) {
+			minHeight = singleRowHeight * minRows;
+			if (boxSizing === "border-box") minHeight = minHeight + paddingSize + borderSize;
+			height = Math.max(minHeight, height);
+		}
+		if (maxRows !== null) {
+			maxHeight = singleRowHeight * maxRows;
+			if (boxSizing === "border-box") maxHeight = maxHeight + paddingSize + borderSize;
+			overflowY = height > maxHeight ? "" : "hidden";
+			height = Math.min(maxHeight, height);
+		}
+	}
+	const style = {
+		height: `${height}px`,
+		overflowY,
+		resize: "none"
+	};
+	if (minHeight) style.minHeight = `${minHeight}px`;
+	if (maxHeight) style.maxHeight = `${maxHeight}px`;
+	return style;
+}
+export { calculateNodeStyling, calculateAutoSizeStyle as default };

package/dist/index.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, "__esModule", { value: true });
+const require_ResizableTextArea = require("./ResizableTextArea.cjs");
+const require_TextArea = require("./TextArea.cjs");
+var src_default = require_TextArea.default;
+exports.ResizableTextArea = require_ResizableTextArea.default;
+exports.default = src_default;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { default as TextArea } from './TextArea';
+export type { AutoSizeType, TextAreaProps, } from './interface';
+export { default as ResizableTextArea } from './ResizableTextArea';
+export default TextArea;

package/dist/index.js

@@ -0,0 +1,4 @@
+import ResizableTextArea_default from "./ResizableTextArea.js";
+import TextArea_default from "./TextArea.js";
+var src_default = TextArea_default;
+export { ResizableTextArea_default as ResizableTextArea, src_default as default };

package/dist/interface.d.ts

@@ -0,0 +1,58 @@
+import { CountConfig, ShowCountFormatter } from '@v-c/input';
+import { VueNode } from '@v-c/util/dist/type';
+import { CSSProperties } from 'vue';
+export interface AutoSizeType {
+    minRows?: number;
+    maxRows?: number;
+}
+export interface TextAreaProps {
+    value?: string | number;
+    defaultValue?: string | number;
+    prefixCls?: string;
+    autoSize?: boolean | AutoSizeType;
+    onPressEnter?: (e: KeyboardEvent) => void;
+    onResize?: (size: {
+        width: number;
+        height: number;
+    }) => void;
+    onClear?: () => void;
+    readOnly?: boolean;
+    classNames?: {
+        affixWrapper?: string;
+        textarea?: string;
+        count?: string;
+    };
+    styles?: {
+        affixWrapper?: CSSProperties;
+        textarea?: CSSProperties;
+        count?: CSSProperties;
+    };
+    allowClear?: boolean | {
+        clearIcon?: VueNode;
+    };
+    showCount?: boolean | {
+        formatter: ShowCountFormatter;
+    };
+    count?: CountConfig;
+    maxLength?: number;
+    suffix?: VueNode;
+    disabled?: boolean;
+    hidden?: boolean;
+    onChange?: (e: Event) => void;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onCompositionStart?: (e: CompositionEvent) => void;
+    onCompositionEnd?: (e: CompositionEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    className?: string;
+    class?: any;
+    style?: CSSProperties;
+    placeholder?: string;
+}
+export interface TextAreaRef {
+    resizableTextArea?: any;
+    focus: () => void;
+    blur: () => void;
+    nativeElement: HTMLElement | null;
+}
+export type HTMLTextareaProps = HTMLTextAreaElement;