@witchcraft/ui 0.0.1 → 0.1.1

package/dist/runtime/components/LibColorPicker/LibColorPicker.vue

@@ -1,7 +1,9 @@
 <template>
-<div :id="id ?? fallbackId"
+<div
+	:id="id ?? fallbackId"
 	:aria-label="t('color-picker.aria')"
-	:class="twMerge(`color-picker
+	:class="twMerge(
+  `color-picker
 			[--slider-size:calc(var(--spacing)_*_4)]
 			[--contrast-dark:var(--color-neutral-100)]
 			[--contrast-light:var(--color-neutral-800)]
@@ -14,17 +16,18 @@
 			gap-3
 			p-3
 		`,
-		invertColors && `
+  invertColors && `
 			[--fg:rgb(var(--contrast-light))]
 			[--bg:rgb(var(--contrast-dark))]
 		`,
-		border && `
+  border && `
 			border rounded-sm border-neutral-600
-		`
-	)"
+		`,
+  $attrs?.class
+)"
 >
 	<div
-		:class="`picker
+		:class="`color-picker--all-picker
 			no-touch-action
 			w-full
 			aspect-square
@@ -33,7 +36,7 @@
 			rounded-sm
 			focus:border-accent-500
 		`"
-		@pointerdown="slider.pointerdown($event, 'picker')"
+		@pointerdown="slider.pointerdown($event, 'all')"
 		@pointerleave="slider.pointerleave($event)"
 	>
 		<canvas
@@ -43,8 +46,10 @@
 		<div
 			aria-live="assertive"
 			:aria-description="ariaDescription"
+			:aria-label="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"
 			:class="`
-					handle ${handleClasses}
+					color-picker--all-handle
+					${handleClasses}
 					border-[var(--fg)]
 					hover:shadow-black
 					active:shadow-black
@@ -53,15 +58,13 @@
 			:style="`
 					left: calc(${localColor.percent.s}% - var(--slider-size)/2);
 					top: calc(${localColor.percent.v}% - var(--slider-size)/2);
-					background: ${localColorStringOpaque};
+					background: ${asRgbaString};
 				`"
-			@keydown="slider.keydown($event, 'picker')"
-		>
-			<aria :value="`${t('color-picker.aria.saturation')}: ${localColor.percent.s}, ${t('color-picker.aria.value')}: ${localColor.percent.s}`"/>
-		</div>
+			@keydown="slider.keydown($event, 'all')"
+		/>
 	</div>
 	<div
-		:class="`hue-slider ${sliderClasses}`"
+		:class="`color-picker--hue-slider ${sliderClasses}`"
 		@pointerdown="slider.pointerdown($event, 'hue')"
 	>
 		<canvas
@@ -76,7 +79,10 @@
 			:aria-label="t('color-picker.aria.hue')"
 			:aria-description="ariaDescription"
 			tabindex="0"
-			:class="`handle ${handleClasses} bg-neutral-50`"
+			:class="`
+				color-picker--hue-handle
+				${handleClasses}
+			`"
 			:style="`left: calc(${localColor.percent.h}% - var(--slider-size)/2)`"
 			@keydown="slider.keydown($event, 'hue')"
 		/>
@@ -84,8 +90,10 @@
 	<div
 		v-if="allowAlpha"
 
-		:class="`alpha-slider ${sliderClasses}`"
-		@keydown="slider.keydown($event, 'alpha')"
+		:class="`
+			color-picker--alpha-slider
+			${sliderClasses}
+		`"
 		@pointerdown="slider.pointerdown($event, 'alpha')"
 	>
 		<canvas
@@ -100,12 +108,13 @@
 			:aria-valuemax="100"
 			:aria-description="ariaDescription"
 			tabindex="0"
-			:class="`handle ${handleClasses} bg-neutral-50`"
+			:class="`color-picker--alpha-handle ${handleClasses}`"
 			:style="`left: calc(${localColor.percent.a}% - var(--slider-size)/2)`"
+			@keydown="slider.keydown($event, 'alpha')"
 		/>
 	</div>
-	<div class="color-group flex w-full flex-1 gap-2">
-		<div class=" color-wrapper
+	<div class="color-picker--footer flex w-full flex-1 gap-2">
+		<div class=" color-picker--preview-wrapper
 				bg-transparency-squares
 				relative
 				aspect-square
@@ -114,63 +123,75 @@
 				shadow-xs
 			"
 		>
-			<!-- <input class="color-input" :value="localColorString" @input="parseInput"> -->
-			<div class="color
+			<div class="
+					color-picker--footer--preview
 					size-full
 					rounded-full
 					border-2
 					border-neutral-600
 					dark:border-neutral-300
 				"
-				:style="`background:${localColorString}`"
+				:style="`background: ${asRgbaString}`"
 			/>
 		</div>
-		<div class="color-controls flex flex-1 items-center gap-2">
+		<div class="color-picker--input-group flex flex-1 items-center gap-2">
 			<slot name="input">
 				<lib-simple-input
-					class="w-full"
+					:valid="valid"
+					class="color-picker--input w-full"
 					:aria-label="label"
-					:model-value="localColorString"
+					v-model="localInputString"
 					@input="parseInput"
+					@blur="onBlurFixInvalidValue"
 				/>
-				<lib-button :aria-label="t('copy')" @click="copy()">
+				<lib-button class="color-picker--copy-button" :aria-label="t('copy')" @click="copy(copyTransform?.(localColor.val, localColorString) ?? localColorString)">
 					<icon><i-fa6-regular-copy/></icon>
 				</lib-button>
 			</slot>
 		</div>
-		<!-- <lib-button @click="emits('update:modelValue', localColor.val)">Save</lib-button> -->
 	</div>
 	<slot name="buttons">
-		<div class="save-cancel-group flex w-full items-center justify-center gap-2">
-			<lib-button @click="save()">{{ t("save") }}</lib-button>
-			<lib-button @click="emits('cancel')">{{ t("cancel") }}</lib-button>
+		<div class="color-picker--save-cancel-group flex w-full items-center justify-center gap-2">
+			<lib-button
+				class="color-picker--save-button"
+				@click="save()"
+			>
+				{{ t("save") }}
+			</lib-button>
+			<lib-button
+				class="color-picker--cancel-button"
+				@click="emits('cancel')"
+			>
+				{{ t("cancel") }}
+			</lib-button>
 		</div>
 	</slot>
 </div>
 </template>
 
-<script setup lang="ts">
-/* todo change to colorjsio for less dependencies */
-import { castType } from "@alanscodelog/utils/castType.js"
-import { isArray } from "@alanscodelog/utils/isArray.js"
-import { colord } from "colord"
-import { computed, onMounted, type PropType, reactive, type Ref, ref, type UnwrapRef,watch } from "vue"
-
-import { useInjectedI18n } from "../../composables/useInjectedI18n.js"
-import type { HsvaColor, RgbaColor } from "../../types/index.js"
-import { twMerge } from "../../utils/twMerge.js"
-import aria from "../Aria/Aria.vue"
-import Icon from "../Icon/Icon.vue"
-import LibButton from "../LibButton/LibButton.vue"
-import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue"
-import { getFallbackId, type LabelProps , type LinkableByIdProps } from "../shared/props.js"
-
+<script setup>
+import { castType } from "@alanscodelog/utils/castType.js";
+import { clampNumber } from "@alanscodelog/utils/clampNumber.js";
+import { isArray } from "@alanscodelog/utils/isArray.js";
+import { unreachable } from "@alanscodelog/utils/unreachable.js";
+import Color from "colorjs.io";
+import { computed, onMounted, reactive, ref, useAttrs, watch } from "vue";
+import { safeConvertToHsva } from "./utils/safeConvertToHsva.js";
+import { safeConvertToRgba } from "./utils/safeConvertToRgba.js";
+import { toLowPrecisionRgbaString } from "./utils/toLowPrecisionRgbaString.js";
+import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
+import { copy } from "../../helpers/copy.js";
+import { twMerge } from "../../utils/twMerge.js";
+import aria from "../Aria/Aria.vue";
+import Icon from "../Icon/Icon.vue";
+import LibButton from "../LibButton/LibButton.vue";
+import LibSimpleInput from "../LibSimpleInput/LibSimpleInput.vue";
+import { getFallbackId } from "../shared/props.js";
 defineOptions({
-	name: "lib-color-picker",
-})
-
-const t = useInjectedI18n()
-
+  name: "lib-color-picker"
+});
+const $attrs = useAttrs();
+const t = useInjectedI18n();
 const sliderClasses = `
 	slider
 	no-touch-action
@@ -178,9 +199,9 @@ const sliderClasses = `
 	w-full
 	relative
 	flex
-`
-
+`;
 const handleClasses = `
+	handle
 	h-[var(--slider-size)]
 	w-[var(--slider-size)]
 	shadow-xs
@@ -193,256 +214,265 @@ const handleClasses = `
 	focus:border-accent-500
 	active:border-accent-500
 	hover:border-accent-500
-`
-
-
-const ariaDescription = t("color-picker.aria.description")
-
-const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
-
-const fallbackId = getFallbackId()
-const props = withDefaults(defineProps<
-& LabelProps
-& LinkableByIdProps
-& {
-	allowAlpha?: boolean
-	border?: boolean
-	copyTransform?: (val: HsvaColor, stringVal: string) => any
-}>(), {
-	allowAlpha: true,
-	border: true,
-	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
-})
-
-
-const emits = defineEmits<{
-	(e: "save", val: RgbaColor): void
-	(e: "cancel"): void
-}>()
-
-const pickerEl = ref<HTMLCanvasElement | null>(null)
-const hueSliderEl = ref<HTMLCanvasElement | null>(null)
-const alphaSliderEl = ref<HTMLCanvasElement | null>(null)
-
-type Config = Record<string, { el: Ref<HTMLCanvasElement>, xKey?: keyof HsvaColor, yKey?: keyof HsvaColor, xSteps?: number, ySteps?: number }>
-const config: Config = {
-	hue: {
-		el: hueSliderEl as Ref<HTMLCanvasElement>,
-		xKey: "h",
-		xSteps: 360,
-	},
-	alpha: {
-		el: alphaSliderEl as Ref<HTMLCanvasElement>,
-		xSteps: 1,
-		xKey: "a",
-	},
-	picker: {
-		el: pickerEl as Ref<HTMLCanvasElement>,
-		xSteps: 100,
-		ySteps: 100,
-		xKey: "s",
-		yKey: "v",
-	},
+`;
+const emits = defineEmits(["save", "cancel"]);
+const props = defineProps({
+  label: { type: String, required: false },
+  id: { type: String, required: false },
+  allowAlpha: { type: Boolean, required: false, default: true },
+  stringPrecision: { type: Number, required: false, default: 3 },
+  customRepresentation: { type: Object, required: false, default: void 0 },
+  border: { type: Boolean, required: false, default: true },
+  copyTransform: { type: Function, required: false, default: (_val, stringVal) => stringVal },
+  valid: { type: Boolean, required: false, default: true }
+});
+const ariaDescription = t("color-picker.aria.description");
+const fallbackId = getFallbackId();
+const $value = defineModel({ type: Object, ...{ required: false, default: () => ({ r: 0, g: 0, b: 0 }) } });
+const $tempValue = defineModel("tempValue", { type: null, ...{ required: false, default: () => void 0 } });
+const pickerEl = ref(null);
+const hueSliderEl = ref(null);
+const alphaSliderEl = ref(null);
+const config = {
+  hue: {
+    el: hueSliderEl,
+    xKey: "h",
+    xSteps: 360
+  },
+  alpha: {
+    el: alphaSliderEl,
+    xSteps: 1,
+    xKey: "a"
+  },
+  all: {
+    el: pickerEl,
+    xSteps: 100,
+    ySteps: 100,
+    xKey: "s",
+    yKey: "v"
+  }
+};
+const localColor = reactive({
+  percent: {
+    h: 0,
+    s: 0,
+    v: 0,
+    a: 0
+  },
+  val: {
+    h: 0,
+    s: 0,
+    v: 0,
+    a: 0
+  }
+});
+const asRgba = computed(() => {
+  const rgba = safeConvertToRgba(localColor.val, props.allowAlpha);
+  if (!rgba) unreachable();
+  return rgba;
+});
+const asRgbaString = computed(() => {
+  const rgba = asRgba.value;
+  if (!rgba) unreachable();
+  return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`;
+});
+const localColorString = computed(() => {
+  if (props.customRepresentation) {
+    return props.customRepresentation.fromHsvaToString({ ...localColor.val }, props.allowAlpha);
+  }
+  return toLowPrecisionRgbaString(asRgba.value, props.allowAlpha, props.stringPrecision);
+});
+const localInputString = ref(localColorString.value);
+function onBlurFixInvalidValue() {
+  if (localInputString.value !== localColorString.value) {
+    localInputString.value = localColorString.value;
+  }
 }
-const localColor = reactive<Record<"percent" | "val", HsvaColor>>({
-	percent: {
-		h: 0, s: 0, v: 0, a: 0,
-	},
-	val: {
-		h: 0, s: 0, v: 0, a: 0,
-	},
-})
-
-const localColorString = computed(() =>
-	colord(localColor.val).toRgbString(),
-)
-const localColorStringOpaque = computed(() =>
-	colord({ ...localColor.val, a: 1 }).toRgbString(),
-)
-
-
-const copy = (): void => {
-	if (navigator.clipboard) {
-		const text = props.copyTransform?.(localColor.val, localColorString.value)
-
-		navigator.clipboard.writeText(text).catch(() => { })
-	}
+function updatePicker(el, hue) {
+  const ctx = el.getContext("2d");
+  const { height, width } = el;
+  ctx.clearRect(0, 0, width, height);
+  const gradient = ctx.createLinearGradient(0, 0, 0, height);
+  gradient.addColorStop(0, "white");
+  gradient.addColorStop(1, "black");
+  const gradientColor = ctx.createLinearGradient(0, 0, width, 0);
+  gradientColor.addColorStop(0, `hsla(${hue} 100% 50% / 0)`);
+  gradientColor.addColorStop(1, `hsla(${hue} 100% 50% /1)`);
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = gradientColor;
+  ctx.globalCompositeOperation = "multiply";
+  ctx.fillRect(0, 0, width, height);
+  ctx.globalCompositeOperation = "source-over";
 }
-
-const updatePicker = (el: HTMLCanvasElement, hue: number): void => {
-	const ctx = el.getContext("2d")!
-	const { height, width } = el
-	ctx.clearRect(0, 0, width, height)
-
-	const gradient = ctx.createLinearGradient(0, 0, 0, height)
-	gradient.addColorStop(0, "white")
-	gradient.addColorStop(1, "black")
-	const gradientColor = ctx.createLinearGradient(0, 0, width, 0)
-	gradientColor.addColorStop(0, `hsla(${hue} 100% 50% / 0)`)
-	gradientColor.addColorStop(1, `hsla(${hue} 100% 50% /1)`)
-
-
-	ctx.fillStyle = gradient
-	ctx.fillRect(0, 0, width, height)
-	ctx.fillStyle = gradientColor
-	ctx.globalCompositeOperation = "multiply"
-	ctx.fillRect(0, 0, width, height)
-	ctx.globalCompositeOperation = "source-over"
-}
-
-const updateSlider = (el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void => {
-	const ctx = el.getContext("2d")!
-	const { height, width } = el// .getBoundingClientRect()
-	ctx.clearRect(0, 0, width, height)
-
-	const end = isArray(stops) ? stops.length - 1 : length
-
-	const gradient = ctx.createLinearGradient(0, 0, width, 0)
-
-	for (let i = 0; i < end + 1; i++) {
-		const stop = stops instanceof Function ? stops(i) : stops[i]
-		gradient.addColorStop(i / end, stop)
-	}
-
-	ctx.fillStyle = gradient
-	ctx.fillRect(0, 0, width, height)
+function updateSlider(el, stops, length = 360) {
+  const ctx = el.getContext("2d");
+  const { height, width } = el;
+  ctx.clearRect(0, 0, width, height);
+  const end = isArray(stops) ? stops.length - 1 : length;
+  const gradient = ctx.createLinearGradient(0, 0, width, 0);
+  for (let i = 0; i < end + 1; i++) {
+    const stop = stops instanceof Function ? stops(i) : stops[i];
+    if (stop === void 0) unreachable();
+    gradient.addColorStop(i / end, stop);
+  }
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, 0, width, height);
 }
-
-
-const getVal = (x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } => {
-	// const stepWidth = width / (steps * accuracy)
-	const percent = (x / width)
-	const unrounded = percent * steps
-
-	const val = Math.round(unrounded * accuracy) / accuracy
-	const percentVal = steps === accuracy ? val : Math.round(percent * 100 * accuracy) / accuracy
-	const res = { val, percent: percentVal }
-	if (reverse) res.val = steps - val
-	return res
+function getVal(x, width, steps = 100, accuracy = 100, reverse = false) {
+  const percent = x / width;
+  const unrounded = percent * steps;
+  const val = Math.round(unrounded * accuracy) / accuracy;
+  const percentVal = steps === accuracy ? val : Math.round(percent * 100 * accuracy) / accuracy;
+  const res = { val, percent: percentVal };
+  if (reverse) res.val = steps - val;
+  return res;
 }
-type Types = keyof UnwrapRef<Config>
-const elDragging = ref<Types | "">("")
-let dragging = false
-
-const moveHandle = (e: { clientX: number, clientY: number }, type: string) => {
-	const el = config[type].el.value
-	const { x, y, width, height } = el.getBoundingClientRect()
-
-	const info = config[type]
-	if (info.xKey !== undefined) {
-		let newPosX = e.clientX - x
-		newPosX = newPosX < 0 ? 0 : newPosX > width ? width : newPosX
-		const newX = getVal(newPosX, width, info.xSteps ?? 100)
-
-		localColor.percent[info.xKey] = newX.percent
-		localColor.val[info.xKey] = newX.val
-	}
-
-	if (info.yKey !== undefined) {
-		let newPosY = e.clientY - y
-		newPosY = newPosY < 0 ? 0 : newPosY > height ? height : newPosY
-		const newY = getVal(newPosY, height, info.ySteps ?? 100, 100, true)
-
-		localColor.percent[info.yKey] = newY.percent
-		localColor.val[info.yKey] = newY.val
-	}
+const elDragging = ref("");
+let dragging = false;
+function moveHandle(e, type) {
+  requestAnimationFrame(() => {
+    if (type === "") return;
+    const el = config[type]?.el.value;
+    if (!el || !config[type]) return;
+    const { x, y, width, height } = el.getBoundingClientRect();
+    const info = config[type];
+    if (info.xKey !== void 0) {
+      let newPosX = e.clientX - x;
+      newPosX = newPosX < 0 ? 0 : newPosX > width ? width : newPosX;
+      const newX = getVal(newPosX, width, info.xSteps ?? 100);
+      localColor.percent[info.xKey] = newX.percent;
+      localColor.val[info.xKey] = newX.val;
+    }
+    if (info.yKey !== void 0) {
+      let newPosY = e.clientY - y;
+      newPosY = newPosY < 0 ? 0 : newPosY > height ? height : newPosY;
+      const newY = getVal(newPosY, height, info.ySteps ?? 100, 100, true);
+      localColor.percent[info.yKey] = newY.percent;
+      localColor.val[info.yKey] = newY.val;
+    }
+  });
 }
 const slider = {
-	keydown: (e: KeyboardEvent, type: Types) => {
-		castType<HTMLElement | undefined>(e.target)
-		if (e.target?.getBoundingClientRect && ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key)) {
-			e.preventDefault()
-			const { x, y, width, height } = e.target.getBoundingClientRect()
-			let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0
-			let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0
-			if (e.shiftKey) {xDiff *= 10}
-			if (e.shiftKey) {yDiff *= 10}
-			moveHandle({ clientX: x + (width / 2) + xDiff, clientY: y + (height / 2) + yDiff }, type)
-		}
-	},
-	pointerdown: (e: PointerEvent, type: Types) => {
-		if (dragging) return
-		e.preventDefault()
-		elDragging.value = type
-		dragging = true
-		document.addEventListener("pointermove", slider.pointermove)
-		document.addEventListener("pointerup", slider.pointerup)
-	},
-	pointerleave: (e: PointerEvent) => {
-		if (dragging) {
-			e.preventDefault()
-		}
-	},
-	pointermove: (e: PointerEvent) => {
-		if (dragging) {
-			e.preventDefault()
-			requestAnimationFrame(() => {
-				const type = elDragging.value
-				moveHandle(e, type)
-			})
-		}
-	},
-	pointerup: (e: PointerEvent) => {
-		e.preventDefault()
-		elDragging.value = ""
-		dragging = false
-		document.removeEventListener("pointermove", slider.pointermove)
-		document.removeEventListener("pointerup", slider.pointerup)
-	},
+  keydown: (e, type) => {
+    castType(e.target);
+    if (e.target?.getBoundingClientRect) {
+      if (["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key)) {
+        e.preventDefault();
+        const { x, y, width, height } = e.target.getBoundingClientRect();
+        let xDiff = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+        let yDiff = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0;
+        if (e.shiftKey) {
+          xDiff *= 10;
+        }
+        if (e.shiftKey) {
+          yDiff *= 10;
+        }
+        moveHandle({ clientX: x + width / 2 + xDiff, clientY: y + height / 2 + yDiff }, type);
+      }
+      if (e.key === "Enter") {
+        e.preventDefault();
+        save();
+      }
+    }
+  },
+  pointerdown: (e, type) => {
+    const focusTargetClass = `#${props.id ?? fallbackId} .color-picker--${type}-handle`;
+    const focusTarget = document.querySelector(focusTargetClass);
+    if (focusTarget instanceof HTMLElement) focusTarget.focus();
+    if (dragging) return;
+    e.preventDefault();
+    elDragging.value = type;
+    dragging = true;
+    document.addEventListener("pointermove", slider.pointermove);
+    document.addEventListener("pointerup", slider.pointerup);
+    moveHandle(e, elDragging.value);
+  },
+  pointerleave: (e) => {
+    if (dragging) {
+      e.preventDefault();
+    }
+  },
+  pointermove: (e) => {
+    e.preventDefault();
+    moveHandle(e, elDragging.value);
+  },
+  pointerup: (e) => {
+    e.preventDefault();
+    dragging = false;
+    elDragging.value = "";
+    document.removeEventListener("pointermove", slider.pointermove);
+    document.removeEventListener("pointerup", slider.pointerup);
+  }
+};
+function updateSliders(_) {
+  if (alphaSliderEl.value) {
+    const color = new Color("hsv", [_.h, _.s, _.v], _.a).to("hsl");
+    const hsl0 = color.clone();
+    hsl0.alpha = 0;
+    const hsl1 = color.clone();
+    hsl1.alpha = 1;
+    updateSlider(alphaSliderEl.value, [hsl0.toString(), hsl1.toString()]);
+  }
+  updateSlider(hueSliderEl.value, (i) => `hsl(${i} 100% 50%)`);
+  updatePicker(pickerEl.value, _.h);
 }
-const update = (_: HsvaColor, { updatePosition = true, updateValue = true }: { updatePosition?: boolean, updateValue?: boolean } = {}): void => {
-	if (alphaSliderEl.value) {
-		const hsl = colord(_)
-		const hsl0 = hsl.alpha(0).toHslString()
-		const hsl1 = hsl.alpha(1).toHslString()
-		updateSlider(alphaSliderEl.value, [hsl0, hsl1])
-	}
-	updateSlider(hueSliderEl.value!, i => `hsl(${i} 100% 50%)`)
-	updatePicker(pickerEl.value!, _.h)
-	if (updatePosition) {
-		localColor.percent.h = Math.round((_.h / 360) * 10000) / 100
-		localColor.percent.s = _.s
-		localColor.percent.v = 100 - _.v
-		localColor.percent.a =
-			props.allowAlpha
-			? _.a !== undefined
-				? _.a * 100
-				: 1
-			: 1
-	}
-	if (updateValue) {
-		localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
-	}
+function updateValueAndPosition(_) {
+  localColor.percent.h = Math.round(_.h / 360 * 1e4) / 100;
+  localColor.percent.s = _.s;
+  localColor.percent.v = 100 - _.v;
+  localColor.percent.a = props.allowAlpha ? _.a !== void 0 ? _.a * 100 : 1 : 1;
+  localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 };
 }
-
-const parseInput = (e: Event): void => {
-	const val = (e.target as HTMLInputElement)?.value
-	if (val) {
-		const color = colord(val)
-		if (!color.isValid()) return
-		update(color.toHsv())
-	}
+function convertAndUpdateAll(rgba) {
+  const hsva = safeConvertToHsva(rgba, props.allowAlpha);
+  if (!hsva) return;
+  updateSliders(hsva);
+  updateValueAndPosition(hsva);
 }
-
+function save() {
+  const rgba = safeConvertToRgba(localColor.val, props.allowAlpha);
+  if (!rgba) return;
+  $value.value = rgba;
+  $tempValue.value = void 0;
+  emits("save", rgba);
+}
+function parseInput(e) {
+  const val = e.target?.value;
+  const converted = props.customRepresentation?.fromStringToHsva ? props.customRepresentation.fromStringToHsva(val) : safeConvertToHsva(val, props.allowAlpha);
+  if (converted) {
+    updateSliders(converted);
+    updateValueAndPosition(converted);
+  }
+}
+let disableUpdateTempValue = false;
 onMounted(() => {
-	const color = colord($value.value)
-	update(color.toHsv())
-})
-watch(props, () => {
-	const color = colord($value.value)
-	update(color.toHsv())
-})
-
+  convertAndUpdateAll($value.value);
+  if ($tempValue.value !== void 0) {
+    convertAndUpdateAll($tempValue.value);
+  }
+  const handle = document.querySelector(`#${props.id ?? fallbackId} .color-picker--all-handle`);
+  if (handle instanceof HTMLElement) handle.focus();
+});
+watch($value, () => {
+  convertAndUpdateAll($value.value);
+});
+watch($tempValue, () => {
+  if ($tempValue.value !== void 0) {
+    disableUpdateTempValue = true;
+    convertAndUpdateAll($tempValue.value);
+    setTimeout(() => {
+      disableUpdateTempValue = false;
+    }, 0);
+  }
+});
 watch(localColor, () => {
-	update(localColor.val, { updatePosition: false, updateValue: false })
-})
-
-const save = (): void => {
-	const color = colord(localColor.val).toRgb()
-	update(localColor.val, { updatePosition: false, updateValue: false })
-	$value.value = color
-	emits("save", color)
-}
-
-const invertColors = computed(() => !!(localColor.percent.v < 50 || (localColor.val.a === undefined || localColor.val.a < 0.5)))
+  updateSliders(localColor.val);
+  localInputString.value = localColorString.value;
+  if (disableUpdateTempValue) return;
+  const rgba = safeConvertToRgba(localColor.val, props.allowAlpha);
+  if (!rgba) return;
+  $tempValue.value = rgba;
+});
+const invertColors = computed(() => !!(localColor.percent.v < 50 || (localColor.val.a === void 0 || localColor.val.a < 0.5)));
 </script>