@geoffcox/sterling-svelte 0.0.26 → 0.0.28

package/Popover.svelte

@@ -1,31 +1,37 @@
 <script>import { onMount } from "svelte";
 import { autoUpdate, computePosition, flip, offset } from "@floating-ui/dom";
 import { portal } from "./actions/portal";
-export let placement = "bottom-start";
+export let offsetOptions = { mainAxis: 0, crossAxis: 0 };
 export let open = false;
-export let reference;
+export let persistent = false;
+export let placement = "bottom-start";
 export let portalHost = void 0;
+export let reference;
 let popupRef;
 let popupPosition = { x: 0, y: 0 };
 const hostId = "SterlingPopoverPortal";
 const ensurePortalHost = () => {
-  if (portalHost) {
-    return portalHost;
+  if (document) {
+    if (portalHost) {
+      return portalHost;
+    }
+    let host = document.querySelector(`#${hostId}`);
+    if (!host) {
+      console.log("creating portal host");
+      host = document.createElement("div");
+      host.id = hostId;
+      host.style.overflow = "visible";
+      document.body.append(host);
+    }
+    portalHost = host;
   }
-  let host = document.querySelector(`#${hostId}`);
-  if (!host) {
-    host = document.createElement("div");
-    host.id = hostId;
-    host.style.overflow = "visible";
-    document.body.append(host);
-  }
-  portalHost = host;
 };
 let bodyHeight = 0;
 const resizeObserver = new ResizeObserver((entries) => {
   bodyHeight = entries[0].target.clientHeight;
 });
-const middleware = [offset({ mainAxis: -2 }), flip()];
+$:
+  middleware = [offset(offsetOptions), flip()];
 const computePopupPosition = async () => {
   if (reference && popupRef) {
     popupPosition = await computePosition(reference, popupRef, {
@@ -47,7 +53,7 @@ const autoUpdateMenuPosition = () => {
 $:
   popupRef, reference, autoUpdateMenuPosition();
 $:
-  open, bodyHeight, placement, computePopupPosition();
+  open, bodyHeight, middleware, placement, computePopupPosition();
 onMount(() => {
   ensurePortalHost();
   resizeObserver.observe(document.body);
@@ -55,46 +61,55 @@ onMount(() => {
     resizeObserver.unobserve(document.body);
   };
 });
+const onKeydown = (event) => {
+  if (event.key === "Escape") {
+    open = false;
+  }
+};
+ensurePortalHost();
 </script>
 
-<div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
-  <div
-    bind:this={popupRef}
-    class="sterling-popover"
-    class: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:scroll
-    on:wheel
-    on:paste
-    {...$$restProps}
-    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
-  >
-    <slot />
+{#if open || persistent}
+  <div use:portal={{ target: portalHost ?? document.body }} class="sterling-popover-portal">
+    <div
+      bind:this={popupRef}
+      class="sterling-popover"
+      class: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:scroll
+      on:wheel|passive
+      on:paste
+      on:keydown={onKeydown}
+      {...$$restProps}
+      style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+    >
+      <slot />
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .sterling-popover-portal {

package/Popover.svelte.d.ts

@@ -3,10 +3,12 @@ import type { Placement } from '@floating-ui/dom';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        placement?: Placement | undefined;
+        offsetOptions?: import("@floating-ui/core").OffsetOptions | undefined;
         open?: boolean | undefined;
-        reference: HTMLElement;
+        persistent?: boolean | undefined;
+        placement?: Placement | undefined;
         portalHost?: HTMLElement | undefined;
+        reference: HTMLElement;
     };
     events: {
         blur: FocusEvent;

package/Progress.constants.d.ts

@@ -1 +1 @@
-export declare const PROGRESS_COLORFULS: string[];
+export declare const PROGRESS_STATUSES: string[];

package/Progress.constants.js

@@ -1 +1 @@
-export const PROGRESS_COLORFULS = ['none', 'auto', 'info', 'success', 'warning', 'error'];
+export const PROGRESS_STATUSES = ['none', 'auto', 'info', 'success', 'warning', 'danger'];

package/Progress.svelte

@@ -2,7 +2,7 @@
 export let max = 100;
 export let percent = 0;
 export let vertical = false;
-export let colorful = "none";
+export let status = "none";
 export let disabled = false;
 let clientHeight;
 let clientWidth;
@@ -22,7 +22,7 @@ $:
 $:
   indicatorStyle = vertical ? `height: ${percentHeight}px` : `width: ${percentWidth}px`;
 $:
-  indicatorColor = colorful === "auto" ? percent === 100 ? "success" : "info" : colorful;
+  indicatorColor = status === "auto" ? percent === 100 ? "success" : "info" : status;
 </script>
 
 <!--
@@ -67,7 +67,7 @@ $:
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container" bind:clientWidth bind:clientHeight>
@@ -76,7 +76,7 @@ $:
       class:info={indicatorColor === 'info'}
       class:success={indicatorColor === 'success'}
       class:warning={indicatorColor === 'warning'}
-      class:error={indicatorColor === 'error'}
+      class:error={indicatorColor === 'danger'}
       style={indicatorStyle}
     />
   </div>
@@ -84,22 +84,39 @@ $:
 
 <style>
   .sterling-progress {
-    display: inline-flex;
-    flex-direction: column;
     align-content: flex-start;
     align-items: flex-start;
-    display: block;
-    background: var(--stsv-Common__background-color);
+    background: var(--stsv-common__background-color);
+    border-width: var(--stsv-common__border-width);
+    border-style: var(--stsv-common__border-style);
+    border-color: var(--stsv-common__border-color);
+    border-radius: var(--stsv-common__border-radius);
     box-sizing: border-box;
+    display: block;
     height: 1em;
     padding: 0.25em;
-    border-width: var(--stsv-Common__border-width);
-    border-style: var(--stsv-Common__border-style);
-    border-color: var(--stsv-Common__border-color);
-    border-radius: var(--stsv-Common__border-radius);
+    position: relative;
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
+  .sterling-progress.disabled::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
+    pointer-events: none;
+  }
+
   .container {
     display: flex;
     justify-content: flex-start;
@@ -108,7 +125,7 @@ $:
   }
 
   .indicator {
-    background-color: var(--stsv-Display__border-color);
+    background-color: var(--stsv-common__border-color);
     box-sizing: border-box;
     height: 100%;
     min-height: 1px;
@@ -140,30 +157,19 @@ $:
   /* ----- Colorful ----- */
 
   .indicator.info {
-    background-color: var(--stsv-Info__border-color);
+    background-color: var(--stsv-status--info__border-color);
   }
 
   .indicator.success {
-    background-color: var(--stsv-Success__border-color);
+    background-color: var(--stsv-status--success__border-color);
   }
 
   .indicator.warning {
-    background-color: var(--stsv-Warning__border-color);
+    background-color: var(--stsv-status--warning__border-color);
   }
 
   .indicator.error {
-    background-color: var(--stsv-Error__border-color);
-  }
-
-  /* ----- Disabled ----- */
-
-  .sterling-progress.disabled {
-    background: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--disabled);
-  }
-
-  .sterling-progress.disabled .indicator {
-    background-color: var(--stsv-Display__color--disabled);
+    background-color: var(--stsv-status--danger__border-color);
   }
 
   @media (prefers-reduced-motion) {

package/Progress.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         max?: number | undefined;
         percent?: number | undefined;
         vertical?: boolean | undefined;
-        colorful?: string | undefined;
+        status?: string | undefined;
         disabled?: boolean | undefined;
     };
     events: {

package/Progress.types.d.ts

@@ -1,4 +1,4 @@
-import type { PROGRESS_COLORFULS } from './Progress.constants';
-type ProgressColorfulTuple = typeof PROGRESS_COLORFULS;
-export type ProgressColorful = ProgressColorfulTuple[number];
+import type { PROGRESS_STATUSES } from './Progress.constants';
+type ProgressStatusTuple = typeof PROGRESS_STATUSES;
+export type ProgressStatus = ProgressStatusTuple[number];
 export {};

package/Radio.svelte

@@ -1,9 +1,9 @@
 <script>import { idGenerator } from "./idGenerator";
-import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
 export let id = void 0;
+export let colorful = false;
 if (checked && $$restProps.value !== group) {
   group = $$restProps.value;
 } else if (!checked && $$restProps.value === group) {
@@ -59,7 +59,7 @@ const onChange = (e) => {
 	@component
 	A styled HTML input type=radio element with optional label.
 -->
-<div class="sterling-radio" class:disabled>
+<div class="sterling-radio" class:colorful class:disabled>
   <div class="container">
     <input
       bind:this={inputRef}
@@ -93,17 +93,15 @@ const onChange = (e) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:wheel
+      on:wheel|passive
       {...$$restProps}
     />
     <div class="indicator" />
   </div>
   {#if $$slots.default}
-    <Label {disabled} for={id}>
-      <slot {checked} {disabled} {group} inputId={id} value={$$restProps.value}>
-        {$$restProps.value}
-      </slot>
-    </Label>
+    <label for={id}>
+      <slot {colorful} {checked} {disabled} {group} inputId={id} value={$$restProps.value} />
+    </label>
   {/if}
 </div>
 
@@ -152,10 +150,10 @@ const onChange = (e) => {
 		and there is not a parent CSS selector.
 	*/
   .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
-    border-style: var(--stsv-Input__border-style);
-    border-width: var(--stsv-Input__border-width);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
+    border-style: var(--stsv-input__border-style);
+    border-width: var(--stsv-input__border-width);
     border-radius: 10000px;
     box-sizing: border-box;
     display: inline-block;
@@ -167,20 +165,20 @@ const onChange = (e) => {
   }
 
   input:checked + .indicator {
-    background-color: var(--stsv-Input__background-color);
-    border-color: var(--stsv-Input__border-color);
+    background-color: var(--stsv-input__background-color);
+    border-color: var(--stsv-input__border-color);
   }
 
   .sterling-radio:not(.disabled):hover .indicator {
-    background-color: var(--stsv-Input__background-color--hover);
-    border-color: var(--stsv-Input__border-color--hover);
+    background-color: var(--stsv-input__background-color--hover);
+    border-color: var(--stsv-input__border-color--hover);
   }
 
   input:focus-visible + .indicator {
-    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);
+    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);
   }
 
   .indicator::after {
@@ -197,7 +195,26 @@ const onChange = (e) => {
   }
 
   input:checked + .indicator::after {
-    background-color: var(--stsv-Input__color);
+    background-color: var(--stsv-input__color);
+  }
+
+  .sterling-radio.colorful .indicator {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+  }
+
+  .sterling-radio.colorful input:checked + .indicator {
+    background-color: var(--stsv-input--colorful__background-color);
+    border-color: var(--stsv-input--colorful__border-color);
+  }
+
+  .sterling-radio.colorful:not(.disabled):hover .indicator {
+    background-color: var(--stsv-input--colorful__background-color--hover);
+    border-color: var(--stsv-input--colorful__border-color--hover);
+  }
+
+  .sterling-radio.colorful input:checked + .indicator::after {
+    background-color: var(--stsv-input--colorful__color);
   }
 
   .sterling-radio.disabled * {
@@ -205,7 +222,14 @@ const onChange = (e) => {
   }
 
   .container::after {
-    background: var(--stsv-Disabled__background);
+    background: repeating-linear-gradient(
+      var(--stsv-common--disabled__stripe-angle),
+      var(--stsv-common--disabled__stripe-color),
+      var(--stsv-common--disabled__stripe-color) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt) var(--stsv-common--disabled__stripe-width),
+      var(--stsv-common--disabled__stripe-color--alt)
+        calc(2 * var(--stsv-common--disabled__stripe-width))
+    );
     border-radius: 10000px;
     bottom: 0;
     content: '';
@@ -218,6 +242,12 @@ const onChange = (e) => {
     transition: opacity 250ms;
   }
 
+  label {
+    color: var(--stsv-common__color);
+    transition: color 250ms;
+    font: inherit;
+  }
+
   .sterling-radio.disabled .container::after {
     opacity: 1;
   }
@@ -225,7 +255,8 @@ const onChange = (e) => {
   @media (prefers-reduced-motion) {
     .indicator,
     .indicator::after,
-    .container::after {
+    .container::after,
+    label {
       transition: none;
     }
   }

package/Radio.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         group?: any | undefined | null;
         id?: string | undefined;
+        colorful?: boolean | undefined;
         blur?: (() => void) | undefined;
         click?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -41,6 +42,7 @@ declare const __propDef: {
     };
     slots: {
         default: {
+            colorful: boolean;
             checked: boolean;
             disabled: boolean;
             group: any;

package/RgbColorSliders.svelte

@@ -0,0 +1,182 @@
+<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(
+        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>