@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/components/tabs/TabsRoot.vue.d.ts

@@ -0,0 +1,44 @@
+import { type TabValue, type TabsOrientation } from './use-tabs';
+type __VLS_Props = {
+    /** The selected tab's `value`, bound with `v-model`. */
+    modelValue?: TabValue;
+    /** The tab selected at first, when no `v-model` owns it. */
+    defaultValue?: TabValue;
+    /** Which way the tabs run: Left/Right move between horizontal tabs, Up/Down between vertical ones. */
+    orientation?: TabsOrientation;
+    /** Select a tab as soon as an arrow key focuses it, rather than on Enter or Space. */
+    activateOnFocus?: boolean;
+    /** Whether arrow keys wrap past the first and last tab. */
+    loop?: boolean;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    orientation: TabsOrientation;
+    activationDirection: import("./use-tabs").TabActivationDirection;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, import("./use-tabs").UseTabsReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: TabValue) => any;
+    "update:modelValue": (value: TabValue) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChange?: ((value: TabValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: TabValue) => any) | undefined;
+}>, {
+    defaultValue: TabValue;
+    orientation: TabsOrientation;
+    as: string | object;
+    modelValue: TabValue;
+    loop: boolean;
+    activateOnFocus: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/TabsRoot.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,52 @@
+import { mergeProps as mergeProps$1 } from "../../shared/merge-props.js";
+import { Part } from "../../shared/part.js";
+import { provideTabsContext, useTabs } from "./use-tabs.js";
+import { computed, createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, useAttrs, withCtx } from "vue";
+//#region src/components/tabs/TabsRoot.vue?vue&type=script&setup=true&lang.ts
+var TabsRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "TabsRoot",
+	inheritAttrs: false,
+	__name: "TabsRoot",
+	props: {
+		modelValue: { default: void 0 },
+		defaultValue: { default: void 0 },
+		orientation: { default: "horizontal" },
+		activateOnFocus: {
+			type: Boolean,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			default: true
+		},
+		as: { default: "div" }
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const api = useTabs({
+			value: toRef(() => props.modelValue),
+			defaultValue: toRef(() => props.defaultValue),
+			orientation: toRef(() => props.orientation),
+			activateOnFocus: toRef(() => props.activateOnFocus),
+			loop: toRef(() => props.loop),
+			onChange: (value) => {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		});
+		provideTabsContext(api);
+		__expose(api);
+		const attrs = useAttrs();
+		const rootProps = computed(() => mergeProps$1(api.rootProps.value, attrs));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, rootProps.value), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { TabsRoot_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tabs/TabsTab.js

@@ -0,0 +1,5 @@
+import TabsTab_vue_vue_type_script_setup_true_lang_default from "./TabsTab.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/tabs/TabsTab.vue
+var TabsTab_default = TabsTab_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { TabsTab_default as default };

package/dist/components/tabs/TabsTab.vue.d.ts

@@ -0,0 +1,31 @@
+import { type TabValue } from './use-tabs';
+type __VLS_Props = {
+    /** Which panel it selects: the `TabsPanel` with the same `value`. */
+    value: TabValue;
+    /** Can't be selected or focused; arrow keys skip it. */
+    disabled?: boolean;
+    /** The tab's id, which its panel is labeled by. Generated when not given. */
+    id?: string;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare var __VLS_8: {
+    selected: boolean;
+    disabled: boolean;
+    orientation: import("./use-tabs").TabsOrientation;
+    activationDirection: import("./use-tabs").TabActivationDirection;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/tabs/TabsTab.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,33 @@
+import { Part } from "../../shared/part.js";
+import { usePartProps } from "../../shared/use-part-props.js";
+import { useTab } from "./use-tabs.js";
+import { createBlock, defineComponent, guardReactiveProps, mergeProps, normalizeProps, openBlock, renderSlot, toRef, unref, withCtx } from "vue";
+//#region src/components/tabs/TabsTab.vue?vue&type=script&setup=true&lang.ts
+var TabsTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "TabsTab",
+	inheritAttrs: false,
+	__name: "TabsTab",
+	props: {
+		value: {},
+		disabled: { type: Boolean },
+		id: {},
+		as: { default: "button" }
+	},
+	setup(__props) {
+		const props = __props;
+		const api = useTab({
+			value: toRef(() => props.value),
+			disabled: toRef(() => props.disabled),
+			id: toRef(() => props.id)
+		});
+		const merged = usePartProps(api.tabProps);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Part), mergeProps({ as: props.as }, unref(merged)), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(unref(api).state.value)))]),
+				_: 3
+			}, 16, ["as"]);
+		};
+	}
+});
+//#endregion
+export { TabsTab_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/tabs/use-tabs.d.ts

@@ -0,0 +1,107 @@
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from 'vue';
+import { type Orientation } from '../../shared/use-roving-focus';
+import { type RovingItem } from '../../shared/use-roving-items';
+import { type TransitionStatus } from '../../shared/use-transition-status';
+export type TabValue = string | number;
+export type TabsOrientation = Orientation;
+export type TabActivationDirection = 'none' | 'left' | 'right' | 'up' | 'down';
+export declare const ACTIVE_TAB_LEFT_VAR = "--active-tab-left";
+export declare const ACTIVE_TAB_RIGHT_VAR = "--active-tab-right";
+export declare const ACTIVE_TAB_TOP_VAR = "--active-tab-top";
+export declare const ACTIVE_TAB_BOTTOM_VAR = "--active-tab-bottom";
+export declare const ACTIVE_TAB_WIDTH_VAR = "--active-tab-width";
+export declare const ACTIVE_TAB_HEIGHT_VAR = "--active-tab-height";
+export interface TabsState {
+    /** Which way the tabs run, and so which arrow keys move between them. */
+    orientation: TabsOrientation;
+    /**
+     * Which way the selection last moved, from the old tab to the new one: `none` before any change.
+     * @attribute `data-activation-direction="…"`
+     */
+    activationDirection: TabActivationDirection;
+}
+export interface TabState extends TabsState {
+    /** Whether it is the selected tab. */
+    selected: boolean;
+    /** Whether it can't be selected. */
+    disabled: boolean;
+}
+export interface TabPanelState extends TabsState {
+    /** Whether its tab is the selected one. */
+    selected: boolean;
+    /**
+     * Where the panel is in its enter or exit animation.
+     * @attribute `data-enter-from` as it enters, `data-leave-to` as it leaves
+     */
+    transitionStatus: TransitionStatus;
+}
+export interface TabsIndicatorState extends TabsState {
+    /**
+     * Whether the selected tab has been measured; the indicator is `hidden` until then.
+     * @attribute none
+     */
+    positioned: boolean;
+}
+export type TabRegistration = RovingItem<TabValue>;
+export interface UseTabsOptions {
+    value?: MaybeRefOrGetter<TabValue | undefined>;
+    defaultValue?: MaybeRefOrGetter<TabValue | undefined>;
+    /** @default 'horizontal' */
+    orientation?: MaybeRefOrGetter<TabsOrientation | undefined>;
+    /**
+     * Select a tab as soon as an arrow key moves focus onto it, rather than waiting for Enter or Space.
+     * @default false
+     */
+    activateOnFocus?: MaybeRefOrGetter<boolean | undefined>;
+    loop?: MaybeRefOrGetter<boolean | undefined>;
+    onChange?: (value: TabValue) => void;
+}
+export interface UseTabsReturn {
+    value: WritableComputedRef<TabValue | undefined>;
+    state: ComputedRef<TabsState>;
+    rootProps: ComputedRef<Record<string, unknown>>;
+    listProps: ComputedRef<Record<string, unknown>>;
+    select: (value: TabValue) => void;
+    /** @internal */ tabs: Ref<TabRegistration[]>;
+    /** @internal */ listElement: Ref<HTMLElement | null>;
+    /** @internal */ orientation: () => TabsOrientation;
+    /** @internal */ activateOnFocus: () => boolean;
+    /** @internal */ tabbableValue: ComputedRef<TabValue | undefined>;
+    /** @internal */ highlight: (value: TabValue) => void;
+    /** @internal */ registerTab: (registration: TabRegistration) => void;
+    /** @internal */ unregisterTab: (id: string) => void;
+    /** @internal */ registerPanel: (value: TabValue, id: string) => void;
+    /** @internal */ unregisterPanel: (id: string) => void;
+    /** @internal */ panelIdFor: (value: TabValue) => string | undefined;
+    /** @internal */ tabIdFor: (value: TabValue) => string | undefined;
+    /** @internal */ selectedTab: ComputedRef<TabRegistration | undefined>;
+}
+export declare function useTabs(options?: UseTabsOptions): UseTabsReturn;
+export interface UseTabOptions {
+    value: MaybeRefOrGetter<TabValue>;
+    disabled?: MaybeRefOrGetter<boolean | undefined>;
+    id?: MaybeRefOrGetter<string | undefined>;
+}
+export interface UseTabReturn {
+    state: ComputedRef<TabState>;
+    tabProps: ComputedRef<Record<string, unknown>>;
+    selected: ComputedRef<boolean>;
+}
+export declare function useTab(options: UseTabOptions): UseTabReturn;
+export interface UseTabPanelOptions {
+    value: MaybeRefOrGetter<TabValue>;
+    keepMounted?: MaybeRefOrGetter<boolean | undefined>;
+}
+export interface UseTabPanelReturn {
+    state: ComputedRef<TabPanelState>;
+    panelProps: ComputedRef<Record<string, unknown>>;
+    present: Ref<boolean>;
+}
+export declare function useTabPanel(options: UseTabPanelOptions): UseTabPanelReturn;
+export interface UseTabsIndicatorReturn {
+    state: ComputedRef<TabsIndicatorState>;
+    indicatorProps: ComputedRef<Record<string, unknown>>;
+    measure: () => void;
+}
+export declare function useTabsIndicator(): UseTabsIndicatorReturn;
+export declare const provideTabsContext: (value: UseTabsReturn) => UseTabsReturn, useTabsContext: () => UseTabsReturn;

package/dist/components/tabs/use-tabs.js

@@ -0,0 +1,305 @@
+import { dataAttrs } from "../../shared/data-attrs.js";
+import { useControlled } from "../../shared/use-controlled.js";
+import { createContext } from "../../shared/context.js";
+import { popupStateAttrs } from "../../shared/popup-state-attrs.js";
+import { useTransitionStatus } from "../../shared/use-transition-status.js";
+import { useExitAnimation } from "../../shared/use-exit-animation.js";
+import { useRovingItems } from "../../shared/use-roving-items.js";
+import { useRovingFocus } from "../../shared/use-roving-focus.js";
+import { computed, onScopeDispose, ref, shallowRef, toValue, useId, watch } from "vue";
+//#region src/components/tabs/use-tabs.ts
+var ACTIVE_TAB_LEFT_VAR = "--active-tab-left";
+var ACTIVE_TAB_RIGHT_VAR = "--active-tab-right";
+var ACTIVE_TAB_TOP_VAR = "--active-tab-top";
+var ACTIVE_TAB_BOTTOM_VAR = "--active-tab-bottom";
+var ACTIVE_TAB_WIDTH_VAR = "--active-tab-width";
+var ACTIVE_TAB_HEIGHT_VAR = "--active-tab-height";
+var TAB_SELECTOR = "[role=\"tab\"]";
+function useTabs(options = {}) {
+	const orientation = () => toValue(options.orientation) ?? "horizontal";
+	const activateOnFocus = () => toValue(options.activateOnFocus) ?? false;
+	const loop = () => toValue(options.loop) ?? true;
+	const value = useControlled({
+		value: () => toValue(options.value),
+		defaultValue: () => toValue(options.defaultValue),
+		onChange: (next) => {
+			if (next !== void 0) options.onChange?.(next);
+		},
+		prop: "modelValue",
+		name: "useTabs",
+		label: "value"
+	});
+	const listElement = ref(null);
+	const registry = useRovingItems({ preferred: () => value.value });
+	const orderedTabs = registry.ordered;
+	const panels = shallowRef([]);
+	const selectedTab = computed(() => value.value === void 0 ? void 0 : registry.find(value.value));
+	const activationDirection = ref("none");
+	function directionBetween(from, to) {
+		if (from === void 0 || to === void 0 || from === to) return "none";
+		const list = orderedTabs.value;
+		const fromIndex = list.findIndex((tab) => tab.value === from);
+		const toIndex = list.findIndex((tab) => tab.value === to);
+		if (fromIndex === -1 || toIndex === -1) return "none";
+		const forward = toIndex > fromIndex;
+		if (orientation() === "vertical") return forward ? "down" : "up";
+		return forward ? "right" : "left";
+	}
+	watch(() => value.value, (next, previous) => {
+		activationDirection.value = directionBetween(previous, next);
+		registry.highlight(next);
+	});
+	let started = false;
+	function registerTab(registration) {
+		registry.register(registration);
+		if (!started && value.value === void 0 && !registration.disabled) {
+			started = true;
+			value.value = registration.value;
+		}
+	}
+	function registerPanel(panelValue, id) {
+		const index = panels.value.findIndex((panel) => panel.id === id);
+		const next = [...panels.value];
+		if (index === -1) next.push({
+			value: panelValue,
+			id
+		});
+		else next[index] = {
+			value: panelValue,
+			id
+		};
+		panels.value = next;
+	}
+	function unregisterPanel(id) {
+		panels.value = panels.value.filter((panel) => panel.id !== id);
+	}
+	const panelIdFor = (panelValue) => panels.value.find((panel) => panel.value === panelValue)?.id;
+	const tabIdFor = (tabValue) => registry.find(tabValue)?.id;
+	function select(next) {
+		if (next === value.value) return;
+		value.value = next;
+	}
+	const state = computed(() => ({
+		orientation: orientation(),
+		activationDirection: activationDirection.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, ACTIVATION_DIRECTION_ATTRS));
+	const roving = useRovingFocus({
+		container: listElement,
+		itemSelector: TAB_SELECTOR,
+		orientation,
+		loop
+	});
+	const rootProps = computed(() => ({
+		...hooks.value,
+		"data-part": "tabs"
+	}));
+	const listProps = computed(() => ({
+		...hooks.value,
+		"data-part": "tabs-list",
+		role: "tablist",
+		"aria-orientation": orientation() === "vertical" ? "vertical" : void 0,
+		ref: setListElement,
+		onKeydown(event) {
+			roving.onKeydown(event);
+		}
+	}));
+	function setListElement(element) {
+		listElement.value = element ?? null;
+	}
+	return {
+		value,
+		state,
+		rootProps,
+		listProps,
+		select,
+		tabs: registry.items,
+		listElement,
+		orientation,
+		activateOnFocus,
+		tabbableValue: registry.tabbableValue,
+		highlight: registry.highlight,
+		registerTab,
+		unregisterTab: registry.unregister,
+		registerPanel,
+		unregisterPanel,
+		panelIdFor,
+		tabIdFor,
+		selectedTab
+	};
+}
+function useTab(options) {
+	const tabs = useTabsContext();
+	const generatedId = useId();
+	const id = computed(() => toValue(options.id) ?? generatedId);
+	const tabValue = computed(() => toValue(options.value));
+	const disabled = computed(() => toValue(options.disabled) ?? false);
+	const element = ref(null);
+	watch([
+		id,
+		tabValue,
+		disabled,
+		element
+	], ([currentId, currentValue, isDisabled, currentElement]) => {
+		tabs.registerTab({
+			id: currentId,
+			value: currentValue,
+			disabled: isDisabled,
+			element: currentElement
+		});
+	}, { immediate: true });
+	onScopeDispose(() => tabs.unregisterTab(id.value));
+	const selected = computed(() => tabs.value.value === tabValue.value);
+	const state = computed(() => ({
+		...tabs.state.value,
+		selected: selected.value,
+		disabled: disabled.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, ACTIVATION_DIRECTION_ATTRS));
+	const tabProps = computed(() => ({
+		...hooks.value,
+		"data-part": "tabs-tab",
+		ref: setElement,
+		id: id.value,
+		role: "tab",
+		type: "button",
+		disabled: disabled.value || void 0,
+		"aria-selected": selected.value,
+		"aria-controls": tabs.panelIdFor(tabValue.value),
+		tabindex: tabs.tabbableValue.value === tabValue.value ? 0 : -1,
+		onClick() {
+			if (disabled.value) return;
+			tabs.select(tabValue.value);
+		},
+		onFocus() {
+			if (tabs.activateOnFocus()) tabs.select(tabValue.value);
+			else tabs.highlight(tabValue.value);
+		}
+	}));
+	function setElement(next) {
+		element.value = next ?? null;
+	}
+	return {
+		state,
+		tabProps,
+		selected
+	};
+}
+function useTabPanel(options) {
+	const tabs = useTabsContext();
+	const id = useId();
+	const element = ref(null);
+	const panelValue = computed(() => toValue(options.value));
+	const selected = computed(() => tabs.value.value === panelValue.value);
+	watch(panelValue, (next) => tabs.registerPanel(next, id), { immediate: true });
+	onScopeDispose(() => tabs.unregisterPanel(id));
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(() => selected.value);
+	useExitAnimation({
+		open: () => selected.value,
+		mounted,
+		setMounted,
+		element
+	});
+	const state = computed(() => ({
+		...tabs.state.value,
+		selected: selected.value,
+		transitionStatus: transitionStatus.value
+	}));
+	const hooks = computed(() => dataAttrs(state.value, {
+		...ACTIVATION_DIRECTION_ATTRS,
+		transitionStatus: popupStateAttrs.transitionStatus
+	}));
+	const panelProps = computed(() => ({
+		...hooks.value,
+		"data-part": "tabs-panel",
+		ref: setElement,
+		id,
+		role: "tabpanel",
+		hidden: mounted.value ? void 0 : true,
+		tabindex: 0,
+		"aria-labelledby": tabs.tabIdFor(panelValue.value)
+	}));
+	function setElement(next) {
+		element.value = next ?? null;
+	}
+	return {
+		state,
+		panelProps,
+		present: mounted
+	};
+}
+function useTabsIndicator() {
+	const tabs = useTabsContext();
+	const geometry = ref(null);
+	function measure() {
+		const list = tabs.listElement.value;
+		const tab = tabs.selectedTab.value?.element ?? null;
+		if (!list || !tab) {
+			geometry.value = null;
+			return;
+		}
+		const listRect = list.getBoundingClientRect();
+		const tabRect = tab.getBoundingClientRect();
+		const left = tabRect.left - listRect.left + list.scrollLeft - list.clientLeft;
+		const top = tabRect.top - listRect.top + list.scrollTop - list.clientTop;
+		geometry.value = {
+			left,
+			top,
+			width: tabRect.width,
+			height: tabRect.height,
+			right: list.scrollWidth - left - tabRect.width,
+			bottom: list.scrollHeight - top - tabRect.height
+		};
+	}
+	let observer = null;
+	function observe() {
+		observer?.disconnect();
+		if (!observer) return;
+		const list = tabs.listElement.value;
+		if (list) observer.observe(list);
+		for (const tab of tabs.tabs.value) if (tab.element) observer.observe(tab.element);
+	}
+	if (typeof ResizeObserver !== "undefined") observer = new ResizeObserver(measure);
+	watch(() => [tabs.listElement.value, tabs.tabs.value], () => {
+		observe();
+		measure();
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	watch(() => tabs.value.value, measure, { flush: "post" });
+	onScopeDispose(() => observer?.disconnect());
+	const state = computed(() => ({
+		...tabs.state.value,
+		positioned: geometry.value !== null
+	}));
+	const hooks = computed(() => dataAttrs(state.value, {
+		...ACTIVATION_DIRECTION_ATTRS,
+		positioned: () => null
+	}));
+	return {
+		state,
+		indicatorProps: computed(() => {
+			const current = geometry.value;
+			return {
+				...hooks.value,
+				"data-part": "tabs-indicator",
+				role: "presentation",
+				hidden: current === null || void 0,
+				style: current ? {
+					[ACTIVE_TAB_LEFT_VAR]: `${current.left}px`,
+					[ACTIVE_TAB_RIGHT_VAR]: `${current.right}px`,
+					[ACTIVE_TAB_TOP_VAR]: `${current.top}px`,
+					[ACTIVE_TAB_BOTTOM_VAR]: `${current.bottom}px`,
+					[ACTIVE_TAB_WIDTH_VAR]: `${current.width}px`,
+					[ACTIVE_TAB_HEIGHT_VAR]: `${current.height}px`
+				} : void 0
+			};
+		}),
+		measure
+	};
+}
+var ACTIVATION_DIRECTION_ATTRS = { activationDirection: (direction) => ({ "data-activation-direction": direction }) };
+var { provideContext: provideTabsContext, useContext: useTabsContext } = createContext("Tabs");
+//#endregion
+export { ACTIVE_TAB_BOTTOM_VAR, ACTIVE_TAB_HEIGHT_VAR, ACTIVE_TAB_LEFT_VAR, ACTIVE_TAB_RIGHT_VAR, ACTIVE_TAB_TOP_VAR, ACTIVE_TAB_WIDTH_VAR, provideTabsContext, useTab, useTabPanel, useTabs, useTabsContext, useTabsIndicator };

package/dist/components/textarea/Textarea.js

@@ -0,0 +1,5 @@
+import Textarea_vue_vue_type_script_setup_true_lang_default from "./Textarea.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/textarea/Textarea.vue
+var Textarea_default = Textarea_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Textarea_default as default };

package/dist/components/textarea/Textarea.vue.d.ts

@@ -0,0 +1,48 @@
+import { type InputModelModifiers } from '../../shared/model-modifiers';
+import { type FieldFilter } from '../../shared/use-input';
+type __VLS_Props = {
+    /** The value, bound with `v-model`. Always emitted as a string. */
+    modelValue?: string | number | null;
+    /** `v-model.optional` writes `undefined` once emptied; `.trim` and `.number` work as on an `<input>`. */
+    modelModifiers?: InputModelModifiers;
+    /** The value at first, when no `v-model` owns it. */
+    defaultValue?: string | number;
+    /** Ignores interaction. Inside a `FieldRoot`, follows the field. */
+    disabled?: boolean;
+    /** Can be read and selected but not edited. Inside a `FieldRoot`, follows the field. */
+    readOnly?: boolean;
+    /** Needs a value. Announced and styled, not enforced. Inside a `FieldRoot`, follows the field. */
+    required?: boolean;
+    /** Sets `aria-invalid` and `data-invalid`. Inside a `FieldRoot`, follows the field. */
+    invalid?: boolean;
+    /** The textarea's id. Inside a `FieldRoot`, the field's control id. */
+    id?: string;
+    /** The form field name. Inside a `FieldRoot`, the field's name. */
+    name?: string;
+    /** The native `minlength`. */
+    minLength?: number;
+    /** The native `maxlength`, also enforced while typing and pasting. */
+    maxLength?: number;
+    /** What may be typed at all, checked on every keystroke and paste: a regex source, a RegExp or a function. */
+    filter?: FieldFilter;
+    /** Rewrites the typed text once it's committed: on blur, or Enter in an input. Not applied to `v-model`'s own writes. */
+    transform?: (value: string) => string;
+    /** Grows and shrinks with its content. `rows` is the least it shrinks to. */
+    autosize?: boolean;
+    /** With `autosize`, the most rows it grows to before it scrolls. */
+    maxRows?: number;
+    /** Element or component to render. */
+    as?: string | object;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, import("../../shared/use-input").UseInputReturn, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    defaultValue: string | number;
+    as: string | object;
+    modelValue: string | number | null;
+    autosize: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;