@sveltia/ui 0.1.2 → 0.1.4

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

@@ -2,26 +2,11 @@
 /** @typedef {typeof __propDef.events}  OptionEvents */
 /** @typedef {typeof __propDef.slots}  OptionSlots */
 /** @see https://w3c.github.io/aria/#option */
-export default class Option extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    selected?: boolean;
-}, {
-    click: MouseEvent;
-    dragover: DragEvent;
-    dragleave: DragEvent;
-    dragend: DragEvent;
-    drop: DragEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Option {
 }
 export type OptionProps = typeof __propDef.props;
 export type OptionEvents = typeof __propDef.events;
 export type OptionSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -29,16 +14,22 @@ declare const __propDef: {
         selected?: boolean;
     };
     events: {
-        click: MouseEvent;
-        dragover: DragEvent;
-        dragleave: DragEvent;
-        dragend: DragEvent;
-        drop: DragEvent;
+        click: any;
+        dragover: any;
+        dragleave: any;
+        dragend: any;
+        drop: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

package/package/components/core/password-input.svelte

@@ -5,6 +5,7 @@
 <script>
   import { _ } from 'svelte-i18n';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
   import TextInput from './text-input.svelte';
 
   /**
@@ -44,12 +45,16 @@
   <Button
     class="iconic"
     pressed={passwordVisible}
-    iconLabel={$_('sui.password_input.show_password')}
-    iconName={passwordVisible ? 'visibility_off' : 'visibility'}
     on:click={() => {
       passwordVisible = !passwordVisible;
     }}
-  />
+  >
+    <Icon
+      slot="start-icon"
+      name={passwordVisible ? 'visibility_off' : 'visibility'}
+      label={$_('sui.password_input.show_password')}
+    />
+  </Button>
 </div>
 
 <style>.password-input {

package/package/components/core/password-input.svelte.d.ts

@@ -2,22 +2,11 @@
 /** @typedef {typeof __propDef.events}  PasswordInputEvents */
 /** @typedef {typeof __propDef.slots}  PasswordInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class PasswordInput extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    value?: string;
-}, {
-    input: Event;
-    keypress: KeyboardEvent;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class PasswordInput {
 }
 export type PasswordInputProps = typeof __propDef.props;
 export type PasswordInputEvents = typeof __propDef.events;
 export type PasswordInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
@@ -25,9 +14,9 @@ declare const __propDef: {
         value?: (string | undefined);
     };
     events: {
-        input: Event;
-        keypress: KeyboardEvent;
-        change: Event;
+        input: any;
+        keypress: any;
+        change: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -6,6 +6,7 @@
 <script>
   import { getRandomId } from '../helpers/util';
   import Button from './button.svelte';
+  import Icon from './icon.svelte';
 
   /**
    * CSS class name on the button.
@@ -44,7 +45,6 @@
 >
   <Button
     {id}
-    iconName="circle"
     role="radio"
     aria-checked={selected}
     aria-labelledby="{id}-label"
@@ -53,7 +53,9 @@
       event.preventDefault();
       selected = !selected;
     }}
-  />
+  >
+    <Icon slot="start-icon" name="circle" />
+  </Button>
   <label id="{id}-label">
     <slot />
   </label>

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

@@ -5,21 +5,11 @@
  * @see https://w3c.github.io/aria/#radio
  * @see https://w3c.github.io/aria-practices/#radiobutton
  */
-export default class RadioButton extends SvelteComponentTyped<{
-    class?: string;
-    name?: string;
-    value?: string;
-    selected?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class RadioButton {
 }
 export type RadioButtonProps = typeof __propDef.props;
 export type RadioButtonEvents = typeof __propDef.events;
 export type RadioButtonSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/row-group.svelte.d.ts

@@ -1,19 +1,11 @@
 /** @typedef {typeof __propDef.props}  RowGroupProps */
 /** @typedef {typeof __propDef.events}  RowGroupEvents */
 /** @typedef {typeof __propDef.slots}  RowGroupSlots */
-export default class RowGroup extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class RowGroup {
 }
 export type RowGroupProps = typeof __propDef.props;
 export type RowGroupEvents = typeof __propDef.events;
 export type RowGroupSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -1,21 +1,11 @@
 /** @typedef {typeof __propDef.props}  RowProps */
 /** @typedef {typeof __propDef.events}  RowEvents */
 /** @typedef {typeof __propDef.slots}  RowSlots */
-export default class Row extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Row {
 }
 export type RowProps = typeof __propDef.props;
 export type RowEvents = typeof __propDef.events;
 export type RowSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -47,8 +47,6 @@
   {#if value}
     <Button
       class="ternary iconic"
-      iconName="close"
-      iconLabel={$_('sui._.clear')}
       on:click={() => {
         value = '';
         input.element.focus();
@@ -58,7 +56,9 @@
           input.element.dispatchEvent(new KeyboardEvent('change'));
         });
       }}
-    />
+    >
+      <Icon slot="start-icon" name="close" label={$_('sui._.clear')} />
+    </Button>
   {/if}
 </div>
 

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

@@ -2,45 +2,31 @@
 /** @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;
-    class?: string;
-    focus?: () => void;
-    value?: string;
-}, {
-    input: Event;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-    get focus(): () => void;
+export default class SearchBar {
+    get focus(): any;
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: any);
+    get value(): any;
 }
 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;
-        class?: string;
         focus?: () => void;
+        class?: string;
         value?: string;
     };
     events: {
-        input: Event;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-        change: Event;
+        input: any;
+        keydown: any;
+        keyup: any;
+        keypress: any;
+        change: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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

@@ -25,5 +25,7 @@
   {...$$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

@@ -6,22 +6,11 @@
  * @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>;
-}, {
-    default: {};
-}> {
+export default class SelectButton {
 }
 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;
@@ -29,12 +18,18 @@ declare const __propDef: {
         selected?: boolean;
     };
     events: {
-        click: MouseEvent;
+        click: any;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
+        'start-icon': {
+            slot: string;
+        };
         default: {};
+        'end-icon': {
+            slot: string;
+        };
     };
 };
 export {};

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

@@ -2,17 +2,11 @@
 /** @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 default class Separator {
 }
 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;

package/package/components/core/slider.svelte

@@ -0,0 +1,270 @@
+<!--
+  @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-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: 10px;
+}</style>

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

@@ -0,0 +1,35 @@
+/** @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 {
+}
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+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.d.ts

@@ -1,17 +1,11 @@
 /** @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 default class Spacer {
 }
 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;