@geoffcox/sterling-svelte 0.0.31 → 1.0.0

package/HexColorSliders.svelte

@@ -1,171 +1,103 @@
-<script>import { createEventDispatcher } from "svelte";
-import Input from "./Input.svelte";
-import Slider from "./Slider.svelte";
+<script>import { createEventDispatcher } from 'svelte';
+import Input from './Input.svelte';
+import Slider from './Slider.svelte';
+// ----- Props ----- //
+/** The red value. */
 export let red = 0;
+/** The green value. */
 export let green = 0;
+/** The blue value. */
 export let blue = 0;
+/** The alpha value. */
 export let alpha = 255;
-export let colorful = false;
-let redText = red.toString(16).padStart(2, "0");
-let greenText = green.toString(16).padStart(2, "0");
-let blueText = blue.toString(16).padStart(2, "0");
-let alphaText = alpha.toString(16).padStart(2, "0");
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
+let redText = red.toString(16).padStart(2, '0');
+let greenText = green.toString(16).padStart(2, '0');
+let blueText = blue.toString(16).padStart(2, '0');
+let alphaText = alpha.toString(16).padStart(2, '0');
 $: {
-  redText = red.toString(16).padStart(2, "0");
+    redText = red.toString(16).padStart(2, '0');
 }
 $: {
-  greenText = green.toString(16).padStart(2, "0");
+    greenText = green.toString(16).padStart(2, '0');
 }
 $: {
-  blueText = blue.toString(16).padStart(2, "0");
+    blueText = blue.toString(16).padStart(2, '0');
 }
 $: {
-  alphaText = alpha.toString(16).padStart(2, "0");
+    alphaText = alpha.toString(16).padStart(2, '0');
 }
+// ----- Events ----- //
 const dispatcher = createEventDispatcher();
 const raiseChange = () => {
-  dispatcher("change", { red, green, blue, alpha });
+    dispatcher('change', { red, green, blue, alpha });
 };
-$:
-  red, green, blue, alpha, raiseChange();
+$: red, green, blue, alpha, raiseChange();
+// ----- Event Handlers ----- //
 const onRedInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  red = text ? Number.parseInt(text, 16) : red;
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    red = text ? Number.parseInt(text, 16) : red;
 };
 const onGreenInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  green = text ? Number.parseInt(text, 16) : green;
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    green = text ? Number.parseInt(text, 16) : green;
 };
 const onBlueInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  blue = text ? Number.parseInt(text, 16) : blue;
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    blue = text ? Number.parseInt(text, 16) : blue;
 };
 const onAlphaInputchange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  alpha = text ? Number.parseInt(text, 16) : alpha;
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    alpha = text ? Number.parseInt(text, 16) : alpha;
 };
 </script>
 
-<div class="sterling-rgb-color-sliders">
-  <div class="slider red-slider">
-    <Slider {colorful} min={0} max={255} precision={0} bind:value={red} />
-  </div>
-  <Input {colorful} bind:value={redText} on:change={(e) => onRedInputChange(e)} />
-  <div class="slider green-slider">
-    <Slider {colorful} min={0} max={255} precision={0} bind:value={green} />
-  </div>
-  <Input {colorful} bind:value={greenText} on:change={(e) => onGreenInputChange(e)} />
-  <div class="slider blue-slider">
-    <Slider {colorful} min={0} max={255} precision={0} bind:value={blue} />
-  </div>
-  <Input {colorful} bind:value={blueText} on:change={(e) => onBlueInputChange(e)} />
-  <div class="alpha" style={`--red:${red};--green:${green};--blue:${blue}`}>
-    <div class="alpha-hatch" />
-    <div class="alpha-gradient" />
-    <div class="slider alpha-slider">
-      <Slider {colorful} min={0} max={255} precision={0} bind:value={alpha} />
-    </div>
-  </div>
-  <Input {colorful} bind:value={alphaText} on:change={(e) => onAlphaInputchange(e)} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class={`sterling-hex-color-sliders ${variant}`}
+  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}
+  style={`--red:${red};--green:${green};--blue:${blue}`}
+>
+  <Slider min={0} max={255} precision={0} bind:value={red} variant="red" />
+  <Input bind:value={redText} variant="red" on:change={(e) => onRedInputChange(e)} />
+  <Slider min={0} max={255} precision={0} bind:value={green} variant="green" />
+  <Input bind:value={greenText} variant="green" on:change={(e) => onGreenInputChange(e)} />
+  <Slider min={0} max={255} precision={0} bind:value={blue} variant="blue" />
+  <Input bind:value={blueText} variant="blue" on:change={(e) => onBlueInputChange(e)} />
+  <div class="alpha-hatch" />
+  <div class="alpha-gradient" />
+  <Slider min={0} max={255} precision={0} bind:value={alpha} variant="alpha" />
+  <Input bind:value={alphaText} variant="alpha" on:change={(e) => onAlphaInputchange(e)} />
 </div>
-
-<style>
-  .sterling-rgb-color-sliders {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr 4em;
-    column-gap: 0.5em;
-    row-gap: 0.25em;
-  }
-
-  .slider :global(.fill),
-  .slider :global(.sterling-slider.colorful .fill) {
-    background-color: transparent;
-  }
-
-  .slider :global(.track),
-  .slider :global(.sterling-slider.colorful .track) {
-    background-color: transparent;
-    background-image: linear-gradient(to right, #ffffff, #ffffff 1px, #000000 1px, #000000);
-    background-size: 2px 100%;
-    opacity: 0.1;
-  }
-
-  .red-slider {
-    background: linear-gradient(to right, black 0%, rgb(255, 0, 0) 100%);
-  }
-
-  .green-slider {
-    background: linear-gradient(to right, black 0%, rgb(0, 255, 0) 100%);
-  }
-
-  .blue-slider {
-    background: linear-gradient(to right, black 0%, rgb(0, 0, 255) 100%);
-  }
-
-  .alpha {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    place-content: stretch;
-    place-items: stretch;
-  }
-
-  .alpha-gradient,
-  .alpha-hatch,
-  .alpha-slider {
-    grid-row: 1 / span 1;
-    grid-column: 1 / span 1;
-  }
-
-  .alpha-hatch {
-    background-color: #eee;
-    opacity: 0.1;
-    background-image: repeating-linear-gradient(
-        var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        transparent 25%,
-        transparent 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        #eee 25%,
-        #eee 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        -var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        transparent 25%,
-        transparent 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        -var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        #eee 25%,
-        #eee 75%,
-        #444 75%,
-        #444
-      );
-    background-position: 0 0, 4px 4px;
-    background-size: 8px 8px;
-  }
-
-  .alpha-gradient {
-    background: linear-gradient(
-      to right,
-      rgba(var(--red), var(--green), var(--blue), 0) 0%,
-      rgba(var(--red), var(--green), var(--blue), 100) 100%
-    );
-  }
-</style>

package/HexColorSliders.svelte.d.ts

@@ -1,13 +1,40 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         red?: number | undefined;
         green?: number | undefined;
         blue?: number | undefined;
         alpha?: number | undefined;
-        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/HslColorSliders.svelte

@@ -1,208 +1,128 @@
-<script>import { createEventDispatcher } from "svelte";
-import Input from "./Input.svelte";
-import Slider from "./Slider.svelte";
-import { round } from "lodash-es";
+<script>import { createEventDispatcher } from 'svelte';
+import Input from './Input.svelte';
+import Slider from './Slider.svelte';
+import { round } from 'lodash-es';
+// ----- Props ----- //
+/** The hue value. */
 export let hue = 180;
+/** The saturation value. */
 export let saturation = 100;
+/** The lightness value. */
 export let lightness = 50;
+/** The alpha value. */
 export let alpha = 1;
-export let colorful = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let hueText = hue.toString();
 let saturationText = saturation.toString();
 let lightnessText = lightness.toString();
 let alphaText = alpha.toString();
 $: {
-  hueText = hue.toString();
+    hueText = hue.toString();
 }
 $: {
-  saturationText = saturation.toString();
+    saturationText = saturation.toString();
 }
 $: {
-  lightnessText = lightness.toString();
+    lightnessText = lightness.toString();
 }
 $: {
-  alphaText = alpha.toString();
+    alphaText = alpha.toString();
 }
+// ----- Events ----- //
 const dispatcher = createEventDispatcher();
-const raiseChange = (hue2, saturation2, lightness2) => {
-  dispatcher("change", { hue: hue2, saturation: saturation2, lightness: lightness2 });
+const raiseChange = (hue, saturation, lightness) => {
+    dispatcher('change', { hue, saturation, lightness });
 };
-$:
-  raiseChange(hue, saturation, lightness);
+$: raiseChange(hue, saturation, lightness);
+// ----- Event Handlers ----- //
 const onHueInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  const newValue = text ? Number.parseFloat(text) : hue;
-  if (newValue && newValue !== Number.NaN) {
-    hue = Math.round(Math.max(0, Math.min(360, newValue)));
-    hueText = hue.toString();
-  }
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    const newValue = text ? Number.parseFloat(text) : hue;
+    if (newValue && newValue !== Number.NaN) {
+        hue = Math.round(Math.max(0, Math.min(360, newValue)));
+        hueText = hue.toString();
+    }
 };
 const onSaturationInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
-  const newValue = text ? Number.parseFloat(text) : saturation;
-  if (newValue && newValue !== Number.NaN) {
-    saturation = Math.round(Math.max(0, Math.min(100, newValue)));
-    saturationText = saturation.toString();
-  }
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, '');
+    const newValue = text ? Number.parseFloat(text) : saturation;
+    if (newValue && newValue !== Number.NaN) {
+        saturation = Math.round(Math.max(0, Math.min(100, newValue)));
+        saturationText = saturation.toString();
+    }
 };
 const onLightnessInputChange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, "");
-  const newValue = text ? Number.parseFloat(text) : lightness;
-  if (newValue && newValue !== Number.NaN) {
-    lightness = Math.round(Math.max(0, Math.min(100, newValue)));
-    lightnessText = lightness.toString();
-  }
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value?.replace(/%/g, '');
+    const newValue = text ? Number.parseFloat(text) : lightness;
+    if (newValue && newValue !== Number.NaN) {
+        lightness = Math.round(Math.max(0, Math.min(100, newValue)));
+        lightnessText = lightness.toString();
+    }
 };
 const onAlphaInputchange = (event) => {
-  const inputChangeEvent = event;
-  const text = inputChangeEvent?.currentTarget?.value;
-  const newValue = text ? Number.parseFloat(text) : alpha;
-  if (newValue && newValue !== Number.NaN) {
-    alpha = round(Math.max(0, Math.min(1, newValue)), 2);
-    alphaText = alpha.toString();
-  }
+    const inputChangeEvent = event;
+    const text = inputChangeEvent?.currentTarget?.value;
+    const newValue = text ? Number.parseFloat(text) : alpha;
+    if (newValue && newValue !== Number.NaN) {
+        alpha = round(Math.max(0, Math.min(1, newValue)), 2);
+        alphaText = alpha.toString();
+    }
 };
 </script>
 
-<div class="sterling-hsl-color-sliders">
-  <div class="slider hue">
-    <Slider min={0} max={360} precision={0} bind:value={hue} {colorful} />
-  </div>
-  <Input bind:value={hueText} {colorful} on:change={(e) => onHueInputChange(e)} />
-  <div class="slider saturation" style={`--hue:${hue};`}>
-    <Slider min={0} max={100} precision={0} bind:value={saturation} {colorful} />
-  </div>
-  <Input bind:value={saturationText} {colorful} on:change={(e) => onSaturationInputChange(e)} />
-  <div class="slider lightness" style={`--hue:${hue};--saturation:${saturation}%;`}>
-    <Slider min={0} max={100} precision={0} bind:value={lightness} {colorful} />
-  </div>
-  <Input bind:value={lightnessText} {colorful} on:change={(e) => onLightnessInputChange(e)} />
-  <div
-    class="slider alpha"
-    style={`--hue:${hue};--saturation:${saturation}%;--lightness:${lightness}%`}
-  >
-    <div class="alpha-hatch" />
-    <div class="alpha-gradient" />
-    <div class="alpha-slider">
-      <Slider min={0} max={1} precision={2} step={0.01} bind:value={alpha} {colorful} />
-    </div>
-  </div>
-  <Input bind:value={alphaText} {colorful} on:change={(e) => onAlphaInputchange(e)} />
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class={`sterling-hsl-color-sliders ${variant}`}
+  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}
+  style={`--hue:${hue};--saturation:${saturation}%;--lightness:${lightness}%`}
+>
+  <Slider min={0} max={360} precision={0} bind:value={hue} variant="hue" />
+  <Input bind:value={hueText} variant="hue" on:change={(e) => onHueInputChange(e)} />
+  <Slider min={0} max={100} precision={0} bind:value={saturation} variant="saturation" />
+  <Input
+    bind:value={saturationText}
+    variant="saturation"
+    on:change={(e) => onSaturationInputChange(e)}
+  />
+  <Slider min={0} max={100} precision={0} bind:value={lightness} variant="lightness" />
+  <Input
+    bind:value={lightnessText}
+    variant="lightness"
+    on:change={(e) => onLightnessInputChange(e)}
+  />
+  <div class="alpha-hatch" />
+  <div class="alpha-gradient" />
+  <Slider min={0} max={1} precision={2} step={0.01} bind:value={alpha} variant="alpha" />
+  <Input bind:value={alphaText} variant="alpha" on:change={(e) => onAlphaInputchange(e)} />
 </div>
-
-<style>
-  .sterling-hsl-color-sliders {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr 5em;
-    column-gap: 0.5em;
-    row-gap: 0.25em;
-  }
-
-  .hue {
-    background: linear-gradient(
-      to right,
-      hsl(0, 100%, 50%) 0%,
-      hsl(60, 100%, 50%) 17%,
-      hsl(120, 100%, 50%) 33%,
-      hsl(180, 100%, 50%) 50%,
-      hsl(240, 100%, 50%) 67%,
-      hsl(300, 100%, 50%) 83%,
-      hsl(0, 100%, 50%) 100%
-    );
-  }
-
-  .slider :global(.fill),
-  .slider :global(.sterling-slider.colorful .fill) {
-    background-color: transparent;
-  }
-  .slider :global(.track),
-  .slider :global(.sterling-slider.colorful .track) {
-    background-color: transparent;
-    opacity: 0.1;
-    background-image: linear-gradient(to right, #7f3a3a, #ffffff 1px, #000000 1px, #000000);
-    background-size: 2px 100%;
-  }
-
-  .saturation {
-    background: linear-gradient(
-      to right,
-      hsl(var(--hue), 0%, 50%) 0%,
-      hsl(var(--hue), 100%, 50%) 100%
-    );
-  }
-
-  .lightness {
-    background: linear-gradient(
-      to right,
-      hsl(var(--hue), var(--saturation), 0%) 0%,
-      hsl(var(--hue), var(--saturation), 50%) 50%,
-      hsl(var(--hue), var(--saturation), 100%) 100%
-    );
-  }
-
-  .alpha {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    place-content: stretch;
-    place-items: stretch;
-  }
-
-  .alpha-gradient,
-  .alpha-hatch,
-  .alpha-slider {
-    grid-row: 1 / span 1;
-    grid-column: 1 / span 1;
-  }
-
-  .alpha-hatch {
-    background-color: #eee;
-    opacity: 0.1;
-    background-image: repeating-linear-gradient(
-        var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        transparent 25%,
-        transparent 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        #eee 25%,
-        #eee 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        -var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        transparent 25%,
-        transparent 75%,
-        #444 75%,
-        #444
-      ),
-      repeating-linear-gradient(
-        -var(--stsv-common--disabled__stripe-angle),
-        #444 25%,
-        #eee 25%,
-        #eee 75%,
-        #444 75%,
-        #444
-      );
-    background-position: 0 0, 4px 4px;
-    background-size: 8px 8px;
-  }
-
-  .alpha-gradient {
-    background: linear-gradient(
-      to right,
-      hsla(var(--hue), var(--saturation), var(--lightness), 0) 0%,
-      hsla(var(--hue), var(--saturation), var(--lightness), 1) 100%
-    );
-  }
-</style>

package/HslColorSliders.svelte.d.ts

@@ -1,13 +1,40 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         hue?: number | undefined;
         saturation?: number | undefined;
         lightness?: number | undefined;
         alpha?: number | undefined;
-        /** When true, applies colorful theme styles. */ colorful?: boolean | undefined;
+        variant?: string | undefined;
     };
     events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        dragend: DragEvent;
+        dragenter: DragEvent;
+        dragleave: DragEvent;
+        dragover: DragEvent;
+        dragstart: DragEvent;
+        drop: DragEvent;
+        focus: FocusEvent;
+        focusin: FocusEvent;
+        focusout: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
+        mousedown: MouseEvent;
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        mousemove: MouseEvent;
+        mouseover: MouseEvent;
+        mouseout: MouseEvent;
+        mouseup: MouseEvent;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;