ropav 0.0.5 → 0.0.7

package/dist/textarea.css

@@ -1,4 +1,4 @@
-.rp-textarea[data-v-2c68871d] {
+.rp-textarea[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-3);
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
@@ -16,101 +16,108 @@
   cursor: text;
   transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
 }
-.rp-textarea[data-v-2c68871d]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-6c62dc31]:hover:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
   border-color: var(--rp-color-control-border-hover);
 }
-.rp-textarea[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
+.rp-textarea[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled):not(.rp-textarea--invalid):not(.rp-textarea--valid) {
   border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
-.rp-textarea[data-v-2c68871d] {
-  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
+.rp-textarea[data-v-6c62dc31] {
   font-size: var(--_rp-textarea-font-size);
   border-radius: var(--_rp-textarea-radius);
 }
-.rp-textarea--size-xs[data-v-2c68871d] {
+.rp-textarea--size-xs[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-1);
   --_rp-textarea-padding-x: var(--rp-spacing-1);
   --_rp-textarea-font-size: var(--rp-font-size-xs);
 }
-.rp-textarea--size-sm[data-v-2c68871d] {
+.rp-textarea--size-sm[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-2);
   --_rp-textarea-padding-x: var(--rp-spacing-2);
   --_rp-textarea-font-size: var(--rp-font-size-sm);
 }
-.rp-textarea--size-md[data-v-2c68871d] {
+.rp-textarea--size-md[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-3);
   --_rp-textarea-padding-x: var(--rp-spacing-3);
   --_rp-textarea-font-size: var(--rp-font-size-base);
 }
-.rp-textarea--size-lg[data-v-2c68871d] {
+.rp-textarea--size-lg[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-4);
   --_rp-textarea-padding-x: var(--rp-spacing-4);
   --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--size-xl[data-v-2c68871d] {
+.rp-textarea--size-xl[data-v-6c62dc31] {
   --_rp-textarea-padding-y: var(--rp-spacing-5);
   --_rp-textarea-padding-x: var(--rp-spacing-5);
   --_rp-textarea-font-size: var(--rp-font-size-lg);
 }
-.rp-textarea--radius-xs[data-v-2c68871d] {
+.rp-textarea--radius-xs[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-xs);
 }
-.rp-textarea--radius-sm[data-v-2c68871d] {
+.rp-textarea--radius-sm[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-sm);
 }
-.rp-textarea--radius-md[data-v-2c68871d] {
+.rp-textarea--radius-md[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-md);
 }
-.rp-textarea--radius-lg[data-v-2c68871d] {
+.rp-textarea--radius-lg[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-lg);
 }
-.rp-textarea--radius-xl[data-v-2c68871d] {
+.rp-textarea--radius-xl[data-v-6c62dc31] {
   --_rp-textarea-radius: var(--rp-radius-xl);
 }
-html.dark .rp-textarea[data-v-2c68871d] {
+html.dark .rp-textarea[data-v-6c62dc31] {
   --_rp-textarea-valid-border: var(--rp-color-success-fg);
   --_rp-textarea-valid-ring: color-mix(in srgb, var(--rp-color-success-fg) 32%, transparent);
   --_rp-textarea-invalid-border: var(--rp-color-danger-fg);
   --_rp-textarea-invalid-ring: color-mix(in srgb, var(--rp-color-danger-fg) 32%, transparent);
 }
-.rp-textarea--disabled[data-v-2c68871d] {
+.rp-textarea--disabled[data-v-6c62dc31] {
   opacity: var(--rp-opacity-disabled);
   cursor: not-allowed;
 }
-.rp-textarea--valid[data-v-2c68871d] {
+.rp-textarea--valid[data-v-6c62dc31] {
   border-color: var(--_rp-textarea-valid-border);
 }
-.rp-textarea--valid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--valid[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled) {
   border-color: var(--_rp-textarea-valid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-valid-ring);
 }
-.rp-textarea--invalid[data-v-2c68871d] {
+.rp-textarea--invalid[data-v-6c62dc31] {
   border-color: var(--_rp-textarea-invalid-border);
 }
-.rp-textarea--invalid[data-v-2c68871d]:focus-within:not(.rp-textarea--disabled) {
+.rp-textarea--invalid[data-v-6c62dc31]:focus-within:not(.rp-textarea--disabled) {
   border-color: var(--_rp-textarea-invalid-border);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-textarea-invalid-ring);
 }
-.rp-textarea--readonly[data-v-2c68871d] {
+.rp-textarea--readonly[data-v-6c62dc31] {
   background-color: var(--rp-color-control-readonly-bg);
 }
-.rp-textarea__native[data-v-2c68871d] {
+.rp-textarea--resize-vertical .rp-textarea__native[data-v-6c62dc31] {
+  resize: vertical;
+}
+.rp-textarea--resize-both .rp-textarea__native[data-v-6c62dc31] {
+  resize: both;
+}
+.rp-textarea__native[data-v-6c62dc31] {
   box-sizing: border-box;
   flex: 1;
   width: 100%;
   min-width: 0;
-  padding: 0;
+  min-height: calc(1lh + var(--_rp-textarea-padding-y) + var(--_rp-textarea-padding-y));
+  padding: var(--_rp-textarea-padding-y) var(--_rp-textarea-padding-x);
   border: none;
   outline: none;
+  resize: none;
   background: transparent;
   font: inherit;
   color: var(--rp-color-control-fg);
   line-height: var(--rp-line-height-relaxed);
 }
-.rp-textarea__native[data-v-2c68871d]::placeholder {
+.rp-textarea__native[data-v-6c62dc31]::placeholder {
   color: var(--rp-color-control-placeholder);
 }
-.rp-textarea__native[data-v-2c68871d]:disabled {
+.rp-textarea__native[data-v-6c62dc31]:disabled {
   cursor: not-allowed;
 }

package/dist/textarea.js

@@ -1,48 +1,131 @@
 import './textarea.css';
-import { n as bem, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createInvoker, defineVaporComponent, delegateEvents, renderEffect, setAttr, setClass, setProp, setValue, template, unref } from "vue";
+import { child, computed, createInvoker, createTemplateRefSetter, defineVaporComponent, delegateEvents, nextTick, onMounted, ref, renderEffect, setAttr, setClass, setProp, setValue, template, unref, watch } from "vue";
 //#region src/components/textarea/useTextarea.ts
+var MIN_ROWS = 1;
+var INTERACTIVE_SELECTOR = [
+	"button",
+	"a[href]",
+	"input",
+	"select",
+	`textarea:not(.rp-textarea__native)`,
+	"[contenteditable=\"true\"]",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
 function isInteractiveElement(target) {
-	return Boolean(target.closest([
-		"button",
-		"a[href]",
-		"input",
-		"select",
-		"textarea:not(.rp-textarea__native)",
-		"[contenteditable=\"true\"]",
-		"[tabindex]:not([tabindex=\"-1\"])"
-	].join(",")));
+	return Boolean(target.closest(INTERACTIVE_SELECTOR));
+}
+function normalizeRows(value, fallback) {
+	if (value === void 0 || !Number.isFinite(value)) return fallback;
+	return Math.max(MIN_ROWS, Math.floor(value));
+}
+function getPixelValue(value) {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+}
+function getLineHeight(styles) {
+	const lineHeight = getPixelValue(styles.lineHeight);
+	if (lineHeight > 0) return lineHeight;
+	const fontSize = getPixelValue(styles.fontSize);
+	return fontSize > 0 ? fontSize * 1.2 : 0;
+}
+function getTextareaMetrics(textarea) {
+	const styles = getComputedStyle(textarea);
+	return {
+		lineHeight: getLineHeight(styles),
+		paddingHeight: getPixelValue(styles.paddingTop) + getPixelValue(styles.paddingBottom),
+		borderHeight: getPixelValue(styles.borderTopWidth) + getPixelValue(styles.borderBottomWidth)
+	};
+}
+function getRowsHeight(metrics, rows) {
+	return rows * metrics.lineHeight + metrics.paddingHeight + metrics.borderHeight;
+}
+function getAutosizeMeasurement(textarea, rows) {
+	const metrics = getTextareaMetrics(textarea);
+	const maxHeight = rows.maxRows === void 0 ? void 0 : getRowsHeight(metrics, rows.maxRows);
+	return {
+		contentHeight: textarea.scrollHeight + metrics.borderHeight,
+		minHeight: getRowsHeight(metrics, rows.minRows),
+		maxHeight
+	};
+}
+function resetTextareaHeight(textarea) {
+	textarea.style.height = "";
+	textarea.style.overflowY = "";
 }
 function useTextarea(props, emitUpdate) {
+	const textareaRef = ref(null);
 	const control = useControlState(props);
+	const autosizeRows = computed(() => {
+		const minRows = normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;
+		const maxRows = normalizeRows(props.maxRows);
+		return {
+			minRows,
+			maxRows: maxRows === void 0 ? void 0 : Math.max(minRows, maxRows)
+		};
+	});
+	const nativeRows = computed(() => props.autosize ? autosizeRows.value.minRows : props.rows);
 	const rootClass = computed(() => bem("rp-textarea", {
 		[`size-${props.size}`]: Boolean(props.size),
 		[`radius-${props.radius}`]: Boolean(props.radius),
+		[`resize-${props.resize}`]: props.resize !== void 0 && props.resize !== "none",
+		autosize: props.autosize,
 		disabled: control.disabled,
 		invalid: control.invalid,
 		valid: control.valid && !control.invalid,
 		readonly: props.readonly
 	}));
+	const autosizeWatchSource = computed(() => [
+		props.modelValue,
+		props.autosize,
+		props.minRows,
+		props.maxRows,
+		props.rows,
+		props.size
+	]);
+	function syncTextareaHeight() {
+		const textarea = textareaRef.value;
+		if (!textarea) return;
+		if (!props.autosize) {
+			resetTextareaHeight(textarea);
+			return;
+		}
+		textarea.style.height = "auto";
+		const { contentHeight, minHeight, maxHeight } = getAutosizeMeasurement(textarea, autosizeRows.value);
+		const heightLimit = maxHeight ?? Number.POSITIVE_INFINITY;
+		const nextHeight = Math.min(Math.max(contentHeight, minHeight), heightLimit);
+		textarea.style.height = `${nextHeight}px`;
+		textarea.style.overflowY = maxHeight !== void 0 && contentHeight > maxHeight ? "auto" : "hidden";
+	}
+	function scheduleTextareaHeightSync() {
+		nextTick(syncTextareaHeight);
+	}
 	function onInput(e) {
 		emitUpdate(e.target.value);
+		syncTextareaHeight();
 	}
 	function focusTextarea(e) {
 		if (control.disabled) return;
 		const target = e.target;
 		if (target instanceof Element && isInteractiveElement(target)) return;
-		e.currentTarget.querySelector(".rp-textarea__native")?.focus();
+		textareaRef.value?.focus();
 	}
+	onMounted(scheduleTextareaHeightSync);
+	watch(autosizeWatchSource, scheduleTextareaHeightSync);
 	return {
+		textareaRef,
 		control,
 		rootClass,
+		nativeRows,
 		onInput,
 		focusTextarea
 	};
 }
 //#endregion
 //#region src/components/textarea/textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<div data-v-2c68871d><textarea data-v-2c68871d class=rp-textarea__native>", 1);
+var t0 = template("<div data-v-6c62dc31><textarea data-v-6c62dc31 class=rp-textarea__native>", 1);
 delegateEvents("input", "mousedown");
 //#endregion
 //#region src/components/textarea/textarea.vue
@@ -55,6 +138,13 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		modelValue: {},
 		size: {},
 		radius: {},
+		resize: { default: "none" },
+		autosize: {
+			type: Boolean,
+			default: false
+		},
+		minRows: { default: void 0 },
+		maxRows: { default: void 0 },
 		placeholder: { default: "" },
 		rows: { default: 3 },
 		disabled: {
@@ -85,12 +175,14 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {
+		const { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(props, (value) => {
 			emit("update:modelValue", value);
 		});
+		const _setTemplateRef = createTemplateRefSetter();
 		const n1 = t0();
 		const n0 = child(n1);
 		n0.$evtinput = createInvoker((e) => unref(onInput)(e));
+		_setTemplateRef(n0, textareaRef, null, "textareaRef");
 		n1.$evtmousedown = createInvoker((e) => unref(focusTextarea)(e));
 		renderEffect(() => {
 			const _control = unref(control);
@@ -100,7 +192,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			setProp(n0, "name", __props.name);
 			setValue(n0, __props.modelValue);
 			setProp(n0, "placeholder", __props.placeholder);
-			setProp(n0, "rows", __props.rows);
+			setProp(n0, "rows", unref(nativeRows));
 			setProp(n0, "disabled", _control.disabled || void 0);
 			setProp(n0, "readonly", __props.readonly || void 0);
 			setProp(n0, "required", _control_required || void 0);
@@ -112,7 +204,7 @@ var textarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		});
 		return n1;
 	}
-}), [["__scopeId", "data-v-2c68871d"]]);
+}), [["__scopeId", "data-v-6c62dc31"]]);
 //#endregion
 export { textarea_default as t };
 

package/dist/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../src/components/textarea/useTextarea.ts","../src/components/textarea/textarea.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["import { computed } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(\n        target.closest(\n            [\n                'button',\n                'a[href]',\n                'input',\n                'select',\n                'textarea:not(.rp-textarea__native)',\n                '[contenteditable=\"true\"]',\n                '[tabindex]:not([tabindex=\"-1\"])',\n            ].join(','),\n        ),\n    );\n}\n\nexport function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void) {\n    const control = useControlState(props);\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n    }\n\n    function focusTextarea(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        (e.currentTarget as HTMLElement)\n            .querySelector<HTMLTextAreaElement>('.rp-textarea__native')\n            ?.focus();\n    }\n\n    return {\n        control,\n        rootClass,\n        onInput,\n        focusTextarea,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"rows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { control, rootClass, onInput, focusTextarea } = useTextarea(props, (value) => {\n    emit('update:modelValue', value);\n});\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":";;;;AAKA,SAAS,qBAAqB,QAAiB;CAC3C,OAAO,QACH,OAAO,QACH;EACI;EACA;EACA;EACA;EACA;EACA;EACA;CACJ,CAAC,CAAC,KAAK,GAAG,CACd,CACJ;AACJ;AAEA,SAAgB,YAAY,OAAgC,YAAqC;CAC7F,MAAM,UAAU,gBAAgB,KAAK;CAErC,MAAM,YAAY,eACd,IAAI,eAAe;GACd,QAAQ,MAAM,SAAS,QAAQ,MAAM,IAAI;GACzC,UAAU,MAAM,WAAW,QAAQ,MAAM,MAAM;EAChD,UAAU,QAAQ;EAClB,SAAS,QAAQ;EACjB,OAAO,QAAQ,SAAS,CAAC,QAAQ;EACjC,UAAU,MAAM;CACpB,CAAC,CACL;CAEA,SAAS,QAAQ,GAAU;EACvB,WAAY,EAAE,OAA+B,KAAK;CACtD;CAEA,SAAS,cAAc,GAAe;EAClC,IAAI,QAAQ,UAAU;EAEtB,MAAM,SAAS,EAAE;EACjB,IAAI,kBAAkB,WAAW,qBAAqB,MAAM,GAAG;EAE/D,EAAG,cACE,cAAmC,sBAAsB,CAAC,EACzD,MAAM;CAChB;CAEA,OAAO;EACH;EACA;EACA;EACA;CACJ;AACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EC5BA,MAAM,QAAQ;EAUd,MAAM,OAAO;EAIb,MAAM,EAAE,SAAS,WAAW,SAAS,kBAAkB,YAAY,QAAQ,UAAU;GACjF,KAAK,qBAAqB,KAAK;EACnC,CAAC;;;sCA3BmB,MAAA,OAAA,CAAO,CAAA,CAAA,CAAA;0CAhBa,MAAA,aAAA,CAAa,CAAA,CAAA,CAAA;;;;gBAApC,MAAA,SAAA,CAAS;eAEb,MAAI,SAAO,EAAA;eACX,QAAM,QAAA,IAAI;gBAEH,QAAA,UAAU;eACjB,eAAa,QAAA,WAAW;eACxB,QAAM,QAAA,IAAI;eACV,YAAU,SAAO,YAAa,KAAA,CAAS;eACvC,YAAU,QAAA,YAAY,KAAA,CAAS;eAC/B,YAAU,qBAAoB,KAAA,CAAS;eACvC,cAAY,QAAA,aAAa,KAAA,CAAS;eAClC,mBAAiB,SAAO,cAAA;eACxB,oBAAkB,SAAO,eAAA;eACzB,gBAAc,SAAO,WAAY,KAAA,CAAS;eAC1C,iBAAe,qBAAoB,KAAA,CAAS"}
+{"version":3,"file":"textarea.js","names":[],"sources":["../src/components/textarea/useTextarea.ts","../src/components/textarea/textarea.vue","../src/components/textarea/textarea.vue"],"sourcesContent":["import { computed, nextTick, onMounted, ref, watch } from 'vue';\nimport { useControlState } from '@/composables/useControlState';\nimport { bem } from '@/utils/bem';\nimport type { TextareaProps } from './types';\n\nconst MIN_ROWS = 1;\nconst NATIVE_TEXTAREA_SELECTOR = '.rp-textarea__native';\nconst INTERACTIVE_SELECTOR = [\n    'button',\n    'a[href]',\n    'input',\n    'select',\n    `textarea:not(${NATIVE_TEXTAREA_SELECTOR})`,\n    '[contenteditable=\"true\"]',\n    '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\ninterface AutosizeRows {\n    minRows: number;\n    maxRows: number | undefined;\n}\n\ninterface TextareaMetrics {\n    lineHeight: number;\n    paddingHeight: number;\n    borderHeight: number;\n}\n\nfunction isInteractiveElement(target: Element) {\n    return Boolean(target.closest(INTERACTIVE_SELECTOR));\n}\n\nfunction normalizeRows(value: number | undefined, fallback?: number) {\n    if (value === undefined || !Number.isFinite(value)) return fallback;\n    return Math.max(MIN_ROWS, Math.floor(value));\n}\n\nfunction getPixelValue(value: string) {\n    const parsed = Number.parseFloat(value);\n    return Number.isFinite(parsed) ? parsed : 0;\n}\n\nfunction getLineHeight(styles: CSSStyleDeclaration) {\n    const lineHeight = getPixelValue(styles.lineHeight);\n    if (lineHeight > 0) return lineHeight;\n\n    const fontSize = getPixelValue(styles.fontSize);\n    return fontSize > 0 ? fontSize * 1.2 : 0;\n}\n\nfunction getTextareaMetrics(textarea: HTMLTextAreaElement): TextareaMetrics {\n    const styles = getComputedStyle(textarea);\n\n    return {\n        lineHeight: getLineHeight(styles),\n        paddingHeight: getPixelValue(styles.paddingTop) + getPixelValue(styles.paddingBottom),\n        borderHeight:\n            getPixelValue(styles.borderTopWidth) + getPixelValue(styles.borderBottomWidth),\n    };\n}\n\nfunction getRowsHeight(metrics: TextareaMetrics, rows: number) {\n    return rows * metrics.lineHeight + metrics.paddingHeight + metrics.borderHeight;\n}\n\nfunction getAutosizeMeasurement(textarea: HTMLTextAreaElement, rows: AutosizeRows) {\n    const metrics = getTextareaMetrics(textarea);\n    const maxHeight = rows.maxRows === undefined ? undefined : getRowsHeight(metrics, rows.maxRows);\n\n    return {\n        contentHeight: textarea.scrollHeight + metrics.borderHeight,\n        minHeight: getRowsHeight(metrics, rows.minRows),\n        maxHeight,\n    };\n}\n\nfunction resetTextareaHeight(textarea: HTMLTextAreaElement) {\n    textarea.style.height = '';\n    textarea.style.overflowY = '';\n}\n\nexport function useTextarea(props: Readonly<TextareaProps>, emitUpdate: (value: string) => void) {\n    const textareaRef = ref<HTMLTextAreaElement | null>(null);\n    const control = useControlState(props);\n\n    const autosizeRows = computed<AutosizeRows>(() => {\n        const minRows =\n            normalizeRows(props.minRows, normalizeRows(props.rows, MIN_ROWS)) ?? MIN_ROWS;\n        const maxRows = normalizeRows(props.maxRows);\n\n        return {\n            minRows,\n            maxRows: maxRows === undefined ? undefined : Math.max(minRows, maxRows),\n        };\n    });\n\n    const nativeRows = computed(() => (props.autosize ? autosizeRows.value.minRows : props.rows));\n\n    const rootClass = computed(() =>\n        bem('rp-textarea', {\n            [`size-${props.size}`]: Boolean(props.size),\n            [`radius-${props.radius}`]: Boolean(props.radius),\n            [`resize-${props.resize}`]: props.resize !== undefined && props.resize !== 'none',\n            autosize: props.autosize,\n            disabled: control.disabled,\n            invalid: control.invalid,\n            valid: control.valid && !control.invalid,\n            readonly: props.readonly,\n        }),\n    );\n\n    const autosizeWatchSource = computed(() => [\n        props.modelValue,\n        props.autosize,\n        props.minRows,\n        props.maxRows,\n        props.rows,\n        props.size,\n    ]);\n\n    function syncTextareaHeight() {\n        const textarea = textareaRef.value;\n        if (!textarea) return;\n\n        if (!props.autosize) {\n            resetTextareaHeight(textarea);\n            return;\n        }\n\n        textarea.style.height = 'auto';\n\n        const { contentHeight, minHeight, maxHeight } = getAutosizeMeasurement(\n            textarea,\n            autosizeRows.value,\n        );\n        const heightLimit = maxHeight ?? Number.POSITIVE_INFINITY;\n        const nextHeight = Math.min(Math.max(contentHeight, minHeight), heightLimit);\n\n        textarea.style.height = `${nextHeight}px`;\n        textarea.style.overflowY =\n            maxHeight !== undefined && contentHeight > maxHeight ? 'auto' : 'hidden';\n    }\n\n    function scheduleTextareaHeightSync() {\n        void nextTick(syncTextareaHeight);\n    }\n\n    function onInput(e: Event) {\n        emitUpdate((e.target as HTMLTextAreaElement).value);\n        syncTextareaHeight();\n    }\n\n    function focusTextarea(e: MouseEvent) {\n        if (control.disabled) return;\n\n        const target = e.target;\n        if (target instanceof Element && isInteractiveElement(target)) return;\n\n        textareaRef.value?.focus();\n    }\n\n    onMounted(scheduleTextareaHeightSync);\n\n    watch(autosizeWatchSource, scheduleTextareaHeightSync);\n\n    return {\n        textareaRef,\n        control,\n        rootClass,\n        nativeRows,\n        onInput,\n        focusTextarea,\n    };\n}\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            ref=\"textareaRef\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"nativeRows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    resize: 'none',\n    autosize: false,\n    minRows: undefined,\n    maxRows: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(\n    props,\n    (value) => {\n        emit('update:modelValue', value);\n    },\n);\n\nvoid textareaRef;\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n","<template>\n    <div :class=\"rootClass\" @mousedown=\"focusTextarea\">\n        <textarea\n            :id=\"control.id\"\n            ref=\"textareaRef\"\n            :name=\"name\"\n            class=\"rp-textarea__native\"\n            :value=\"modelValue\"\n            :placeholder=\"placeholder\"\n            :rows=\"nativeRows\"\n            :disabled=\"control.disabled || undefined\"\n            :readonly=\"readonly || undefined\"\n            :required=\"control.required || undefined\"\n            :aria-label=\"ariaLabel || undefined\"\n            :aria-labelledby=\"control.ariaLabelledby\"\n            :aria-describedby=\"control.ariaDescribedby\"\n            :aria-invalid=\"control.invalid || undefined\"\n            :aria-required=\"control.required || undefined\"\n            @input=\"onInput\"\n        />\n    </div>\n</template>\n\n<script lang=\"ts\" setup vapor>\nimport { useTextarea } from './useTextarea';\nimport type { TextareaProps } from './types';\n\ndefineOptions({ name: 'RpTextarea' });\n\nconst props = withDefaults(defineProps<TextareaProps>(), {\n    placeholder: '',\n    rows: 3,\n    resize: 'none',\n    autosize: false,\n    minRows: undefined,\n    maxRows: undefined,\n    disabled: undefined,\n    required: undefined,\n    invalid: undefined,\n    valid: undefined,\n    readonly: false,\n});\n\nconst emit = defineEmits<{\n    'update:modelValue': [value: string];\n}>();\n\nconst { textareaRef, control, rootClass, nativeRows, onInput, focusTextarea } = useTextarea(\n    props,\n    (value) => {\n        emit('update:modelValue', value);\n    },\n);\n\nvoid textareaRef;\n</script>\n\n<style src=\"./textarea.scss\" lang=\"scss\" scoped></style>\n"],"mappings":"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"}

package/dist/tooltip.css

@@ -0,0 +1,136 @@
+.rp-tooltip[data-v-13c39164] {
+  --_rp-tooltip-main-axis-offset: var(--rp-spacing-2);
+  --_rp-tooltip-cross-axis-offset: 0px;
+  --_rp-tooltip-arrow-size: 0.5rem;
+  --_rp-tooltip-bg: var(--_rp-tooltip-custom-bg, var(--rp-color-surface-inverted));
+  --_rp-tooltip-fg: var(--_rp-tooltip-custom-fg, var(--rp-color-text-inverted));
+  position: relative;
+  display: inline-flex;
+  font-family: var(--rp-font-family);
+  vertical-align: middle;
+}
+.rp-tooltip__content[data-v-13c39164] {
+  position: absolute;
+  z-index: 1000;
+  box-sizing: border-box;
+  width: max-content;
+  max-width: min(20rem, 100vw - var(--rp-spacing-6));
+  padding: var(--rp-spacing-2) var(--rp-spacing-3);
+  color: var(--_rp-tooltip-fg);
+  font-size: var(--rp-font-size-sm);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: var(--rp-line-height-normal);
+  text-align: center;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  background-color: var(--_rp-tooltip-bg);
+  border-radius: var(--rp-radius-sm);
+  box-shadow: var(--rp-shadow-md);
+}
+.rp-tooltip--arrow .rp-tooltip__content[data-v-13c39164]::before {
+  position: absolute;
+  width: var(--_rp-tooltip-arrow-size);
+  height: var(--_rp-tooltip-arrow-size);
+  content: "";
+  background-color: inherit;
+  rotate: 45deg;
+}
+.rp-tooltip--color-primary[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-primary);
+  --_rp-tooltip-fg: var(--rp-color-on-primary);
+}
+.rp-tooltip--color-secondary[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-secondary);
+  --_rp-tooltip-fg: var(--rp-color-on-secondary);
+}
+.rp-tooltip--color-success[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-success);
+  --_rp-tooltip-fg: var(--rp-color-on-success);
+}
+.rp-tooltip--color-warning[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-warning);
+  --_rp-tooltip-fg: var(--rp-color-on-warning);
+}
+.rp-tooltip--color-danger[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-danger);
+  --_rp-tooltip-fg: var(--rp-color-on-danger);
+}
+.rp-tooltip--color-info[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-info);
+  --_rp-tooltip-fg: var(--rp-color-on-info);
+}
+.rp-tooltip--color-neutral[data-v-13c39164] {
+  --_rp-tooltip-bg: var(--rp-color-neutral);
+  --_rp-tooltip-fg: var(--rp-color-on-neutral);
+}
+.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
+  bottom: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164]::before {
+  top: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  left: 50%;
+  translate: -50% 0;
+}
+.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
+  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  left: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164]::before {
+  top: 50%;
+  right: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  translate: 0 -50%;
+}
+.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
+  top: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  left: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  translate: -50% 0;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164]::before {
+  bottom: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  left: 50%;
+  translate: -50% 0;
+}
+.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
+  top: calc(50% + var(--_rp-tooltip-cross-axis-offset));
+  right: calc(100% + var(--_rp-tooltip-main-axis-offset));
+  translate: 0 -50%;
+}
+.rp-tooltip--arrow.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164]::before {
+  top: 50%;
+  left: calc(100% - var(--_rp-tooltip-arrow-size) / 2);
+  translate: 0 -50%;
+}
+.rp-tooltip--target[data-v-13c39164] {
+  display: contents;
+}
+.rp-tooltip--target .rp-tooltip__content[data-v-13c39164] {
+  position: fixed;
+  top: var(--_rp-tooltip-target-y, 0);
+  right: auto;
+  bottom: auto;
+  left: var(--_rp-tooltip-target-x, 0);
+}
+.rp-tooltip--target.rp-tooltip--placement-top .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) calc(-100% - var(--_rp-tooltip-main-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-right .rp-tooltip__content[data-v-13c39164] {
+  translate: var(--_rp-tooltip-main-axis-offset) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip--target.rp-tooltip--placement-bottom .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-50% + var(--_rp-tooltip-cross-axis-offset)) var(--_rp-tooltip-main-axis-offset);
+}
+.rp-tooltip--target.rp-tooltip--placement-left .rp-tooltip__content[data-v-13c39164] {
+  translate: calc(-100% - var(--_rp-tooltip-main-axis-offset)) calc(-50% + var(--_rp-tooltip-cross-axis-offset));
+}
+.rp-tooltip-content-enter-active[data-v-13c39164],
+.rp-tooltip-content-leave-active[data-v-13c39164] {
+  transition: opacity var(--rp-transition-fast);
+}
+.rp-tooltip-content-enter-from[data-v-13c39164],
+.rp-tooltip-content-leave-to[data-v-13c39164] {
+  opacity: 0;
+}