@geoffcox/sterling-svelte 0.0.30 → 1.0.0

package/@types/clickOutside.d.ts

@@ -1,11 +1,15 @@
-declare namespace svelte.JSX {
-  type ClickOutsideEventDetail = {
-    mouseEvent: MouseEvent;
-  };
+import type { EventHandler } from 'svelte/elements';
 
-  type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+export type ClickOutsideEventDetail = {
+  mouseEvent: MouseEvent;
+};
 
-  interface DOMAttributes<T> {
-    onclick_outside?: (e: ClickOutsideEvent) => void;
+export type ClickOutsideEvent = CustomEvent<ClickOutsideEventDetail>;
+
+declare module 'svelte/elements' {
+  export interface DOMAttributes<T extends EventTarget> {
+    'on:click_outside'?: EventHandler<ClickOutsideEvent, T>;
   }
 }
+
+export {}; // ensure this is not an ambient module, else types will be overridden instead of augmented

package/Button.svelte

@@ -1,16 +1,18 @@
-<script>export let disabled = false;
-export let variant = "regular";
-export let shape = "rounded";
-export let colorful = false;
+<script>// ----- Props ----- //
+export let disabled = false;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
 let buttonRef;
+// ----- Methods ----- //
 export const click = () => {
-  buttonRef?.click();
+    buttonRef?.click();
 };
 export const blur = () => {
-  buttonRef?.blur();
+    buttonRef?.blur();
 };
 export const focus = (options) => {
-  buttonRef?.focus(options);
+    buttonRef?.focus(options);
 };
 </script>
 
@@ -20,12 +22,7 @@ export const focus = (options) => {
 -->
 <button
   bind:this={buttonRef}
-  class="sterling-button"
-  class:colorful
-  class:square={shape === 'square'}
-  class:circular={shape === 'circular'}
-  class:outline={variant === 'outline'}
-  class:ghost={variant === 'ghost'}
+  class={`sterling-button ${variant}`}
   {disabled}
   type="button"
   on:blur
@@ -62,174 +59,5 @@ export const focus = (options) => {
   on:wheel|passive
   {...$$restProps}
 >
-  <slot {disabled} {colorful} {shape} {variant} />
+  <slot {disabled} {variant} />
 </button>
-
-<style>
-  button {
-    align-content: center;
-    align-items: center;
-    background-color: var(--stsv-button__background-color);
-    border-color: var(--stsv-button__border-color);
-    border-radius: var(--stsv-button__border-radius);
-    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: inline-flex;
-    flex-direction: row;
-    font: inherit;
-    justify-content: center;
-    justify-items: center;
-    column-gap: 0.25em;
-    overflow: hidden;
-    padding: 0.5em 1em;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    transition: background-color 250ms, color 250ms, border-color 250ms;
-    white-space: nowrap;
-    user-select: none;
-  }
-
-  button.vertical {
-    flex-direction: column;
-    row-gap: 0.15em;
-  }
-
-  button.circular {
-    border-radius: 10000px;
-    padding: 0.5em;
-  }
-
-  button.square {
-    border-radius: 0;
-  }
-
-  button:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: var(--stsv-button__border-color--hover);
-    color: var(--stsv-button__color--hover);
-  }
-
-  button:active {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: var(--stsv-button__border-color--active);
-    color: var(--stsv-button__color--active);
-  }
-
-  button:focus-visible {
-    border-color: var(--stsv-button__border-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);
-  }
-
-  button.colorful {
-    background-color: var(--stsv-button--colorful__background-color);
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__color);
-  }
-  button.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    border-color: var(--stsv-button--colorful__border-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    border-color: var(--stsv-button--colorful__border-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button.outline {
-    background-color: transparent;
-  }
-
-  button.outline:hover {
-    background-color: var(--stsv-button__background-color--hover);
-  }
-
-  button.outline:active {
-    background-color: var(--stsv-button__background-color--active);
-  }
-
-  button.outline.colorful {
-    border-color: var(--stsv-button--colorful__border-color);
-    color: var(--stsv-button--colorful__border-color);
-  }
-  button.outline.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    border-color: var(--stsv-button--colorful__border-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.outline.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    border-color: var(--stsv-button--colorful__border-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button.ghost {
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  button.ghost:hover {
-    background-color: var(--stsv-button__background-color--hover);
-    border-color: transparent;
-  }
-
-  button.ghost:active {
-    background-color: var(--stsv-button__background-color--active);
-    border-color: transparent;
-  }
-
-  button.ghost:focus-visible {
-    border-color: var(--stsv-button__border-color--focus);
-  }
-
-  button.ghost.colorful {
-    color: var(--stsv-button--colorful__border-color);
-  }
-
-  button.ghost.colorful:hover {
-    background-color: var(--stsv-button--colorful__background-color--hover);
-    color: var(--stsv-button--colorful__color--hover);
-  }
-
-  button.ghost.colorful:active {
-    background-color: var(--stsv-button--colorful__background-color--active);
-    color: var(--stsv-button--colorful__color--active);
-  }
-
-  button:disabled {
-    cursor: not-allowed;
-    position: relative;
-  }
-
-  button: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;
-  }
-
-  @media (prefers-reduced-motion) {
-    button {
-      transition: none;
-    }
-  }
-</style>

package/Button.svelte.d.ts

@@ -3,9 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         disabled?: boolean | undefined;
-        variant?: "regular" | "outline" | "ghost" | undefined;
-        shape?: "circular" | "rounded" | "square" | undefined;
-        colorful?: boolean | undefined;
+        variant?: string | undefined;
         click?: (() => void) | undefined;
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
@@ -49,9 +47,7 @@ declare const __propDef: {
     slots: {
         default: {
             disabled: boolean;
-            colorful: boolean;
-            shape: "circular" | "rounded" | "square";
-            variant: "regular" | "outline" | "ghost";
+            variant: string;
         };
     };
 };

package/Callout.svelte

@@ -0,0 +1,188 @@
+<script>import { onMount } from 'svelte';
+import { arrow, autoUpdate, computePosition, flip, offset } from '@floating-ui/dom';
+import { portal } from './actions/portal';
+import { STERLING_PORTAL_HOST_ID } from './Popover.constants';
+import { fade } from 'svelte/transition';
+import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+// ----- Props ----- //
+/** Conditionally renders content based on open. */
+export let conditionalRender = true;
+/** The offset along the side of the reference element. */
+export let crossAxisOffset = 0;
+/** The offset towards or away from the side of the reference element. */
+export let mainAxisOffset = 0;
+/** When true, the callout is open and visible. */
+export let open = false;
+/** How the callout should be positioned relative to the reference element. */
+export let placement = 'bottom-start';
+/** The host container for the callout. */
+export let portalHost = undefined;
+/** The reference to the element anchoring the position of the callout. */
+export let reference;
+/** Additional class names to apply. */
+export let variant = '';
+// ----- State ----- //
+let popupRef;
+let arrowRef;
+let popupPosition = { x: 0, y: 0 };
+$: floatingUIPlacement = placement;
+// ----- Portal Host ----- //
+const ensurePortalHost = () => {
+    if (document) {
+        if (portalHost) {
+            return portalHost;
+        }
+        let host = document.querySelector(`#${STERLING_PORTAL_HOST_ID}`);
+        if (!host) {
+            host = document.createElement('div');
+            host.id = STERLING_PORTAL_HOST_ID;
+            host.style.overflow = 'visible';
+            document.body.append(host);
+        }
+        portalHost = host;
+    }
+};
+// ----- Body Height Change ----- //
+let bodyHeight = 0;
+// create an Observer instance
+const resizeObserver = new ResizeObserver((entries) => {
+    bodyHeight = entries[0].target.clientHeight;
+});
+// ----- Position ----- //
+$: middleware = [
+    offset({ mainAxis: mainAxisOffset, crossAxis: crossAxisOffset }),
+    flip(),
+    arrow({ element: arrowRef, padding: 8 })
+];
+const computeCalloutPosition = async () => {
+    if (reference && popupRef) {
+        popupPosition = await computePosition(reference, popupRef, {
+            placement: floatingUIPlacement,
+            middleware
+        });
+    }
+    else {
+        popupPosition = { x: 0, y: 0 };
+    }
+};
+// whenever a positioned element is portaled it needs resubscription to auto-update
+let cleanupAutoUpdate = () => { };
+const autoUpdateCalloutPosition = () => {
+    cleanupAutoUpdate();
+    if (reference && popupRef) {
+        cleanupAutoUpdate = autoUpdate(reference, popupRef, computeCalloutPosition);
+    }
+};
+$: popupRef, reference, autoUpdateCalloutPosition();
+$: open, bodyHeight, middleware, placement, computeCalloutPosition();
+// ----- Arrow ----- //
+const getArrowPlacementStyle = (position) => {
+    if (position?.placement && arrowRef) {
+        switch (position.placement) {
+            case 'top':
+            case 'top-start':
+            case 'top-end':
+                return (`bottom: -${arrowRef.offsetWidth}px;` +
+                    `filter: drop-shadow(-1px -2px 1px rgba(0,0,0,0.2));` +
+                    `transform:translate(0, -50%) rotate(135deg);`);
+            case 'right':
+            case 'right-start':
+            case 'right-end':
+                return (`left: -${arrowRef.offsetWidth}px;` + `transform:translate(50%, 0) rotate(225deg);`);
+            case 'bottom':
+            case 'bottom-start':
+            case 'bottom-end':
+                return `top: -${arrowRef.offsetWidth}px;` + `transform:translate(0, 50%) rotate(-45deg);`;
+            case 'left':
+            case 'left-start':
+            case 'left-end':
+                return (`right: -${arrowRef.offsetWidth}px;` +
+                    `filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));` +
+                    `transform:translate(-50%, 0) rotate(45deg);`);
+        }
+    }
+    return '';
+};
+const getArrowOffsetStyle = (position) => {
+    const arrow = position?.middlewareData?.arrow;
+    if (arrow) {
+        if (arrow.x !== null && arrow.x !== undefined) {
+            return `left: ${arrow.x}px;`;
+        }
+        else if (arrow.y !== null && arrow.y !== undefined) {
+            return `top: ${arrow.y}px;`;
+        }
+    }
+    return '';
+};
+$: arrowStyle = getArrowPlacementStyle(popupPosition) + getArrowOffsetStyle(popupPosition);
+// ----- Animation ----- //
+const fadeNoOp = (node, params) => {
+    return { delay: 0, duration: 0 };
+};
+$: fadeMotion = !$prefersReducedMotion ? fade : fadeNoOp;
+// ----- EventHandlers ----- //
+onMount(() => {
+    ensurePortalHost();
+    // start observing a DOM node
+    resizeObserver.observe(document.body);
+    return () => {
+        resizeObserver.unobserve(document.body);
+    };
+});
+const onKeydown = (event) => {
+    if (event.key === 'Escape') {
+        open = false;
+    }
+};
+ensurePortalHost();
+</script>
+
+{#if open || !conditionalRender}
+  <div
+    use:portal={{ target: portalHost ?? document.body }}
+    class="sterling-callout-portal"
+    transition:fadeMotion|global={{ duration: 250 }}
+  >
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div
+      bind:this={popupRef}
+      class={`sterling-callout ${variant}`}
+      class:open
+      role="tooltip"
+      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 class="arrow" bind:this={arrowRef} style={arrowStyle} />
+    </div>
+  </div>
+{/if}

package/Callout.svelte.d.ts

@@ -0,0 +1,54 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        conditionalRender?: boolean | undefined;
+        crossAxisOffset?: number | undefined;
+        mainAxisOffset?: number | undefined;
+        open?: boolean | undefined;
+        placement?: string | undefined;
+        portalHost?: HTMLElement | undefined;
+        reference: HTMLElement | 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;
+        scroll: Event;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type CalloutProps = typeof __propDef.props;
+export type CalloutEvents = typeof __propDef.events;
+export type CalloutSlots = typeof __propDef.slots;
+export default class Callout extends SvelteComponentTyped<CalloutProps, CalloutEvents, CalloutSlots> {
+}
+export {};