@feugene/granularity 0.13.0 → 0.16.0

package/dist/components/GrTextarea/chunks/GrTextarea-DUh5Tlo4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTextarea-DUh5Tlo4.js","names":["$attrs"],"sources":["../../../../src/components/GrTextarea/GrTextarea.vue","../../../../src/components/GrTextarea/GrTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed, ref, useId } from 'vue'\nimport {\n  countClass,\n  countRowClass,\n  lineCountClass,\n  disabledSurfaceClass,\n  enabledSurfaceClass,\n  grTextareaClass,\n  resizeClass,\n  sizes,\n  type GrTextareaResize,\n  type GrTextareaSize,\n  type GrTextareaState,\n} from './grTextareaStyles'\nimport IconX from '~icons/lucide/x'\nimport { vAutosize } from '../../directives'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport interface GrTextareaProps {\n  modelValue: string\n  placeholder?: string\n  autocomplete?: string\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: GrTextareaState\n  name?: string\n  id?: string\n  rows?: number\n  size?: GrTextareaSize\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Показывать счётчик строк. Считаются **логические** строки (переводы строки), а\n   * не визуальные переносы: при `autosize` число не меняется от ширины поля.\n   */\n  showLineCount?: boolean\n  /**\n   * Ориентир по числу строк для счётчика (`3 / 10`). Ввод не ограничивает: обрезать\n   * набранный текст за пользователя компонент не вправе.\n   */\n  maxLines?: number\n  /** Подгонять высоту под содержимое (директива `v-autosize`). */\n  autosize?: boolean\n  /** Кнопка очистки значения. Настраивается через `GrConfigProvider`. */\n  clearable?: boolean\n  /** A11y-подпись кнопки очистки. */\n  clearLabel?: string\n  /** Ручное изменение размера пользователем. */\n  resize?: GrTextareaResize\n}\n\nexport interface GrTextareaEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur`. */\n  (e: 'change', value: string): void\n  /** Значение стёрто кнопкой очистки. */\n  (e: 'clear'): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrTextareaProps>(), {\n  placeholder: undefined,\n  autocomplete: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n  state: 'default',\n  name: undefined,\n  id: undefined,\n  rows: 4,\n  size: undefined,\n  maxlength: undefined,\n  showCount: false,\n  autosize: false,\n  clearable: undefined,\n  clearLabel: undefined,\n  resize: 'vertical',\n})\n\ndefineOptions({\n  // Иначе атрибуты потребителя (`data-*`, `aria-*`, `name`) садятся на корень,\n  // а корень со `showCount` — обёртка счётчика, а не само поле.\n  inheritAttrs: false,\n})\n\nconst emit = defineEmits<GrTextareaEmits>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required).\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том что ограничение длины и есть его смысл.\nconst countId = useId()\nconst lineCountId = useId()\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    props.showCount ? countId : undefined,\n    props.showLineCount ? lineCountId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\n/** Обёртка нужна любому из счётчиков — и кнопке очистки. */\nconst hasCounters = computed(() => props.showCount || props.showLineCount)\n\nconst lineCount = computed(() => props.modelValue.split('\\n').length)\n\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst textareaEl = ref<HTMLTextAreaElement | null>(null)\n\nfunction focus(): void {\n  textareaEl.value?.focus()\n}\n\nfunction blur(): void {\n  textareaEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTextarea' })\nconst resolvedClearable = useGrComponentProp('GrTextarea', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\n\n/** С `maxLines` — «3 / 10», без него — локализованная подпись с формой числа. */\nconst lineCountText = computed(() => (\n  props.maxLines !== undefined\n    ? `${lineCount.value} / ${props.maxLines}`\n    : t('gr.textarea.lines', '{n} lines', { n: lineCount.value })\n))\n\nconst showClear = computed(() =>\n  resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('change', '')\n  emit('clear')\n  focus()\n}\n\nconst baseClass = 'w-full rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed'\n\nconst className = computed(() => [\n  sizes[resolvedSize.value],\n  resizeClass[props.resize],\n  isDisabled.value ? disabledSurfaceClass : enabledSurfaceClass,\n  grTextareaClass({\n    state: props.state,\n    invalid: isInvalid.value,\n  }),\n].join(' '))\n\n// Обе ветки шаблона (со счётчиком и без) рендерят одно и то же поле, поэтому\n// атрибуты живут одним объектом: двадцать строк копипасты расходятся молча.\nconst textareaAttrs = computed(() => ({\n  id: resolvedId.value,\n  'data-gr-textarea': '',\n  name: props.name,\n  rows: props.rows,\n  maxlength: props.maxlength,\n  autocomplete: props.autocomplete,\n  placeholder: props.placeholder,\n  disabled: isDisabled.value,\n  value: props.modelValue,\n  'aria-invalid': isInvalid.value ? ('true' as const) : undefined,\n  'aria-describedby': describedBy.value,\n  'aria-required': isRequired.value ? ('true' as const) : undefined,\n  'aria-readonly': isReadonly.value ? ('true' as const) : undefined,\n  'aria-label': props.ariaLabel,\n  readonly: isReadonly.value,\n  class: [baseClass, className.value],\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLTextAreaElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n</script>\n\n<template>\n  <div v-if=\"hasCounters\" data-gr-textarea-wrap class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <div :class=\"countRowClass\">\n      <div\n        v-if=\"showLineCount\"\n        :id=\"lineCountId\"\n        data-gr-textarea-line-count\n        :class=\"lineCountClass\"\n      >\n        {{ lineCountText }}\n      </div>\n\n      <!-- Символьный счётчик всегда прижат вправо: без счётчика строк он остаётся\n           единственным в ряду, и `justify-between` его туда и отправляет. -->\n      <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-textarea-count\n        class=\"ml-auto\"\n        :class=\"countClass\"\n      >\n        {{ countText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- Обёртка появляется только под кнопку очистки: без неё поле остаётся\n       корневым элементом — на этом стоит контракт fallthrough-атрибутов. -->\n  <div v-else-if=\"resolvedClearable\" class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n  </div>\n\n  <textarea\n    v-else\n    ref=\"textareaEl\"\n    v-autosize=\"autosize\"\n    v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n    @input=\"onInput\"\n    @change=\"onChange\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n  />\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed, ref, useId } from 'vue'\nimport {\n  countClass,\n  countRowClass,\n  lineCountClass,\n  disabledSurfaceClass,\n  enabledSurfaceClass,\n  grTextareaClass,\n  resizeClass,\n  sizes,\n  type GrTextareaResize,\n  type GrTextareaSize,\n  type GrTextareaState,\n} from './grTextareaStyles'\nimport IconX from '~icons/lucide/x'\nimport { vAutosize } from '../../directives'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport interface GrTextareaProps {\n  modelValue: string\n  placeholder?: string\n  autocomplete?: string\n  disabled?: boolean\n  /** Только для чтения: значение видно и уходит в форму, но не редактируется. */\n  readonly?: boolean\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n  required?: boolean\n  /** Доступное имя вне `GrFormField`. */\n  ariaLabel?: string\n  state?: GrTextareaState\n  name?: string\n  id?: string\n  rows?: number\n  size?: GrTextareaSize\n  /** Ограничение длины + основа для счётчика символов. */\n  maxlength?: number\n  /** Показывать счётчик символов (`len` или `len/maxlength`). */\n  showCount?: boolean\n  /**\n   * Показывать счётчик строк. Считаются **логические** строки (переводы строки), а\n   * не визуальные переносы: при `autosize` число не меняется от ширины поля.\n   */\n  showLineCount?: boolean\n  /**\n   * Ориентир по числу строк для счётчика (`3 / 10`). Ввод не ограничивает: обрезать\n   * набранный текст за пользователя компонент не вправе.\n   */\n  maxLines?: number\n  /** Подгонять высоту под содержимое (директива `v-autosize`). */\n  autosize?: boolean\n  /** Кнопка очистки значения. Настраивается через `GrConfigProvider`. */\n  clearable?: boolean\n  /** A11y-подпись кнопки очистки. */\n  clearLabel?: string\n  /** Ручное изменение размера пользователем. */\n  resize?: GrTextareaResize\n}\n\nexport interface GrTextareaEmits {\n  (e: 'update:modelValue', value: string): void\n  /** Значение зафиксировано нативным `change` — по `blur`. */\n  (e: 'change', value: string): void\n  /** Значение стёрто кнопкой очистки. */\n  (e: 'clear'): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrTextareaProps>(), {\n  placeholder: undefined,\n  autocomplete: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n  state: 'default',\n  name: undefined,\n  id: undefined,\n  rows: 4,\n  size: undefined,\n  maxlength: undefined,\n  showCount: false,\n  autosize: false,\n  clearable: undefined,\n  clearLabel: undefined,\n  resize: 'vertical',\n})\n\ndefineOptions({\n  // Иначе атрибуты потребителя (`data-*`, `aria-*`, `name`) садятся на корень,\n  // а корень со `showCount` — обёртка счётчика, а не само поле.\n  inheritAttrs: false,\n})\n\nconst emit = defineEmits<GrTextareaEmits>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required).\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => props.id ?? field?.id.value)\n\n// Счётчик обязан быть частью описания поля: иначе «12 / 60» видно глазами, но\n// не слышно — при том что ограничение длины и есть его смысл.\nconst countId = useId()\nconst lineCountId = useId()\nconst describedBy = computed(() =>\n  [\n    field?.describedById.value,\n    props.showCount ? countId : undefined,\n    props.showLineCount ? lineCountId : undefined,\n  ]\n    .filter(Boolean)\n    .join(' ') || undefined,\n)\n\n/** Обёртка нужна любому из счётчиков — и кнопке очистки. */\nconst hasCounters = computed(() => props.showCount || props.showLineCount)\n\nconst lineCount = computed(() => props.modelValue.split('\\n').length)\n\nconst countText = computed(() =>\n  props.maxlength !== undefined ? `${props.modelValue.length} / ${props.maxlength}` : String(props.modelValue.length),\n)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n} = useGrFormControl(() => props)\n\nconst textareaEl = ref<HTMLTextAreaElement | null>(null)\n\nfunction focus(): void {\n  textareaEl.value?.focus()\n}\n\nfunction blur(): void {\n  textareaEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrTextarea' })\nconst resolvedClearable = useGrComponentProp('GrTextarea', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.input.clear', 'Clear'))\n\n/** С `maxLines` — «3 / 10», без него — локализованная подпись с формой числа. */\nconst lineCountText = computed(() => (\n  props.maxLines !== undefined\n    ? `${lineCount.value} / ${props.maxLines}`\n    : t('gr.textarea.lines', '{n} lines', { n: lineCount.value })\n))\n\nconst showClear = computed(() =>\n  resolvedClearable.value && !isDisabled.value && !isReadonly.value && props.modelValue !== '',\n)\n\nfunction clear(): void {\n  emit('update:modelValue', '')\n  emit('change', '')\n  emit('clear')\n  focus()\n}\n\nconst baseClass = 'w-full rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] placeholder:text-[var(--gr-muted-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed'\n\nconst className = computed(() => [\n  sizes[resolvedSize.value],\n  resizeClass[props.resize],\n  isDisabled.value ? disabledSurfaceClass : enabledSurfaceClass,\n  grTextareaClass({\n    state: props.state,\n    invalid: isInvalid.value,\n  }),\n].join(' '))\n\n// Обе ветки шаблона (со счётчиком и без) рендерят одно и то же поле, поэтому\n// атрибуты живут одним объектом: двадцать строк копипасты расходятся молча.\nconst textareaAttrs = computed(() => ({\n  id: resolvedId.value,\n  'data-gr-textarea': '',\n  name: props.name,\n  rows: props.rows,\n  maxlength: props.maxlength,\n  autocomplete: props.autocomplete,\n  placeholder: props.placeholder,\n  disabled: isDisabled.value,\n  value: props.modelValue,\n  'aria-invalid': isInvalid.value ? ('true' as const) : undefined,\n  'aria-describedby': describedBy.value,\n  'aria-required': isRequired.value ? ('true' as const) : undefined,\n  'aria-readonly': isReadonly.value ? ('true' as const) : undefined,\n  'aria-label': props.ariaLabel,\n  readonly: isReadonly.value,\n  class: [baseClass, className.value],\n}))\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n\n// Объявленный emit уходит из `$attrs`, поэтому нативные события переизлучаем\n// руками — иначе `@change`/`@focus`/`@blur` у потребителя перестали бы работать.\nfunction onChange(e: Event): void {\n  emit('change', (e.target as HTMLTextAreaElement).value)\n}\n\nfunction onFocus(e: FocusEvent): void {\n  emit('focus', e)\n}\n\nfunction onBlur(e: FocusEvent): void {\n  emit('blur', e)\n}\n</script>\n\n<template>\n  <div v-if=\"hasCounters\" data-gr-textarea-wrap class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n\n    <div :class=\"countRowClass\">\n      <div\n        v-if=\"showLineCount\"\n        :id=\"lineCountId\"\n        data-gr-textarea-line-count\n        :class=\"lineCountClass\"\n      >\n        {{ lineCountText }}\n      </div>\n\n      <!-- Символьный счётчик всегда прижат вправо: без счётчика строк он остаётся\n           единственным в ряду, и `justify-between` его туда и отправляет. -->\n      <div\n        v-if=\"showCount\"\n        :id=\"countId\"\n        data-gr-textarea-count\n        class=\"ml-auto\"\n        :class=\"countClass\"\n      >\n        {{ countText }}\n      </div>\n    </div>\n  </div>\n\n  <!-- Обёртка появляется только под кнопку очистки: без неё поле остаётся\n       корневым элементом — на этом стоит контракт fallthrough-атрибутов. -->\n  <div v-else-if=\"resolvedClearable\" class=\"relative w-full\">\n    <textarea\n      ref=\"textareaEl\"\n      v-autosize=\"autosize\"\n      v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n      @input=\"onInput\"\n      @change=\"onChange\"\n      @focus=\"onFocus\"\n      @blur=\"onBlur\"\n    />\n\n    <button\n      v-if=\"showClear\"\n      type=\"button\"\n      data-gr-textarea-clear\n      :aria-label=\"resolvedClearLabel\"\n      class=\"absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-[var(--gr-radius-sm)] text-[var(--gr-muted-fg)] transition-colors hover:bg-[var(--gr-muted)] hover:text-[var(--gr-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]\"\n      @click=\"clear\"\n    >\n      <IconX class=\"h-4 w-4\" aria-hidden=\"true\" />\n    </button>\n  </div>\n\n  <textarea\n    v-else\n    ref=\"textareaEl\"\n    v-autosize=\"autosize\"\n    v-bind=\"{ ...textareaAttrs, ...$attrs }\"\n    @input=\"onInput\"\n    @change=\"onChange\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n  />\n</template>\n"],"mappings":"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"}

package/dist/components/GrTextarea/index.js

@@ -1,3 +1,3 @@
-import { n as grTextareaSafelist, t as grTextareaConfig } from "../../chunks/config-B0i5r8kH.js";
-import { t as GrTextarea_default } from "./chunks/GrTextarea-DIYBAPpP.js";
+import { t as GrTextarea_default } from "./chunks/GrTextarea-DUh5Tlo4.js";
+import { n as grTextareaSafelist, t as grTextareaConfig } from "../../chunks/config-Zc_bUvZY2.js";
 export { GrTextarea_default as GrTextarea, GrTextarea_default as default, grTextareaConfig, grTextareaSafelist };

package/dist/components/GrTimeline/chunks/GrTimeline-CE9b3s18.js

@@ -0,0 +1,285 @@
+import { a as useGrComponentProp } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrSkeleton_default } from "../../GrSkeleton/chunks/GrSkeleton-DEvNE3bC.js";
+import { n as hasMeaningfulSlotContent } from "../../../chunks/slotNodes-DxNXpC7v.js";
+import { a as grTimelineDensityClass, c as loadingRowClass, i as emptyClass, l as timeClass, o as grTimelineMarkerClass, r as descriptionClass, s as groupTitleClass, u as titleClass } from "../../../chunks/config-Cw6TDzWv2.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, normalizeClass, openBlock, provide, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useSlots, withCtx } from "vue";
+import '../styles.css';//#region src/components/GrTimeline/grTimelineContext.ts
+/**
+* Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе
+* `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.
+*/
+var GR_TIMELINE_HEADING_LEVELS = [
+	2,
+	3,
+	4,
+	5,
+	6
+];
+var GR_TIMELINE_CONTEXT = Symbol("GR_TIMELINE_CONTEXT");
+//#endregion
+//#region src/components/GrTimeline/timelineGroups.ts
+function keyOf(item, index, groupBy) {
+	if (typeof groupBy === "function") return String(groupBy(item, index) ?? "");
+	const value = item?.[groupBy];
+	return value == null ? "" : String(value);
+}
+/**
+* Режет набор на группы, **не меняя порядок**: лента хронологична, и
+* пересортировать её компонент не вправе. Порядок групп — порядок первого
+* вхождения ключа; разорванная группа (`A B A`) собирается в одну.
+*
+* Без `groupBy` — одна безымянная группа: плоская лента остаётся частным
+* случаем, и второй ветки рендера у компонента не появляется.
+*/
+function groupTimelineItems(items, groupBy) {
+	const entries = items.map((item, index) => ({
+		item,
+		index
+	}));
+	if (groupBy === void 0) return entries.length === 0 ? [] : [{
+		key: "",
+		entries
+	}];
+	const byKey = /* @__PURE__ */ new Map();
+	for (const entry of entries) {
+		const key = keyOf(entry.item, entry.index, groupBy);
+		const group = byKey.get(key);
+		if (group) group.entries.push(entry);
+		else byKey.set(key, {
+			key,
+			entries: [entry]
+		});
+	}
+	return [...byKey.values()];
+}
+//#endregion
+//#region src/components/GrTimeline/GrTimeline.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = [
+	"data-layout",
+	"data-orientation",
+	"aria-busy"
+];
+var _hoisted_2$1 = {
+	key: 0,
+	"data-gr-timeline-group-header": ""
+};
+var _hoisted_3$1 = ["tabindex"];
+var _hoisted_4$1 = ["tabindex"];
+//#endregion
+//#region src/components/GrTimeline/GrTimeline.vue
+var GrTimeline_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTimeline",
+	props: {
+		items: { default: void 0 },
+		itemKey: {
+			type: [String, Function],
+			default: void 0
+		},
+		groupBy: {
+			type: [String, Function],
+			default: void 0
+		},
+		groupHeadingLevel: { default: void 0 },
+		layout: { default: void 0 },
+		orientation: { default: void 0 },
+		density: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		loadingRows: { default: 3 },
+		empty: {
+			type: Boolean,
+			default: void 0
+		},
+		emptyText: { default: void 0 }
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const { t } = useGranularityTranslations();
+		const density = useGrComponentProp("GrTimeline", "density", () => props.density, "regular");
+		const orientation = useGrComponentProp("GrTimeline", "orientation", () => props.orientation, "vertical");
+		const headingLevel = useGrComponentProp("GrTimeline", "groupHeadingLevel", () => props.groupHeadingLevel, 3);
+		const requestedLayout = useGrComponentProp("GrTimeline", "layout", () => props.layout, "stacked");
+		/**
+		* Горизонтальная лента знает одну раскладку: колонка времени и чередование
+		* сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.
+		*/
+		const layout = computed(() => orientation.value === "horizontal" ? "stacked" : requestedLayout.value);
+		const headingTag = computed(() => `h${headingLevel.value}`);
+		const dataMode = computed(() => props.items !== void 0);
+		const grouped = computed(() => dataMode.value && props.groupBy !== void 0);
+		const groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy));
+		/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */
+		const entries = computed(() => groups.value[0]?.entries ?? []);
+		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.timeline.empty", "Nothing here yet"));
+		const isEmpty = computed(() => {
+			if (props.empty !== void 0) return props.empty;
+			if (dataMode.value) return props.items.length === 0;
+			return !hasMeaningfulSlotContent(slots.default?.() ?? []);
+		});
+		const loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)));
+		function keyOf(item, index) {
+			const key = props.itemKey;
+			if (typeof key === "function") return key(item, index);
+			if (typeof key === "string") return item[key];
+			return index;
+		}
+		function itemsOf(group) {
+			return group.entries.map((entry) => entry.item);
+		}
+		provide(GR_TIMELINE_CONTEXT, {
+			layout,
+			orientation,
+			density
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				"data-gr-timeline": "",
+				"data-layout": layout.value,
+				"data-orientation": unref(orientation),
+				"aria-busy": __props.loading ? "true" : void 0
+			}, [__props.loading ? renderSlot(_ctx.$slots, "loading", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(loadingRowCount.value, (row) => {
+				return openBlock(), createElementBlock("div", {
+					key: row,
+					"data-gr-timeline-loading-row": "",
+					class: normalizeClass(unref(loadingRowClass))
+				}, [createVNode(GrSkeleton_default, {
+					variant: "circle",
+					width: "var(--gr-timeline-marker-size, 10px)"
+				}), createVNode(GrSkeleton_default)], 2);
+			}), 128))], void 0, 0) : isEmpty.value ? (openBlock(), createElementBlock("div", {
+				key: 1,
+				"data-gr-timeline-empty": "",
+				class: normalizeClass(unref(emptyClass))
+			}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 2)) : grouped.value ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(groups.value, (group) => {
+				return openBlock(), createElementBlock("section", {
+					key: group.key,
+					"data-gr-timeline-group": ""
+				}, [group.key ? (openBlock(), createElementBlock("div", _hoisted_2$1, [_cache[0] || (_cache[0] = createElementVNode("div", {
+					"data-gr-timeline-rail": "",
+					"aria-hidden": "true"
+				}, [createElementVNode("span", { "data-gr-timeline-line": "" })], -1)), (openBlock(), createBlock(resolveDynamicComponent(headingTag.value), {
+					"data-gr-timeline-group-title": "",
+					class: normalizeClass(unref(groupTitleClass))
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "group", {
+						group: group.key,
+						items: itemsOf(group)
+					}, () => [createTextVNode(toDisplayString(group.key), 1)])]),
+					_: 2
+				}, 1032, ["class"]))])) : createCommentVNode("", true), createElementVNode("ol", {
+					"data-gr-timeline-list": "",
+					tabindex: unref(orientation) === "horizontal" ? 0 : void 0
+				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(group.entries, (entry) => {
+					return renderSlot(_ctx.$slots, "item", {
+						item: entry.item,
+						index: entry.index
+					}, void 0, void 0, keyOf(entry.item, entry.index));
+				}), 128))], 8, _hoisted_3$1)]);
+			}), 128)) : (openBlock(), createElementBlock("ol", {
+				key: 3,
+				"data-gr-timeline-list": "",
+				tabindex: unref(orientation) === "horizontal" ? 0 : void 0
+			}, [dataMode.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(entries.value, (entry) => {
+				return renderSlot(_ctx.$slots, "item", {
+					item: entry.item,
+					index: entry.index
+				}, void 0, void 0, keyOf(entry.item, entry.index));
+			}), 128)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1)], 8, _hoisted_4$1))], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/components/GrTimeline/GrTimelineItem.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-tone", "data-pending"];
+var _hoisted_2 = {
+	key: 0,
+	"data-gr-timeline-aside": ""
+};
+var _hoisted_3 = ["datetime"];
+var _hoisted_4 = {
+	"data-gr-timeline-rail": "",
+	"aria-hidden": "true"
+};
+var _hoisted_5 = ["datetime"];
+var _hoisted_6 = {
+	key: 3,
+	"data-gr-timeline-body": ""
+};
+//#endregion
+//#region src/components/GrTimeline/GrTimelineItem.vue
+var GrTimelineItem_default = /* @__PURE__ */ defineComponent({
+	__name: "GrTimelineItem",
+	props: {
+		time: { default: void 0 },
+		datetime: { default: void 0 },
+		title: { default: void 0 },
+		description: { default: void 0 },
+		tone: { default: "neutral" },
+		variant: { default: "filled" },
+		pending: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		/**
+		* Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт
+		* остаётся рабочей строкой, а не падает.
+		*/
+		const timeline = inject(GR_TIMELINE_CONTEXT, null);
+		const layout = computed(() => timeline?.layout.value ?? "stacked");
+		const density = computed(() => timeline?.density.value ?? "regular");
+		const markerClass = computed(() => grTimelineMarkerClass(props.tone, props.pending ? "outlined" : props.variant));
+		const hasTime = computed(() => !!slots.time || !!props.time);
+		const hasTitle = computed(() => !!slots.title || !!props.title);
+		const hasDescription = computed(() => !!slots.description || !!props.description);
+		/** В `layout="time"` метка уезжает в свою колонку, во всех остальных — в содержимое. */
+		const timeInAside = computed(() => layout.value === "time");
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("li", {
+				"data-gr-timeline-item": "",
+				"data-tone": __props.tone,
+				"data-pending": __props.pending ? "" : void 0
+			}, [
+				timeInAside.value ? (openBlock(), createElementBlock("div", _hoisted_2, [hasTime.value ? (openBlock(), createElementBlock("time", {
+					key: 0,
+					datetime: __props.datetime,
+					class: normalizeClass(unref(timeClass))
+				}, [renderSlot(_ctx.$slots, "time", {}, () => [createTextVNode(toDisplayString(__props.time), 1)])], 10, _hoisted_3)) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "marker", {}, () => [createElementVNode("span", {
+					"data-gr-timeline-marker": "",
+					class: normalizeClass(markerClass.value)
+				}, null, 2)]), _cache[0] || (_cache[0] = createElementVNode("span", { "data-gr-timeline-line": "" }, null, -1))]),
+				createElementVNode("div", {
+					"data-gr-timeline-content": "",
+					class: normalizeClass(unref(grTimelineDensityClass)(density.value))
+				}, [
+					hasTime.value && !timeInAside.value ? (openBlock(), createElementBlock("time", {
+						key: 0,
+						"data-gr-timeline-time": "",
+						datetime: __props.datetime,
+						class: normalizeClass(unref(timeClass))
+					}, [renderSlot(_ctx.$slots, "time", {}, () => [createTextVNode(toDisplayString(__props.time), 1)])], 10, _hoisted_5)) : createCommentVNode("", true),
+					hasTitle.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						"data-gr-timeline-title": "",
+						class: normalizeClass(unref(titleClass))
+					}, [renderSlot(_ctx.$slots, "title", {}, () => [createTextVNode(toDisplayString(__props.title), 1)])], 2)) : createCommentVNode("", true),
+					hasDescription.value ? (openBlock(), createElementBlock("div", {
+						key: 2,
+						class: normalizeClass(unref(descriptionClass))
+					}, [renderSlot(_ctx.$slots, "description", {}, () => [createTextVNode(toDisplayString(__props.description), 1)])], 2)) : createCommentVNode("", true),
+					_ctx.$slots.default ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")])) : createCommentVNode("", true)
+				], 2)
+			], 8, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GR_TIMELINE_HEADING_LEVELS as i, GrTimeline_default as n, groupTimelineItems as r, GrTimelineItem_default as t };

package/dist/components/GrTimeline/chunks/GrTimeline-CE9b3s18.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrTimeline-CE9b3s18.js","names":["$slots"],"sources":["../../../../src/components/GrTimeline/grTimelineContext.ts","../../../../src/components/GrTimeline/timelineGroups.ts","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimeline.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue","../../../../src/components/GrTimeline/GrTimelineItem.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrTimelineDensity, GrTimelineLayout, GrTimelineOrientation } from './grTimelineStyles'\n\n/**\n * Уровень заголовка группы. Тот же довод, что у `GrCollapse`: лента в разделе\n * `<h4>` с захардкоженным `<h3>` рвёт навигацию по заголовкам.\n */\nexport const GR_TIMELINE_HEADING_LEVELS = [2, 3, 4, 5, 6] as const\n\nexport type GrTimelineHeadingLevel = typeof GR_TIMELINE_HEADING_LEVELS[number]\n\n/**\n * Пункт читает раскладку из контейнера, а не получает её пропом: иначе\n * `layout` пришлось бы дублировать на каждом `GrTimelineItem`.\n */\nexport interface GrTimelineContext {\n  layout: ComputedRef<GrTimelineLayout>\n  orientation: ComputedRef<GrTimelineOrientation>\n  density: ComputedRef<GrTimelineDensity>\n}\n\nexport const GR_TIMELINE_CONTEXT: InjectionKey<GrTimelineContext> = Symbol('GR_TIMELINE_CONTEXT')\n","/**\n * Группировка ленты событий. Без Vue — чтобы проверялась без монтирования.\n */\n\nexport type GrTimelineGroupBy<T> = string | ((item: T, index: number) => string)\n\n/** Пункт вместе с его позицией в исходном наборе: ключи `v-for` считаются от неё. */\nexport interface GrTimelineEntry<T> {\n  item: T\n  index: number\n}\n\nexport interface GrTimelineGroup<T> {\n  /** Ключ группы. Пустая строка — заголовка у группы нет. */\n  key: string\n  entries: GrTimelineEntry<T>[]\n}\n\nfunction keyOf<T>(item: T, index: number, groupBy: GrTimelineGroupBy<T>): string {\n  if (typeof groupBy === 'function')\n    return String(groupBy(item, index) ?? '')\n\n  const value = (item as Record<string, unknown> | null | undefined)?.[groupBy]\n\n  // `undefined` в поле — это «группы нет», а не группа с надписью «undefined».\n  return value == null ? '' : String(value)\n}\n\n/**\n * Режет набор на группы, **не меняя порядок**: лента хронологична, и\n * пересортировать её компонент не вправе. Порядок групп — порядок первого\n * вхождения ключа; разорванная группа (`A B A`) собирается в одну.\n *\n * Без `groupBy` — одна безымянная группа: плоская лента остаётся частным\n * случаем, и второй ветки рендера у компонента не появляется.\n */\nexport function groupTimelineItems<T>(\n  items: readonly T[],\n  groupBy?: GrTimelineGroupBy<T>,\n): GrTimelineGroup<T>[] {\n  const entries = items.map((item, index) => ({ item, index }))\n\n  if (groupBy === undefined)\n    return entries.length === 0 ? [] : [{ key: '', entries }]\n\n  const byKey = new Map<string, GrTimelineGroup<T>>()\n\n  for (const entry of entries) {\n    const key = keyOf(entry.item, entry.index, groupBy)\n    const group = byKey.get(key)\n\n    if (group)\n      group.entries.push(entry)\n    else\n      byKey.set(key, { key, entries: [entry] })\n  }\n\n  return [...byKey.values()]\n}\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined) return props.empty\n\n  if (dataMode.value) return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function') return key(item, index)\n  if (typeof key === 'string') return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n/* Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. */\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto 1fr;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: 1fr;\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\" generic=\"T = unknown\">\nimport { computed, provide, useSlots, watch } from 'vue'\n\nimport GrSkeleton from '../GrSkeleton/GrSkeleton.vue'\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { hasMeaningfulSlotContent } from '../shared/slotNodes'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { GR_TIMELINE_CONTEXT, type GrTimelineHeadingLevel } from './grTimelineContext'\nimport {\n  emptyClass,\n  groupTitleClass,\n  loadingRowClass,\n  type GrTimelineDensity,\n  type GrTimelineLayout,\n  type GrTimelineOrientation,\n} from './grTimelineStyles'\nimport { groupTimelineItems, type GrTimelineGroupBy } from './timelineGroups'\n\nexport type {\n  GrTimelineDensity,\n  GrTimelineLayout,\n  GrTimelineOrientation,\n} from './grTimelineStyles'\nexport type { GrTimelineGroupBy } from './timelineGroups'\n\nexport interface GrTimelineProps<TItem = unknown> {\n  /**\n   * Данные ленты. С ними пункты рисует слот `#item` — и только так лента знает\n   * состав набора, то есть может его группировать.\n   */\n  items?: TItem[]\n  /** Ключ пункта для `v-for`: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Группировка: имя поля или функция от пункта. Заголовок группы — слот `#group`. */\n  groupBy?: GrTimelineGroupBy<TItem>\n  /** Уровень заголовка группы: лента обязана вписаться в структуру заголовков страницы. */\n  groupHeadingLevel?: GrTimelineHeadingLevel\n  /** Раскладка: одна ось, колонка времени слева или чередование сторон. */\n  layout?: GrTimelineLayout\n  /** Направление оси. Горизонтальная лента — скроллер. */\n  orientation?: GrTimelineOrientation\n  /** Плотность вертикальных отступов пункта. */\n  density?: GrTimelineDensity\n  /** Идёт загрузка: вместо пунктов — заглушки, контейнер помечен `aria-busy`. */\n  loading?: boolean\n  /** Сколько строк-заглушек показать при `loading`. */\n  loadingRows?: number\n  /**\n   * Лента пуста. По умолчанию определяется сама — по данным или по слоту; проп\n   * нужен там, где потребитель знает лучше.\n   */\n  empty?: boolean\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<GrTimelineProps<T>>(), {\n  items: undefined,\n  itemKey: undefined,\n  groupBy: undefined,\n  // Настоящие дефолты живут в резолверах `useGrComponentProp`: объявленный здесь\n  // дефолт неотличим от значения, переданного потребителем, и перебивал бы конфиг.\n  groupHeadingLevel: undefined,\n  layout: undefined,\n  orientation: undefined,\n  density: undefined,\n  loading: false,\n  loadingRows: 3,\n  empty: undefined,\n  emptyText: undefined,\n})\n\ndefineSlots<{\n  /** Пункты ленты (`GrTimelineItem`), когда данные не переданы пропом. */\n  default?: () => any\n  /** Пункт в data-режиме. */\n  item?: (props: { item: T, index: number }) => any\n  /** Заголовок группы. По умолчанию — сам ключ. */\n  group?: (props: { group: string, items: T[] }) => any\n  /** Содержимое пустого состояния вместо текста по умолчанию. */\n  empty?: () => any\n  /** Заглушки загрузки вместо строк по умолчанию. */\n  loading?: () => any\n}>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst density = useGrComponentProp('GrTimeline', 'density', () => props.density, 'regular')\nconst orientation = useGrComponentProp('GrTimeline', 'orientation', () => props.orientation, 'vertical')\nconst headingLevel = useGrComponentProp('GrTimeline', 'groupHeadingLevel', () => props.groupHeadingLevel, 3)\nconst requestedLayout = useGrComponentProp('GrTimeline', 'layout', () => props.layout, 'stacked')\n\n/**\n * Горизонтальная лента знает одну раскладку: колонка времени и чередование\n * сторон — это вертикальные приёмы, у горизонтальной оси сторон нет.\n */\nconst layout = computed<GrTimelineLayout>(() => (\n  orientation.value === 'horizontal' ? 'stacked' : requestedLayout.value\n))\n\nconst headingTag = computed(() => `h${headingLevel.value}`)\n\nconst dataMode = computed(() => props.items !== undefined)\n\nconst grouped = computed(() => dataMode.value && props.groupBy !== undefined)\n\nconst groups = computed(() => groupTimelineItems(props.items ?? [], props.groupBy))\n\n/** Единственная группа плоской ленты: тот же набор, что и в data-режиме без группировки. */\nconst entries = computed(() => groups.value[0]?.entries ?? [])\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.timeline.empty', 'Nothing here yet'))\n\nconst isEmpty = computed(() => {\n  if (props.empty !== undefined) return props.empty\n\n  if (dataMode.value) return props.items!.length === 0\n\n  // `v-for` по пустому массиву оставляет фрагмент без узлов, `v-if` — комментарий,\n  // и ни то ни другое пунктом ленты не является.\n  return !hasMeaningfulSlotContent(slots.default?.() ?? [])\n})\n\nconst loadingRowCount = computed(() => Math.max(1, Math.trunc(props.loadingRows)))\n\nfunction keyOf(item: T, index: number): string | number {\n  const key = props.itemKey\n  if (typeof key === 'function') return key(item, index)\n  if (typeof key === 'string') return (item as Record<string, unknown>)[key] as string | number\n\n  return index\n}\n\nfunction itemsOf(group: { entries: { item: T }[] }): T[] {\n  return group.entries.map(entry => entry.item)\n}\n\nprovide(GR_TIMELINE_CONTEXT, { layout, orientation, density })\n\nif (import.meta.env?.DEV) {\n  watch(\n    () => [dataMode.value, Boolean(slots.item)] as const,\n    ([hasItems, hasSlot]) => {\n      if (hasItems && !hasSlot) {\n        console.warn(\n          '[granularity] GrTimeline: с `items` пункты рисует слот `#item` — без него лента пуста.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [dataMode.value, props.groupBy !== undefined] as const,\n    ([hasItems, hasGroupBy]) => {\n      if (hasGroupBy && !hasItems) {\n        console.warn(\n          '[granularity] GrTimeline: `groupBy` работает только с `items` — пункты из слота по '\n          + 'умолчанию лента не разбирает и сгруппировать их ей не из чего.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n\n  watch(\n    () => [orientation.value, requestedLayout.value] as const,\n    ([axis, requested]) => {\n      if (axis === 'horizontal' && requested !== 'stacked') {\n        console.warn(\n          `[granularity] GrTimeline: layout=\"${requested}\" — вертикальная раскладка, `\n          + 'в горизонтальной ленте она игнорируется.',\n        )\n      }\n    },\n    { immediate: true },\n  )\n}\n</script>\n\n<template>\n  <div\n    data-gr-timeline\n    :data-layout=\"layout\"\n    :data-orientation=\"orientation\"\n    :aria-busy=\"loading ? 'true' : undefined\"\n  >\n    <template v-if=\"loading\">\n      <slot name=\"loading\">\n        <div\n          v-for=\"row in loadingRowCount\"\n          :key=\"row\"\n          data-gr-timeline-loading-row\n          :class=\"loadingRowClass\"\n        >\n          <GrSkeleton variant=\"circle\" width=\"var(--gr-timeline-marker-size, 10px)\" />\n          <GrSkeleton />\n        </div>\n      </slot>\n    </template>\n\n    <div\n      v-else-if=\"isEmpty\"\n      data-gr-timeline-empty\n      :class=\"emptyClass\"\n    >\n      <slot name=\"empty\">\n        {{ resolvedEmptyText }}\n      </slot>\n    </div>\n\n    <template v-else-if=\"grouped\">\n      <!--\n        Группа — секция с заголовком, а не пункт-заголовок внутри списка:\n        `<li>` с датой попал бы в набор событий и был бы объявлен как одно из них.\n      -->\n      <section\n        v-for=\"group in groups\"\n        :key=\"group.key\"\n        data-gr-timeline-group\n      >\n        <div\n          v-if=\"group.key\"\n          data-gr-timeline-group-header\n        >\n          <div data-gr-timeline-rail aria-hidden=\"true\">\n            <span data-gr-timeline-line />\n          </div>\n\n          <component\n            :is=\"headingTag\"\n            data-gr-timeline-group-title\n            :class=\"groupTitleClass\"\n          >\n            <slot name=\"group\" :group=\"group.key\" :items=\"itemsOf(group)\">\n              {{ group.key }}\n            </slot>\n          </component>\n        </div>\n\n        <ol\n          data-gr-timeline-list\n          :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n        >\n          <template\n            v-for=\"entry in group.entries\"\n            :key=\"keyOf(entry.item, entry.index)\"\n          >\n            <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n          </template>\n        </ol>\n      </section>\n    </template>\n\n    <ol\n      v-else\n      data-gr-timeline-list\n      :tabindex=\"orientation === 'horizontal' ? 0 : undefined\"\n    >\n      <template v-if=\"dataMode\">\n        <template\n          v-for=\"entry in entries\"\n          :key=\"keyOf(entry.item, entry.index)\"\n        >\n          <slot name=\"item\" :item=\"entry.item\" :index=\"entry.index\" />\n        </template>\n      </template>\n\n      <slot v-else />\n    </ol>\n  </div>\n</template>\n\n<style>\n/*\n * Геометрия ленты живёт здесь, а не в утилитах, по одной причине: сторона\n * пункта в `alternate` — это `nth-child`, а обрыв оси — `last-child`, и оба\n * вопроса утилитами не выражаются. Альтернатива — регистрация пунктов в\n * контексте на `onMounted` — дала бы порядок, зависящий от порядка монтирования,\n * и разъезжалась бы на `v-if` посреди ленты.\n */\n\n[data-gr-timeline] {\n  --gr-timeline-columns: auto 1fr;\n}\n\n[data-gr-timeline][data-layout='time'] {\n  --gr-timeline-columns: var(--gr-timeline-time-width, 5.5rem) auto 1fr;\n}\n\n[data-gr-timeline][data-layout='alternate'] {\n  --gr-timeline-columns: 1fr auto 1fr;\n}\n\n[data-gr-timeline-list] {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n[data-gr-timeline-item],\n[data-gr-timeline-group-header] {\n  display: grid;\n  grid-template-columns: var(--gr-timeline-columns);\n  column-gap: var(--gr-timeline-gap, 0.75rem);\n  align-items: start;\n}\n\n[data-gr-timeline-aside] {\n  text-align: end;\n}\n\n/*\n * Ось — отрезок у каждого пункта, а не одна длинная линия: соседние отрезки\n * смыкаются сами, и мерить высоту списка не приходится.\n */\n[data-gr-timeline-rail] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  align-self: stretch;\n  padding-top: var(--gr-timeline-marker-top, 0.35rem);\n}\n\n[data-gr-timeline-rail] > :first-child {\n  flex: none;\n}\n\n[data-gr-timeline-marker] {\n  box-sizing: border-box;\n  width: var(--gr-timeline-marker-size, 10px);\n  height: var(--gr-timeline-marker-size, 10px);\n  border-width: var(--gr-timeline-marker-ring, 2px);\n  border-style: solid;\n  border-color: transparent;\n}\n\n[data-gr-timeline-line] {\n  flex: 1 1 auto;\n  width: var(--gr-timeline-axis-width, 2px);\n  min-height: var(--gr-timeline-line-min, 0.75rem);\n  margin-top: 0.25rem;\n  /* Ровно на столько следующая точка отступает от верха своей строки: без этого\n     отрезок не доходит до неё, и ось выглядит пунктиром из длинных штрихов. */\n  margin-bottom: calc(-1 * var(--gr-timeline-marker-top, 0.35rem));\n  background-color: var(--gr-timeline-axis-color, var(--gr-brd));\n}\n\n/*\n * Пунктиром идёт участок, ведущий **к** незавершённому событию, и всё, что за\n * ним: непройденный путь. Отрезок после точки для этого не годится — обычно\n * незавершённое событие последнее, и его отрезка не видно вовсе.\n */\n[data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-color: transparent;\n  background-image: repeating-linear-gradient(\n    to bottom,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n\n/* Хвост после последнего события — линия в никуда. */\n[data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n/* Между группами ось не рвётся: разрыв читался бы как две разные ленты. */\n[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line] {\n  visibility: visible;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  padding-top: 0;\n}\n\n/* Воздух перед заголовком — отступом строки, а не полем: поле разорвало бы ось. */\n[data-gr-timeline-group] + [data-gr-timeline-group] [data-gr-timeline-group-header] {\n  padding-top: 0.5rem;\n}\n\n[data-gr-timeline-group-header] [data-gr-timeline-line] {\n  margin-top: 0;\n}\n\n/* Над первым заголовком оси ещё нет — линия висела бы в воздухе. */\n[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line] {\n  visibility: hidden;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-header] [data-gr-timeline-rail],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='time'] [data-gr-timeline-group-title],\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail] {\n  grid-column: 2;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content] {\n  grid-column: 3;\n}\n\n[data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content] {\n  grid-column: 1;\n  grid-row: 1;\n  text-align: end;\n}\n\n/* Двухсторонняя лента в узкой колонке нечитаема — там она односторонняя. */\n@media (max-width: 640px) {\n  [data-gr-timeline][data-layout='alternate'] {\n    --gr-timeline-columns: auto 1fr;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-rail],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-header] [data-gr-timeline-rail] {\n    grid-column: 1;\n  }\n\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-item]:nth-child(even) [data-gr-timeline-content],\n  [data-gr-timeline][data-layout='alternate'] [data-gr-timeline-group-title] {\n    grid-column: 2;\n    text-align: start;\n  }\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-list] {\n  display: flex;\n  flex-direction: row;\n  overflow-x: auto;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item] {\n  grid-template-columns: 1fr;\n  min-width: var(--gr-timeline-item-min-width, 12rem);\n  padding-inline-end: var(--gr-timeline-gap, 0.75rem);\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-content] {\n  padding-bottom: 0;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-rail] {\n  flex-direction: row;\n  align-items: center;\n  align-self: auto;\n  padding-top: 0;\n  padding-bottom: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-line] {\n  width: auto;\n  height: var(--gr-timeline-axis-width, 2px);\n  min-width: var(--gr-timeline-line-min, 0.75rem);\n  min-height: 0;\n  margin-top: 0;\n  margin-inline-start: 0.25rem;\n}\n\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item]:has(+ [data-gr-timeline-item][data-pending]) [data-gr-timeline-line],\n[data-gr-timeline][data-orientation='horizontal'] [data-gr-timeline-item][data-pending] [data-gr-timeline-line] {\n  background-image: repeating-linear-gradient(\n    to right,\n    var(--gr-timeline-axis-color, var(--gr-brd)) 0 var(--gr-timeline-dash, 4px),\n    transparent var(--gr-timeline-dash, 4px) calc(var(--gr-timeline-dash, 4px) * 2)\n  );\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а отрезок оси **после** неё —\n   * пунктирный. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject, useSlots } from 'vue'\n\nimport { GR_TIMELINE_CONTEXT } from './grTimelineContext'\nimport {\n  descriptionClass,\n  grTimelineDensityClass,\n  grTimelineMarkerClass,\n  timeClass,\n  titleClass,\n  type GrTimelineMarkerVariant,\n  type GrTimelineTone,\n} from './grTimelineStyles'\n\nexport type { GrTimelineMarkerVariant, GrTimelineTone } from './grTimelineStyles'\n\nexport interface GrTimelineItemProps {\n  /** Метка времени. Слот `#time` сильнее. */\n  time?: string\n  /** Машиночитаемое значение метки: попадает в `datetime` тега `<time>`. */\n  datetime?: string\n  /** Заголовок события. Слот `#title` сильнее. */\n  title?: string\n  /** Пояснение под заголовком. Слот `#description` сильнее. */\n  description?: string\n  /** Цвет маркера из палитры пакета. */\n  tone?: GrTimelineTone\n  /** Заполненная точка — событие случилось, полая — запланировано. */\n  variant?: GrTimelineMarkerVariant\n  /**\n   * Событие ещё не произошло: точка полая, а отрезок оси **после** неё —\n   * пунктирный. Перебивает `variant`.\n   */\n  pending?: boolean\n}\n\nconst props = withDefaults(defineProps<GrTimelineItemProps>(), {\n  time: undefined,\n  datetime: undefined,\n  title: undefined,\n  description: undefined,\n  tone: 'neutral',\n  variant: 'filled',\n  pending: false,\n})\n\ndefineSlots<{\n  /** Содержимое события под заголовком и описанием. */\n  default?: () => any\n  /** Маркер вместо точки: иконка статуса, аватар автора, номер шага. */\n  marker?: () => any\n  /** Метка времени. */\n  time?: () => any\n  /** Заголовок события. */\n  title?: () => any\n  /** Пояснение под заголовком. */\n  description?: () => any\n}>()\n\nconst slots = useSlots()\n\n/**\n * Раскладку пункт читает из контейнера. Вне `GrTimeline` — дефолты: пункт\n * остаётся рабочей строкой, а не падает.\n */\nconst timeline = inject(GR_TIMELINE_CONTEXT, null)\n\nconst layout = computed(() => timeline?.layout.value ?? 'stacked')\nconst density = computed(() => timeline?.density.value ?? 'regular')\n\nconst markerClass = computed(() => grTimelineMarkerClass(\n  props.tone,\n  props.pending ? 'outlined' : props.variant,\n))\n\nconst hasTime = computed(() => !!slots.time || !!props.time)\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n\n/** В `layout=\"time\"` метка уезжает в свою колонку, во всех остальных — в содержимое. */\nconst timeInAside = computed(() => layout.value === 'time')\n</script>\n\n<template>\n  <li\n    data-gr-timeline-item\n    :data-tone=\"tone\"\n    :data-pending=\"pending ? '' : undefined\"\n  >\n    <div\n      v-if=\"timeInAside\"\n      data-gr-timeline-aside\n    >\n      <time\n        v-if=\"hasTime\"\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n    </div>\n\n    <!-- Ось и точка декоративны: смысл события несёт текст рядом. -->\n    <div\n      data-gr-timeline-rail\n      aria-hidden=\"true\"\n    >\n      <slot name=\"marker\">\n        <span data-gr-timeline-marker :class=\"markerClass\" />\n      </slot>\n      <span data-gr-timeline-line />\n    </div>\n\n    <!--\n      Вертикальный отступ живёт на содержимом, а не на строке: ось растянута по\n      строке грид-ячейкой, и её поля в высоту ячейки не входят — линия обрывалась\n      бы, не доходя до следующей точки.\n    -->\n    <div data-gr-timeline-content :class=\"grTimelineDensityClass(density)\">\n      <time\n        v-if=\"hasTime && !timeInAside\"\n        data-gr-timeline-time\n        :datetime=\"datetime\"\n        :class=\"timeClass\"\n      >\n        <slot name=\"time\">{{ time }}</slot>\n      </time>\n\n      <div v-if=\"hasTitle\" data-gr-timeline-title :class=\"titleClass\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n\n      <div v-if=\"hasDescription\" :class=\"descriptionClass\">\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n\n      <div v-if=\"$slots.default\" data-gr-timeline-body>\n        <slot />\n      </div>\n    </div>\n  </li>\n</template>\n"],"mappings":"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"}

package/dist/components/GrTimeline/index.js

@@ -0,0 +1,3 @@
+import { i as GR_TIMELINE_HEADING_LEVELS, n as GrTimeline_default, r as groupTimelineItems, t as GrTimelineItem_default } from "./chunks/GrTimeline-CE9b3s18.js";
+import { n as grTimelineSafelist, t as grTimelineConfig } from "../../chunks/config-Cw6TDzWv2.js";
+export { GR_TIMELINE_HEADING_LEVELS, GrTimeline_default as GrTimeline, GrTimeline_default as default, GrTimelineItem_default as GrTimelineItem, grTimelineConfig, grTimelineSafelist, groupTimelineItems };

package/dist/components/GrTimeline/styles.css

@@ -0,0 +1 @@
+[data-gr-timeline]{--gr-timeline-columns:auto 1fr}[data-gr-timeline][data-layout=time]{--gr-timeline-columns:var(--gr-timeline-time-width,5.5rem) auto 1fr}[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:1fr auto 1fr}[data-gr-timeline-list]{margin:0;padding:0;list-style:none}[data-gr-timeline-item],[data-gr-timeline-group-header]{grid-template-columns:var(--gr-timeline-columns);column-gap:var(--gr-timeline-gap,.75rem);align-items:start;display:grid}[data-gr-timeline-aside]{text-align:end}[data-gr-timeline-rail]{padding-top:var(--gr-timeline-marker-top,.35rem);flex-direction:column;align-self:stretch;align-items:center;display:flex}[data-gr-timeline-rail]>:first-child{flex:none}[data-gr-timeline-marker]{box-sizing:border-box;width:var(--gr-timeline-marker-size,10px);height:var(--gr-timeline-marker-size,10px);border-width:var(--gr-timeline-marker-ring,2px);border-style:solid;border-color:#0000}[data-gr-timeline-line]{width:var(--gr-timeline-axis-width,2px);min-height:var(--gr-timeline-line-min,.75rem);margin-top:.25rem;margin-bottom:calc(-1 * var(--gr-timeline-marker-top,.35rem));background-color:var(--gr-timeline-axis-color,var(--gr-brd));flex:auto}[data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-color:#0000;background-image:repeating-linear-gradient(to bottom, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}[data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline-group]:not(:last-of-type) [data-gr-timeline-item]:last-child [data-gr-timeline-line]{visibility:visible}[data-gr-timeline-group-header] [data-gr-timeline-rail]{padding-top:0}[data-gr-timeline-group]+[data-gr-timeline-group] [data-gr-timeline-group-header]{padding-top:.5rem}[data-gr-timeline-group-header] [data-gr-timeline-line]{margin-top:0}[data-gr-timeline-group]:first-of-type [data-gr-timeline-group-header] [data-gr-timeline-line]{visibility:hidden}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-header] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=time] [data-gr-timeline-group-title],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail]{grid-column:2}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content]{grid-column:3}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content]{text-align:end;grid-area:1/1}@media (width<=640px){[data-gr-timeline][data-layout=alternate]{--gr-timeline-columns:auto 1fr}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-rail],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-header] [data-gr-timeline-rail]{grid-column:1}[data-gr-timeline][data-layout=alternate] [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-item]:nth-child(2n) [data-gr-timeline-content],[data-gr-timeline][data-layout=alternate] [data-gr-timeline-group-title]{text-align:start;grid-column:2}}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-list]{flex-direction:row;display:flex;overflow-x:auto}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]{min-width:var(--gr-timeline-item-min-width,12rem);grid-template-columns:1fr;padding-inline-end:var(--gr-timeline-gap,.75rem)}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-content]{padding-bottom:0}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-rail]{flex-direction:row;align-self:auto;align-items:center;padding-top:0;padding-bottom:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-line]{width:auto;height:var(--gr-timeline-axis-width,2px);min-width:var(--gr-timeline-line-min,.75rem);margin-top:0;min-height:0;margin-inline-start:.25rem}[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item]:has(+[data-gr-timeline-item][data-pending]) [data-gr-timeline-line],[data-gr-timeline][data-orientation=horizontal] [data-gr-timeline-item][data-pending] [data-gr-timeline-line]{background-image:repeating-linear-gradient(to right, var(--gr-timeline-axis-color,var(--gr-brd)) 0 var(--gr-timeline-dash,4px), transparent var(--gr-timeline-dash,4px) calc(var(--gr-timeline-dash,4px) * 2))}