@sveltia/ui 0.2.0 → 0.2.2

package/package/components/core/search-bar.svelte

@@ -0,0 +1,91 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#search
+-->
+<svelte:options accessors={true} />
+
+<script>
+  import { _ } from 'svelte-i18n';
+  import Button from './button.svelte';
+  import Icon from './icon.svelte';
+  import TextInput from './text-input.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {_SvelteComponent} */
+  let input;
+
+  export let value = '';
+
+  /**
+   * Move focus to the `<input>` element.
+   */
+  export const focus = () => {
+    input?.element?.focus();
+  };
+</script>
+
+<div class="sui search-bar {className}" role="search">
+  <Icon name="search" />
+  <TextInput
+    bind:this={input}
+    bind:value
+    role="searchbox"
+    {...$$restProps}
+    on:input
+    on:keydown
+    on:keyup
+    on:keypress
+    on:change
+  />
+  {#if value}
+    <Button
+      class="iconic"
+      on:click={() => {
+        value = '';
+        input.element.focus();
+        window.requestIdleCallback(() => {
+          input.element.dispatchEvent(new KeyboardEvent('input'));
+          input.element.dispatchEvent(new KeyboardEvent('keypress'));
+          input.element.dispatchEvent(new KeyboardEvent('change'));
+        });
+      }}
+    >
+      <Icon slot="start-icon" name="close" label={$_('_sui._.clear')} />
+    </Button>
+  {/if}
+</div>
+
+<style>[role=search] {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+[role=search] :global(.icon) {
+  font-size: var(--font-size--xx-large);
+  opacity: 0.5;
+}
+[role=search] > :global(.icon) {
+  position: absolute;
+  inset: 8px auto auto 8px;
+  z-index: 2;
+}
+[role=search] > :global(button) {
+  position: absolute;
+  inset: 0 0 auto auto;
+  z-index: 2;
+  height: var(--button--medium--height);
+}
+[role=search] :global(.label) {
+  inset: 0 36px;
+}
+[role=search] :global(input) {
+  padding: 0 36px !important;
+  width: 100%;
+}</style>

package/package/components/core/search-bar.svelte.d.ts

@@ -0,0 +1,49 @@
+/** @typedef {typeof __propDef.props}  SearchBarProps */
+/** @typedef {typeof __propDef.events}  SearchBarEvents */
+/** @typedef {typeof __propDef.slots}  SearchBarSlots */
+/** @see https://w3c.github.io/aria/#search */
+export default class SearchBar extends SvelteComponentTyped<{
+    [x: string]: any;
+    focus?: () => void;
+    class?: string;
+    value?: string;
+}, {
+    input: Event;
+    keydown: KeyboardEvent;
+    keyup: KeyboardEvent;
+    keypress: KeyboardEvent;
+    change: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+    get focus(): () => void;
+    /**accessor*/
+    set class(arg: string);
+    get class(): string;
+    /**accessor*/
+    set value(arg: string);
+    get value(): string;
+}
+export type SearchBarProps = typeof __propDef.props;
+export type SearchBarEvents = typeof __propDef.events;
+export type SearchBarSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        focus?: () => void;
+        class?: string;
+        value?: string;
+    };
+    events: {
+        input: Event;
+        keydown: KeyboardEvent;
+        keyup: KeyboardEvent;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/select-button.svelte

@@ -0,0 +1,31 @@
+<!--
+  @component
+  A variant of `<RadioButton>`, looking like a normal button.
+  @see https://w3c.github.io/aria/#radio
+  @see https://w3c.github.io/aria-practices/#radiobutton
+-->
+<script>
+  import Button from './button.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let selected = false;
+</script>
+
+<Button
+  class="sui select-button {className}"
+  role="radio"
+  aria-checked={selected}
+  {...$$restProps}
+  on:click
+>
+  <slot name="start-icon" slot="start-icon" />
+  <slot />
+  <slot name="end-icon" slot="end-icon" />
+</Button>

package/package/components/core/select-button.svelte.d.ts

@@ -0,0 +1,52 @@
+/** @typedef {typeof __propDef.props}  SelectButtonProps */
+/** @typedef {typeof __propDef.events}  SelectButtonEvents */
+/** @typedef {typeof __propDef.slots}  SelectButtonSlots */
+/**
+ * A variant of `<RadioButton>`, looking like a normal button.
+ * @see https://w3c.github.io/aria/#radio
+ * @see https://w3c.github.io/aria-practices/#radiobutton
+ */
+export default class SelectButton extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
+}
+export type SelectButtonProps = typeof __propDef.props;
+export type SelectButtonEvents = typeof __propDef.events;
+export type SelectButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {
+            slot: string;
+        };
+        default: {};
+        'end-icon': {
+            slot: string;
+        };
+    };
+};
+export {};

package/package/components/core/separator.svelte

@@ -0,0 +1,28 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#separator
+-->
+<script>
+  export let orientation = 'horizontal';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+</script>
+
+<div role="separator" class="sui separator {className}" aria-orientation={orientation} />
+
+<style>.separator {
+  flex: none;
+  background-color: var(--secondary-border-color);
+}
+.separator[aria-orientation=horizontal] {
+  height: 1px;
+}
+.separator[aria-orientation=vertical] {
+  width: 1px;
+}</style>

package/package/components/core/separator.svelte.d.ts

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  SeparatorProps */
+/** @typedef {typeof __propDef.events}  SeparatorEvents */
+/** @typedef {typeof __propDef.slots}  SeparatorSlots */
+/** @see https://w3c.github.io/aria/#separator */
+export default class Separator extends SvelteComponentTyped<{
+    class?: string;
+    orientation?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SeparatorProps = typeof __propDef.props;
+export type SeparatorEvents = typeof __propDef.events;
+export type SeparatorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        orientation?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/slider.svelte

@@ -0,0 +1,271 @@
+<!--
+  @component
+  @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+  @see https://w3c.github.io/aria/#slider
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+  @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+-->
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let value = 0;
+  export let sliderLabel = '';
+  export let values = undefined;
+  export let sliderLabels = [];
+  export let min = 0;
+  export let max = 100;
+  export let step = 1;
+  export let optionLabels = [];
+
+  $: multiThumb = !!values;
+
+  const dispatch = createEventDispatcher();
+  /** @type {(HTMLElement|undefined)} */
+  let base = undefined;
+  let barWidth = 0;
+  let positionList = [];
+  let valueList = [];
+  let startX = 0;
+  let startScreenX = 0;
+  const sliderPositions = [0, 0];
+  let dragging = false;
+  let targetValueIndex = 0;
+
+  const dragSlider = (diff) => {
+    if (diff >= 0 && diff <= barWidth) {
+      const fromIndex = positionList.findLastIndex((s) => s <= diff);
+      const toIndex = positionList.findIndex((s) => diff <= s);
+
+      const index =
+        Math.abs(positionList[fromIndex] - diff) < Math.abs(positionList[toIndex] - diff)
+          ? fromIndex
+          : toIndex;
+
+      if (
+        sliderPositions[targetValueIndex] === positionList[index] ||
+        (multiThumb &&
+          ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
+            (targetValueIndex === 1 && sliderPositions[0] >= positionList[index])))
+      ) {
+        return;
+      }
+
+      sliderPositions[targetValueIndex] = positionList[index];
+
+      if (multiThumb) {
+        values[targetValueIndex] = valueList[index];
+        dispatch('change', { values });
+      } else {
+        value = valueList[index];
+        dispatch('change', { value });
+      }
+    }
+  };
+
+  const onKeyDown = (event, valueIndex = 0) => {
+    const { key, shiftKey, altKey, ctrlKey, metaKey } = event;
+
+    if (shiftKey || altKey || ctrlKey || metaKey) {
+      return;
+    }
+
+    let index = -1;
+
+    if (['ArrowDown', 'ArrowLeft'].includes(key)) {
+      if (value > min) {
+        index = valueList.indexOf(value) - 1;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (['ArrowUp', 'ArrowRight'].includes(key)) {
+      if (value < max) {
+        index = valueList.indexOf(value) + 1;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (index > -1) {
+      if (
+        multiThumb &&
+        ((targetValueIndex === 0 && sliderPositions[1] <= positionList[index]) ||
+          (targetValueIndex === 1 && sliderPositions[0] >= positionList[index]))
+      ) {
+        return;
+      }
+
+      sliderPositions[valueIndex] = positionList[index];
+
+      if (multiThumb) {
+        values[valueIndex] = valueList[index];
+        dispatch('change', { values });
+      } else {
+        value = valueList[index];
+        dispatch('change', { value });
+      }
+    }
+  };
+
+  const onMouseDown = (event, valueIndex = 0) => {
+    const { clientX, screenX } = event;
+
+    dragging = true;
+    startX = clientX - base.getBoundingClientRect().x;
+    startScreenX = screenX;
+    targetValueIndex = valueIndex;
+  };
+
+  const onMouseMove = (event) => {
+    if (dragging) {
+      dragSlider(startX + (event.screenX - startScreenX));
+    }
+  };
+
+  const onClick = (event) => {
+    if (!multiThumb && !dragging) {
+      dragSlider(event.layerX);
+    }
+
+    if (dragging) {
+      dragging = false;
+    }
+  };
+
+  onMount(() => {
+    barWidth = base.clientWidth;
+
+    const stepCount = (max - min) / step + 1;
+    const stepWidth = barWidth / (stepCount - 1);
+
+    valueList = new Array(stepCount).fill(0).map((_, index) => index * step + min, 10);
+    positionList = new Array(stepCount).fill(0).map((_, index) => index * stepWidth);
+
+    if (multiThumb) {
+      sliderPositions[0] = positionList[valueList.indexOf(values[0])];
+      sliderPositions[1] = positionList[valueList.indexOf(values[1])];
+    } else {
+      sliderPositions[0] = positionList[valueList.indexOf(value)];
+    }
+  });
+</script>
+
+<svelte:body
+  on:mousemove={onMouseMove}
+  on:click={() => {
+    dragging = false;
+  }}
+/>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="sui slider {className}" on:click|preventDefault|stopPropagation>
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <div
+    class="base"
+    bind:this={base}
+    on:click|preventDefault|stopPropagation={(event) => {
+      onClick(event);
+    }}
+  >
+    <div
+      class="bar"
+      style:left="{multiThumb ? sliderPositions[0] : 0}px"
+      style:width="{multiThumb ? sliderPositions[1] - sliderPositions[0] : sliderPositions[0]}px"
+    />
+    <div
+      role="slider"
+      tabindex="0"
+      aria-label={multiThumb ? sliderLabels[0] || '' : sliderLabel}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      style:left="{sliderPositions[0]}px"
+      on:mousedown={(event) => {
+        onMouseDown(event, 0);
+      }}
+      on:keydown={(event) => {
+        onKeyDown(event, 0);
+      }}
+    />
+    {#if multiThumb}
+      <div
+        role="slider"
+        tabindex="0"
+        aria-label={sliderLabels[1] || ''}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        style:left="{sliderPositions[1]}px"
+        on:mousedown={(event) => {
+          onMouseDown(event, 1);
+        }}
+        on:keydown={(event) => {
+          onKeyDown(event, 1);
+        }}
+      />
+    {/if}
+    {#if optionLabels.length}
+      {#each optionLabels as label, index}
+        <span
+          class="label"
+          role="presentation"
+          style:left="{(barWidth / (optionLabels.length - 1)) * index}px"
+        >
+          {label}
+        </span>
+      {/each}
+    {/if}
+  </div>
+</div>
+
+<style>.slider {
+  position: relative;
+  display: inline-block;
+  padding: 16px;
+}
+
+.base {
+  position: relative;
+  width: var(--slider-base-width, 200px);
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--control-border-color);
+}
+
+.bar {
+  position: absolute;
+  top: 0;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--primary-accent-color-lighter);
+}
+
+[role=slider] {
+  position: absolute;
+  top: 0;
+  border: 2px solid var(--primary-accent-color-lighter);
+  border-radius: 8px;
+  width: 16px;
+  height: 16px;
+  background-color: var(--primary-accent-color-foreground);
+  cursor: pointer;
+  transform: translate(-8px, -4px);
+}
+
+.label {
+  position: absolute;
+  top: 12px;
+  transform: translateX(-50%);
+  font-size: var(--font-size--x-small);
+}</style>

package/package/components/core/slider.svelte.d.ts

@@ -0,0 +1,51 @@
+/** @typedef {typeof __propDef.props}  SliderProps */
+/** @typedef {typeof __propDef.events}  SliderEvents */
+/** @typedef {typeof __propDef.slots}  SliderSlots */
+/**
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
+ * @see https://w3c.github.io/aria/#slider
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+ */
+export default class Slider extends SvelteComponentTyped<{
+    class?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    sliderLabel?: string;
+    values?: any;
+    sliderLabels?: any[];
+    optionLabels?: any[];
+}, {
+    click: MouseEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        value?: number;
+        min?: number;
+        max?: number;
+        step?: number;
+        sliderLabel?: string;
+        values?: any;
+        sliderLabels?: any[];
+        optionLabels?: any[];
+    };
+    events: {
+        click: MouseEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/spacer.svelte

@@ -0,0 +1,22 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {Boolean} */
+  export let flex = false;
+</script>
+
+<div class="sui spacer {className}" class:flex />
+
+<style>.spacer.flex {
+  flex: auto;
+}
+.spacer:not(.flex) {
+  width: 8px;
+  height: 8px;
+}</style>

package/package/components/core/spacer.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SpacerProps */
+/** @typedef {typeof __propDef.events}  SpacerEvents */
+/** @typedef {typeof __propDef.slots}  SpacerSlots */
+export default class Spacer extends SvelteComponentTyped<{
+    class?: string;
+    flex?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SpacerProps = typeof __propDef.props;
+export type SpacerEvents = typeof __propDef.events;
+export type SpacerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        class?: string;
+        flex?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};