@feugene/granularity 0.13.0 → 0.18.0

package/dist/components/GrFormSection/chunks/GrFormSection-BEh5n4jF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrFormSection-BEh5n4jF.js","names":["$slots"],"sources":["../../../../src/components/GrFormSection/GrFormSection.vue","../../../../src/components/GrFormSection/GrFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  formSectionActionsClass,\n  formSectionDescriptionClass,\n  formSectionHeaderClass,\n  formSectionRootClass,\n  formSectionTitleClass,\n  type GrFormSectionHeadingLevel,\n} from './grFormSectionStyles'\n\nexport type { GrFormSectionHeadingLevel } from './grFormSectionStyles'\n\n/**\n * Секция формы: заголовок, необязательное описание и контент.\n *\n * Структуру длинной формы незрячий пользователь обходит **по заголовкам**,\n * поэтому заголовок здесь настоящий (`h2`…`h6`), а не жирный текст.\n */\nexport interface GrFormSectionProps {\n  title?: string\n  description?: string\n  /** Уровень заголовка под структуру страницы. Не задан — берётся из `GrConfigProvider`, иначе `3`. */\n  headingLevel?: GrFormSectionHeadingLevel\n  /**\n   * Объявить секцию лендмарком `region`.\n   *\n   * По умолчанию выключено: пять секций формы дали бы пять лендмарков и\n   * засорили обзор, а структуру и так несёт заголовок. Включать стоит там, где\n   * секция действительно крупная и к ней хочется прыгать как к региону.\n   */\n  landmark?: boolean\n}\n\nconst props = withDefaults(defineProps<GrFormSectionProps>(), {\n  title: undefined,\n  description: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  headingLevel: undefined,\n  landmark: false,\n})\n\nconst slots = defineSlots<{\n  /** Контент секции. */\n  default?: () => unknown\n  /** Заголовок целиком — вместо строки `title`. */\n  title?: () => unknown\n  /** Описание целиком — вместо строки `description`. */\n  description?: () => unknown\n  /** Действия в правой части шапки: «Добавить», «Сбросить». */\n  actions?: () => unknown\n}>()\n\nconst titleId = useId()\nconst descriptionId = useId()\n\nconst headingLevel = useGrComponentProp('GrFormSection', 'headingLevel', () => props.headingLevel, 3)\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title))\nconst hasDescription = computed(() => Boolean(props.description || slots.description))\n\n// Имя навешивается только у лендмарка: безымянная `<section>` регионом не\n// считается и в обзор не попадает.\nconst labelledBy = computed(() => (props.landmark && hasTitle.value ? titleId : undefined))\nconst describedBy = computed(() => (hasDescription.value ? descriptionId : undefined))\n</script>\n\n<template>\n  <section\n    data-gr-form-section\n    :class=\"formSectionRootClass\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n  >\n    <div v-if=\"hasTitle || hasDescription || $slots.actions\" :class=\"formSectionHeaderClass\">\n      <div class=\"min-w-0\">\n        <component\n          :is=\"headingTag\"\n          v-if=\"hasTitle\"\n          :id=\"titleId\"\n          data-gr-form-section-title\n          :class=\"formSectionTitleClass\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </component>\n\n        <div\n          v-if=\"hasDescription\"\n          :id=\"descriptionId\"\n          data-gr-form-section-description\n          :class=\"formSectionDescriptionClass\"\n        >\n          <slot name=\"description\">\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n\n      <div v-if=\"$slots.actions\" data-gr-form-section-actions :class=\"formSectionActionsClass\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n\n    <slot />\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\n\nimport {\n  formSectionActionsClass,\n  formSectionDescriptionClass,\n  formSectionHeaderClass,\n  formSectionRootClass,\n  formSectionTitleClass,\n  type GrFormSectionHeadingLevel,\n} from './grFormSectionStyles'\n\nexport type { GrFormSectionHeadingLevel } from './grFormSectionStyles'\n\n/**\n * Секция формы: заголовок, необязательное описание и контент.\n *\n * Структуру длинной формы незрячий пользователь обходит **по заголовкам**,\n * поэтому заголовок здесь настоящий (`h2`…`h6`), а не жирный текст.\n */\nexport interface GrFormSectionProps {\n  title?: string\n  description?: string\n  /** Уровень заголовка под структуру страницы. Не задан — берётся из `GrConfigProvider`, иначе `3`. */\n  headingLevel?: GrFormSectionHeadingLevel\n  /**\n   * Объявить секцию лендмарком `region`.\n   *\n   * По умолчанию выключено: пять секций формы дали бы пять лендмарков и\n   * засорили обзор, а структуру и так несёт заголовок. Включать стоит там, где\n   * секция действительно крупная и к ней хочется прыгать как к региону.\n   */\n  landmark?: boolean\n}\n\nconst props = withDefaults(defineProps<GrFormSectionProps>(), {\n  title: undefined,\n  description: undefined,\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  headingLevel: undefined,\n  landmark: false,\n})\n\nconst slots = defineSlots<{\n  /** Контент секции. */\n  default?: () => unknown\n  /** Заголовок целиком — вместо строки `title`. */\n  title?: () => unknown\n  /** Описание целиком — вместо строки `description`. */\n  description?: () => unknown\n  /** Действия в правой части шапки: «Добавить», «Сбросить». */\n  actions?: () => unknown\n}>()\n\nconst titleId = useId()\nconst descriptionId = useId()\n\nconst headingLevel = useGrComponentProp('GrFormSection', 'headingLevel', () => props.headingLevel, 3)\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst hasTitle = computed(() => Boolean(props.title || slots.title))\nconst hasDescription = computed(() => Boolean(props.description || slots.description))\n\n// Имя навешивается только у лендмарка: безымянная `<section>` регионом не\n// считается и в обзор не попадает.\nconst labelledBy = computed(() => (props.landmark && hasTitle.value ? titleId : undefined))\nconst describedBy = computed(() => (hasDescription.value ? descriptionId : undefined))\n</script>\n\n<template>\n  <section\n    data-gr-form-section\n    :class=\"formSectionRootClass\"\n    :aria-labelledby=\"labelledBy\"\n    :aria-describedby=\"describedBy\"\n  >\n    <div v-if=\"hasTitle || hasDescription || $slots.actions\" :class=\"formSectionHeaderClass\">\n      <div class=\"min-w-0\">\n        <component\n          :is=\"headingTag\"\n          v-if=\"hasTitle\"\n          :id=\"titleId\"\n          data-gr-form-section-title\n          :class=\"formSectionTitleClass\"\n        >\n          <slot name=\"title\">\n            {{ title }}\n          </slot>\n        </component>\n\n        <div\n          v-if=\"hasDescription\"\n          :id=\"descriptionId\"\n          data-gr-form-section-description\n          :class=\"formSectionDescriptionClass\"\n        >\n          <slot name=\"description\">\n            {{ description }}\n          </slot>\n        </div>\n      </div>\n\n      <div v-if=\"$slots.actions\" data-gr-form-section-actions :class=\"formSectionActionsClass\">\n        <slot name=\"actions\" />\n      </div>\n    </div>\n\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EAqCA,MAAM,QAAQ;EASd,MAAM,QAAQ,SAAA;EAWd,MAAM,UAAU,MAAM;EACtB,MAAM,gBAAgB,MAAM;EAE5B,MAAM,eAAe,mBAAmB,iBAAiB,sBAAsB,MAAM,cAAc,CAAC;EACpG,MAAM,aAAa,eAAe,IAAI,aAAa,OAAO;EAE1D,MAAM,WAAW,eAAe,QAAQ,MAAM,SAAS,MAAM,KAAK,CAAC;EACnE,MAAM,iBAAiB,eAAe,QAAQ,MAAM,eAAe,MAAM,WAAW,CAAC;EAIrF,MAAM,aAAa,eAAgB,MAAM,YAAY,SAAS,QAAQ,UAAU,KAAA,CAAU;EAC1F,MAAM,cAAc,eAAgB,eAAe,QAAQ,gBAAgB,KAAA,CAAU;;uBAInF,mBAsCU,WAAA;IArCR,wBAAA;IACC,OAAK,eAAE,MAAA,oBAAA,CAAoB;IAC3B,mBAAiB,WAAA;IACjB,oBAAkB,YAAA;OAER,SAAA,SAAY,eAAA,SAAkBA,KAAAA,OAAO,WAAA,UAAA,GAAhD,mBA6BM,OAAA;;IA7BoD,OAAK,eAAE,MAAA,sBAAA,CAAsB;OACrF,mBAuBM,OAvBN,YAuBM,CApBI,SAAA,SAAA,UAAA,GAFR,YAUY,wBATL,WAAA,KAAU,GAAA;;IAEd,IAAI,MAAA,OAAA;IACL,8BAAA;IACC,OAAK,eAAE,MAAA,qBAAA,CAAqB;;2BAItB,CAFP,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADF,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;;2DAKJ,eAAA,SAAA,UAAA,GADR,mBASM,OAAA;;IAPH,IAAI,MAAA,aAAA;IACL,oCAAA;IACC,OAAK,eAAE,MAAA,2BAAA,CAA2B;OAEnC,WAEO,KAAA,QAAA,eAAA,CAAA,SAAA,CAAA,gBAAA,gBADF,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAKTA,KAAAA,OAAO,WAAA,UAAA,GAAlB,mBAEM,OAAA;;IAFqB,gCAAA;IAA8B,OAAK,eAAE,MAAA,uBAAA,CAAuB;OACrF,WAAuB,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAI3B,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/GrFormSection/index.js

@@ -1,3 +1,3 @@
-import { t as GrFormSection_default } from "./chunks/GrFormSection-C3w9DQJf.js";
-import { t as grFormSectionConfig } from "../../chunks/config-B0qIpo8m.js";
-export { GrFormSection_default as GrFormSection, GrFormSection_default as default, grFormSectionConfig };
+import { n as grFormSectionSafelist, r as GR_FORM_SECTION_HEADING_LEVELS, t as grFormSectionConfig } from "../../chunks/config-DhHbU3zO.js";
+import { t as GrFormSection_default } from "./chunks/GrFormSection-BEh5n4jF.js";
+export { GR_FORM_SECTION_HEADING_LEVELS, GrFormSection_default as GrFormSection, GrFormSection_default as default, grFormSectionConfig, grFormSectionSafelist };

package/dist/components/GrIcon/chunks/GrIcon-BvA2ZGXP.js

@@ -0,0 +1,57 @@
+import { o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { a as iconSpinClass, i as iconSizeVarBySize, n as grIconToneClass, r as iconBaseClass } from "../../../chunks/grIconStyles-BwJrml2L.js";
+import { computed, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot } from "vue";
+import '../styles.css';//#region src/components/GrIcon/GrIcon.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+];
+//#endregion
+//#region src/components/GrIcon/GrIcon.vue
+var GrIcon_default = /* @__PURE__ */ defineComponent({
+	__name: "GrIcon",
+	props: {
+		size: { default: void 0 },
+		label: { default: void 0 },
+		tone: { default: "current" },
+		spin: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const resolvedScaleSize = useGrComponentSize(() => typeof props.size === "number" ? void 0 : props.size, { component: "GrIcon" });
+		const iconStyle = computed(() => ({ "--gr-icon-size": typeof props.size === "number" ? `${props.size}px` : iconSizeVarBySize[resolvedScaleSize.value] }));
+		const iconClass = computed(() => [
+			iconBaseClass,
+			grIconToneClass(props.tone),
+			props.spin ? iconSpinClass : ""
+		].filter(Boolean));
+		/**
+		* Иконка декоративна по умолчанию.
+		*
+		* В библиотеке она почти всегда сопровождает текст, и каждое место вызова
+		* ставило `aria-hidden` вручную. Достаточно забыть один раз — и диктор
+		* прочитает `<title>` из SVG вместо ничего. Значимой иконку делает `label`:
+		* тогда у неё появляются роль и имя, а скрытие снимается.
+		*
+		* Переопределить это потребитель по-прежнему может: fallthrough-атрибут
+		* сильнее собственной привязки.
+		*/
+		const ariaHidden = computed(() => props.label ? void 0 : "true");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				"data-gr-icon": "",
+				class: normalizeClass(iconClass.value),
+				style: normalizeStyle(iconStyle.value),
+				role: __props.label ? "img" : void 0,
+				"aria-label": __props.label,
+				"aria-hidden": ariaHidden.value
+			}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrIcon_default as t };

package/dist/components/GrIcon/chunks/GrIcon-BvA2ZGXP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrIcon-BvA2ZGXP.js","names":[],"sources":["../../../../src/components/GrIcon/GrIcon.vue","../../../../src/components/GrIcon/GrIcon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  grIconToneClass,\n  iconBaseClass,\n  iconSizeVarBySize,\n  iconSpinClass,\n  type GrIconSize,\n  type GrIconTone,\n} from './grIconStyles'\n\nexport type { GrIconSize, GrIconTone } from './grIconStyles'\n\nexport interface GrIconProps {\n  /** Размер по шкале пакета либо произвольный в пикселях. */\n  size?: GrIconSize | number\n  /**\n   * Имя значимой иконки. Задан — иконка объявляется `role=\"img\"` и перестаёт\n   * быть скрытой. Не задан — иконка декоративна.\n   */\n  label?: string\n  /** Цвет из палитры. `current` — наследовать цвет текста родителя. */\n  tone?: GrIconTone\n  /** Вращение — для спиннеров. */\n  spin?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrIconProps>(),\n  {\n    size: undefined,\n    label: undefined,\n    tone: 'current',\n    spin: false,\n  },\n)\n\n// Число — «локальный» escape-hatch мимо конфига; шкала идёт через провайдер.\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof props.size === 'number' ? undefined : props.size),\n  { component: 'GrIcon' },\n)\n\nconst iconStyle = computed(() => ({\n  '--gr-icon-size': typeof props.size === 'number'\n    ? `${props.size}px`\n    : iconSizeVarBySize[resolvedScaleSize.value],\n} as Record<string, string>))\n\nconst iconClass = computed(() => [\n  iconBaseClass,\n  grIconToneClass(props.tone),\n  props.spin ? iconSpinClass : '',\n].filter(Boolean))\n\n/**\n * Иконка декоративна по умолчанию.\n *\n * В библиотеке она почти всегда сопровождает текст, и каждое место вызова\n * ставило `aria-hidden` вручную. Достаточно забыть один раз — и диктор\n * прочитает `<title>` из SVG вместо ничего. Значимой иконку делает `label`:\n * тогда у неё появляются роль и имя, а скрытие снимается.\n *\n * Переопределить это потребитель по-прежнему может: fallthrough-атрибут\n * сильнее собственной привязки.\n */\nconst ariaHidden = computed(() => (props.label ? undefined : 'true'))\n</script>\n\n<template>\n  <span\n    data-gr-icon\n    :class=\"iconClass\"\n    :style=\"iconStyle\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"ariaHidden\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n/*\n * Стиль намеренно глобальный, а не scoped: иконка приходит слотом (SVG\n * потребителя), и scoped-правило до него не достаёт — пришлось бы писать\n * `:deep` в каждом месте вызова.\n *\n * Размер живёт в одной переменной: и обёртка, и вложенный SVG считают себя от\n * неё, поэтому шкала настраивается темой, а не пропами разметки.\n */\n:where(.gr-icon) {\n  --gr-icon-size: var(--gr-icon-size-md, 18px);\n  width: var(--gr-icon-size);\n  min-width: var(--gr-icon-size);\n  height: var(--gr-icon-size);\n  line-height: 0;\n  flex: none;\n}\n\n:where(.gr-icon svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport {\n  grIconToneClass,\n  iconBaseClass,\n  iconSizeVarBySize,\n  iconSpinClass,\n  type GrIconSize,\n  type GrIconTone,\n} from './grIconStyles'\n\nexport type { GrIconSize, GrIconTone } from './grIconStyles'\n\nexport interface GrIconProps {\n  /** Размер по шкале пакета либо произвольный в пикселях. */\n  size?: GrIconSize | number\n  /**\n   * Имя значимой иконки. Задан — иконка объявляется `role=\"img\"` и перестаёт\n   * быть скрытой. Не задан — иконка декоративна.\n   */\n  label?: string\n  /** Цвет из палитры. `current` — наследовать цвет текста родителя. */\n  tone?: GrIconTone\n  /** Вращение — для спиннеров. */\n  spin?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrIconProps>(),\n  {\n    size: undefined,\n    label: undefined,\n    tone: 'current',\n    spin: false,\n  },\n)\n\n// Число — «локальный» escape-hatch мимо конфига; шкала идёт через провайдер.\nconst resolvedScaleSize = useGrComponentSize(\n  () => (typeof props.size === 'number' ? undefined : props.size),\n  { component: 'GrIcon' },\n)\n\nconst iconStyle = computed(() => ({\n  '--gr-icon-size': typeof props.size === 'number'\n    ? `${props.size}px`\n    : iconSizeVarBySize[resolvedScaleSize.value],\n} as Record<string, string>))\n\nconst iconClass = computed(() => [\n  iconBaseClass,\n  grIconToneClass(props.tone),\n  props.spin ? iconSpinClass : '',\n].filter(Boolean))\n\n/**\n * Иконка декоративна по умолчанию.\n *\n * В библиотеке она почти всегда сопровождает текст, и каждое место вызова\n * ставило `aria-hidden` вручную. Достаточно забыть один раз — и диктор\n * прочитает `<title>` из SVG вместо ничего. Значимой иконку делает `label`:\n * тогда у неё появляются роль и имя, а скрытие снимается.\n *\n * Переопределить это потребитель по-прежнему может: fallthrough-атрибут\n * сильнее собственной привязки.\n */\nconst ariaHidden = computed(() => (props.label ? undefined : 'true'))\n</script>\n\n<template>\n  <span\n    data-gr-icon\n    :class=\"iconClass\"\n    :style=\"iconStyle\"\n    :role=\"label ? 'img' : undefined\"\n    :aria-label=\"label\"\n    :aria-hidden=\"ariaHidden\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n/*\n * Стиль намеренно глобальный, а не scoped: иконка приходит слотом (SVG\n * потребителя), и scoped-правило до него не достаёт — пришлось бы писать\n * `:deep` в каждом месте вызова.\n *\n * Размер живёт в одной переменной: и обёртка, и вложенный SVG считают себя от\n * неё, поэтому шкала настраивается темой, а не пропами разметки.\n */\n:where(.gr-icon) {\n  --gr-icon-size: var(--gr-icon-size-md, 18px);\n  width: var(--gr-icon-size);\n  min-width: var(--gr-icon-size);\n  height: var(--gr-icon-size);\n  line-height: 0;\n  flex: none;\n}\n\n:where(.gr-icon svg) {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,QAAQ;EAWd,MAAM,oBAAoB,yBACjB,OAAO,MAAM,SAAS,WAAW,KAAA,IAAY,MAAM,MAC1D,EAAE,WAAW,SAAS,CACxB;EAEA,MAAM,YAAY,gBAAgB,EAChC,kBAAkB,OAAO,MAAM,SAAS,WACpC,GAAG,MAAM,KAAK,MACd,kBAAkB,kBAAkB,OAC1C,EAA4B;EAE5B,MAAM,YAAY,eAAe;GAC/B;GACA,gBAAgB,MAAM,IAAI;GAC1B,MAAM,OAAO,gBAAgB;EAC/B,CAAC,CAAC,OAAO,OAAO,CAAC;;;;;;;;;;;;EAajB,MAAM,aAAa,eAAgB,MAAM,QAAQ,KAAA,IAAY,MAAO;;uBAIlE,mBASO,QAAA;IARL,gBAAA;IACC,OAAK,eAAE,UAAA,KAAS;IAChB,OAAK,eAAE,UAAA,KAAS;IAChB,MAAM,QAAA,QAAK,QAAW,KAAA;IACtB,cAAY,QAAA;IACZ,eAAa,WAAA;OAEd,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,IAAA,UAAA"}

package/dist/components/GrIcon/index.js

@@ -1,3 +1,3 @@
-import { t as GrIcon_default } from "./chunks/GrIcon-D9AWQLk2.js";
-import { t as grIconConfig } from "../../chunks/config-BEegFP74.js";
-export { GrIcon_default as GrIcon, GrIcon_default as default, grIconConfig };
+import { t as GrIcon_default } from "./chunks/GrIcon-BvA2ZGXP.js";
+import { n as grIconSafelist, t as grIconConfig } from "../../chunks/config-Cp0DE0GH.js";
+export { GrIcon_default as GrIcon, GrIcon_default as default, grIconConfig, grIconSafelist };

package/dist/components/GrIcon/styles.css

@@ -0,0 +1 @@
+:where(.gr-icon){--gr-icon-size:var(--gr-icon-size-md,18px);width:var(--gr-icon-size);min-width:var(--gr-icon-size);height:var(--gr-icon-size);flex:none;line-height:0}:where(.gr-icon svg){width:100%;height:100%;display:block}