@feugene/granularity 0.29.1 → 0.30.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.
- package/README.md +9 -6
- package/dist/chunks/{config-Dpk-eVkS.js → config-DUbbGcfw.js} +12 -1
- package/dist/chunks/config-DUbbGcfw.js.map +1 -0
- package/dist/chunks/grSelectStyles-Cdtd10eY.js.map +1 -1
- package/dist/chunks/{granular-provider-NtErwzYB.js → granular-provider-CHFaw3wU.js} +1 -1
- package/dist/chunks/{granular-provider-NtErwzYB.js.map → granular-provider-CHFaw3wU.js.map} +1 -1
- package/dist/chunks/renamedProp-BwcN-SJg.js +33 -0
- package/dist/chunks/renamedProp-BwcN-SJg.js.map +1 -0
- package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-CaHys_A_.js → GrAutocomplete-X6RlmiJQ.js} +1 -1
- package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-CaHys_A_.js.map → GrAutocomplete-X6RlmiJQ.js.map} +1 -1
- package/dist/components/GrAutocomplete/index.js +1 -1
- package/dist/components/GrBadge/chunks/{GrBadge-BM3f9PME.js → GrBadge-BsoocpF-.js} +4 -2
- package/dist/components/GrBadge/chunks/GrBadge-BsoocpF-.js.map +1 -0
- package/dist/components/GrBadge/index.js +1 -1
- package/dist/components/GrBadge/styles.css +1 -1
- package/dist/components/GrCard/chunks/{GrCard-DR3ehBt8.js → GrCard-BttXz1pQ.js} +19 -6
- package/dist/components/GrCard/chunks/GrCard-BttXz1pQ.js.map +1 -0
- package/dist/components/GrCard/index.js +2 -2
- package/dist/components/GrChip/chunks/{GrChip-Df4orxRH.js → GrChip-C0vU69tf.js} +3 -1
- package/dist/components/GrChip/chunks/GrChip-C0vU69tf.js.map +1 -0
- package/dist/components/GrChip/index.js +1 -1
- package/dist/components/GrCollapse/chunks/{GrCollapse-Bw9_JatF.js → GrCollapse-BlW6ybdL.js} +1 -1
- package/dist/components/GrCollapse/chunks/{GrCollapse-Bw9_JatF.js.map → GrCollapse-BlW6ybdL.js.map} +1 -1
- package/dist/components/GrCollapse/index.js +1 -1
- package/dist/components/GrContextMenu/chunks/{GrContextMenu-BNQDbAsY.js → GrContextMenu-_FKwQvuQ.js} +1 -1
- package/dist/components/GrContextMenu/chunks/{GrContextMenu-BNQDbAsY.js.map → GrContextMenu-_FKwQvuQ.js.map} +1 -1
- package/dist/components/GrContextMenu/index.js +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-Cg7qHV9J.js → GrDropdownMenu-GOzuAXsi.js} +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-Cg7qHV9J.js.map → GrDropdownMenu-GOzuAXsi.js.map} +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenuList-RW5IBvmu.js → GrDropdownMenuList-B33ZzwfB.js} +13 -3
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenuList-RW5IBvmu.js.map → GrDropdownMenuList-B33ZzwfB.js.map} +1 -1
- package/dist/components/GrDropdownMenu/index.js +2 -2
- package/dist/components/GrInputTag/chunks/{GrInputTag-5wVcB0zG.js → GrInputTag-Cj4A9Xgs.js} +1 -1
- package/dist/components/GrInputTag/chunks/{GrInputTag-5wVcB0zG.js.map → GrInputTag-Cj4A9Xgs.js.map} +1 -1
- package/dist/components/GrInputTag/index.js +1 -1
- package/dist/components/GrList/chunks/{GrList-DrXrKU37.js → GrList-DmT4qzLO.js} +1 -1
- package/dist/components/GrList/chunks/{GrList-DrXrKU37.js.map → GrList-DmT4qzLO.js.map} +1 -1
- package/dist/components/GrList/index.js +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-CX9ZV8mR.js → GrPagination-kYCx6PAS.js} +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-CX9ZV8mR.js.map → GrPagination-kYCx6PAS.js.map} +1 -1
- package/dist/components/GrPagination/index.js +1 -1
- package/dist/components/GrSelect/chunks/{GrSelect-DKoQu3w9.js → GrSelect-CBp0twbF.js} +4 -4
- package/dist/components/GrSelect/chunks/GrSelect-CBp0twbF.js.map +1 -0
- package/dist/components/GrSelect/index.js +1 -1
- package/dist/components/GrSelect/styles.css +1 -1
- package/dist/components/GrSortableList/chunks/{GrSortableList-DGs3Pi2J.js → GrSortableList-HyKX--rO.js} +1 -1
- package/dist/components/GrSortableList/chunks/{GrSortableList-DGs3Pi2J.js.map → GrSortableList-HyKX--rO.js.map} +1 -1
- package/dist/components/GrSortableList/index.js +1 -1
- package/dist/granular-provider-node.js +1 -1
- package/dist/granular-provider.js +1 -1
- package/dist/index.js +14 -14
- package/dist/types/components/GrCard/GrCard.vue.d.ts +8 -0
- package/dist/types/components/GrCard/grCardStyles.d.ts +9 -0
- package/dist/types/components/GrDropdownMenu/menuModel.d.ts +20 -2
- package/dist/types/components/GrSelect/grSelectStyles.d.ts +12 -0
- package/dist/types/components/shared/renamedProp.d.ts +19 -0
- package/dist/web-types.json +5 -1
- package/package.json +2 -2
- package/dist/chunks/config-Dpk-eVkS.js.map +0 -1
- package/dist/components/GrBadge/chunks/GrBadge-BM3f9PME.js.map +0 -1
- package/dist/components/GrCard/chunks/GrCard-DR3ehBt8.js.map +0 -1
- package/dist/components/GrChip/chunks/GrChip-Df4orxRH.js.map +0 -1
- package/dist/components/GrSelect/chunks/GrSelect-DKoQu3w9.js.map +0 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as grAutocompleteSafelist, t as grAutocompleteConfig } from "../../chunks/config-vYMJ3Cr1.js";
|
|
2
|
-
import { t as GrAutocomplete_default } from "./chunks/GrAutocomplete-
|
|
2
|
+
import { t as GrAutocomplete_default } from "./chunks/GrAutocomplete-X6RlmiJQ.js";
|
|
3
3
|
export { GrAutocomplete_default as GrAutocomplete, GrAutocomplete_default as default, grAutocompleteConfig, grAutocompleteSafelist };
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
|
|
2
|
+
import { t as warnRenamedProp } from "../../../chunks/renamedProp-BwcN-SJg.js";
|
|
2
3
|
import { n as grBadgeClass } from "../../../chunks/grBadgeStyles-D8Mz73B5.js";
|
|
3
4
|
import { t as _plugin_vue_export_helper_default } from "../../../chunks/_plugin-vue_export-helper-BOaGB7Aw.js";
|
|
4
|
-
import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot } from "vue";
|
|
5
|
+
import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, openBlock, renderSlot, useAttrs } from "vue";
|
|
5
6
|
import '../styles.css';//#region src/components/GrBadge/GrBadge.vue?vue&type=script&setup=true&lang.ts
|
|
6
7
|
var _hoisted_1 = { class: "gr-badge__label" };
|
|
7
8
|
var _hoisted_2 = { class: "gr-badge__text" };
|
|
@@ -23,6 +24,7 @@ var GrBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
|
|
|
23
24
|
const resolvedTone = useGrComponentProp("GrBadge", "tone", () => props.tone, "neutral");
|
|
24
25
|
const resolvedSize = useGrComponentProp("GrBadge", "size", () => props.size, "sm");
|
|
25
26
|
const resolvedRadius = useGrComponentProp("GrBadge", "radius", () => props.radius, "round");
|
|
27
|
+
warnRenamedProp("GrBadge", useAttrs(), { variant: "tone" });
|
|
26
28
|
const className = computed(() => {
|
|
27
29
|
return grBadgeClass({
|
|
28
30
|
tone: resolvedTone.value,
|
|
@@ -35,6 +37,6 @@ var GrBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
|
|
|
35
37
|
return openBlock(), createElementBlock("span", { class: normalizeClass(["gr-badge inline-block border whitespace-nowrap leading-none", className.value]) }, [createElementVNode("span", _hoisted_1, [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])])], 2);
|
|
36
38
|
};
|
|
37
39
|
}
|
|
38
|
-
}), [["__scopeId", "data-v-
|
|
40
|
+
}), [["__scopeId", "data-v-284fb1ee"]]);
|
|
39
41
|
//#endregion
|
|
40
42
|
export { GrBadge_default as t };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrBadge-BsoocpF-.js","names":[],"sources":["../../../../src/components/GrBadge/GrBadge.vue","../../../../src/components/GrBadge/GrBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n grBadgeClass,\n type GrBadgeRadius,\n type GrBadgeSize,\n type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n tone?: GrBadgeTone\n dark?: boolean\n size?: GrBadgeSize\n radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n defineProps<GrBadgeProps>(),\n {\n // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n tone: undefined,\n dark: false,\n size: undefined,\n radius: undefined,\n },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n return grBadgeClass({\n tone: resolvedTone.value,\n dark: props.dark,\n size: resolvedSize.value,\n radius: resolvedRadius.value,\n })\n})\n\ndefineSlots<{\n /** Содержимое метки. */\n default?: () => any\n}>()\n\n</script>\n\n<template>\n <span\n class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n :class=\"className\"\n >\n <span class=\"gr-badge__label\">\n <span class=\"gr-badge__text\">\n <slot />\n </span>\n </span>\n </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n display: flex;\n align-items: center;\n min-height: 1lh;\n}\n\n.gr-badge__text {\n display: block;\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n text-box: trim-both cap alphabetic;\n}\n</style>","<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nexport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from './grBadgeStyles'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\n\nimport {\n grBadgeClass,\n type GrBadgeRadius,\n type GrBadgeSize,\n type GrBadgeTone,\n} from './grBadgeStyles'\n\nexport interface GrBadgeProps {\n tone?: GrBadgeTone\n dark?: boolean\n size?: GrBadgeSize\n radius?: GrBadgeRadius\n}\n\nconst props = withDefaults(\n defineProps<GrBadgeProps>(),\n {\n // `tone`/`size`/`radius` настраиваются через `GrConfigProvider`, поэтому\n // их дефолты живут в резолверах ниже, а не в `withDefaults`.\n tone: undefined,\n dark: false,\n size: undefined,\n radius: undefined,\n },\n)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedTone = useGrComponentProp('GrBadge', 'tone', () => props.tone, 'neutral')\nconst resolvedSize = useGrComponentProp('GrBadge', 'size', () => props.size, 'sm')\nconst resolvedRadius = useGrComponentProp('GrBadge', 'radius', () => props.radius, 'round')\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrBadge', useAttrs(), { variant: 'tone' })\n\nconst className = computed(() => {\n return grBadgeClass({\n tone: resolvedTone.value,\n dark: props.dark,\n size: resolvedSize.value,\n radius: resolvedRadius.value,\n })\n})\n\ndefineSlots<{\n /** Содержимое метки. */\n default?: () => any\n}>()\n\n</script>\n\n<template>\n <span\n class=\"gr-badge inline-block border whitespace-nowrap leading-none\"\n :class=\"className\"\n >\n <span class=\"gr-badge__label\">\n <span class=\"gr-badge__text\">\n <slot />\n </span>\n </span>\n </span>\n</template>\n\n<style scoped>\n/*\n * Оптически центрируем текст по вертикали независимо от регистра,\n * не уменьшая высоту самого бейджа.\n *\n * Высоту держит обёртка `.gr-badge__label` (`min-height: 1lh` — высота\n * line-box при `leading-none`), а текст (`.gr-badge__text`) обрезается до\n * cap-height и центрируется внутри этой высоты через flex.\n *\n * Обрезка обязана жить на вложенном узле, а не на самом тексте: `text-box-trim`\n * уменьшает line-box, и повесь его прямо на текст — вместе с ним просядет\n * высота контента, а за ней и весь бейдж.\n */\n.gr-badge__label {\n display: flex;\n align-items: center;\n min-height: 1lh;\n}\n\n.gr-badge__text {\n display: block;\n text-box-trim: trim-both;\n text-box-edge: cap alphabetic;\n /* Шорткат для браузеров с поддержкой нового синтаксиса. */\n text-box: trim-both cap alphabetic;\n}\n</style>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;EAuBA,MAAM,QAAQ;EAad,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,SAAS;EACtF,MAAM,eAAe,mBAAmB,WAAW,cAAc,MAAM,MAAM,IAAI;EACjF,MAAM,iBAAiB,mBAAmB,WAAW,gBAAgB,MAAM,QAAQ,OAAO;EAK1F,gBAAgB,WAAW,SAAS,GAAG,EAAE,SAAS,OAAO,CAAC;EAE1D,MAAM,YAAY,eAAe;GAC/B,OAAO,aAAa;IAClB,MAAM,aAAa;IACnB,MAAM,MAAM;IACZ,MAAM,aAAa;IACnB,QAAQ,eAAe;GACzB,CAAC;EACH,CAAC;;uBAUC,mBASO,QAAA,EARH,OAAK,eAAA,CAAC,+DACE,UAAA,KAAS,CAAA,EAAA,GAAA,CAEnB,mBAIO,QAJP,YAIO,CAHL,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as GrBadge_default } from "./chunks/GrBadge-
|
|
1
|
+
import { t as GrBadge_default } from "./chunks/GrBadge-BsoocpF-.js";
|
|
2
2
|
import { t as grBadgeSafelist } from "../../chunks/safelist-CtiHPgrj.js";
|
|
3
3
|
import { t as grBadgeConfig } from "../../chunks/config-g8-JGZ_Y.js";
|
|
4
4
|
export { GrBadge_default as GrBadge, GrBadge_default as default, grBadgeConfig, grBadgeSafelist };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.gr-badge__label[data-v-
|
|
1
|
+
.gr-badge__label[data-v-284fb1ee]{align-items:center;min-height:1lh;display:flex}.gr-badge__text[data-v-284fb1ee]{text-box-trim:trim-both;text-box-edge:cap alphabetic;text-box:trim-both cap alphabetic;display:block}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
|
|
2
|
-
import { a as grCardRootClass, c as
|
|
2
|
+
import { a as grCardRootClass, c as ownHeaderPaddingClass, d as sectionDividerTopClass, i as cardTitleClass, l as paddingClass, o as headerActionsClass, r as cardDescriptionClass, s as headerRowClass, u as sectionDividerBottomClass } from "../../../chunks/config-DUbbGcfw.js";
|
|
3
3
|
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, markRaw, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, withCtx } from "vue";
|
|
4
4
|
//#region src/components/GrCard/GrCard.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
-
var _hoisted_1 =
|
|
5
|
+
var _hoisted_1 = { class: "min-w-0" };
|
|
6
|
+
var _hoisted_2 = ["id"];
|
|
6
7
|
//#endregion
|
|
7
8
|
//#region src/components/GrCard/GrCard.vue
|
|
8
9
|
var GrCard_default = /* @__PURE__ */ defineComponent({
|
|
@@ -64,13 +65,21 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
|
|
|
64
65
|
const hasOwnHeader = computed(() => Boolean(slots.header));
|
|
65
66
|
const hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title));
|
|
66
67
|
const hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description));
|
|
67
|
-
|
|
68
|
+
/**
|
|
69
|
+
* Действия рисуются в **собственной** шапке карточки и включают её наравне с
|
|
70
|
+
* заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`
|
|
71
|
+
* целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К
|
|
72
|
+
* этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки
|
|
73
|
+
* потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.
|
|
74
|
+
*/
|
|
75
|
+
const hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions));
|
|
76
|
+
const hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value);
|
|
68
77
|
/**
|
|
69
78
|
* Обёртки появляются, только когда их попросили: карточка без секций остаётся
|
|
70
79
|
* одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и
|
|
71
80
|
* `GrList` до появления пропов.
|
|
72
81
|
*/
|
|
73
|
-
const hasSections = computed(() => Boolean(slots.header || slots.footer || props.bodyClass || hasHeadingBlock.value));
|
|
82
|
+
const hasSections = computed(() => Boolean(slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value));
|
|
74
83
|
/**
|
|
75
84
|
* Имя карточки-ссылки. Без него доступным именем становится всё содержимое
|
|
76
85
|
* подряд — заголовок, описание и тело одной строкой.
|
|
@@ -111,7 +120,7 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
|
|
|
111
120
|
key: 0,
|
|
112
121
|
"data-gr-card-header": "",
|
|
113
122
|
class: normalizeClass(headerClass.value)
|
|
114
|
-
}, [renderSlot(_ctx.$slots, "header", {}, () => [hasTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(headingTag.value), {
|
|
123
|
+
}, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", { class: normalizeClass(hasActions.value ? unref(headerRowClass) : void 0) }, [createElementVNode("div", _hoisted_1, [hasTitle.value ? (openBlock(), createBlock(resolveDynamicComponent(headingTag.value), {
|
|
115
124
|
key: 0,
|
|
116
125
|
id: unref(titleId),
|
|
117
126
|
"data-gr-card-title": "",
|
|
@@ -124,7 +133,11 @@ var GrCard_default = /* @__PURE__ */ defineComponent({
|
|
|
124
133
|
id: unref(descriptionId),
|
|
125
134
|
"data-gr-card-description": "",
|
|
126
135
|
class: normalizeClass(unref(cardDescriptionClass))
|
|
127
|
-
}, toDisplayString(__props.description), 11,
|
|
136
|
+
}, toDisplayString(__props.description), 11, _hoisted_2)) : createCommentVNode("", true)]), hasActions.value ? (openBlock(), createElementBlock("div", {
|
|
137
|
+
key: 0,
|
|
138
|
+
"data-gr-card-actions": "",
|
|
139
|
+
class: normalizeClass(unref(headerActionsClass))
|
|
140
|
+
}, [renderSlot(_ctx.$slots, "actions")], 2)) : createCommentVNode("", true)], 2)])], 2)) : createCommentVNode("", true),
|
|
128
141
|
createElementVNode("div", {
|
|
129
142
|
"data-gr-card-body": "",
|
|
130
143
|
class: normalizeClass(bodySectionClass.value)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrCard-BttXz1pQ.js","names":["$slots"],"sources":["../../../../src/components/GrCard/GrCard.vue","../../../../src/components/GrCard/GrCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, useId, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n headerActionsClass,\n headerRowClass,\n cardDescriptionClass,\n cardTitleClass,\n grCardRootClass,\n ownHeaderPaddingClass,\n paddingClass,\n sectionDividerBottomClass,\n sectionDividerTopClass,\n type GrCardHeadingLevel,\n type GrCardPadding,\n type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardHeadingLevel, GrCardPadding, GrCardVariant } from './grCardStyles'\n\nexport interface GrCardProps {\n /**\n * Внутренние отступы. По умолчанию `none`: карточка — поверхность, а её\n * содержимое (`GrCollapse`, `GrList`) само знает про свои отступы.\n */\n padding?: GrCardPadding\n /** `elevated` — рамка, фон и тень; `outlined` — без тени; `ghost` — без рамки. */\n variant?: GrCardVariant\n /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n as?: string | Component\n /** Карточка-ссылка. */\n href?: string\n /** Карточка-кнопка: интерактивна вся поверхность. */\n clickable?: boolean\n /** Подсветка при наведении без интерактивности. */\n hoverable?: boolean\n /** Классы обёртки тела — она появляется вместе с секциями. */\n bodyClass?: string\n /**\n * Заголовок карточки — настоящий `h2`…`h6`, а не жирная строка: отчёт из\n * шести карточек иначе не обойти по структуре, после `h1` страницы в нём\n * нет ни одного заголовка.\n */\n title?: string\n /** Пояснение под заголовком. */\n description?: string\n /** Уровень заголовка под структуру страницы. Не задан — из `GrConfigProvider`, иначе `3`. */\n headingLevel?: GrCardHeadingLevel\n}\n\nexport interface GrCardEmits {\n (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCardProps>(), {\n // Настраивается через `GrConfigProvider`; дефолты — в резолверах ниже.\n padding: undefined,\n variant: undefined,\n as: undefined,\n href: undefined,\n clickable: false,\n hoverable: false,\n bodyClass: undefined,\n title: undefined,\n description: undefined,\n headingLevel: undefined,\n})\n\nconst emit = defineEmits<GrCardEmits>()\n\nconst slots = useSlots()\n\nconst resolvedPadding = useGrComponentProp('GrCard', 'padding', () => props.padding, 'none')\nconst resolvedVariant = useGrComponentProp('GrCard', 'variant', () => props.variant, 'elevated')\n\nconst isInteractive = computed(() => !!props.as || !!props.href || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n if (props.as)\n return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n if (props.href)\n return 'a'\n\n return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst headingLevel = useGrComponentProp('GrCard', 'headingLevel', () => props.headingLevel, 3)\n\n/**\n * Заголовок внутри `<button>` невалиден: контент-модель кнопки — phrasing\n * content. Кликабельная карточка печатает подпись `<span>`, а структура\n * страницы в этом случае собирается ссылкой в заголовке рядом с `hoverable`.\n */\nlet headingInButtonWarned = false\n\nconst headingTag = computed(() => {\n if (rootTag.value !== 'button') return `h${headingLevel.value}`\n\n if (!headingInButtonWarned && __GR_DEV__) {\n headingInButtonWarned = true\n console.warn(\n '[GrCard] `title` внутри `clickable` печатается `<span>`: заголовок в '\n + '`<button>` невалиден по HTML. Нужен заголовок в структуре страницы — '\n + 'замените `clickable` на `hoverable` и поставьте ссылку в сам заголовок.',\n )\n }\n\n return 'span'\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n\n// `#header` сильнее пропов: нестандартная шапка не обязана объяснять, почему\n// она не `title`.\nconst hasOwnHeader = computed(() => Boolean(slots.header))\nconst hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title))\nconst hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description))\n/**\n * Действия рисуются в **собственной** шапке карточки и включают её наравне с\n * заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`\n * целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К\n * этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки\n * потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.\n */\nconst hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions))\nconst hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value)\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(\n slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value,\n))\n\n/**\n * Имя карточки-ссылки. Без него доступным именем становится всё содержимое\n * подряд — заголовок, описание и тело одной строкой.\n */\nconst rootLabelledBy = computed(() => (isInteractive.value && hasTitle.value ? titleId : undefined))\nconst rootDescribedBy = computed(() => (isInteractive.value && hasDescription.value ? descriptionId : undefined))\n\nconst rootClass = computed(() => grCardRootClass({\n variant: resolvedVariant.value,\n // С секциями отступ принадлежит каждой из них, а не поверхности целиком.\n padding: hasSections.value ? 'none' : resolvedPadding.value,\n interactive: isInteractive.value,\n hoverable: props.hoverable,\n}))\n\nconst sectionPaddingClass = computed(() => paddingClass[resolvedPadding.value])\n\n/**\n * Карточка отбивает то, что рисует сама. Шапка из `title` — её собственная, и\n * отступ ей полагается независимо от `padding`. Слот `#header` сильнее пропов и\n * заменяет шапку целиком: там отступы принадлежат тому, кто её наполнил, —\n * иначе потребитель со своими отступами внутри слота получил бы двойные.\n */\nconst headerClass = computed(() => [\n hasOwnHeader.value ? sectionPaddingClass.value : ownHeaderPaddingClass,\n sectionDividerBottomClass,\n].filter(Boolean).join(' '))\nconst footerClass = computed(() => [sectionPaddingClass.value, sectionDividerTopClass].filter(Boolean).join(' '))\nconst bodySectionClass = computed(() => [sectionPaddingClass.value, props.bodyClass].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n emit('click', event)\n}\n\ndefineSlots<{\n /** Содержимое карточки. */\n default?: () => any\n /** Шапка вместо пропов `title` и `description`. */\n header?: () => any\n /**\n * Действия справа в собственной шапке карточки: «⋯», «Обновить»,\n * переключатель периода. Включают шапку так же, как `title`.\n *\n * Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в\n * ней есть, рисует потребитель.\n */\n actions?: () => any\n /** Подвал: действия, сводка, пагинация. */\n footer?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-card\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :class=\"rootClass\"\n :aria-labelledby=\"rootLabelledBy\"\n :aria-describedby=\"rootDescribedBy\"\n @click=\"onClick\"\n >\n <template v-if=\"hasSections\">\n <div v-if=\"hasOwnHeader || hasHeadingBlock\" data-gr-card-header :class=\"headerClass\">\n <slot name=\"header\">\n <div :class=\"hasActions ? headerRowClass : undefined\">\n <div class=\"min-w-0\">\n <component\n :is=\"headingTag\"\n v-if=\"hasTitle\"\n :id=\"titleId\"\n data-gr-card-title\n :class=\"cardTitleClass\"\n >\n {{ title }}\n </component>\n\n <p\n v-if=\"hasDescription\"\n :id=\"descriptionId\"\n data-gr-card-description\n :class=\"cardDescriptionClass\"\n >\n {{ description }}\n </p>\n </div>\n\n <div v-if=\"hasActions\" data-gr-card-actions :class=\"headerActionsClass\">\n <slot name=\"actions\" />\n </div>\n </div>\n </slot>\n </div>\n\n <div data-gr-card-body :class=\"bodySectionClass\">\n <slot />\n </div>\n\n <div v-if=\"$slots.footer\" data-gr-card-footer :class=\"footerClass\">\n <slot name=\"footer\" />\n </div>\n </template>\n\n <slot v-else />\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, useId, useSlots, type Component } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n headerActionsClass,\n headerRowClass,\n cardDescriptionClass,\n cardTitleClass,\n grCardRootClass,\n ownHeaderPaddingClass,\n paddingClass,\n sectionDividerBottomClass,\n sectionDividerTopClass,\n type GrCardHeadingLevel,\n type GrCardPadding,\n type GrCardVariant,\n} from './grCardStyles'\n\nexport type { GrCardHeadingLevel, GrCardPadding, GrCardVariant } from './grCardStyles'\n\nexport interface GrCardProps {\n /**\n * Внутренние отступы. По умолчанию `none`: карточка — поверхность, а её\n * содержимое (`GrCollapse`, `GrList`) само знает про свои отступы.\n */\n padding?: GrCardPadding\n /** `elevated` — рамка, фон и тень; `outlined` — без тени; `ghost` — без рамки. */\n variant?: GrCardVariant\n /** Свой корневой тег (`RouterLink`, `Link` от Inertia). Сильнее `href`. */\n as?: string | Component\n /** Карточка-ссылка. */\n href?: string\n /** Карточка-кнопка: интерактивна вся поверхность. */\n clickable?: boolean\n /** Подсветка при наведении без интерактивности. */\n hoverable?: boolean\n /** Классы обёртки тела — она появляется вместе с секциями. */\n bodyClass?: string\n /**\n * Заголовок карточки — настоящий `h2`…`h6`, а не жирная строка: отчёт из\n * шести карточек иначе не обойти по структуре, после `h1` страницы в нём\n * нет ни одного заголовка.\n */\n title?: string\n /** Пояснение под заголовком. */\n description?: string\n /** Уровень заголовка под структуру страницы. Не задан — из `GrConfigProvider`, иначе `3`. */\n headingLevel?: GrCardHeadingLevel\n}\n\nexport interface GrCardEmits {\n (e: 'click', event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrCardProps>(), {\n // Настраивается через `GrConfigProvider`; дефолты — в резолверах ниже.\n padding: undefined,\n variant: undefined,\n as: undefined,\n href: undefined,\n clickable: false,\n hoverable: false,\n bodyClass: undefined,\n title: undefined,\n description: undefined,\n headingLevel: undefined,\n})\n\nconst emit = defineEmits<GrCardEmits>()\n\nconst slots = useSlots()\n\nconst resolvedPadding = useGrComponentProp('GrCard', 'padding', () => props.padding, 'none')\nconst resolvedVariant = useGrComponentProp('GrCard', 'variant', () => props.variant, 'elevated')\n\nconst isInteractive = computed(() => !!props.as || !!props.href || props.clickable)\n\nconst rootTag = computed<string | Component>(() => {\n if (props.as)\n return typeof props.as === 'string' ? props.as : markRaw(props.as)\n\n if (props.href)\n return 'a'\n\n return props.clickable ? 'button' : 'div'\n})\n\n/**\n * Компонент-ссылка (`Link` от Inertia, `RouterLink`) рендерит `<a>` сам, и без\n * `href` он ведёт в никуда. Строковый тег, кроме `a`, атрибут не понимает —\n * там он и гасится.\n */\nconst rootHref = computed(() => (\n typeof rootTag.value === 'string' && rootTag.value !== 'a' ? undefined : props.href\n))\n\nconst headingLevel = useGrComponentProp('GrCard', 'headingLevel', () => props.headingLevel, 3)\n\n/**\n * Заголовок внутри `<button>` невалиден: контент-модель кнопки — phrasing\n * content. Кликабельная карточка печатает подпись `<span>`, а структура\n * страницы в этом случае собирается ссылкой в заголовке рядом с `hoverable`.\n */\nlet headingInButtonWarned = false\n\nconst headingTag = computed(() => {\n if (rootTag.value !== 'button') return `h${headingLevel.value}`\n\n if (!headingInButtonWarned && __GR_DEV__) {\n headingInButtonWarned = true\n console.warn(\n '[GrCard] `title` внутри `clickable` печатается `<span>`: заголовок в '\n + '`<button>` невалиден по HTML. Нужен заголовок в структуре страницы — '\n + 'замените `clickable` на `hoverable` и поставьте ссылку в сам заголовок.',\n )\n }\n\n return 'span'\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n\n// `#header` сильнее пропов: нестандартная шапка не обязана объяснять, почему\n// она не `title`.\nconst hasOwnHeader = computed(() => Boolean(slots.header))\nconst hasTitle = computed(() => !hasOwnHeader.value && Boolean(props.title))\nconst hasDescription = computed(() => !hasOwnHeader.value && Boolean(props.description))\n/**\n * Действия рисуются в **собственной** шапке карточки и включают её наравне с\n * заголовком. Без этого слота карточке с кнопкой приходилось забирать `#header`\n * целиком — а вместе с ним заново писать заголовок, его уровень и отступы. К\n * этому обходу независимо пришли `GrDashboardItem` в этом же кольце и обёртки\n * потребителей; оба теряли настоящий `h2…h6` и шкалу отступов.\n */\nconst hasActions = computed(() => !hasOwnHeader.value && Boolean(slots.actions))\nconst hasHeadingBlock = computed(() => hasTitle.value || hasDescription.value || hasActions.value)\n\n/**\n * Обёртки появляются, только когда их попросили: карточка без секций остаётся\n * одним `<div>` со слотом внутри — ровно тем, что рендерили `GrCollapse` и\n * `GrList` до появления пропов.\n */\nconst hasSections = computed(() => Boolean(\n slots.header || slots.footer || slots.actions || props.bodyClass || hasHeadingBlock.value,\n))\n\n/**\n * Имя карточки-ссылки. Без него доступным именем становится всё содержимое\n * подряд — заголовок, описание и тело одной строкой.\n */\nconst rootLabelledBy = computed(() => (isInteractive.value && hasTitle.value ? titleId : undefined))\nconst rootDescribedBy = computed(() => (isInteractive.value && hasDescription.value ? descriptionId : undefined))\n\nconst rootClass = computed(() => grCardRootClass({\n variant: resolvedVariant.value,\n // С секциями отступ принадлежит каждой из них, а не поверхности целиком.\n padding: hasSections.value ? 'none' : resolvedPadding.value,\n interactive: isInteractive.value,\n hoverable: props.hoverable,\n}))\n\nconst sectionPaddingClass = computed(() => paddingClass[resolvedPadding.value])\n\n/**\n * Карточка отбивает то, что рисует сама. Шапка из `title` — её собственная, и\n * отступ ей полагается независимо от `padding`. Слот `#header` сильнее пропов и\n * заменяет шапку целиком: там отступы принадлежат тому, кто её наполнил, —\n * иначе потребитель со своими отступами внутри слота получил бы двойные.\n */\nconst headerClass = computed(() => [\n hasOwnHeader.value ? sectionPaddingClass.value : ownHeaderPaddingClass,\n sectionDividerBottomClass,\n].filter(Boolean).join(' '))\nconst footerClass = computed(() => [sectionPaddingClass.value, sectionDividerTopClass].filter(Boolean).join(' '))\nconst bodySectionClass = computed(() => [sectionPaddingClass.value, props.bodyClass].filter(Boolean).join(' '))\n\nfunction onClick(event: MouseEvent): void {\n emit('click', event)\n}\n\ndefineSlots<{\n /** Содержимое карточки. */\n default?: () => any\n /** Шапка вместо пропов `title` и `description`. */\n header?: () => any\n /**\n * Действия справа в собственной шапке карточки: «⋯», «Обновить»,\n * переключатель периода. Включают шапку так же, как `title`.\n *\n * Со слотом `#header` не сочетается: тот заменяет шапку целиком, и всё, что в\n * ней есть, рисует потребитель.\n */\n actions?: () => any\n /** Подвал: действия, сводка, пагинация. */\n footer?: () => any\n}>()\n\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-card\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootHref\"\n :class=\"rootClass\"\n :aria-labelledby=\"rootLabelledBy\"\n :aria-describedby=\"rootDescribedBy\"\n @click=\"onClick\"\n >\n <template v-if=\"hasSections\">\n <div v-if=\"hasOwnHeader || hasHeadingBlock\" data-gr-card-header :class=\"headerClass\">\n <slot name=\"header\">\n <div :class=\"hasActions ? headerRowClass : undefined\">\n <div class=\"min-w-0\">\n <component\n :is=\"headingTag\"\n v-if=\"hasTitle\"\n :id=\"titleId\"\n data-gr-card-title\n :class=\"cardTitleClass\"\n >\n {{ title }}\n </component>\n\n <p\n v-if=\"hasDescription\"\n :id=\"descriptionId\"\n data-gr-card-description\n :class=\"cardDescriptionClass\"\n >\n {{ description }}\n </p>\n </div>\n\n <div v-if=\"hasActions\" data-gr-card-actions :class=\"headerActionsClass\">\n <slot name=\"actions\" />\n </div>\n </div>\n </slot>\n </div>\n\n <div data-gr-card-body :class=\"bodySectionClass\">\n <slot />\n </div>\n\n <div v-if=\"$slots.footer\" data-gr-card-footer :class=\"footerClass\">\n <slot name=\"footer\" />\n </div>\n </template>\n\n <slot v-else />\n </component>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { n as grCardSafelist, t as grCardConfig } from "../../chunks/config-
|
|
2
|
-
import { t as GrCard_default } from "./chunks/GrCard-
|
|
1
|
+
import { n as grCardSafelist, t as grCardConfig } from "../../chunks/config-DUbbGcfw.js";
|
|
2
|
+
import { t as GrCard_default } from "./chunks/GrCard-BttXz1pQ.js";
|
|
3
3
|
export { GrCard_default as GrCard, GrCard_default as default, grCardConfig, grCardSafelist };
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
|
|
2
2
|
import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
|
|
3
3
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
4
|
+
import { t as warnRenamedProp } from "../../../chunks/renamedProp-BwcN-SJg.js";
|
|
4
5
|
import { t as GR_CHIP_GROUP_CONTEXT } from "../../../chunks/grChipGroupContext-DZXkACap.js";
|
|
5
6
|
import { a as chipIconSizeClassBySize, f as grChipClass, i as chipIconClass, n as chipCloseClass, s as chipLabelClass, t as chipCloseButtonClass } from "../../../chunks/grChipStyles-3JZApw03.js";
|
|
6
|
-
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, withCtx, withModifiers } from "vue";
|
|
7
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, onBeforeUnmount, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useAttrs, withCtx, withModifiers } from "vue";
|
|
7
8
|
//#region src/components/GrChip/GrChip.vue?vue&type=script&setup=true&lang.ts
|
|
8
9
|
var _hoisted_1 = ["title"];
|
|
9
10
|
var _hoisted_2 = ["aria-label", "tabindex"];
|
|
@@ -52,6 +53,7 @@ var GrChip_default = /* @__PURE__ */ defineComponent({
|
|
|
52
53
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
53
54
|
const props = __props;
|
|
54
55
|
const emit = __emit;
|
|
56
|
+
warnRenamedProp("GrChip", useAttrs(), { variant: "tone" });
|
|
55
57
|
const { t } = useGranularityTranslations();
|
|
56
58
|
const group = inject(GR_CHIP_GROUP_CONTEXT, null);
|
|
57
59
|
const rootEl = ref(null);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrChip-C0vU69tf.js","names":["$slots"],"sources":["../../../../src/components/GrChip/GrChip.vue","../../../../src/components/GrChip/GrChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n chipCloseButtonClass,\n chipCloseClass,\n chipIconClass,\n chipIconSizeClassBySize,\n chipLabelClass,\n grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n value?: GrChipValue\n /**\n * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n */\n label?: string\n tone?: GrChipTone\n dark?: boolean\n size?: GrChipSize\n radius?: GrChipRadius\n /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n selectable?: boolean\n /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n selected?: boolean\n /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n closable?: boolean\n disabled?: boolean\n /** Доступное имя, когда подпись не объясняет назначения. */\n ariaLabel?: string\n /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n removeLabel?: string\n /**\n * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n *\n * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n * порядок чипов, и что стоит за краем ряда.\n */\n removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n (e: 'update:selected', value: boolean): void\n (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n value: undefined,\n label: undefined,\n // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n // компонент заглянет в `GrConfigProvider`.\n tone: undefined,\n dark: undefined,\n size: undefined,\n radius: undefined,\n selectable: false,\n selected: false,\n closable: false,\n disabled: false,\n ariaLabel: undefined,\n removeLabel: undefined,\n removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n default?: () => unknown\n /** Иконка перед подписью. */\n icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n if (inGroup.value && props.value !== undefined) return group!.isSelected(props.value)\n return props.selected\n})\n\nconst isClosable = computed(() => {\n if (isReadonly.value || isDisabled.value) return false\n return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n 'GrChip',\n 'tone',\n () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n 'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n 'GrChip',\n 'radius',\n () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n 'round',\n)\nconst resolvedDark = useGrComponentProp(\n 'GrChip',\n 'dark',\n () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n false,\n)\n\nconst rootClass = computed(() => grChipClass({\n tone: resolvedTone.value,\n dark: resolvedDark.value,\n size: resolvedSize.value,\n radius: resolvedRadius.value,\n interactive: isInteractive.value && !isReadonly.value,\n selected: isSelected.value,\n disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n if (props.removeLabel) return props.removeLabel\n if (props.label) return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n if (!inGroup.value) return undefined\n return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n if (!isInteractive.value) return undefined\n if (isDisabled.value) return -1\n if (!inGroup.value || props.value === undefined) return 0\n return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n if (isDisabled.value || isReadonly.value) return\n\n if (inGroup.value && props.value !== undefined) {\n group!.toggle(props.value)\n return\n }\n\n if (props.selectable) emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n if (!isClosable.value) return\n\n emit('remove')\n if (inGroup.value && props.value !== undefined) group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n if (isDisabled.value) return\n\n if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n requestRemove()\n return\n }\n\n toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n if (isDisabled.value) return\n\n // Навигация принадлежит группе: состав знает только она.\n if (inGroup.value && group!.handleNavigationKeys(event)) return\n\n if (event.key === 'Delete' || event.key === 'Backspace') {\n if (!isClosable.value) return\n event.preventDefault()\n requestRemove()\n }\n}\n\nif (group) {\n const unregister = group.register({\n value: () => props.value as GrChipValue,\n disabled: () => isDisabled.value,\n el: () => rootEl.value,\n })\n onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n focus: () => rootEl.value?.focus(),\n blur: () => rootEl.value?.blur(),\n /**\n * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n * куда переносить фокус.\n */\n removeEl,\n})\n</script>\n\n<template>\n <component\n :is=\"isInteractive ? 'button' : 'span'\"\n ref=\"rootEl\"\n data-gr-chip\n :type=\"isInteractive ? 'button' : undefined\"\n :class=\"rootClass\"\n :role=\"chipRole\"\n :data-value=\"value\"\n :aria-label=\"ariaLabel\"\n :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-disabled=\"isDisabled ? 'true' : undefined\"\n :disabled=\"isInteractive && isDisabled ? true : undefined\"\n :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n :tabindex=\"tabindex\"\n @click=\"isInteractive ? onRootClick($event) : undefined\"\n @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n >\n <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n <slot name=\"icon\" />\n </span>\n\n <span data-gr-chip-label :class=\"chipLabelClass\">\n <slot>{{ label }}</slot>\n </span>\n\n <!--\n Крестик существует в двух видах, и различитель — роль самого чипа.\n Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n -->\n <span\n v-if=\"isClosable && isInteractive\"\n data-gr-chip-close\n :class=\"[chipCloseClass, iconSizeClass]\"\n :title=\"removeTitle\"\n aria-hidden=\"true\"\n >\n <IconClose class=\"h-full w-full\" />\n </span>\n\n <button\n v-else-if=\"isClosable\"\n ref=\"removeEl\"\n data-gr-chip-close\n type=\"button\"\n :class=\"[chipCloseButtonClass, iconSizeClass]\"\n :aria-label=\"removeTitle\"\n :tabindex=\"removeTabindex\"\n @mousedown.prevent.stop\n @click.stop=\"requestRemove()\"\n >\n <IconClose class=\"h-full w-full\" />\n </button>\n </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, ref, useAttrs } from 'vue'\n\nimport IconClose from '~icons/lucide/x'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport type { GrChipValue } from './grChipGroupContext'\n\nimport { warnRenamedProp } from '../shared/renamedProp'\nimport { GR_CHIP_GROUP_CONTEXT } from './grChipGroupContext'\nimport type { GrChipRadius, GrChipSize, GrChipTone } from './grChipStyles'\nimport {\n chipCloseButtonClass,\n chipCloseClass,\n chipIconClass,\n chipIconSizeClassBySize,\n chipLabelClass,\n grChipClass,\n} from './grChipStyles'\n\n/**\n * Интерактивный тег: снимаемый, выбираемый, с иконкой.\n *\n * От `GrBadge` отличается не видом, а природой: бейдж — метка, чип — виджет.\n * Поэтому цвета и радиусы взяты у бейджа как есть (в одном ряду они обязаны\n * совпадать), а роль, клавиатура и размеры — свои.\n */\nexport interface GrChipProps {\n /** Значение чипа в группе. Вне `GrChipGroup` не используется. */\n value?: GrChipValue\n /**\n * Подпись. Нужна отдельно от слота: из неё собирается имя кнопки снятия —\n * «Убрать» на двадцати кнопках подряд не даёт выбрать нужную.\n */\n label?: string\n tone?: GrChipTone\n dark?: boolean\n size?: GrChipSize\n radius?: GrChipRadius\n /** Чип становится переключателем: `aria-pressed`, `Enter`/`Space`. */\n selectable?: boolean\n /** Состояние переключателя вне группы. Внутри группы значение ведёт группа. */\n selected?: boolean\n /** Крестик. Внутри виджета он не кнопка — см. блок про роли ниже. */\n closable?: boolean\n disabled?: boolean\n /** Доступное имя, когда подпись не объясняет назначения. */\n ariaLabel?: string\n /** Имя кнопки снятия целиком. Перебивает собранное из `label`. */\n removeLabel?: string\n /**\n * `tabindex` кнопки снятия — для чипа внутри поля ввода.\n *\n * Там таб-стоп принадлежит `<input>`, а ряд чипов ходит стрелками: у\n * `GrInputTag` кольцо оставляет ровно один `0`, у `GrAutocomplete` их нет\n * вовсе. Проп нужен потому, что кольцом управляет родитель — он знает и\n * порядок чипов, и что стоит за краем ряда.\n */\n removeTabindex?: number\n}\n\nexport interface GrChipEmits {\n (e: 'update:selected', value: boolean): void\n (e: 'remove'): void\n}\n\nconst props = withDefaults(defineProps<GrChipProps>(), {\n value: undefined,\n label: undefined,\n // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n // компонент заглянет в `GrConfigProvider`.\n tone: undefined,\n dark: undefined,\n size: undefined,\n radius: undefined,\n selectable: false,\n selected: false,\n closable: false,\n disabled: false,\n ariaLabel: undefined,\n removeLabel: undefined,\n removeTabindex: undefined,\n})\n\nconst emit = defineEmits<GrChipEmits>()\n\n// `variant` переименован в `tone`: незнакомый атрибут Vue сажает на корневой\n// узел, поэтому старое имя не роняет ни типы, ни рантайм — компонент молча\n// рисуется дефолтным тоном.\nwarnRenamedProp('GrChip', useAttrs(), { variant: 'tone' })\n\ndefineSlots<{\n /** Подпись чипа. Внутри выбираемого чипа — только фразовое содержимое. */\n default?: () => unknown\n /** Иконка перед подписью. */\n icon?: () => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst group = inject(GR_CHIP_GROUP_CONTEXT, null)\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst inGroup = computed(() => group !== null && props.value !== undefined)\n\nconst isDisabled = computed(() => props.disabled || (group?.disabled.value ?? false))\nconst isReadonly = computed(() => group?.readonly.value ?? false)\n\n/**\n * Чип — виджет ровно тогда, когда по нему кликают.\n *\n * От этого зависит вся разметка: у виджета роль, `tabindex` и клавиатура, а\n * крестик внутри него перестаёт быть кнопкой.\n */\nconst isInteractive = computed(() => inGroup.value || props.selectable)\n\nconst isSelected = computed(() => {\n if (inGroup.value && props.value !== undefined) return group!.isSelected(props.value)\n return props.selected\n})\n\nconst isClosable = computed(() => {\n if (isReadonly.value || isDisabled.value) return false\n return props.closable || (inGroup.value ? group!.closable.value : false)\n})\n\n// Приоритет: локальный проп → значение группы → `GrConfigProvider` → дефолт.\n// Группа специфичнее конфига, поэтому её значение подаётся как «локальное».\nconst resolvedSize = useGrComponentSize<GrChipSize>(\n () => props.size ?? (inGroup.value ? group!.size.value : undefined),\n { component: 'GrChip' },\n)\nconst resolvedTone = useGrComponentProp(\n 'GrChip',\n 'tone',\n () => props.tone ?? (inGroup.value ? group!.tone.value : undefined),\n 'neutral',\n)\nconst resolvedRadius = useGrComponentProp(\n 'GrChip',\n 'radius',\n () => props.radius ?? (inGroup.value ? group!.radius.value : undefined),\n 'round',\n)\nconst resolvedDark = useGrComponentProp(\n 'GrChip',\n 'dark',\n () => props.dark ?? (inGroup.value ? group!.dark.value : undefined),\n false,\n)\n\nconst rootClass = computed(() => grChipClass({\n tone: resolvedTone.value,\n dark: resolvedDark.value,\n size: resolvedSize.value,\n radius: resolvedRadius.value,\n interactive: isInteractive.value && !isReadonly.value,\n selected: isSelected.value,\n disabled: isDisabled.value,\n}))\n\nconst iconSizeClass = computed(() => chipIconSizeClassBySize[resolvedSize.value])\n\nconst removeTitle = computed(() => {\n if (props.removeLabel) return props.removeLabel\n if (props.label) return t('gr.chip.removeNamed', 'Remove {label}', { label: props.label })\n return t('gr.chip.remove', 'Remove')\n})\n\n/**\n * Роль чипа задаёт группа, а не потребитель.\n *\n * Одиночный переключатель — кнопка с `aria-pressed`; в группе роль зависит от\n * множественности выбора: `radio` в одиночной (образец — `GrSegmented`),\n * `option` во множественной, где контейнер объявлен `listbox` c\n * `aria-multiselectable`.\n */\nconst chipRole = computed(() => {\n if (!inGroup.value) return undefined\n return group!.selection.value === 'single' ? 'radio' : 'option'\n})\n\nconst tabindex = computed(() => {\n if (!isInteractive.value) return undefined\n if (isDisabled.value) return -1\n if (!inGroup.value || props.value === undefined) return 0\n return group!.rovingValue.value === props.value ? 0 : -1\n})\n\nfunction toggle(): void {\n if (isDisabled.value || isReadonly.value) return\n\n if (inGroup.value && props.value !== undefined) {\n group!.toggle(props.value)\n return\n }\n\n if (props.selectable) emit('update:selected', !props.selected)\n}\n\nfunction requestRemove(): void {\n if (!isClosable.value) return\n\n emit('remove')\n if (inGroup.value && props.value !== undefined) group!.requestRemove(props.value)\n}\n\n/**\n * Крестик внутри виджета — не кнопка, поэтому его клик приходит сюда же и\n * разбирается по цели. Тот же приём у `GrTabs`: внутрь роли-виджета вложенная\n * кнопка запрещена (axe: `nested-interactive`), а `<button>` внутри `<button>`\n * невалиден и по контент-модели HTML.\n */\nfunction onRootClick(event: MouseEvent): void {\n if (isDisabled.value) return\n\n if (event.target instanceof Element && event.target.closest('[data-gr-chip-close]')) {\n requestRemove()\n return\n }\n\n toggle()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n if (isDisabled.value) return\n\n // Навигация принадлежит группе: состав знает только она.\n if (inGroup.value && group!.handleNavigationKeys(event)) return\n\n if (event.key === 'Delete' || event.key === 'Backspace') {\n if (!isClosable.value) return\n event.preventDefault()\n requestRemove()\n }\n}\n\nif (group) {\n const unregister = group.register({\n value: () => props.value as GrChipValue,\n disabled: () => isDisabled.value,\n el: () => rootEl.value,\n })\n onBeforeUnmount(unregister)\n}\n\nconst removeEl = ref<HTMLButtonElement | null>(null)\n\ndefineExpose({\n focus: () => rootEl.value?.focus(),\n blur: () => rootEl.value?.blur(),\n /**\n * Кнопка снятия — цель roving-фокуса у родителя. Отдаётся элементом, а не\n * методом `focusRemove`: кольцу нужен сам узел, оно само решает, когда и\n * куда переносить фокус.\n */\n removeEl,\n})\n</script>\n\n<template>\n <component\n :is=\"isInteractive ? 'button' : 'span'\"\n ref=\"rootEl\"\n data-gr-chip\n :type=\"isInteractive ? 'button' : undefined\"\n :class=\"rootClass\"\n :role=\"chipRole\"\n :data-value=\"value\"\n :aria-label=\"ariaLabel\"\n :aria-checked=\"chipRole === 'radio' ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-selected=\"chipRole === 'option' ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-pressed=\"isInteractive && !chipRole ? (isSelected ? 'true' : 'false') : undefined\"\n :aria-disabled=\"isDisabled ? 'true' : undefined\"\n :disabled=\"isInteractive && isDisabled ? true : undefined\"\n :aria-keyshortcuts=\"isInteractive && isClosable ? 'Delete' : undefined\"\n :tabindex=\"tabindex\"\n @click=\"isInteractive ? onRootClick($event) : undefined\"\n @keydown=\"isInteractive ? onRootKeydown($event) : undefined\"\n >\n <span v-if=\"$slots.icon\" data-gr-chip-icon :class=\"[chipIconClass, iconSizeClass]\">\n <slot name=\"icon\" />\n </span>\n\n <span data-gr-chip-label :class=\"chipLabelClass\">\n <slot>{{ label }}</slot>\n </span>\n\n <!--\n Крестик существует в двух видах, и различитель — роль самого чипа.\n Виджет: `<span aria-hidden>` вне таб-порядка, снятие идёт `Delete`/`Backspace`.\n Не виджет: настоящая кнопка со своей остановкой `Tab` и своим именем.\n -->\n <span\n v-if=\"isClosable && isInteractive\"\n data-gr-chip-close\n :class=\"[chipCloseClass, iconSizeClass]\"\n :title=\"removeTitle\"\n aria-hidden=\"true\"\n >\n <IconClose class=\"h-full w-full\" />\n </span>\n\n <button\n v-else-if=\"isClosable\"\n ref=\"removeEl\"\n data-gr-chip-close\n type=\"button\"\n :class=\"[chipCloseButtonClass, iconSizeClass]\"\n :aria-label=\"removeTitle\"\n :tabindex=\"removeTabindex\"\n @mousedown.prevent.stop\n @click.stop=\"requestRemove()\"\n >\n <IconClose class=\"h-full w-full\" />\n </button>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAkBd,MAAM,OAAO;EAKb,gBAAgB,UAAU,SAAS,GAAG,EAAE,SAAS,OAAO,CAAC;EASzD,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,QAAQ,OAAO,uBAAuB,IAAI;EAChD,MAAM,SAAS,IAAwB,IAAI;EAE3C,MAAM,UAAU,eAAe,UAAU,QAAQ,MAAM,UAAU,KAAA,CAAS;EAE1E,MAAM,aAAa,eAAe,MAAM,aAAa,OAAO,SAAS,SAAS,MAAM;EACpF,MAAM,aAAa,eAAe,OAAO,SAAS,SAAS,KAAK;;;;;;;EAQhE,MAAM,gBAAgB,eAAe,QAAQ,SAAS,MAAM,UAAU;EAEtE,MAAM,aAAa,eAAe;GAChC,IAAI,QAAQ,SAAS,MAAM,UAAU,KAAA,GAAW,OAAO,MAAO,WAAW,MAAM,KAAK;GACpF,OAAO,MAAM;EACf,CAAC;EAED,MAAM,aAAa,eAAe;GAChC,IAAI,WAAW,SAAS,WAAW,OAAO,OAAO;GACjD,OAAO,MAAM,aAAa,QAAQ,QAAQ,MAAO,SAAS,QAAQ;EACpE,CAAC;EAID,MAAM,eAAe,yBACb,MAAM,SAAS,QAAQ,QAAQ,MAAO,KAAK,QAAQ,KAAA,IACzD,EAAE,WAAW,SAAS,CACxB;EACA,MAAM,eAAe,mBACnB,UACA,cACM,MAAM,SAAS,QAAQ,QAAQ,MAAO,KAAK,QAAQ,KAAA,IACzD,SACF;EACA,MAAM,iBAAiB,mBACrB,UACA,gBACM,MAAM,WAAW,QAAQ,QAAQ,MAAO,OAAO,QAAQ,KAAA,IAC7D,OACF;EACA,MAAM,eAAe,mBACnB,UACA,cACM,MAAM,SAAS,QAAQ,QAAQ,MAAO,KAAK,QAAQ,KAAA,IACzD,KACF;EAEA,MAAM,YAAY,eAAe,YAAY;GAC3C,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,MAAM,aAAa;GACnB,QAAQ,eAAe;GACvB,aAAa,cAAc,SAAS,CAAC,WAAW;GAChD,UAAU,WAAW;GACrB,UAAU,WAAW;EACvB,CAAC,CAAC;EAEF,MAAM,gBAAgB,eAAe,wBAAwB,aAAa,MAAM;EAEhF,MAAM,cAAc,eAAe;GACjC,IAAI,MAAM,aAAa,OAAO,MAAM;GACpC,IAAI,MAAM,OAAO,OAAO,EAAE,uBAAuB,kBAAkB,EAAE,OAAO,MAAM,MAAM,CAAC;GACzF,OAAO,EAAE,kBAAkB,QAAQ;EACrC,CAAC;;;;;;;;;EAUD,MAAM,WAAW,eAAe;GAC9B,IAAI,CAAC,QAAQ,OAAO,OAAO,KAAA;GAC3B,OAAO,MAAO,UAAU,UAAU,WAAW,UAAU;EACzD,CAAC;EAED,MAAM,WAAW,eAAe;GAC9B,IAAI,CAAC,cAAc,OAAO,OAAO,KAAA;GACjC,IAAI,WAAW,OAAO,OAAO;GAC7B,IAAI,CAAC,QAAQ,SAAS,MAAM,UAAU,KAAA,GAAW,OAAO;GACxD,OAAO,MAAO,YAAY,UAAU,MAAM,QAAQ,IAAI;EACxD,CAAC;EAED,SAAS,SAAe;GACtB,IAAI,WAAW,SAAS,WAAW,OAAO;GAE1C,IAAI,QAAQ,SAAS,MAAM,UAAU,KAAA,GAAW;IAC9C,MAAO,OAAO,MAAM,KAAK;IACzB;GACF;GAEA,IAAI,MAAM,YAAY,KAAK,mBAAmB,CAAC,MAAM,QAAQ;EAC/D;EAEA,SAAS,gBAAsB;GAC7B,IAAI,CAAC,WAAW,OAAO;GAEvB,KAAK,QAAQ;GACb,IAAI,QAAQ,SAAS,MAAM,UAAU,KAAA,GAAW,MAAO,cAAc,MAAM,KAAK;EAClF;;;;;;;EAQA,SAAS,YAAY,OAAyB;GAC5C,IAAI,WAAW,OAAO;GAEtB,IAAI,MAAM,kBAAkB,WAAW,MAAM,OAAO,QAAQ,sBAAsB,GAAG;IACnF,cAAc;IACd;GACF;GAEA,OAAO;EACT;EAEA,SAAS,cAAc,OAA4B;GACjD,IAAI,WAAW,OAAO;GAGtB,IAAI,QAAQ,SAAS,MAAO,qBAAqB,KAAK,GAAG;GAEzD,IAAI,MAAM,QAAQ,YAAY,MAAM,QAAQ,aAAa;IACvD,IAAI,CAAC,WAAW,OAAO;IACvB,MAAM,eAAe;IACrB,cAAc;GAChB;EACF;EAEA,IAAI,OAMF,gBALmB,MAAM,SAAS;GAChC,aAAa,MAAM;GACnB,gBAAgB,WAAW;GAC3B,UAAU,OAAO;EACnB,CACgB,CAAU;EAG5B,MAAM,WAAW,IAA8B,IAAI;EAEnD,SAAa;GACX,aAAa,OAAO,OAAO,MAAM;GACjC,YAAY,OAAO,OAAO,KAAK;;;;;;GAM/B;EACF,CAAC;;uBAIC,YAuDY,wBAtDL,cAAA,QAAa,WAAA,MAAA,GAAA;aACd;IAAJ,KAAI;IACJ,gBAAA;IACC,MAAM,cAAA,QAAa,WAAc,KAAA;IACjC,OAAK,eAAE,UAAA,KAAS;IAChB,MAAM,SAAA;IACN,cAAY,QAAA;IACZ,cAAY,QAAA;IACZ,gBAAc,SAAA,UAAQ,UAAgB,WAAA,QAAU,SAAA,UAAuB,KAAA;IACvE,iBAAe,SAAA,UAAQ,WAAiB,WAAA,QAAU,SAAA,UAAuB,KAAA;IACzE,gBAAc,cAAA,SAAa,CAAK,SAAA,QAAY,WAAA,QAAU,SAAA,UAAuB,KAAA;IAC7E,iBAAe,WAAA,QAAU,SAAY,KAAA;IACrC,UAAU,cAAA,SAAiB,WAAA,QAAU,OAAU,KAAA;IAC/C,qBAAmB,cAAA,SAAiB,WAAA,QAAU,WAAc,KAAA;IAC5D,UAAU,SAAA;IACV,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAgB,YAAY,MAAM,IAAI,KAAA;IAC7C,WAAO,OAAA,OAAA,OAAA,MAAA,WAAE,cAAA,QAAgB,cAAc,MAAM,IAAI,KAAA;;2BAI3C;KAFKA,KAAAA,OAAO,QAAA,UAAA,GAAnB,mBAEO,QAAA;;MAFkB,qBAAA;MAAmB,OAAK,eAAA,CAAG,MAAA,aAAA,GAAe,cAAA,KAAa,CAAA;SAC9E,WAAoB,KAAA,QAAA,MAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAGtB,mBAEO,QAAA;MAFD,sBAAA;MAAoB,OAAK,eAAE,MAAA,cAAA,CAAc;SAC7C,WAAwB,KAAA,QAAA,WAAA,CAAA,SAAA,CAAA,gBAAA,gBAAf,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA;KASR,WAAA,SAAc,cAAA,SAAA,UAAA,GADtB,mBAQO,QAAA;;MANL,sBAAA;MACC,OAAK,eAAA,CAAG,MAAA,cAAA,GAAgB,cAAA,KAAa,CAAA;MACrC,OAAO,YAAA;MACR,eAAY;SAEZ,YAAmC,MAAA,SAAA,GAAA,EAAxB,OAAM,gBAAe,CAAA,CAAA,GAAA,IAAA,UAAA,KAIrB,WAAA,SAAA,UAAA,GADb,mBAYS,UAAA;;eAVH;MAAJ,KAAI;MACJ,sBAAA;MACA,MAAK;MACJ,OAAK,eAAA,CAAG,MAAA,oBAAA,GAAsB,cAAA,KAAa,CAAA;MAC3C,cAAY,YAAA;MACZ,UAAU,QAAA;MACV,aAAS,OAAA,OAAA,OAAA,KAAA,oBAAV,CAAA,GAAuB,CAAA,WAAA,MAAA,CAAA;MACtB,SAAK,OAAA,OAAA,OAAA,KAAA,eAAA,WAAO,cAAa,GAAA,CAAA,MAAA,CAAA;SAE1B,YAAmC,MAAA,SAAA,GAAA,EAAxB,OAAM,gBAAe,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrChip_default } from "./chunks/GrChip-
|
|
1
|
+
import { t as GrChip_default } from "./chunks/GrChip-C0vU69tf.js";
|
|
2
2
|
import { n as grChipSafelist, t as grChipConfig } from "../../chunks/config-Dv_r92GL.js";
|
|
3
3
|
export { GrChip_default as GrChip, GrChip_default as default, grChipConfig, grChipSafelist };
|
|
@@ -2,7 +2,7 @@ import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunk
|
|
|
2
2
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
3
3
|
import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-Dmf0c9ba.js";
|
|
4
4
|
import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
|
|
5
|
-
import { t as GrCard_default } from "../../GrCard/chunks/GrCard-
|
|
5
|
+
import { t as GrCard_default } from "../../GrCard/chunks/GrCard-BttXz1pQ.js";
|
|
6
6
|
import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
|
|
7
7
|
import { a as grCollapseBodyClass, c as grCollapseHeaderClass, i as collapseExtraPaddings, l as grCollapseRowClass, o as grCollapseChevronClass, r as collapseChevronSizes, s as grCollapseEmptyClass, u as grCollapseTitleClass } from "../../../chunks/config-BoUI0t-t.js";
|
|
8
8
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, withCtx } from "vue";
|
package/dist/components/GrCollapse/chunks/{GrCollapse-Bw9_JatF.js.map → GrCollapse-BlW6ybdL.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrCollapse-Bw9_JatF.js","names":["$slots"],"sources":["../../../../src/components/GrCollapse/grCollapseContext.ts","../../../../src/components/GrCollapse/GrCollapse.vue","../../../../src/components/GrCollapse/GrCollapse.vue","../../../../src/components/GrCollapse/GrCollapseItem.vue","../../../../src/components/GrCollapse/GrCollapseItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrCollapseValue = string | number\n\nexport type GrCollapseModelValue = GrCollapseValue | GrCollapseValue[] | undefined\n\n/**\n * Уровень заголовка секции. APG для accordion требует, чтобы он соответствовал\n * структуре страницы: аккордеон в разделе `<h4>` с захардкоженным `<h3>` рвёт\n * навигацию по заголовкам.\n */\nexport const GR_COLLAPSE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrCollapseHeadingLevel = typeof GR_COLLAPSE_HEADING_LEVELS[number]\n\n/** Сторона шеврона относительно заголовка — логическая, не физическая (RTL). */\nexport const GR_COLLAPSE_ICON_POSITIONS = ['start', 'end'] as const\n\nexport type GrCollapseIconPosition = typeof GR_COLLAPSE_ICON_POSITIONS[number]\n\n/**\n * Async-guard на переключение секции: `false` отменяет его. Второй аргумент —\n * куда идёт секция (`true` — раскрывается), чтобы «сохранить изменения?»\n * спрашивалось только на сворачивании.\n */\nexport type GrCollapseBeforeChange = (\n name: GrCollapseValue,\n expanding: boolean,\n) => boolean | void | Promise<boolean | void>\n\nexport type GrCollapseContext = {\n accordion: ComputedRef<boolean>\n disabled: ComputedRef<boolean>\n size: ComputedRef<GrComponentSize>\n headingLevel: ComputedRef<GrCollapseHeadingLevel>\n expandIconPosition: ComputedRef<GrCollapseIconPosition>\n isActive: (name: GrCollapseValue) => boolean\n toggle: (name: GrCollapseValue) => void\n}\n\nexport const GR_COLLAPSE_CONTEXT: InjectionKey<GrCollapseContext> = Symbol('GR_COLLAPSE_CONTEXT')\n","<script setup lang=\"ts\">\nimport { computed, provide, useSlots } from 'vue'\n\nimport GrCard from '../GrCard'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { grCollapseEmptyClass } from './grCollapseStyles'\n\nimport {\n GR_COLLAPSE_CONTEXT,\n type GrCollapseBeforeChange,\n type GrCollapseContext,\n type GrCollapseHeadingLevel,\n type GrCollapseIconPosition,\n type GrCollapseModelValue,\n type GrCollapseValue,\n} from './grCollapseContext'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport './defaults'\n\n/**\n * GrCollapse — контейнер секций `GrCollapseItem`.\n *\n * @prop modelValue — открытые секции. В `accordion`-режиме — `string|number|undefined`, иначе — массив значений.\n * @prop accordion — режим, когда одновременно может быть открыта только одна секция.\n * @prop disabled — блокирует взаимодействие со всеми секциями.\n * @prop divided — разделители между секциями.\n * @prop borderless — без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара\n * иначе получает вторую рамку и вторую тень.\n * @prop beforeChange — async-guard: `false` отменяет переключение.\n */\nexport interface GrCollapseProps {\n modelValue?: GrCollapseModelValue\n accordion?: boolean\n disabled?: boolean\n divided?: boolean\n borderless?: boolean\n /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */\n headingLevel?: GrCollapseHeadingLevel\n /** Сторона шеврона относительно заголовка. */\n expandIconPosition?: GrCollapseIconPosition\n beforeChange?: GrCollapseBeforeChange\n /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */\n size?: GrComponentSize\n /**\n * Пусто ли. Не задан — считается по содержимому: аккордеон без секций\n * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —\n * например, когда секции приезжают асинхронно и мигать текстом не надо.\n */\n empty?: boolean\n /** Текст пустого состояния. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrCollapseEmits {\n (e: 'update:modelValue', value: GrCollapseModelValue): void\n (e: 'change', value: GrCollapseModelValue): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный пользователем\n// проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrCollapseProps>(), {\n modelValue: undefined,\n accordion: false,\n disabled: false,\n divided: undefined,\n borderless: undefined,\n headingLevel: undefined,\n expandIconPosition: undefined,\n beforeChange: undefined,\n size: undefined,\n empty: undefined,\n emptyText: undefined,\n})\n\nconst emit = defineEmits<GrCollapseEmits>()\n\ndefineSlots<{\n /** Секции аккордеона (`GrCollapseItem`). */\n default?: () => any\n /** Содержимое пустого состояния вместо текста по умолчанию. */\n empty?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCollapse' })\nconst divided = useGrComponentProp('GrCollapse', 'divided', () => props.divided, true)\nconst borderless = useGrComponentProp('GrCollapse', 'borderless', () => props.borderless, false)\nconst headingLevel = useGrComponentProp('GrCollapse', 'headingLevel', () => props.headingLevel, 3)\nconst expandIconPosition = useGrComponentProp('GrCollapse', 'expandIconPosition', () => props.expandIconPosition, 'end')\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.collapse.empty', 'Nothing here yet'))\n\n/**\n * Пустоту считает общий разборщик слота: `v-for` приходит фрагментом, `v-if`\n * оставляет после себя комментарий, а шаблон — переносы строк, и всё это не\n * содержимое.\n */\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst activeSet = computed(() => {\n const value = props.modelValue\n\n if (props.accordion) {\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n }\n\n if (Array.isArray(value)) {\n return new Set<GrCollapseValue>(value)\n }\n\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n})\n\nfunction setModelValue(next: GrCollapseModelValue): void {\n emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction applyToggle(name: GrCollapseValue): void {\n if (props.accordion) {\n const next = activeSet.value.has(name) ? undefined : name\n setModelValue(next)\n return\n }\n\n const current = Array.isArray(props.modelValue)\n ? [...props.modelValue]\n : typeof props.modelValue === 'string' || typeof props.modelValue === 'number'\n ? [props.modelValue]\n : []\n\n const exists = current.includes(name)\n const next = exists\n ? current.filter(x => x !== name)\n : [...current, name]\n\n setModelValue(next)\n}\n\n// Секции, у которых guard ещё не ответил. Без этого повторный клик по заголовку\n// уходил бы во второй `beforeChange`, и после двух «да» состояние переключилось\n// бы дважды — то есть вернулось бы к исходному.\nconst awaitingGuard = new Set<GrCollapseValue>()\n\nasync function toggle(name: GrCollapseValue): Promise<void> {\n if (props.disabled || awaitingGuard.has(name))\n return\n\n if (!props.beforeChange) {\n applyToggle(name)\n return\n }\n\n awaitingGuard.add(name)\n try {\n if (await props.beforeChange(name, !activeSet.value.has(name)) === false)\n return\n\n applyToggle(name)\n }\n finally {\n awaitingGuard.delete(name)\n }\n}\n\nconst context: GrCollapseContext = {\n accordion: computed(() => props.accordion),\n disabled: computed(() => props.disabled),\n size: resolvedSize,\n headingLevel,\n expandIconPosition,\n isActive: name => activeSet.value.has(name),\n toggle: (name) => { void toggle(name) },\n}\n\nprovide(GR_COLLAPSE_CONTEXT, context)\n</script>\n\n<template>\n <GrCard v-if=\"!borderless\" data-gr-collapse>\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div v-else :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\">\n <slot />\n </div>\n </GrCard>\n\n <!-- Разделители остаются на корне: без обёртки в карточку он и есть список\n секций, и лишний уровень вложенности сдвинул бы вёрстку потребителя. -->\n <div\n v-else\n data-gr-collapse\n :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\"\n >\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <slot v-else />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, useSlots } from 'vue'\n\nimport GrCard from '../GrCard'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { grCollapseEmptyClass } from './grCollapseStyles'\n\nimport {\n GR_COLLAPSE_CONTEXT,\n type GrCollapseBeforeChange,\n type GrCollapseContext,\n type GrCollapseHeadingLevel,\n type GrCollapseIconPosition,\n type GrCollapseModelValue,\n type GrCollapseValue,\n} from './grCollapseContext'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport './defaults'\n\n/**\n * GrCollapse — контейнер секций `GrCollapseItem`.\n *\n * @prop modelValue — открытые секции. В `accordion`-режиме — `string|number|undefined`, иначе — массив значений.\n * @prop accordion — режим, когда одновременно может быть открыта только одна секция.\n * @prop disabled — блокирует взаимодействие со всеми секциями.\n * @prop divided — разделители между секциями.\n * @prop borderless — без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара\n * иначе получает вторую рамку и вторую тень.\n * @prop beforeChange — async-guard: `false` отменяет переключение.\n */\nexport interface GrCollapseProps {\n modelValue?: GrCollapseModelValue\n accordion?: boolean\n disabled?: boolean\n divided?: boolean\n borderless?: boolean\n /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */\n headingLevel?: GrCollapseHeadingLevel\n /** Сторона шеврона относительно заголовка. */\n expandIconPosition?: GrCollapseIconPosition\n beforeChange?: GrCollapseBeforeChange\n /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */\n size?: GrComponentSize\n /**\n * Пусто ли. Не задан — считается по содержимому: аккордеон без секций\n * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —\n * например, когда секции приезжают асинхронно и мигать текстом не надо.\n */\n empty?: boolean\n /** Текст пустого состояния. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrCollapseEmits {\n (e: 'update:modelValue', value: GrCollapseModelValue): void\n (e: 'change', value: GrCollapseModelValue): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный пользователем\n// проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrCollapseProps>(), {\n modelValue: undefined,\n accordion: false,\n disabled: false,\n divided: undefined,\n borderless: undefined,\n headingLevel: undefined,\n expandIconPosition: undefined,\n beforeChange: undefined,\n size: undefined,\n empty: undefined,\n emptyText: undefined,\n})\n\nconst emit = defineEmits<GrCollapseEmits>()\n\ndefineSlots<{\n /** Секции аккордеона (`GrCollapseItem`). */\n default?: () => any\n /** Содержимое пустого состояния вместо текста по умолчанию. */\n empty?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCollapse' })\nconst divided = useGrComponentProp('GrCollapse', 'divided', () => props.divided, true)\nconst borderless = useGrComponentProp('GrCollapse', 'borderless', () => props.borderless, false)\nconst headingLevel = useGrComponentProp('GrCollapse', 'headingLevel', () => props.headingLevel, 3)\nconst expandIconPosition = useGrComponentProp('GrCollapse', 'expandIconPosition', () => props.expandIconPosition, 'end')\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.collapse.empty', 'Nothing here yet'))\n\n/**\n * Пустоту считает общий разборщик слота: `v-for` приходит фрагментом, `v-if`\n * оставляет после себя комментарий, а шаблон — переносы строк, и всё это не\n * содержимое.\n */\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst activeSet = computed(() => {\n const value = props.modelValue\n\n if (props.accordion) {\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n }\n\n if (Array.isArray(value)) {\n return new Set<GrCollapseValue>(value)\n }\n\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n})\n\nfunction setModelValue(next: GrCollapseModelValue): void {\n emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction applyToggle(name: GrCollapseValue): void {\n if (props.accordion) {\n const next = activeSet.value.has(name) ? undefined : name\n setModelValue(next)\n return\n }\n\n const current = Array.isArray(props.modelValue)\n ? [...props.modelValue]\n : typeof props.modelValue === 'string' || typeof props.modelValue === 'number'\n ? [props.modelValue]\n : []\n\n const exists = current.includes(name)\n const next = exists\n ? current.filter(x => x !== name)\n : [...current, name]\n\n setModelValue(next)\n}\n\n// Секции, у которых guard ещё не ответил. Без этого повторный клик по заголовку\n// уходил бы во второй `beforeChange`, и после двух «да» состояние переключилось\n// бы дважды — то есть вернулось бы к исходному.\nconst awaitingGuard = new Set<GrCollapseValue>()\n\nasync function toggle(name: GrCollapseValue): Promise<void> {\n if (props.disabled || awaitingGuard.has(name))\n return\n\n if (!props.beforeChange) {\n applyToggle(name)\n return\n }\n\n awaitingGuard.add(name)\n try {\n if (await props.beforeChange(name, !activeSet.value.has(name)) === false)\n return\n\n applyToggle(name)\n }\n finally {\n awaitingGuard.delete(name)\n }\n}\n\nconst context: GrCollapseContext = {\n accordion: computed(() => props.accordion),\n disabled: computed(() => props.disabled),\n size: resolvedSize,\n headingLevel,\n expandIconPosition,\n isActive: name => activeSet.value.has(name),\n toggle: (name) => { void toggle(name) },\n}\n\nprovide(GR_COLLAPSE_CONTEXT, context)\n</script>\n\n<template>\n <GrCard v-if=\"!borderless\" data-gr-collapse>\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div v-else :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\">\n <slot />\n </div>\n </GrCard>\n\n <!-- Разделители остаются на корне: без обёртки в карточку он и есть список\n секций, и лишний уровень вложенности сдвинул бы вёрстку потребителя. -->\n <div\n v-else\n data-gr-collapse\n :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\"\n >\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <slot v-else />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ChevronDownIcon from '~icons/lucide/chevron-down'\nimport { computed, inject, ref, useId } from 'vue'\n\nimport GrIcon from '../GrIcon'\n\nimport { GR_COLLAPSE_CONTEXT, type GrCollapseValue } from './grCollapseContext'\nimport {\n collapseChevronSizes,\n collapseExtraPaddings,\n grCollapseBodyClass,\n grCollapseChevronClass,\n grCollapseHeaderClass,\n grCollapseRowClass,\n grCollapseTitleClass,\n} from './grCollapseStyles'\n\n/**\n * GrCollapseItem — одна секция `GrCollapse`. Должна использоваться строго внутри `GrCollapse`.\n *\n * @prop name — уникальный идентификатор секции (для `v-model` у `GrCollapse`); по умолчанию генерируется из `uid`.\n * @prop title — текст заголовка; можно заменить слотом `#title`.\n * @prop disabled — запрещает раскрытие/сворачивание секции.\n *\n * Слот `#extra` (счётчик, бейдж, кнопка) рендерится **рядом с** триггером, а не\n * внутри него: `<button>` внутри `<button>` — невалидная разметка, а axe ловит\n * это как `nested-interactive`.\n */\nexport interface GrCollapseItemProps {\n name?: GrCollapseValue\n title?: string\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GrCollapseItemProps>(), {\n name: undefined,\n title: undefined,\n disabled: false,\n})\n\nconst collapse = inject(GR_COLLAPSE_CONTEXT)\n\nif (!collapse) {\n throw new Error('GrCollapseItem must be used inside GrCollapse')\n}\n\nconst collapseContext = collapse\n\nconst uid = useId()\n\nconst resolvedName = computed<GrCollapseValue>(() => {\n if (typeof props.name === 'string' || typeof props.name === 'number')\n return props.name\n\n return uid\n})\n\nconst resolvedDisabled = computed(() => collapseContext.disabled.value || props.disabled)\nconst expanded = computed(() => collapseContext.isActive(resolvedName.value))\n\nconst headingTag = computed(() => `h${collapseContext.headingLevel.value}`)\nconst iconAtStart = computed(() => collapseContext.expandIconPosition.value === 'start')\n\nconst rowClassName = computed(() => grCollapseRowClass(resolvedDisabled.value))\nconst headerClassName = computed(() => grCollapseHeaderClass({\n size: collapseContext.size.value,\n disabled: resolvedDisabled.value,\n}))\nconst extraClassName = computed(() => collapseExtraPaddings[collapseContext.size.value])\nconst titleClassName = computed(() => grCollapseTitleClass(collapseContext.size.value))\nconst bodyClassName = computed(() => grCollapseBodyClass(collapseContext.size.value))\nconst chevronClassName = computed(() => grCollapseChevronClass(expanded.value))\nconst chevronSize = computed(() => collapseChevronSizes[collapseContext.size.value])\n\n// Свёрнутая панель схлопывается визуально (`grid-rows-[0fr]`), но это не\n// скрытие: без `inert` ссылки и кнопки внутри неё ловятся Tab'ом, фокус уезжает\n// в невидимую область нулевой высоты, а скринридер читает содержимое всех\n// закрытых секций подряд — прямо вопреки `aria-expanded=\"false\"` на триггере.\n// `inert` убирает поддерево и из таб-порядка, и из дерева доступности, при этом\n// (в отличие от `hidden`/`display:none`) не ломает анимацию раскрытия.\nconst headerId = `gr-collapse-header-${uid}`\nconst panelId = `gr-collapse-panel-${uid}`\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction onToggle(): void {\n if (resolvedDisabled.value)\n return\n\n collapseContext.toggle(resolvedName.value)\n}\n\n/**\n * Только заголовки **своего** аккордеона: вложенный `GrCollapse` внутри\n * раскрытой панели тоже помечен `[data-gr-collapse]`, и без фильтра стрелки\n * внешнего аккордеона перескакивали бы на заголовки внутреннего.\n */\nfunction getAllTriggers(): HTMLElement[] {\n const root = triggerEl.value?.closest('[data-gr-collapse]')\n if (!root)\n return []\n\n const triggers = Array.prototype.slice.call(\n root.querySelectorAll<HTMLElement>('[data-gr-collapse-trigger]'),\n ) as HTMLElement[]\n\n return triggers.filter(trigger => trigger.closest('[data-gr-collapse]') === root)\n}\n\nfunction focusRelative(direction: 1 | -1): void {\n const current = triggerEl.value\n if (!current)\n return\n\n const triggers = getAllTriggers()\n const index = triggers.indexOf(current)\n if (index === -1 || triggers.length === 0)\n return\n\n const nextIndex = (index + direction + triggers.length) % triggers.length\n triggers[nextIndex]?.focus()\n}\n\nfunction focusEdge(edge: 'start' | 'end'): void {\n const triggers = getAllTriggers()\n if (triggers.length === 0)\n return\n\n ;(edge === 'start' ? triggers[0] : triggers.at(-1))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n focusRelative(1)\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n focusRelative(-1)\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n focusEdge('start')\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n focusEdge('end')\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n onToggle()\n }\n}\n\ndefineSlots<{\n /** Содержимое секции. */\n default?: () => any\n /** Заголовок секции вместо пропа `title`. */\n title?: () => any\n /** Иконка-указатель вместо шеврона. */\n icon?: () => any\n /** Управление справа в заголовке: счётчик, переключатель, кнопка. */\n extra?: () => any\n}>()\n\n</script>\n\n<template>\n <div\n data-gr-collapse-item\n class=\"text-[var(--gr-fg)]\"\n >\n <div :class=\"rowClassName\">\n <component\n :is=\"headingTag\"\n class=\"m-0 min-w-0 flex-1\"\n >\n <button\n :id=\"headerId\"\n ref=\"triggerEl\"\n data-gr-collapse-trigger\n type=\"button\"\n :aria-expanded=\"expanded ? 'true' : 'false'\"\n :aria-controls=\"panelId\"\n :disabled=\"resolvedDisabled\"\n :class=\"headerClassName\"\n @click=\"onToggle\"\n @keydown=\"onKeydown\"\n >\n <GrIcon\n v-if=\"iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n\n <span :class=\"titleClassName\">\n <slot name=\"title\">\n <span class=\"font-600\">\n {{ title }}\n </span>\n </slot>\n </span>\n\n <GrIcon\n v-if=\"!iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n </button>\n </component>\n\n <div\n v-if=\"$slots.extra\"\n data-gr-collapse-extra\n class=\"shrink-0\"\n :class=\"extraClassName\"\n >\n <slot name=\"extra\" />\n </div>\n </div>\n\n <div\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"headerId\"\n :inert=\"expanded ? undefined : true\"\n class=\"grid transition-[grid-template-rows] duration-[var(--gr-duration-base)]\"\n :class=\"expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\"\n >\n <div class=\"overflow-hidden\">\n <div :class=\"bodyClassName\">\n <slot />\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ChevronDownIcon from '~icons/lucide/chevron-down'\nimport { computed, inject, ref, useId } from 'vue'\n\nimport GrIcon from '../GrIcon'\n\nimport { GR_COLLAPSE_CONTEXT, type GrCollapseValue } from './grCollapseContext'\nimport {\n collapseChevronSizes,\n collapseExtraPaddings,\n grCollapseBodyClass,\n grCollapseChevronClass,\n grCollapseHeaderClass,\n grCollapseRowClass,\n grCollapseTitleClass,\n} from './grCollapseStyles'\n\n/**\n * GrCollapseItem — одна секция `GrCollapse`. Должна использоваться строго внутри `GrCollapse`.\n *\n * @prop name — уникальный идентификатор секции (для `v-model` у `GrCollapse`); по умолчанию генерируется из `uid`.\n * @prop title — текст заголовка; можно заменить слотом `#title`.\n * @prop disabled — запрещает раскрытие/сворачивание секции.\n *\n * Слот `#extra` (счётчик, бейдж, кнопка) рендерится **рядом с** триггером, а не\n * внутри него: `<button>` внутри `<button>` — невалидная разметка, а axe ловит\n * это как `nested-interactive`.\n */\nexport interface GrCollapseItemProps {\n name?: GrCollapseValue\n title?: string\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GrCollapseItemProps>(), {\n name: undefined,\n title: undefined,\n disabled: false,\n})\n\nconst collapse = inject(GR_COLLAPSE_CONTEXT)\n\nif (!collapse) {\n throw new Error('GrCollapseItem must be used inside GrCollapse')\n}\n\nconst collapseContext = collapse\n\nconst uid = useId()\n\nconst resolvedName = computed<GrCollapseValue>(() => {\n if (typeof props.name === 'string' || typeof props.name === 'number')\n return props.name\n\n return uid\n})\n\nconst resolvedDisabled = computed(() => collapseContext.disabled.value || props.disabled)\nconst expanded = computed(() => collapseContext.isActive(resolvedName.value))\n\nconst headingTag = computed(() => `h${collapseContext.headingLevel.value}`)\nconst iconAtStart = computed(() => collapseContext.expandIconPosition.value === 'start')\n\nconst rowClassName = computed(() => grCollapseRowClass(resolvedDisabled.value))\nconst headerClassName = computed(() => grCollapseHeaderClass({\n size: collapseContext.size.value,\n disabled: resolvedDisabled.value,\n}))\nconst extraClassName = computed(() => collapseExtraPaddings[collapseContext.size.value])\nconst titleClassName = computed(() => grCollapseTitleClass(collapseContext.size.value))\nconst bodyClassName = computed(() => grCollapseBodyClass(collapseContext.size.value))\nconst chevronClassName = computed(() => grCollapseChevronClass(expanded.value))\nconst chevronSize = computed(() => collapseChevronSizes[collapseContext.size.value])\n\n// Свёрнутая панель схлопывается визуально (`grid-rows-[0fr]`), но это не\n// скрытие: без `inert` ссылки и кнопки внутри неё ловятся Tab'ом, фокус уезжает\n// в невидимую область нулевой высоты, а скринридер читает содержимое всех\n// закрытых секций подряд — прямо вопреки `aria-expanded=\"false\"` на триггере.\n// `inert` убирает поддерево и из таб-порядка, и из дерева доступности, при этом\n// (в отличие от `hidden`/`display:none`) не ломает анимацию раскрытия.\nconst headerId = `gr-collapse-header-${uid}`\nconst panelId = `gr-collapse-panel-${uid}`\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction onToggle(): void {\n if (resolvedDisabled.value)\n return\n\n collapseContext.toggle(resolvedName.value)\n}\n\n/**\n * Только заголовки **своего** аккордеона: вложенный `GrCollapse` внутри\n * раскрытой панели тоже помечен `[data-gr-collapse]`, и без фильтра стрелки\n * внешнего аккордеона перескакивали бы на заголовки внутреннего.\n */\nfunction getAllTriggers(): HTMLElement[] {\n const root = triggerEl.value?.closest('[data-gr-collapse]')\n if (!root)\n return []\n\n const triggers = Array.prototype.slice.call(\n root.querySelectorAll<HTMLElement>('[data-gr-collapse-trigger]'),\n ) as HTMLElement[]\n\n return triggers.filter(trigger => trigger.closest('[data-gr-collapse]') === root)\n}\n\nfunction focusRelative(direction: 1 | -1): void {\n const current = triggerEl.value\n if (!current)\n return\n\n const triggers = getAllTriggers()\n const index = triggers.indexOf(current)\n if (index === -1 || triggers.length === 0)\n return\n\n const nextIndex = (index + direction + triggers.length) % triggers.length\n triggers[nextIndex]?.focus()\n}\n\nfunction focusEdge(edge: 'start' | 'end'): void {\n const triggers = getAllTriggers()\n if (triggers.length === 0)\n return\n\n ;(edge === 'start' ? triggers[0] : triggers.at(-1))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n focusRelative(1)\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n focusRelative(-1)\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n focusEdge('start')\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n focusEdge('end')\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n onToggle()\n }\n}\n\ndefineSlots<{\n /** Содержимое секции. */\n default?: () => any\n /** Заголовок секции вместо пропа `title`. */\n title?: () => any\n /** Иконка-указатель вместо шеврона. */\n icon?: () => any\n /** Управление справа в заголовке: счётчик, переключатель, кнопка. */\n extra?: () => any\n}>()\n\n</script>\n\n<template>\n <div\n data-gr-collapse-item\n class=\"text-[var(--gr-fg)]\"\n >\n <div :class=\"rowClassName\">\n <component\n :is=\"headingTag\"\n class=\"m-0 min-w-0 flex-1\"\n >\n <button\n :id=\"headerId\"\n ref=\"triggerEl\"\n data-gr-collapse-trigger\n type=\"button\"\n :aria-expanded=\"expanded ? 'true' : 'false'\"\n :aria-controls=\"panelId\"\n :disabled=\"resolvedDisabled\"\n :class=\"headerClassName\"\n @click=\"onToggle\"\n @keydown=\"onKeydown\"\n >\n <GrIcon\n v-if=\"iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n\n <span :class=\"titleClassName\">\n <slot name=\"title\">\n <span class=\"font-600\">\n {{ title }}\n </span>\n </slot>\n </span>\n\n <GrIcon\n v-if=\"!iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n </button>\n </component>\n\n <div\n v-if=\"$slots.extra\"\n data-gr-collapse-extra\n class=\"shrink-0\"\n :class=\"extraClassName\"\n >\n <slot name=\"extra\" />\n </div>\n </div>\n\n <div\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"headerId\"\n :inert=\"expanded ? undefined : true\"\n class=\"grid transition-[grid-template-rows] duration-[var(--gr-duration-base)]\"\n :class=\"expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\"\n >\n <div class=\"overflow-hidden\">\n <div :class=\"bodyClassName\">\n <slot />\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrCollapse-BlW6ybdL.js","names":["$slots"],"sources":["../../../../src/components/GrCollapse/grCollapseContext.ts","../../../../src/components/GrCollapse/GrCollapse.vue","../../../../src/components/GrCollapse/GrCollapse.vue","../../../../src/components/GrCollapse/GrCollapseItem.vue","../../../../src/components/GrCollapse/GrCollapseItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrCollapseValue = string | number\n\nexport type GrCollapseModelValue = GrCollapseValue | GrCollapseValue[] | undefined\n\n/**\n * Уровень заголовка секции. APG для accordion требует, чтобы он соответствовал\n * структуре страницы: аккордеон в разделе `<h4>` с захардкоженным `<h3>` рвёт\n * навигацию по заголовкам.\n */\nexport const GR_COLLAPSE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrCollapseHeadingLevel = typeof GR_COLLAPSE_HEADING_LEVELS[number]\n\n/** Сторона шеврона относительно заголовка — логическая, не физическая (RTL). */\nexport const GR_COLLAPSE_ICON_POSITIONS = ['start', 'end'] as const\n\nexport type GrCollapseIconPosition = typeof GR_COLLAPSE_ICON_POSITIONS[number]\n\n/**\n * Async-guard на переключение секции: `false` отменяет его. Второй аргумент —\n * куда идёт секция (`true` — раскрывается), чтобы «сохранить изменения?»\n * спрашивалось только на сворачивании.\n */\nexport type GrCollapseBeforeChange = (\n name: GrCollapseValue,\n expanding: boolean,\n) => boolean | void | Promise<boolean | void>\n\nexport type GrCollapseContext = {\n accordion: ComputedRef<boolean>\n disabled: ComputedRef<boolean>\n size: ComputedRef<GrComponentSize>\n headingLevel: ComputedRef<GrCollapseHeadingLevel>\n expandIconPosition: ComputedRef<GrCollapseIconPosition>\n isActive: (name: GrCollapseValue) => boolean\n toggle: (name: GrCollapseValue) => void\n}\n\nexport const GR_COLLAPSE_CONTEXT: InjectionKey<GrCollapseContext> = Symbol('GR_COLLAPSE_CONTEXT')\n","<script setup lang=\"ts\">\nimport { computed, provide, useSlots } from 'vue'\n\nimport GrCard from '../GrCard'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { grCollapseEmptyClass } from './grCollapseStyles'\n\nimport {\n GR_COLLAPSE_CONTEXT,\n type GrCollapseBeforeChange,\n type GrCollapseContext,\n type GrCollapseHeadingLevel,\n type GrCollapseIconPosition,\n type GrCollapseModelValue,\n type GrCollapseValue,\n} from './grCollapseContext'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport './defaults'\n\n/**\n * GrCollapse — контейнер секций `GrCollapseItem`.\n *\n * @prop modelValue — открытые секции. В `accordion`-режиме — `string|number|undefined`, иначе — массив значений.\n * @prop accordion — режим, когда одновременно может быть открыта только одна секция.\n * @prop disabled — блокирует взаимодействие со всеми секциями.\n * @prop divided — разделители между секциями.\n * @prop borderless — без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара\n * иначе получает вторую рамку и вторую тень.\n * @prop beforeChange — async-guard: `false` отменяет переключение.\n */\nexport interface GrCollapseProps {\n modelValue?: GrCollapseModelValue\n accordion?: boolean\n disabled?: boolean\n divided?: boolean\n borderless?: boolean\n /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */\n headingLevel?: GrCollapseHeadingLevel\n /** Сторона шеврона относительно заголовка. */\n expandIconPosition?: GrCollapseIconPosition\n beforeChange?: GrCollapseBeforeChange\n /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */\n size?: GrComponentSize\n /**\n * Пусто ли. Не задан — считается по содержимому: аккордеон без секций\n * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —\n * например, когда секции приезжают асинхронно и мигать текстом не надо.\n */\n empty?: boolean\n /** Текст пустого состояния. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrCollapseEmits {\n (e: 'update:modelValue', value: GrCollapseModelValue): void\n (e: 'change', value: GrCollapseModelValue): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный пользователем\n// проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrCollapseProps>(), {\n modelValue: undefined,\n accordion: false,\n disabled: false,\n divided: undefined,\n borderless: undefined,\n headingLevel: undefined,\n expandIconPosition: undefined,\n beforeChange: undefined,\n size: undefined,\n empty: undefined,\n emptyText: undefined,\n})\n\nconst emit = defineEmits<GrCollapseEmits>()\n\ndefineSlots<{\n /** Секции аккордеона (`GrCollapseItem`). */\n default?: () => any\n /** Содержимое пустого состояния вместо текста по умолчанию. */\n empty?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCollapse' })\nconst divided = useGrComponentProp('GrCollapse', 'divided', () => props.divided, true)\nconst borderless = useGrComponentProp('GrCollapse', 'borderless', () => props.borderless, false)\nconst headingLevel = useGrComponentProp('GrCollapse', 'headingLevel', () => props.headingLevel, 3)\nconst expandIconPosition = useGrComponentProp('GrCollapse', 'expandIconPosition', () => props.expandIconPosition, 'end')\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.collapse.empty', 'Nothing here yet'))\n\n/**\n * Пустоту считает общий разборщик слота: `v-for` приходит фрагментом, `v-if`\n * оставляет после себя комментарий, а шаблон — переносы строк, и всё это не\n * содержимое.\n */\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst activeSet = computed(() => {\n const value = props.modelValue\n\n if (props.accordion) {\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n }\n\n if (Array.isArray(value)) {\n return new Set<GrCollapseValue>(value)\n }\n\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n})\n\nfunction setModelValue(next: GrCollapseModelValue): void {\n emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction applyToggle(name: GrCollapseValue): void {\n if (props.accordion) {\n const next = activeSet.value.has(name) ? undefined : name\n setModelValue(next)\n return\n }\n\n const current = Array.isArray(props.modelValue)\n ? [...props.modelValue]\n : typeof props.modelValue === 'string' || typeof props.modelValue === 'number'\n ? [props.modelValue]\n : []\n\n const exists = current.includes(name)\n const next = exists\n ? current.filter(x => x !== name)\n : [...current, name]\n\n setModelValue(next)\n}\n\n// Секции, у которых guard ещё не ответил. Без этого повторный клик по заголовку\n// уходил бы во второй `beforeChange`, и после двух «да» состояние переключилось\n// бы дважды — то есть вернулось бы к исходному.\nconst awaitingGuard = new Set<GrCollapseValue>()\n\nasync function toggle(name: GrCollapseValue): Promise<void> {\n if (props.disabled || awaitingGuard.has(name))\n return\n\n if (!props.beforeChange) {\n applyToggle(name)\n return\n }\n\n awaitingGuard.add(name)\n try {\n if (await props.beforeChange(name, !activeSet.value.has(name)) === false)\n return\n\n applyToggle(name)\n }\n finally {\n awaitingGuard.delete(name)\n }\n}\n\nconst context: GrCollapseContext = {\n accordion: computed(() => props.accordion),\n disabled: computed(() => props.disabled),\n size: resolvedSize,\n headingLevel,\n expandIconPosition,\n isActive: name => activeSet.value.has(name),\n toggle: (name) => { void toggle(name) },\n}\n\nprovide(GR_COLLAPSE_CONTEXT, context)\n</script>\n\n<template>\n <GrCard v-if=\"!borderless\" data-gr-collapse>\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div v-else :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\">\n <slot />\n </div>\n </GrCard>\n\n <!-- Разделители остаются на корне: без обёртки в карточку он и есть список\n секций, и лишний уровень вложенности сдвинул бы вёрстку потребителя. -->\n <div\n v-else\n data-gr-collapse\n :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\"\n >\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <slot v-else />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide, useSlots } from 'vue'\n\nimport GrCard from '../GrCard'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { grCollapseEmptyClass } from './grCollapseStyles'\n\nimport {\n GR_COLLAPSE_CONTEXT,\n type GrCollapseBeforeChange,\n type GrCollapseContext,\n type GrCollapseHeadingLevel,\n type GrCollapseIconPosition,\n type GrCollapseModelValue,\n type GrCollapseValue,\n} from './grCollapseContext'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nimport './defaults'\n\n/**\n * GrCollapse — контейнер секций `GrCollapseItem`.\n *\n * @prop modelValue — открытые секции. В `accordion`-режиме — `string|number|undefined`, иначе — массив значений.\n * @prop accordion — режим, когда одновременно может быть открыта только одна секция.\n * @prop disabled — блокирует взаимодействие со всеми секциями.\n * @prop divided — разделители между секциями.\n * @prop borderless — без обёртки в `GrCard`: аккордеон внутри карточки или сайдбара\n * иначе получает вторую рамку и вторую тень.\n * @prop beforeChange — async-guard: `false` отменяет переключение.\n */\nexport interface GrCollapseProps {\n modelValue?: GrCollapseModelValue\n accordion?: boolean\n disabled?: boolean\n divided?: boolean\n borderless?: boolean\n /** Уровень заголовков секций (`h2`…`h6`) — под структуру страницы. */\n headingLevel?: GrCollapseHeadingLevel\n /** Сторона шеврона относительно заголовка. */\n expandIconPosition?: GrCollapseIconPosition\n beforeChange?: GrCollapseBeforeChange\n /** Размер секций. Не задан — берётся из `GrConfigProvider`, иначе `md`. */\n size?: GrComponentSize\n /**\n * Пусто ли. Не задан — считается по содержимому: аккордеон без секций\n * показывает заглушку вместо пустой рамки. `false` подавляет автоопределение —\n * например, когда секции приезжают асинхронно и мигать текстом не надо.\n */\n empty?: boolean\n /** Текст пустого состояния. Слот `#empty` сильнее. */\n emptyText?: string\n}\n\nexport interface GrCollapseEmits {\n (e: 'update:modelValue', value: GrCollapseModelValue): void\n (e: 'change', value: GrCollapseModelValue): void\n}\n\n// Дефолты оформления намеренно `undefined`: «настоящий» дефолт живёт в\n// `useGrComponentProp`, иначе `GrConfigProvider` не отличит заданный пользователем\n// проп от подставленного Vue.\nconst props = withDefaults(defineProps<GrCollapseProps>(), {\n modelValue: undefined,\n accordion: false,\n disabled: false,\n divided: undefined,\n borderless: undefined,\n headingLevel: undefined,\n expandIconPosition: undefined,\n beforeChange: undefined,\n size: undefined,\n empty: undefined,\n emptyText: undefined,\n})\n\nconst emit = defineEmits<GrCollapseEmits>()\n\ndefineSlots<{\n /** Секции аккордеона (`GrCollapseItem`). */\n default?: () => any\n /** Содержимое пустого состояния вместо текста по умолчанию. */\n empty?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCollapse' })\nconst divided = useGrComponentProp('GrCollapse', 'divided', () => props.divided, true)\nconst borderless = useGrComponentProp('GrCollapse', 'borderless', () => props.borderless, false)\nconst headingLevel = useGrComponentProp('GrCollapse', 'headingLevel', () => props.headingLevel, 3)\nconst expandIconPosition = useGrComponentProp('GrCollapse', 'expandIconPosition', () => props.expandIconPosition, 'end')\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.collapse.empty', 'Nothing here yet'))\n\n/**\n * Пустоту считает общий разборщик слота: `v-for` приходит фрагментом, `v-if`\n * оставляет после себя комментарий, а шаблон — переносы строк, и всё это не\n * содержимое.\n */\nconst isEmpty = computed(() => {\n if (props.empty !== undefined) return props.empty\n\n return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst activeSet = computed(() => {\n const value = props.modelValue\n\n if (props.accordion) {\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n }\n\n if (Array.isArray(value)) {\n return new Set<GrCollapseValue>(value)\n }\n\n if (typeof value === 'string' || typeof value === 'number') {\n return new Set<GrCollapseValue>([value])\n }\n\n return new Set<GrCollapseValue>()\n})\n\nfunction setModelValue(next: GrCollapseModelValue): void {\n emit('update:modelValue', next)\n emit('change', next)\n}\n\nfunction applyToggle(name: GrCollapseValue): void {\n if (props.accordion) {\n const next = activeSet.value.has(name) ? undefined : name\n setModelValue(next)\n return\n }\n\n const current = Array.isArray(props.modelValue)\n ? [...props.modelValue]\n : typeof props.modelValue === 'string' || typeof props.modelValue === 'number'\n ? [props.modelValue]\n : []\n\n const exists = current.includes(name)\n const next = exists\n ? current.filter(x => x !== name)\n : [...current, name]\n\n setModelValue(next)\n}\n\n// Секции, у которых guard ещё не ответил. Без этого повторный клик по заголовку\n// уходил бы во второй `beforeChange`, и после двух «да» состояние переключилось\n// бы дважды — то есть вернулось бы к исходному.\nconst awaitingGuard = new Set<GrCollapseValue>()\n\nasync function toggle(name: GrCollapseValue): Promise<void> {\n if (props.disabled || awaitingGuard.has(name))\n return\n\n if (!props.beforeChange) {\n applyToggle(name)\n return\n }\n\n awaitingGuard.add(name)\n try {\n if (await props.beforeChange(name, !activeSet.value.has(name)) === false)\n return\n\n applyToggle(name)\n }\n finally {\n awaitingGuard.delete(name)\n }\n}\n\nconst context: GrCollapseContext = {\n accordion: computed(() => props.accordion),\n disabled: computed(() => props.disabled),\n size: resolvedSize,\n headingLevel,\n expandIconPosition,\n isActive: name => activeSet.value.has(name),\n toggle: (name) => { void toggle(name) },\n}\n\nprovide(GR_COLLAPSE_CONTEXT, context)\n</script>\n\n<template>\n <GrCard v-if=\"!borderless\" data-gr-collapse>\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <div v-else :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\">\n <slot />\n </div>\n </GrCard>\n\n <!-- Разделители остаются на корне: без обёртки в карточку он и есть список\n секций, и лишний уровень вложенности сдвинул бы вёрстку потребителя. -->\n <div\n v-else\n data-gr-collapse\n :class=\"divided ? 'divide-y divide-[var(--gr-brd)]' : ''\"\n >\n <div\n v-if=\"isEmpty\"\n data-gr-collapse-empty\n :class=\"grCollapseEmptyClass(resolvedSize)\"\n >\n <slot name=\"empty\">\n {{ resolvedEmptyText }}\n </slot>\n </div>\n\n <slot v-else />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ChevronDownIcon from '~icons/lucide/chevron-down'\nimport { computed, inject, ref, useId } from 'vue'\n\nimport GrIcon from '../GrIcon'\n\nimport { GR_COLLAPSE_CONTEXT, type GrCollapseValue } from './grCollapseContext'\nimport {\n collapseChevronSizes,\n collapseExtraPaddings,\n grCollapseBodyClass,\n grCollapseChevronClass,\n grCollapseHeaderClass,\n grCollapseRowClass,\n grCollapseTitleClass,\n} from './grCollapseStyles'\n\n/**\n * GrCollapseItem — одна секция `GrCollapse`. Должна использоваться строго внутри `GrCollapse`.\n *\n * @prop name — уникальный идентификатор секции (для `v-model` у `GrCollapse`); по умолчанию генерируется из `uid`.\n * @prop title — текст заголовка; можно заменить слотом `#title`.\n * @prop disabled — запрещает раскрытие/сворачивание секции.\n *\n * Слот `#extra` (счётчик, бейдж, кнопка) рендерится **рядом с** триггером, а не\n * внутри него: `<button>` внутри `<button>` — невалидная разметка, а axe ловит\n * это как `nested-interactive`.\n */\nexport interface GrCollapseItemProps {\n name?: GrCollapseValue\n title?: string\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GrCollapseItemProps>(), {\n name: undefined,\n title: undefined,\n disabled: false,\n})\n\nconst collapse = inject(GR_COLLAPSE_CONTEXT)\n\nif (!collapse) {\n throw new Error('GrCollapseItem must be used inside GrCollapse')\n}\n\nconst collapseContext = collapse\n\nconst uid = useId()\n\nconst resolvedName = computed<GrCollapseValue>(() => {\n if (typeof props.name === 'string' || typeof props.name === 'number')\n return props.name\n\n return uid\n})\n\nconst resolvedDisabled = computed(() => collapseContext.disabled.value || props.disabled)\nconst expanded = computed(() => collapseContext.isActive(resolvedName.value))\n\nconst headingTag = computed(() => `h${collapseContext.headingLevel.value}`)\nconst iconAtStart = computed(() => collapseContext.expandIconPosition.value === 'start')\n\nconst rowClassName = computed(() => grCollapseRowClass(resolvedDisabled.value))\nconst headerClassName = computed(() => grCollapseHeaderClass({\n size: collapseContext.size.value,\n disabled: resolvedDisabled.value,\n}))\nconst extraClassName = computed(() => collapseExtraPaddings[collapseContext.size.value])\nconst titleClassName = computed(() => grCollapseTitleClass(collapseContext.size.value))\nconst bodyClassName = computed(() => grCollapseBodyClass(collapseContext.size.value))\nconst chevronClassName = computed(() => grCollapseChevronClass(expanded.value))\nconst chevronSize = computed(() => collapseChevronSizes[collapseContext.size.value])\n\n// Свёрнутая панель схлопывается визуально (`grid-rows-[0fr]`), но это не\n// скрытие: без `inert` ссылки и кнопки внутри неё ловятся Tab'ом, фокус уезжает\n// в невидимую область нулевой высоты, а скринридер читает содержимое всех\n// закрытых секций подряд — прямо вопреки `aria-expanded=\"false\"` на триггере.\n// `inert` убирает поддерево и из таб-порядка, и из дерева доступности, при этом\n// (в отличие от `hidden`/`display:none`) не ломает анимацию раскрытия.\nconst headerId = `gr-collapse-header-${uid}`\nconst panelId = `gr-collapse-panel-${uid}`\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction onToggle(): void {\n if (resolvedDisabled.value)\n return\n\n collapseContext.toggle(resolvedName.value)\n}\n\n/**\n * Только заголовки **своего** аккордеона: вложенный `GrCollapse` внутри\n * раскрытой панели тоже помечен `[data-gr-collapse]`, и без фильтра стрелки\n * внешнего аккордеона перескакивали бы на заголовки внутреннего.\n */\nfunction getAllTriggers(): HTMLElement[] {\n const root = triggerEl.value?.closest('[data-gr-collapse]')\n if (!root)\n return []\n\n const triggers = Array.prototype.slice.call(\n root.querySelectorAll<HTMLElement>('[data-gr-collapse-trigger]'),\n ) as HTMLElement[]\n\n return triggers.filter(trigger => trigger.closest('[data-gr-collapse]') === root)\n}\n\nfunction focusRelative(direction: 1 | -1): void {\n const current = triggerEl.value\n if (!current)\n return\n\n const triggers = getAllTriggers()\n const index = triggers.indexOf(current)\n if (index === -1 || triggers.length === 0)\n return\n\n const nextIndex = (index + direction + triggers.length) % triggers.length\n triggers[nextIndex]?.focus()\n}\n\nfunction focusEdge(edge: 'start' | 'end'): void {\n const triggers = getAllTriggers()\n if (triggers.length === 0)\n return\n\n ;(edge === 'start' ? triggers[0] : triggers.at(-1))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n focusRelative(1)\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n focusRelative(-1)\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n focusEdge('start')\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n focusEdge('end')\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n onToggle()\n }\n}\n\ndefineSlots<{\n /** Содержимое секции. */\n default?: () => any\n /** Заголовок секции вместо пропа `title`. */\n title?: () => any\n /** Иконка-указатель вместо шеврона. */\n icon?: () => any\n /** Управление справа в заголовке: счётчик, переключатель, кнопка. */\n extra?: () => any\n}>()\n\n</script>\n\n<template>\n <div\n data-gr-collapse-item\n class=\"text-[var(--gr-fg)]\"\n >\n <div :class=\"rowClassName\">\n <component\n :is=\"headingTag\"\n class=\"m-0 min-w-0 flex-1\"\n >\n <button\n :id=\"headerId\"\n ref=\"triggerEl\"\n data-gr-collapse-trigger\n type=\"button\"\n :aria-expanded=\"expanded ? 'true' : 'false'\"\n :aria-controls=\"panelId\"\n :disabled=\"resolvedDisabled\"\n :class=\"headerClassName\"\n @click=\"onToggle\"\n @keydown=\"onKeydown\"\n >\n <GrIcon\n v-if=\"iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n\n <span :class=\"titleClassName\">\n <slot name=\"title\">\n <span class=\"font-600\">\n {{ title }}\n </span>\n </slot>\n </span>\n\n <GrIcon\n v-if=\"!iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n </button>\n </component>\n\n <div\n v-if=\"$slots.extra\"\n data-gr-collapse-extra\n class=\"shrink-0\"\n :class=\"extraClassName\"\n >\n <slot name=\"extra\" />\n </div>\n </div>\n\n <div\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"headerId\"\n :inert=\"expanded ? undefined : true\"\n class=\"grid transition-[grid-template-rows] duration-[var(--gr-duration-base)]\"\n :class=\"expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\"\n >\n <div class=\"overflow-hidden\">\n <div :class=\"bodyClassName\">\n <slot />\n </div>\n </div>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport ChevronDownIcon from '~icons/lucide/chevron-down'\nimport { computed, inject, ref, useId } from 'vue'\n\nimport GrIcon from '../GrIcon'\n\nimport { GR_COLLAPSE_CONTEXT, type GrCollapseValue } from './grCollapseContext'\nimport {\n collapseChevronSizes,\n collapseExtraPaddings,\n grCollapseBodyClass,\n grCollapseChevronClass,\n grCollapseHeaderClass,\n grCollapseRowClass,\n grCollapseTitleClass,\n} from './grCollapseStyles'\n\n/**\n * GrCollapseItem — одна секция `GrCollapse`. Должна использоваться строго внутри `GrCollapse`.\n *\n * @prop name — уникальный идентификатор секции (для `v-model` у `GrCollapse`); по умолчанию генерируется из `uid`.\n * @prop title — текст заголовка; можно заменить слотом `#title`.\n * @prop disabled — запрещает раскрытие/сворачивание секции.\n *\n * Слот `#extra` (счётчик, бейдж, кнопка) рендерится **рядом с** триггером, а не\n * внутри него: `<button>` внутри `<button>` — невалидная разметка, а axe ловит\n * это как `nested-interactive`.\n */\nexport interface GrCollapseItemProps {\n name?: GrCollapseValue\n title?: string\n disabled?: boolean\n}\n\nconst props = withDefaults(defineProps<GrCollapseItemProps>(), {\n name: undefined,\n title: undefined,\n disabled: false,\n})\n\nconst collapse = inject(GR_COLLAPSE_CONTEXT)\n\nif (!collapse) {\n throw new Error('GrCollapseItem must be used inside GrCollapse')\n}\n\nconst collapseContext = collapse\n\nconst uid = useId()\n\nconst resolvedName = computed<GrCollapseValue>(() => {\n if (typeof props.name === 'string' || typeof props.name === 'number')\n return props.name\n\n return uid\n})\n\nconst resolvedDisabled = computed(() => collapseContext.disabled.value || props.disabled)\nconst expanded = computed(() => collapseContext.isActive(resolvedName.value))\n\nconst headingTag = computed(() => `h${collapseContext.headingLevel.value}`)\nconst iconAtStart = computed(() => collapseContext.expandIconPosition.value === 'start')\n\nconst rowClassName = computed(() => grCollapseRowClass(resolvedDisabled.value))\nconst headerClassName = computed(() => grCollapseHeaderClass({\n size: collapseContext.size.value,\n disabled: resolvedDisabled.value,\n}))\nconst extraClassName = computed(() => collapseExtraPaddings[collapseContext.size.value])\nconst titleClassName = computed(() => grCollapseTitleClass(collapseContext.size.value))\nconst bodyClassName = computed(() => grCollapseBodyClass(collapseContext.size.value))\nconst chevronClassName = computed(() => grCollapseChevronClass(expanded.value))\nconst chevronSize = computed(() => collapseChevronSizes[collapseContext.size.value])\n\n// Свёрнутая панель схлопывается визуально (`grid-rows-[0fr]`), но это не\n// скрытие: без `inert` ссылки и кнопки внутри неё ловятся Tab'ом, фокус уезжает\n// в невидимую область нулевой высоты, а скринридер читает содержимое всех\n// закрытых секций подряд — прямо вопреки `aria-expanded=\"false\"` на триггере.\n// `inert` убирает поддерево и из таб-порядка, и из дерева доступности, при этом\n// (в отличие от `hidden`/`display:none`) не ломает анимацию раскрытия.\nconst headerId = `gr-collapse-header-${uid}`\nconst panelId = `gr-collapse-panel-${uid}`\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction onToggle(): void {\n if (resolvedDisabled.value)\n return\n\n collapseContext.toggle(resolvedName.value)\n}\n\n/**\n * Только заголовки **своего** аккордеона: вложенный `GrCollapse` внутри\n * раскрытой панели тоже помечен `[data-gr-collapse]`, и без фильтра стрелки\n * внешнего аккордеона перескакивали бы на заголовки внутреннего.\n */\nfunction getAllTriggers(): HTMLElement[] {\n const root = triggerEl.value?.closest('[data-gr-collapse]')\n if (!root)\n return []\n\n const triggers = Array.prototype.slice.call(\n root.querySelectorAll<HTMLElement>('[data-gr-collapse-trigger]'),\n ) as HTMLElement[]\n\n return triggers.filter(trigger => trigger.closest('[data-gr-collapse]') === root)\n}\n\nfunction focusRelative(direction: 1 | -1): void {\n const current = triggerEl.value\n if (!current)\n return\n\n const triggers = getAllTriggers()\n const index = triggers.indexOf(current)\n if (index === -1 || triggers.length === 0)\n return\n\n const nextIndex = (index + direction + triggers.length) % triggers.length\n triggers[nextIndex]?.focus()\n}\n\nfunction focusEdge(edge: 'start' | 'end'): void {\n const triggers = getAllTriggers()\n if (triggers.length === 0)\n return\n\n ;(edge === 'start' ? triggers[0] : triggers.at(-1))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (event.key === 'ArrowDown') {\n event.preventDefault()\n focusRelative(1)\n return\n }\n\n if (event.key === 'ArrowUp') {\n event.preventDefault()\n focusRelative(-1)\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n focusEdge('start')\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n focusEdge('end')\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n onToggle()\n }\n}\n\ndefineSlots<{\n /** Содержимое секции. */\n default?: () => any\n /** Заголовок секции вместо пропа `title`. */\n title?: () => any\n /** Иконка-указатель вместо шеврона. */\n icon?: () => any\n /** Управление справа в заголовке: счётчик, переключатель, кнопка. */\n extra?: () => any\n}>()\n\n</script>\n\n<template>\n <div\n data-gr-collapse-item\n class=\"text-[var(--gr-fg)]\"\n >\n <div :class=\"rowClassName\">\n <component\n :is=\"headingTag\"\n class=\"m-0 min-w-0 flex-1\"\n >\n <button\n :id=\"headerId\"\n ref=\"triggerEl\"\n data-gr-collapse-trigger\n type=\"button\"\n :aria-expanded=\"expanded ? 'true' : 'false'\"\n :aria-controls=\"panelId\"\n :disabled=\"resolvedDisabled\"\n :class=\"headerClassName\"\n @click=\"onToggle\"\n @keydown=\"onKeydown\"\n >\n <GrIcon\n v-if=\"iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n\n <span :class=\"titleClassName\">\n <slot name=\"title\">\n <span class=\"font-600\">\n {{ title }}\n </span>\n </slot>\n </span>\n\n <GrIcon\n v-if=\"!iconAtStart\"\n :size=\"chevronSize\"\n \n data-gr-collapse-chevron\n :class=\"chevronClassName\"\n >\n <slot name=\"icon\">\n <ChevronDownIcon />\n </slot>\n </GrIcon>\n </button>\n </component>\n\n <div\n v-if=\"$slots.extra\"\n data-gr-collapse-extra\n class=\"shrink-0\"\n :class=\"extraClassName\"\n >\n <slot name=\"extra\" />\n </div>\n </div>\n\n <div\n :id=\"panelId\"\n role=\"region\"\n :aria-labelledby=\"headerId\"\n :inert=\"expanded ? undefined : true\"\n class=\"grid transition-[grid-template-rows] duration-[var(--gr-duration-base)]\"\n :class=\"expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'\"\n >\n <div class=\"overflow-hidden\">\n <div :class=\"bodyClassName\">\n <slot />\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as grCollapseSafelist, t as grCollapseConfig } from "../../chunks/config-BoUI0t-t.js";
|
|
2
|
-
import { n as GrCollapse_default, t as GrCollapseItem_default } from "./chunks/GrCollapse-
|
|
2
|
+
import { n as GrCollapse_default, t as GrCollapseItem_default } from "./chunks/GrCollapse-BlW6ybdL.js";
|
|
3
3
|
export { GrCollapse_default as GrCollapse, GrCollapse_default as default, GrCollapseItem_default as GrCollapseItem, grCollapseConfig, grCollapseSafelist };
|
package/dist/components/GrContextMenu/chunks/{GrContextMenu-BNQDbAsY.js → GrContextMenu-_FKwQvuQ.js}
RENAMED
|
@@ -3,7 +3,7 @@ import { i as isEditableTarget } from "../../../chunks/keyboard-DE2yhz_b.js";
|
|
|
3
3
|
import { t as useControlledOpen } from "../../../chunks/useControlledOpen-DV3SqLTP.js";
|
|
4
4
|
import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-CofG-Tfe.js";
|
|
5
5
|
import { t as useMenuItemsFocus } from "../../../chunks/useMenuItemsFocus-B6TldmGf.js";
|
|
6
|
-
import { i as isMenuSection, n as GrDropdownMenuEntries_default, r as isMenuAction, t as GrDropdownMenuList_default } from "../../GrDropdownMenu/chunks/GrDropdownMenuList-
|
|
6
|
+
import { i as isMenuSection, n as GrDropdownMenuEntries_default, r as isMenuAction, t as GrDropdownMenuList_default } from "../../GrDropdownMenu/chunks/GrDropdownMenuList-B33ZzwfB.js";
|
|
7
7
|
import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, useSlots, watch, withCtx } from "vue";
|
|
8
8
|
//#region src/components/GrContextMenu/contextMenuAnchor.ts
|
|
9
9
|
/** Точка курсора — якорь нулевого размера. */
|