@witchcraft/ui 0.1.0 → 0.1.1

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

@@ -2,7 +2,8 @@
 <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)]
@@ -15,15 +16,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 as any)?.class
-	)"
+  $attrs?.class
+)"
 >
 	<div
 		:class="`color-picker--all-picker
@@ -168,37 +169,29 @@
 </div>
 </template>
 
-<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"
-
+<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 $attrs = useAttrs()
-
-const t = useInjectedI18n()
-
+  name: "lib-color-picker"
+});
+const $attrs = useAttrs();
+const t = useInjectedI18n();
 const sliderClasses = `
 	slider
 	no-touch-action
@@ -206,8 +199,7 @@ const sliderClasses = `
 	w-full
 	relative
 	flex
-`
-
+`;
 const handleClasses = `
 	handle
 	h-[var(--slider-size)]
@@ -222,338 +214,265 @@ const handleClasses = `
 	focus:border-accent-500
 	active:border-accent-500
 	hover:border-accent-500
-`
-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 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 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)
-// fixes the localInputString not updating when the user inputs an invalid 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);
 function onBlurFixInvalidValue() {
-	if (localInputString.value !== localColorString.value) {
-		localInputString.value = localColorString.value
-	}
+  if (localInputString.value !== localColorString.value) {
+    localInputString.value = localColorString.value;
+  }
 }
-
-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 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 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 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 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
+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
-
-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 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) {
-			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)
+  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);
 }
-
-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 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 convertAndUpdateAll(rgba: RgbaColor) {
-	const hsva = safeConvertToHsva(rgba, props.allowAlpha)
-	if (!hsva) return
-	updateSliders(hsva)
-	updateValueAndPosition(hsva)
+function convertAndUpdateAll(rgba) {
+  const hsva = safeConvertToHsva(rgba, props.allowAlpha);
+  if (!hsva) return;
+  updateSliders(hsva);
+  updateValueAndPosition(hsva);
 }
-
-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 save() {
+  const rgba = safeConvertToRgba(localColor.val, props.allowAlpha);
+  if (!rgba) return;
+  $value.value = rgba;
+  $tempValue.value = void 0;
+  emits("save", rgba);
 }
-
-
-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)
-	}
+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
-
+let disableUpdateTempValue = false;
 onMounted(() => {
-	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()
-})
-
+  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)
-})
-
+  convertAndUpdateAll($value.value);
+});
 watch($tempValue, () => {
-	if ($tempValue.value !== undefined) {
-		disableUpdateTempValue = true
-		convertAndUpdateAll($tempValue.value)
-		setTimeout(() => { disableUpdateTempValue = false }, 0)
-	}
-})
-
+  if ($tempValue.value !== void 0) {
+    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 === 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>