@geoffcox/sterling-svelte 0.0.25 → 0.0.27

package/Popover.svelte

@@ -1,35 +1,37 @@
 <script>import { onMount } from "svelte";
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+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(),
-  shift({ padding: 0, mainAxis: true, crossAxis: true })
-];
+$:
+  middleware = [offset(offsetOptions), flip()];
 const computePopupPosition = async () => {
   if (reference && popupRef) {
     popupPosition = await computePosition(reference, popupRef, {
@@ -51,7 +53,7 @@ const autoUpdateMenuPosition = () => {
 $:
   popupRef, reference, autoUpdateMenuPosition();
 $:
-  open, bodyHeight, placement, computePopupPosition();
+  open, bodyHeight, middleware, placement, computePopupPosition();
 onMount(() => {
   ensurePortalHost();
   resizeObserver.observe(document.body);
@@ -59,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 {
@@ -108,11 +119,6 @@ onMount(() => {
   }
 
   .sterling-popover {
-    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);
     box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
     box-sizing: border-box;
     display: none;
@@ -120,9 +126,7 @@ onMount(() => {
     grid-template-rows: 1fr;
     height: fit-content;
     left: 0;
-    max-height: calc(50vh);
-    overflow: auto;
-    overscroll-behavior: contain;
+    overflow: hidden;
     position: absolute;
     top: 0;
     width: max-content;

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.svelte

@@ -67,7 +67,7 @@ $:
   on:pointerover
   on:pointerout
   on:pointerup
-  on:wheel
+  on:wheel|passive
   {...$$restProps}
 >
   <div class="container" bind:clientWidth bind:clientHeight>
@@ -89,14 +89,14 @@ $:
     align-content: flex-start;
     align-items: flex-start;
     display: block;
-    background: var(--stsv-Common__background-color);
+    background: var(--stsv-common__background-color);
     box-sizing: border-box;
     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);
+    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);
     transition: background-color 250ms, color 250ms, border-color 250ms;
   }
 
@@ -108,7 +108,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 +140,30 @@ $:
   /* ----- 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);
+    background-color: var(--stsv-status--error__border-color);
   }
 
   /* ----- Disabled ----- */
 
   .sterling-progress.disabled {
-    background: var(--stsv-Common__background-color--disabled);
-    border-color: var(--stsv-Common__border-color--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-common__color--disabled);
   }
 
   @media (prefers-reduced-motion) {

package/Radio.svelte

@@ -1,5 +1,6 @@
 <script>import { idGenerator } from "./idGenerator";
 import Label from "./Label.svelte";
+export let colorful = false;
 export let checked = false;
 export let disabled = false;
 export let group = void 0;
@@ -59,7 +60,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,7 +94,7 @@ const onChange = (e) => {
       on:mouseover
       on:mouseout
       on:mouseup
-      on:wheel
+      on:wheel|passive
       {...$$restProps}
     />
     <div class="indicator" />
@@ -152,10 +153,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 +168,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 +198,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 +225,13 @@ const onChange = (e) => {
   }
 
   .container::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
+    );
     border-radius: 10000px;
     bottom: 0;
     content: '';

package/Radio.svelte.d.ts

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

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 {};