@geoffcox/sterling-svelte 2.0.2 → 2.0.3

package/dist/Dropdown.svelte

@@ -0,0 +1,159 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import type { HTMLAttributes, KeyboardEventHandler, MouseEventHandler } from 'svelte/elements';
+  import { slide, type SlideParams, type TransitionConfig } from 'svelte/transition';
+  import { clickOutside } from './actions/clickOutside';
+  import { prefersReducedMotion } from './mediaQueries/prefersReducedMotion';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+  import Popover from './Popover.svelte';
+
+  const uuid = $props.id();
+
+  const popoverId = `Dropdown-Popover-${uuid}`;
+
+  type DeprecatedProps = {
+    /** @deprecated Use icon instead. */
+    button?: Snippet;
+    /** @deprecated Use icon instead. */
+    buttonIcon?: Snippet;
+  };
+
+  type Props = HTMLAttributes<HTMLDivElement> &
+    DeprecatedProps & {
+      disabled?: boolean | null | undefined;
+      open?: boolean | null | undefined;
+      stayOpenOnClickAway?: boolean | null | undefined;
+      onOpen?: (open: boolean | null | undefined) => void;
+      icon?: Snippet;
+      value?: string | Snippet;
+    };
+
+  let {
+    button,
+    buttonIcon,
+    class: _class,
+    children,
+    disabled = false,
+    icon,
+    open = $bindable(false),
+    onOpen,
+    stayOpenOnClickAway = false,
+    value,
+    ...rest
+  }: Props = $props();
+
+  icon = icon || buttonIcon || button;
+
+  // svelte-ignore non_reactive_update
+  let dropdownRef: HTMLDivElement | undefined = $state(undefined);
+
+  // svelte-ignore non_reactive_update
+  let popupContentRef: HTMLDivElement | undefined = $state(undefined);
+
+  // ----- Reactions ----- //
+
+  $effect(() => {
+    onOpen?.(open);
+  });
+
+  // ----- Methods ----- //
+
+  export const click = () => {
+    dropdownRef?.click();
+  };
+
+  export const blur = () => {
+    dropdownRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    dropdownRef?.focus(options);
+  };
+
+  const onClick: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (!disabled) {
+      open = !open;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    rest.onclick?.(event);
+  };
+
+  const onKeydown: KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (!event.altKey && !event.ctrlKey && !event.shiftKey) {
+      switch (event.key) {
+        case ' ':
+          open = !open;
+          event.preventDefault();
+          event.stopPropagation();
+        case 'Escape':
+          open = false;
+          event.preventDefault();
+          event.stopPropagation();
+      }
+    }
+
+    rest.onkeydown?.(event);
+  };
+
+  const onClickOutside = (event: MouseEvent) => {
+    if (!stayOpenOnClickAway) {
+      open = false;
+    }
+  };
+
+  // ----- Animation ----- //
+
+  const slideNoOp = (node: Element, params?: SlideParams): TransitionConfig => {
+    return { delay: 0, duration: 0 };
+  };
+
+  let slideMotion = $derived(!$prefersReducedMotion ? slide : slideNoOp);
+</script>
+
+<div
+  bind:this={dropdownRef}
+  aria-controls={popoverId}
+  aria-haspopup={true}
+  aria-expanded={open}
+  class={['sterling-dropdown', _class]}
+  class:disabled
+  class:open
+  class:using-keyboard={$usingKeyboard}
+  role="combobox"
+  tabindex="0"
+  use:clickOutside={{ ignoreOthers: [popupContentRef!], onclickoutside: onClickOutside }}
+  {...rest}
+  onclick={onClick}
+  onkeydown={onKeydown}
+>
+  <div class="value">
+    {#if value}
+      {#if typeof value === 'string'}
+        {value}
+      {:else}
+        {@render value()}
+      {/if}
+    {/if}
+  </div>
+  <div class="button icon">
+    {#if icon}
+      {@render icon()}
+    {:else}
+      <div class="chevron"></div>
+    {/if}
+  </div>
+
+  <Popover id={popoverId} reference={dropdownRef} open={!disabled && open} placement="bottom-start">
+    <div
+      class={['sterling-dropdown-popup-content', 'sterling-dropdown-content', _class]}
+      transition:slideMotion|global={{ duration: 200 }}
+      bind:this={popupContentRef}
+    >
+      {@render children?.()}
+    </div>
+  </Popover>
+</div>

package/dist/Dropdown.svelte.d.ts

@@ -0,0 +1,23 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type DeprecatedProps = {
+    /** @deprecated Use icon instead. */
+    button?: Snippet;
+    /** @deprecated Use icon instead. */
+    buttonIcon?: Snippet;
+};
+type Props = HTMLAttributes<HTMLDivElement> & DeprecatedProps & {
+    disabled?: boolean | null | undefined;
+    open?: boolean | null | undefined;
+    stayOpenOnClickAway?: boolean | null | undefined;
+    onOpen?: (open: boolean | null | undefined) => void;
+    icon?: Snippet;
+    value?: string | Snippet;
+};
+declare const Dropdown: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "open">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;

package/dist/Input.svelte

@@ -0,0 +1,80 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  const uuid = $props.id();
+
+  type Props = HTMLInputAttributes;
+
+  let {
+    id,
+    children,
+    class: _class,
+    disabled = false,
+    value = $bindable(undefined),
+    ...rest
+  }: Props = $props();
+
+  let inputRef: HTMLInputElement;
+
+  $effect(() => {
+    if (children && id === undefined) {
+      id = `Input-${uuid}`;
+    }
+  });
+
+  export const blur = () => {
+    inputRef?.blur();
+  };
+
+  export const click = () => {
+    inputRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    inputRef?.focus();
+  };
+
+  export const select = () => {
+    inputRef?.select();
+  };
+
+  export const setSelectionRange = (
+    start: number | null,
+    end: number | null,
+    direction?: 'forward' | 'backward' | 'none'
+  ) => {
+    inputRef?.setSelectionRange(start, end, direction);
+  };
+
+  export const setRangeText = (
+    replacement: string,
+    start?: number,
+    end?: number,
+    selectionMode?: SelectionMode
+  ) => {
+    if (start && end) {
+      inputRef?.setRangeText(replacement, start, end, selectionMode);
+    } else {
+      inputRef?.setRangeText(replacement);
+    }
+  };
+</script>
+
+{#if children}
+  <label class={['sterling-input-label', _class]} class:disabled for={id}>
+    {@render children()}
+  </label>
+{/if}
+<div class={['sterling-input', _class]} class:disabled class:using-keyboard={$usingKeyboard}>
+  <input
+    bind:this={inputRef}
+    class:using-keyboard={$usingKeyboard}
+    {disabled}
+    {id}
+    bind:value
+    {...rest}
+  />
+</div>

package/dist/Input.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+declare const Input: import("svelte").Component<HTMLInputAttributes, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+    select: () => void;
+    setSelectionRange: (start: number | null, end: number | null, direction?: "forward" | "backward" | "none") => void;
+    setRangeText: (replacement: string, start?: number, end?: number, selectionMode?: SelectionMode) => void;
+}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/Label.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const LABEL_STATUSES: string[];
+export declare const LABEL_VARIANTS: readonly ["regular", "container", "inline"];

package/dist/Label.constants.js

@@ -0,0 +1,2 @@
+export const LABEL_STATUSES = ['none', 'info', 'success', 'warning', 'danger'];
+export const LABEL_VARIANTS = ['regular', 'container', 'inline'];

package/dist/Label.svelte

@@ -0,0 +1,135 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import type { HTMLLabelAttributes, MouseEventHandler } from 'svelte/elements';
+  import Tooltip from './Tooltip.svelte';
+  import { usingKeyboard } from './mediaQueries/usingKeyboard';
+
+  type Props = HTMLLabelAttributes & {
+    forwardClick?: boolean | null;
+    message?: Snippet | string;
+    required?: boolean | null;
+    requiredIndicator?: Snippet | string;
+    requiredReason?: Snippet | string;
+    text?: Snippet | string;
+  };
+
+  let {
+    children,
+    class: _class,
+    for: _for,
+    forwardClick = false,
+    message,
+    required,
+    requiredIndicator = '*',
+    requiredReason,
+    text,
+    ...rest
+  }: Props = $props();
+
+  // ----- State ----- //
+
+  let labelRef: HTMLLabelElement | null = $state(null);
+  let targetRef: HTMLElement | null = $state(null);
+
+  const findTarget = () => {
+    let candidate: HTMLElement | null = null;
+    if (_for) {
+      candidate = labelRef?.querySelector<HTMLElement>(`[id="${_for}"]`) || null;
+    }
+    if (!candidate) {
+      candidate =
+        labelRef?.querySelector<HTMLElement>(
+          'a[href], ' +
+            'audio[controls], ' +
+            'button, ' +
+            'details, ' +
+            'div[contenteditable], ' +
+            'form, ' +
+            'input, ' +
+            'select, ' +
+            'textarea, ' +
+            'video[controls], ' +
+            '[tabindex]:not([tabindex="-1"])'
+        ) || null;
+    }
+
+    targetRef = candidate;
+  };
+
+  // ----- Methods ----- //
+
+  export const click = () => {
+    labelRef?.click();
+  };
+
+  export const blur = () => {
+    labelRef?.blur();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    labelRef?.focus(options);
+  };
+
+  // ----- Event Handlers ----- //
+
+  const onClick: MouseEventHandler<HTMLLabelElement> = (event) => {
+    if (forwardClick) {
+      targetRef?.click();
+    }
+    rest.onclick?.(event);
+  };
+</script>
+
+{#snippet stringOrSnippet(item?: string | Snippet)}
+  {#if item}
+    {#if typeof item === 'string'}
+      {item}
+    {:else}
+      {@render item()}
+    {/if}
+  {/if}
+{/snippet}
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<label
+  bind:this={labelRef}
+  class={['sterling-label', _class]}
+  class:using-keyboard={$usingKeyboard}
+  for={_for}
+  {...rest}
+  onclick={onClick}
+>
+  {#if text}
+    <div class="text">
+      {@render stringOrSnippet(text)}
+    </div>
+  {/if}
+  {#if children}
+    <div class="content">
+      {@render children()}
+    </div>
+  {/if}
+  {#if message}
+    <div class="message">
+      {@render stringOrSnippet(message)}
+    </div>
+  {/if}
+  {#if required && requiredIndicator && requiredReason}
+    <Tooltip>
+      <div class="required">
+        {@render stringOrSnippet(requiredIndicator)}
+      </div>
+      {#snippet tip()}
+        <div class="required-reason">
+          {@render stringOrSnippet(requiredReason)}
+        </div>
+      {/snippet}
+    </Tooltip>
+  {:else if required && requiredIndicator}
+    <div class="required">
+      {@render stringOrSnippet(requiredIndicator)}
+    </div>
+  {/if}
+</label>

package/dist/Label.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+type Props = HTMLLabelAttributes & {
+    forwardClick?: boolean | null;
+    message?: Snippet | string;
+    required?: boolean | null;
+    requiredIndicator?: Snippet | string;
+    requiredReason?: Snippet | string;
+    text?: Snippet | string;
+};
+declare const Label: import("svelte").Component<Props, {
+    click: () => void;
+    blur: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/Link.svelte

@@ -0,0 +1,31 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  type Props = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
+  };
+
+  let { children, class: _class, disabled, ...rest }: Props = $props();
+
+  let linkRef: HTMLAnchorElement;
+
+  export const blur = () => {
+    linkRef?.blur();
+  };
+
+  export const click = () => {
+    linkRef?.click();
+  };
+
+  export const focus = (options?: FocusOptions) => {
+    linkRef?.focus();
+  };
+</script>
+
+<a bind:this={linkRef} class={['sterling-link', _class]} class:disabled {...rest}>
+  {#if children}
+    {@render children()}
+  {/if}
+</a>

package/dist/Link.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+type Props = HTMLAnchorAttributes & {
+    disabled?: boolean | null;
+};
+declare const Link: import("svelte").Component<Props, {
+    blur: () => void;
+    click: () => void;
+    focus: (options?: FocusOptions) => void;
+}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/List.constants.d.ts

@@ -0,0 +1 @@
+export declare const LIST_CONTEXT_KEY = "sterlingList";

package/dist/List.constants.js

@@ -0,0 +1 @@
+export const LIST_CONTEXT_KEY = 'sterlingList';