@geoffcox/sterling-svelte 0.0.17 → 0.0.19

package/Checkbox.svelte

@@ -2,7 +2,12 @@
 import Label from "./Label.svelte";
 export let checked = false;
 export let disabled = false;
-const inputId = uuid();
+export let id = void 0;
+$: {
+  if ($$slots.default && id === void 0) {
+    id = uuid();
+  }
+}
 </script>
 
 <!--
@@ -12,6 +17,8 @@ const inputId = uuid();
 <div class="sterling-checkbox">
   <div class="container">
     <input
+      {disabled}
+      {id}
       type="checkbox"
       on:blur
       on:click
@@ -35,15 +42,13 @@ const inputId = uuid();
       on:wheel
       bind:checked
       {...$$restProps}
-      id={inputId}
-      {disabled}
     />
     <div class="indicator" />
   </div>
-  {#if $$slots.label}
+  {#if $$slots.default}
     <div class="label">
-      <Label {disabled} for={inputId}>
-        <slot name="label" {checked} {disabled} />
+      <Label {disabled} for={id}>
+        <slot {checked} {disabled} />
       </Label>
     </div>
   {/if}

package/Checkbox.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        id?: string | undefined;
     };
     events: {
         blur: FocusEvent;
@@ -30,7 +31,7 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        label: {
+        default: {
             checked: boolean;
             disabled: boolean;
         };

package/Dropdown.svelte

@@ -0,0 +1,241 @@
+<script>import { computePosition, flip, offset, shift, autoUpdate } from "@floating-ui/dom";
+import { createEventDispatcher, onMount, tick } from "svelte";
+import { v4 as uuid } from "uuid";
+import { clickOutside } from "./actions/clickOutside";
+const popupId = uuid();
+export let composed = false;
+export let disabled = false;
+export let open = false;
+export let stayOpenOnClickAway = false;
+let dropdownRef;
+let popupRef;
+let popupPosition = {
+  x: void 0,
+  y: void 0
+};
+const dispatch = createEventDispatcher();
+const raiseOpen = (open2) => {
+  dispatch("open", { open: open2 });
+};
+$: {
+  raiseOpen(open);
+}
+let mounted = false;
+onMount(() => {
+  mounted = true;
+  const cleanup = autoUpdate(dropdownRef, popupRef, async () => {
+    const { x, y } = await computePosition(dropdownRef, popupRef, {
+      placement: "bottom-end",
+      middleware: [offset({ mainAxis: 2 }), flip(), shift({ padding: 0 })]
+    });
+    if (open) {
+      popupPosition = { x, y };
+    }
+  });
+  return cleanup;
+});
+const onClick = (event) => {
+  if (!disabled && mounted) {
+    const targetNode = event.target;
+    const withinPopup = popupRef?.contains(targetNode);
+    if (!withinPopup) {
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+};
+const onKeydown = (event) => {
+  if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+    switch (event.key) {
+      case "Escape":
+        open = false;
+        event.preventDefault();
+        return false;
+    }
+  }
+};
+const onClickOutside = (event) => {
+  if (!stayOpenOnClickAway) {
+    open = false;
+  }
+};
+</script>
+
+<div
+  bind:this={dropdownRef}
+  aria-controls={popupId}
+  aria-haspopup={true}
+  aria-expanded={open}
+  class="sterling-dropdown"
+  class:composed
+  class:disabled
+  role="combobox"
+  tabindex="0"
+  use:clickOutside
+  on:blur
+  on:click
+  on:click={onClick}
+  on:copy
+  on:cut
+  on:dblclick
+  on:focus
+  on:focusin
+  on:focusout
+  on:keydown
+  on:keydown={onKeydown}
+  on:keypress
+  on:keyup
+  on:mousedown
+  on:mouseenter
+  on:mouseleave
+  on:mousemove
+  on:mouseover
+  on:mouseout
+  on:mouseup
+  on:wheel
+  on:paste
+  on:click_outside={onClickOutside}
+  {...$$restProps}
+>
+  <slot name="value" {composed} {disabled} {open} />
+  <slot name="button" {composed} {disabled} {open}>
+    <div class="button">
+      <div class="chevron" />
+    </div>
+  </slot>
+
+  <div
+    bind:this={popupRef}
+    class="popup"
+    class:open
+    id={popupId}
+    style="left:{popupPosition.x}px; top:{popupPosition.y}px"
+  >
+    <slot {composed} {disabled} {open} />
+  </div>
+</div>
+
+<style>
+  .sterling-dropdown {
+    align-content: stretch;
+    align-items: stretch;
+    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);
+    display: grid;
+    grid-template-columns: 1fr 2em;
+    grid-template-rows: auto;
+    outline: none;
+    padding: 0;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-dropdown:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-dropdown: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);
+  }
+
+  .sterling-dropdown.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+    cursor: not-allowed;
+    outline: none;
+  }
+
+  .sterling-dropdown.composed,
+  .sterling-dropdown.composed:hover,
+  .sterling-dropdown.composed.focus,
+  .sterling-dropdown.composed.disabled {
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  .button {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    cursor: pointer;
+  }
+
+  .chevron {
+    display: block;
+    position: relative;
+    border: none;
+    background: none;
+    margin: 0;
+    height: 100%;
+    width: 32px;
+  }
+
+  .chevron::after {
+    position: absolute;
+    content: '';
+    top: 50%;
+    left: 50%;
+    width: 7px;
+    height: 7px;
+    border-right: 3px solid currentColor;
+    border-top: 3px solid currentColor;
+    /* 
+			The chevron is a right triangle, rotated to face down.
+			It should be moved up so it is centered vertically after rotation.
+			The amount to move is the hypotenuse of the right triangle of the chevron.
+		    For a right triangle with equal a and b where c=1
+			a^2 + b^2 = c^2 	
+		    a^2 + a^2 = c^2 
+		    2a^2 = c^2
+			2a^2 = 1
+			a^2 = 0.5
+			a = sqrt(0.5)
+			a = 0.707
+		*/
+    transform: translate(-50%, calc(-50% / 0.707)) rotate(135deg);
+    transform-origin: 50% 50%;
+  }
+
+  .popup {
+    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-sizing: border-box;
+    color: var(--stsv-Common__color);
+    display: none;
+    overflow: visible;
+    outline: none;
+    position: absolute;
+    box-shadow: rgba(0, 0, 0, 0.4) 2px 2px 4px -1px;
+    width: fit-content;
+    height: fit-content;
+    z-index: 1;
+  }
+
+  .popup.open {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-dropdown {
+      transition: none;
+    }
+  }
+</style>

package/Dropdown.svelte.d.ts

@@ -0,0 +1,58 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        composed?: boolean | undefined;
+        disabled?: boolean | undefined;
+        open?: boolean | undefined;
+        stayOpenOnClickAway?: boolean | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        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;
+        wheel: WheelEvent;
+        paste: ClipboardEvent;
+        open: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        value: {
+            composed: boolean;
+            disabled: boolean;
+            open: boolean;
+        };
+        button: {
+            composed: boolean;
+            disabled: boolean;
+            open: boolean;
+        };
+        default: {
+            composed: boolean;
+            disabled: boolean;
+            open: boolean;
+        };
+    };
+};
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
+export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
+}
+export {};

package/Field.svelte

@@ -0,0 +1,257 @@
+<script>import { createKeyborg } from "keyborg";
+import { onMount } from "svelte";
+import Tooltip from "./Tooltip.svelte";
+export let forwardClick = false;
+let htmlFor = void 0;
+export { htmlFor as for };
+export let label = void 0;
+export let message = void 0;
+export let required = false;
+export let requiredTip = "This field is required";
+export let status = "none";
+let fieldRef;
+let targetDisabled = false;
+let targetRef = null;
+const findTarget = () => {
+  let candidate = null;
+  if (htmlFor) {
+    candidate = fieldRef?.querySelector(`[id="${htmlFor}"]`);
+  }
+  if (!candidate) {
+    candidate = fieldRef?.querySelector(
+      'a[href], audio[controls], button, details, div[contenteditable], form, input, select, textarea, video[controls], [tabindex]:not([tabindex="-1"])'
+    );
+  }
+  targetRef = candidate;
+};
+const isElementDisabled = (element) => {
+  if (element) {
+    return element.getAttribute("aria-disabled") === "true" || element?.matches(":disabled") || element?.disabled === true || element?.classList.contains("disabled");
+  }
+  return false;
+};
+$:
+  $$slots.default, fieldRef, htmlFor, findTarget();
+$: {
+  targetDisabled = isElementDisabled(targetRef);
+}
+const mutationCallback = (mutations) => {
+  let disabled = void 0;
+  for (let i = 0; i < mutations.length; i++) {
+    const mutation = mutations[i];
+    if (mutation.type === "attributes") {
+      if (mutation.attributeName === "aria-disabled" || mutation.attributeName === "disabled" || mutation.attributeName === "class") {
+        if (isElementDisabled(targetRef)) {
+          disabled = true;
+          break;
+        }
+        disabled = false;
+      }
+    }
+  }
+  if (disabled !== void 0) {
+    targetDisabled = disabled;
+  }
+};
+let mutationObserver = new MutationObserver(mutationCallback);
+$: {
+  mutationObserver.disconnect();
+  if (targetRef) {
+    mutationObserver.observe(targetRef, {
+      attributes: true
+    });
+  }
+}
+let keyborg = createKeyborg(window);
+let usingKeyboard = keyborg.isNavigatingWithKeyboard();
+const keyborgHandler = (value) => {
+  usingKeyboard = value;
+};
+onMount(() => {
+  keyborg.subscribe(keyborgHandler);
+  return () => {
+    keyborg.unsubscribe(keyborgHandler);
+  };
+});
+const onClick = () => {
+  if (forwardClick) {
+    targetRef?.click();
+  }
+};
+</script>
+
+<label
+  aria-disabled={targetDisabled}
+  bind:this={fieldRef}
+  class="sterling-field"
+  class:disabled={targetDisabled}
+  class:using-keyboard={usingKeyboard}
+  for={htmlFor}
+  on:blur
+  on:click
+  on:click={onClick}
+  on:copy
+  on:cut
+  on:dblclick
+  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}
+>
+  <slot name="label" disabled={targetDisabled} for={htmlFor} {label} {required}>
+    <div class="label-text">
+      {label}
+    </div>
+  </slot>
+  <slot />
+  {#if message}
+    <slot name="message" disabled={targetDisabled} {message} {required} {status}>
+      <div
+        class="message"
+        class:info={status === 'info'}
+        class:success={status === 'success'}
+        class:warning={status === 'warning'}
+        class:error={status === 'error'}
+      >
+        {message}
+      </div>
+    </slot>
+  {/if}
+  {#if required}
+    <slot name="required" {requiredTip}>
+      <Tooltip autoShow="hover">
+        <span class="required-tip" slot="tip">{requiredTip}</span>
+        <div class="required">*</div>
+      </Tooltip>
+    </slot>
+  {/if}
+</label>
+
+<style>
+  .sterling-field {
+    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);
+    box-sizing: border-box;
+    color: var(--stsv-Input__color);
+    display: flex;
+    flex-direction: column;
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: relative;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .sterling-field:hover {
+    background-color: var(--stsv-Input__background-color--hover);
+    border-color: var(--stsv-Input__border-color--hover);
+    color: var(--stsv-Input__color--hover);
+  }
+
+  .sterling-field.using-keyboard:focus-within {
+    border-color: var(--stsv-Common__border-color--focus);
+    color: var(--stsv-Common__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-field.disabled {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .label-text {
+    color: var(--stsv-Display__color);
+    font-size: 0.8em;
+    margin: 0.5em 0.7em 0.2em 0.2em;
+  }
+
+  .label-text:empty {
+    margin: 0;
+  }
+
+  .sterling-field.disabled .label-text {
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .message {
+    font-size: 0.8em;
+    background-color: var(--stsv-Display__background-color);
+    color: var(--stsv-Display__color);
+    padding: 0.5em;
+    transition: background-color 250ms, color 250ms, border-color 250ms;
+  }
+
+  .message.info {
+    background-color: var(--stsv-Info__background-color);
+    border-color: var(--stsv-Info__border-color);
+    color: var(--stsv-Info__color);
+  }
+
+  .message.success {
+    background-color: var(--stsv-Success__background-color);
+    border-color: var(--stsv-Success__border-color);
+    color: var(--stsv-Success__color);
+  }
+
+  .message.warning {
+    background-color: var(--stsv-Warning__background-color);
+    border-color: var(--stsv-Warning__border-color);
+    color: var(--stsv-Warning__color);
+  }
+
+  .message.error {
+    background-color: var(--stsv-Error__background-color);
+    border-color: var(--stsv__Error-color);
+    color: var(--stsv-Error__color);
+  }
+
+  .sterling-field.disabled .message {
+    background-color: var(--stsv-Common__background-color--disabled);
+    border-color: var(--stsv--Common__border-color--disabled);
+    color: var(--stsv-Common__color--disabled);
+  }
+
+  .required {
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    width: 1em;
+    height: 1em;
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .required-tip {
+    display: block;
+    padding: 4px;
+  }
+
+  @media (prefers-reduced-motion) {
+    .sterling-field,
+    .message {
+      transition: none;
+    }
+  }
+</style>

package/Field.svelte.d.ts

@@ -0,0 +1,63 @@
+import { SvelteComponentTyped } from "svelte";
+import type { FieldStatus } from './Field.types';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        forwardClick?: boolean | undefined;
+        for?: string | undefined;
+        label?: string | undefined;
+        message?: string | undefined;
+        required?: boolean | undefined;
+        requiredTip?: string | undefined;
+        status?: FieldStatus | undefined;
+    };
+    events: {
+        blur: FocusEvent;
+        click: MouseEvent;
+        copy: ClipboardEvent;
+        cut: ClipboardEvent;
+        dblclick: MouseEvent;
+        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: {
+        label: {
+            disabled: boolean;
+            for: string | undefined;
+            label: string | undefined;
+            required: boolean;
+        };
+        default: {};
+        message: {
+            disabled: boolean;
+            message: string | undefined;
+            required: boolean;
+            status: FieldStatus;
+        };
+        required: {
+            requiredTip: string;
+        };
+    };
+};
+export type FieldProps = typeof __propDef.props;
+export type FieldEvents = typeof __propDef.events;
+export type FieldSlots = typeof __propDef.slots;
+export default class Field extends SvelteComponentTyped<FieldProps, FieldEvents, FieldSlots> {
+}
+export {};

package/Field.types.d.ts

@@ -0,0 +1 @@
+export type FieldStatus = 'none' | 'info' | 'success' | 'warning' | 'error';

package/Field.types.js

@@ -0,0 +1 @@
+export {};