@sveltia/ui 0.1.4 → 0.2.0

package/package/components/core/slider.svelte

@@ -1,270 +0,0 @@
-<!--
-  @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

@@ -1,35 +0,0 @@
-/** @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

@@ -1,22 +0,0 @@
-<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

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

package/package/components/core/switch.svelte

@@ -1,80 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#switch
-  @see https://w3c.github.io/aria-practices/#switch
--->
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  export let label = '';
-
-  export let checked = false;
-
-  export let disabled = false;
-</script>
-
-<label class="sui switch {className}" class:disabled>
-  <input type="checkbox" role="switch" bind:checked {disabled} />
-  <span />
-  {#if label}
-    {label}
-  {:else}
-    <slot />
-  {/if}
-</label>
-
-<style>label {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-label.disabled {
-  cursor: default;
-}
-
-input {
-  position: absolute;
-  left: -99999px;
-}
-
-input:checked + span {
-  background-color: var(--primary-accent-color);
-  border-color: transparent;
-}
-input:checked + span::before {
-  transform: translateX(22px);
-  background-color: var(--primary-accent-color-foreground);
-}
-
-input:disabled + span {
-  opacity: 0.4;
-}
-
-span {
-  position: relative;
-  width: 42px;
-  height: 20px;
-  padding: 2px;
-  display: inline-block;
-  border-radius: 16px;
-  background-color: var(--control-border-color);
-  transition: all 200ms;
-}
-span::before {
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  border-radius: 16px;
-  background-color: var(--primary-accent-color-foreground);
-  transition: all 200ms;
-  content: "";
-}</style>

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  SwitchProps */
-/** @typedef {typeof __propDef.events}  SwitchEvents */
-/** @typedef {typeof __propDef.slots}  SwitchSlots */
-/**
- * @see https://w3c.github.io/aria/#switch
- * @see https://w3c.github.io/aria-practices/#switch
- */
-export default class Switch {
-}
-export type SwitchProps = typeof __propDef.props;
-export type SwitchEvents = typeof __propDef.events;
-export type SwitchSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        label?: string;
-        class?: string;
-        disabled?: boolean;
-        checked?: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

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

@@ -1,23 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#tabpanel
-  @see https://w3c.github.io/aria-practices/#tabpanel
--->
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-</script>
-
-<div class="sui tabpanel {className}" role="tabpanel" {...$$restProps}>
-  <slot />
-</div>
-
-<style>.tabpanel[aria-hidden=true], .tabpanel:not([aria-hidden]) {
-  display: none;
-}</style>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  TabPanelProps */
-/** @typedef {typeof __propDef.events}  TabPanelEvents */
-/** @typedef {typeof __propDef.slots}  TabPanelSlots */
-/**
- * @see https://w3c.github.io/aria/#tabpanel
- * @see https://w3c.github.io/aria-practices/#tabpanel
- */
-export default class TabPanel {
-}
-export type TabPanelProps = typeof __propDef.props;
-export type TabPanelEvents = typeof __propDef.events;
-export type TabPanelSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/tab.svelte

@@ -1,22 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#tab
-  @see https://w3c.github.io/aria-practices/#tabpanel
--->
-<script>
-  import Button from './button.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-</script>
-
-<Button role="tab" class="sui tab {className}" {...$$restProps}>
-  <slot name="start-icon" slot="start-icon" />
-  <slot />
-  <slot name="end-icon" slot="end-icon" />
-</Button>

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

@@ -1,31 +0,0 @@
-/** @typedef {typeof __propDef.props}  TabProps */
-/** @typedef {typeof __propDef.events}  TabEvents */
-/** @typedef {typeof __propDef.slots}  TabSlots */
-/**
- * @see https://w3c.github.io/aria/#tab
- * @see https://w3c.github.io/aria-practices/#tabpanel
- */
-export default class Tab {
-}
-export type TabProps = typeof __propDef.props;
-export type TabEvents = typeof __propDef.events;
-export type TabSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {
-            slot: string;
-        };
-        default: {};
-        'end-icon': {
-            slot: string;
-        };
-    };
-};
-export {};

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

@@ -1,90 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#textbox
--->
-<svelte:options accessors={true} />
-
-<script>
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-
-  /** @type {(HTMLTextAreaElement|undefined)} */
-  export let element = undefined;
-
-  export let name = '';
-
-  /** @type {(String|undefined)} */
-  export let value = undefined;
-
-  export let autoResize = false;
-
-  /** @type {(String|undefined)} */
-  let height;
-
-  const resizeTextarea = () => {
-    height = 'auto';
-
-    window.requestAnimationFrame(() => {
-      height = value && element?.scrollHeight ? `${element.scrollHeight + 4}px` : undefined;
-    });
-  };
-
-  $: {
-    if (value && autoResize) {
-      resizeTextarea();
-    }
-  }
-</script>
-
-<div class="sui text-area {className}">
-  <textarea
-    name={name || undefined}
-    {...$$restProps}
-    style:height
-    bind:this={element}
-    on:click
-    on:input
-    on:keypress
-    on:input={() => {
-      value = element.value;
-    }}>{value}</textarea
-  >
-</div>
-
-<style>.text-area {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-}
-
-textarea {
-  display: block;
-  margin: 0;
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  border-radius: var(--input--medium--border-radius);
-  background-color: var(--control-background-color);
-  padding: 8px;
-  width: 100%;
-  min-height: 8em;
-  color: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1.75;
-  resize: vertical;
-  transition: all 200ms;
-}
-textarea:focus {
-  border-color: var(--primary-accent-color);
-}
-textarea:disabled {
-  background-color: var(--disabled-background-color);
-  opacity: 0.4;
-  cursor: default;
-}</style>

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

@@ -1,43 +0,0 @@
-/** @typedef {typeof __propDef.props}  TextAreaProps */
-/** @typedef {typeof __propDef.events}  TextAreaEvents */
-/** @typedef {typeof __propDef.slots}  TextAreaSlots */
-/** @see https://w3c.github.io/aria/#textbox */
-export default class TextArea {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set name(arg: any);
-    get name(): any;
-    /**accessor*/
-    set value(arg: any);
-    get value(): any;
-    /**accessor*/
-    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;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        element?: (HTMLTextAreaElement | undefined);
-        name?: string;
-        value?: (string | undefined);
-        autoResize?: boolean;
-    };
-    events: {
-        click: MouseEvent;
-        input: Event;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};