@sveltia/ui 0.1.1 → 0.1.3

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;

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

@@ -5,21 +5,11 @@
  * @see https://w3c.github.io/aria/#switch
  * @see https://w3c.github.io/aria-practices/#switch
  */
-export default class Switch extends SvelteComponentTyped<{
-    class?: string;
-    label?: string;
-    disabled?: boolean;
-    checked?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Switch {
 }
 export type SwitchProps = typeof __propDef.props;
 export type SwitchEvents = typeof __propDef.events;
 export type SwitchSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         class?: string;

package/package/components/core/tab-panel.svelte.d.ts

@@ -5,19 +5,11 @@
  * @see https://w3c.github.io/aria/#tabpanel
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class TabPanel extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class TabPanel {
 }
 export type TabPanelProps = typeof __propDef.props;
 export type TabPanelEvents = typeof __propDef.events;
 export type TabPanelSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -5,19 +5,11 @@
  * @see https://w3c.github.io/aria/#tab
  * @see https://w3c.github.io/aria-practices/#tabpanel
  */
-export default class Tab extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Tab {
 }
 export type TabProps = typeof __propDef.props;
 export type TabEvents = typeof __propDef.events;
 export type TabSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/core/text-area.svelte.d.ts

@@ -2,40 +2,26 @@
 /** @typedef {typeof __propDef.events}  TextAreaEvents */
 /** @typedef {typeof __propDef.slots}  TextAreaSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextArea extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLTextAreaElement;
-    value?: string;
-    autoResize?: boolean;
-}, {
-    click: MouseEvent;
-    input: Event;
-    keypress: KeyboardEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class TextArea {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLTextAreaElement);
-    get element(): HTMLTextAreaElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: any);
+    get value(): any;
     /**accessor*/
-    set autoResize(arg: boolean);
-    get autoResize(): boolean;
+    set autoResize(arg: any);
+    get autoResize(): any;
 }
 export type TextAreaProps = typeof __propDef.props;
 export type TextAreaEvents = typeof __propDef.events;
 export type TextAreaSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -2,50 +2,32 @@
 /** @typedef {typeof __propDef.events}  TextInputEvents */
 /** @typedef {typeof __propDef.slots}  TextInputSlots */
 /** @see https://w3c.github.io/aria/#textbox */
-export default class TextInput extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    name?: string;
-    element?: HTMLInputElement;
-    role?: "textbox" | "searchbox" | "combobox" | "spinbutton";
-    disabled?: boolean;
-    value?: string;
-    readOnly?: boolean;
-}, {
-    input: Event;
-    keydown: KeyboardEvent;
-    keyup: KeyboardEvent;
-    keypress: KeyboardEvent;
-    change: Event;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class TextInput {
     /**accessor*/
-    set class(arg: string);
-    get class(): string;
+    set class(arg: any);
+    get class(): any;
     /**accessor*/
-    set element(arg: HTMLInputElement);
-    get element(): HTMLInputElement;
+    set element(arg: any);
+    get element(): any;
     /**accessor*/
-    set role(arg: "textbox" | "searchbox" | "combobox" | "spinbutton");
-    get role(): "textbox" | "searchbox" | "combobox" | "spinbutton";
+    set role(arg: any);
+    get role(): any;
     /**accessor*/
-    set readOnly(arg: boolean);
-    get readOnly(): boolean;
+    set readOnly(arg: any);
+    get readOnly(): any;
     /**accessor*/
-    set disabled(arg: boolean);
-    get disabled(): boolean;
+    set disabled(arg: any);
+    get disabled(): any;
     /**accessor*/
-    set name(arg: string);
-    get name(): string;
+    set name(arg: any);
+    get name(): any;
     /**accessor*/
-    set value(arg: string);
-    get value(): string;
+    set value(arg: any);
+    get value(): any;
 }
 export type TextInputProps = typeof __propDef.props;
 export type TextInputEvents = typeof __propDef.events;
 export type TextInputSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -5,20 +5,11 @@
  * @see https://w3c.github.io/aria/#toolbar
  * @see https://w3c.github.io/aria-practices/#toolbar
  */
-export default class Toolbar extends SvelteComponentTyped<{
-    [x: string]: any;
-    class?: string;
-    orientation?: "vertical" | "horizontal";
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class Toolbar {
 }
 export type ToolbarProps = typeof __propDef.props;
 export type ToolbarEvents = typeof __propDef.events;
 export type ToolbarSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/editor/markdown.svelte.d.ts

@@ -1,17 +1,11 @@
 /** @typedef {typeof __propDef.props}  MarkdownProps */
 /** @typedef {typeof __propDef.events}  MarkdownEvents */
 /** @typedef {typeof __propDef.slots}  MarkdownSlots */
-export default class Markdown extends SvelteComponentTyped<{
-    disabled?: boolean;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
+export default class Markdown {
 }
 export type MarkdownProps = typeof __propDef.props;
 export type MarkdownEvents = typeof __propDef.events;
 export type MarkdownSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         disabled?: boolean;

package/package/components/helpers/popup.d.ts

@@ -11,13 +11,8 @@ declare class Popup {
      * @param {PopupPosition} position
      */
     constructor(anchorElement: HTMLElement, popupElement: HTMLElement, position: PopupPosition);
-    open: import("svelte/store").Writable<boolean>;
-    style: import("svelte/store").Writable<{
-        inset: any;
-        zIndex: any;
-        width: any;
-        height: any;
-    }>;
+    open: any;
+    style: any;
     observer: IntersectionObserver;
     anchorElement: HTMLElement;
     popupElement: HTMLElement;

package/package/components/helpers/popup.js

@@ -104,7 +104,7 @@ class Popup {
     this.open.subscribe((open) => {
       if (open) {
         this.checkPosition();
-      } else {
+      } else if (this.anchorElement.getAttribute('aria-expanded') === 'true') {
         this.anchorElement.focus();
       }
 

package/package/components/util/app-shell.svelte.d.ts

@@ -6,21 +6,11 @@
  * dark/light mode switching. This component has to be placed directly under `<body>` (or
  * `<div style="display:contents">` in a SvelteKit app).
  */
-export default class AppShell extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    dragover: DragEvent;
-    drop: DragEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
+export default class AppShell {
 }
 export type AppShellProps = typeof __propDef.props;
 export type AppShellEvents = typeof __propDef.events;
 export type AppShellSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: never;

package/package/components/util/popup.svelte

@@ -43,25 +43,33 @@
     }
   }
 
+  const openDialog = () => {
+    window.clearTimeout(closeDialogTimer);
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    showContent = true;
+    dialog.showModal();
+
+    window.requestAnimationFrame(() => {
+      showDialog = true;
+    });
+  };
+
+  const closeDialog = () => {
+    showDialog = false;
+
+    closeDialogTimer = window.setTimeout(() => {
+      showContent = false;
+      dialog?.close();
+      dialog?.remove();
+    }, 500);
+  };
+
   $: {
     if (dialog) {
       if ($open) {
-        window.clearTimeout(closeDialogTimer);
-        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
-        showContent = true;
-        dialog.showModal();
-
-        window.requestAnimationFrame(() => {
-          showDialog = true;
-        });
+        openDialog();
       } else {
-        showDialog = false;
-
-        closeDialogTimer = window.setTimeout(() => {
-          showContent = false;
-          dialog?.close();
-          dialog?.remove();
-        }, 500);
+        closeDialog();
       }
     }
   }
@@ -77,7 +85,7 @@
   });
 </script>
 
-<dialog class="sui popup" bind:this={dialog} class:open={showDialog}>
+<dialog class="sui popup" bind:this={dialog} class:open={showDialog} {...$$restProps}>
   <!-- Prevent the first item in the slot, e.g. a menu item, from being focused by adding `tabindex`
     to the container -->
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->