vectis-ui 0.12.0 → 0.13.0

package/dist/components/VColorPicker/VColorPicker.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,390 @@
+import { useLocale as e, useMessages as t } from "../../i18n/state.js";
+import { clamp as n } from "../../utils/number.js";
+import r from "../VIconButton/VIconButton.js";
+import { useAriaLabel as i } from "../../composables/useAriaLabel.js";
+import a from "../VInput/VInput.js";
+import o from "../VSelect/VSelect.js";
+import { colorize as ee } from "../VIcon/icons/colorize.js";
+import { COLOR_FORMATS as te, formatColor as s, hsvToRgb as c, parseColor as l, rgbToHsv as u, sameColor as ne } from "./color.js";
+import { Fragment as d, computed as f, createBlock as re, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createVNode as g, defineComponent as _, mergeModels as v, normalizeStyle as y, onMounted as ie, openBlock as b, ref as x, renderList as ae, toDisplayString as oe, unref as S, useId as se, useModel as ce, watch as C } from "vue";
+//#region src/components/VColorPicker/VColorPicker.vue?vue&type=script&setup=true&lang.ts
+var le = [
+	"aria-label",
+	"data-disabled",
+	"data-readonly"
+], w = [
+	"value",
+	"aria-label",
+	"aria-valuetext",
+	"aria-readonly",
+	"disabled"
+], ue = [
+	"value",
+	"aria-label",
+	"aria-valuetext",
+	"aria-readonly",
+	"disabled"
+], de = { class: "v-color-picker-controls" }, T = { class: "v-color-picker-tracks" }, E = [
+	"value",
+	"aria-label",
+	"aria-valuetext",
+	"aria-readonly",
+	"disabled"
+], D = [
+	"value",
+	"aria-label",
+	"aria-valuetext",
+	"aria-readonly",
+	"disabled"
+], fe = {
+	key: 0,
+	class: "v-color-picker-fields"
+}, pe = ["aria-label", "disabled"], me = [
+	"name",
+	"form",
+	"value",
+	"checked",
+	"aria-disabled",
+	"onChange"
+], he = { class: "v-visually-hidden" }, ge = ["name", "value"], O = /*@__PURE__*/ _({
+	__name: "VColorPicker",
+	props: /*@__PURE__*/ v({
+		format: { default: "hex" },
+		alpha: {
+			type: Boolean,
+			default: !1
+		},
+		swatches: { default: void 0 },
+		hideInput: {
+			type: Boolean,
+			default: !1
+		},
+		hideEyeDropper: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		name: { default: void 0 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(_, { expose: v }) {
+		let O = _, k = ce(_, "modelValue"), A = t(), j = e(), M = i(() => O.label ?? A.value.colorPicker.label), N = x({
+			h: 0,
+			s: 0,
+			v: 0,
+			a: 1
+		}), P = f(() => c(N.value)), F = null;
+		C(k, (e) => {
+			if (e === F) return;
+			let t = l(e);
+			t && (N.value = u(O.alpha ? t : {
+				...t,
+				a: 1
+			}, N.value.h));
+		}, { immediate: !0 });
+		function I(e) {
+			N.value = e, F = s(c(e), O.format, O.alpha), k.value = F;
+		}
+		function L(e) {
+			I(u(O.alpha ? e : {
+				...e,
+				a: 1
+			}, N.value.h));
+		}
+		let R = f(() => new Intl.NumberFormat(j.value, { style: "percent" })), _e = f(() => new Intl.NumberFormat(j.value, {
+			style: "unit",
+			unit: "degree",
+			unitDisplay: "narrow"
+		})), z = f(() => A.value.colorPicker.areaValue(R.value.format(Math.round(N.value.s * 100) / 100), R.value.format(Math.round(N.value.v * 100) / 100))), B = x(null), V = x(null);
+		function H(e) {
+			let t = B.value.getBoundingClientRect();
+			I({
+				...N.value,
+				s: n((e.clientX - t.left) / t.width, 0, 1),
+				v: n(1 - (e.clientY - t.top) / t.height, 0, 1)
+			});
+		}
+		let U = null;
+		function ve(e) {
+			if (!(O.disabled || e.button !== 0) && (e.preventDefault(), V.value?.focus({ preventScroll: !0 }), !O.readonly)) {
+				U = e.pointerId;
+				try {
+					B.value.setPointerCapture(e.pointerId);
+				} catch {}
+				H(e);
+			}
+		}
+		function ye(e) {
+			e.pointerId === U && H(e);
+		}
+		function W(e) {
+			e.pointerId === U && (U = null);
+		}
+		function G(e) {
+			if (O.readonly) return;
+			let t = e.shiftKey ? 10 : 1, r = {
+				ArrowLeft: ["s", -t],
+				ArrowRight: ["s", t],
+				ArrowDown: ["v", -t],
+				ArrowUp: ["v", t],
+				PageDown: ["v", -10],
+				PageUp: ["v", 10],
+				Home: ["s", -100],
+				End: ["s", 100]
+			}[e.key];
+			if (!r) return;
+			e.preventDefault();
+			let [i, a] = r;
+			I({
+				...N.value,
+				[i]: n((Math.round(N.value[i] * 100) + a) / 100, 0, 1)
+			});
+		}
+		function K(e, t, n) {
+			let r = n.target;
+			if (O.readonly) {
+				r.value = String(Math.round(N.value[e] * t));
+				return;
+			}
+			I({
+				...N.value,
+				[e]: Number(r.value) / t
+			});
+		}
+		function be(e) {
+			O.readonly && e.preventDefault();
+		}
+		let q = x(O.format);
+		C(() => O.format, (e) => q.value = e);
+		let xe = te.map((e) => ({
+			value: e,
+			label: e.toUpperCase()
+		})), J = x("");
+		C([
+			P,
+			q,
+			() => O.alpha,
+			() => k.value === null
+		], () => {
+			J.value = k.value === null ? "" : s(P.value, q.value, O.alpha);
+		}, { immediate: !0 });
+		function Y() {
+			let e = J.value.trim();
+			if (!e) {
+				F = null, k.value = null;
+				return;
+			}
+			let t = l(e);
+			t ? L(t) : J.value = s(P.value, q.value, O.alpha);
+		}
+		function Se(e) {
+			e.key === "Enter" && (e.preventDefault(), Y());
+		}
+		let X = f(() => (O.swatches ?? []).map((e) => {
+			let t = typeof e == "string" ? e : e.color;
+			return {
+				color: t,
+				label: typeof e == "string" ? e : e.label,
+				rgba: l(t)
+			};
+		})), Z = se(), Q = x(null);
+		ie(() => {
+			Q.value = window.EyeDropper ?? null;
+		});
+		async function Ce() {
+			if (Q.value) try {
+				let { sRGBHex: e } = await new Q.value().open(), t = l(e);
+				t && L({
+					...t,
+					a: N.value.a
+				});
+			} catch {}
+		}
+		let we = f(() => s({
+			...P.value,
+			a: 1
+		}, "rgb")), Te = f(() => ({
+			"--color-picker-hue": String(N.value.h),
+			"--color-picker-opaque": we.value,
+			"--color-picker-color": s(P.value, "rgb", O.alpha),
+			"--color-picker-s": String(N.value.s),
+			"--color-picker-v": String(N.value.v)
+		})), $ = x(null);
+		return v({
+			focus: (e) => V.value?.focus(e),
+			el: $
+		}), (e, t) => (b(), m("div", {
+			ref_key: "rootEl",
+			ref: $,
+			class: "v-color-picker",
+			role: "group",
+			"aria-label": S(M),
+			"data-disabled": _.disabled ? "" : void 0,
+			"data-readonly": _.readonly ? "" : void 0,
+			style: y(Te.value)
+		}, [
+			h("div", {
+				ref_key: "areaEl",
+				ref: B,
+				class: "v-color-picker-area",
+				onPointerdown: ve,
+				onPointermove: ye,
+				onPointerup: W,
+				onPointercancel: W
+			}, [
+				h("input", {
+					ref_key: "saturationEl",
+					ref: V,
+					type: "range",
+					class: "v-hidden-input",
+					min: "0",
+					max: "100",
+					value: Math.round(N.value.s * 100),
+					"aria-label": S(A).colorPicker.saturation,
+					"aria-valuetext": z.value,
+					"aria-readonly": _.readonly || void 0,
+					disabled: _.disabled,
+					onInput: t[0] ||= (e) => K("s", 100, e),
+					onKeydown: G
+				}, null, 40, w),
+				h("input", {
+					type: "range",
+					class: "v-hidden-input",
+					tabindex: "-1",
+					min: "0",
+					max: "100",
+					value: Math.round(N.value.v * 100),
+					"aria-label": S(A).colorPicker.brightness,
+					"aria-valuetext": z.value,
+					"aria-readonly": _.readonly || void 0,
+					disabled: _.disabled,
+					onInput: t[1] ||= (e) => K("v", 100, e),
+					onKeydown: G
+				}, null, 40, ue),
+				t[6] ||= h("span", {
+					class: "v-color-picker-thumb",
+					"aria-hidden": "true"
+				}, null, -1)
+			], 544),
+			h("div", de, [
+				Q.value && !_.hideEyeDropper ? (b(), re(r, {
+					key: 0,
+					class: "v-color-picker-eye-dropper",
+					icon: S(ee),
+					label: S(A).colorPicker.eyeDropper,
+					size: "sm",
+					disabled: _.disabled || _.readonly,
+					onClick: Ce
+				}, null, 8, [
+					"icon",
+					"label",
+					"disabled"
+				])) : p("", !0),
+				t[7] ||= h("span", {
+					class: "v-color-picker-preview",
+					"aria-hidden": "true"
+				}, null, -1),
+				h("div", T, [h("input", {
+					type: "range",
+					class: "v-color-picker-track v-color-picker-hue",
+					min: "0",
+					max: "360",
+					value: Math.round(N.value.h),
+					"aria-label": S(A).colorPicker.hue,
+					"aria-valuetext": _e.value.format(Math.round(N.value.h)),
+					"aria-readonly": _.readonly || void 0,
+					disabled: _.disabled,
+					onInput: t[2] ||= (e) => K("h", 1, e)
+				}, null, 40, E), _.alpha ? (b(), m("input", {
+					key: 0,
+					type: "range",
+					class: "v-color-picker-track v-color-picker-alpha",
+					min: "0",
+					max: "100",
+					value: Math.round(N.value.a * 100),
+					"aria-label": S(A).colorPicker.alpha,
+					"aria-valuetext": R.value.format(Math.round(N.value.a * 100) / 100),
+					"aria-readonly": _.readonly || void 0,
+					disabled: _.disabled,
+					onInput: t[3] ||= (e) => K("a", 100, e)
+				}, null, 40, D)) : p("", !0)])
+			]),
+			_.hideInput ? p("", !0) : (b(), m("div", fe, [g(o, {
+				"model-value": q.value,
+				class: "v-color-picker-format",
+				options: S(xe),
+				size: "sm",
+				"aria-label": S(A).colorPicker.format,
+				disabled: _.disabled,
+				"onUpdate:modelValue": t[4] ||= (e) => q.value = e
+			}, null, 8, [
+				"model-value",
+				"options",
+				"aria-label",
+				"disabled"
+			]), g(a, {
+				modelValue: J.value,
+				"onUpdate:modelValue": t[5] ||= (e) => J.value = e,
+				class: "v-color-picker-value",
+				size: "sm",
+				"aria-label": S(A).colorPicker.value,
+				autocomplete: "off",
+				spellcheck: "false",
+				disabled: _.disabled,
+				readonly: _.readonly,
+				onChange: Y,
+				onKeydown: Se
+			}, null, 8, [
+				"modelValue",
+				"aria-label",
+				"disabled",
+				"readonly"
+			])])),
+			X.value.length ? (b(), m("fieldset", {
+				key: 1,
+				class: "v-color-picker-swatches",
+				"aria-label": S(A).colorPicker.swatches,
+				disabled: _.disabled
+			}, [(b(!0), m(d, null, ae(X.value, (e) => (b(), m("label", {
+				key: e.color,
+				class: "v-color-picker-swatch",
+				style: y({ "--color-picker-swatch": e.color })
+			}, [
+				h("input", {
+					type: "radio",
+					class: "v-hidden-input",
+					name: S(Z),
+					form: `${S(Z)}-none`,
+					value: e.color,
+					checked: k.value !== null && S(ne)(e.rgba, P.value, _.alpha),
+					"aria-disabled": _.readonly || void 0,
+					onClick: be,
+					onChange: (t) => e.rgba && L(e.rgba)
+				}, null, 40, me),
+				t[8] ||= h("span", { class: "v-color-picker-chip" }, null, -1),
+				h("span", he, oe(e.label), 1)
+			], 4))), 128))], 8, pe)) : p("", !0),
+			_.name && k.value ? (b(), m("input", {
+				key: 2,
+				type: "hidden",
+				name: _.name,
+				value: k.value
+			}, null, 8, ge)) : p("", !0)
+		], 12, le));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=VColorPicker.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VColorPicker/VColorPicker.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VColorPicker.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VColorPicker/VColorPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @keyboard @a11y @core\n/**\n * A colour picker built from native ranges: the hue and alpha tracks are `<input type=\"range\">`,\n * and the saturation-brightness area holds two hidden ones, one per axis, which assistive\n * technology adjusts on its own. JavaScript adds the pointer on the area and its two-axis arrow\n * keys, which no native control offers.\n */\nimport { computed, onMounted, ref, useId, watch } from 'vue'\n\nimport VIconButton from '../VIconButton/VIconButton.vue'\nimport VInput from '../VInput/VInput.vue'\nimport VSelect from '../VSelect/VSelect.vue'\nimport { colorize as colorizeIcon } from '../VIcon/icons/colorize'\nimport { useAriaLabel } from '../../composables/useAriaLabel'\nimport { useLocale, useMessages } from '../../i18n/state'\nimport { clamp } from '../../utils/number'\nimport { COLOR_FORMATS, formatColor, hsvToRgb, parseColor, rgbToHsv, sameColor } from './color'\nimport type { ColorFormat, Hsva, Rgba } from './color'\n\nexport type { ColorFormat } from './color'\n\n/** A preset colour: the colour alone, or the colour and the words that name it. */\nexport type ColorSwatch = string | { color: string; label: string }\n\ninterface ColorPickerProps {\n  /**\n   * How the value is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. The text field accepts\n   * all four whatever this says.\n   */\n  format?: ColorFormat\n  /** Offers an opacity track, and writes the alpha into the value when it is below 1. */\n  alpha?: boolean\n  /** Preset colours, offered as a row of swatches under the picker. */\n  swatches?: ColorSwatch[]\n  /**\n   * Hides the text field and its format menu. VColorInput does, its own field playing that\n   * part.\n   */\n  hideInput?: boolean\n  /**\n   * Hides the eyedropper button, shown otherwise wherever the browser offers the `EyeDropper`\n   * API.\n   */\n  hideEyeDropper?: boolean\n  /** Makes the picker unusable. */\n  disabled?: boolean\n  /**\n   * Shows the colour without letting it be changed. The controls stay focusable and announce\n   * their values, which separates it from `disabled`, and the value is still submitted.\n   */\n  readonly?: boolean\n  /** What the picker is called. It falls back to the design system dictionary. */\n  label?: string\n  /** The name the value is sent under in a form. */\n  name?: string\n}\n\nconst props = withDefaults(defineProps<ColorPickerProps>(), {\n  format: 'hex',\n  alpha: false,\n  swatches: undefined,\n  hideInput: false,\n  hideEyeDropper: false,\n  disabled: false,\n  readonly: false,\n  label: undefined,\n  name: undefined,\n})\n\n/** The colour, written in `format`, or `null` when none has been chosen. */\nconst model = defineModel<string | null>({ default: null })\n\nconst m = useMessages()\nconst locale = useLocale()\nconst ariaLabel = useAriaLabel(() => props.label ?? m.value.colorPicker.label)\n\n/** What the picker shows. With no colour yet, it rests on black, which writes nothing. */\nconst hsva = ref<Hsva>({ h: 0, s: 0, v: 0, a: 1 })\nconst rgba = computed(() => hsvToRgb(hsva.value))\n\n// @core\n// The value last written, so that its echo through the model is not parsed back: hex rounds the\n// channels, and a grey has no hue, so reading it back would move the thumbs under the pointer.\nlet written: string | null = null\n\nwatch(\n  model,\n  (value) => {\n    if (value === written) return\n    const parsed = parseColor(value)\n    if (parsed) hsva.value = rgbToHsv(props.alpha ? parsed : { ...parsed, a: 1 }, hsva.value.h)\n  },\n  { immediate: true },\n)\n\nfunction write(next: Hsva) {\n  hsva.value = next\n  written = formatColor(hsvToRgb(next), props.format, props.alpha)\n  model.value = written\n}\n\nfunction writeRgba(next: Rgba) {\n  write(rgbToHsv(props.alpha ? next : { ...next, a: 1 }, hsva.value.h))\n}\n\nconst percent = computed(() => new Intl.NumberFormat(locale.value, { style: 'percent' }))\nconst degrees = computed(\n  () =>\n    new Intl.NumberFormat(locale.value, { style: 'unit', unit: 'degree', unitDisplay: 'narrow' }),\n)\n\n/** Both axes in words: read on either of the area's inputs, whichever one has the focus. */\nconst areaValueText = computed(() =>\n  m.value.colorPicker.areaValue(\n    percent.value.format(Math.round(hsva.value.s * 100) / 100),\n    percent.value.format(Math.round(hsva.value.v * 100) / 100),\n  ),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst saturationEl = ref<HTMLInputElement | null>(null)\n\nfunction moveTo(event: PointerEvent) {\n  const rect = areaEl.value!.getBoundingClientRect()\n  write({\n    ...hsva.value,\n    s: clamp((event.clientX - rect.left) / rect.width, 0, 1),\n    v: clamp(1 - (event.clientY - rect.top) / rect.height, 0, 1),\n  })\n}\n\n/** The pointer dragging the area's thumb, if one is. */\nlet dragging: number | null = null\n\nfunction onAreaPointerdown(event: PointerEvent) {\n  if (props.disabled || event.button !== 0) return\n  // The focus is moved by hand, without the scroll a default focus on mousedown could cause.\n  event.preventDefault()\n  saturationEl.value?.focus({ preventScroll: true })\n  if (props.readonly) return\n  dragging = event.pointerId\n  // @fallback\n  // Capture keeps the drag going outside the area; synthetic events may not reference a\n  // capturable pointer.\n  try {\n    areaEl.value!.setPointerCapture(event.pointerId)\n  } catch {\n    /* Synthetic pointers cannot be captured. */\n  }\n  moveTo(event)\n}\n\nfunction onAreaPointermove(event: PointerEvent) {\n  if (event.pointerId === dragging) moveTo(event)\n}\n\nfunction onAreaPointerup(event: PointerEvent) {\n  if (event.pointerId === dragging) dragging = null\n}\n\n// @keyboard\n/**\n * Both inputs of the area answer the same keys: the horizontal arrows and Home/End move the\n * saturation, the vertical arrows and PageUp/PageDown the brightness. Natively each input would\n * move its own axis on every arrow.\n */\nfunction onAreaKeydown(event: KeyboardEvent) {\n  if (props.readonly) return\n  const step = event.shiftKey ? 10 : 1\n  const moves: Record<string, [axis: 's' | 'v', delta: number]> = {\n    ArrowLeft: ['s', -step],\n    ArrowRight: ['s', step],\n    ArrowDown: ['v', -step],\n    ArrowUp: ['v', step],\n    PageDown: ['v', -10],\n    PageUp: ['v', 10],\n    Home: ['s', -100],\n    End: ['s', 100],\n  }\n  const move = moves[event.key]\n  if (!move) return\n  event.preventDefault()\n  const [axis, delta] = move\n  write({ ...hsva.value, [axis]: clamp((Math.round(hsva.value[axis] * 100) + delta) / 100, 0, 1) })\n}\n\n/** What a native range reports on its own: a drag on a track, or assistive technology. */\nfunction onRangeInput(channel: keyof Hsva, scale: number, event: Event) {\n  const el = event.target as HTMLInputElement\n  // @core\n  // A range has no native `readonly`: the move it has already made is put back.\n  if (props.readonly) {\n    el.value = String(Math.round(hsva.value[channel] * scale))\n    return\n  }\n  write({ ...hsva.value, [channel]: Number(el.value) / scale })\n}\n\n/** A read-only swatch refuses the click, which is what checks a radio, arrows included. */\nfunction onSwatchClick(event: MouseEvent) {\n  if (props.readonly) event.preventDefault()\n}\n\nconst shownFormat = ref<ColorFormat>(props.format)\nwatch(\n  () => props.format,\n  (format) => (shownFormat.value = format),\n)\n\nconst formatOptions = COLOR_FORMATS.map((format) => ({\n  value: format,\n  label: format.toUpperCase(),\n}))\n\n/** The text field's own copy, rewritten whenever the colour changes from elsewhere. */\nconst fieldText = ref('')\nwatch(\n  [rgba, shownFormat, () => props.alpha, () => model.value === null],\n  () => {\n    fieldText.value =\n      model.value === null ? '' : formatColor(rgba.value, shownFormat.value, props.alpha)\n  },\n  { immediate: true },\n)\n\n/** Takes what was typed, in any of the four formats, or puts the field back as it was. */\nfunction commitField() {\n  const text = fieldText.value.trim()\n  if (!text) {\n    written = null\n    model.value = null\n    return\n  }\n  const parsed = parseColor(text)\n  if (parsed) writeRgba(parsed)\n  else fieldText.value = formatColor(rgba.value, shownFormat.value, props.alpha)\n}\n\nfunction onFieldKeydown(event: KeyboardEvent) {\n  if (event.key !== 'Enter') return\n  event.preventDefault()\n  commitField()\n}\n\nconst items = computed(() =>\n  (props.swatches ?? []).map((swatch) => {\n    const color = typeof swatch === 'string' ? swatch : swatch.color\n    return {\n      color,\n      label: typeof swatch === 'string' ? swatch : swatch.label,\n      rgba: parseColor(color),\n    }\n  }),\n)\n\n// @core\n// The swatches are native radios, so the arrow keys move between them. Their name only groups\n// them: they are tied to a form that does not exist so that no enclosing form sends them, the\n// picker's value going through its own hidden input.\nconst swatchGroup = useId()\n\ninterface EyeDropperResult {\n  sRGBHex: string\n}\n\n/** The EyeDropper API, which TypeScript's DOM library does not describe yet. */\ntype EyeDropperConstructor = new () => { open: () => Promise<EyeDropperResult> }\n\n// @fallback\n// Detected once mounted, never on the server: the button simply does not exist elsewhere.\nconst eyeDropper = ref<EyeDropperConstructor | null>(null)\nonMounted(() => {\n  eyeDropper.value =\n    (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper ?? null\n})\n\nasync function pickFromScreen() {\n  if (!eyeDropper.value) return\n  try {\n    const { sRGBHex } = await new eyeDropper.value().open()\n    const picked = parseColor(sRGBHex)\n    // The screen has no transparency: the opacity already chosen is kept.\n    if (picked) writeRgba({ ...picked, a: hsva.value.a })\n  } catch {\n    // Escape cancels the eyedropper by rejecting the promise: nothing to report.\n  }\n}\n\nconst opaque = computed(() => formatColor({ ...rgba.value, a: 1 }, 'rgb'))\n\nconst rootStyle = computed(() => ({\n  '--color-picker-hue': String(hsva.value.h),\n  '--color-picker-opaque': opaque.value,\n  '--color-picker-color': formatColor(rgba.value, 'rgb', props.alpha),\n  '--color-picker-s': String(hsva.value.s),\n  '--color-picker-v': String(hsva.value.v),\n}))\n\nconst rootEl = ref<HTMLElement | null>(null)\n\ndefineExpose({\n  /** Moves the focus to the saturation-brightness area. */\n  focus: (options?: FocusOptions) => saturationEl.value?.focus(options),\n  /** The root element. */\n  el: rootEl,\n})\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    class=\"v-color-picker\"\n    role=\"group\"\n    :aria-label=\"ariaLabel\"\n    :data-disabled=\"disabled ? '' : undefined\"\n    :data-readonly=\"readonly ? '' : undefined\"\n    :style=\"rootStyle\"\n  >\n    <div\n      ref=\"areaEl\"\n      class=\"v-color-picker-area\"\n      @pointerdown=\"onAreaPointerdown\"\n      @pointermove=\"onAreaPointermove\"\n      @pointerup=\"onAreaPointerup\"\n      @pointercancel=\"onAreaPointerup\"\n    >\n      <input\n        ref=\"saturationEl\"\n        type=\"range\"\n        class=\"v-hidden-input\"\n        min=\"0\"\n        max=\"100\"\n        :value=\"Math.round(hsva.s * 100)\"\n        :aria-label=\"m.colorPicker.saturation\"\n        :aria-valuetext=\"areaValueText\"\n        :aria-readonly=\"readonly || undefined\"\n        :disabled=\"disabled\"\n        @input=\"onRangeInput('s', 100, $event)\"\n        @keydown=\"onAreaKeydown\"\n      />\n      <!-- Out of the tab order: one stop for the area, whose arrows move both axes. -->\n      <input\n        type=\"range\"\n        class=\"v-hidden-input\"\n        tabindex=\"-1\"\n        min=\"0\"\n        max=\"100\"\n        :value=\"Math.round(hsva.v * 100)\"\n        :aria-label=\"m.colorPicker.brightness\"\n        :aria-valuetext=\"areaValueText\"\n        :aria-readonly=\"readonly || undefined\"\n        :disabled=\"disabled\"\n        @input=\"onRangeInput('v', 100, $event)\"\n        @keydown=\"onAreaKeydown\"\n      />\n      <span class=\"v-color-picker-thumb\" aria-hidden=\"true\" />\n    </div>\n\n    <div class=\"v-color-picker-controls\">\n      <VIconButton\n        v-if=\"eyeDropper && !hideEyeDropper\"\n        class=\"v-color-picker-eye-dropper\"\n        :icon=\"colorizeIcon\"\n        :label=\"m.colorPicker.eyeDropper\"\n        size=\"sm\"\n        :disabled=\"disabled || readonly\"\n        @click=\"pickFromScreen\"\n      />\n      <span class=\"v-color-picker-preview\" aria-hidden=\"true\" />\n      <div class=\"v-color-picker-tracks\">\n        <input\n          type=\"range\"\n          class=\"v-color-picker-track v-color-picker-hue\"\n          min=\"0\"\n          max=\"360\"\n          :value=\"Math.round(hsva.h)\"\n          :aria-label=\"m.colorPicker.hue\"\n          :aria-valuetext=\"degrees.format(Math.round(hsva.h))\"\n          :aria-readonly=\"readonly || undefined\"\n          :disabled=\"disabled\"\n          @input=\"onRangeInput('h', 1, $event)\"\n        />\n        <input\n          v-if=\"alpha\"\n          type=\"range\"\n          class=\"v-color-picker-track v-color-picker-alpha\"\n          min=\"0\"\n          max=\"100\"\n          :value=\"Math.round(hsva.a * 100)\"\n          :aria-label=\"m.colorPicker.alpha\"\n          :aria-valuetext=\"percent.format(Math.round(hsva.a * 100) / 100)\"\n          :aria-readonly=\"readonly || undefined\"\n          :disabled=\"disabled\"\n          @input=\"onRangeInput('a', 100, $event)\"\n        />\n      </div>\n    </div>\n\n    <div v-if=\"!hideInput\" class=\"v-color-picker-fields\">\n      <VSelect\n        :model-value=\"shownFormat\"\n        class=\"v-color-picker-format\"\n        :options=\"formatOptions\"\n        size=\"sm\"\n        :aria-label=\"m.colorPicker.format\"\n        :disabled=\"disabled\"\n        @update:model-value=\"shownFormat = $event as ColorFormat\"\n      />\n      <VInput\n        v-model=\"fieldText\"\n        class=\"v-color-picker-value\"\n        size=\"sm\"\n        :aria-label=\"m.colorPicker.value\"\n        autocomplete=\"off\"\n        spellcheck=\"false\"\n        :disabled=\"disabled\"\n        :readonly=\"readonly\"\n        @change=\"commitField\"\n        @keydown=\"onFieldKeydown\"\n      />\n    </div>\n\n    <fieldset\n      v-if=\"items.length\"\n      class=\"v-color-picker-swatches\"\n      :aria-label=\"m.colorPicker.swatches\"\n      :disabled=\"disabled\"\n    >\n      <label\n        v-for=\"item in items\"\n        :key=\"item.color\"\n        class=\"v-color-picker-swatch\"\n        :style=\"{ '--color-picker-swatch': item.color }\"\n      >\n        <input\n          type=\"radio\"\n          class=\"v-hidden-input\"\n          :name=\"swatchGroup\"\n          :form=\"`${swatchGroup}-none`\"\n          :value=\"item.color\"\n          :checked=\"model !== null && sameColor(item.rgba, rgba, alpha)\"\n          :aria-disabled=\"readonly || undefined\"\n          @click=\"onSwatchClick\"\n          @change=\"item.rgba && writeRgba(item.rgba)\"\n        />\n        <span class=\"v-color-picker-chip\" />\n        <span class=\"v-visually-hidden\">{{ item.label }}</span>\n      </label>\n    </fieldset>\n\n    <input v-if=\"name && model\" type=\"hidden\" :name=\"name\" :value=\"model\" />\n  </div>\n</template>\n\n<style>\n@layer vectis.components {\n  .v-color-picker {\n    /*\n     * The checkerboard that shows through a translucent colour. It is drawn in the theme's own\n     * surface and border colours, so it reads as \"transparent\" in both themes.\n     */\n    --color-picker-checker: repeating-conic-gradient(\n        var(--vectis-color-border) 0 25%,\n        var(--vectis-color-surface) 0 50%\n      )\n      0 0 / var(--vectis-control-size-color-picker-checker)\n      var(--vectis-control-size-color-picker-checker);\n    --color-picker-thumb: var(--vectis-control-size-color-picker-thumb);\n\n    display: inline-flex;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    inline-size: var(--vectis-control-size-color-picker-width);\n    max-inline-size: 100%;\n    padding: var(--vectis-space-3);\n    color: var(--vectis-color-text);\n    font-family: var(--vectis-text-family);\n  }\n\n  /*\n   * The colour content (area, tracks, preview, swatches) is the value itself, not the theme's\n   * paint: it is never mirrored in right-to-left text, and forced colours leave it untouched.\n   * Its gradients run between literal black and white, the ends of the colour model.\n   */\n\n  /*\n   * The edge of the preview and the swatches is a translucent border over the colour, which it\n   * shades rather than covers: an opaque grey ring left a pale fringe on the antialiased pixels.\n   * The colour runs under the border and the checkerboard stops inside it, so no square of the\n   * checkerboard shows through those pixels either.\n   */\n  .v-color-picker-area,\n  .v-color-picker-track,\n  .v-color-picker-preview,\n  .v-color-picker-chip {\n    direction: ltr;\n    forced-color-adjust: none;\n  }\n\n  .v-color-picker-area {\n    position: relative;\n    block-size: var(--vectis-control-size-color-picker-area);\n    border-radius: var(--vectis-radius-interactive);\n    background:\n      linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent),\n      hsl(var(--color-picker-hue) 100% 50%);\n    cursor: crosshair;\n    touch-action: none;\n  }\n\n  /*\n   * Every thumb carries a light ring and a dark one, whatever the theme: it sits on colours of\n   * any lightness, against which a single themed ring would vanish.\n   */\n  .v-color-picker-thumb {\n    position: absolute;\n    inset-inline-start: calc(var(--color-picker-s) * 100%);\n    inset-block-start: calc((1 - var(--color-picker-v)) * 100%);\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background: var(--color-picker-opaque);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n    translate: -50% -50%;\n    pointer-events: none;\n  }\n\n  .v-color-picker-area:has(.v-hidden-input:focus-visible) .v-color-picker-thumb {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-color-picker-controls {\n    display: flex;\n    align-items: center;\n    gap: var(--vectis-space-2);\n  }\n\n  .v-color-picker-preview {\n    flex: none;\n    inline-size: var(--vectis-control-size-color-picker-preview);\n    block-size: var(--vectis-control-size-color-picker-preview);\n    border-radius: var(--vectis-radius-pill);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    background:\n      linear-gradient(var(--color-picker-color), var(--color-picker-color)) border-box,\n      var(--color-picker-checker) padding-box;\n  }\n\n  .v-color-picker-tracks {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    gap: var(--vectis-space-3);\n    min-inline-size: 0;\n  }\n\n  .v-color-picker-track {\n    display: block;\n    inline-size: 100%;\n    block-size: var(--vectis-control-size-color-picker-track);\n    margin: 0;\n    border-radius: var(--vectis-radius-pill);\n    appearance: none;\n    cursor: pointer;\n  }\n\n  .v-color-picker-hue {\n    --color-picker-track-thumb: hsl(var(--color-picker-hue) 100% 50%);\n    background: linear-gradient(\n      to right,\n      hsl(0 100% 50%),\n      hsl(60 100% 50%),\n      hsl(120 100% 50%),\n      hsl(180 100% 50%),\n      hsl(240 100% 50%),\n      hsl(300 100% 50%),\n      hsl(360 100% 50%)\n    );\n  }\n\n  .v-color-picker-alpha {\n    --color-picker-track-thumb: var(--color-picker-color);\n    background:\n      linear-gradient(to right, transparent, var(--color-picker-opaque)),\n      var(--color-picker-checker);\n  }\n\n  /*\n   * The two vendor pseudo-elements stay in two separate rules: a selector list holding one a\n   * browser does not know is dropped whole.\n   */\n  .v-color-picker-track::-webkit-slider-thumb {\n    appearance: none;\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background:\n      linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)),\n      var(--color-picker-checker);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n  }\n\n  .v-color-picker-track::-moz-range-thumb {\n    box-sizing: border-box;\n    inline-size: var(--color-picker-thumb);\n    block-size: var(--color-picker-thumb);\n    border: 2px solid white;\n    border-radius: var(--vectis-radius-pill);\n    background:\n      linear-gradient(var(--color-picker-track-thumb), var(--color-picker-track-thumb)),\n      var(--color-picker-checker);\n    box-shadow:\n      0 0 0 1px rgb(0 0 0 / 0.4),\n      inset 0 0 0 1px rgb(0 0 0 / 0.4);\n  }\n\n  .v-color-picker-track:focus-visible {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  .v-color-picker-fields {\n    display: flex;\n    gap: var(--vectis-space-2);\n  }\n\n  /* Qualified to outweigh the full width VSelect takes by default. */\n  .v-color-picker-fields .v-color-picker-format {\n    flex: none;\n    inline-size: var(--vectis-control-size-color-picker-format);\n  }\n\n  .v-color-picker-value {\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  /*\n   * A colour is written left to right in every language: in right-to-left text the bidi\n   * algorithm would move the `#` of `#f59e0b` to the end. The field keeps its right alignment.\n   */\n  .v-color-picker-value .v-input-control {\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .v-color-picker-value .v-input-control:dir(rtl) {\n    text-align: right;\n  }\n\n  .v-color-picker-swatches {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--vectis-space-2);\n    min-inline-size: 0;\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n\n  .v-color-picker-swatch {\n    position: relative;\n    display: inline-flex;\n    cursor: pointer;\n  }\n\n  .v-color-picker-chip {\n    inline-size: var(--vectis-control-size-color-picker-swatch);\n    block-size: var(--vectis-control-size-color-picker-swatch);\n    border-radius: var(--vectis-radius-interactive);\n    border: 1px solid var(--vectis-color-border-on-fill);\n    background:\n      linear-gradient(var(--color-picker-swatch), var(--color-picker-swatch)) border-box,\n      var(--color-picker-checker) padding-box;\n  }\n\n  /* An outline rather than a shadow marks the chosen swatch: forced colours keep outlines. */\n  .v-color-picker-swatch .v-hidden-input:checked + .v-color-picker-chip {\n    outline: 2px solid var(--vectis-color-text);\n    outline-offset: 1px;\n  }\n\n  .v-color-picker-swatch .v-hidden-input:focus-visible + .v-color-picker-chip {\n    outline: var(--vectis-focus-ring-width) solid var(--vectis-focus-ring-color);\n    outline-offset: var(--vectis-focus-ring-offset);\n  }\n\n  /* Colour content is media, which may fade; the text controls take the disabled tokens. */\n  .v-color-picker[data-disabled]\n    :is(\n      .v-color-picker-area,\n      .v-color-picker-preview,\n      .v-color-picker-track,\n      .v-color-picker-chip\n    ) {\n    opacity: 0.5;\n  }\n\n  .v-color-picker[data-disabled]\n    :is(.v-color-picker-area, .v-color-picker-track, .v-color-picker-swatch) {\n    cursor: not-allowed;\n  }\n\n  /* A read-only picker is still read, so it keeps the ordinary cursor, as VTimePicker does. */\n  .v-color-picker[data-readonly]\n    :is(.v-color-picker-area, .v-color-picker-track, .v-color-picker-swatch) {\n    cursor: default;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VColorPicker/color.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Colour parsing, conversion and formatting for VColorPicker and VColorInput, without a
+ * dependency. Everything works in sRGB: an `oklch()` colour outside it is clipped to the nearest
+ * displayable one, which is what the picker could show anyway.
+ */
+/** How a colour is written: `#rrggbb`, `rgb()`, `hsl()` or `oklch()`. */
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
+/** The formats in the order the picker offers them. */
+export declare const COLOR_FORMATS: readonly ColorFormat[];
+/** A colour in sRGB, each channel from 0 to 1, alpha included. */
+export interface Rgba {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+/**
+ * A colour as the picker holds it: hue in degrees, saturation and value (brightness) from 0 to
+ * 1. The hue survives where RGB would lose it, on greys, black and white.
+ */
+export interface Hsva {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+}
+export declare function hsvToRgb({ h, s, v, a }: Hsva): Rgba;
+/** `hue` is kept when the colour has none of its own: a grey, black or white. */
+export declare function rgbToHsv({ r, g, b, a }: Rgba, hue?: number): Hsva;
+/**
+ * Reads a colour written in hex (`#` optional, 3, 4, 6 or 8 digits), `rgb()`, `hsl()` or
+ * `oklch()`, in the comma or the space syntax, with an optional alpha. Returns `null` for
+ * anything else, CSS colour names included.
+ */
+export declare function parseColor(input: string | null | undefined): Rgba | null;
+/**
+ * Writes a colour in `format`. The alpha appears only when `alpha` is true and the colour is not
+ * opaque, so an opaque colour always reads the same whether alpha is offered or not.
+ */
+export declare function formatColor(rgba: Rgba, format: ColorFormat, alpha?: boolean): string;
+/** Whether two colours are the same once written in hex, which is how swatches are matched. */
+export declare function sameColor(a: Rgba | null, b: Rgba | null, alpha: boolean): boolean;

package/dist/components/VColorPicker/color.js

@@ -0,0 +1,158 @@
+//#region src/components/VColorPicker/color.ts
+var e = [
+	"hex",
+	"rgb",
+	"hsl",
+	"oklch"
+], t = (e) => Math.min(Math.max(e, 0), 1), n = (e) => (e % 360 + 360) % 360;
+function r({ h: e, s: t, v: n, a: r }) {
+	let i = (r) => {
+		let i = (r + e / 60) % 6;
+		return n - n * t * Math.max(0, Math.min(i, 4 - i, 1));
+	};
+	return {
+		r: i(5),
+		g: i(3),
+		b: i(1),
+		a: r
+	};
+}
+function i({ r: e, g: t, b: r, a: i }, a = 0) {
+	let o = Math.max(e, t, r), s = o - Math.min(e, t, r), c = a;
+	return s > 0 && (c = o === e ? 60 * (((t - r) / s + 6) % 6) : o === t ? 60 * ((r - e) / s + 2) : 60 * ((e - t) / s + 4)), {
+		h: n(c),
+		s: o === 0 ? 0 : s / o,
+		v: o,
+		a: i
+	};
+}
+function a(e, t, n, i) {
+	let a = n + t * Math.min(n, 1 - n);
+	return r({
+		h: e,
+		s: a === 0 ? 0 : 2 * (1 - n / a),
+		v: a,
+		a: i
+	});
+}
+function o(e) {
+	let { h: t, s: n, v: r } = i(e), a = r * (1 - n / 2);
+	return {
+		h: t,
+		s: a === 0 || a === 1 ? 0 : (r - a) / Math.min(a, 1 - a),
+		l: a
+	};
+}
+var s = (e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4, c = (e) => e <= .0031308 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - .055;
+function l({ r: e, g: t, b: r }) {
+	let [i, a, o] = [
+		s(e),
+		s(t),
+		s(r)
+	], c = Math.cbrt(.4122214708 * i + .5363325363 * a + .0514459929 * o), l = Math.cbrt(.2119034982 * i + .6806995451 * a + .1073969566 * o), u = Math.cbrt(.0883024619 * i + .2817188376 * a + .6299787005 * o), d = .2104542553 * c + .793617785 * l - .0040720468 * u, f = 1.9779984951 * c - 2.428592205 * l + .4505937099 * u, p = .0259040371 * c + .7827717662 * l - .808675766 * u;
+	return {
+		l: d,
+		c: Math.hypot(f, p),
+		h: n(Math.atan2(p, f) * 180 / Math.PI)
+	};
+}
+function u(e, n, r, i) {
+	let a = n * Math.cos(r * Math.PI / 180), o = n * Math.sin(r * Math.PI / 180), s = (e + .3963377774 * a + .2158037573 * o) ** 3, l = (e - .1055613458 * a - .0638541728 * o) ** 3, u = (e - .0894841775 * a - 1.291485548 * o) ** 3, d = (e) => t(c(e));
+	return {
+		r: d(4.0767416621 * s - 3.3077115913 * l + .2309699292 * u),
+		g: d(-1.2684380046 * s + 2.6097574011 * l - .3413193965 * u),
+		b: d(-.0041960863 * s - .7034186147 * l + 1.707614701 * u),
+		a: i
+	};
+}
+function d(e, t) {
+	if (e === void 0) return null;
+	if (e === "none") return 0;
+	let n = /^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(%|deg|grad|rad|turn)?$/.exec(e);
+	if (!n) return null;
+	let r = Number(n[1]);
+	switch (n[2]) {
+		case "%": return r / 100 * t;
+		case "grad": return r * .9;
+		case "rad": return r * 180 / Math.PI;
+		case "turn": return r * 360;
+		default: return r;
+	}
+}
+function f(e) {
+	if (!/^[0-9a-f]+$/.test(e) || ![
+		3,
+		4,
+		6,
+		8
+	].includes(e.length)) return null;
+	let [t = 0, n = 0, r = 0, i = 1] = (e.length <= 4 ? [...e].map((e) => e + e) : e.match(/../g)).map((e) => parseInt(e, 16) / 255);
+	return {
+		r: t,
+		g: n,
+		b: r,
+		a: i
+	};
+}
+function p(e) {
+	let r = (e ?? "").trim().toLowerCase();
+	if (!r) return null;
+	let i = /^(rgba?|hsla?|oklch)\(\s*([^)]*)\)$/.exec(r);
+	if (!i) return f(r.replace(/^#/, ""));
+	let [o = "", s, c] = i[2].split("/");
+	if (c !== void 0) return null;
+	let l = o.trim().split(/\s*,\s*|\s+/), p = s === void 0 && l.length === 4 ? l.pop() : void 0;
+	if (l.length !== 3) return null;
+	let m = (s ?? p)?.trim(), h = m === void 0 ? 1 : d(m, 1);
+	if (h === null) return null;
+	let g = i[1];
+	if (g.startsWith("rgb")) {
+		let [e, n, r] = l.map((e) => d(e, 255));
+		return e == null || n == null || r == null ? null : {
+			r: t(e / 255),
+			g: t(n / 255),
+			b: t(r / 255),
+			a: t(h)
+		};
+	}
+	if (g.startsWith("hsl")) {
+		let [e, r, i] = [
+			d(l[0], 360),
+			d(l[1], 100),
+			d(l[2], 100)
+		];
+		return e == null || r == null || i == null ? null : a(n(e), t(r / 100), t(i / 100), t(h));
+	}
+	let [_, v, y] = [
+		d(l[0], 1),
+		d(l[1], .4),
+		d(l[2], 360)
+	];
+	return _ == null || v == null || y == null ? null : u(t(_), Math.max(v, 0), n(y), t(h));
+}
+var m = (e, t = 0) => String(Number(e.toFixed(t)));
+function h(e, n, r = !1) {
+	let i = r ? t(e.a) : 1, a = i < 1 ? ` / ${m(i, 2)}` : "";
+	switch (n) {
+		case "rgb": return `rgb(${m(e.r * 255)} ${m(e.g * 255)} ${m(e.b * 255)}${a})`;
+		case "hsl": {
+			let { h: t, s: n, l: r } = o(e);
+			return `hsl(${m(t)} ${m(n * 100)}% ${m(r * 100)}%${a})`;
+		}
+		case "oklch": {
+			let { l: t, c: n, h: r } = l(e), i = n < 5e-4 ? 0 : r;
+			return `oklch(${m(t * 100, 1)}% ${m(n, 3)} ${m(i, 1)}${a})`;
+		}
+		default: {
+			let n = (e) => Math.round(t(e) * 255).toString(16).padStart(2, "0");
+			return `#${n(e.r)}${n(e.g)}${n(e.b)}${i < 1 ? n(i) : ""}`;
+		}
+	}
+}
+function g(e, t, n) {
+	return !!e && !!t && h(e, "hex", n) === h(t, "hex", n);
+}
+//#endregion
+export { e as COLOR_FORMATS, h as formatColor, r as hsvToRgb, p as parseColor, i as rgbToHsv, g as sameColor };
+
+//# sourceMappingURL=color.js.map