npm - @feugene/granularity - Versions diffs - 0.18.0 → 0.20.0 - Mend

@feugene/granularity 0.18.0 → 0.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1070) hide show

package/dist/components/GrTabs/chunks/GrTabs-CBHZkOFY.js ADDED Viewed

@@ -0,0 +1,262 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { n as iconTag, t as iconClass } from "../../../chunks/icon-Dag2tIMs.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { a as grTabsEmptyClass, c as tabCloseIconSizes, i as grTabsCloseClass, l as tabContentClass, o as grTabsListClass, r as grTabsBadgeClass, s as grTabsTabClass, u as tabIconClass } from "../../../chunks/config-DWN4x6_e.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch } from "vue";
+//#region src/components/GrTabs/GrTabs.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-orientation"];
+var _hoisted_2 = [
+	"id",
+	"aria-controls",
+	"aria-selected",
+	"aria-disabled",
+	"aria-keyshortcuts",
+	"tabindex",
+	"onClick"
+];
+var _hoisted_3 = ["title"];
+//#endregion
+//#region src/components/GrTabs/GrTabs.vue
+var GrTabs_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTabs",
+	props: {
+		modelValue: {},
+		tabs: {},
+		idBase: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: void 0 },
+		activationMode: { default: "automatic" },
+		orientation: { default: "horizontal" },
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		emptyText: { default: void 0 }
+	},
+	emits: ["update:modelValue", "close"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTabs" });
+		const resolvedVariant = useGrComponentProp("GrTabs", "variant", () => props.variant, "pills");
+		const tablistClass = computed(() => grTabsListClass({
+			variant: resolvedVariant.value,
+			size: resolvedSize.value,
+			orientation: props.orientation
+		}));
+		function tabClass(tab) {
+			return grTabsTabClass({
+				variant: resolvedVariant.value,
+				size: resolvedSize.value,
+				active: tab.value === props.modelValue,
+				disabled: Boolean(tab.disabled)
+			});
+		}
+		const badgeClass = computed(() => grTabsBadgeClass(resolvedSize.value));
+		const closeClass = computed(() => grTabsCloseClass(resolvedSize.value));
+		const closeIconClass = computed(() => tabCloseIconSizes[resolvedSize.value]);
+		const emptyClass = computed(() => grTabsEmptyClass(resolvedSize.value));
+		const isEmpty = computed(() => props.tabs.length === 0);
+		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.tabs.empty", "Nothing here yet"));
+		const closeTitle = computed(() => t("gr.tabs.close", "Close tab"));
+		/** Отключённая вкладка не принимает взаимодействия, а закрытие — тоже взаимодействие. */
+		function isClosable(tab) {
+			return !tab.disabled && (tab.closable ?? props.closable);
+		}
+		const buttonRefs = ref([]);
+		/**
+		* Vue зовёт ref-функцию с `null`, когда узел исчез. Игнорировать такой вызов
+		* нельзя: в массиве оставались отсоединённые от DOM кнопки, и `focus()` по
+		* сократившемуся списку молча проваливался в `<body>`.
+		*/
+		function setButtonRef(el, index) {
+			if (el instanceof HTMLButtonElement) buttonRefs.value[index] = el;
+			else delete buttonRefs.value[index];
+			if (buttonRefs.value.length > props.tabs.length) buttonRefs.value.length = props.tabs.length;
+		}
+		const activeIndex = computed(() => props.tabs.findIndex((t) => t.value === props.modelValue));
+		function isEnabled(tab) {
+			return !tab.disabled;
+		}
+		const tabIndexes = computed(() => props.tabs.map((_, index) => index));
+		/**
+		* Кольцо roving-фокуса. При `activationMode: 'manual'` фокус уезжает вперёд
+		* выбора — это и есть разница между `activeKey` примитива и `initialKey`:
+		* первый ведёт фокус, второй подставляет выбранную вкладку, пока фокус не
+		* трогали.
+		*
+		* Выбор стрелка **не** переносит: этим заведует `onKeydown` по
+		* `activationMode`. Через `onMove` это выразить нельзя — клик тоже зовёт
+		* `focusKey`, и выбор эмитился бы дважды.
+		*/
+		const roving = useRovingFocus({
+			items: () => tabIndexes.value,
+			elementFor: (index) => buttonRefs.value[index],
+			isDisabled: (index) => Boolean(props.tabs[index]?.disabled),
+			orientation: () => props.orientation === "vertical" ? "vertical" : "horizontal",
+			skipDisabled: () => true,
+			/**
+			* Пока фокус не трогали, остановку `Tab` держит выбранная вкладка. Если
+			* `modelValue` не совпал ни с одной (пустое начальное значение, асинхронный
+			* список, удалённая активная вкладка), примитив ставит её на первую
+			* доступную — иначе tablist выпал бы из обхода целиком и молча.
+			*
+			* Выключенность здесь не проверяется намеренно: на кнопке `aria-disabled`, а
+			* не нативный `disabled`, поэтому выключенная вкладка фокусируется и держать
+			* остановку вправе.
+			*/
+			initialKey: () => activeIndex.value >= 0 ? activeIndex.value : void 0,
+			/**
+			* Прокрутка до фокуса, а не после: иначе браузер доскроллит сам по-своему, и
+			* ряд дёрнется дважды. Синхронно — фокус обязан остаться в том же такте, что
+			* и раньше: тик, где он нужен, добавляет `focusIndex`.
+			*/
+			beforeFocus: (index) => scrollIntoView(index)
+		});
+		/**
+		* Фокус после перерисовки — для путей, где список только что изменился
+		* (закрытие вкладки). Клавиатура идёт через примитив напрямую: там ряд уже
+		* отрисован, и лишний тик только отложил бы фокус.
+		*/
+		async function focusIndex(index) {
+			await nextTick();
+			await roving.focusKey(index);
+		}
+		/**
+		* Ряд прокручивается, а не переносится, поэтому активная вкладка может уехать
+		* за край — например, когда её выбрали снаружи. `scrollIntoView` нет в jsdom и
+		* в старых движках, поэтому вызов необязательный.
+		*/
+		function scrollIntoView(index) {
+			buttonRefs.value[index]?.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			});
+		}
+		watch(() => props.modelValue, async () => {
+			await nextTick();
+			if (activeIndex.value >= 0) scrollIntoView(activeIndex.value);
+		});
+		async function selectByIndex(index, focus = false) {
+			const tab = props.tabs[index];
+			if (!tab || !isEnabled(tab)) return;
+			if (tab.value !== props.modelValue) emit("update:modelValue", tab.value);
+			if (focus) await focusIndex(index);
+		}
+		function onKeydown(event) {
+			if (props.tabs.length === 0) return;
+			const currentIndex = roving.rovingKey.value ?? 0;
+			switch (event.key) {
+				case "Enter":
+				case " ":
+					if (props.activationMode === "manual") {
+						event.preventDefault();
+						selectByIndex(currentIndex, false);
+					}
+					return;
+				case "Delete":
+				case "Backspace": {
+					const tab = props.tabs[currentIndex];
+					if (tab && isClosable(tab)) {
+						event.preventDefault();
+						requestClose(currentIndex);
+					}
+					return;
+				}
+			}
+			if (!roving.handleNavigationKeys(event)) return;
+			if (props.activationMode !== "manual") selectByIndex(roving.rovingKey.value ?? currentIndex, false);
+		}
+		/**
+		* Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —
+		* это делает потребитель, — поэтому фокус возвращается только после того, как
+		* `tabs` действительно стал короче.
+		*/
+		let pendingClose = null;
+		function requestClose(index) {
+			const tab = props.tabs[index];
+			if (!tab || !isClosable(tab)) return;
+			pendingClose = buttonRefs.value[index] === document.activeElement ? {
+				index,
+				value: tab.value
+			} : null;
+			emit("close", tab.value);
+		}
+		watch(() => props.tabs.length, async (next, prev) => {
+			const pending = pendingClose;
+			pendingClose = null;
+			if (!pending || next >= prev) return;
+			if (props.tabs.some((tab) => tab.value === pending.value)) return;
+			await nextTick();
+			const target = Math.min(pending.index, next - 1);
+			if (target >= 0) focusIndex(target);
+			else roving.reset();
+		});
+		function onClick(event, tab, index) {
+			if (!isEnabled(tab)) return;
+			if (event.target instanceof Element && event.target.closest("[data-gr-tab-close]")) {
+				requestClose(index);
+				return;
+			}
+			roving.setActive(index);
+			if (tab.value !== props.modelValue) emit("update:modelValue", tab.value);
+		}
+		return (_ctx, _cache) => {
+			return isEmpty.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				"data-gr-tabs-empty": "",
+				class: normalizeClass(emptyClass.value)
+			}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 2)) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				role: "tablist",
+				"data-gr-tabs": "",
+				"aria-orientation": __props.orientation,
+				class: normalizeClass(tablistClass.value),
+				onKeydown
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab, index) => {
+				return openBlock(), createElementBlock("button", {
+					id: __props.idBase ? `${__props.idBase}-tab-${tab.value}` : void 0,
+					key: tab.value,
+					ref_for: true,
+					ref: (el) => setButtonRef(el, index),
+					type: "button",
+					role: "tab",
+					"data-gr-tab": "",
+					"aria-controls": __props.idBase ? `${__props.idBase}-panel-${tab.value}` : void 0,
+					"aria-selected": tab.value === __props.modelValue ? "true" : "false",
+					"aria-disabled": tab.disabled ? "true" : void 0,
+					"aria-keyshortcuts": isClosable(tab) ? "Delete" : void 0,
+					tabindex: unref(roving).tabindexFor(index),
+					class: normalizeClass(tabClass(tab)),
+					onClick: ($event) => onClick($event, tab, index)
+				}, [createElementVNode("span", { class: normalizeClass(unref(tabContentClass)) }, [renderSlot(_ctx.$slots, "tab", {
+					tab,
+					active: tab.value === __props.modelValue,
+					disabled: Boolean(tab.disabled)
+				}, () => [
+					tab.icon ? (openBlock(), createBlock(resolveDynamicComponent(unref(iconTag)(tab.icon)), {
+						key: 0,
+						class: normalizeClass([unref(tabIconClass), unref(iconClass)(tab.icon)]),
+						"aria-hidden": "true"
+					}, null, 8, ["class"])) : createCommentVNode("", true),
+					createElementVNode("span", null, toDisplayString(tab.label), 1),
+					tab.badge ? (openBlock(), createElementBlock("span", {
+						key: 1,
+						class: normalizeClass(badgeClass.value)
+					}, toDisplayString(tab.badge), 3)) : createCommentVNode("", true)
+				]), isClosable(tab) ? (openBlock(), createElementBlock("span", {
+					key: 0,
+					"data-gr-tab-close": "",
+					class: normalizeClass(closeClass.value),
+					title: closeTitle.value,
+					"aria-hidden": "true"
+				}, [createVNode(unref(x_default), { class: normalizeClass(closeIconClass.value) }, null, 8, ["class"])], 10, _hoisted_3)) : createCommentVNode("", true)], 2)], 10, _hoisted_2);
+			}), 128))], 42, _hoisted_1));
+		};
+	}
+});
+//#endregion
+export { GrTabs_default as t };

package/dist/components/GrTabs/chunks/GrTabs-CBHZkOFY.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GrTabs-CBHZkOFY.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type Component } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { iconClass, iconTag } from '../shared/icon'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n grTabsBadgeClass,\n grTabsCloseClass,\n grTabsEmptyClass,\n grTabsListClass,\n grTabsTabClass,\n tabCloseIconSizes,\n tabContentClass,\n tabIconClass,\n type GrTabsOrientation,\n type GrTabsSize,\n type GrTabsVariant,\n} from './grTabsStyles'\n\nexport interface GrTab {\n value: string\n label: string\n badge?: string\n /**\n * Иконка слева от подписи: Vue-компонент либо класс иконки вашей UnoCSS-сборки\n * (`'i-lucide-user'` — тогда нужен ваш `presetIcons`, см. `docs/installation.md`).\n */\n icon?: string | Component\n disabled?: boolean\n /** Перекрывает `closable` ряда в обе стороны: закрепить вкладку или закрыть одну её. */\n closable?: boolean\n}\n\nexport interface GrTabsProps {\n modelValue: string\n tabs: GrTab[]\n /**\n * База id для ARIA-связки с `GrTabPanels`. Если задана, каждая вкладка\n * получает `id=\"<idBase>-tab-<value>\"` и `aria-controls=\"<idBase>-panel-<value>\"`.\n * Передайте тот же `idBase` в `GrTabPanels`, чтобы связать `tab`↔`tabpanel`.\n */\n idBase?: string\n size?: GrTabsSize\n /** Вид ряда: обойма с таблетками или ряд с подчёркиванием. */\n variant?: GrTabsVariant\n /**\n * `automatic` (по умолчанию) — стрелка сразу переключает вкладку;\n * `manual` — стрелка двигает только фокус, выбор подтверждается\n * `Enter`/`Space`. Второй режим для вкладок с тяжёлой загрузкой: перебор\n * стрелками иначе тянет каждую панель.\n */\n activationMode?: GrTabsActivationMode\n /** Горизонтальный (по умолчанию) или вертикальный список вкладок. */\n orientation?: GrTabsOrientation\n /**\n * Крестик на вкладках и закрытие по `Delete`/`Backspace`. Точечно снимается\n * `closable: false` у самой вкладки.\n */\n closable?: boolean\n /** Текст, когда список вкладок пуст. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrTabsEmits {\n (e: 'update:modelValue', value: string): void\n /**\n * Просьба закрыть вкладку. Компонент список не трогает: `tabs` — проп, и\n * закрытие может не состояться («сохранить изменения?»).\n */\n (e: 'close', value: string): void\n}\n\nexport type GrTabsActivationMode = 'automatic' | 'manual'\n\nexport type { GrTabsOrientation, GrTabsVariant } from './grTabsStyles'\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = withDefaults(defineProps<GrTabsProps>(), {\n idBase: undefined,\n size: undefined,\n // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n // заглянет в `GrConfigProvider`.\n variant: undefined,\n activationMode: 'automatic',\n orientation: 'horizontal',\n closable: false,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /** Содержимое вкладки целиком — вместо подписи, иконки и счётчика. Крестик остаётся. */\n tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => unknown\n /** Пустой ряд — вместо текста из локали. */\n empty?: () => unknown\n}>()\n\nconst emit = defineEmits<GrTabsEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTabs' })\nconst resolvedVariant = useGrComponentProp('GrTabs', 'variant', () => props.variant, 'pills')\n\nconst tablistClass = computed(() => grTabsListClass({\n variant: resolvedVariant.value,\n size: resolvedSize.value,\n orientation: props.orientation,\n}))\n\nfunction tabClass(tab: GrTab): string {\n return grTabsTabClass({\n variant: resolvedVariant.value,\n size: resolvedSize.value,\n active: tab.value === props.modelValue,\n disabled: Boolean(tab.disabled),\n })\n}\n\nconst badgeClass = computed(() => grTabsBadgeClass(resolvedSize.value))\nconst closeClass = computed(() => grTabsCloseClass(resolvedSize.value))\nconst closeIconClass = computed(() => tabCloseIconSizes[resolvedSize.value])\nconst emptyClass = computed(() => grTabsEmptyClass(resolvedSize.value))\n\nconst isEmpty = computed(() => props.tabs.length === 0)\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.tabs.empty', 'Nothing here yet'))\nconst closeTitle = computed(() => t('gr.tabs.close', 'Close tab'))\n\n/** Отключённая вкладка не принимает взаимодействия, а закрытие — тоже взаимодействие. */\nfunction isClosable(tab: GrTab): boolean {\n return !tab.disabled && (tab.closable ?? props.closable)\n}\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\n/**\n * Vue зовёт ref-функцию с `null`, когда узел исчез. Игнорировать такой вызов\n * нельзя: в массиве оставались отсоединённые от DOM кнопки, и `focus()` по\n * сократившемуся списку молча проваливался в `<body>`.\n */\nfunction setButtonRef(el: unknown, index: number): void {\n if (el instanceof HTMLButtonElement)\n buttonRefs.value[index] = el\n else\n delete buttonRefs.value[index]\n\n if (buttonRefs.value.length > props.tabs.length)\n buttonRefs.value.length = props.tabs.length\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nconst tabIndexes = computed(() => props.tabs.map((_, index) => index))\n\n/**\n * Кольцо roving-фокуса. При `activationMode: 'manual'` фокус уезжает вперёд\n * выбора — это и есть разница между `activeKey` примитива и `initialKey`:\n * первый ведёт фокус, второй подставляет выбранную вкладку, пока фокус не\n * трогали.\n *\n * Выбор стрелка **не** переносит: этим заведует `onKeydown` по\n * `activationMode`. Через `onMove` это выразить нельзя — клик тоже зовёт\n * `focusKey`, и выбор эмитился бы дважды.\n */\nconst roving = useRovingFocus<number>({\n items: () => tabIndexes.value,\n elementFor: index => buttonRefs.value[index],\n isDisabled: index => Boolean(props.tabs[index]?.disabled),\n orientation: () => (props.orientation === 'vertical' ? 'vertical' : 'horizontal'),\n skipDisabled: () => true,\n /**\n * Пока фокус не трогали, остановку `Tab` держит выбранная вкладка. Если\n * `modelValue` не совпал ни с одной (пустое начальное значение, асинхронный\n * список, удалённая активная вкладка), примитив ставит её на первую\n * доступную — иначе tablist выпал бы из обхода целиком и молча.\n *\n * Выключенность здесь не проверяется намеренно: на кнопке `aria-disabled`, а\n * не нативный `disabled`, поэтому выключенная вкладка фокусируется и держать\n * остановку вправе.\n */\n initialKey: () => (activeIndex.value >= 0 ? activeIndex.value : undefined),\n /**\n * Прокрутка до фокуса, а не после: иначе браузер доскроллит сам по-своему, и\n * ряд дёрнется дважды. Синхронно — фокус обязан остаться в том же такте, что\n * и раньше: тик, где он нужен, добавляет `focusIndex`.\n */\n beforeFocus: index => scrollIntoView(index),\n})\n\n/**\n * Фокус после перерисовки — для путей, где список только что изменился\n * (закрытие вкладки). Клавиатура идёт через примитив напрямую: там ряд уже\n * отрисован, и лишний тик только отложил бы фокус.\n */\nasync function focusIndex(index: number): Promise<void> {\n await nextTick()\n await roving.focusKey(index)\n}\n\n/**\n * Ряд прокручивается, а не переносится, поэтому активная вкладка может уехать\n * за край — например, когда её выбрали снаружи. `scrollIntoView` нет в jsdom и\n * в старых движках, поэтому вызов необязательный.\n */\nfunction scrollIntoView(index: number): void {\n buttonRefs.value[index]?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n}\n\nwatch(() => props.modelValue, async () => {\n await nextTick()\n if (activeIndex.value >= 0)\n scrollIntoView(activeIndex.value)\n})\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n const tab = props.tabs[index]\n if (!tab || !isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n if (focus)\n await focusIndex(index)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = roving.rovingKey.value ?? 0\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n // В ручном режиме выбор подтверждается явно — на той вкладке, где фокус.\n if (props.activationMode === 'manual') {\n event.preventDefault()\n void selectByIndex(currentIndex, false)\n }\n return\n case 'Delete':\n case 'Backspace': {\n // Единственный клавиатурный путь к закрытию: крестик в таб-порядке не стоит.\n const tab = props.tabs[currentIndex]\n if (tab && isClosable(tab)) {\n event.preventDefault()\n requestClose(currentIndex)\n }\n return\n }\n }\n\n // Стрелки, `Home`, `End` — фокус ведёт примитив по объявленной ориентации.\n if (!roving.handleNavigationKeys(event))\n return\n\n // `automatic`: выбор едет за фокусом. `manual`: ждёт `Enter`/`Space`.\n if (props.activationMode !== 'manual')\n void selectByIndex(roving.rovingKey.value ?? currentIndex, false)\n}\n\n/**\n * Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —\n * это делает потребитель, — поэтому фокус возвращается только после того, как\n * `tabs` действительно стал короче.\n */\nlet pendingClose: { index: number, value: string } | null = null\n\nfunction requestClose(index: number): void {\n const tab = props.tabs[index]\n if (!tab || !isClosable(tab))\n return\n\n const held = buttonRefs.value[index] === document.activeElement\n pendingClose = held ? { index, value: tab.value } : null\n\n emit('close', tab.value)\n}\n\n// Без этого клавиатурное закрытие роняет фокус в `<body>`: кнопка, на которой\n// он стоял, исчезает из DOM вместе со вкладкой.\nwatch(() => props.tabs.length, async (next, prev) => {\n const pending = pendingClose\n pendingClose = null\n\n if (!pending || next >= prev)\n return\n // Ушла не та вкладка — потребитель поменял список по своей причине.\n if (props.tabs.some(tab => tab.value === pending.value))\n return\n\n await nextTick()\n\n const target = Math.min(pending.index, next - 1)\n if (target >= 0)\n void focusIndex(target)\n else\n roving.reset()\n})\n\nfunction onClick(event: MouseEvent, tab: GrTab, index: number): void {\n if (!isEnabled(tab))\n return\n\n // Крестик — не кнопка, поэтому его клик приходит сюда же и разбирается по цели.\n if (event.target instanceof Element && event.target.closest('[data-gr-tab-close]')) {\n requestClose(index)\n return\n }\n\n roving.setActive(index)\n\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n \n <div v-if=\"isEmpty\" data-gr-tabs-empty :class=\"emptyClass\">\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div\n v-else\n role=\"tablist\"\n data-gr-tabs\n :aria-orientation=\"orientation\"\n :class=\"tablistClass\"\n @keydown=\"onKeydown\"\n >\n <button\n v-for=\"(tab, index) in tabs\"\n :id=\"idBase ? `${idBase}-tab-${tab.value}` : undefined\"\n :key=\"tab.value\"\n :ref=\"el => setButtonRef(el, index)\"\n type=\"button\"\n role=\"tab\"\n data-gr-tab\n :aria-controls=\"idBase ? `${idBase}-panel-${tab.value}` : undefined\"\n :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n :aria-keyshortcuts=\"isClosable(tab) ? 'Delete' : undefined\"\n :tabindex=\"roving.tabindexFor(index)\"\n :class=\"tabClass(tab)\"\n @click=\"onClick($event, tab, index)\"\n >\n <span :class=\"tabContentClass\">\n <slot\n name=\"tab\"\n :tab=\"tab\"\n :active=\"tab.value === modelValue\"\n :disabled=\"Boolean(tab.disabled)\"\n >\n <component\n :is=\"iconTag(tab.icon)\"\n v-if=\"tab.icon\"\n :class=\"[tabIconClass, iconClass(tab.icon)]\"\n aria-hidden=\"true\"\n />\n <span>{{ tab.label }}</span>\n <span v-if=\"tab.badge\" :class=\"badgeClass\">\n {{ tab.badge }}\n </span>\n </slot>\n\n \n <span\n v-if=\"isClosable(tab)\"\n data-gr-tab-close\n :class=\"closeClass\"\n :title=\"closeTitle\"\n aria-hidden=\"true\"\n >\n <IconX :class=\"closeIconClass\" />\n </span>\n </span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch, type Component } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { iconClass, iconTag } from '../shared/icon'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n grTabsBadgeClass,\n grTabsCloseClass,\n grTabsEmptyClass,\n grTabsListClass,\n grTabsTabClass,\n tabCloseIconSizes,\n tabContentClass,\n tabIconClass,\n type GrTabsOrientation,\n type GrTabsSize,\n type GrTabsVariant,\n} from './grTabsStyles'\n\nexport interface GrTab {\n value: string\n label: string\n badge?: string\n /**\n * Иконка слева от подписи: Vue-компонент либо класс иконки вашей UnoCSS-сборки\n * (`'i-lucide-user'` — тогда нужен ваш `presetIcons`, см. `docs/installation.md`).\n */\n icon?: string | Component\n disabled?: boolean\n /** Перекрывает `closable` ряда в обе стороны: закрепить вкладку или закрыть одну её. */\n closable?: boolean\n}\n\nexport interface GrTabsProps {\n modelValue: string\n tabs: GrTab[]\n /**\n * База id для ARIA-связки с `GrTabPanels`. Если задана, каждая вкладка\n * получает `id=\"<idBase>-tab-<value>\"` и `aria-controls=\"<idBase>-panel-<value>\"`.\n * Передайте тот же `idBase` в `GrTabPanels`, чтобы связать `tab`↔`tabpanel`.\n */\n idBase?: string\n size?: GrTabsSize\n /** Вид ряда: обойма с таблетками или ряд с подчёркиванием. */\n variant?: GrTabsVariant\n /**\n * `automatic` (по умолчанию) — стрелка сразу переключает вкладку;\n * `manual` — стрелка двигает только фокус, выбор подтверждается\n * `Enter`/`Space`. Второй режим для вкладок с тяжёлой загрузкой: перебор\n * стрелками иначе тянет каждую панель.\n */\n activationMode?: GrTabsActivationMode\n /** Горизонтальный (по умолчанию) или вертикальный список вкладок. */\n orientation?: GrTabsOrientation\n /**\n * Крестик на вкладках и закрытие по `Delete`/`Backspace`. Точечно снимается\n * `closable: false` у самой вкладки.\n */\n closable?: boolean\n /** Текст, когда список вкладок пуст. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrTabsEmits {\n (e: 'update:modelValue', value: string): void\n /**\n * Просьба закрыть вкладку. Компонент список не трогает: `tabs` — проп, и\n * закрытие может не состояться («сохранить изменения?»).\n */\n (e: 'close', value: string): void\n}\n\nexport type GrTabsActivationMode = 'automatic' | 'manual'\n\nexport type { GrTabsOrientation, GrTabsVariant } from './grTabsStyles'\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = withDefaults(defineProps<GrTabsProps>(), {\n idBase: undefined,\n size: undefined,\n // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n // заглянет в `GrConfigProvider`.\n variant: undefined,\n activationMode: 'automatic',\n orientation: 'horizontal',\n closable: false,\n emptyText: undefined,\n})\n\ndefineSlots<{\n /** Содержимое вкладки целиком — вместо подписи, иконки и счётчика. Крестик остаётся. */\n tab?: (props: { tab: GrTab, active: boolean, disabled: boolean }) => unknown\n /** Пустой ряд — вместо текста из локали. */\n empty?: () => unknown\n}>()\n\nconst emit = defineEmits<GrTabsEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTabs' })\nconst resolvedVariant = useGrComponentProp('GrTabs', 'variant', () => props.variant, 'pills')\n\nconst tablistClass = computed(() => grTabsListClass({\n variant: resolvedVariant.value,\n size: resolvedSize.value,\n orientation: props.orientation,\n}))\n\nfunction tabClass(tab: GrTab): string {\n return grTabsTabClass({\n variant: resolvedVariant.value,\n size: resolvedSize.value,\n active: tab.value === props.modelValue,\n disabled: Boolean(tab.disabled),\n })\n}\n\nconst badgeClass = computed(() => grTabsBadgeClass(resolvedSize.value))\nconst closeClass = computed(() => grTabsCloseClass(resolvedSize.value))\nconst closeIconClass = computed(() => tabCloseIconSizes[resolvedSize.value])\nconst emptyClass = computed(() => grTabsEmptyClass(resolvedSize.value))\n\nconst isEmpty = computed(() => props.tabs.length === 0)\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.tabs.empty', 'Nothing here yet'))\nconst closeTitle = computed(() => t('gr.tabs.close', 'Close tab'))\n\n/** Отключённая вкладка не принимает взаимодействия, а закрытие — тоже взаимодействие. */\nfunction isClosable(tab: GrTab): boolean {\n return !tab.disabled && (tab.closable ?? props.closable)\n}\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\n/**\n * Vue зовёт ref-функцию с `null`, когда узел исчез. Игнорировать такой вызов\n * нельзя: в массиве оставались отсоединённые от DOM кнопки, и `focus()` по\n * сократившемуся списку молча проваливался в `<body>`.\n */\nfunction setButtonRef(el: unknown, index: number): void {\n if (el instanceof HTMLButtonElement)\n buttonRefs.value[index] = el\n else\n delete buttonRefs.value[index]\n\n if (buttonRefs.value.length > props.tabs.length)\n buttonRefs.value.length = props.tabs.length\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nconst tabIndexes = computed(() => props.tabs.map((_, index) => index))\n\n/**\n * Кольцо roving-фокуса. При `activationMode: 'manual'` фокус уезжает вперёд\n * выбора — это и есть разница между `activeKey` примитива и `initialKey`:\n * первый ведёт фокус, второй подставляет выбранную вкладку, пока фокус не\n * трогали.\n *\n * Выбор стрелка **не** переносит: этим заведует `onKeydown` по\n * `activationMode`. Через `onMove` это выразить нельзя — клик тоже зовёт\n * `focusKey`, и выбор эмитился бы дважды.\n */\nconst roving = useRovingFocus<number>({\n items: () => tabIndexes.value,\n elementFor: index => buttonRefs.value[index],\n isDisabled: index => Boolean(props.tabs[index]?.disabled),\n orientation: () => (props.orientation === 'vertical' ? 'vertical' : 'horizontal'),\n skipDisabled: () => true,\n /**\n * Пока фокус не трогали, остановку `Tab` держит выбранная вкладка. Если\n * `modelValue` не совпал ни с одной (пустое начальное значение, асинхронный\n * список, удалённая активная вкладка), примитив ставит её на первую\n * доступную — иначе tablist выпал бы из обхода целиком и молча.\n *\n * Выключенность здесь не проверяется намеренно: на кнопке `aria-disabled`, а\n * не нативный `disabled`, поэтому выключенная вкладка фокусируется и держать\n * остановку вправе.\n */\n initialKey: () => (activeIndex.value >= 0 ? activeIndex.value : undefined),\n /**\n * Прокрутка до фокуса, а не после: иначе браузер доскроллит сам по-своему, и\n * ряд дёрнется дважды. Синхронно — фокус обязан остаться в том же такте, что\n * и раньше: тик, где он нужен, добавляет `focusIndex`.\n */\n beforeFocus: index => scrollIntoView(index),\n})\n\n/**\n * Фокус после перерисовки — для путей, где список только что изменился\n * (закрытие вкладки). Клавиатура идёт через примитив напрямую: там ряд уже\n * отрисован, и лишний тик только отложил бы фокус.\n */\nasync function focusIndex(index: number): Promise<void> {\n await nextTick()\n await roving.focusKey(index)\n}\n\n/**\n * Ряд прокручивается, а не переносится, поэтому активная вкладка может уехать\n * за край — например, когда её выбрали снаружи. `scrollIntoView` нет в jsdom и\n * в старых движках, поэтому вызов необязательный.\n */\nfunction scrollIntoView(index: number): void {\n buttonRefs.value[index]?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' })\n}\n\nwatch(() => props.modelValue, async () => {\n await nextTick()\n if (activeIndex.value >= 0)\n scrollIntoView(activeIndex.value)\n})\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n const tab = props.tabs[index]\n if (!tab || !isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n if (focus)\n await focusIndex(index)\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = roving.rovingKey.value ?? 0\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n // В ручном режиме выбор подтверждается явно — на той вкладке, где фокус.\n if (props.activationMode === 'manual') {\n event.preventDefault()\n void selectByIndex(currentIndex, false)\n }\n return\n case 'Delete':\n case 'Backspace': {\n // Единственный клавиатурный путь к закрытию: крестик в таб-порядке не стоит.\n const tab = props.tabs[currentIndex]\n if (tab && isClosable(tab)) {\n event.preventDefault()\n requestClose(currentIndex)\n }\n return\n }\n }\n\n // Стрелки, `Home`, `End` — фокус ведёт примитив по объявленной ориентации.\n if (!roving.handleNavigationKeys(event))\n return\n\n // `automatic`: выбор едет за фокусом. `manual`: ждёт `Enter`/`Space`.\n if (props.activationMode !== 'manual')\n void selectByIndex(roving.rovingKey.value ?? currentIndex, false)\n}\n\n/**\n * Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —\n * это делает потребитель, — поэтому фокус возвращается только после того, как\n * `tabs` действительно стал короче.\n */\nlet pendingClose: { index: number, value: string } | null = null\n\nfunction requestClose(index: number): void {\n const tab = props.tabs[index]\n if (!tab || !isClosable(tab))\n return\n\n const held = buttonRefs.value[index] === document.activeElement\n pendingClose = held ? { index, value: tab.value } : null\n\n emit('close', tab.value)\n}\n\n// Без этого клавиатурное закрытие роняет фокус в `<body>`: кнопка, на которой\n// он стоял, исчезает из DOM вместе со вкладкой.\nwatch(() => props.tabs.length, async (next, prev) => {\n const pending = pendingClose\n pendingClose = null\n\n if (!pending || next >= prev)\n return\n // Ушла не та вкладка — потребитель поменял список по своей причине.\n if (props.tabs.some(tab => tab.value === pending.value))\n return\n\n await nextTick()\n\n const target = Math.min(pending.index, next - 1)\n if (target >= 0)\n void focusIndex(target)\n else\n roving.reset()\n})\n\nfunction onClick(event: MouseEvent, tab: GrTab, index: number): void {\n if (!isEnabled(tab))\n return\n\n // Крестик — не кнопка, поэтому его клик приходит сюда же и разбирается по цели.\n if (event.target instanceof Element && event.target.closest('[data-gr-tab-close]')) {\n requestClose(index)\n return\n }\n\n roving.setActive(index)\n\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n \n <div v-if=\"isEmpty\" data-gr-tabs-empty :class=\"emptyClass\">\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div\n v-else\n role=\"tablist\"\n data-gr-tabs\n :aria-orientation=\"orientation\"\n :class=\"tablistClass\"\n @keydown=\"onKeydown\"\n >\n <button\n v-for=\"(tab, index) in tabs\"\n :id=\"idBase ? `${idBase}-tab-${tab.value}` : undefined\"\n :key=\"tab.value\"\n :ref=\"el => setButtonRef(el, index)\"\n type=\"button\"\n role=\"tab\"\n data-gr-tab\n :aria-controls=\"idBase ? `${idBase}-panel-${tab.value}` : undefined\"\n :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n :aria-keyshortcuts=\"isClosable(tab) ? 'Delete' : undefined\"\n :tabindex=\"roving.tabindexFor(index)\"\n :class=\"tabClass(tab)\"\n @click=\"onClick($event, tab, index)\"\n >\n <span :class=\"tabContentClass\">\n <slot\n name=\"tab\"\n :tab=\"tab\"\n :active=\"tab.value === modelValue\"\n :disabled=\"Boolean(tab.disabled)\"\n >\n <component\n :is=\"iconTag(tab.icon)\"\n v-if=\"tab.icon\"\n :class=\"[tabIconClass, iconClass(tab.icon)]\"\n aria-hidden=\"true\"\n />\n <span>{{ tab.label }}</span>\n <span v-if=\"tab.badge\" :class=\"badgeClass\">\n {{ tab.badge }}\n </span>\n </slot>\n\n \n <span\n v-if=\"isClosable(tab)\"\n data-gr-tab-close\n :class=\"closeClass\"\n :title=\"closeTitle\"\n aria-hidden=\"true\"\n >\n <IconX :class=\"closeIconClass\" />\n </span>\n </span>\n </button>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTabs/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { n as grTabsSafelist, r as GR_TABS_VARIANTS, t as grTabsConfig } from "../../chunks/config-_qPUfb6-2.js";
-import { t as GrTabs_default } from "./chunks/GrTabs-TeXaU5Uh.js";
-export { GR_TABS_VARIANTS, GrTabs_default as GrTabs, GrTabs_default as default, grTabsConfig, grTabsSafelist };
+import { n as grTabsSafelist, t as grTabsConfig } from "../../chunks/config-DWN4x6_e.js";
+import { t as GrTabs_default } from "./chunks/GrTabs-CBHZkOFY.js";
+export { GrTabs_default as GrTabs, GrTabs_default as default, grTabsConfig, grTabsSafelist };

package/dist/components/GrTextarea/chunks/GrTextarea-CNnkcIG1.js ADDED Viewed

@@ -0,0 +1,241 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { vAutosize } from "../../../directives/autosize.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { a as enabledSurfaceClass, c as lineCountClass, i as disabledSurfaceClass, l as resizeClass, n as countClass, o as grTextareaClass, r as countRowClass, u as sizes } from "../../../chunks/grTextareaStyles-iOcHuVMM.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, openBlock, ref, toDisplayString, unref, useId, withDirectives } from "vue";
+//#region src/components/GrTextarea/GrTextarea.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	"data-gr-textarea-wrap": "",
+	class: "relative w-full"
+};
+var _hoisted_2 = ["aria-label"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = ["id"];
+var _hoisted_5 = {
+	key: 1,
+	class: "relative w-full"
+};
+var _hoisted_6 = ["aria-label"];
+var baseClass = "w-full rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed";
+//#endregion
+//#region src/components/GrTextarea/GrTextarea.vue
+var GrTextarea_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "GrTextarea",
+	props: {
+		modelValue: {},
+		placeholder: { default: void 0 },
+		autocomplete: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		state: { default: "default" },
+		name: { default: void 0 },
+		id: { default: void 0 },
+		rows: { default: 4 },
+		size: { default: void 0 },
+		maxlength: { default: void 0 },
+		showCount: {
+			type: Boolean,
+			default: false
+		},
+		showLineCount: { type: Boolean },
+		maxLines: {},
+		autosize: {
+			type: Boolean,
+			default: false
+		},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		clearLabel: { default: void 0 },
+		resize: { default: "vertical" }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* GrTextarea — многострочное поле ввода GR-примитива.
+		*
+		* Состояния:
+		* - `state`: визуальный оттенок рамки (`default | success | warning | danger`).
+		* - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid="true"`.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => props.id ?? field?.id.value);
+		const countId = useId();
+		const lineCountId = useId();
+		const describedBy = computed(() => [
+			field?.describedById.value,
+			props.showCount ? countId : void 0,
+			props.showLineCount ? lineCountId : void 0
+		].filter(Boolean).join(" ") || void 0);
+		/** Обёртка нужна любому из счётчиков — и кнопке очистки. */
+		const hasCounters = computed(() => props.showCount || props.showLineCount);
+		const lineCount = computed(() => props.modelValue.split("\n").length);
+		const countText = computed(() => props.maxlength !== void 0 ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length));
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const textareaEl = ref(null);
+		function focus() {
+			textareaEl.value?.focus();
+		}
+		function blur() {
+			textareaEl.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrTextarea" });
+		const resolvedClearable = useGrComponentProp("GrTextarea", "clearable", () => props.clearable, false);
+		const { t } = useGranularityTranslations();
+		const resolvedClearLabel = computed(() => props.clearLabel ?? t("gr.input.clear", "Clear"));
+		/** С `maxLines` — «3 / 10», без него — локализованная подпись с формой числа. */
+		const lineCountText = computed(() => props.maxLines !== void 0 ? `${lineCount.value} / ${props.maxLines}` : t("gr.textarea.lines", "{n} lines", { n: lineCount.value }));
+		const showClear = computed(() => resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== "");
+		function clear() {
+			emit("update:modelValue", "");
+			emit("change", "");
+			emit("clear");
+			focus();
+		}
+		const className = computed(() => [
+			sizes[resolvedSize.value],
+			resizeClass[props.resize],
+			isDisabled.value ? disabledSurfaceClass : enabledSurfaceClass,
+			grTextareaClass({
+				state: props.state,
+				invalid: isInvalid.value
+			})
+		].join(" "));
+		const textareaAttrs = computed(() => ({
+			id: resolvedId.value,
+			"data-gr-textarea": "",
+			name: props.name,
+			rows: props.rows,
+			maxlength: props.maxlength,
+			autocomplete: props.autocomplete,
+			placeholder: props.placeholder,
+			disabled: isDisabled.value,
+			value: props.modelValue,
+			"aria-invalid": isInvalid.value ? "true" : void 0,
+			"aria-describedby": describedBy.value,
+			"aria-required": isRequired.value ? "true" : void 0,
+			"aria-readonly": isReadonly.value ? "true" : void 0,
+			"aria-label": props.ariaLabel,
+			readonly: isReadonly.value,
+			class: [baseClass, className.value]
+		}));
+		function onInput(e) {
+			emit("update:modelValue", e.target.value);
+		}
+		function onChange(e) {
+			emit("change", e.target.value);
+		}
+		function onFocus(e) {
+			emit("focus", e);
+		}
+		function onBlur(e) {
+			emit("blur", e);
+		}
+		return (_ctx, _cache) => {
+			return hasCounters.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				withDirectives(createElementVNode("textarea", mergeProps({
+					ref_key: "textareaEl",
+					ref: textareaEl
+				}, {
+					...textareaAttrs.value,
+					..._ctx.$attrs
+				}, {
+					onInput,
+					onChange,
+					onFocus,
+					onBlur
+				}), null, 16), [[unref(vAutosize), __props.autosize]]),
+				showClear.value ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					type: "button",
+					"data-gr-textarea-clear": "",
+					"aria-label": resolvedClearLabel.value,
+					class: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
+					onClick: clear
+				}, [createVNode(unref(x_default), {
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})], 8, _hoisted_2)) : createCommentVNode("", true),
+				createElementVNode("div", { class: normalizeClass(unref(countRowClass)) }, [__props.showLineCount ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					id: unref(lineCountId),
+					"data-gr-textarea-line-count": "",
+					class: normalizeClass(unref(lineCountClass))
+				}, toDisplayString(lineCountText.value), 11, _hoisted_3)) : createCommentVNode("", true), __props.showCount ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					id: unref(countId),
+					"data-gr-textarea-count": "",
+					class: normalizeClass(["ml-auto", unref(countClass)])
+				}, toDisplayString(countText.value), 11, _hoisted_4)) : createCommentVNode("", true)], 2)
+			])) : unref(resolvedClearable) ? (openBlock(), createElementBlock("div", _hoisted_5, [withDirectives(createElementVNode("textarea", mergeProps({
+				ref_key: "textareaEl",
+				ref: textareaEl
+			}, {
+				...textareaAttrs.value,
+				..._ctx.$attrs
+			}, {
+				onInput,
+				onChange,
+				onFocus,
+				onBlur
+			}), null, 16), [[unref(vAutosize), __props.autosize]]), showClear.value ? (openBlock(), createElementBlock("button", {
+				key: 0,
+				type: "button",
+				"data-gr-textarea-clear": "",
+				"aria-label": resolvedClearLabel.value,
+				class: "absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
+				onClick: clear
+			}, [createVNode(unref(x_default), {
+				class: "h-4 w-4",
+				"aria-hidden": "true"
+			})], 8, _hoisted_6)) : createCommentVNode("", true)])) : withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
+				key: 2,
+				ref_key: "textareaEl",
+				ref: textareaEl
+			}, {
+				...textareaAttrs.value,
+				..._ctx.$attrs
+			}, {
+				onInput,
+				onChange,
+				onFocus,
+				onBlur
+			}), null, 16)), [[unref(vAutosize), __props.autosize]]);
+		};
+	}
+});
+//#endregion
+export { GrTextarea_default as t };