@feugene/granularity 0.12.0 → 0.16.0

package/dist/components/GrSlider/chunks/GrSlider-DkU9IQSX.js

@@ -0,0 +1,392 @@
+import { o as useGrComponentSize } from "../../../chunks/context-BSYR7RZs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
+import { useGrFormControl } from "../../../composables/useGrFormControl.js";
+import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
+import { A as sliderTrackVerticalLengthClass, D as sliderTooltipClass, a as sliderFillOrientationClass, f as sliderMarkTickClass, g as sliderRailClass, j as sliderTrackWidthBySize, k as sliderTrackHeightBySize, n as sliderFillClass, s as sliderMarkLabelClassFor, v as sliderRootClass, x as sliderThumbClass } from "../../../chunks/grSliderStyles-B5uNxNJq.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderList, toDisplayString, unref } from "vue";
+//#region src/components/GrSlider/GrSlider.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-orientation"];
+var _hoisted_2 = ["name", "value"];
+var _hoisted_3 = [
+	"id",
+	"data-testid",
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext",
+	"aria-orientation",
+	"aria-label",
+	"aria-disabled",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-required",
+	"aria-readonly",
+	"onKeydown",
+	"onMouseenter",
+	"onFocus"
+];
+//#endregion
+//#region src/components/GrSlider/GrSlider.vue
+var GrSlider_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSlider",
+	props: {
+		modelValue: {},
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		range: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: void 0 },
+		marks: { default: void 0 },
+		showTooltip: {
+			type: [Boolean, String],
+			default: false
+		},
+		formatTooltip: {
+			type: Function,
+			default: void 0
+		},
+		orientation: { default: "horizontal" },
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 },
+		name: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const isVertical = computed(() => props.orientation === "vertical");
+		const resolvedSize = useGrComponentSize(() => props.size, {
+			component: "GrSlider",
+			supported: [
+				"xs",
+				"sm",
+				"md",
+				"lg"
+			]
+		});
+		const emit = __emit;
+		const field = useGrFormFieldContext();
+		const resolvedId = computed(() => field?.id.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props);
+		const describedBy = computed(() => field?.describedById.value);
+		const trackEl = ref(null);
+		const rootEl = ref(null);
+		const { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {
+			enter: (event) => emit("focus", event),
+			leave: (event) => emit("blur", event)
+		});
+		const thumbEls = ref([]);
+		function focus() {
+			thumbEls.value[0]?.focus();
+		}
+		function blur() {
+			thumbEls.value[0]?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		const span = computed(() => props.max > props.min ? props.max - props.min : 1);
+		const stepDecimals = computed(() => {
+			const s = String(props.step);
+			const dot = s.indexOf(".");
+			return dot >= 0 ? s.length - dot - 1 : 0;
+		});
+		function clamp(value) {
+			return Math.min(props.max, Math.max(props.min, value));
+		}
+		function snap(value) {
+			const stepped = Math.round((value - props.min) / props.step) * props.step + props.min;
+			return Number(clamp(stepped).toFixed(stepDecimals.value));
+		}
+		function percent(value) {
+			return (clamp(value) - props.min) / span.value * 100;
+		}
+		const draftValues = ref(null);
+		const modelValues = computed(() => {
+			if (props.range) {
+				const v = Array.isArray(props.modelValue) ? props.modelValue : [props.min, props.min];
+				return [snap(v[0] ?? props.min), snap(v[1] ?? props.min)];
+			}
+			return [snap(Array.isArray(props.modelValue) ? props.modelValue[0] ?? props.min : props.modelValue)];
+		});
+		const values = computed(() => draftValues.value ?? modelValues.value);
+		const trackClass = computed(() => isVertical.value ? `[touch-action:none] ${sliderTrackWidthBySize[resolvedSize.value]} ${sliderTrackVerticalLengthClass}` : `[touch-action:none] w-full ${sliderTrackHeightBySize[resolvedSize.value]}`);
+		/** Смещение вдоль дорожки: по горизонтали слева, по вертикали снизу. */
+		function offsetStyle(value) {
+			return isVertical.value ? { bottom: `${percent(value)}%` } : { left: `${percent(value)}%` };
+		}
+		const fillStyle = computed(() => {
+			const start = props.range ? Math.min(percent(values.value[0]), percent(values.value[1])) : 0;
+			const end = props.range ? Math.max(percent(values.value[0]), percent(values.value[1])) : percent(values.value[0]);
+			return isVertical.value ? {
+				bottom: `${start}%`,
+				top: `${100 - end}%`
+			} : {
+				left: `${start}%`,
+				right: `${100 - end}%`
+			};
+		});
+		const normalizedMarks = computed(() => {
+			if (!props.marks) return [];
+			if (Array.isArray(props.marks)) return props.marks.map((v) => ({
+				value: v,
+				label: String(v)
+			}));
+			return Object.entries(props.marks).map(([value, label]) => ({
+				value: Number(value),
+				label
+			}));
+		});
+		function tooltipText(value) {
+			return props.formatTooltip ? props.formatTooltip(value) : String(value);
+		}
+		function emitValue(next, commit) {
+			const payload = props.range ? [next[0], next[1]] : next[0];
+			emit("update:modelValue", payload);
+			if (commit) emit("change", payload);
+		}
+		function setThumb(index, value, commit) {
+			const next = values.value.slice();
+			next[index] = snap(value);
+			if (props.range) if (index === 0) next[0] = Math.min(next[0], next[1]);
+			else next[1] = Math.max(next[1], next[0]);
+			if (props.lazy && !commit) {
+				draftValues.value = next;
+				return;
+			}
+			draftValues.value = null;
+			emitValue(next, commit);
+		}
+		const activeThumb = ref(null);
+		const hoveredThumb = ref(null);
+		function valueFromPointer(event) {
+			const rect = trackEl.value?.getBoundingClientRect();
+			if (!rect) return props.min;
+			const ratio = isVertical.value ? rect.height === 0 ? 0 : 1 - (event.clientY - rect.top) / rect.height : rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width;
+			return props.min + Math.min(1, Math.max(0, ratio)) * span.value;
+		}
+		/**
+		* Какой бегунок повезёт клик. При равенстве расстояний берём верхний: иначе
+		* схлопнувшийся в точку диапазон не развести мышью — нижний бегунок упирается
+		* в верхний и оба стоят на месте.
+		*/
+		function nearestThumb(value) {
+			if (!props.range) return 0;
+			const [lo, hi] = values.value;
+			if (value < lo) return 0;
+			if (value > hi) return 1;
+			return Math.abs(value - lo) < Math.abs(value - hi) ? 0 : 1;
+		}
+		function onTrackPointerDown(event) {
+			if (isDisabled.value || isReadonly.value) return;
+			if (event.button !== 0) return;
+			const value = valueFromPointer(event);
+			const index = nearestThumb(value);
+			activeThumb.value = index;
+			thumbEls.value[index]?.focus();
+			setThumb(index, value, false);
+			window.addEventListener("pointermove", onPointerMove);
+			window.addEventListener("pointerup", onPointerUp);
+			window.addEventListener("pointercancel", onPointerCancel);
+		}
+		function onPointerMove(event) {
+			if (activeThumb.value === null) return;
+			event.preventDefault();
+			setThumb(activeThumb.value, valueFromPointer(event), false);
+		}
+		function endDrag(commit) {
+			if (activeThumb.value !== null && commit) {
+				const next = values.value.slice();
+				draftValues.value = null;
+				emitValue(next, true);
+			}
+			draftValues.value = null;
+			activeThumb.value = null;
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			window.removeEventListener("pointercancel", onPointerCancel);
+		}
+		function onPointerUp() {
+			endDrag(true);
+		}
+		function onPointerCancel() {
+			endDrag(false);
+		}
+		onBeforeUnmount(() => {
+			window.removeEventListener("pointermove", onPointerMove);
+			window.removeEventListener("pointerup", onPointerUp);
+			window.removeEventListener("pointercancel", onPointerCancel);
+		});
+		function bigStep() {
+			return Math.max(props.step * 10, Math.round(span.value / 10 / props.step) * props.step || props.step);
+		}
+		function onThumbKeydown(event, index) {
+			if (isDisabled.value || isReadonly.value) return;
+			const current = values.value[index];
+			let next = null;
+			switch (event.key) {
+				case "ArrowRight":
+				case "ArrowUp":
+					next = current + props.step;
+					break;
+				case "ArrowLeft":
+				case "ArrowDown":
+					next = current - props.step;
+					break;
+				case "PageUp":
+					next = current + bigStep();
+					break;
+				case "PageDown":
+					next = current - bigStep();
+					break;
+				case "Home":
+					next = props.min;
+					break;
+				case "End":
+					next = props.max;
+					break;
+				default: return;
+			}
+			event.preventDefault();
+			setThumb(index, next, true);
+		}
+		const showTooltipFor = (index) => {
+			if (props.showTooltip === "always") return true;
+			if (!props.showTooltip) return false;
+			return activeThumb.value === index || hoveredThumb.value === index;
+		};
+		function thumbAriaLabel(index) {
+			if (!props.ariaLabel) return void 0;
+			if (!props.range) return props.ariaLabel;
+			const bound = index === 0 ? t("gr.slider.min", "min") : t("gr.slider.max", "max");
+			return `${props.ariaLabel} (${bound})`;
+		}
+		function thumbValueText(value) {
+			return props.formatTooltip ? props.formatTooltip(value) : void 0;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-slider": "",
+				"data-orientation": __props.orientation,
+				class: normalizeClass(unref(sliderRootClass)({
+					size: unref(resolvedSize),
+					disabled: unref(isDisabled),
+					hasMarks: normalizedMarks.value.length > 0,
+					orientation: __props.orientation
+				})),
+				onFocusin: _cache[2] || (_cache[2] = (...args) => unref(onFocusIn) && unref(onFocusIn)(...args)),
+				onFocusout: _cache[3] || (_cache[3] = (...args) => unref(onFocusOut) && unref(onFocusOut)(...args))
+			}, [__props.name ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(modelValues.value, (value, index) => {
+				return openBlock(), createElementBlock("input", {
+					key: index,
+					type: "hidden",
+					name: __props.name,
+					value: String(value)
+				}, null, 8, _hoisted_2);
+			}), 128)) : createCommentVNode("", true), createElementVNode("div", {
+				ref_key: "trackEl",
+				ref: trackEl,
+				"data-gr-slider-track": "",
+				class: normalizeClass(["relative", trackClass.value]),
+				onPointerdown: onTrackPointerDown
+			}, [
+				createElementVNode("div", { class: normalizeClass(unref(sliderRailClass)) }, null, 2),
+				createElementVNode("div", {
+					"data-gr-slider-fill": "",
+					class: normalizeClass([unref(sliderFillClass)(unref(isDisabled)), unref(sliderFillOrientationClass)[__props.orientation]]),
+					style: normalizeStyle(fillStyle.value)
+				}, null, 6),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(normalizedMarks.value, (mark) => {
+					return openBlock(), createElementBlock(Fragment, { key: mark.value }, [createElementVNode("span", {
+						"data-gr-slider-mark": "",
+						class: normalizeClass(unref(sliderMarkTickClass)(__props.orientation)),
+						style: normalizeStyle(offsetStyle(mark.value)),
+						"aria-hidden": "true"
+					}, null, 6), createElementVNode("span", {
+						"data-gr-slider-mark-label": "",
+						class: normalizeClass(unref(sliderMarkLabelClassFor)(percent(mark.value), {
+							orientation: __props.orientation,
+							disabled: unref(isDisabled)
+						})),
+						style: normalizeStyle(offsetStyle(mark.value)),
+						"aria-hidden": "true"
+					}, toDisplayString(mark.label), 7)], 64);
+				}), 128)),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(values.value, (value, index) => {
+					return openBlock(), createElementBlock("div", {
+						id: index === 0 ? resolvedId.value : void 0,
+						key: index,
+						ref_for: true,
+						ref: (el) => {
+							if (el) thumbEls.value[index] = el;
+						},
+						"data-gr-slider-thumb": "",
+						"data-testid": `gr-slider-thumb-${index}`,
+						class: normalizeClass(unref(sliderThumbClass)({
+							size: unref(resolvedSize),
+							disabled: unref(isDisabled),
+							orientation: __props.orientation
+						})),
+						style: normalizeStyle(offsetStyle(value)),
+						role: "slider",
+						tabindex: unref(isDisabled) ? -1 : 0,
+						"aria-valuemin": __props.range && index === 1 ? values.value[0] : __props.min,
+						"aria-valuemax": __props.range && index === 0 ? values.value[1] : __props.max,
+						"aria-valuenow": value,
+						"aria-valuetext": thumbValueText(value),
+						"aria-orientation": __props.orientation,
+						"aria-label": thumbAriaLabel(index),
+						"aria-disabled": unref(isDisabled) ? "true" : void 0,
+						"aria-invalid": unref(isInvalid) ? "true" : void 0,
+						"aria-describedby": index === 0 ? describedBy.value : void 0,
+						"aria-required": unref(isRequired) && index === 0 ? "true" : void 0,
+						"aria-readonly": unref(isReadonly) ? "true" : void 0,
+						onKeydown: ($event) => onThumbKeydown($event, index),
+						onMouseenter: ($event) => hoveredThumb.value = index,
+						onMouseleave: _cache[0] || (_cache[0] = ($event) => hoveredThumb.value = null),
+						onFocus: ($event) => hoveredThumb.value = index,
+						onBlur: _cache[1] || (_cache[1] = ($event) => hoveredThumb.value = null)
+					}, [showTooltipFor(index) ? (openBlock(), createElementBlock("span", {
+						key: 0,
+						"data-gr-slider-tooltip": "",
+						class: normalizeClass(unref(sliderTooltipClass)(__props.orientation))
+					}, toDisplayString(tooltipText(value)), 3)) : createCommentVNode("", true)], 46, _hoisted_3);
+				}), 128))
+			], 34)], 42, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { GrSlider_default as t };

package/dist/components/GrSlider/chunks/GrSlider-DkU9IQSX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSlider-DkU9IQSX.js","names":[],"sources":["../../../../src/components/GrSlider/GrSlider.vue","../../../../src/components/GrSlider/GrSlider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  sliderFillClass,\n  sliderMarkLabelClassFor,\n  sliderMarkTickClass,\n  sliderRailClass,\n  sliderRootClass,\n  sliderThumbClass,\n  sliderTooltipClass,\n  sliderTrackHeightBySize,\n  sliderTrackVerticalLengthClass,\n  sliderTrackWidthBySize,\n  sliderFillOrientationClass,\n  type GrSliderMarks,\n  type GrSliderModelValue,\n  type GrSliderOrientation,\n  type GrSliderSize,\n} from './grSliderStyles'\n\nexport type {\n  GrSliderMarks,\n  GrSliderModelValue,\n  GrSliderOrientation,\n  GrSliderSize,\n} from './grSliderStyles'\n\n/**\n * Публичный GR-примитив «Slider» (WAI-ARIA slider pattern).\n *\n * Поддерживает одиночное значение и диапазон (`range` — два бегунка), шаг, метки\n * делений, всплывающее значение (tooltip), полную клавиатурную навигацию\n * (стрелки / PageUp/Down / Home / End) и `role=\"slider\"` с\n * `aria-valuemin`/`max`/`now` на каждом бегунке.\n */\nexport interface GrSliderProps {\n  /** `number` — одиночное значение; `[lo, hi]` — диапазон (при `range=true`). */\n  modelValue: GrSliderModelValue\n  min?: number\n  max?: number\n  step?: number\n  /** Диапазон с двумя бегунками; модель — кортеж `[lo, hi]`. */\n  range?: boolean\n  disabled?: boolean\n  /** Только для чтения: значение видно, но не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  size?: GrSliderSize\n  /** Метки делений: `{ [value]: label }` или массив значений. */\n  marks?: GrSliderMarks\n  /** Всплывающее значение над бегунком: `true`/`'hover'` — при hover/drag/focus, `'always'` — всегда. */\n  showTooltip?: boolean | 'always' | 'hover'\n  /** Форматирование значения в tooltip. Оно же уходит в `aria-valuetext`. */\n  formatTooltip?: (value: number) => string\n  /** Ориентация дорожки. В вертикальной минимум внизу. */\n  orientation?: GrSliderOrientation\n  /**\n   * Эмитить `update:modelValue` только по завершении жеста: во время\n   * перетаскивания значение ведёт сам слайдер. Клавиатура коммитит сразу —\n   * нажатие клавиши дискретно, придерживать его нечего.\n   */\n  lazy?: boolean\n  ariaLabel?: string\n  /** Имя для нативной формы: hidden input на значение, при `range` — два с одним именем. */\n  name?: string\n}\n\nexport interface GrSliderEmits {\n  (e: 'update:modelValue', value: GrSliderModelValue): void\n  /** Значение зафиксировано (отпущен бегунок / клавиша). */\n  (e: 'change', value: GrSliderModelValue): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrSliderProps>(),\n  {\n    min: 0,\n    max: 100,\n    step: 1,\n    range: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    size: undefined,\n    marks: undefined,\n    showTooltip: false,\n    formatTooltip: undefined,\n    orientation: 'horizontal',\n    lazy: false,\n    ariaLabel: undefined,\n    name: undefined,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst isVertical = computed(() => props.orientation === 'vertical')\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n  component: 'GrSlider',\n  supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrSliderEmits>()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst trackEl = ref<HTMLElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// У диапазона два бегунка, и фокус ходит между ними: без границы переход с\n// одного на другой давал бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\nconst thumbEls = ref<HTMLElement[]>([])\n\nfunction focus(): void {\n  thumbEls.value[0]?.focus()\n}\n\nfunction blur(): void {\n  thumbEls.value[0]?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Нормализованные границы (гард от max<=min).\nconst span = computed(() => (props.max > props.min ? props.max - props.min : 1))\n\nconst stepDecimals = computed(() => {\n  const s = String(props.step)\n  const dot = s.indexOf('.')\n  return dot >= 0 ? s.length - dot - 1 : 0\n})\n\nfunction clamp(value: number): number {\n  return Math.min(props.max, Math.max(props.min, value))\n}\n\nfunction snap(value: number): number {\n  const stepped = Math.round((value - props.min) / props.step) * props.step + props.min\n  return Number(clamp(stepped).toFixed(stepDecimals.value))\n}\n\nfunction percent(value: number): number {\n  return ((clamp(value) - props.min) / span.value) * 100\n}\n\n// Черновик жеста: при `lazy` значение до отпускания живёт здесь, а наружу не\n// уходит — иначе смысл режима теряется.\nconst draftValues = ref<number[] | null>(null)\n\n// ————— Значения бегунков как массив (single = один бегунок).\nconst modelValues = computed<number[]>(() => {\n  if (props.range) {\n    const v = Array.isArray(props.modelValue) ? props.modelValue : [props.min, props.min]\n    return [snap(v[0] ?? props.min), snap(v[1] ?? props.min)]\n  }\n  const v = Array.isArray(props.modelValue) ? (props.modelValue[0] ?? props.min) : props.modelValue\n  return [snap(v)]\n})\n\nconst values = computed<number[]>(() => draftValues.value ?? modelValues.value)\n\n// `[touch-action:none]` обязателен: без него вертикальный свайп по бегунку\n// уходит в скролл страницы, браузер шлёт `pointercancel`, и слайдер пальцем\n// неуправляем. Утилиты `touch-none` нет ни в `presetMini`, ни в extra-rules —\n// поэтому arbitrary-значение.\nconst trackClass = computed(() => (isVertical.value\n  ? `[touch-action:none] ${sliderTrackWidthBySize[resolvedSize.value]} ${sliderTrackVerticalLengthClass}`\n  : `[touch-action:none] w-full ${sliderTrackHeightBySize[resolvedSize.value]}`))\n\n/** Смещение вдоль дорожки: по горизонтали слева, по вертикали снизу. */\nfunction offsetStyle(value: number): Record<string, string> {\n  return isVertical.value ? { bottom: `${percent(value)}%` } : { left: `${percent(value)}%` }\n}\n\nconst fillStyle = computed(() => {\n  const start = props.range\n    ? Math.min(percent(values.value[0]), percent(values.value[1]))\n    : 0\n  const end = props.range\n    ? Math.max(percent(values.value[0]), percent(values.value[1]))\n    : percent(values.value[0])\n\n  return isVertical.value\n    ? { bottom: `${start}%`, top: `${100 - end}%` }\n    : { left: `${start}%`, right: `${100 - end}%` }\n})\n\n// ————— Метки делений.\ntype SliderMark = { value: number, label: string }\nconst normalizedMarks = computed<SliderMark[]>(() => {\n  if (!props.marks) return []\n  if (Array.isArray(props.marks)) return props.marks.map(v => ({ value: v, label: String(v) }))\n  return Object.entries(props.marks).map(([value, label]) => ({ value: Number(value), label }))\n})\n\nfunction tooltipText(value: number): string {\n  return props.formatTooltip ? props.formatTooltip(value) : String(value)\n}\n\n// ————— Обновление значения конкретного бегунка.\nfunction emitValue(next: number[], commit: boolean): void {\n  const payload: GrSliderModelValue = props.range ? [next[0], next[1]] : next[0]\n  emit('update:modelValue', payload)\n  if (commit) emit('change', payload)\n}\n\nfunction setThumb(index: number, value: number, commit: boolean): void {\n  const next = values.value.slice()\n  next[index] = snap(value)\n\n  // range: не даём бегункам «перепрыгнуть» друг друга.\n  if (props.range) {\n    if (index === 0) next[0] = Math.min(next[0], next[1])\n    else next[1] = Math.max(next[1], next[0])\n  }\n\n  // `lazy` придерживает только непрерывный жест: `commit` приходит от клавиатуры\n  // и от отпускания, и там значение уходит наружу как обычно.\n  if (props.lazy && !commit) {\n    draftValues.value = next\n    return\n  }\n\n  draftValues.value = null\n  emitValue(next, commit)\n}\n\n// ————— Pointer-драг.\nconst activeThumb = ref<number | null>(null)\nconst hoveredThumb = ref<number | null>(null)\n\nfunction valueFromPointer(event: { clientX: number, clientY: number }): number {\n  const rect = trackEl.value?.getBoundingClientRect()\n  if (!rect) return props.min\n\n  // В вертикали минимум внизу, поэтому доля отсчитывается от нижнего края.\n  const ratio = isVertical.value\n    ? (rect.height === 0 ? 0 : 1 - (event.clientY - rect.top) / rect.height)\n    : (rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width)\n\n  return props.min + Math.min(1, Math.max(0, ratio)) * span.value\n}\n\n/**\n * Какой бегунок повезёт клик. При равенстве расстояний берём верхний: иначе\n * схлопнувшийся в точку диапазон не развести мышью — нижний бегунок упирается\n * в верхний и оба стоят на месте.\n */\nfunction nearestThumb(value: number): number {\n  if (!props.range) return 0\n\n  const [lo, hi] = values.value\n  if (value < lo) return 0\n  if (value > hi) return 1\n\n  return Math.abs(value - lo) < Math.abs(value - hi) ? 0 : 1\n}\n\nfunction onTrackPointerDown(event: PointerEvent): void {\n  if (isDisabled.value || isReadonly.value) return\n  // Только основная кнопка: правый и средний клик перетаскиванием не считаются.\n  if (event.button !== 0) return\n\n  const value = valueFromPointer(event)\n  const index = nearestThumb(value)\n  activeThumb.value = index\n  // Фокусируем активный бегунок сразу — чтобы клавиатура работала после клика по\n  // дорожке (div не получает фокус по клику автоматически, только через `.focus()`).\n  thumbEls.value[index]?.focus()\n  setThumb(index, value, false)\n\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', onPointerCancel)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  if (activeThumb.value === null) return\n  event.preventDefault()\n  setThumb(activeThumb.value, valueFromPointer(event), false)\n}\n\nfunction endDrag(commit: boolean): void {\n  if (activeThumb.value !== null && commit) {\n    // Финальный commit значения: у `lazy` он же и единственный `update:modelValue`.\n    const next = values.value.slice()\n    draftValues.value = null\n    emitValue(next, true)\n  }\n  // Оборванный жест (`pointercancel`: браузер забрал указатель) значения не\n  // коммитит — черновик просто отбрасывается, бегунок возвращается к модели.\n  draftValues.value = null\n  activeThumb.value = null\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerCancel)\n}\n\nfunction onPointerUp(): void {\n  endDrag(true)\n}\n\nfunction onPointerCancel(): void {\n  endDrag(false)\n}\n\nonBeforeUnmount(() => {\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerCancel)\n})\n\n// ————— Клавиатура.\nfunction bigStep(): number {\n  // PageUp/Down: 10 шагов либо 10% диапазона (что крупнее).\n  return Math.max(props.step * 10, Math.round((span.value / 10) / props.step) * props.step || props.step)\n}\n\nfunction onThumbKeydown(event: KeyboardEvent, index: number): void {\n  if (isDisabled.value || isReadonly.value) return\n  const current = values.value[index]\n  let next: number | null = null\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      next = current + props.step\n      break\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      next = current - props.step\n      break\n    case 'PageUp':\n      next = current + bigStep()\n      break\n    case 'PageDown':\n      next = current - bigStep()\n      break\n    case 'Home':\n      next = props.min\n      break\n    case 'End':\n      next = props.max\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  setThumb(index, next, true)\n}\n\nconst showTooltipFor = (index: number): boolean => {\n  if (props.showTooltip === 'always') return true\n  if (!props.showTooltip) return false\n  return activeThumb.value === index || hoveredThumb.value === index\n}\n\nfunction thumbAriaLabel(index: number): string | undefined {\n  if (!props.ariaLabel) return undefined\n  if (!props.range) return props.ariaLabel\n\n  const bound = index === 0 ? t('gr.slider.min', 'min') : t('gr.slider.max', 'max')\n  return `${props.ariaLabel} (${bound})`\n}\n\n// `aria-valuetext` нужен, только когда число само по себе не читается: «1200»\n// против «$1 200». Без своего формата атрибут не добавляем.\nfunction thumbValueText(value: number): string | undefined {\n  return props.formatTooltip ? props.formatTooltip(value) : undefined\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    data-gr-slider\n    :data-orientation=\"orientation\"\n    :class=\"sliderRootClass({ size: resolvedSize, disabled: isDisabled, hasMarks: normalizedMarks.length > 0, orientation })\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: роль-виджет не labelable и в submit не попадает.\n         Сериализуется модель (snapped), а не черновик жеста. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"(value, index) in modelValues\"\n        :key=\"index\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(value)\"\n      >\n    </template>\n    <div\n      ref=\"trackEl\"\n      data-gr-slider-track\n      class=\"relative\"\n      :class=\"trackClass\"\n      @pointerdown=\"onTrackPointerDown\"\n    >\n      <div :class=\"sliderRailClass\" />\n      <div\n        data-gr-slider-fill\n        :class=\"[sliderFillClass(isDisabled), sliderFillOrientationClass[orientation]]\"\n        :style=\"fillStyle\"\n      />\n\n      <!-- Метки делений. -->\n      <template v-for=\"mark in normalizedMarks\" :key=\"mark.value\">\n        <span\n          data-gr-slider-mark\n          :class=\"sliderMarkTickClass(orientation)\"\n          :style=\"offsetStyle(mark.value)\"\n          aria-hidden=\"true\"\n        />\n        <!-- Подпись метки дублирует значение, которое диктор читает с бегунка:\n             как отдельный текст внутри слайдера она только мешает. -->\n        <span\n          data-gr-slider-mark-label\n          :class=\"sliderMarkLabelClassFor(percent(mark.value), { orientation, disabled: isDisabled })\"\n          :style=\"offsetStyle(mark.value)\"\n          aria-hidden=\"true\"\n        >\n          {{ mark.label }}\n        </span>\n      </template>\n\n      <!-- Бегунки. -->\n      <div\n        v-for=\"(value, index) in values\"\n        :id=\"index === 0 ? resolvedId : undefined\"\n        :key=\"index\"\n        :ref=\"(el) => { if (el) thumbEls[index] = el as HTMLElement }\"\n        data-gr-slider-thumb\n        :data-testid=\"`gr-slider-thumb-${index}`\"\n        :class=\"sliderThumbClass({ size: resolvedSize, disabled: isDisabled, orientation })\"\n        :style=\"offsetStyle(value)\"\n        role=\"slider\"\n        :tabindex=\"isDisabled ? -1 : 0\"\n        :aria-valuemin=\"range && index === 1 ? values[0] : min\"\n        :aria-valuemax=\"range && index === 0 ? values[1] : max\"\n        :aria-valuenow=\"value\"\n        :aria-valuetext=\"thumbValueText(value)\"\n        :aria-orientation=\"orientation\"\n        :aria-label=\"thumbAriaLabel(index)\"\n        :aria-disabled=\"isDisabled ? 'true' : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-describedby=\"index === 0 ? describedBy : undefined\"\n        :aria-required=\"isRequired && index === 0 ? 'true' : undefined\"\n        :aria-readonly=\"isReadonly ? 'true' : undefined\"\n        @keydown=\"onThumbKeydown($event, index)\"\n        @mouseenter=\"hoveredThumb = index\"\n        @mouseleave=\"hoveredThumb = null\"\n        @focus=\"hoveredThumb = index\"\n        @blur=\"hoveredThumb = null\"\n      >\n        <span\n          v-if=\"showTooltipFor(index)\"\n          data-gr-slider-tooltip\n          :class=\"sliderTooltipClass(orientation)\"\n        >\n          {{ tooltipText(value) }}\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\n\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  sliderFillClass,\n  sliderMarkLabelClassFor,\n  sliderMarkTickClass,\n  sliderRailClass,\n  sliderRootClass,\n  sliderThumbClass,\n  sliderTooltipClass,\n  sliderTrackHeightBySize,\n  sliderTrackVerticalLengthClass,\n  sliderTrackWidthBySize,\n  sliderFillOrientationClass,\n  type GrSliderMarks,\n  type GrSliderModelValue,\n  type GrSliderOrientation,\n  type GrSliderSize,\n} from './grSliderStyles'\n\nexport type {\n  GrSliderMarks,\n  GrSliderModelValue,\n  GrSliderOrientation,\n  GrSliderSize,\n} from './grSliderStyles'\n\n/**\n * Публичный GR-примитив «Slider» (WAI-ARIA slider pattern).\n *\n * Поддерживает одиночное значение и диапазон (`range` — два бегунка), шаг, метки\n * делений, всплывающее значение (tooltip), полную клавиатурную навигацию\n * (стрелки / PageUp/Down / Home / End) и `role=\"slider\"` с\n * `aria-valuemin`/`max`/`now` на каждом бегунке.\n */\nexport interface GrSliderProps {\n  /** `number` — одиночное значение; `[lo, hi]` — диапазон (при `range=true`). */\n  modelValue: GrSliderModelValue\n  min?: number\n  max?: number\n  step?: number\n  /** Диапазон с двумя бегунками; модель — кортеж `[lo, hi]`. */\n  range?: boolean\n  disabled?: boolean\n  /** Только для чтения: значение видно, но не меняется. */\n  readonly?: boolean\n  /** Визуальное и ARIA-состояние ошибки. */\n  invalid?: boolean\n  /** Обязательное поле (`aria-required`). */\n  required?: boolean\n  size?: GrSliderSize\n  /** Метки делений: `{ [value]: label }` или массив значений. */\n  marks?: GrSliderMarks\n  /** Всплывающее значение над бегунком: `true`/`'hover'` — при hover/drag/focus, `'always'` — всегда. */\n  showTooltip?: boolean | 'always' | 'hover'\n  /** Форматирование значения в tooltip. Оно же уходит в `aria-valuetext`. */\n  formatTooltip?: (value: number) => string\n  /** Ориентация дорожки. В вертикальной минимум внизу. */\n  orientation?: GrSliderOrientation\n  /**\n   * Эмитить `update:modelValue` только по завершении жеста: во время\n   * перетаскивания значение ведёт сам слайдер. Клавиатура коммитит сразу —\n   * нажатие клавиши дискретно, придерживать его нечего.\n   */\n  lazy?: boolean\n  ariaLabel?: string\n  /** Имя для нативной формы: hidden input на значение, при `range` — два с одним именем. */\n  name?: string\n}\n\nexport interface GrSliderEmits {\n  (e: 'update:modelValue', value: GrSliderModelValue): void\n  /** Значение зафиксировано (отпущен бегунок / клавиша). */\n  (e: 'change', value: GrSliderModelValue): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n  defineProps<GrSliderProps>(),\n  {\n    min: 0,\n    max: 100,\n    step: 1,\n    range: false,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    required: false,\n    size: undefined,\n    marks: undefined,\n    showTooltip: false,\n    formatTooltip: undefined,\n    orientation: 'horizontal',\n    lazy: false,\n    ariaLabel: undefined,\n    name: undefined,\n  },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst isVertical = computed(() => props.orientation === 'vertical')\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentSize(() => props.size, {\n  component: 'GrSlider',\n  supported: ['xs', 'sm', 'md', 'lg'],\n})\n\nconst emit = defineEmits<GrSliderEmits>()\n\n// Контекст `GrFormField`: id/aria-describedby/invalid/required как fallback.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid, required: isRequired, readonly: isReadonly } = useGrFormControl(() => props)\nconst describedBy = computed(() => field?.describedById.value)\n\nconst trackEl = ref<HTMLElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// У диапазона два бегунка, и фокус ходит между ними: без границы переход с\n// одного на другой давал бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n  enter: event => emit('focus', event),\n  leave: event => emit('blur', event),\n})\n\nconst thumbEls = ref<HTMLElement[]>([])\n\nfunction focus(): void {\n  thumbEls.value[0]?.focus()\n}\n\nfunction blur(): void {\n  thumbEls.value[0]?.blur()\n}\n\ndefineExpose({ focus, blur })\n\n// Нормализованные границы (гард от max<=min).\nconst span = computed(() => (props.max > props.min ? props.max - props.min : 1))\n\nconst stepDecimals = computed(() => {\n  const s = String(props.step)\n  const dot = s.indexOf('.')\n  return dot >= 0 ? s.length - dot - 1 : 0\n})\n\nfunction clamp(value: number): number {\n  return Math.min(props.max, Math.max(props.min, value))\n}\n\nfunction snap(value: number): number {\n  const stepped = Math.round((value - props.min) / props.step) * props.step + props.min\n  return Number(clamp(stepped).toFixed(stepDecimals.value))\n}\n\nfunction percent(value: number): number {\n  return ((clamp(value) - props.min) / span.value) * 100\n}\n\n// Черновик жеста: при `lazy` значение до отпускания живёт здесь, а наружу не\n// уходит — иначе смысл режима теряется.\nconst draftValues = ref<number[] | null>(null)\n\n// ————— Значения бегунков как массив (single = один бегунок).\nconst modelValues = computed<number[]>(() => {\n  if (props.range) {\n    const v = Array.isArray(props.modelValue) ? props.modelValue : [props.min, props.min]\n    return [snap(v[0] ?? props.min), snap(v[1] ?? props.min)]\n  }\n  const v = Array.isArray(props.modelValue) ? (props.modelValue[0] ?? props.min) : props.modelValue\n  return [snap(v)]\n})\n\nconst values = computed<number[]>(() => draftValues.value ?? modelValues.value)\n\n// `[touch-action:none]` обязателен: без него вертикальный свайп по бегунку\n// уходит в скролл страницы, браузер шлёт `pointercancel`, и слайдер пальцем\n// неуправляем. Утилиты `touch-none` нет ни в `presetMini`, ни в extra-rules —\n// поэтому arbitrary-значение.\nconst trackClass = computed(() => (isVertical.value\n  ? `[touch-action:none] ${sliderTrackWidthBySize[resolvedSize.value]} ${sliderTrackVerticalLengthClass}`\n  : `[touch-action:none] w-full ${sliderTrackHeightBySize[resolvedSize.value]}`))\n\n/** Смещение вдоль дорожки: по горизонтали слева, по вертикали снизу. */\nfunction offsetStyle(value: number): Record<string, string> {\n  return isVertical.value ? { bottom: `${percent(value)}%` } : { left: `${percent(value)}%` }\n}\n\nconst fillStyle = computed(() => {\n  const start = props.range\n    ? Math.min(percent(values.value[0]), percent(values.value[1]))\n    : 0\n  const end = props.range\n    ? Math.max(percent(values.value[0]), percent(values.value[1]))\n    : percent(values.value[0])\n\n  return isVertical.value\n    ? { bottom: `${start}%`, top: `${100 - end}%` }\n    : { left: `${start}%`, right: `${100 - end}%` }\n})\n\n// ————— Метки делений.\ntype SliderMark = { value: number, label: string }\nconst normalizedMarks = computed<SliderMark[]>(() => {\n  if (!props.marks) return []\n  if (Array.isArray(props.marks)) return props.marks.map(v => ({ value: v, label: String(v) }))\n  return Object.entries(props.marks).map(([value, label]) => ({ value: Number(value), label }))\n})\n\nfunction tooltipText(value: number): string {\n  return props.formatTooltip ? props.formatTooltip(value) : String(value)\n}\n\n// ————— Обновление значения конкретного бегунка.\nfunction emitValue(next: number[], commit: boolean): void {\n  const payload: GrSliderModelValue = props.range ? [next[0], next[1]] : next[0]\n  emit('update:modelValue', payload)\n  if (commit) emit('change', payload)\n}\n\nfunction setThumb(index: number, value: number, commit: boolean): void {\n  const next = values.value.slice()\n  next[index] = snap(value)\n\n  // range: не даём бегункам «перепрыгнуть» друг друга.\n  if (props.range) {\n    if (index === 0) next[0] = Math.min(next[0], next[1])\n    else next[1] = Math.max(next[1], next[0])\n  }\n\n  // `lazy` придерживает только непрерывный жест: `commit` приходит от клавиатуры\n  // и от отпускания, и там значение уходит наружу как обычно.\n  if (props.lazy && !commit) {\n    draftValues.value = next\n    return\n  }\n\n  draftValues.value = null\n  emitValue(next, commit)\n}\n\n// ————— Pointer-драг.\nconst activeThumb = ref<number | null>(null)\nconst hoveredThumb = ref<number | null>(null)\n\nfunction valueFromPointer(event: { clientX: number, clientY: number }): number {\n  const rect = trackEl.value?.getBoundingClientRect()\n  if (!rect) return props.min\n\n  // В вертикали минимум внизу, поэтому доля отсчитывается от нижнего края.\n  const ratio = isVertical.value\n    ? (rect.height === 0 ? 0 : 1 - (event.clientY - rect.top) / rect.height)\n    : (rect.width === 0 ? 0 : (event.clientX - rect.left) / rect.width)\n\n  return props.min + Math.min(1, Math.max(0, ratio)) * span.value\n}\n\n/**\n * Какой бегунок повезёт клик. При равенстве расстояний берём верхний: иначе\n * схлопнувшийся в точку диапазон не развести мышью — нижний бегунок упирается\n * в верхний и оба стоят на месте.\n */\nfunction nearestThumb(value: number): number {\n  if (!props.range) return 0\n\n  const [lo, hi] = values.value\n  if (value < lo) return 0\n  if (value > hi) return 1\n\n  return Math.abs(value - lo) < Math.abs(value - hi) ? 0 : 1\n}\n\nfunction onTrackPointerDown(event: PointerEvent): void {\n  if (isDisabled.value || isReadonly.value) return\n  // Только основная кнопка: правый и средний клик перетаскиванием не считаются.\n  if (event.button !== 0) return\n\n  const value = valueFromPointer(event)\n  const index = nearestThumb(value)\n  activeThumb.value = index\n  // Фокусируем активный бегунок сразу — чтобы клавиатура работала после клика по\n  // дорожке (div не получает фокус по клику автоматически, только через `.focus()`).\n  thumbEls.value[index]?.focus()\n  setThumb(index, value, false)\n\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', onPointerCancel)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  if (activeThumb.value === null) return\n  event.preventDefault()\n  setThumb(activeThumb.value, valueFromPointer(event), false)\n}\n\nfunction endDrag(commit: boolean): void {\n  if (activeThumb.value !== null && commit) {\n    // Финальный commit значения: у `lazy` он же и единственный `update:modelValue`.\n    const next = values.value.slice()\n    draftValues.value = null\n    emitValue(next, true)\n  }\n  // Оборванный жест (`pointercancel`: браузер забрал указатель) значения не\n  // коммитит — черновик просто отбрасывается, бегунок возвращается к модели.\n  draftValues.value = null\n  activeThumb.value = null\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerCancel)\n}\n\nfunction onPointerUp(): void {\n  endDrag(true)\n}\n\nfunction onPointerCancel(): void {\n  endDrag(false)\n}\n\nonBeforeUnmount(() => {\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', onPointerCancel)\n})\n\n// ————— Клавиатура.\nfunction bigStep(): number {\n  // PageUp/Down: 10 шагов либо 10% диапазона (что крупнее).\n  return Math.max(props.step * 10, Math.round((span.value / 10) / props.step) * props.step || props.step)\n}\n\nfunction onThumbKeydown(event: KeyboardEvent, index: number): void {\n  if (isDisabled.value || isReadonly.value) return\n  const current = values.value[index]\n  let next: number | null = null\n\n  switch (event.key) {\n    case 'ArrowRight':\n    case 'ArrowUp':\n      next = current + props.step\n      break\n    case 'ArrowLeft':\n    case 'ArrowDown':\n      next = current - props.step\n      break\n    case 'PageUp':\n      next = current + bigStep()\n      break\n    case 'PageDown':\n      next = current - bigStep()\n      break\n    case 'Home':\n      next = props.min\n      break\n    case 'End':\n      next = props.max\n      break\n    default:\n      return\n  }\n\n  event.preventDefault()\n  setThumb(index, next, true)\n}\n\nconst showTooltipFor = (index: number): boolean => {\n  if (props.showTooltip === 'always') return true\n  if (!props.showTooltip) return false\n  return activeThumb.value === index || hoveredThumb.value === index\n}\n\nfunction thumbAriaLabel(index: number): string | undefined {\n  if (!props.ariaLabel) return undefined\n  if (!props.range) return props.ariaLabel\n\n  const bound = index === 0 ? t('gr.slider.min', 'min') : t('gr.slider.max', 'max')\n  return `${props.ariaLabel} (${bound})`\n}\n\n// `aria-valuetext` нужен, только когда число само по себе не читается: «1200»\n// против «$1 200». Без своего формата атрибут не добавляем.\nfunction thumbValueText(value: number): string | undefined {\n  return props.formatTooltip ? props.formatTooltip(value) : undefined\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    data-gr-slider\n    :data-orientation=\"orientation\"\n    :class=\"sliderRootClass({ size: resolvedSize, disabled: isDisabled, hasMarks: normalizedMarks.length > 0, orientation })\"\n    @focusin=\"onFocusIn\"\n    @focusout=\"onFocusOut\"\n  >\n    <!-- Нативная форма: роль-виджет не labelable и в submit не попадает.\n         Сериализуется модель (snapped), а не черновик жеста. -->\n    <template v-if=\"name\">\n      <input\n        v-for=\"(value, index) in modelValues\"\n        :key=\"index\"\n        type=\"hidden\"\n        :name=\"name\"\n        :value=\"String(value)\"\n      >\n    </template>\n    <div\n      ref=\"trackEl\"\n      data-gr-slider-track\n      class=\"relative\"\n      :class=\"trackClass\"\n      @pointerdown=\"onTrackPointerDown\"\n    >\n      <div :class=\"sliderRailClass\" />\n      <div\n        data-gr-slider-fill\n        :class=\"[sliderFillClass(isDisabled), sliderFillOrientationClass[orientation]]\"\n        :style=\"fillStyle\"\n      />\n\n      <!-- Метки делений. -->\n      <template v-for=\"mark in normalizedMarks\" :key=\"mark.value\">\n        <span\n          data-gr-slider-mark\n          :class=\"sliderMarkTickClass(orientation)\"\n          :style=\"offsetStyle(mark.value)\"\n          aria-hidden=\"true\"\n        />\n        <!-- Подпись метки дублирует значение, которое диктор читает с бегунка:\n             как отдельный текст внутри слайдера она только мешает. -->\n        <span\n          data-gr-slider-mark-label\n          :class=\"sliderMarkLabelClassFor(percent(mark.value), { orientation, disabled: isDisabled })\"\n          :style=\"offsetStyle(mark.value)\"\n          aria-hidden=\"true\"\n        >\n          {{ mark.label }}\n        </span>\n      </template>\n\n      <!-- Бегунки. -->\n      <div\n        v-for=\"(value, index) in values\"\n        :id=\"index === 0 ? resolvedId : undefined\"\n        :key=\"index\"\n        :ref=\"(el) => { if (el) thumbEls[index] = el as HTMLElement }\"\n        data-gr-slider-thumb\n        :data-testid=\"`gr-slider-thumb-${index}`\"\n        :class=\"sliderThumbClass({ size: resolvedSize, disabled: isDisabled, orientation })\"\n        :style=\"offsetStyle(value)\"\n        role=\"slider\"\n        :tabindex=\"isDisabled ? -1 : 0\"\n        :aria-valuemin=\"range && index === 1 ? values[0] : min\"\n        :aria-valuemax=\"range && index === 0 ? values[1] : max\"\n        :aria-valuenow=\"value\"\n        :aria-valuetext=\"thumbValueText(value)\"\n        :aria-orientation=\"orientation\"\n        :aria-label=\"thumbAriaLabel(index)\"\n        :aria-disabled=\"isDisabled ? 'true' : undefined\"\n        :aria-invalid=\"isInvalid ? 'true' : undefined\"\n        :aria-describedby=\"index === 0 ? describedBy : undefined\"\n        :aria-required=\"isRequired && index === 0 ? 'true' : undefined\"\n        :aria-readonly=\"isReadonly ? 'true' : undefined\"\n        @keydown=\"onThumbKeydown($event, index)\"\n        @mouseenter=\"hoveredThumb = index\"\n        @mouseleave=\"hoveredThumb = null\"\n        @focus=\"hoveredThumb = index\"\n        @blur=\"hoveredThumb = null\"\n      >\n        <span\n          v-if=\"showTooltipFor(index)\"\n          data-gr-slider-tooltip\n          :class=\"sliderTooltipClass(orientation)\"\n        >\n          {{ tooltipText(value) }}\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSlider/index.js

@@ -0,0 +1,3 @@
+import { t as GrSlider_default } from "./chunks/GrSlider-DkU9IQSX.js";
+import { n as grSliderSafelist, t as grSliderConfig } from "../../chunks/config-T3qdQBgU.js";
+export { GrSlider_default as GrSlider, GrSlider_default as default, grSliderConfig, grSliderSafelist };