svelte-colourpicker 0.0.8 → 0.2.0

package/dist/ColourPicker.svelte

@@ -1,346 +1,428 @@
-<svelte:options immutable />
-
-<script context="module">const hueColours = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"];
-const size = 230;
-const numberRegExp = "(\\d*\\.?\\d{1,3})";
-const delimiterRegExp = "[, ]+";
-const rgbRegExp = new RegExp(`rgb\\(\\s*${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}\\s*\\)`, "i");
-const rgbaRegExp = new RegExp(`rgba\\(\\s*${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}\\s*\\)`, "i");
-const hexRegExp = (n) => `([\\dA-F]{${n}})`;
-const hex3RegExp = new RegExp(`^#?${hexRegExp(1).repeat(3)}$`, "i");
-const hex6RegExp = new RegExp(`^#?${hexRegExp(2).repeat(3)}$`, "i");
-const hex8RegExp = new RegExp(`^#?${hexRegExp(2).repeat(4)}$`, "i");
-function colour(input) {
-  let r, g, b, h, s, v, a, rgba, hex;
-  if (typeof input == "string") {
-    let result;
-    if (result = rgbRegExp.exec(input)) {
-      r = parseFloat(result[1]);
-      g = parseFloat(result[2]);
-      b = parseFloat(result[2]);
-      a = 1;
-    } else if (result = rgbaRegExp.exec(input)) {
-      r = parseFloat(result[1]);
-      g = parseFloat(result[2]);
-      b = parseFloat(result[3]);
-      a = parseFloat(result[4]);
-    } else if (result = hex3RegExp.exec(input)) {
-      r = parseInt(result[1].repeat(2), 16);
-      g = parseInt(result[2].repeat(2), 16);
-      b = parseInt(result[3].repeat(2), 16);
-      a = 1;
-      hex = `#${input}`;
-    } else if (result = hex6RegExp.exec(input)) {
-      r = parseInt(result[1], 16);
-      g = parseInt(result[2], 16);
-      b = parseInt(result[3], 16);
-      a = 1;
-      hex = `#${input}`;
-    } else if (result = hex8RegExp.exec(input)) {
-      r = parseInt(result[1], 16);
-      g = parseInt(result[2], 16);
-      b = parseInt(result[3], 16);
-      a = parseInt(result[4], 16);
-      hex = `#${input}`;
-    } else {
-      throw new Error(`Invalid input: "${input}"`);
-    }
-    const hsv = RGBToHSV(r, g, b);
-    h = hsv.h;
-    s = hsv.s;
-    v = hsv.v;
-  } else if ("r" in input) {
-    r = input.r;
-    g = input.g;
-    b = input.b;
-    const hsv = RGBToHSV(r, g, b);
-    h = hsv.h;
-    s = hsv.s;
-    v = hsv.v;
-    a = "a" in input ? input.a : 1;
-  } else {
-    h = input.h;
-    s = input.s;
-    v = input.v;
-    const rgb = HSVToRGB(h, s, v);
-    r = rgb.r;
-    g = rgb.g;
-    b = rgb.b;
-    a = "a" in input ? input.a : 1;
-  }
-  rgba = `rgba(${r}, ${g}, ${b}, ${a})`;
-  hex ??= `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}${a != 1 ? Math.round(a * 255).toString(16) : ""}`;
-  return {
-    r,
-    g,
-    b,
-    h,
-    s,
-    v,
-    a,
-    rgba,
-    hex
-  };
-}
-function RGBToHSV(r, g, b) {
-  let h, s, v;
-  const r1 = r / 255;
-  const g1 = g / 255;
-  const b1 = b / 255;
-  const max = Math.max(r1, g1, b1);
-  const min = Math.min(r1, g1, b1);
-  const difference = max - min;
-  if (difference == 0) {
-    h = 0;
-  } else {
-    switch (max) {
-      case r1:
-        h = (60 * ((g1 - b1) / difference) + 360) % 360;
-        break;
-      case g1:
-        h = (60 * ((b1 - r1) / difference) + 120) % 360;
-        break;
-      case b1:
-        h = (60 * ((r1 - g1) / difference) + 240) % 360;
-        break;
-      default:
-        throw new Error("h did not match r1 | g1 | b1");
-    }
-  }
-  s = max == 0 ? 0 : difference / max;
-  v = max;
-  return { h, s, v };
-}
-function HSVToRGB(h, s, v) {
-  let r, g, b;
-  const chroma = s * v;
-  const x = chroma * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = v - chroma;
-  let r1, g1, b1;
-  if (h < 60) {
-    r1 = chroma;
-    g1 = x;
-    b1 = 0;
-  } else if (60 <= h && h < 120) {
-    r1 = x;
-    g1 = chroma;
-    b1 = 0;
-  } else if (h < 180) {
-    r1 = 0;
-    g1 = chroma;
-    b1 = x;
-  } else if (h < 240) {
-    r1 = 0;
-    g1 = x;
-    b1 = chroma;
-  } else if (h < 300) {
-    r1 = x;
-    g1 = 0;
-    b1 = chroma;
-  } else {
-    r1 = chroma;
-    g1 = 0;
-    b1 = x;
-  }
-  r = Math.round((r1 + m) * 255);
-  g = Math.round((g1 + m) * 255);
-  b = Math.round((b1 + m) * 255);
-  return { r, g, b };
-}
-function clamp(value, min, max) {
-  if (value < min) {
-    return min;
-  }
-  if (value > max) {
-    return max;
-  }
-  return value;
-}
+<script module lang="ts">
+    const hueColours = ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff", "#ff0000"]
+
+    const size = 230
+
+    type RGB = { r: number; g: number; b: number }
+    type RGBA = RGB & A
+
+    type HSV = { h: number; s: number; v: number }
+    type HSVA = HSV & A
+
+    type A = { a: number }
+
+    const numberRegExp = "(\\d*\\.?\\d{1,3})"
+    const delimiterRegExp = "[, ]+"
+
+    const rgbRegExp = new RegExp(`rgb\\(\\s*${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}\\s*\\)`, "i")
+    const rgbaRegExp = new RegExp(`rgba\\(\\s*${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}${delimiterRegExp}${numberRegExp}\\s*\\)`, "i")
+
+    const hexRegExp = (n: number) => `([\\dA-F]{${n}})`
+
+    const hex3RegExp = new RegExp(`^#?${hexRegExp(1).repeat(3)}$`, "i")
+    const hex6RegExp = new RegExp(`^#?${hexRegExp(2).repeat(3)}$`, "i")
+    const hex8RegExp = new RegExp(`^#?${hexRegExp(2).repeat(4)}$`, "i")
+
+    function colour(input: string | RGB | RGBA | HSV | HSVA) {
+        let r: number, g: number, b: number, h: number, s: number, v: number, a: number, rgba: string, hex: `#${string}`
+
+        if (typeof input == "string") {
+            let result: RegExpMatchArray | null
+
+            if ((result = rgbRegExp.exec(input))) {
+                r = parseFloat(result[1])
+                g = parseFloat(result[2])
+                b = parseFloat(result[3])
+                a = 1
+            } else if ((result = rgbaRegExp.exec(input))) {
+                r = parseFloat(result[1])
+                g = parseFloat(result[2])
+                b = parseFloat(result[3])
+                a = parseFloat(result[4])
+            } else if ((result = hex3RegExp.exec(input))) {
+                r = parseInt(result[1].repeat(2), 16)
+                g = parseInt(result[2].repeat(2), 16)
+                b = parseInt(result[3].repeat(2), 16)
+                a = 1
+                hex = `#${input}`
+            } else if ((result = hex6RegExp.exec(input))) {
+                r = parseInt(result[1], 16)
+                g = parseInt(result[2], 16)
+                b = parseInt(result[3], 16)
+                a = 1
+                hex = `#${input}`
+            } else if ((result = hex8RegExp.exec(input))) {
+                r = parseInt(result[1], 16)
+                g = parseInt(result[2], 16)
+                b = parseInt(result[3], 16)
+                a = parseInt(result[4], 16)
+                hex = `#${input}`
+            } else {
+                throw new Error(`Invalid input: "${input}"`)
+            }
+
+            const hsv = RGBToHSV(r, g, b)
+
+            h = hsv.h
+            s = hsv.s
+            v = hsv.v
+        } else if ("r" in input) {
+            r = input.r
+            g = input.g
+            b = input.b
+
+            const hsv = RGBToHSV(r, g, b)
+
+            h = hsv.h
+            s = hsv.s
+            v = hsv.v
+
+            a = "a" in input ? input.a : 1
+        } else {
+            h = input.h
+            s = input.s
+            v = input.v
+
+            const rgb = HSVToRGB(h, s, v)
+
+            r = rgb.r
+            g = rgb.g
+            b = rgb.b
+
+            a = "a" in input ? input.a : 1
+        }
+
+        rgba = `rgba(${r}, ${g}, ${b}, ${a})`
+        hex ??= `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}${a != 1 ? Math.round(a * 255).toString(16) : ""}`
+
+        return {
+            r,
+            g,
+            b,
+            h,
+            s,
+            v,
+            a,
+            rgba,
+            hex
+        }
+    }
+
+    /**
+     * https://www.rapidtables.com/convert/color/rgb-to-hsv.html
+     * https://www.geeksforgeeks.org/program-change-rgb-color-model-hsv-color-model/
+     */
+    function RGBToHSV(r: number, g: number, b: number): HSV {
+        let h: number, s: number, v: number
+
+        const r1 = r / 255
+        const g1 = g / 255
+        const b1 = b / 255
+
+        const max = Math.max(r1, g1, b1)
+        const min = Math.min(r1, g1, b1)
+
+        const difference = max - min
+
+        if (difference == 0) {
+            h = 0
+        } else {
+            switch (max) {
+                case r1:
+                    h = (60 * ((g1 - b1) / difference) + 360) % 360
+                    break
+                case g1:
+                    h = (60 * ((b1 - r1) / difference) + 120) % 360
+                    break
+                case b1:
+                    h = (60 * ((r1 - g1) / difference) + 240) % 360
+                    break
+                default:
+                    throw new Error("h did not match r1 | g1 | b1")
+            }
+        }
+
+        s = max == 0 ? 0 : difference / max
+        v = max
+
+        return { h, s, v }
+    }
+
+    /**
+     * https://www.rapidtables.com/convert/color/hsv-to-rgb.html
+     */
+    function HSVToRGB(h: number, s: number, v: number): RGB {
+        let r: number, g: number, b: number
+
+        const chroma = s * v
+        const x = chroma * (1 - Math.abs(((h / 60) % 2) - 1))
+        const m = v - chroma
+
+        let r1: number, g1: number, b1: number
+
+        if (h < 60) {
+            r1 = chroma
+            g1 = x
+            b1 = 0
+        } else if (60 <= h && h < 120) {
+            r1 = x
+            g1 = chroma
+            b1 = 0
+        } else if (h < 180) {
+            r1 = 0
+            g1 = chroma
+            b1 = x
+        } else if (h < 240) {
+            r1 = 0
+            g1 = x
+            b1 = chroma
+        } else if (h < 300) {
+            r1 = x
+            g1 = 0
+            b1 = chroma
+        } /* if (h < 360) */ else {
+            r1 = chroma
+            g1 = 0
+            b1 = x
+        }
+
+        r = Math.round((r1 + m) * 255)
+        g = Math.round((g1 + m) * 255)
+        b = Math.round((b1 + m) * 255)
+
+        return { r, g, b }
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        if (value < min) {
+            return min
+        }
+        if (value > max) {
+            return max
+        }
+        return value
+    }
 </script>
 
-<script>import { createEventDispatcher, tick } from "svelte";
-import { fade, fly } from "svelte/transition";
-export let value = "rgba(255, 0, 0, 1)";
-const dispatch = createEventDispatcher();
-let c = colour(value);
-$:
-  c && onColourChanged();
-function onColourChanged() {
-  value = c.rgba;
-  dispatch("change", { rgb: { r: c.r, b: c.b, g: c.g }, hsv: { h: c.h, s: c.s, v: c.v }, hex: c.hex, a: c.a });
-}
-$:
-  value && onValueChanged();
-function onValueChanged() {
-  if (value != c.rgba) {
-    c = colour(value);
-  }
-}
-let open = false;
-let dragging = false;
-async function openPicker() {
-  open = true;
-  await tick();
-  drawColourCanvas();
-  drawHueSlider();
-  drawOpacitySlider();
-}
-async function tryClosePicker() {
-  await tick();
-  if (!dragging) {
-    open = false;
-  }
-}
-let colourCanvas;
-let hueSlider;
-let opacitySlider;
-function drawColourCanvas() {
-  const context = colourCanvas.getContext("2d");
-  context.clearRect(0, 0, colourCanvas.width, colourCanvas.height);
-  const horizontalGradient = context.createLinearGradient(0, 0, colourCanvas.width, 0);
-  horizontalGradient.addColorStop(0, "#ffffff");
-  horizontalGradient.addColorStop(1, colour({ h: c.h, s: 1, v: 1 }).rgba);
-  context.fillStyle = horizontalGradient;
-  context.fillRect(0, 0, colourCanvas.width, colourCanvas.height);
-  const verticalGradient = context.createLinearGradient(0, 0, 0, colourCanvas.height);
-  verticalGradient.addColorStop(0, "transparent");
-  verticalGradient.addColorStop(1, "#000000");
-  context.fillStyle = verticalGradient;
-  context.fillRect(0, 0, colourCanvas.width, colourCanvas.height);
-}
-function drawHueSlider() {
-  const context = hueSlider.getContext("2d");
-  context.clearRect(0, 0, hueSlider.width, hueSlider.height);
-  const gradient = context.createLinearGradient(0, 0, 0, hueSlider.height);
-  for (let i = 0, offset = 0, step = 1 / (hueColours.length - 1); i < hueColours.length; i++, offset += step) {
-    gradient.addColorStop(offset, hueColours[i]);
-  }
-  context.fillStyle = gradient;
-  context.fillRect(0, 0, hueSlider.width, hueSlider.height);
-}
-function drawOpacitySlider() {
-  const context = opacitySlider.getContext("2d");
-  context.clearRect(0, 0, opacitySlider.width, opacitySlider.height);
-  const gradient = context.createLinearGradient(0, 0, 0, opacitySlider.height);
-  gradient.addColorStop(0, "transparent");
-  gradient.addColorStop(1, colour({ h: c.h, s: c.s, v: c.v, a: 1 }).rgba);
-  context.fillStyle = gradient;
-  context.fillRect(0, 0, opacitySlider.width, opacitySlider.height);
-}
-const initListener = (fn) => {
-  const fn_preventDefault = (e) => {
-    e.preventDefault();
-    fn(e);
-  };
-  return function(e) {
-    if (e.button != 0) {
-      return;
-    }
-    dragging = true;
-    fn(e);
-    addEventListener("mousemove", fn_preventDefault);
-    addEventListener("mouseup", () => {
-      removeEventListener("mousemove", fn_preventDefault);
-      dragging = false;
-    });
-  };
-};
-function colourCanvasMove(e) {
-  const rect = colourCanvas.getBoundingClientRect();
-  c = colour({ h: c.h, s: clamp(e.pageX - rect.left, 0, size) / size, v: (size - clamp(e.pageY - rect.top, 0, size)) / size, a: c.a });
-  drawOpacitySlider();
-}
-function hueSliderMove(e) {
-  c = colour({ h: clamp(e.pageY - hueSlider.getBoundingClientRect().top, 0, size) / size * 360, s: c.s, v: c.v, a: c.a });
-  drawColourCanvas();
-  drawOpacitySlider();
-}
-function opacitySliderMove(e) {
-  c = colour({ h: c.h, s: c.s, v: c.v, a: parseFloat((clamp(e.pageY - opacitySlider.getBoundingClientRect().top, 0, size) / size).toFixed(2)) });
-}
-function hexInputChange(e) {
-  let value2 = e.currentTarget.value;
-  if (value2.startsWith("#")) {
-    value2 = value2.substring(1);
-  }
-  if ([3, 6, 8].includes(value2.length)) {
-    c = colour(value2);
-  }
-}
-function redInputChange(e) {
-  const value2 = parseFloat(e.currentTarget.value);
-  if (value2 >= 0 && value2 <= 255) {
-    c = colour({ r: value2, g: c.g, b: c.b, a: c.a });
-    drawColourCanvas();
-    drawOpacitySlider();
-  }
-}
-function greenInputChange(e) {
-  const value2 = parseFloat(e.currentTarget.value);
-  if (value2 >= 0 && value2 <= 255) {
-    c = colour({ r: c.r, g: value2, b: c.b, a: c.a });
-    drawColourCanvas();
-    drawOpacitySlider();
-  }
-}
-function blueInputChange(e) {
-  const value2 = parseFloat(e.currentTarget.value);
-  if (value2 >= 0 && value2 <= 255) {
-    c = colour({ r: c.r, g: c.g, b: value2, a: c.a });
-    drawColourCanvas();
-    drawOpacitySlider();
-  }
-}
-function alphaInputChange(e) {
-  const value2 = parseFloat(e.currentTarget.value);
-  if (value2 >= 0 && value2 <= 1) {
-    c = colour({ h: c.h, s: c.s, v: c.v, a: value2 });
-  }
-}
+<script lang="ts">
+    import { tick } from "svelte"
+    import { fade, fly } from "svelte/transition"
+
+    interface Props {
+        value?: string
+        onchange?: (event: CustomEvent<{ rgb: RGB; hsv: HSV; hex: `#${string}` } & A>) => any
+    }
+
+    let { value = $bindable("rgba(255, 0, 0, 1)"), onchange }: Props = $props()
+
+    let c = $state.raw(colour(value))
+
+    $effect(() => {
+        value = c.rgba
+        onchange?.(new CustomEvent("change", { detail: { rgb: { r: c.r, b: c.b, g: c.g }, hsv: { h: c.h, s: c.s, v: c.v }, hex: c.hex, a: c.a } }))
+    })
+
+    $effect(() => {
+        if (value != c.rgba) {
+            c = colour(value)
+        }
+    })
+
+    let open = $state(false)
+    let dragging = $state(false)
+
+    async function openPicker(event: Event) {
+        event.stopPropagation()
+        open = true
+        await tick()
+        drawColourCanvas()
+        drawHueSlider()
+        drawOpacitySlider()
+    }
+
+    async function tryClosePicker() {
+        await tick()
+        if (!dragging) {
+            open = false
+        }
+    }
+
+    let colourCanvas: HTMLCanvasElement = $state()!
+    let hueSlider: HTMLCanvasElement = $state()!
+    let opacitySlider: HTMLCanvasElement = $state()!
+
+    // #region Draw Canvas
+
+    function drawColourCanvas() {
+        const context = colourCanvas.getContext("2d")!
+
+        context.clearRect(0, 0, colourCanvas.width, colourCanvas.height)
+
+        const horizontalGradient = context.createLinearGradient(0, 0, colourCanvas.width, 0)
+        horizontalGradient.addColorStop(0, "#ffffff")
+        horizontalGradient.addColorStop(1, colour({ h: c.h, s: 1, v: 1 }).rgba)
+        context.fillStyle = horizontalGradient
+        context.fillRect(0, 0, colourCanvas.width, colourCanvas.height)
+
+        const verticalGradient = context.createLinearGradient(0, 0, 0, colourCanvas.height)
+        verticalGradient.addColorStop(0, "transparent")
+        verticalGradient.addColorStop(1, "#000000")
+        context.fillStyle = verticalGradient
+        context.fillRect(0, 0, colourCanvas.width, colourCanvas.height)
+    }
+
+    function drawHueSlider() {
+        const context = hueSlider.getContext("2d")!
+        context.clearRect(0, 0, hueSlider.width, hueSlider.height)
+        const gradient = context.createLinearGradient(0, 0, 0, hueSlider.height)
+        for (let i = 0, offset = 0, step = 1 / (hueColours.length - 1); i < hueColours.length; i++, offset += step) {
+            gradient.addColorStop(offset, hueColours[i])
+        }
+        context.fillStyle = gradient
+        context.fillRect(0, 0, hueSlider.width, hueSlider.height)
+    }
+
+    function drawOpacitySlider() {
+        const context = opacitySlider.getContext("2d")!
+        context.clearRect(0, 0, opacitySlider.width, opacitySlider.height)
+
+        const gradient = context.createLinearGradient(0, 0, 0, opacitySlider.height)
+        gradient.addColorStop(0, "transparent")
+        gradient.addColorStop(1, colour({ h: c.h, s: c.s, v: c.v, a: 1 }).rgba)
+        context.fillStyle = gradient
+        context.fillRect(0, 0, opacitySlider.width, opacitySlider.height)
+    }
+
+    // #endregion
+
+    // #region Events
+
+    const initListener = (fn: (e: MouseEvent) => void): ((e: MouseEvent) => void) => {
+        const fn_preventDefault = (e: MouseEvent) => {
+            e.preventDefault()
+            fn(e)
+        }
+        return function (e: MouseEvent) {
+            if (e.button != 0) {
+                return
+            }
+            dragging = true
+            fn(e)
+            addEventListener("mousemove", fn_preventDefault)
+            addEventListener("mouseup", () => {
+                removeEventListener("mousemove", fn_preventDefault)
+                dragging = false
+            })
+        }
+    }
+
+    function colourCanvasMove(e: MouseEvent): void {
+        const rect = colourCanvas.getBoundingClientRect()
+        c = colour({ h: c.h, s: clamp(e.pageX - rect.left, 0, size) / size, v: (size - clamp(e.pageY - rect.top, 0, size)) / size, a: c.a })
+        drawOpacitySlider()
+    }
+
+    function hueSliderMove(e: MouseEvent): void {
+        c = colour({ h: (clamp(e.pageY - hueSlider.getBoundingClientRect().top, 0, size) / size) * 360, s: c.s, v: c.v, a: c.a })
+        drawColourCanvas()
+        drawOpacitySlider()
+    }
+
+    function opacitySliderMove(e: MouseEvent): void {
+        c = colour({ h: c.h, s: c.s, v: c.v, a: parseFloat((clamp(e.pageY - opacitySlider.getBoundingClientRect().top, 0, size) / size).toFixed(2)) })
+    }
+
+    function hexInputChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        let value = e.currentTarget.value
+        if (value.startsWith("#")) {
+            value = value.substring(1)
+        }
+        if ([3, 6, 8].includes(value.length)) {
+            c = colour(value)
+        }
+    }
+
+    function redInputChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        const value = parseFloat(e.currentTarget.value)
+        if (value >= 0 && value <= 255) {
+            c = colour({ r: value, g: c.g, b: c.b, a: c.a })
+            drawColourCanvas()
+            drawOpacitySlider()
+        }
+    }
+
+    function greenInputChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        const value = parseFloat(e.currentTarget.value)
+        if (value >= 0 && value <= 255) {
+            c = colour({ r: c.r, g: value, b: c.b, a: c.a })
+            drawColourCanvas()
+            drawOpacitySlider()
+        }
+    }
+
+    function blueInputChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        const value = parseFloat(e.currentTarget.value)
+        if (value >= 0 && value <= 255) {
+            c = colour({ r: c.r, g: c.g, b: value, a: c.a })
+            drawColourCanvas()
+            drawOpacitySlider()
+        }
+    }
+
+    function alphaInputChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+        const value = parseFloat(e.currentTarget.value)
+        if (value >= 0 && value <= 1) {
+            c = colour({ h: c.h, s: c.s, v: c.v, a: value })
+        }
+    }
+
+    // #endregion
 </script>
 
-<svelte:window on:mouseup={open && !dragging ? tryClosePicker : null} />
+<svelte:window onmouseup={open && !dragging ? tryClosePicker : null} />
 
 <div class="container">
     <div class="colour-input-container transparent">
-        <div class="colour-input" style:--value={value} on:click|stopPropagation={openPicker} on:keypress|stopPropagation={openPicker} />
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <div class="colour-input" style:--value={value} onclick={openPicker} onkeypress={openPicker}></div>
     </div>
     {#if open}
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
         <div
             class="colour-picker-container"
             in:fly={{ y: 10, duration: 150 }}
             out:fade={{ duration: 50 }}
-            on:click|stopPropagation
-            on:keypress|stopPropagation
-            on:mouseup={(e) => !dragging && e.stopPropagation()}
+            onclick={(event) => event.stopPropagation()}
+            onkeypress={(event) => event.stopPropagation()}
+            onmouseup={(e) => !dragging && e.stopPropagation()}
         >
             <div class="colour-picker-arrow">
                 <div class="colour-picker">
                     <div class="main">
                         <div class="canvas-container">
-                            <canvas bind:this={colourCanvas} width={size} height={size} on:mousedown={initListener(colourCanvasMove)} />
+                            <canvas bind:this={colourCanvas} width={size} height={size} onmousedown={initListener(colourCanvasMove)}></canvas>
                             <div
                                 class="pointer pointer-both"
                                 style:--pointer-bg={colour({ h: c.h, s: c.s, v: c.v, a: 1 }).rgba}
                                 style:--x={`${c.s * size}px`}
                                 style:--y={`${size - c.v * size}px`}
-                            />
+                            ></div>
                         </div>
                         <div class="canvas-container">
-                            <canvas bind:this={hueSlider} width={18} height={size} on:mousedown={initListener(hueSliderMove)} />
-                            <div class="pointer pointer-vertical" style:--pointer-bg={colour({ h: c.h, s: 1, v: 1 }).rgba} style:--y={`${(c.h / 360) * size}px`} />
+                            <canvas bind:this={hueSlider} width={18} height={size} onmousedown={initListener(hueSliderMove)}></canvas>
+                            <div class="pointer pointer-vertical" style:--pointer-bg={colour({ h: c.h, s: 1, v: 1 }).rgba} style:--y={`${(c.h / 360) * size}px`}></div>
                         </div>
                         <div class="canvas-container transparent">
-                            <canvas bind:this={opacitySlider} width={18} height={size} on:mousedown={initListener(opacitySliderMove)} />
-                            <div class="pointer pointer-vertical" style:--pointer-bg={c.rgba} style:--y={`${c.a * size}px`} />
+                            <canvas bind:this={opacitySlider} width={18} height={size} onmousedown={initListener(opacitySliderMove)}></canvas>
+                            <div class="pointer pointer-vertical" style:--pointer-bg={c.rgba} style:--y={`${c.a * size}px`}></div>
                         </div>
                     </div>
                     <div class="inputs-container">
-                        <input type="text" maxlength={7} id="hex" value={c.hex} on:input={hexInputChange} />
-                        <input type="number" autocomplete="off" min={0} max={255} id="r" value={c.r} on:input={redInputChange} />
-                        <input type="number" autocomplete="off" min={0} max={255} id="g" value={c.g} on:input={greenInputChange} />
-                        <input type="number" autocomplete="off" min={0} max={255} id="b" value={c.b} on:input={blueInputChange} />
-                        <input type="number" autocomplete="off" min={0} max={255} id="a" value={c.a} on:input={alphaInputChange} />
+                        <input type="text" maxlength={7} id="hex" value={c.hex} oninput={hexInputChange} />
+                        <input type="number" autocomplete="off" min={0} max={255} id="r" value={c.r} oninput={redInputChange} />
+                        <input type="number" autocomplete="off" min={0} max={255} id="g" value={c.g} oninput={greenInputChange} />
+                        <input type="number" autocomplete="off" min={0} max={255} id="b" value={c.b} oninput={blueInputChange} />
+                        <input type="number" autocomplete="off" min={0} max={255} id="a" value={c.a} oninput={alphaInputChange} />
                         <label for="hex">HEX</label>
                         <label for="r">R</label>
                         <label for="g">G</label>
@@ -476,6 +558,7 @@ function alphaInputChange(e) {
 
     input[type="number"] {
         width: 2.75rem;
+        appearance: textfield;
         -moz-appearance: textfield; /* Firefox */
     }
 

package/dist/ColourPicker.svelte.d.ts

@@ -1,37 +1,24 @@
-import { SvelteComponentTyped } from "svelte";
-type RGB = {
-    r: number;
-    g: number;
-    b: number;
-};
-type HSV = {
-    h: number;
-    s: number;
-    v: number;
-};
-type A = {
-    a: number;
-};
-declare const __propDef: {
-    props: {
-        value?: string | undefined;
-    };
-    events: {
-        click: MouseEvent;
-        keypress: KeyboardEvent;
-        change: CustomEvent<{
-            rgb: RGB;
-            hsv: HSV;
-            hex: `#${string}`;
-        } & A>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ColourPickerProps = typeof __propDef.props;
-export type ColourPickerEvents = typeof __propDef.events;
-export type ColourPickerSlots = typeof __propDef.slots;
-export default class ColourPicker extends SvelteComponentTyped<ColourPickerProps, ColourPickerEvents, ColourPickerSlots> {
-}
-export {};
+type RGB = {
+    r: number;
+    g: number;
+    b: number;
+};
+type HSV = {
+    h: number;
+    s: number;
+    v: number;
+};
+type A = {
+    a: number;
+};
+interface Props {
+    value?: string;
+    onchange?: (event: CustomEvent<{
+        rgb: RGB;
+        hsv: HSV;
+        hex: `#${string}`;
+    } & A>) => any;
+}
+declare const ColourPicker: import("svelte").Component<Props, {}, "value">;
+type ColourPicker = ReturnType<typeof ColourPicker>;
+export default ColourPicker;

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-import ColourPicker from "./ColourPicker.svelte";
-export { ColourPicker };
+import ColourPicker from "./ColourPicker.svelte";
+export { ColourPicker };

package/dist/index.js

@@ -1,3 +1,2 @@
-// Reexport your entry components here
-import ColourPicker from "./ColourPicker.svelte";
-export { ColourPicker };
+import ColourPicker from "./ColourPicker.svelte";
+export { ColourPicker };

package/package.json

@@ -1,56 +1,56 @@
-{
-    "name": "svelte-colourpicker",
-    "version": "0.0.8",
-    "description": "Svelte colour picker component",
-    "keywords": [
-        "color",
-        "colour",
-        "picker",
-        "svelte"
-    ],
-    "homepage": "https://github.com/cooolbros/svelte-colourpicker#readme",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/cooolbros/svelte-colourpicker.git"
-    },
-    "scripts": {
-        "dev": "vite dev",
-        "build": "vite build && npm run package",
-        "preview": "vite preview",
-        "package": "svelte-kit sync && svelte-package && publint",
-        "prepublishOnly": "npm run package",
-        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-        "lint": "prettier --plugin-search-dir . --check .",
-        "format": "prettier --plugin-search-dir . --write ."
-    },
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "svelte": "./dist/index.js"
-        }
-    },
-    "files": [
-        "dist"
-    ],
-    "peerDependencies": {
-        "svelte": "^3.55.1"
-    },
-    "devDependencies": {
-        "@sveltejs/adapter-auto": "^2.0.0",
-        "@sveltejs/kit": "^1.8.5",
-        "@sveltejs/package": "^2.0.2",
-        "prettier": "^2.8.4",
-        "prettier-plugin-svelte": "^2.9.0",
-        "publint": "^0.1.9",
-        "svelte": "^3.55.1",
-        "svelte-check": "^3.0.4",
-        "tslib": "^2.5.0",
-        "typescript": "^4.9.5",
-        "vite": "^4.1.4"
-    },
-    "svelte": "./dist/index.js",
-    "types": "./dist/index.d.ts",
-    "type": "module"
-}
+{
+  "name": "svelte-colourpicker",
+  "version": "0.2.0",
+  "description": "Svelte colour picker component",
+  "keywords": [
+    "color",
+    "colour",
+    "picker",
+    "svelte"
+  ],
+  "homepage": "https://github.com/cooolbros/svelte-colourpicker#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cooolbros/svelte-colourpicker.git"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.63.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^4.1.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.2",
+    "svelte-check": "^4.6.0",
+    "tslib": "^2.5.2",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check .",
+    "format": "prettier --plugin-search-dir . --write ."
+  }
+}