npm - @feugene/granularity - Versions diffs - 0.13.0 → 0.16.0 - Mend

@feugene/granularity 0.13.0 → 0.16.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 (1223) hide show

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

@@ -0,0 +1,272 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { a as grTabsCloseClass, c as grTabsTabClass, d as tabIconClass, i as grTabsBadgeClass, l as tabCloseIconSizes, o as grTabsEmptyClass, s as grTabsListClass, u as tabContentClass } from "../../../chunks/config-_qPUfb6-2.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, openBlock, ref, renderList, renderSlot, 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));
+		const rovingIndex = computed(() => {
+			if (activeIndex.value >= 0) return activeIndex.value;
+			const firstEnabled = props.tabs.findIndex((tab) => !tab.disabled);
+			return firstEnabled >= 0 ? firstEnabled : 0;
+		});
+		function isEnabled(tab) {
+			return !tab.disabled;
+		}
+		const focusedIndex = ref(-1);
+		/** Роверная вкладка: при `manual` фокус может уехать вперёд выбора. */
+		const rovingFocusIndex = computed(() => focusedIndex.value >= 0 ? focusedIndex.value : rovingIndex.value);
+		async function focusIndex(index) {
+			focusedIndex.value = index;
+			await nextTick();
+			buttonRefs.value[index]?.focus();
+			scrollIntoView(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 findNextEnabled(from, direction) {
+			const length = props.tabs.length;
+			if (length === 0) return -1;
+			let index = from;
+			for (let i = 0; i < length; i++) {
+				index = (index + direction + length) % length;
+				const tab = props.tabs[index];
+				if (tab && isEnabled(tab)) return index;
+			}
+			return -1;
+		}
+		function firstEnabled() {
+			return props.tabs.findIndex(isEnabled);
+		}
+		function lastEnabled() {
+			for (let i = props.tabs.length - 1; i >= 0; i--) {
+				const tab = props.tabs[i];
+				if (tab && isEnabled(tab)) return i;
+			}
+			return -1;
+		}
+		function onKeydown(event) {
+			if (props.tabs.length === 0) return;
+			const currentIndex = focusedIndex.value >= 0 ? focusedIndex.value : activeIndex.value < 0 ? 0 : activeIndex.value;
+			let nextIndex = -1;
+			const forward = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+			const backward = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+			switch (event.key) {
+				case forward:
+					nextIndex = findNextEnabled(currentIndex, 1);
+					break;
+				case backward:
+					nextIndex = findNextEnabled(currentIndex, -1);
+					break;
+				case "Home":
+					nextIndex = firstEnabled();
+					break;
+				case "End":
+					nextIndex = lastEnabled();
+					break;
+				case "Enter":
+				case " ":
+					if (props.activationMode === "manual" && focusedIndex.value >= 0) {
+						event.preventDefault();
+						selectByIndex(focusedIndex.value, true);
+					}
+					return;
+				case "Delete":
+				case "Backspace": {
+					const tab = props.tabs[currentIndex];
+					if (tab && isClosable(tab)) {
+						event.preventDefault();
+						requestClose(currentIndex);
+					}
+					return;
+				}
+				default: return;
+			}
+			if (nextIndex < 0) return;
+			event.preventDefault();
+			if (props.activationMode === "manual") {
+				focusIndex(nextIndex);
+				return;
+			}
+			selectByIndex(nextIndex, true);
+		}
+		/**
+		* Закрытая вкладка, которая держала фокус. Компонент список не укорачивает —
+		* это делает потребитель, — поэтому фокус возвращается только после того, как
+		* `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 focusedIndex.value = -1;
+		});
+		function onClick(event, tab, index) {
+			if (!isEnabled(tab)) return;
+			if (event.target instanceof Element && event.target.closest("[data-gr-tab-close]")) {
+				requestClose(index);
+				return;
+			}
+			focusedIndex.value = 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: index === rovingFocusIndex.value ? 0 : -1,
+					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(), createElementBlock("span", {
+						key: 0,
+						class: normalizeClass([unref(tabIconClass), tab.icon]),
+						"aria-hidden": "true"
+					}, null, 2)) : 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-B8CDq2D9.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GrTabs-B8CDq2D9.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\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 /** UnoCSS-класс иконки слева от подписи (например `i-lucide-user`). */\n icon?: string\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\n// Roving tabindex обязан всегда держать ровно один элемент с `0`. Если\n// `modelValue` не совпал ни с одной вкладкой (пустое начальное значение,\n// асинхронный список, удалённая активная вкладка), в таб-порядке остаётся\n// первая доступная — иначе tablist выпадает из него целиком и молча.\nconst rovingIndex = computed(() => {\n if (activeIndex.value >= 0) return activeIndex.value\n\n const firstEnabled = props.tabs.findIndex(tab => !tab.disabled)\n return firstEnabled >= 0 ? firstEnabled : 0\n})\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nconst focusedIndex = ref(-1)\n\n/** Роверная вкладка: при `manual` фокус может уехать вперёд выбора. */\nconst rovingFocusIndex = computed(() => (focusedIndex.value >= 0 ? focusedIndex.value : rovingIndex.value))\n\nasync function focusIndex(index: number): Promise<void> {\n focusedIndex.value = index\n await nextTick()\n buttonRefs.value[index]?.focus()\n scrollIntoView(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 findNextEnabled(from: number, direction: 1 | -1): number {\n const length = props.tabs.length\n if (length === 0)\n return -1\n let index = from\n for (let i = 0; i < length; i++) {\n index = (index + direction + length) % length\n const tab = props.tabs[index]\n if (tab && isEnabled(tab))\n return index\n }\n return -1\n}\n\nfunction firstEnabled(): number {\n return props.tabs.findIndex(isEnabled)\n}\n\nfunction lastEnabled(): number {\n for (let i = props.tabs.length - 1; i >= 0; i--) {\n const tab = props.tabs[i]\n if (tab && isEnabled(tab))\n return i\n }\n return -1\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = focusedIndex.value >= 0 ? focusedIndex.value : (activeIndex.value < 0 ? 0 : activeIndex.value)\n let nextIndex = -1\n\n const forward = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n const backward = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n\n switch (event.key) {\n case forward:\n nextIndex = findNextEnabled(currentIndex, 1)\n break\n case backward:\n nextIndex = findNextEnabled(currentIndex, -1)\n break\n case 'Home':\n nextIndex = firstEnabled()\n break\n case 'End':\n nextIndex = lastEnabled()\n break\n case 'Enter':\n case ' ':\n // В ручном режиме выбор подтверждается явно.\n if (props.activationMode === 'manual' && focusedIndex.value >= 0) {\n event.preventDefault()\n void selectByIndex(focusedIndex.value, true)\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 default:\n return\n }\n\n if (nextIndex < 0)\n return\n\n event.preventDefault()\n\n if (props.activationMode === 'manual') {\n void focusIndex(nextIndex)\n return\n }\n\n void selectByIndex(nextIndex, true)\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 focusedIndex.value = -1\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 focusedIndex.value = 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=\"index === rovingFocusIndex ? 0 : -1\"\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 <span v-if=\"tab.icon\" :class=\"[tabIconClass, tab.icon]\" aria-hidden=\"true\" />\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 } from 'vue'\n\nimport IconX from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\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 /** UnoCSS-класс иконки слева от подписи (например `i-lucide-user`). */\n icon?: string\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\n// Roving tabindex обязан всегда держать ровно один элемент с `0`. Если\n// `modelValue` не совпал ни с одной вкладкой (пустое начальное значение,\n// асинхронный список, удалённая активная вкладка), в таб-порядке остаётся\n// первая доступная — иначе tablist выпадает из него целиком и молча.\nconst rovingIndex = computed(() => {\n if (activeIndex.value >= 0) return activeIndex.value\n\n const firstEnabled = props.tabs.findIndex(tab => !tab.disabled)\n return firstEnabled >= 0 ? firstEnabled : 0\n})\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nconst focusedIndex = ref(-1)\n\n/** Роверная вкладка: при `manual` фокус может уехать вперёд выбора. */\nconst rovingFocusIndex = computed(() => (focusedIndex.value >= 0 ? focusedIndex.value : rovingIndex.value))\n\nasync function focusIndex(index: number): Promise<void> {\n focusedIndex.value = index\n await nextTick()\n buttonRefs.value[index]?.focus()\n scrollIntoView(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 findNextEnabled(from: number, direction: 1 | -1): number {\n const length = props.tabs.length\n if (length === 0)\n return -1\n let index = from\n for (let i = 0; i < length; i++) {\n index = (index + direction + length) % length\n const tab = props.tabs[index]\n if (tab && isEnabled(tab))\n return index\n }\n return -1\n}\n\nfunction firstEnabled(): number {\n return props.tabs.findIndex(isEnabled)\n}\n\nfunction lastEnabled(): number {\n for (let i = props.tabs.length - 1; i >= 0; i--) {\n const tab = props.tabs[i]\n if (tab && isEnabled(tab))\n return i\n }\n return -1\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = focusedIndex.value >= 0 ? focusedIndex.value : (activeIndex.value < 0 ? 0 : activeIndex.value)\n let nextIndex = -1\n\n const forward = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'\n const backward = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'\n\n switch (event.key) {\n case forward:\n nextIndex = findNextEnabled(currentIndex, 1)\n break\n case backward:\n nextIndex = findNextEnabled(currentIndex, -1)\n break\n case 'Home':\n nextIndex = firstEnabled()\n break\n case 'End':\n nextIndex = lastEnabled()\n break\n case 'Enter':\n case ' ':\n // В ручном режиме выбор подтверждается явно.\n if (props.activationMode === 'manual' && focusedIndex.value >= 0) {\n event.preventDefault()\n void selectByIndex(focusedIndex.value, true)\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 default:\n return\n }\n\n if (nextIndex < 0)\n return\n\n event.preventDefault()\n\n if (props.activationMode === 'manual') {\n void focusIndex(nextIndex)\n return\n }\n\n void selectByIndex(nextIndex, true)\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 focusedIndex.value = -1\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 focusedIndex.value = 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=\"index === rovingFocusIndex ? 0 : -1\"\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 <span v-if=\"tab.icon\" :class=\"[tabIconClass, tab.icon]\" aria-hidden=\"true\" />\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 { t as GrTabs_default } from "./chunks/GrTabs-BqTak0SR.js";
-import { t as grTabsConfig } from "../../chunks/config-BLHqZhy-.js";
-export { GrTabs_default as GrTabs, GrTabs_default as default, grTabsConfig };
+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-B8CDq2D9.js";
+export { GR_TABS_VARIANTS, GrTabs_default as GrTabs, GrTabs_default as default, grTabsConfig, grTabsSafelist };

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

@@ -0,0 +1,241 @@
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { a as useGrComponentProp, o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.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-CWI2SqC8.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 };