@feugene/granularity 0.3.2 → 0.4.1

package/dist/components/GrDialog/chunks/GrDialog-gObmaVEl.js

@@ -0,0 +1,223 @@
+import { t as x_default } from "../../../chunks/x-Pa6C2hwi.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-BmGdp8-4.js";
+import { a as Ve } from "../../../chunks/transition-mJ3PZCHH.js";
+import { t as GrModal_default } from "../../GrModal/chunks/GrModal-gvfvlp7k.js";
+import { a as resolveGrDialogTitle, i as resolveGrDialogSectionConfig, n as DEFAULT_GR_DIALOG_FOOTER_CONFIG, r as DEFAULT_GR_DIALOG_HEADER_CONFIG, t as DEFAULT_GR_DIALOG_BODY_CONFIG } from "../../../chunks/dialogShared-BtXUk6Zc.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, openBlock, renderSlot, toDisplayString, unref, useAttrs, useSlots, withCtx } from "vue";
+//#endregion
+//#region src/components/GrDialog/GrDialogFooter.vue
+var GrDialogFooter_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDialogFooter",
+	props: { config: { default: void 0 } },
+	setup(__props) {
+		const props = __props;
+		const resolvedConfig = computed(() => resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_FOOTER_CONFIG));
+		const rootClass = computed(() => [
+			resolvedConfig.value.paddingX,
+			resolvedConfig.value.paddingY,
+			resolvedConfig.value.bordered ? "border-t border-[var(--brd)]" : ""
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-ds-dialog-footer": "",
+				class: normalizeClass(rootClass.value)
+			}, [renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrDialog/GrDialogCloseButton.vue
+var GrDialogCloseButton_default = /* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "GrDialogCloseButton",
+	emits: ["click"],
+	setup(__props) {
+		const attrs = useAttrs();
+		const ariaLabel = computed(() => attrs["aria-label"] ?? "Close");
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(GrButton_default, mergeProps(unref(attrs), {
+				"data-ds-dialog-close": "",
+				variant: "ghost",
+				size: "sm",
+				square: "",
+				"aria-label": ariaLabel.value,
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
+			}), {
+				default: withCtx(() => [createVNode(unref(x_default), {
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})]),
+				_: 1
+			}, 16, ["aria-label"]);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrDialog/GrDialogHeader.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = {
+	key: 0,
+	class: "flex-1 min-w-0 flex items-center"
+};
+var _hoisted_2$1 = {
+	key: 2,
+	class: "flex-1 min-w-0"
+};
+//#endregion
+//#region src/components/GrDialog/GrDialogHeader.vue
+var GrDialogHeader_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDialogHeader",
+	props: {
+		title: { default: void 0 },
+		showCloseButton: {
+			type: Boolean,
+			default: true
+		},
+		config: { default: void 0 },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["close"],
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const resolvedTitle = computed(() => resolveGrDialogTitle(props.title));
+		const resolvedConfig = computed(() => resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_HEADER_CONFIG));
+		const rootClass = computed(() => [
+			resolvedConfig.value.paddingX,
+			resolvedConfig.value.paddingY,
+			resolvedConfig.value.bordered ? "border-b border-[var(--brd)]" : "",
+			"flex items-center justify-between gap-4"
+		]);
+		const showVisibleTitle = computed(() => !slots.default && !!resolvedTitle.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-ds-dialog-header": "",
+				class: normalizeClass(rootClass.value)
+			}, [slots.default ? (openBlock(), createElementBlock("div", _hoisted_1$1, [renderSlot(_ctx.$slots, "default", { title: resolvedTitle.value })])) : showVisibleTitle.value ? (openBlock(), createBlock(unref(Ve), {
+				key: 1,
+				as: "div",
+				class: "flex-1 min-w-0 text-[14px] font-700"
+			}, {
+				default: withCtx(() => [createTextVNode(toDisplayString(resolvedTitle.value), 1)]),
+				_: 1
+			})) : (openBlock(), createElementBlock("div", _hoisted_2$1)), __props.showCloseButton ? (openBlock(), createBlock(GrDialogCloseButton_default, {
+				key: 3,
+				"aria-label": __props.closeLabel,
+				onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+			}, null, 8, ["aria-label"])) : createCommentVNode("", true)], 2);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrDialog/GrDialog.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "sr-only" };
+var _hoisted_2 = { class: "overflow-hidden rounded-[inherit]" };
+//#endregion
+//#region src/components/GrDialog/GrDialog.vue
+var GrDialog_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDialog",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		showCloseButton: {
+			type: Boolean,
+			default: true
+		},
+		size: { default: "md" },
+		headerConfig: { default: void 0 },
+		footerConfig: { default: void 0 },
+		bodyConfig: { default: void 0 },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrDialog — DS-примитив диалога поверх `GrModal`.
+		*
+		* Архитектурно:
+		* - ширина/радиус/скролл-лок/Esc/бэкдроп — ответственность `GrModal`;
+		* - заголовок/подвал/кнопка закрытия/паддинги секций — ответственность `GrDialog`.
+		*
+		* A11y: ровно один `DialogTitle` на открытое окно.
+		* - Если хедер отображается без слота `#header` — видимый `DialogTitle` рендерит
+		*   `GrDialogHeader`.
+		* - В остальных случаях (`!showHeader`, либо `showHeader` со слотом `#header`)
+		*   `GrDialog` отдаёт sr-only title в слот `#title` у `GrModal`, чтобы
+		*   HeadlessUI корректно проставил `aria-labelledby` на панель.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const resolvedTitle = computed(() => resolveGrDialogTitle(props.title));
+		const bodyClass = computed(() => {
+			const cfg = resolveGrDialogSectionConfig(props.bodyConfig, DEFAULT_GR_DIALOG_BODY_CONFIG);
+			return [cfg.paddingX, cfg.paddingY];
+		});
+		const useModalSrOnlyTitle = computed(() => !!resolvedTitle.value && (!props.showHeader || !!slots.header));
+		function close() {
+			emit("update:modelValue", false);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(GrModal_default, {
+				"model-value": __props.modelValue,
+				size: __props.size,
+				"close-on-backdrop": __props.closeOnBackdrop,
+				"close-on-esc": __props.closeOnEsc,
+				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", $event))
+			}, createSlots({
+				default: withCtx(() => [createElementVNode("div", _hoisted_2, [
+					__props.showHeader ? (openBlock(), createBlock(GrDialogHeader_default, {
+						key: 0,
+						title: resolvedTitle.value,
+						"show-close-button": __props.showCloseButton,
+						config: __props.headerConfig,
+						"close-label": __props.closeLabel,
+						onClose: close
+					}, createSlots({ _: 2 }, [slots.header ? {
+						name: "default",
+						fn: withCtx((slotProps) => [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotProps)))]),
+						key: "0"
+					} : void 0]), 1032, [
+						"title",
+						"show-close-button",
+						"config",
+						"close-label"
+					])) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(bodyClass.value) }, [renderSlot(_ctx.$slots, "default")], 2),
+					slots.footer ? (openBlock(), createBlock(GrDialogFooter_default, {
+						key: 1,
+						config: __props.footerConfig
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+						_: 3
+					}, 8, ["config"])) : createCommentVNode("", true)
+				])]),
+				_: 2
+			}, [useModalSrOnlyTitle.value ? {
+				name: "title",
+				fn: withCtx(() => [createElementVNode("span", _hoisted_1, toDisplayString(resolvedTitle.value), 1)]),
+				key: "0"
+			} : void 0]), 1032, [
+				"model-value",
+				"size",
+				"close-on-backdrop",
+				"close-on-esc"
+			]);
+		};
+	}
+});
+//#endregion
+export { GrDialogFooter_default as i, GrDialogHeader_default as n, GrDialogCloseButton_default as r, GrDialog_default as t };
+
+//# sourceMappingURL=GrDialog-gObmaVEl.js.map

package/dist/components/GrDialog/chunks/GrDialog-gObmaVEl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrDialog-gObmaVEl.js","names":["$emit","$emit"],"sources":["../../../../src/components/GrDialog/GrDialogFooter.vue","../../../../src/components/GrDialog/GrDialogFooter.vue","../../../../src/components/GrDialog/GrDialogCloseButton.vue","../../../../src/components/GrDialog/GrDialogCloseButton.vue","../../../../src/components/GrDialog/GrDialogHeader.vue","../../../../src/components/GrDialog/GrDialogHeader.vue","../../../../src/components/GrDialog/GrDialog.vue","../../../../src/components/GrDialog/GrDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport {\n  DEFAULT_GR_DIALOG_FOOTER_CONFIG,\n  resolveGrDialogSectionConfig,\n  type GrDialogSectionConfig,\n} from './dialogShared'\n\nexport interface GrDialogFooterProps {\n  config?: GrDialogSectionConfig\n}\n\nconst props = withDefaults(defineProps<GrDialogFooterProps>(), {\n  config: undefined,\n})\n\nconst resolvedConfig = computed(() => resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_FOOTER_CONFIG))\n\nconst rootClass = computed(() => [\n  resolvedConfig.value.paddingX,\n  resolvedConfig.value.paddingY,\n  resolvedConfig.value.bordered ? 'border-t border-[var(--brd)]' : '',\n])\n</script>\n\n<template>\n  <div data-ds-dialog-footer :class=\"rootClass\">\n    <slot />\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport {\n  DEFAULT_GR_DIALOG_FOOTER_CONFIG,\n  resolveGrDialogSectionConfig,\n  type GrDialogSectionConfig,\n} from './dialogShared'\n\nexport interface GrDialogFooterProps {\n  config?: GrDialogSectionConfig\n}\n\nconst props = withDefaults(defineProps<GrDialogFooterProps>(), {\n  config: undefined,\n})\n\nconst resolvedConfig = computed(() => resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_FOOTER_CONFIG))\n\nconst rootClass = computed(() => [\n  resolvedConfig.value.paddingX,\n  resolvedConfig.value.paddingY,\n  resolvedConfig.value.bordered ? 'border-t border-[var(--brd)]' : '',\n])\n</script>\n\n<template>\n  <div data-ds-dialog-footer :class=\"rootClass\">\n    <slot />\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport IconClose from '~icons/lucide/x'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\n// A11y-лейбл: берём из атрибутов (родитель прокидывает `:aria-label=\"closeLabel\"`)\n// или используем дефолт. Не хардкодим английское \"Close\" — DS должен быть i18n-friendly.\nconst attrs = useAttrs()\nconst ariaLabel = computed(() => (attrs['aria-label'] as string | undefined) ?? 'Close')\n\ndefineEmits<{\n  (e: 'click'): void\n}>()\n</script>\n\n<template>\n  <GrButton\n    v-bind=\"attrs\"\n    data-ds-dialog-close\n    variant=\"ghost\"\n    size=\"sm\"\n    square\n    :aria-label=\"ariaLabel\"\n    @click=\"$emit('click')\"\n  >\n    <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </GrButton>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useAttrs } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport IconClose from '~icons/lucide/x'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\n// A11y-лейбл: берём из атрибутов (родитель прокидывает `:aria-label=\"closeLabel\"`)\n// или используем дефолт. Не хардкодим английское \"Close\" — DS должен быть i18n-friendly.\nconst attrs = useAttrs()\nconst ariaLabel = computed(() => (attrs['aria-label'] as string | undefined) ?? 'Close')\n\ndefineEmits<{\n  (e: 'click'): void\n}>()\n</script>\n\n<template>\n  <GrButton\n    v-bind=\"attrs\"\n    data-ds-dialog-close\n    variant=\"ghost\"\n    size=\"sm\"\n    square\n    :aria-label=\"ariaLabel\"\n    @click=\"$emit('click')\"\n  >\n    <IconClose class=\"h-4 w-4\" aria-hidden=\"true\" />\n  </GrButton>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogTitle } from '@headlessui/vue'\n\nimport GrDialogCloseButton from './GrDialogCloseButton.vue'\nimport {\n  DEFAULT_GR_DIALOG_HEADER_CONFIG,\n  type GrDialogSectionConfig,\n  resolveGrDialogSectionConfig,\n  resolveGrDialogTitle,\n} from './dialogShared'\n\nexport interface GrDialogHeaderProps {\n  title?: string\n  showCloseButton?: boolean\n  config?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDialogHeaderProps>(), {\n  title: undefined,\n  showCloseButton: true,\n  config: undefined,\n  closeLabel: 'Close',\n})\n\nconst slots = defineSlots<{\n  default?: (props: { title?: string }) => any\n}>()\n\ndefineEmits<{\n  (e: 'close'): void\n}>()\n\nconst resolvedTitle = computed(() => resolveGrDialogTitle(props.title))\n\nconst resolvedConfig = computed(() =>\n  resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_HEADER_CONFIG),\n)\n\nconst rootClass = computed(() => [\n  resolvedConfig.value.paddingX,\n  resolvedConfig.value.paddingY,\n  resolvedConfig.value.bordered ? 'border-b border-[var(--brd)]' : '',\n  'flex items-center justify-between gap-4',\n])\n\n// Видимый `DialogTitle` рендерим только когда нет пользовательского слота:\n// если слот `#header` задан, a11y-title отдаётся через `GrModal #title`\n// на уровне `GrDialog` (см. JSDoc у `GrDialog.vue`).\nconst showVisibleTitle = computed(() => !slots.default && !!resolvedTitle.value)\n</script>\n\n<template>\n  <div data-ds-dialog-header :class=\"rootClass\">\n    <template v-if=\"slots.default\">\n      <div class=\"flex-1 min-w-0 flex items-center\">\n        <slot :title=\"resolvedTitle\" />\n      </div>\n    </template>\n    <DialogTitle\n      v-else-if=\"showVisibleTitle\"\n      as=\"div\"\n      class=\"flex-1 min-w-0 text-[14px] font-700\"\n    >\n      {{ resolvedTitle }}\n    </DialogTitle>\n    <div v-else class=\"flex-1 min-w-0\" />\n    <GrDialogCloseButton\n      v-if=\"showCloseButton\"\n      :aria-label=\"closeLabel\"\n      @click=\"$emit('close')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { DialogTitle } from '@headlessui/vue'\n\nimport GrDialogCloseButton from './GrDialogCloseButton.vue'\nimport {\n  DEFAULT_GR_DIALOG_HEADER_CONFIG,\n  type GrDialogSectionConfig,\n  resolveGrDialogSectionConfig,\n  resolveGrDialogTitle,\n} from './dialogShared'\n\nexport interface GrDialogHeaderProps {\n  title?: string\n  showCloseButton?: boolean\n  config?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDialogHeaderProps>(), {\n  title: undefined,\n  showCloseButton: true,\n  config: undefined,\n  closeLabel: 'Close',\n})\n\nconst slots = defineSlots<{\n  default?: (props: { title?: string }) => any\n}>()\n\ndefineEmits<{\n  (e: 'close'): void\n}>()\n\nconst resolvedTitle = computed(() => resolveGrDialogTitle(props.title))\n\nconst resolvedConfig = computed(() =>\n  resolveGrDialogSectionConfig(props.config, DEFAULT_GR_DIALOG_HEADER_CONFIG),\n)\n\nconst rootClass = computed(() => [\n  resolvedConfig.value.paddingX,\n  resolvedConfig.value.paddingY,\n  resolvedConfig.value.bordered ? 'border-b border-[var(--brd)]' : '',\n  'flex items-center justify-between gap-4',\n])\n\n// Видимый `DialogTitle` рендерим только когда нет пользовательского слота:\n// если слот `#header` задан, a11y-title отдаётся через `GrModal #title`\n// на уровне `GrDialog` (см. JSDoc у `GrDialog.vue`).\nconst showVisibleTitle = computed(() => !slots.default && !!resolvedTitle.value)\n</script>\n\n<template>\n  <div data-ds-dialog-header :class=\"rootClass\">\n    <template v-if=\"slots.default\">\n      <div class=\"flex-1 min-w-0 flex items-center\">\n        <slot :title=\"resolvedTitle\" />\n      </div>\n    </template>\n    <DialogTitle\n      v-else-if=\"showVisibleTitle\"\n      as=\"div\"\n      class=\"flex-1 min-w-0 text-[14px] font-700\"\n    >\n      {{ resolvedTitle }}\n    </DialogTitle>\n    <div v-else class=\"flex-1 min-w-0\" />\n    <GrDialogCloseButton\n      v-if=\"showCloseButton\"\n      :aria-label=\"closeLabel\"\n      @click=\"$emit('close')\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrDialog — DS-примитив диалога поверх `GrModal`.\n *\n * Архитектурно:\n * - ширина/радиус/скролл-лок/Esc/бэкдроп — ответственность `GrModal`;\n * - заголовок/подвал/кнопка закрытия/паддинги секций — ответственность `GrDialog`.\n *\n * A11y: ровно один `DialogTitle` на открытое окно.\n * - Если хедер отображается без слота `#header` — видимый `DialogTitle` рендерит\n *   `GrDialogHeader`.\n * - В остальных случаях (`!showHeader`, либо `showHeader` со слотом `#header`)\n *   `GrDialog` отдаёт sr-only title в слот `#title` у `GrModal`, чтобы\n *   HeadlessUI корректно проставил `aria-labelledby` на панель.\n */\nimport { computed } from 'vue'\n\nimport GrModal from '../GrModal/GrModal.vue'\nimport GrDialogFooter from './GrDialogFooter.vue'\nimport GrDialogHeader from './GrDialogHeader.vue'\nimport {\n  DEFAULT_GR_DIALOG_BODY_CONFIG,\n  type GrDialogSectionConfig,\n  type GrDialogSize,\n  resolveGrDialogSectionConfig,\n  resolveGrDialogTitle,\n} from './dialogShared'\n\nexport interface GrDialogProps {\n  modelValue: boolean\n  title?: string\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  showHeader?: boolean\n  showCloseButton?: boolean\n  size?: GrDialogSize\n  headerConfig?: GrDialogSectionConfig\n  footerConfig?: GrDialogSectionConfig\n  bodyConfig?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDialogProps>(), {\n  title: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  showHeader: true,\n  showCloseButton: true,\n  size: 'md',\n  headerConfig: undefined,\n  footerConfig: undefined,\n  bodyConfig: undefined,\n  closeLabel: 'Close',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  header?: (props: { title?: string }) => any\n  footer?: () => any\n}>()\n\nconst resolvedTitle = computed(() => resolveGrDialogTitle(props.title))\n\nconst bodyClass = computed(() => {\n  const cfg = resolveGrDialogSectionConfig(props.bodyConfig, DEFAULT_GR_DIALOG_BODY_CONFIG)\n  return [cfg.paddingX, cfg.paddingY]\n})\n\n// Нужен ли sr-only title через `GrModal #title`:\n// - `!showHeader` — вообще нет заголовка в разметке;\n// - `showHeader && $slots.header` — кастомный хедер не обязан содержать DialogTitle.\n// В обоих случаях даём HeadlessUI a11y-title, не дублируя его визуально.\nconst useModalSrOnlyTitle = computed(\n  () => !!resolvedTitle.value && (!props.showHeader || !!slots.header),\n)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n</script>\n\n<template>\n  <GrModal\n    :model-value=\"modelValue\"\n    :size=\"size\"\n    :close-on-backdrop=\"closeOnBackdrop\"\n    :close-on-esc=\"closeOnEsc\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"useModalSrOnlyTitle\" #title>\n      <span class=\"sr-only\">{{ resolvedTitle }}</span>\n    </template>\n\n    <div class=\"overflow-hidden rounded-[inherit]\">\n      <GrDialogHeader\n        v-if=\"showHeader\"\n        :title=\"resolvedTitle\"\n        :show-close-button=\"showCloseButton\"\n        :config=\"headerConfig\"\n        :close-label=\"closeLabel\"\n        @close=\"close\"\n      >\n        <template v-if=\"slots.header\" #default=\"slotProps\">\n          <slot name=\"header\" v-bind=\"slotProps\" />\n        </template>\n      </GrDialogHeader>\n\n      <div :class=\"bodyClass\">\n        <slot />\n      </div>\n\n      <GrDialogFooter v-if=\"slots.footer\" :config=\"footerConfig\">\n        <slot name=\"footer\" />\n      </GrDialogFooter>\n    </div>\n  </GrModal>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrDialog — DS-примитив диалога поверх `GrModal`.\n *\n * Архитектурно:\n * - ширина/радиус/скролл-лок/Esc/бэкдроп — ответственность `GrModal`;\n * - заголовок/подвал/кнопка закрытия/паддинги секций — ответственность `GrDialog`.\n *\n * A11y: ровно один `DialogTitle` на открытое окно.\n * - Если хедер отображается без слота `#header` — видимый `DialogTitle` рендерит\n *   `GrDialogHeader`.\n * - В остальных случаях (`!showHeader`, либо `showHeader` со слотом `#header`)\n *   `GrDialog` отдаёт sr-only title в слот `#title` у `GrModal`, чтобы\n *   HeadlessUI корректно проставил `aria-labelledby` на панель.\n */\nimport { computed } from 'vue'\n\nimport GrModal from '../GrModal/GrModal.vue'\nimport GrDialogFooter from './GrDialogFooter.vue'\nimport GrDialogHeader from './GrDialogHeader.vue'\nimport {\n  DEFAULT_GR_DIALOG_BODY_CONFIG,\n  type GrDialogSectionConfig,\n  type GrDialogSize,\n  resolveGrDialogSectionConfig,\n  resolveGrDialogTitle,\n} from './dialogShared'\n\nexport interface GrDialogProps {\n  modelValue: boolean\n  title?: string\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  showHeader?: boolean\n  showCloseButton?: boolean\n  size?: GrDialogSize\n  headerConfig?: GrDialogSectionConfig\n  footerConfig?: GrDialogSectionConfig\n  bodyConfig?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDialogProps>(), {\n  title: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  showHeader: true,\n  showCloseButton: true,\n  size: 'md',\n  headerConfig: undefined,\n  footerConfig: undefined,\n  bodyConfig: undefined,\n  closeLabel: 'Close',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst slots = defineSlots<{\n  default?: () => any\n  header?: (props: { title?: string }) => any\n  footer?: () => any\n}>()\n\nconst resolvedTitle = computed(() => resolveGrDialogTitle(props.title))\n\nconst bodyClass = computed(() => {\n  const cfg = resolveGrDialogSectionConfig(props.bodyConfig, DEFAULT_GR_DIALOG_BODY_CONFIG)\n  return [cfg.paddingX, cfg.paddingY]\n})\n\n// Нужен ли sr-only title через `GrModal #title`:\n// - `!showHeader` — вообще нет заголовка в разметке;\n// - `showHeader && $slots.header` — кастомный хедер не обязан содержать DialogTitle.\n// В обоих случаях даём HeadlessUI a11y-title, не дублируя его визуально.\nconst useModalSrOnlyTitle = computed(\n  () => !!resolvedTitle.value && (!props.showHeader || !!slots.header),\n)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n</script>\n\n<template>\n  <GrModal\n    :model-value=\"modelValue\"\n    :size=\"size\"\n    :close-on-backdrop=\"closeOnBackdrop\"\n    :close-on-esc=\"closeOnEsc\"\n    @update:model-value=\"emit('update:modelValue', $event)\"\n  >\n    <template v-if=\"useModalSrOnlyTitle\" #title>\n      <span class=\"sr-only\">{{ resolvedTitle }}</span>\n    </template>\n\n    <div class=\"overflow-hidden rounded-[inherit]\">\n      <GrDialogHeader\n        v-if=\"showHeader\"\n        :title=\"resolvedTitle\"\n        :show-close-button=\"showCloseButton\"\n        :config=\"headerConfig\"\n        :close-label=\"closeLabel\"\n        @close=\"close\"\n      >\n        <template v-if=\"slots.header\" #default=\"slotProps\">\n          <slot name=\"header\" v-bind=\"slotProps\" />\n        </template>\n      </GrDialogHeader>\n\n      <div :class=\"bodyClass\">\n        <slot />\n      </div>\n\n      <GrDialogFooter v-if=\"slots.footer\" :config=\"footerConfig\">\n        <slot name=\"footer\" />\n      </GrDialogFooter>\n    </div>\n  </GrModal>\n</template>\n"],"mappings":"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"}

package/dist/components/GrDialog/index.js

@@ -0,0 +1,4 @@
+import { a as resolveGrDialogTitle, i as resolveGrDialogSectionConfig, n as DEFAULT_GR_DIALOG_FOOTER_CONFIG, r as DEFAULT_GR_DIALOG_HEADER_CONFIG, t as DEFAULT_GR_DIALOG_BODY_CONFIG } from "../../chunks/dialogShared-BtXUk6Zc.js";
+import { i as GrDialogFooter_default, n as GrDialogHeader_default, r as GrDialogCloseButton_default, t as GrDialog_default } from "./chunks/GrDialog-gObmaVEl.js";
+import { t as grDialogSafelist } from "../../chunks/safelist-BF822K15.js";
+export { DEFAULT_GR_DIALOG_BODY_CONFIG, DEFAULT_GR_DIALOG_FOOTER_CONFIG, DEFAULT_GR_DIALOG_HEADER_CONFIG, GrDialog_default as GrDialog, GrDialog_default as default, GrDialogCloseButton_default as GrDialogCloseButton, GrDialogFooter_default as GrDialogFooter, GrDialogHeader_default as GrDialogHeader, grDialogSafelist, resolveGrDialogSectionConfig, resolveGrDialogTitle };

package/dist/components/GrDrawer/chunks/GrDrawer-BJL_gTxI.js

@@ -0,0 +1,158 @@
+import { t as x_default } from "../../../chunks/x-Pa6C2hwi.js";
+import { t as GrButton_default } from "../../GrButton/chunks/GrButton-BmGdp8-4.js";
+import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BV7RBU_0.js";
+import { a as Ve, n as he, o as Ye, r as Ge, t as Se } from "../../../chunks/transition-mJ3PZCHH.js";
+import { i as grDrawerPanelEnterFrom, r as grDrawerPanelClass } from "../../../chunks/config-DxqpV-KM.js";
+import { Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, openBlock, renderSlot, toDisplayString, unref, useId, withCtx } from "vue";
+//#region src/components/GrDrawer/GrDrawer.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "fixed inset-0" };
+var _hoisted_2 = {
+	"data-ds-drawer-header": "",
+	class: "px-5 py-4 border-b border-[var(--brd)] flex items-center justify-between gap-4"
+};
+var _hoisted_3 = {
+	"data-ds-drawer-body": "",
+	class: "flex-1 overflow-y-auto"
+};
+var _hoisted_4 = { class: "p-5" };
+var _hoisted_5 = {
+	key: 0,
+	"data-ds-drawer-footer": "",
+	class: "px-5 py-4 border-t border-[var(--brd)]"
+};
+//#endregion
+//#region src/components/GrDrawer/GrDrawer.vue
+var GrDrawer_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDrawer",
+	props: {
+		modelValue: { type: Boolean },
+		title: { default: void 0 },
+		closeOnBackdrop: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		side: { default: "right" },
+		size: { default: "md" },
+		closeLabel: { default: "Close" }
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const titleId = useId();
+		const panelClass = computed(() => {
+			return grDrawerPanelClass({
+				side: props.side,
+				size: props.size
+			});
+		});
+		const panelEnterFrom = computed(() => grDrawerPanelEnterFrom(props.side));
+		function close() {
+			emit("update:modelValue", false);
+		}
+		function onDialogClose() {
+			if (!props.closeOnBackdrop) return;
+			close();
+		}
+		function onOverlayClick() {
+			if (!props.closeOnBackdrop) return;
+			close();
+		}
+		function onKeydown(e) {
+			if (e.key !== "Escape") return;
+			if (!props.closeOnEsc) return;
+			e.stopPropagation();
+			e.preventDefault();
+			close();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(Se), {
+				show: __props.modelValue,
+				as: "template"
+			}, {
+				default: withCtx(() => [createVNode(unref(Ye), {
+					as: "div",
+					"data-ds-drawer": "",
+					class: "fixed inset-0 z-50",
+					static: true,
+					"aria-labelledby": unref(titleId),
+					onClose: onDialogClose,
+					onKeydown
+				}, {
+					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(he), {
+						as: "template",
+						enter: "duration-200 ease-out",
+						"enter-from": "opacity-0",
+						"enter-to": "opacity-100",
+						leave: "duration-150 ease-in",
+						"leave-from": "opacity-100",
+						"leave-to": "opacity-0"
+					}, {
+						default: withCtx(() => [createElementVNode("div", {
+							"data-ds-drawer-overlay": "",
+							class: "fixed inset-0 bg-black/40",
+							"aria-hidden": "true",
+							onClick: onOverlayClick
+						})]),
+						_: 1
+					}), createVNode(unref(he), {
+						as: "template",
+						enter: "duration-200 ease-out",
+						"enter-from": panelEnterFrom.value,
+						"enter-to": "translate-x-0",
+						leave: "duration-150 ease-in",
+						"leave-from": "translate-x-0",
+						"leave-to": panelEnterFrom.value
+					}, {
+						default: withCtx(() => [createVNode(unref(Ge), {
+							"data-ds-drawer-panel": "",
+							tabindex: "-1",
+							class: normalizeClass(["fixed inset-y-0 flex flex-col", panelClass.value])
+						}, {
+							default: withCtx(() => [
+								createElementVNode("div", _hoisted_2, [createVNode(unref(Ve), {
+									id: unref(titleId),
+									as: "div",
+									"data-ds-drawer-title": "",
+									class: "text-[14px] font-700 min-w-0 truncate"
+								}, {
+									default: withCtx(() => [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title ?? "Drawer"), 1)])]),
+									_: 3
+								}, 8, ["id"]), createVNode(GrButton_default, {
+									variant: "ghost",
+									size: "sm",
+									square: "",
+									"aria-label": __props.closeLabel,
+									onClick: close
+								}, {
+									default: withCtx(() => [createVNode(GrIcon_default, {
+										size: "sm",
+										"aria-hidden": "true"
+									}, {
+										default: withCtx(() => [createVNode(unref(x_default))]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["aria-label"])]),
+								createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")])]),
+								_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("", true)
+							]),
+							_: 3
+						}, 8, ["class"])]),
+						_: 3
+					}, 8, ["enter-from", "leave-to"])])]),
+					_: 3
+				}, 8, ["aria-labelledby"])]),
+				_: 3
+			}, 8, ["show"])]);
+		};
+	}
+});
+//#endregion
+export { GrDrawer_default as t };
+
+//# sourceMappingURL=GrDrawer-BJL_gTxI.js.map

package/dist/components/GrDrawer/chunks/GrDrawer-BJL_gTxI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrDrawer-BJL_gTxI.js","names":["$slots"],"sources":["../../../../src/components/GrDrawer/GrDrawer.vue","../../../../src/components/GrDrawer/GrDrawer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport {\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /** Закрывать при клике по бэкдропу / через HeadlessUI close. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели. */\n  size?: GrDrawerSize\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  side: 'right',\n  size: 'md',\n  closeLabel: 'Close',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst titleId = useId()\n\nconst panelClass = computed(() => {\n  return grDrawerPanelClass({ side: props.side, size: props.size })\n})\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(props.side))\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  if (!props.closeOnBackdrop) return\n  close()\n}\n\nfunction onOverlayClick(): void {\n  if (!props.closeOnBackdrop) return\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'Escape') return\n  if (!props.closeOnEsc) return\n  e.stopPropagation()\n  e.preventDefault()\n  close()\n}\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        data-ds-drawer\n        class=\"fixed inset-0 z-50\"\n        :static=\"true\"\n        :aria-labelledby=\"titleId\"\n        @close=\"onDialogClose\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-200 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-150 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-ds-drawer-overlay\n              class=\"fixed inset-0 bg-black/40\"\n              aria-hidden=\"true\"\n              @click=\"onOverlayClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-200 ease-out\"\n            :enter-from=\"panelEnterFrom\"\n            enter-to=\"translate-x-0\"\n            leave=\"duration-150 ease-in\"\n            leave-from=\"translate-x-0\"\n            :leave-to=\"panelEnterFrom\"\n          >\n            <DialogPanel\n              data-ds-drawer-panel\n              tabindex=\"-1\"\n              class=\"fixed inset-y-0 flex flex-col\"\n              :class=\"panelClass\"\n            >\n              <div\n                data-ds-drawer-header\n                class=\"px-5 py-4 border-b border-[var(--brd)] flex items-center justify-between gap-4\"\n              >\n                <DialogTitle :id=\"titleId\" as=\"div\" data-ds-drawer-title class=\"text-[14px] font-700 min-w-0 truncate\">\n                  <slot name=\"title\">\n                    {{ title ?? 'Drawer' }}\n                  </slot>\n                </DialogTitle>\n\n                <GrButton\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  square\n                  :aria-label=\"closeLabel\"\n                  @click=\"close\"\n                >\n                  <GrIcon size=\"sm\" aria-hidden=\"true\">\n                    <IconClose />\n                  </GrIcon>\n                </GrButton>\n              </div>\n\n              <div data-ds-drawer-body class=\"flex-1 overflow-y-auto\">\n                <div class=\"p-5\">\n                  <slot />\n                </div>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                data-ds-drawer-footer\n                class=\"px-5 py-4 border-t border-[var(--brd)]\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\nimport { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport {\n  grDrawerPanelClass,\n  grDrawerPanelEnterFrom,\n  type GrDrawerSide,\n  type GrDrawerSize,\n} from './grDrawerStyles'\n\nimport IconClose from '~icons/lucide/x'\n\nexport interface GrDrawerProps {\n  /** Контроль открытия через v-model. */\n  modelValue: boolean\n  /** Заголовок; если передан — покажется в хедере. Можно переопределить слотом `#title`. */\n  title?: string\n  /** Закрывать при клике по бэкдропу / через HeadlessUI close. */\n  closeOnBackdrop?: boolean\n  /** Закрывать по Esc. */\n  closeOnEsc?: boolean\n  /** Сторона, с которой выезжает панель. */\n  side?: GrDrawerSide\n  /** Размер панели. */\n  size?: GrDrawerSize\n  /** i18n-friendly aria-label для кнопки закрытия. */\n  closeLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrDrawerProps>(), {\n  title: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  side: 'right',\n  size: 'md',\n  closeLabel: 'Close',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst titleId = useId()\n\nconst panelClass = computed(() => {\n  return grDrawerPanelClass({ side: props.side, size: props.size })\n})\n\nconst panelEnterFrom = computed(() => grDrawerPanelEnterFrom(props.side))\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  if (!props.closeOnBackdrop) return\n  close()\n}\n\nfunction onOverlayClick(): void {\n  if (!props.closeOnBackdrop) return\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n  if (e.key !== 'Escape') return\n  if (!props.closeOnEsc) return\n  e.stopPropagation()\n  e.preventDefault()\n  close()\n}\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        data-ds-drawer\n        class=\"fixed inset-0 z-50\"\n        :static=\"true\"\n        :aria-labelledby=\"titleId\"\n        @close=\"onDialogClose\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-200 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-150 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-ds-drawer-overlay\n              class=\"fixed inset-0 bg-black/40\"\n              aria-hidden=\"true\"\n              @click=\"onOverlayClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-200 ease-out\"\n            :enter-from=\"panelEnterFrom\"\n            enter-to=\"translate-x-0\"\n            leave=\"duration-150 ease-in\"\n            leave-from=\"translate-x-0\"\n            :leave-to=\"panelEnterFrom\"\n          >\n            <DialogPanel\n              data-ds-drawer-panel\n              tabindex=\"-1\"\n              class=\"fixed inset-y-0 flex flex-col\"\n              :class=\"panelClass\"\n            >\n              <div\n                data-ds-drawer-header\n                class=\"px-5 py-4 border-b border-[var(--brd)] flex items-center justify-between gap-4\"\n              >\n                <DialogTitle :id=\"titleId\" as=\"div\" data-ds-drawer-title class=\"text-[14px] font-700 min-w-0 truncate\">\n                  <slot name=\"title\">\n                    {{ title ?? 'Drawer' }}\n                  </slot>\n                </DialogTitle>\n\n                <GrButton\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  square\n                  :aria-label=\"closeLabel\"\n                  @click=\"close\"\n                >\n                  <GrIcon size=\"sm\" aria-hidden=\"true\">\n                    <IconClose />\n                  </GrIcon>\n                </GrButton>\n              </div>\n\n              <div data-ds-drawer-body class=\"flex-1 overflow-y-auto\">\n                <div class=\"p-5\">\n                  <slot />\n                </div>\n              </div>\n\n              <div\n                v-if=\"$slots.footer\"\n                data-ds-drawer-footer\n                class=\"px-5 py-4 border-t border-[var(--brd)]\"\n              >\n                <slot name=\"footer\" />\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,MAAM,UAAU,OAAM;EAEtB,MAAM,aAAa,eAAe;AAChC,UAAO,mBAAmB;IAAE,MAAM,MAAM;IAAM,MAAM,MAAM;IAAM,CAAA;IACjE;EAED,MAAM,iBAAiB,eAAe,uBAAuB,MAAM,KAAK,CAAA;EAExE,SAAS,QAAc;AACrB,QAAK,qBAAqB,MAAK;;EAGjC,SAAS,gBAAsB;AAC7B,OAAI,CAAC,MAAM,gBAAiB;AAC5B,UAAM;;EAGR,SAAS,iBAAuB;AAC9B,OAAI,CAAC,MAAM,gBAAiB;AAC5B,UAAM;;EAGR,SAAS,UAAU,GAAwB;AACzC,OAAI,EAAE,QAAQ,SAAU;AACxB,OAAI,CAAC,MAAM,WAAY;AACvB,KAAE,iBAAgB;AAClB,KAAE,gBAAe;AACjB,UAAM;;;uBAKN,YAqFW,UAAA,EArFD,IAAG,QAAM,EAAA,CACjB,YAmFiB,MAAA,GAAA,EAAA;IAnFA,MAAM,QAAA;IAAY,IAAG;;2BAkF3B,CAjFT,YAiFS,MAAA,GAAA,EAAA;KAhFP,IAAG;KACH,kBAAA;KACA,OAAM;KACL,QAAQ;KACR,mBAAiB,MAAA,QAAO;KACxB,SAAO;KACE;;4BAyEJ,CAvEN,mBAuEM,OAvEN,YAuEM,CAtEJ,YAekB,MAAA,GAAA,EAAA;MAdhB,IAAG;MACH,OAAM;MACN,cAAW;MACX,YAAS;MACT,OAAM;MACN,cAAW;MACX,YAAS;;6BAOP,CALF,mBAKE,OAAA;OAJA,0BAAA;OACA,OAAM;OACN,eAAY;OACX,SAAO;;;SAIZ,YAoDkB,MAAA,GAAA,EAAA;MAnDhB,IAAG;MACH,OAAM;MACL,cAAY,eAAA;MACb,YAAS;MACT,OAAM;MACN,cAAW;MACV,YAAU,eAAA;;6BA4CG,CA1Cd,YA0Cc,MAAA,GAAA,EAAA;OAzCZ,wBAAA;OACA,UAAS;OACT,OAAK,eAAA,CAAC,iCACE,WAAA,MAAU,CAAA;;8BAuBZ;QArBN,mBAqBM,OArBN,YAqBM,CAjBJ,YAIc,MAAA,GAAA,EAAA;SAJA,IAAI,MAAA,QAAO;SAAE,IAAG;SAAM,wBAAA;SAAqB,OAAM;;gCAGtD,CAFP,WAEO,KAAA,QAAA,SAAA,EAAA,QAAA,CAAA,gBAAA,gBADF,QAAA,SAAK,SAAA,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;uBAIZ,YAUW,kBAAA;SATT,SAAQ;SACR,MAAK;SACL,QAAA;SACC,cAAY,QAAA;SACZ,SAAO;;gCAIC,CAFT,YAES,gBAAA;UAFD,MAAK;UAAK,eAAY;;iCACf,CAAb,YAAa,MAAA,UAAA,CAAA,CAAA,CAAA;;;;;QAKnB,mBAIM,OAJN,YAIM,CAHJ,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA;QAKJA,KAAAA,OAAO,UAAA,WAAA,EADf,mBAMM,OANN,YAMM,CADJ,WAAsB,KAAA,QAAA,SAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}

package/dist/components/GrDrawer/index.js

@@ -0,0 +1,3 @@
+import { n as grDrawerSafelist, t as grDrawerConfig } from "../../chunks/config-DxqpV-KM.js";
+import { t as GrDrawer_default } from "./chunks/GrDrawer-BJL_gTxI.js";
+export { GrDrawer_default as GrDrawer, GrDrawer_default as default, grDrawerConfig, grDrawerSafelist };

package/dist/components/GrDropdown/chunks/GrDropdown-DVTU32T_.js

@@ -0,0 +1,153 @@
+import { a as vClickOutside } from "../../../chunks/directives-Cuib0yOO.js";
+import { i as grDropdownWidthClass, n as grDropdownAlignmentClass, r as grDropdownContentClass } from "../../../chunks/grDropdownStyles-DQfLh-bp.js";
+import { Teleport, Transition, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onUnmounted, openBlock, ref, renderSlot, unref, vShow, watch, withCtx, withDirectives } from "vue";
+//#region src/components/GrDropdown/GrDropdown.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-ds-dropdown": "" };
+//#endregion
+//#region src/components/GrDropdown/GrDropdown.vue
+var GrDropdown_default = /* @__PURE__ */ defineComponent({
+	__name: "GrDropdown",
+	props: {
+		align: { default: "right" },
+		width: { default: "48" },
+		closeOnContentClick: {
+			type: Boolean,
+			default: true
+		},
+		contentClass: { default: "" },
+		teleportTo: { default: "body" }
+	},
+	setup(__props) {
+		const props = __props;
+		const open = ref(false);
+		const rootEl = ref(null);
+		const panelEl = ref(null);
+		const clickOutsideExclude = [() => panelEl.value];
+		const panelStyle = ref({
+			left: "0px",
+			top: "0px",
+			zIndex: "2147483647"
+		});
+		let syncFrame = 0;
+		function cancelPanelPositionSync() {
+			if (typeof window === "undefined") return;
+			if (!syncFrame) return;
+			window.cancelAnimationFrame(syncFrame);
+			syncFrame = 0;
+		}
+		function syncPanelPosition() {
+			if (typeof window === "undefined") return;
+			const root = rootEl.value;
+			if (!root) return;
+			const rootRect = root.getBoundingClientRect();
+			panelStyle.value = {
+				left: `${(() => {
+					if (props.align === "right") return rootRect.right;
+					if (props.align === "center") return rootRect.left + rootRect.width / 2;
+					return rootRect.left;
+				})()}px`,
+				top: `${rootRect.bottom + 8}px`,
+				zIndex: "2147483647"
+			};
+		}
+		function schedulePanelPositionSync() {
+			if (typeof window === "undefined") return;
+			if (syncFrame) return;
+			syncFrame = window.requestAnimationFrame(() => {
+				syncFrame = 0;
+				if (open.value) syncPanelPosition();
+			});
+		}
+		function bindPanelPositionListeners() {
+			if (typeof window === "undefined") return;
+			window.addEventListener("resize", schedulePanelPositionSync);
+			window.addEventListener("scroll", schedulePanelPositionSync, true);
+		}
+		function unbindPanelPositionListeners() {
+			if (typeof window === "undefined") return;
+			window.removeEventListener("resize", schedulePanelPositionSync);
+			window.removeEventListener("scroll", schedulePanelPositionSync, true);
+		}
+		function toggle() {
+			open.value = !open.value;
+		}
+		function close() {
+			open.value = false;
+		}
+		function closeOnEscape(e) {
+			if (e.key === "Escape") close();
+		}
+		watch(open, (isOpen) => {
+			if (typeof document === "undefined") return;
+			document.removeEventListener("keydown", closeOnEscape);
+			unbindPanelPositionListeners();
+			cancelPanelPositionSync();
+			if (isOpen) document.addEventListener("keydown", closeOnEscape);
+			if (!isOpen) return;
+			bindPanelPositionListeners();
+			syncPanelPosition();
+		}, { immediate: true });
+		watch(() => props.align, () => {
+			if (open.value) schedulePanelPositionSync();
+		});
+		onUnmounted(() => {
+			if (typeof document === "undefined") return;
+			document.removeEventListener("keydown", closeOnEscape);
+			unbindPanelPositionListeners();
+			cancelPanelPositionSync();
+		});
+		const widthClass = computed(() => grDropdownWidthClass(props.width));
+		const contentClasses = computed(() => grDropdownContentClass(props.contentClass));
+		const panelClasses = computed(() => {
+			return [
+				"fixed z-50",
+				widthClass.value,
+				grDropdownAlignmentClass(props.align)
+			].filter(Boolean);
+		});
+		function onContentClick() {
+			if (props.closeOnContentClick) close();
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [withDirectives((openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-ds-dropdown-trigger": "",
+				class: "inline-block max-w-full",
+				onClick: toggle
+			}, [renderSlot(_ctx.$slots, "trigger", {
+				open: open.value,
+				toggle,
+				close
+			})])), [[unref(vClickOutside), {
+				handler: close,
+				enabled: open.value,
+				exclude: clickOutsideExclude
+			}]]), (openBlock(), createBlock(Teleport, { to: __props.teleportTo }, [createVNode(Transition, {
+				"enter-active-class": "transition ease-out duration-150",
+				"enter-from-class": "transform opacity-0 scale-95",
+				"enter-to-class": "transform opacity-100 scale-100",
+				"leave-active-class": "transition ease-in duration-100",
+				"leave-from-class": "transform opacity-100 scale-100",
+				"leave-to-class": "transform opacity-0 scale-95"
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					ref_key: "panelEl",
+					ref: panelEl,
+					"data-ds-dropdown-panel": "",
+					class: normalizeClass(panelClasses.value),
+					style: normalizeStyle(panelStyle.value),
+					onClick: onContentClick
+				}, [createElementVNode("div", {
+					"data-ds-dropdown-content": "",
+					class: normalizeClass(contentClasses.value)
+				}, [renderSlot(_ctx.$slots, "content", { close })], 2)], 6), [[vShow, open.value]])]),
+				_: 3
+			})], 8, ["to"]))]);
+		};
+	}
+});
+//#endregion
+export { GrDropdown_default as t };
+
+//# sourceMappingURL=GrDropdown-DVTU32T_.js.map