ropav 0.11.0 → 0.11.1

package/dist/components/autocomplete/autocomplete-filter.d.ts

@@ -1,5 +1,5 @@
 import type { AutocompleteFilterProps, AutocompleteFilterSlotProps } from "./autocomplete.types.js";
-declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+declare const __VLS_export: <T = any>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & __VLS_PrettifyLocal<AutocompleteFilterProps<T> & {
         onInputChange?: ((value: string) => any) | undefined;
         "onUpdate:inputValue"?: ((value: string) => any) | undefined;

package/dist/components/textarea/textarea-root.js

@@ -3,6 +3,7 @@ import { useInteractionStates } from "../../composables/use-interaction-states.j
 import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
+import { useTextareaAutosize } from "../../composables/use-textarea-autosize.js";
 import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 import { textAreaVariants } from "@ropav/styles";
 //#region src/components/textarea/textarea-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
@@ -18,6 +19,13 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			type: Boolean,
 			default: void 0
 		},
+		autosize: {
+			type: Boolean,
+			default: void 0
+		},
+		minRows: { default: void 0 },
+		maxRows: { default: void 0 },
+		resize: { default: void 0 },
 		placeholder: {}
 	},
 	emits: ["change", "update:value"],
@@ -33,9 +41,11 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
 		const resolvedSize = computed(() => props.size ?? textField?.size.value);
+		const resolvedResize = computed(() => props.autosize ? "none" : props.resize);
 		const styles = computed(() => textAreaVariants({
 			class: props.class,
 			fullWidth: props.fullWidth,
+			resize: resolvedResize.value,
 			size: resolvedSize.value,
 			variant: resolvedVariant.value
 		}));
@@ -43,15 +53,24 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 			const merged = { ...control?.attrs.value };
 			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
 			if (props.value !== void 0) merged["value"] = props.value;
+			if (props.autosize && props.minRows !== void 0) merged["rows"] = props.minRows;
 			return merged;
 		});
 		const interaction = useInteractionStates({ isDisabled: () => control?.isDisabled.value });
 		const inputCount = shallowRef(0);
+		const { sync: syncAutosize } = useTextareaAutosize({
+			content: () => control?.attrs.value["value"],
+			element,
+			enabled: () => props.autosize,
+			maxRows: () => props.maxRows,
+			minRows: () => props.minRows
+		});
 		const onInput = (event) => {
 			control?.handlers.onInput(event);
 			const next = event.currentTarget.value;
 			emit("change", next);
 			emit("update:value", next);
+			syncAutosize({ fromInput: true });
 			if (props.value !== void 0) inputCount.value++;
 		};
 		/**
@@ -66,6 +85,7 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		], ([el, pinned]) => {
 			if (pinned === void 0) return;
 			setFormValue(el, pinned);
+			syncAutosize();
 		}, {
 			flush: "post",
 			immediate: true

package/dist/components/textarea/textarea.types.d.ts

@@ -16,6 +16,27 @@ export interface TextAreaRootProps {
     size?: TextAreaVariants["size"];
     /** Whether the control stretches to fill its container. */
     fullWidth?: boolean;
+    /**
+     * Whether the control grows with its content. `minRows` and `maxRows` only apply when this
+     * is set. Native resize is forced off while it is, so the drag handle cannot fight the
+     * measured height. @default false
+     */
+    autosize?: boolean;
+    /**
+     * Minimum visible rows while `autosize` is set. Ignored otherwise. Written through to the
+     * native `rows` attribute so the first paint is already that tall.
+     */
+    minRows?: number;
+    /**
+     * Maximum visible rows while `autosize` is set. Ignored otherwise. Absent, the control grows
+     * without a cap.
+     */
+    maxRows?: number;
+    /**
+     * Whether the pointer can drag the edge. `none` by default; `vertical` or `both` opt in.
+     * Ignored while `autosize` is set. @default "none"
+     */
+    resize?: TextAreaVariants["resize"];
     /**
      * Placeholder shown while the control is empty. Declared so it can also be set here rather
      * than only on the field; every other native attribute arrives by attribute fallthrough.

package/dist/composables/use-textarea-autosize.d.ts

@@ -0,0 +1,55 @@
+import type { MaybeRefOrGetter } from "vue";
+export interface UseTextareaAutosizeOptions {
+    element: MaybeRefOrGetter<HTMLTextAreaElement | null | undefined>;
+    /** When false, inline height and overflow are cleared and the native `rows` height is used. */
+    enabled: MaybeRefOrGetter<boolean | undefined>;
+    /** Floor, in rows. Ignored when `enabled` is false. */
+    minRows: MaybeRefOrGetter<number | undefined>;
+    /** Ceiling, in rows. Absent, the control grows without a cap. Ignored when `enabled` is false. */
+    maxRows: MaybeRefOrGetter<number | undefined>;
+    /**
+     * Text held somewhere the element cannot be read from. Reading `element.value` is not
+     * reactive, so a caller that does not already remeasure when its own text moves passes
+     * the value it holds here.
+     */
+    content?: MaybeRefOrGetter<unknown>;
+}
+export interface UseTextareaAutosizeSyncOptions {
+    /**
+     * From `input` only. A caret at the end then keeps the last line's padding in view.
+     * Layout remeasures omit this so a scroll the user made is not stolen.
+     */
+    fromInput?: boolean;
+}
+export interface UseTextareaAutosizeReturn {
+    /** Measure now. Needed from `input`, where the DOM already holds the next text. */
+    sync: (options?: UseTextareaAutosizeSyncOptions) => void;
+}
+/**
+ * Keep a textarea as tall as its content, optionally between `minRows` and `maxRows`.
+ *
+ * The caller has to invoke {@link UseTextareaAutosizeReturn.sync} from `input`: reading
+ * `element.value` inside a getter is not a reactive dependency, and waiting for a post-flush
+ * watch would size against the previous stroke. `minRows`, `maxRows` and {@link
+ * UseTextareaAutosizeOptions.content} go through a post-flush watch instead.
+ *
+ * Observers attach only while autosize is on. Native `resize` writes inline `width` and
+ * `height` as the pointer drags; an observer that stayed attached with autosize off would
+ * `clear` that height on every width change and fight the handle.
+ *
+ * Writing `style.height` is itself a size change, so the observer has to discriminate width
+ * or it would loop. That makes the seed load-bearing: it is read from the same content box
+ * `contentRect` reports, because a seed off by the border makes the first delivery look like
+ * a width change, and skipping that first delivery instead loses a real one — `sync` after
+ * `observe` can make a scrollbar appear, and the callback reporting the narrower width is
+ * the only notice of it.
+ *
+ * An inline height also hides height-only metric changes from the observer — a webfont that
+ * lands after first paint, or `.rp-textarea`'s `@media (width >= 40rem)` type/padding switch
+ * on a fixed-width control. Those go through `document.fonts` and `window` `resize`. Used
+ * metrics that do not move the box (`--rp-leading`, Firefox text-only zoom) never notify at
+ * all, which is why every field settles with `overflow-y: auto` — a stale height then
+ * scrolls rather than clips. A leftover clip on a field no cap clamped is the observer
+ * backstop for same-width box changes such as padding, which do notify.
+ */
+export declare const useTextareaAutosize: (options: UseTextareaAutosizeOptions) => UseTextareaAutosizeReturn;

package/dist/composables/use-textarea-autosize.js

@@ -0,0 +1,189 @@
+import { onScopeDispose, toValue, watch } from "vue";
+//#region src/composables/use-textarea-autosize.ts
+var px = (value) => {
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
+};
+/**
+* A used line-height, not the keyword.
+*
+* `normal` is a computed value the platform leaves unresolved, and a row count in `normal`s is
+* not a length. Font-size times 1.2 is the usual stand-in, and is what a missing font-size falls
+* back through as well.
+*/
+var lineHeightOf = (style) => {
+	const raw = style.lineHeight;
+	const parsed = Number.parseFloat(raw);
+	if (raw !== "normal" && Number.isFinite(parsed)) return parsed;
+	const fontSize = Number.parseFloat(style.fontSize);
+	return Number.isFinite(fontSize) ? fontSize * 1.2 : 16;
+};
+var positive = (value) => value !== void 0 && value > 0 ? value : void 0;
+var clear = (element) => {
+	element.style.height = "";
+	element.style.overflowY = "";
+	element.style.scrollPaddingBottom = "";
+};
+/**
+* Content-box width, the same box ResizeObserver reports as `contentRect`.
+*
+* `clientWidth` is the padding box minus the scrollbar, so subtracting inline
+* padding lands on the content box without mixing in the border the way
+* `getBoundingClientRect` does.
+*/
+var contentWidthOf = (element) => {
+	const style = getComputedStyle(element);
+	return element.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+};
+/**
+* Size a textarea to its content, clamped to a row range.
+*
+* Measured on the live element rather than a hidden clone of it: a clone is a second node in
+* the document to keep in step, and the live element already has the font, the padding and
+* the wrapping width. Height is set to `auto` for the read so a previous inline height cannot
+* pin `scrollHeight` to itself, then written back as a pixel height.
+*
+* `scrollHeight` includes padding and not the border. The reset is `border-box`, so the height
+* that is written has to put the border back or the last line is clipped by that much.
+*
+* The bottom-pin is input-only. Typing at the end has to bring `padding-bottom` into view;
+* a width, font or row-range remeasure must not yank a scroll the user just made.
+*
+* @returns Whether `maxRows` clamped the height, which is the one case where a field left
+* scrolling its own content is doing what it was asked to.
+*/
+var measure = (element, minRows, maxRows, fromInput) => {
+	const style = getComputedStyle(element);
+	const paddingY = px(style.paddingTop) + px(style.paddingBottom);
+	const borderY = px(style.borderTopWidth) + px(style.borderBottomWidth);
+	const lineHeight = lineHeightOf(style);
+	const borderBox = style.boxSizing === "border-box";
+	const extras = borderBox ? paddingY + borderY : 0;
+	const min = positive(minRows);
+	const max = positive(maxRows);
+	const paddingBottom = px(style.paddingBottom);
+	const scrollTop = element.scrollTop;
+	const atEnd = element.selectionStart === element.value.length && element.selectionEnd === element.value.length;
+	if (min !== void 0) element.rows = min;
+	element.style.height = "auto";
+	element.style.overflowY = "hidden";
+	let height = element.scrollHeight;
+	if (borderBox) height += borderY;
+	else height -= paddingY;
+	if (min !== void 0) height = Math.max(height, min * lineHeight + extras);
+	let capped = false;
+	if (max !== void 0) {
+		const cap = max * lineHeight + extras;
+		if (height > cap) {
+			height = cap;
+			capped = true;
+		}
+	}
+	element.style.height = `${height}px`;
+	element.style.overflowY = "auto";
+	element.style.scrollPaddingBottom = `${paddingBottom}px`;
+	if (fromInput && capped && atEnd) element.scrollTop = element.scrollHeight;
+	else element.scrollTop = scrollTop;
+	return capped;
+};
+/**
+* Keep a textarea as tall as its content, optionally between `minRows` and `maxRows`.
+*
+* The caller has to invoke {@link UseTextareaAutosizeReturn.sync} from `input`: reading
+* `element.value` inside a getter is not a reactive dependency, and waiting for a post-flush
+* watch would size against the previous stroke. `minRows`, `maxRows` and {@link
+* UseTextareaAutosizeOptions.content} go through a post-flush watch instead.
+*
+* Observers attach only while autosize is on. Native `resize` writes inline `width` and
+* `height` as the pointer drags; an observer that stayed attached with autosize off would
+* `clear` that height on every width change and fight the handle.
+*
+* Writing `style.height` is itself a size change, so the observer has to discriminate width
+* or it would loop. That makes the seed load-bearing: it is read from the same content box
+* `contentRect` reports, because a seed off by the border makes the first delivery look like
+* a width change, and skipping that first delivery instead loses a real one — `sync` after
+* `observe` can make a scrollbar appear, and the callback reporting the narrower width is
+* the only notice of it.
+*
+* An inline height also hides height-only metric changes from the observer — a webfont that
+* lands after first paint, or `.rp-textarea`'s `@media (width >= 40rem)` type/padding switch
+* on a fixed-width control. Those go through `document.fonts` and `window` `resize`. Used
+* metrics that do not move the box (`--rp-leading`, Firefox text-only zoom) never notify at
+* all, which is why every field settles with `overflow-y: auto` — a stale height then
+* scrolls rather than clips. A leftover clip on a field no cap clamped is the observer
+* backstop for same-width box changes such as padding, which do notify.
+*/
+var useTextareaAutosize = (options) => {
+	let observer;
+	let lastWidth = NaN;
+	/** So turning autosize off does not wipe a height the native resize handle wrote. */
+	let applied = false;
+	/** Whether `maxRows` clamped the last measure, which is when a clip is meant to be there. */
+	let capped = false;
+	const sync = (syncOptions) => {
+		const element = toValue(options.element) ?? null;
+		const enabled = Boolean(toValue(options.enabled));
+		if (!element) return;
+		if (!enabled) {
+			if (applied) {
+				clear(element);
+				applied = false;
+			}
+			return;
+		}
+		capped = measure(element, toValue(options.minRows), toValue(options.maxRows), Boolean(syncOptions?.fromInput));
+		applied = true;
+	};
+	const onMetrics = () => {
+		sync();
+	};
+	const metrics = (bind) => {
+		if (typeof document === "undefined") return;
+		window[bind]("resize", onMetrics);
+		document.fonts?.[bind]("loadingdone", onMetrics);
+	};
+	const detach = () => {
+		observer?.disconnect();
+		observer = void 0;
+		metrics("removeEventListener");
+	};
+	const observe = (element) => {
+		detach();
+		if (typeof ResizeObserver !== "undefined") {
+			lastWidth = contentWidthOf(element);
+			observer = new ResizeObserver((entries) => {
+				const width = entries[0]?.contentRect.width;
+				if (width === void 0) return;
+				const widthChanged = width !== lastWidth;
+				lastWidth = width;
+				if (widthChanged) {
+					sync();
+					return;
+				}
+				if (!capped && element.scrollHeight > element.clientHeight) sync();
+			});
+			observer.observe(element);
+		}
+		metrics("addEventListener");
+	};
+	watch([() => toValue(options.element) ?? null, () => Boolean(toValue(options.enabled))], ([element, enabled]) => {
+		detach();
+		if (!element) return;
+		if (enabled) observe(element);
+		sync();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch([
+		() => toValue(options.minRows),
+		() => toValue(options.maxRows),
+		() => toValue(options.content)
+	], () => {
+		sync();
+	}, { flush: "post" });
+	onScopeDispose(detach, true);
+	return { sync };
+};
+//#endregion
+export { useTextareaAutosize };