@feugene/granularity 0.26.0 → 0.27.1

package/dist/components/GrSelect/chunks/{GrSelect-BA1wfX3c.js → GrSelect-D-KU9Lx_.js}

@@ -15,13 +15,16 @@ import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqL
 import { useComboboxNavigation } from "../../../composables/useComboboxNavigation.js";
 import { a as resolveSelectedOptions, i as normalizeOptionQuery, n as matchesOptionQuery } from "../../../chunks/optionFilter-DYw9XPPx.js";
 import { t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
-import { t as GrBadge_default } from "../../GrBadge/chunks/GrBadge-_9rCHuE1.js";
-import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { d as chipSizeForBadgeScale } from "../../../chunks/grChipStyles-3JZApw03.js";
+import { t as GrChip_default } from "../../GrChip/chunks/GrChip-Df4orxRH.js";
+import { t as panelPopTransition } from "../../../chunks/overlayTransition-0Fj5tQbq.js";
 import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
 import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
-import { t as GrInput_default } from "../../GrInput/chunks/GrInput-Bb_pxqpT.js";
-import { c as grSelectNativeClass, d as grSelectTriggerClass, i as grSelectLinkNativeLabelClass, l as grSelectOptionClass, n as defaultBaseClass, p as linkBaseClass, s as grSelectLinkNativeOverlayClass, u as grSelectPanelClasses } from "../../../chunks/grSelectStyles-eTz4uPMP.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
+import { t as GrInput_default } from "../../GrInput/chunks/GrInput-BqqoEl1b.js";
+import { t as useTypeahead } from "../../../chunks/useTypeahead-mxPtPBf2.js";
+import { c as grSelectNativeClass, d as grSelectTriggerClass, i as grSelectLinkNativeLabelClass, l as grSelectOptionClass, n as defaultBaseClass, p as linkBaseClass, s as grSelectLinkNativeOverlayClass, u as grSelectPanelClasses } from "../../../chunks/grSelectStyles-Cdtd10eY.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, useSlots, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
 import '../styles.css';//#region src/components/GrSelect/composables/useSelectPanelItems.ts
 function useSelectPanelItems(options) {
 	const panelItems = computed(() => {
@@ -114,8 +117,6 @@ function useSelectPanelItems(options) {
 }
 //#endregion
 //#region src/components/GrSelect/composables/useSelectNavigation.ts
-/** Буфер typeahead живёт ровно столько: дальше набранное перестаёт быть словом. */
-var TYPEAHEAD_RESET_MS = 600;
 function useSelectNavigation(options) {
 	const navigableItems = computed(() => {
 		const items = options.canAddCustom.value ? [{ kind: "add" }] : [];
@@ -163,27 +164,30 @@ function useSelectNavigation(options) {
 	*/
 	const triggerActiveDescendant = computed(() => options.showSearchInput.value ? void 0 : activeDescendantId.value);
 	const searchActiveDescendant = computed(() => options.showSearchInput.value ? activeDescendantId.value : void 0);
-	let typeaheadBuffer = "";
-	let typeaheadTimer = null;
-	function typeahead(char) {
-		const lower = char.toLowerCase();
-		typeaheadBuffer = typeaheadBuffer.length === 1 && typeaheadBuffer === lower ? lower : typeaheadBuffer + lower;
-		if (typeaheadTimer) clearTimeout(typeaheadTimer);
-		typeaheadTimer = setTimeout(() => {
-			typeaheadBuffer = "";
-		}, TYPEAHEAD_RESET_MS);
-		const items = navigableItems.value;
-		const from = activeIndex.value;
-		for (let step = 1; step <= items.length; step += 1) {
-			const idx = (from + step + items.length) % items.length;
-			const item = items[idx];
-			if (item.kind !== "option") continue;
-			if (options.flatOptions.value.find((o) => options.sameValue(o.value, item.value))?.label.toLowerCase().startsWith(typeaheadBuffer)) {
-				setActive(idx);
-				return;
-			}
-		}
+	/**
+	* Подпись опции по значению.
+	*
+	* Мапой, а не `find` по списку: typeahead опрашивает подпись на каждом шаге
+	* обхода, и линейный поиск внутри цикла давал квадрат по числу опций — на
+	* длинных списках это чувствовалось прямо во время набора.
+	*/
+	const labelByItem = computed(() => {
+		const byValue = /* @__PURE__ */ new Map();
+		for (const option of options.flatOptions.value) byValue.set(option.value, option.label);
+		return byValue;
+	});
+	function labelOf(item) {
+		if (item.kind !== "option") return "";
+		const direct = labelByItem.value.get(item.value);
+		if (direct !== void 0) return direct;
+		return options.flatOptions.value.find((option) => options.sameValue(option.value, item.value))?.label ?? "";
 	}
+	const typeahead = useTypeahead({
+		items: () => navigableItems.value,
+		textOf: labelOf,
+		currentIndex: () => activeIndex.value,
+		onMatch: (_item, index) => setActive(index)
+	});
 	function onComboKeydown(event) {
 		if (isComposingEvent(event)) return;
 		if (options.locked.value) return;
@@ -212,12 +216,9 @@ function useSelectNavigation(options) {
 			case "Tab":
 				options.closeDropdown();
 				break;
-			default: if (!options.showSearchInput.value && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
+			default: if (!options.showSearchInput.value && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead.type(event.key);
 		}
 	}
-	onBeforeUnmount(() => {
-		if (typeaheadTimer) clearTimeout(typeaheadTimer);
-	});
 	return {
 		navigableItems,
 		activeIndex,
@@ -549,30 +550,28 @@ var _hoisted_12 = {
 	"data-testid": "gr-select-chevron",
 	class: "shrink-0 flex items-center text-[var(--gr-muted-fg)] pointer-events-none"
 };
-var _hoisted_13 = { class: "inline-flex max-w-full items-center gap-1 align-middle" };
-var _hoisted_14 = { class: "truncate" };
-var _hoisted_15 = ["aria-label", "onClick"];
-var _hoisted_16 = ["disabled", "aria-label"];
-var _hoisted_17 = {
+var _hoisted_13 = { class: "truncate" };
+var _hoisted_14 = ["disabled", "aria-label"];
+var _hoisted_15 = {
 	key: 0,
 	class: "p-2 border-b border-[var(--gr-brd)]"
 };
-var _hoisted_18 = {
+var _hoisted_16 = {
 	key: 1,
 	"data-gr-select-loading": "",
-	class: "flex items-center justify-center gap-2 px-3 py-4 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]",
+	class: "flex items-center justify-center gap-2 px-3 py-4 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]",
 	role: "status",
 	"aria-live": "polite"
 };
-var _hoisted_19 = [
+var _hoisted_17 = [
 	"id",
 	"data-gr-virtual",
 	"aria-multiselectable"
 ];
+var _hoisted_18 = ["id"];
+var _hoisted_19 = ["aria-labelledby", "aria-label"];
 var _hoisted_20 = ["id"];
-var _hoisted_21 = ["aria-labelledby", "aria-label"];
-var _hoisted_22 = ["id"];
-var _hoisted_23 = [
+var _hoisted_21 = [
 	"id",
 	"disabled",
 	"aria-selected",
@@ -580,13 +579,13 @@ var _hoisted_23 = [
 	"onClick",
 	"onMousemove"
 ];
-var _hoisted_24 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_25 = {
+var _hoisted_22 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_23 = {
 	class: "inline-block h-4 w-4 shrink-0",
 	"aria-hidden": "true"
 };
-var _hoisted_26 = { class: "truncate" };
-var _hoisted_27 = [
+var _hoisted_24 = { class: "truncate" };
+var _hoisted_25 = [
 	"id",
 	"disabled",
 	"aria-selected",
@@ -594,16 +593,16 @@ var _hoisted_27 = [
 	"onClick",
 	"onMousemove"
 ];
-var _hoisted_28 = { class: "flex items-center gap-2 min-w-0" };
-var _hoisted_29 = {
+var _hoisted_26 = { class: "flex items-center gap-2 min-w-0" };
+var _hoisted_27 = {
 	class: "inline-block h-4 w-4 shrink-0",
 	"aria-hidden": "true"
 };
-var _hoisted_30 = { class: "truncate" };
-var _hoisted_31 = {
+var _hoisted_28 = { class: "truncate" };
+var _hoisted_29 = {
 	key: 3,
 	"data-gr-select-empty": "",
-	class: "px-3 py-4 text-center text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]",
+	class: "px-3 py-4 text-center text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]",
 	role: "status",
 	"aria-live": "polite"
 };
@@ -885,6 +884,11 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			if (limit === void 0 || limit < 0) return selectedOptions.value;
 			return selectedOptions.value.slice(0, limit);
 		});
+		/**
+		* Проп `tagSize` объявлен по шкале бейджа и остаётся публичным контрактом:
+		* ступени чипа сдвинуты, и перевод держит кегль тем же.
+		*/
+		const chipSize = computed(() => chipSizeForBadgeScale(props.tagSize));
 		const hiddenTagCount = computed(() => selectedOptions.value.length - visibleTagOptions.value.length);
 		function tagRemoveLabel(option) {
 			return t("gr.select.removeTag", "Remove {label}", { label: option.label });
@@ -1175,40 +1179,36 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					class: "pointer-events-none absolute inset-y-0 left-0 flex max-w-[calc(100%-4rem)] flex-wrap items-center gap-1 px-3 py-1.5",
 					style: normalizeStyle({ left: unref(hasPrefix) ? unref(prefixLen) : void 0 })
 				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(visibleTagOptions.value, (opt) => {
-					return openBlock(), createBlock(GrBadge_default, {
+					return openBlock(), createBlock(GrChip_default, {
 						key: unref(keyOf)(opt.value),
 						"data-gr-select-tag": "",
 						class: "pointer-events-auto",
 						tone: __props.tagTone,
 						dark: __props.tagDark,
-						size: __props.tagSize,
-						radius: __props.tagRadius
+						size: chipSize.value,
+						radius: __props.tagRadius,
+						closable: !unref(isDisabled) && !unref(isReadonly),
+						"remove-label": tagRemoveLabel(opt),
+						onRemove: ($event) => removeValue(opt.value)
 					}, {
-						default: withCtx(() => [createElementVNode("span", _hoisted_13, [createElementVNode("span", _hoisted_14, toDisplayString(opt.label), 1), !unref(isDisabled) && !unref(isReadonly) ? (openBlock(), createElementBlock("button", {
-							key: 0,
-							"data-gr-select-tag-remove": "",
-							type: "button",
-							"aria-label": tagRemoveLabel(opt),
-							class: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[var(--gr-radius-xs)] text-current focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]",
-							onClick: withModifiers(($event) => removeValue(opt.value), ["stop"])
-						}, [createVNode(unref(x_default), {
-							class: "block h-3 w-3",
-							"aria-hidden": "true"
-						})], 8, _hoisted_15)) : createCommentVNode("", true)])]),
+						default: withCtx(() => [createElementVNode("span", _hoisted_13, toDisplayString(opt.label), 1)]),
 						_: 2
 					}, 1032, [
 						"tone",
 						"dark",
 						"size",
-						"radius"
+						"radius",
+						"closable",
+						"remove-label",
+						"onRemove"
 					]);
-				}), 128)), hiddenTagCount.value > 0 ? (openBlock(), createBlock(GrBadge_default, {
+				}), 128)), hiddenTagCount.value > 0 ? (openBlock(), createBlock(GrChip_default, {
 					key: 0,
 					"data-gr-select-tag-rest": "",
 					class: "pointer-events-auto",
 					tone: __props.tagTone,
 					dark: __props.tagDark,
-					size: __props.tagSize,
+					size: chipSize.value,
 					radius: __props.tagRadius
 				}, {
 					default: withCtx(() => [createTextVNode(" +" + toDisplayString(hiddenTagCount.value), 1)]),
@@ -1231,17 +1231,17 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				}, [createVNode(unref(x_default), {
 					class: "inline-block h-4 w-4",
 					"aria-hidden": "true"
-				})], 8, _hoisted_16)) : createCommentVNode("", true),
+				})], 8, _hoisted_14)) : createCommentVNode("", true),
 				(openBlock(), createBlock(Teleport, {
 					to: unref(portalTarget),
 					disabled: !unref(teleportEnabled)
 				}, [createVNode(Transition, {
-					"enter-active-class": "transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]",
-					"enter-from-class": "transform opacity-0 scale-95",
-					"enter-to-class": "transform opacity-100 scale-100",
-					"leave-active-class": "transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]",
-					"leave-from-class": "transform opacity-100 scale-100",
-					"leave-to-class": "transform opacity-0 scale-95"
+					"enter-active-class": unref(panelPopTransition).enter,
+					"enter-from-class": unref(panelPopTransition).enterFrom,
+					"enter-to-class": unref(panelPopTransition).enterTo,
+					"leave-active-class": unref(panelPopTransition).leave,
+					"leave-from-class": unref(panelPopTransition).leaveFrom,
+					"leave-to-class": unref(panelPopTransition).leaveTo
 				}, {
 					default: withCtx(() => [withDirectives(createElementVNode("div", mergeProps({
 						ref_key: "panelEl",
@@ -1252,7 +1252,7 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 						"data-gr-overlay-root": "",
 						style: unref(floatingStyle)
 					}), [createElementVNode("div", { class: normalizeClass(panelClasses.value) }, [
-						showSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_17, [createVNode(GrInput_default, {
+						showSearchInput.value ? (openBlock(), createElementBlock("div", _hoisted_15, [createVNode(GrInput_default, {
 							ref_key: "customInputRef",
 							ref: customInputRef,
 							modelValue: customValue.value,
@@ -1278,7 +1278,7 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 							"loading",
 							"onKeydown"
 						])])) : createCommentVNode("", true),
-						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_18, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(loader_circle_default), {
+						__props.loading ? (openBlock(), createElementBlock("div", _hoisted_16, [renderSlot(_ctx.$slots, "loading", {}, () => [createVNode(unref(loader_circle_default), {
 							class: "block h-4 w-4 animate-spin",
 							"aria-hidden": "true"
 						}), createElementVNode("span", null, toDisplayString(resolvedLoadingText.value), 1)], true)])) : (openBlock(), createElementBlock("div", {
@@ -1310,7 +1310,7 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 							onMousedown: _cache[4] || (_cache[4] = withModifiers(() => {}, ["prevent"])),
 							onClick: addCustom,
 							onMousemove: _cache[5] || (_cache[5] = ($event) => activeIndex.value = 0)
-						}), toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 17, _hoisted_20)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedPanelRows), (row) => {
+						}), toDisplayString(unref(t)("gr.select.addOption", "Add \"{value}\"", { value: customValue.value.trim() })), 17, _hoisted_18)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(renderedPanelRows), (row) => {
 							return openBlock(), createElementBlock(Fragment, { key: row.key }, [row.kind === "group" ? (openBlock(), createElementBlock("div", {
 								key: 0,
 								"data-gr-select-group": "",
@@ -1325,8 +1325,8 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 								ref: (el) => unref(virtualEnabled) && row.labelIndex !== void 0 && unref(measureVirtualRow)(row.labelIndex + unref(addOffset), el),
 								"data-gr-select-group-label": "",
 								role: "presentation",
-								class: normalizeClass(["px-3 pt-2 pb-1 text-[length:var(--gr-text-xs)] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
-							}, toDisplayString(row.label), 11, _hoisted_22)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(row.options, (child) => {
+								class: normalizeClass(["px-3 pt-2 pb-1 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] font-semibold uppercase tracking-wide text-[var(--gr-muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
+							}, toDisplayString(row.label), 11, _hoisted_20)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(row.options, (child) => {
 								return openBlock(), createElementBlock("button", mergeProps({
 									id: optionDomId(child.index),
 									key: child.key,
@@ -1351,11 +1351,11 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 								}), [renderSlot(_ctx.$slots, "option", {
 									option: child.option,
 									selected: isSelected(child.option.value)
-								}, () => [createElementVNode("span", _hoisted_24, [createElementVNode("span", _hoisted_25, [isSelected(child.option.value) ? (openBlock(), createBlock(unref(check_default), {
+								}, () => [createElementVNode("span", _hoisted_22, [createElementVNode("span", _hoisted_23, [isSelected(child.option.value) ? (openBlock(), createBlock(unref(check_default), {
 									key: 0,
 									class: "block h-4 w-4 text-[var(--gr-primary)]"
-								})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_26, toDisplayString(child.option.label), 1)])], true)], 16, _hoisted_23);
-							}), 128))], 10, _hoisted_21)) : (openBlock(), createElementBlock("button", mergeProps({
+								})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_24, toDisplayString(child.option.label), 1)])], true)], 16, _hoisted_21);
+							}), 128))], 10, _hoisted_19)) : (openBlock(), createElementBlock("button", mergeProps({
 								key: 1,
 								id: optionDomId(row.index),
 								ref_for: true,
@@ -1379,15 +1379,22 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 							}), [renderSlot(_ctx.$slots, "option", {
 								option: row.option,
 								selected: isSelected(row.option.value)
-							}, () => [createElementVNode("span", _hoisted_28, [createElementVNode("span", _hoisted_29, [isSelected(row.option.value) ? (openBlock(), createBlock(unref(check_default), {
+							}, () => [createElementVNode("span", _hoisted_26, [createElementVNode("span", _hoisted_27, [isSelected(row.option.value) ? (openBlock(), createBlock(unref(check_default), {
 								key: 0,
 								class: "block h-4 w-4 text-[var(--gr-primary)]"
-							})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_30, toDisplayString(row.option.label), 1)])], true)], 16, _hoisted_27))], 64);
-						}), 128))], 14, _hoisted_19)),
-						!__props.loading && !unref(panelItems).length && !unref(canAddCustom) ? (openBlock(), createElementBlock("div", _hoisted_31, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)])) : createCommentVNode("", true)
+							})) : createCommentVNode("", true)]), createElementVNode("span", _hoisted_28, toDisplayString(row.option.label), 1)])], true)], 16, _hoisted_25))], 64);
+						}), 128))], 14, _hoisted_17)),
+						!__props.loading && !unref(panelItems).length && !unref(canAddCustom) ? (openBlock(), createElementBlock("div", _hoisted_29, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedNoResultsText.value), 1)], true)])) : createCommentVNode("", true)
 					], 2)], 16), [[vShow, unref(open)]])]),
 					_: 3
-				})], 8, ["to", "disabled"]))
+				}, 8, [
+					"enter-active-class",
+					"enter-from-class",
+					"enter-to-class",
+					"leave-active-class",
+					"leave-from-class",
+					"leave-to-class"
+				])], 8, ["to", "disabled"]))
 			], 2)), [[unref(vClickOutside), {
 				handler: closeDropdown,
 				enabled: unref(open),
@@ -1395,6 +1402,6 @@ var GrSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-e523e726"]]);
+}), [["__scopeId", "data-v-c93b2c96"]]);
 //#endregion
 export { GrSelect_default as t };