@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/Slider.svelte

@@ -1,98 +1,128 @@
-<script>import { createEventDispatcher } from "svelte";
-import { round } from "lodash-es";
-export let colorful = false;
-export let composed = false;
+<script>import { createEventDispatcher } from 'svelte';
+import { round } from 'lodash-es';
+// ----- Props ----- //
+/** When true, the slider is disabled. */
 export let disabled = false;
+/** The minimum value of the slider. */
 export let min = 0;
+/** The maximum value of the slider. */
 export let max = 100;
-export let precision = void 0;
+/** The number of decimal places for rounding the value. */
+export let precision = undefined;
+/** The amount the value changes by pressing arrow keys. */
 export let step = 1;
+/** The value of the slider. */
 export let value = 0;
+/** Additional class names to apply. */
+export let variant = '';
+/** When true, the slider is displayed vertically. */
 export let vertical = false;
+// ----- State ----- //
 let sliderRef;
+// ----- Methods ----- //
 export const blur = () => {
-  sliderRef?.blur();
+    sliderRef?.blur();
 };
 export const click = () => {
-  sliderRef?.click();
+    sliderRef?.click();
 };
 export const focus = (options) => {
-  sliderRef?.focus();
+    sliderRef?.focus();
 };
+// -----Events----- //
 const dispatch = createEventDispatcher();
+//TODO: have change and input events for parity with input type=slider
+// or use input internally within this component.
 const raiseChange = (newValue) => {
-  dispatch("change", { value: newValue });
+    dispatch('change', { value: newValue });
 };
+// ----- Value tracking ----- //
+// const getPrecision = (value?: number): number => {
+//   if (value !== undefined && Number !== null && !Number.isNaN(value)) {
+//     const text = value.toString();
+//     const position = text.indexOf('.');
+//     if (position !== -1) {
+//       const fraction = text.substring(position + 1);
+//       if (fraction) {
+//         return fraction.length;
+//       }
+//     }
+//   }
+//   return 0;
+// };
 const setValue = (newValue) => {
-  const clamped = Math.max(min, Math.min(max, newValue));
-  value = precision !== void 0 ? round(clamped, precision) : clamped;
+    const clamped = Math.max(min, Math.min(max, newValue));
+    value = precision !== undefined ? round(clamped, precision) : clamped;
 };
+// ensure min <= max
 $: {
-  if (min > max) {
-    min = max;
-  }
+    if (min > max) {
+        min = max;
+    }
 }
-$:
-  min, max, precision, setValue(value);
-$:
-  ratio = (value - min) / (max - min);
+$: min, max, precision, setValue(value);
+// Compute the ratio of the value to the range
+$: ratio = (value - min) / (max - min);
 const setValueByOffset = (offset) => {
-  if (sliderSize > 0) {
-    const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
-    const newValue = min + positionRatio * (max - min);
-    setValue(newValue);
-  }
+    if (sliderSize > 0) {
+        const positionRatio = Math.max(0, Math.min(1, offset / sliderSize));
+        const newValue = min + positionRatio * (max - min);
+        setValue(newValue);
+    }
 };
+// Raise change event when value changes
 $: {
-  raiseChange(value);
+    raiseChange(value);
 }
+// ----- Size tracking ----- //
 let sliderWidth;
 let sliderHeight;
-$:
-  sliderSize = vertical ? sliderHeight : sliderWidth;
-$:
-  valueOffset = sliderSize * ratio;
+$: sliderSize = vertical ? sliderHeight : sliderWidth;
+$: valueOffset = sliderSize * ratio;
+// ----- Event handlers ----- //
 const onPointerDown = (event) => {
-  if (!disabled) {
-    event.currentTarget.setPointerCapture(event.pointerId);
-    if (vertical) {
-      setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-    } else {
-      setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+    if (!disabled) {
+        event.currentTarget.setPointerCapture(event.pointerId);
+        if (vertical) {
+            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
+        else {
+            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
     }
-  }
 };
 const onPointerMove = (event) => {
-  if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
-    if (vertical) {
-      setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
-    } else {
-      setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+    if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) {
+        if (vertical) {
+            setValueByOffset(sliderRef.getBoundingClientRect().bottom - event.y);
+        }
+        else {
+            setValueByOffset(event.x - sliderRef.getBoundingClientRect().left);
+        }
     }
-  }
 };
 const onPointerUp = (event) => {
-  if (!disabled) {
-    event.currentTarget.releasePointerCapture(event.pointerId);
-  }
+    if (!disabled) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+    }
 };
 const onKeyDown = (event) => {
-  if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
-    switch (event.code) {
-      case "ArrowDown":
-      case "ArrowLeft":
-        setValue(value - step);
-        event.preventDefault();
-        event.stopPropagation();
-        return;
-      case "ArrowRight":
-      case "ArrowUp":
-        setValue(value + step);
-        event.preventDefault();
-        event.stopPropagation();
-        return;
+    if (!disabled && !event.ctrlKey && !event.shiftKey && !event.altKey) {
+        switch (event.code) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                setValue(value - step);
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+            case 'ArrowRight':
+            case 'ArrowUp':
+                setValue(value + step);
+                event.preventDefault();
+                event.stopPropagation();
+                return;
+        }
     }
-  }
 };
 </script>
 
@@ -104,9 +134,7 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
   aria-valuemin={0}
   aria-valuenow={value}
   aria-valuemax={max}
-  class="sterling-slider"
-  class:colorful
-  class:composed
+  class={`sterling-slider ${variant}`}
   class:disabled
   class:horizontal={!vertical}
   class:vertical
@@ -160,200 +188,3 @@ Slider lets the user chose a value within a min/max range by dragging a thumb bu
     <div class="thumb" style={vertical ? `bottom: ${valueOffset}px` : `left: ${valueOffset}px`} />
   </div>
 </div>
-
-<style>
-  .sterling-slider {
-    box-sizing: border-box;
-    outline: none;
-    padding: 0;
-    overflow: visible;
-    display: grid;
-    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-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-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);
-    border-radius: 10000px;
-    border-style: var(--stsv-button__border-style);
-    border-width: var(--stsv-button__border-width);
-    box-sizing: border-box;
-    color: var(--stsv-button__color);
-    cursor: pointer;
-    display: block;
-    font: inherit;
-    height: 1.5em;
-    overflow: hidden;
-    padding: 0;
-    position: relative;
-    text-decoration: none;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-    position: absolute;
-    width: 1.5em;
-  }
-
-  .sterling-slider.horizontal .thumb {
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .sterling-slider.vertical .thumb {
-    left: 50%;
-    transform: translate(-50%, 50%);
-  }
-
-  .thumb:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: var(--stsv-button__border-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  .thumb:active {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: var(--stsv-button__border-color--active);
-    color: var(--stsv-button__color--active);
-  }
-
-  /* ----- 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);
-  }
-
-  /* ----- thumb disabled ----- */
-
-  .sterling-slider.disabled .thumb {
-    cursor: not-allowed;
-    outline: none;
-  }
-
-  .sterling-slider .thumb::after {
-    background: repeating-linear-gradient(
-      var(--stsv-common--disabled__stripe-angle),
-      var(--stsv-common--disabled__stripe-color),
-      var(--stsv-common--disabled__stripe-color) 3px,
-      var(--stsv-common__background-color2_disabled) 3px,
-      var(--stsv-common__background-color2_disabled) 6px
-    );
-    bottom: 0;
-    content: '';
-    left: 0;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    pointer-events: none;
-    transition: opacity 250ms;
-  }
-
-  .sterling-slider.disabled .thumb::after {
-    opacity: 1;
-  }
-
-  /* ----- reduced motion ----- */
-
-  @media (prefers-reduced-motion) {
-    .sterling-slider,
-    .track,
-    .fill,
-    .thumb,
-    .thumb::after {
-      transition: none;
-    }
-  }
-</style>

package/Slider.svelte.d.ts

@@ -2,14 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        colorful?: boolean | undefined;
-        composed?: boolean | undefined;
         disabled?: boolean | undefined;
         min?: number | undefined;
         max?: number | undefined;
         precision?: number | undefined;
         step?: number | undefined;
         value?: number | undefined;
+        variant?: string | undefined;
         vertical?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;