@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/ColorPicker.svelte

@@ -1,21 +1,28 @@
-<script>import { tick } from "svelte";
-import tinycolor from "@ctrl/tinycolor";
-import Dropdown from "./Dropdown.svelte";
-import Input from "./Input.svelte";
-import Tab from "./Tab.svelte";
-import TabList from "./TabList.svelte";
-import RgbColorSliders from "./RgbColorSliders.svelte";
-import HslColorSliders from "./HslColorSliders.svelte";
-import HexColorSliders from "./HexColorSliders.svelte";
-import { round } from "lodash-es";
-import { trapKeyboardFocus } from "./actions/trapKeyboardFocus";
-const defaultColorText = "#000000";
+<script>import { tick } from 'svelte';
+import tinycolor from '@ctrl/tinycolor';
+import Dropdown from './Dropdown.svelte';
+import Input from './Input.svelte';
+import Tab from './Tab.svelte';
+import TabList from './TabList.svelte';
+import RgbColorSliders from './RgbColorSliders.svelte';
+import HslColorSliders from './HslColorSliders.svelte';
+import HexColorSliders from './HexColorSliders.svelte';
+import { round } from 'lodash-es';
+import { trapKeyboardFocus } from './actions/trapKeyboardFocus';
+// ----- Constants ----- //
+const defaultColorText = '#000000';
+// ----- Props ----- //
+/** The color value in HEX, RGB, or HSL format */
 export let colorText = defaultColorText;
-export let colorFormat = "hex";
-export let colorful = false;
-export let composed = false;
+/** The current color format */
+export let colorFormat = 'hex';
+/** When true, the picker is disabled. */
 export let disabled = false;
+/** When true, the dropdown is open. */
 export let open = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let hue = 0;
 let saturation = 0;
 let lightness = 0;
@@ -27,231 +34,205 @@ let hexAlpha = 255;
 let updating = false;
 let tabListRef;
 let tabsRef;
+// ----- Update HSL, RGB, Text ----- //
 const updateFromRgb = async () => {
-  if (!updating && (colorFormat === "hex" || colorFormat === "rgb")) {
-    updating = true;
-    const newAlpha = colorFormat === "hex" ? hexAlpha / 255 : alpha;
-    const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
-    const hsl = color.toHsl();
-    hue = Math.round(hsl.h);
-    saturation = Math.round(hsl.s * 100);
-    lightness = Math.round(hsl.l * 100);
-    switch (colorFormat) {
-      case "rgb":
-        colorText = color.toRgbString();
-        hexAlpha = Math.round(alpha * 255);
-        break;
-      case "hex":
-        colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
-        alpha = round(hexAlpha / 255, 2);
-        break;
+    if (!updating && (colorFormat === 'hex' || colorFormat === 'rgb')) {
+        updating = true;
+        const newAlpha = colorFormat === 'hex' ? hexAlpha / 255 : alpha;
+        const color = tinycolor({ r: red, g: green, b: blue, a: newAlpha });
+        const hsl = color.toHsl();
+        hue = Math.round(hsl.h);
+        saturation = Math.round(hsl.s * 100);
+        lightness = Math.round(hsl.l * 100);
+        switch (colorFormat) {
+            case 'rgb':
+                colorText = color.toRgbString();
+                hexAlpha = Math.round(alpha * 255);
+                break;
+            case 'hex':
+                colorText = alpha === 100 ? color.toHexString() : color.toHex8String();
+                alpha = round(hexAlpha / 255, 2);
+                break;
+        }
+        await tick();
+        updating = false;
     }
-    await tick();
-    updating = false;
-  }
 };
 const updateFromHsl = async () => {
-  if (!updating && colorFormat === "hsl") {
-    updating = true;
-    const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
-    const rgb = color.toRgb();
-    red = rgb.r;
-    green = rgb.g;
-    blue = rgb.b;
-    colorText = color.toHslString();
-    hexAlpha = Math.round(alpha * 255);
-    await tick();
-    updating = false;
-  }
-};
-const updateColorsFromText = async () => {
-  const color = tinycolor(colorText);
-  if (color.isValid) {
-    if (!updating) {
-      updating = true;
-      switch (color.format) {
-        case "hsl":
-          colorFormat = "hsl";
-          break;
-        case "rgb":
-          colorFormat = "rgb";
-          break;
-        case "hex":
-        case "hex4":
-        case "hex8":
-          colorFormat = "hex";
-          break;
-        default:
-          break;
-      }
-      const hsl = color.toHsl();
-      hue = Math.round(hsl.h);
-      saturation = Math.round(hsl.s * 100);
-      lightness = Math.round(hsl.l * 100);
-      const rgb = color.toRgb();
-      red = rgb.r;
-      green = rgb.g;
-      blue = rgb.b;
-      if (rgb.a) {
-        alpha = hsl.a;
+    if (!updating && colorFormat === 'hsl') {
+        updating = true;
+        const color = tinycolor({ h: hue, s: saturation / 100, l: lightness / 100, a: alpha });
+        const rgb = color.toRgb();
+        red = rgb.r;
+        green = rgb.g;
+        blue = rgb.b;
+        colorText = color.toHslString();
         hexAlpha = Math.round(alpha * 255);
-      }
-      await tick();
-      updating = false;
+        await tick();
+        updating = false;
     }
-  }
 };
-$:
-  colorText, updateColorsFromText();
-$:
-  colorFormat, hue, saturation, lightness, alpha, updateFromHsl();
-$:
-  colorFormat, red, green, blue, alpha, hexAlpha, updateFromRgb();
-const onInputBlur = async () => {
-  if (!updating) {
-    if (colorText.trim().length === 0) {
-      colorText = defaultColorText;
-      return;
-    }
+const updateColorsFromText = async () => {
     const color = tinycolor(colorText);
     if (color.isValid) {
-      updating = true;
-      switch (colorFormat) {
-        case "hsl":
-          colorText = color.toHslString();
-          break;
-        case "rgb":
-          colorText = color.toRgbString();
-          break;
-        case "hex":
-          colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
-          break;
-        default:
-          break;
-      }
-      await tick();
-      updating = false;
+        if (!updating) {
+            updating = true;
+            switch (color.format) {
+                case 'hsl':
+                    colorFormat = 'hsl';
+                    break;
+                case 'rgb':
+                    colorFormat = 'rgb';
+                    break;
+                case 'hex':
+                case 'hex4':
+                case 'hex8':
+                    colorFormat = 'hex';
+                    break;
+                default:
+                    break;
+            }
+            const hsl = color.toHsl();
+            hue = Math.round(hsl.h);
+            saturation = Math.round(hsl.s * 100);
+            lightness = Math.round(hsl.l * 100);
+            const rgb = color.toRgb();
+            red = rgb.r;
+            green = rgb.g;
+            blue = rgb.b;
+            if (rgb.a) {
+                alpha = hsl.a;
+                hexAlpha = Math.round(alpha * 255);
+            }
+            await tick();
+            updating = false;
+        }
+    }
+};
+$: colorText, updateColorsFromText();
+$: colorFormat, hue, saturation, lightness, alpha, updateFromHsl();
+$: colorFormat, red, green, blue, alpha, hexAlpha, updateFromRgb();
+// ----- Event handlers ----- //
+const onInputBlur = async () => {
+    if (!updating) {
+        if (colorText.trim().length === 0) {
+            colorText = defaultColorText;
+            return;
+        }
+        const color = tinycolor(colorText);
+        if (color.isValid) {
+            updating = true;
+            switch (colorFormat) {
+                case 'hsl':
+                    colorText = color.toHslString();
+                    break;
+                case 'rgb':
+                    colorText = color.toRgbString();
+                    break;
+                case 'hex':
+                    colorText = alpha === 1 ? color.toHexString() : color.toHex8String();
+                    break;
+                default:
+                    break;
+            }
+            await tick();
+            updating = false;
+        }
     }
-  }
 };
 const onInputClick = (event) => {
-  event.stopPropagation();
-  return false;
+    event.stopPropagation();
+    return false;
 };
 const onInputKeydown = (event) => {
-  switch (event.key) {
-    case "Tab":
-      if (open) {
-        setTimeout(() => {
-          tabListRef?.focus();
-        }, 0);
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      }
-      break;
-    case "Escape":
-      if (open) {
-        open = false;
-        event.preventDefault();
-        event.stopPropagation();
-        return false;
-      }
-      break;
-  }
-  event.stopImmediatePropagation();
+    switch (event.key) {
+        case 'Tab':
+            if (open) {
+                setTimeout(() => {
+                    tabListRef?.focus();
+                }, 0);
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            }
+            break;
+        case 'Escape':
+            if (open) {
+                open = false;
+                event.preventDefault();
+                event.stopPropagation();
+                return false;
+            }
+            break;
+    }
+    // prevent typing from bubbling to the dropdown
+    event.stopImmediatePropagation();
 };
+// -----Initialization ----- //
 updateColorsFromText();
 </script>
 
-<Dropdown
-  bind:open
-  {colorful}
-  {composed}
-  {disabled}
-  on:blur
-  on:click
-  on:copy
-  on:cut
-  on:dblclick
-  on:dragend
-  on:dragenter
-  on:dragleave
-  on:dragover
-  on:dragstart
-  on:drop
-  on:focus
-  on:focusin
-  on:focusout
-  on:keydown
-  on:keypress
-  on:keyup
-  on:mousedown
-  on:mouseenter
-  on:mouseleave
-  on:mousemove
-  on:mouseover
-  on:mouseout
-  on:mouseup
-  on:wheel
-  on:paste
-  {...$$restProps}
->
-  <div class="value" slot="value">
-    <div class="color-box" style="background-color: {colorText}" />
-    <Input
-      bind:value={colorText}
-      {colorful}
-      {disabled}
-      composed
-      on:blur={onInputBlur}
-      on:click={onInputClick}
-      on:keydown={onInputKeydown}
-      spellcheck="false"
-    />
-  </div>
-  <div class="popup" use:trapKeyboardFocus>
-    <div class="tabs" bind:this={tabsRef}>
-      <TabList bind:this={tabListRef} bind:selectedValue={colorFormat} {colorful}>
-        <Tab value="hex">hex</Tab>
-        <Tab value="rgb">rgb</Tab>
-        <Tab value="hsl">hsl</Tab>
-      </TabList>
+<div class={`sterling-color-picker ${variant}`}>
+  <Dropdown
+    {disabled}
+    bind:open
+    on:blur
+    on:click
+    on:copy
+    on:cut
+    on:dblclick
+    on:dragend
+    on:dragenter
+    on:dragleave
+    on:dragover
+    on:dragstart
+    on:drop
+    on:focus
+    on:focusin
+    on:focusout
+    on:keydown
+    on:keypress
+    on:keyup
+    on:mousedown
+    on:mouseenter
+    on:mouseleave
+    on:mousemove
+    on:mouseover
+    on:mouseout
+    on:mouseup
+    on:wheel
+    on:paste
+    {...$$restProps}
+  >
+    <div class="value" slot="value">
+      <div class="color-box" style="background-color: {colorText}" />
+      <Input
+        bind:value={colorText}
+        {disabled}
+        on:blur={onInputBlur}
+        on:click={onInputClick}
+        on:keydown={onInputKeydown}
+        spellcheck="false"
+        variant={`composed ${variant}`}
+      />
     </div>
-    <div class="sliders">
-      {#if colorFormat === 'rgb'}
-        <RgbColorSliders bind:red bind:green bind:blue bind:alpha {colorful} />
-      {:else if colorFormat === 'hex'}
-        <HexColorSliders bind:red bind:green bind:blue bind:alpha={hexAlpha} {colorful} />
-      {:else if colorFormat === 'hsl'}
-        <HslColorSliders bind:hue bind:saturation bind:lightness bind:alpha {colorful} />
-      {/if}
+    <div class="sterling-color-picker-popup" use:trapKeyboardFocus>
+      <div class="tabs" bind:this={tabsRef}>
+        <TabList bind:this={tabListRef} bind:selectedValue={colorFormat}>
+          <Tab value="hex">hex</Tab>
+          <Tab value="rgb">rgb</Tab>
+          <Tab value="hsl">hsl</Tab>
+        </TabList>
+      </div>
+      <div class="sliders">
+        {#if colorFormat === 'rgb'}
+          <RgbColorSliders bind:red bind:green bind:blue bind:alpha />
+        {:else if colorFormat === 'hex'}
+          <HexColorSliders bind:red bind:green bind:blue bind:alpha={hexAlpha} />
+        {:else if colorFormat === 'hsl'}
+          <HslColorSliders bind:hue bind:saturation bind:lightness bind:alpha />
+        {/if}
+      </div>
     </div>
-  </div>
-</Dropdown>
-
-<style>
-  .value {
-    display: grid;
-    align-items: center;
-    justify-content: stretch;
-    justify-items: stretch;
-    grid-template-columns: auto 1fr;
-    padding-left: 0.5em;
-    width: 250px;
-  }
-
-  .color-box {
-    width: 1em;
-    height: 1em;
-    border: 1px dashed var(--stsv-common__border-color);
-  }
-
-  .popup {
-    width: fit-content;
-    min-width: 500px;
-    display: grid;
-    align-items: center;
-    padding: 0.25em;
-  }
-</style>
+  </Dropdown>
+</div>

package/ColorPicker.svelte.d.ts

@@ -4,10 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         colorText?: string | undefined;
         colorFormat?: "hex" | "rgb" | "hsl" | undefined;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         open?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
         blur: FocusEvent;