@geoffcox/sterling-svelte 0.0.26 → 0.0.27

package/RgbColorSliders.svelte

@@ -0,0 +1,161 @@
+<script>import { createEventDispatcher } from "svelte";
+import Input from "./Input.svelte";
+import Slider from "./Slider.svelte";
+import { round } from "lodash-es";
+export let red = 0;
+export let green = 0;
+export let blue = 0;
+export let alpha = 1;
+export let colorful = false;
+let redText = red.toString();
+let greenText = green.toString();
+let blueText = blue.toString();
+let alphaText = alpha.toString();
+$: {
+  redText = red.toString();
+}
+$: {
+  greenText = green.toString();
+}
+$: {
+  blueText = blue.toString();
+}
+$: {
+  alphaText = alpha.toString();
+}
+const dispatcher = createEventDispatcher();
+const raiseChange = () => {
+  dispatcher("change", { red, green, blue, alpha });
+};
+$:
+  red, green, blue, alpha, raiseChange();
+const parseRgbValue = (text, defaultValue = 0) => {
+  if (!text) {
+    return defaultValue;
+  }
+  const newValue = text ? Number.parseFloat(text) : defaultValue;
+  if (newValue && newValue !== Number.NaN) {
+    return Math.round(Math.max(0, Math.min(255, newValue)));
+  }
+  return defaultValue;
+};
+const onRedInputChange = (event) => {
+  const inputChangeEvent = event;
+  red = parseRgbValue(inputChangeEvent?.currentTarget?.value, red);
+};
+const onGreenInputChange = (event) => {
+  const inputChangeEvent = event;
+  green = parseRgbValue(inputChangeEvent?.currentTarget?.value, green);
+};
+const onBlueInputChange = (event) => {
+  const inputChangeEvent = event;
+  blue = parseRgbValue(inputChangeEvent?.currentTarget?.value, blue);
+};
+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);
+  }
+};
+</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={1} precision={2} bind:value={alpha} />
+    </div>
+  </div>
+  <Input {colorful} bind:value={alphaText} 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(
+        45deg,
+        #444 25%,
+        transparent 25%,
+        transparent 75%,
+        #444 75%,
+        #444
+      ),
+      repeating-linear-gradient(45deg, #444 25%, #eee 25%, #eee 75%, #444 75%, #444),
+      repeating-linear-gradient(-45deg, #444 25%, transparent 25%, transparent 75%, #444 75%, #444),
+      repeating-linear-gradient(-45deg, #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/RgbColorSliders.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        red?: number | undefined;
+        green?: number | undefined;
+        blue?: number | undefined;
+        alpha?: number | undefined;
+        colorful?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RgbColorSlidersProps = typeof __propDef.props;
+export type RgbColorSlidersEvents = typeof __propDef.events;
+export type RgbColorSlidersSlots = typeof __propDef.slots;
+export default class RgbColorSliders extends SvelteComponentTyped<RgbColorSlidersProps, RgbColorSlidersEvents, RgbColorSlidersSlots> {
+}
+export {};

package/Select.svelte

@@ -178,7 +178,7 @@ const onListSelect = (event) => {
   on:mouseover
   on:mouseout
   on:mouseup
-  on:wheel
+  on:wheel|passive
   on:paste
   on:click={onSelectClick}
   on:click_outside={() => (open = false)}
@@ -199,7 +199,7 @@ const onListSelect = (event) => {
       <div class="chevron" />
     </slot>
   </div>
-  <Popup reference={selectRef} bind:open id={popupId}>
+  <Popup reference={selectRef} bind:open id={popupId} persistent>
     <div class="popup-content">
       <List
         bind:this={listRef}
@@ -221,12 +221,12 @@ const onListSelect = (event) => {
   .sterling-select {
     align-content: center;
     align-items: center;
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-radius: var(--stsv-Input__border-radius);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
-    color: var(--stsv-Input__color);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-radius: var(--stsv-input__border-radius);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
+    color: var(--stsv-input__color);
     cursor: pointer;
     display: grid;
     grid-template-columns: 1fr auto;
@@ -238,19 +238,19 @@ const onListSelect = (event) => {
   }
 
   .sterling-select:hover {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
-    color: var(--stsv-Input__color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
+    color: var(--stsv-input__color--hover);
   }
 
   .sterling-select:focus {
-    background-color: var(--stsv-Input__background-color--focus);
-    border-color: var(--stsv-Input__border-color--focus);
-    color: var(--stsv-Input__color--focus);
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+    background-color: var(--stsv-input__background-color--focus);
+    border-color: var(--stsv-input__border-color--focus);
+    color: var(--stsv-input__color--focus);
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
   }
 
   .sterling-select.disabled {
@@ -259,7 +259,13 @@ const onListSelect = (event) => {
   }
 
   .sterling-select::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 3px,
+      var(--stsv-common__background-color2--disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -329,11 +335,11 @@ const onListSelect = (event) => {
   }
 
   .popup-content {
-    background-color: var(--stsv-Common__background-color);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
-    border-style: var(--stsv-Common__border-style);
-    border-width: var(--stsv-Common__border-width);
+    background-color: var(--stsv-common__background-color);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
+    border-style: var(--stsv-common__border-style);
+    border-width: var(--stsv-common__border-width);
     padding: 0.25em;
     display: grid;
     grid-template-columns: 1fr;

package/Slider.svelte

@@ -1,10 +1,11 @@
 <script>import { createEventDispatcher } from "svelte";
 import { round } from "lodash-es";
+export let colorful = false;
 export let composed = false;
 export let disabled = false;
 export let min = 0;
 export let max = 100;
-export let precision = 0;
+export let precision = void 0;
 export let step = void 0;
 export let value = 0;
 export let vertical = false;
@@ -22,48 +23,17 @@ const dispatch = createEventDispatcher();
 const raiseChange = (newValue) => {
   dispatch("change", { value: newValue });
 };
-const getPrecision = (value2) => {
-  if (value2 !== void 0 && Number !== null && !Number.isNaN(value2)) {
-    const text = value2.toString();
-    const position = text.indexOf(".");
-    if (position !== -1) {
-      const fraction = text.substring(position + 1);
-      if (fraction) {
-        return fraction.length;
-      }
-    }
-  }
-  return 0;
-};
-$:
-  highestPrecision = Math.max(
-    precision,
-    getPrecision(min),
-    getPrecision(max),
-    getPrecision(step)
-  );
 const setValue = (newValue) => {
-  value = round(Math.max(min, Math.min(max, newValue)), highestPrecision);
+  const clamped = Math.max(min, Math.min(max, newValue));
+  value = precision !== void 0 ? round(clamped, precision) : clamped;
 };
 $: {
   if (min > max) {
     min = max;
   }
 }
-$: {
-  if (value < min || value > max || value !== round(value, highestPrecision)) {
-    setValue(value);
-  }
-}
-$: {
-  if (step) {
-    let stepValue = Math.max(min, Math.min(value, max));
-    stepValue = Math.round(stepValue / step) * step + min;
-    if (stepValue !== value) {
-      setValue(stepValue);
-    }
-  }
-}
+$:
+  min, max, precision, setValue(value);
 $:
   ratio = (value - min) / (max - min);
 $:
@@ -137,6 +107,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   aria-valuenow={value}
   aria-valuemax={max}
   class="sterling-slider"
+  class:colorful
   class:composed
   class:disabled
   class:horizontal={!vertical}
@@ -177,7 +148,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   on:pointerout
   on:pointerup
   on:pointerup={onPointerUp}
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div
@@ -202,34 +173,106 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-slider.horizontal {
+    height: 2em;
+  }
+
   .sterling-slider.vertical {
     height: 100%;
+    width: 2em;
   }
 
+  .sterling-slider.composed,
+  .sterling-slider.composed:hover,
+  .sterling-slider.composed.focus,
+  .sterling-slider.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  /* ----- container ----- */
+
   .container {
     position: relative;
   }
 
+  .sterling-slider.horizontal .container {
+    margin: 0 0.75em;
+  }
+
+  .sterling-slider.vertical .container {
+    margin: 0.75em 0;
+  }
+
+  /* ----- track ----- */
+
   .track {
     position: absolute;
-    background: var(--stsv-Display__background-color);
+    background: var(--stsv-common__background-color--secondary);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-slider.horizontal .track {
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 3px;
+    transform: translate(0, -50%);
+  }
+
+  .sterling-slider.vertical .track {
+    bottom: 0;
+    left: 50%;
+    top: 0;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
+
+  .sterling-slider:focus-visible {
+    outline-color: var(--stsv-common__outline-color);
+    outline-offset: var(--stsv-common__outline-offset);
+    outline-style: var(--stsv-common__outline-style);
+    outline-width: var(--stsv-common__outline-width);
+  }
+
+  /* ----- fill ----- */
+
   .fill {
-    background: var(--stsv-Display__color);
+    background: var(--stsv-common__color);
+    position: absolute;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-slider.horizontal .fill {
+    height: 3px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  .sterling-slider.vertical .fill {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 3px;
+  }
+
+  .sterling-slider.colorful .fill {
+    background: var(--stsv-input--colorful__border-color--selected);
     position: absolute;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  /* ----- thumb ----- */
+
   .thumb {
-    background-color: var(--stsv-Button__background-color);
-    border-color: var(--stsv-Button__border-color);
+    background-color: var(--stsv-button__background-color);
+    border-color: var(--stsv-button__border-color);
     border-radius: 10000px;
-    border-style: var(--stsv-Button__border-style);
-    border-width: var(--stsv-Button__border-width);
+    border-style: var(--stsv-button__border-style);
+    border-width: var(--stsv-button__border-width);
     box-sizing: border-box;
-    color: var(--stsv-Button__color);
+    color: var(--stsv-button__color);
     cursor: pointer;
     display: block;
     font: inherit;
@@ -244,89 +287,37 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     width: 1.5em;
   }
 
-  /* ----- horizontal ----- */
-
-  .sterling-slider.horizontal {
-    height: 2em;
-  }
-
-  .sterling-slider.horizontal .container {
-    margin: 0 0.75em;
-  }
-
-  .sterling-slider.horizontal .track {
-    left: 0;
-    right: 0;
-    top: 50%;
-    height: 3px;
-    transform: translate(0, -50%);
-  }
-
-  .sterling-slider.horizontal .fill {
-    height: 3px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-
   .sterling-slider.horizontal .thumb {
     top: 50%;
     transform: translate(-50%, -50%);
   }
 
-  /* ----- vertical ----- */
-
-  .sterling-slider.vertical {
-    width: 2em;
-  }
-  .sterling-slider.vertical .container {
-    margin: 0.75em 0;
-  }
-
-  .sterling-slider.vertical .track {
-    bottom: 0;
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, 0);
-    width: 3px;
-  }
-
-  .sterling-slider.vertical .fill {
-    bottom: 0;
-    left: 50%;
-    transform: translate(-50%, 0);
-    width: 3px;
-  }
-
   .sterling-slider.vertical .thumb {
     left: 50%;
     transform: translate(-50%, 50%);
   }
 
-  /* ----- hover ----- */
-
   .thumb:hover {
-    background-color: var(--stsv-Button__background-color--hover);
-    border-color: var(--stsv-Button__border-color--hover);
-    color: var(--stsv-Button__color--hover);
+    background-color: var(--stsv-button__background-color--hover);
+    border-color: var(--stsv-button__border-color--hover);
+    color: var(--stsv-button__color--hover);
   }
 
-  /* ----- active ----- */
-
   .thumb:active {
-    background-color: var(--stsv-Button__background-color--active);
-    border-color: var(--stsv-Button__border-color--active);
-    color: var(--stsv-Button__color--active);
+    background-color: var(--stsv-button__background-color--active);
+    border-color: var(--stsv-button__border-color--active);
+    color: var(--stsv-button__color--active);
   }
 
-  /* ----- focus ----- */
-  .sterling-slider:focus-visible {
-    outline-color: var(--stsv-Common__outline-color);
-    outline-offset: var(--stsv-Common__outline-offset);
-    outline-style: var(--stsv-Common__outline-style);
-    outline-width: var(--stsv-Common__outline-width);
+  /* ----- thumb colorful ----- */
+
+  .sterling-slider.colorful .thumb {
+    background-color: var(--stsv-button--colorful__background-color);
+    border-color: var(--stsv-button--colorful__border-color);
+    color: var(--stsv-button--colorful__color);
   }
 
-  /* ----- disabled ----- */
+  /* ----- thumb disabled ----- */
 
   .sterling-slider.disabled .thumb {
     cursor: not-allowed;
@@ -334,7 +325,13 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   }
 
   .sterling-slider .thumb::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      45deg,
+      var(--stsv-common__background-color1--disabled),
+      var(--stsv-common__background-color1--disabled) 3px,
+      var(--stsv-common__background-color2_disabled) 3px,
+      var(--stsv-common__background-color2_disabled) 6px
+    );
     bottom: 0;
     content: '';
     left: 0;
@@ -350,14 +347,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     opacity: 1;
   }
 
-  .sterling-slider.composed,
-  .sterling-slider.composed:hover,
-  .sterling-slider.composed.focus,
-  .sterling-slider.composed.disabled {
-    background: none;
-    border: none;
-    outline: none;
-  }
+  /* ----- reduced motion ----- */
 
   @media (prefers-reduced-motion) {
     .sterling-slider,

package/Slider.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        colorful?: boolean | undefined;
         composed?: boolean | undefined;
         disabled?: boolean | undefined;
         min?: number | undefined;