@witchcraft/ui 0.1.1 → 0.1.3

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

@@ -2,8 +2,7 @@
 <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)]
@@ -16,15 +15,15 @@
 			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
-)"
+		($attrs as any)?.class
+	)"
 >
 	<div
 		:class="`color-picker--all-picker
@@ -169,29 +168,37 @@
 </div>
 </template>
 
-<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";
+<script setup lang="ts">
+/* todo change to colorjsio for less dependencies */
+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, type Ref, ref, type UnwrapRef,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 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"
+
 defineOptions({
-  name: "lib-color-picker"
-});
-const $attrs = useAttrs();
-const t = useInjectedI18n();
+	name: "lib-color-picker",
+})
+
+const $attrs = useAttrs()
+
+const t = useInjectedI18n()
+
 const sliderClasses = `
 	slider
 	no-touch-action
@@ -199,7 +206,8 @@ const sliderClasses = `
 	w-full
 	relative
 	flex
-`;
+`
+
 const handleClasses = `
 	handle
 	h-[var(--slider-size)]
@@ -214,265 +222,338 @@ const handleClasses = `
 	focus:border-accent-500
 	active:border-accent-500
 	hover:border-accent-500
-`;
-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 emits = defineEmits<{
+	(e: "save", val: RgbaColor): void
+	(e: "cancel"): void
+}>()
+
+const props = withDefaults(defineProps<
+LabelProps
+& LinkableByIdProps
+& {
+	allowAlpha?: boolean
+	/**
+	 * The precision of the rgba string representation of the color. Defaults to 3. Extra trailing zeros are removed for a prettier number.
+	 *
+	 * Does not affect the number saved unless the user manually edits the color.
+	 *
+	 * Ignored if `customRepresentation` is set.
+	 */
+	stringPrecision?: number
+	/** Allows overriding the string representation of the color. Useful for using a different representation than rgba (e.g. hex). The fromStringToHsva part is rarely needed as the colorjs.io library can normally parse the color. Returning undefined signals an error. */
+	customRepresentation?: {
+		fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string
+		fromStringToHsva?: (string: string) => HsvaColor | undefined
+	}
+	border?: boolean
+	/** Modify what the user copies to the clipboard. */
+	copyTransform?: (val: HsvaColor, stringVal: string) => any
+	valid?: boolean
+}>(), {
+	allowAlpha: true,
+	border: true,
+	stringPrecision: 3,
+	copyTransform: (_val: HsvaColor, stringVal: string) => stringVal,
+	customRepresentation: undefined,
+	valid: true,
+})
+
+
+const ariaDescription = t("color-picker.aria.description")
+const fallbackId = getFallbackId()
+
+const $value = defineModel<RgbaColor>({ required: false, default: () => ({ r: 0, g: 0, b: 0 }) })
+const $tempValue = defineModel<RgbaColor | undefined>("tempValue", { required: false, default: () => (undefined) })
+
+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",
+	},
+	all: {
+		el: pickerEl as Ref<HTMLCanvasElement>,
+		xSteps: 100,
+		ySteps: 100,
+		xKey: "s",
+		yKey: "v",
+	},
+}
+
+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 asRgba = computed(() => {
-  const rgba = safeConvertToRgba(localColor.val, props.allowAlpha);
-  if (!rgba) unreachable();
-  return rgba;
-});
+	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 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);
+	if (props.customRepresentation) {
+		return props.customRepresentation.fromHsvaToString({ ...localColor.val }, props.allowAlpha)
+	}
+	return toLowPrecisionRgbaString(asRgba.value, props.allowAlpha, props.stringPrecision)
+})
+
+const localInputString = ref(localColorString.value)
+// fixes the localInputString not updating when the user inputs an invalid value
 function onBlurFixInvalidValue() {
-  if (localInputString.value !== localColorString.value) {
-    localInputString.value = localColorString.value;
-  }
+	if (localInputString.value !== localColorString.value) {
+		localInputString.value = localColorString.value
+	}
 }
-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";
+
+function 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"
 }
-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);
+
+function updateSlider(el: HTMLCanvasElement, stops: ((i: number) => string) | string[], length: number = 360): void {
+	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 === undefined) unreachable()
+		gradient.addColorStop(i / end, stop)
+	}
+
+	ctx.fillStyle = gradient
+	ctx.fillRect(0, 0, width, height)
 }
-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;
+
+
+function getVal(x: number, width: number, steps: number = 100, accuracy: number = 100, reverse = false): { val: number, percent: number } {
+	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
 }
-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;
-    }
-  });
+
+type Types = keyof UnwrapRef<Config>
+const elDragging = ref<Types | "">("")
+let dragging = false
+
+function moveHandle(e: { clientX: number, clientY: number }, type: string) {
+	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 !== 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 slider = {
-  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);
+	keydown: (e: KeyboardEvent, type: Types) => {
+		castType<HTMLElement | undefined>(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: PointerEvent, type: Types) => {
+		const focusTargetClass = `#${props.id ?? fallbackId} .color-picker--${type}-handle`
+		const focusTarget = document.querySelector(focusTargetClass)
+		// allows enter to work when the user drags any slider as the even will be captured by the keydown listener
+		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: PointerEvent) => {
+		if (dragging) {
+			e.preventDefault()
+		}
+	},
+	pointermove: (e: PointerEvent) => {
+		e.preventDefault()
+		moveHandle(e, elDragging.value)
+	},
+	pointerup: (e: PointerEvent) => {
+		e.preventDefault()
+		dragging = false
+		elDragging.value = ""
+		document.removeEventListener("pointermove", slider.pointermove)
+		document.removeEventListener("pointerup", slider.pointerup)
+	},
+}
+function updateSliders(_: HsvaColor): void {
+	if (alphaSliderEl.value) {
+		// https://colorjs.io/docs/output#get-a-displayable-css-color-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)
 }
-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 };
+
+function updateValueAndPosition(_: HsvaColor): void {
+	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
+	localColor.val = { ..._, a: props.allowAlpha ? _.a : 1 }
 }
-function convertAndUpdateAll(rgba) {
-  const hsva = safeConvertToHsva(rgba, props.allowAlpha);
-  if (!hsva) return;
-  updateSliders(hsva);
-  updateValueAndPosition(hsva);
+
+function convertAndUpdateAll(rgba: RgbaColor) {
+	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 save(): void {
+	const rgba = safeConvertToRgba(localColor.val, props.allowAlpha)
+	if (!rgba) return
+	// update(localColor.val, { updatePosition: false, updateValue: false })
+	$value.value = rgba
+	$tempValue.value = undefined
+	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);
-  }
+
+
+function parseInput(e: Event): void {
+	const val = (e.target as HTMLInputElement)?.value
+	const converted = props.customRepresentation?.fromStringToHsva
+		? props.customRepresentation.fromStringToHsva(val)
+		: safeConvertToHsva(val, props.allowAlpha)
+	if (converted) {
+		updateSliders(converted)
+		updateValueAndPosition(converted)
+	}
 }
-let disableUpdateTempValue = false;
+
+
+let disableUpdateTempValue = false
+
 onMounted(() => {
-  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();
-});
+	convertAndUpdateAll($value.value)
+	if ($tempValue.value !== undefined) {
+		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);
-});
+	convertAndUpdateAll($value.value)
+})
+
 watch($tempValue, () => {
-  if ($tempValue.value !== void 0) {
-    disableUpdateTempValue = true;
-    convertAndUpdateAll($tempValue.value);
-    setTimeout(() => {
-      disableUpdateTempValue = false;
-    }, 0);
-  }
-});
+	if ($tempValue.value !== undefined) {
+		disableUpdateTempValue = true
+		convertAndUpdateAll($tempValue.value)
+		setTimeout(() => { disableUpdateTempValue = false }, 0)
+	}
+})
+
 watch(localColor, () => {
-  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)));
+	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 === undefined || localColor.val.a < 0.5)))
 </script>