@feugene/granularity 0.18.0 → 0.20.0

package/dist/components/GrColorPicker/chunks/GrColorPicker-qQdoEPHF.js

@@ -0,0 +1,584 @@
+import { a as useGrComponentSize } from "../../../chunks/context-CTbuwcYs.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 GrInput_default } from "../../GrInput/chunks/GrInput-Bb_pxqpT.js";
+import { t as GrPopover_default } from "../../GrPopover/chunks/GrPopover-b70bIlQ9.js";
+import { t as GrSlider_default } from "../../GrSlider/chunks/GrSlider-s99yAyz6.js";
+import { a as grColorPickerPresetClass, c as previewClass, d as rowValueClass, f as swatchBaseClass, h as triggerValueClass, i as grColorPickerPanelClass, l as rowClass, m as triggerSwatchSizeBySize, o as grColorPickerTriggerClass, p as swatchFillClass, r as checkerClass, s as presetsGridClass, u as rowLabelClass } from "../../../chunks/config-BsPDQ0dS.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, toDisplayString, unref, useId, watch, withCtx, withKeys } from "vue";
+import '../styles.css';//#region src/components/GrColorPicker/color.ts
+var HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i;
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+/**
+* Оттенок цикличен: 360° — тот же цвет, что 0°.
+*
+* Округления здесь нет намеренно: `#3b82f6` даёт 217.22°, и округлив его до
+* целого, обратное преобразование вернуло бы `#3b83f6` — компонент молча
+* переписывал бы чужой цвет при первом же открытии панели. Целые градусы
+* появляются там, где они и нужны, — на шкале слайдера (`normalizeHsla`).
+*/
+function normalizeHue(hue) {
+	if (!Number.isFinite(hue)) return 0;
+	return (hue % 360 + 360) % 360;
+}
+/** Короткая форма `#abc` разворачивается в `#aabbcc` — так её читает и CSS. */
+function expandShorthand(hex) {
+	if (hex.length === 3 || hex.length === 4) return [...hex].map((char) => char + char).join("");
+	if (hex.length === 6 || hex.length === 8) return hex;
+	return null;
+}
+function rgbToHsl({ r, g, b }) {
+	const red = r / 255;
+	const green = g / 255;
+	const blue = b / 255;
+	const max = Math.max(red, green, blue);
+	const min = Math.min(red, green, blue);
+	const delta = max - min;
+	const lightness = (max + min) / 2;
+	if (delta === 0) return {
+		h: 0,
+		s: 0,
+		l: lightness * 100
+	};
+	const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+	let hue;
+	if (max === red) hue = (green - blue) / delta % 6;
+	else if (max === green) hue = (blue - red) / delta + 2;
+	else hue = (red - green) / delta + 4;
+	return {
+		h: normalizeHue(hue * 60),
+		s: saturation * 100,
+		l: lightness * 100
+	};
+}
+function hslToRgb({ h, s, l }) {
+	const saturation = clamp(s, 0, 100) / 100;
+	const lightness = clamp(l, 0, 100) / 100;
+	const hue = normalizeHue(h);
+	const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+	const second = chroma * (1 - Math.abs(hue / 60 % 2 - 1));
+	const match = lightness - chroma / 2;
+	const [red, green, blue] = (() => {
+		if (hue < 60) return [
+			chroma,
+			second,
+			0
+		];
+		if (hue < 120) return [
+			second,
+			chroma,
+			0
+		];
+		if (hue < 180) return [
+			0,
+			chroma,
+			second
+		];
+		if (hue < 240) return [
+			0,
+			second,
+			chroma
+		];
+		if (hue < 300) return [
+			second,
+			0,
+			chroma
+		];
+		return [
+			chroma,
+			0,
+			second
+		];
+	})();
+	return {
+		r: Math.round((red + match) * 255),
+		g: Math.round((green + match) * 255),
+		b: Math.round((blue + match) * 255)
+	};
+}
+function toHexPair(value) {
+	return clamp(Math.round(value), 0, 255).toString(16).padStart(2, "0");
+}
+/**
+* Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),
+* регистр и решётка необязательны.
+*
+* Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и
+* из поля ввода, и упавший компонент — худший ответ на опечатку.
+*/
+function parseHexColor(value) {
+	if (typeof value !== "string") return null;
+	const match = HEX_PATTERN.exec(value.trim());
+	if (!match) return null;
+	const hex = expandShorthand(match[1]);
+	if (!hex) return null;
+	const rgb = {
+		r: Number.parseInt(hex.slice(0, 2), 16),
+		g: Number.parseInt(hex.slice(2, 4), 16),
+		b: Number.parseInt(hex.slice(4, 6), 16)
+	};
+	const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1;
+	return {
+		...rgbToHsl(rgb),
+		a: alpha
+	};
+}
+/**
+* Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до
+* непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную
+* форму, которую потребитель не ждёт.
+*/
+function formatHexColor(color, withAlpha = false) {
+	const { r, g, b } = hslToRgb(color);
+	const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`;
+	if (!withAlpha) return base;
+	return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`;
+}
+/** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */
+function trim(value) {
+	return Math.round(value * 100) / 100;
+}
+/** CSS-запись цвета для превью и градиентов. */
+function hslaToCss(color) {
+	return `hsl(${trim(normalizeHue(color.h))} ${trim(clamp(color.s, 0, 100))}% ${trim(clamp(color.l, 0, 100))}% / ${trim(clamp(color.a, 0, 1))})`;
+}
+/** Приводит произвольный объект к валидному диапазону каналов. */
+function normalizeHsla(color) {
+	return {
+		h: Math.round(normalizeHue(color.h)) % 360,
+		s: clamp(Math.round(color.s), 0, 100),
+		l: clamp(Math.round(color.l), 0, 100),
+		a: clamp(color.a, 0, 1)
+	};
+}
+//#endregion
+//#region src/components/GrColorPicker/GrColorPicker.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { "data-gr-color-picker": "" };
+var _hoisted_2 = ["name", "value"];
+var _hoisted_3 = ["id"];
+var _hoisted_4 = [
+	"id",
+	"aria-label",
+	"aria-describedby",
+	"aria-invalid"
+];
+var _hoisted_5 = ["aria-label"];
+var _hoisted_6 = [
+	"aria-label",
+	"aria-pressed",
+	"disabled",
+	"onClick"
+];
+//#endregion
+//#region src/components/GrColorPicker/GrColorPicker.vue
+var GrColorPicker_default = /* @__PURE__ */ defineComponent({
+	__name: "GrColorPicker",
+	props: {
+		modelValue: {},
+		alpha: {
+			type: Boolean,
+			default: false
+		},
+		presets: { default: () => [] },
+		size: { default: void 0 },
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		placement: { default: "bottom-start" },
+		name: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		invalid: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"update:open",
+		"focus",
+		"blur"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		/**
+		* GrColorPicker — поле выбора цвета: образец с текущим значением, панель с
+		* оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.
+		*
+		* Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:
+		* в такой форме цвет лежит в токенах и его понимает CSS.
+		*
+		* A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role="slider"`
+		* с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value
+		* не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и
+		* доступность там пришлось бы собирать с нуля.
+		*/
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const resolvedSize = useGrComponentSize(() => props.size, { component: "GrColorPicker" });
+		const field = useGrFormFieldContext();
+		const fieldId = computed(() => field?.id.value);
+		const { disabled: isDisabled, invalid: isInvalid, required: isRequired, readonly: isReadonly, locked: isLocked } = useGrFormControl(() => props);
+		/**
+		* `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет
+		* это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:
+		* иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`
+		* декоративен и скрыт).
+		*/
+		const stateHintId = useId();
+		const stateHint = computed(() => [isRequired.value ? t("gr.form.required", "This field is required") : void 0, isReadonly.value ? t("gr.form.readonly", "Read only") : void 0].filter(Boolean).join(". ") || void 0);
+		const describedBy = computed(() => [field?.describedById.value, stateHint.value ? stateHintId : void 0].filter(Boolean).join(" ") || void 0);
+		const triggerEl = ref(null);
+		function focus() {
+			triggerEl.value?.focus();
+		}
+		function blur() {
+			triggerEl.value?.blur();
+		}
+		__expose({
+			focus,
+			blur
+		});
+		/**
+		* Рабочее состояние панели.
+		*
+		* Держать его отдельно от модели обязательно: hex — проекция с потерями. У
+		* серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы
+		* обратно на 0° при каждом движении.
+		*/
+		const state = ref(parseHexColor(props.modelValue) ?? {
+			h: 0,
+			s: 0,
+			l: 0,
+			a: 1
+		});
+		/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */
+		let lastEmitted = "";
+		watch(() => props.modelValue, (next) => {
+			if (next === lastEmitted) return;
+			const parsed = parseHexColor(next);
+			if (parsed) state.value = parsed;
+		});
+		const cssColor = computed(() => hslaToCss(state.value));
+		const hexValue = computed(() => formatHexColor(state.value, props.alpha));
+		function commit(next) {
+			if (isLocked.value) return;
+			state.value = normalizeHsla(next);
+			const hex = formatHexColor(state.value, props.alpha);
+			lastEmitted = hex;
+			emit("update:modelValue", hex);
+			emit("change", hex);
+		}
+		/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */
+		function channel(key, scale = 1) {
+			return computed({
+				get: () => Math.round(state.value[key] * scale),
+				set: (value) => commit({
+					...state.value,
+					[key]: value / scale
+				})
+			});
+		}
+		const hue = channel("h");
+		const saturation = channel("s");
+		const lightness = channel("l");
+		const opacity = channel("a", 100);
+		const degrees = (value) => `${value}°`;
+		const percent = (value) => `${value}%`;
+		/** Текст поля hex редактируется свободно и коммитится только валидным. */
+		const hexDraft = ref(hexValue.value);
+		watch(hexValue, (next) => {
+			hexDraft.value = next;
+		});
+		function commitHex() {
+			const parsed = parseHexColor(hexDraft.value);
+			if (!parsed) {
+				nextTick(() => {
+					hexDraft.value = hexValue.value;
+				});
+				return;
+			}
+			commit(props.alpha ? parsed : {
+				...parsed,
+				a: state.value.a
+			});
+		}
+		const isOpen = ref(false);
+		const panelOpen = computed({
+			get: () => props.open ?? isOpen.value,
+			set: (value) => {
+				isOpen.value = value;
+				emit("update:open", value);
+			}
+		});
+		const presetList = computed(() => props.presets.filter((preset) => parseHexColor(preset) !== null));
+		function isPresetSelected(preset) {
+			const parsed = parseHexColor(preset);
+			return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false;
+		}
+		function selectPreset(preset) {
+			const parsed = parseHexColor(preset);
+			if (parsed) commit(parsed);
+		}
+		const triggerClass = computed(() => grColorPickerTriggerClass({
+			size: resolvedSize.value,
+			disabled: isDisabled.value,
+			invalid: isInvalid.value
+		}));
+		const panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value));
+		const swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value]);
+		/**
+		* Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в
+		* `background-color`, а градиент там не работает — поэтому значения приезжают
+		* переменными, а красит дорожки собственный `<style>` компонента.
+		*
+		* Переменные висят на самой панели, а не на корне: панель уезжает в портал, и
+		* наследование от корня до неё не доходит.
+		*/
+		const trackVars = computed(() => {
+			const { h, s, l } = state.value;
+			const solid = hslaToCss({
+				h,
+				s,
+				l,
+				a: 1
+			});
+			return {
+				"--gr-color-picker-track-hue": "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))",
+				"--gr-color-picker-track-saturation": `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,
+				"--gr-color-picker-track-lightness": `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,
+				"--gr-color-picker-track-alpha": `linear-gradient(to right, transparent, ${solid})`
+			};
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				__props.name ? (openBlock(), createElementBlock("input", {
+					key: 0,
+					type: "hidden",
+					name: __props.name,
+					value: hexValue.value
+				}, null, 8, _hoisted_2)) : createCommentVNode("", true),
+				stateHint.value ? (openBlock(), createElementBlock("span", {
+					key: 1,
+					id: unref(stateHintId),
+					class: "sr-only"
+				}, toDisplayString(stateHint.value), 9, _hoisted_3)) : createCommentVNode("", true),
+				createVNode(GrPopover_default, {
+					open: panelOpen.value,
+					"onUpdate:open": _cache[7] || (_cache[7] = ($event) => panelOpen.value = $event),
+					size: unref(resolvedSize),
+					placement: __props.placement,
+					disabled: unref(isDisabled),
+					"aria-label": unref(t)("gr.colorPicker.panelLabel", "Color picker"),
+					"close-on-content-click": false
+				}, {
+					trigger: withCtx(({ triggerProps }) => [createElementVNode("button", mergeProps({
+						id: fieldId.value,
+						ref_key: "triggerEl",
+						ref: triggerEl
+					}, triggerProps, {
+						"data-gr-color-picker-trigger": "",
+						type: "button",
+						class: triggerClass.value,
+						"aria-label": __props.ariaLabel,
+						"aria-describedby": describedBy.value,
+						"aria-invalid": unref(isInvalid) ? "true" : void 0,
+						onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus", $event)),
+						onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur", $event))
+					}), [createElementVNode("span", {
+						"data-gr-color-picker-swatch": "",
+						"aria-hidden": "true",
+						class: normalizeClass([
+							unref(swatchBaseClass),
+							swatchSizeClass.value,
+							unref(checkerClass)
+						])
+					}, [createElementVNode("span", {
+						class: normalizeClass(unref(swatchFillClass)),
+						style: normalizeStyle({ background: cssColor.value })
+					}, null, 6)], 2), createElementVNode("span", { class: normalizeClass(unref(triggerValueClass)) }, toDisplayString(hexValue.value), 3)], 16, _hoisted_4)]),
+					content: withCtx(() => [createElementVNode("div", {
+						"data-gr-color-picker-panel": "",
+						class: normalizeClass(panelClass.value),
+						style: normalizeStyle(trackVars.value)
+					}, [
+						createElementVNode("div", {
+							"data-gr-color-picker-preview": "",
+							"aria-hidden": "true",
+							class: normalizeClass([unref(previewClass), unref(checkerClass)])
+						}, [createElementVNode("span", {
+							class: normalizeClass(unref(swatchFillClass)),
+							style: normalizeStyle({ background: cssColor.value })
+						}, null, 6)], 2),
+						createElementVNode("div", {
+							"data-gr-color-picker-channel": "hue",
+							class: normalizeClass(unref(rowClass))
+						}, [
+							createElementVNode("span", {
+								class: normalizeClass(unref(rowLabelClass)),
+								"aria-hidden": "true"
+							}, "H", 2),
+							createVNode(GrSlider_default, {
+								modelValue: unref(hue),
+								"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(hue) ? hue.value = $event : null),
+								min: 0,
+								max: 359,
+								size: unref(resolvedSize),
+								disabled: unref(isDisabled),
+								readonly: unref(isReadonly),
+								"format-tooltip": degrees,
+								"aria-label": unref(t)("gr.colorPicker.hue", "Hue")
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"disabled",
+								"readonly",
+								"aria-label"
+							]),
+							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(degrees(unref(hue))), 3)
+						], 2),
+						createElementVNode("div", {
+							"data-gr-color-picker-channel": "saturation",
+							class: normalizeClass(unref(rowClass))
+						}, [
+							createElementVNode("span", {
+								class: normalizeClass(unref(rowLabelClass)),
+								"aria-hidden": "true"
+							}, "S", 2),
+							createVNode(GrSlider_default, {
+								modelValue: unref(saturation),
+								"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isRef(saturation) ? saturation.value = $event : null),
+								size: unref(resolvedSize),
+								disabled: unref(isDisabled),
+								readonly: unref(isReadonly),
+								"format-tooltip": percent,
+								"aria-label": unref(t)("gr.colorPicker.saturation", "Saturation")
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"disabled",
+								"readonly",
+								"aria-label"
+							]),
+							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(saturation))), 3)
+						], 2),
+						createElementVNode("div", {
+							"data-gr-color-picker-channel": "lightness",
+							class: normalizeClass(unref(rowClass))
+						}, [
+							createElementVNode("span", {
+								class: normalizeClass(unref(rowLabelClass)),
+								"aria-hidden": "true"
+							}, "L", 2),
+							createVNode(GrSlider_default, {
+								modelValue: unref(lightness),
+								"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => isRef(lightness) ? lightness.value = $event : null),
+								size: unref(resolvedSize),
+								disabled: unref(isDisabled),
+								readonly: unref(isReadonly),
+								"format-tooltip": percent,
+								"aria-label": unref(t)("gr.colorPicker.lightness", "Lightness")
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"disabled",
+								"readonly",
+								"aria-label"
+							]),
+							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(lightness))), 3)
+						], 2),
+						__props.alpha ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							"data-gr-color-picker-channel": "alpha",
+							class: normalizeClass(unref(rowClass))
+						}, [
+							createElementVNode("span", {
+								class: normalizeClass(unref(rowLabelClass)),
+								"aria-hidden": "true"
+							}, "A", 2),
+							createVNode(GrSlider_default, {
+								modelValue: unref(opacity),
+								"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => isRef(opacity) ? opacity.value = $event : null),
+								size: unref(resolvedSize),
+								disabled: unref(isDisabled),
+								readonly: unref(isReadonly),
+								"format-tooltip": percent,
+								"aria-label": unref(t)("gr.colorPicker.opacity", "Opacity")
+							}, null, 8, [
+								"modelValue",
+								"size",
+								"disabled",
+								"readonly",
+								"aria-label"
+							]),
+							createElementVNode("span", { class: normalizeClass(unref(rowValueClass)) }, toDisplayString(percent(unref(opacity))), 3)
+						], 2)) : createCommentVNode("", true),
+						createVNode(GrInput_default, {
+							modelValue: hexDraft.value,
+							"onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => hexDraft.value = $event),
+							"data-gr-color-picker-hex": "",
+							size: unref(resolvedSize),
+							disabled: unref(isDisabled),
+							readonly: unref(isReadonly),
+							"aria-label": unref(t)("gr.colorPicker.hexLabel", "Hex value"),
+							onChange: commitHex,
+							onKeydown: withKeys(commitHex, ["enter"])
+						}, null, 8, [
+							"modelValue",
+							"size",
+							"disabled",
+							"readonly",
+							"aria-label"
+						]),
+						presetList.value.length ? (openBlock(), createElementBlock("div", {
+							key: 1,
+							"data-gr-color-picker-presets": "",
+							class: normalizeClass(unref(presetsGridClass)),
+							role: "group",
+							"aria-label": unref(t)("gr.colorPicker.presetsLabel", "Color presets")
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(presetList.value, (preset) => {
+							return openBlock(), createElementBlock("button", {
+								key: preset,
+								"data-gr-color-picker-preset": "",
+								type: "button",
+								class: normalizeClass([unref(grColorPickerPresetClass)(isPresetSelected(preset)), unref(checkerClass)]),
+								"aria-label": unref(t)("gr.colorPicker.swatchLabel", "Color {color}", { color: preset }),
+								"aria-pressed": isPresetSelected(preset) ? "true" : "false",
+								disabled: unref(isLocked),
+								onClick: ($event) => selectPreset(preset)
+							}, [createElementVNode("span", {
+								class: normalizeClass(unref(swatchFillClass)),
+								style: normalizeStyle({ background: preset })
+							}, null, 6)], 10, _hoisted_6);
+						}), 128))], 10, _hoisted_5)) : createCommentVNode("", true)
+					], 6)]),
+					_: 1
+				}, 8, [
+					"open",
+					"size",
+					"placement",
+					"disabled",
+					"aria-label"
+				])
+			]);
+		};
+	}
+});
+//#endregion
+export { GrColorPicker_default as t };