@sveltia/ui 0.2.0 → 0.2.1

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

@@ -0,0 +1,112 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<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 {(String|undefined)} */
+  export let value = undefined;
+
+  export let disabled = false;
+  export let min = undefined;
+  export let max = undefined;
+  export let step = 1;
+
+  let component;
+
+  const decrease = () => {
+    if (typeof min === 'number' && Number(value || 0) === min) {
+      return;
+    }
+
+    value = String(Number(value || 0) - step);
+  };
+
+  const increase = () => {
+    if (typeof min === 'number' && Number(value || 0) === max) {
+      return;
+    }
+
+    value = String(Number(value || 0) + step);
+  };
+</script>
+
+<div class="sui number-input {className}">
+  <TextInput
+    bind:this={component}
+    bind:value
+    {disabled}
+    role="spinbutton"
+    aria-valuenow={Number(value || 0)}
+    aria-invalid={Number.isNaN(Number(value))}
+    {...$$restProps}
+    on:keydown={(event) => {
+      const { key, ctrlKey, metaKey, altKey, shiftKey } = event;
+
+      if (key === 'ArrowDown' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+        event.preventDefault();
+        decrease();
+      }
+
+      if (key === 'ArrowUp' && !ctrlKey && !metaKey && !altKey && !shiftKey) {
+        event.preventDefault();
+        increase();
+      }
+    }}
+    on:keypress
+    on:input
+  />
+  <Button
+    class="iconic"
+    disabled={disabled || Number.isNaN(Number(value))}
+    on:click={() => {
+      decrease();
+    }}
+  >
+    <Icon slot="start-icon" name="arrow_downward" label={$_('sui.number_input.decrease')} />
+  </Button>
+  <Button
+    class="iconic"
+    disabled={disabled || Number.isNaN(Number(value))}
+    on:click={() => {
+      increase();
+    }}
+  >
+    <Icon slot="start-icon" name={'arrow_upward'} label={$_('sui.number_input.increase')} />
+  </Button>
+</div>
+
+<style>.number-input {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+.number-input :global(input) {
+  border-radius: 4px 0 0 4px;
+}
+.number-input :global(button) {
+  flex: none;
+  margin-left: -1px;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  width: 32px;
+  height: var(--input--medium--height);
+}
+.number-input :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+.number-input :global(button) :global(.icon) {
+  font-size: var(--font-size--xx-large);
+}</style>

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

@@ -0,0 +1,42 @@
+/** @typedef {typeof __propDef.props}  NumberInputProps */
+/** @typedef {typeof __propDef.events}  NumberInputEvents */
+/** @typedef {typeof __propDef.slots}  NumberInputSlots */
+/** @see https://w3c.github.io/aria/#textbox */
+export default class NumberInput extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+    disabled?: boolean;
+    value?: string;
+    min?: any;
+    max?: any;
+    step?: number;
+}, {
+    keypress: KeyboardEvent;
+    input: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type NumberInputProps = typeof __propDef.props;
+export type NumberInputEvents = typeof __propDef.events;
+export type NumberInputSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        disabled?: boolean;
+        value?: (string | undefined);
+        min?: any;
+        max?: any;
+        step?: number;
+    };
+    events: {
+        keypress: KeyboardEvent;
+        input: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/core/option.svelte

@@ -0,0 +1,65 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#option
+-->
+<script>
+  import Button from './button.svelte';
+  import Icon from './icon.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  export let label = '';
+  export let value = undefined;
+  export let selected = false;
+</script>
+
+<div class="sui option {className}">
+  <Button
+    role="option"
+    aria-selected={selected}
+    {label}
+    {value}
+    data-type={typeof value}
+    {...$$restProps}
+    on:click
+    on:dragover
+    on:dragleave
+    on:dragend
+    on:drop
+  >
+    {#if selected}
+      <Icon class="check" name="check" />
+    {/if}
+    <slot name="start-icon" slot="start-icon" />
+    <slot />
+    <slot name="end-icon" slot="end-icon" />
+  </Button>
+</div>
+
+<style>.option {
+  display: contents;
+}
+.option :global([role="option"]) {
+  flex: none;
+  display: flex;
+  justify-content: space-between;
+  gap: 4px;
+  border-radius: 4px;
+  padding: 0 8px 0 16px;
+  width: 100%;
+  height: var(--option--medium--height);
+  white-space: nowrap;
+}
+.option :global([role="option"]:hover) {
+  color: var(--highlight-foreground-color);
+  background-color: var(--highlight-background-color);
+}
+.option :global([role="option"][aria-selected="true"]) :global(.icon) {
+  color: var(--primary-accent-color-lighter);
+}</style>

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

@@ -0,0 +1,60 @@
+/** @typedef {typeof __propDef.props}  OptionProps */
+/** @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;
+    label?: string;
+    class?: string;
+    value?: any;
+    selected?: boolean;
+}, {
+    click: MouseEvent;
+    dragover: DragEvent;
+    dragleave: DragEvent;
+    dragend: DragEvent;
+    drop: DragEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    'start-icon': {
+        slot: string;
+    };
+    default: {};
+    'end-icon': {
+        slot: string;
+    };
+}> {
+}
+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;
+        label?: string;
+        class?: string;
+        value?: any;
+        selected?: boolean;
+    };
+    events: {
+        click: MouseEvent;
+        dragover: DragEvent;
+        dragleave: DragEvent;
+        dragend: DragEvent;
+        drop: DragEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'start-icon': {
+            slot: string;
+        };
+        default: {};
+        'end-icon': {
+            slot: string;
+        };
+    };
+};
+export {};

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

@@ -0,0 +1,81 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#textbox
+-->
+<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 {(String|undefined)} */
+  export let value = undefined;
+
+  /**
+   * @type {TextInput}
+   */
+  let inputComponent;
+  let passwordVisible = false;
+
+  $: {
+    if (inputComponent) {
+      inputComponent.element.setAttribute('type', passwordVisible ? 'text' : 'password');
+    }
+  }
+</script>
+
+<div class="sui password-input {className}">
+  <TextInput
+    bind:this={inputComponent}
+    bind:value
+    type="password"
+    {...$$restProps}
+    on:input
+    on:keypress
+    on:change
+  />
+  <Button
+    class="iconic"
+    pressed={passwordVisible}
+    on:click={() => {
+      passwordVisible = !passwordVisible;
+    }}
+  >
+    <Icon
+      slot="start-icon"
+      name={passwordVisible ? 'visibility_off' : 'visibility'}
+      label={$_('sui.password_input.show_password')}
+    />
+  </Button>
+</div>
+
+<style>.password-input {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+}
+.password-input :global(input) {
+  border-radius: 4px 0 0 4px;
+}
+.password-input :global(button) {
+  flex: none;
+  margin-left: -1px;
+  border-width: 1px;
+  border-color: var(--control-border-color);
+  height: var(--input--medium--height);
+  aspect-ratio: 1/1;
+}
+.password-input :global(button):last-child {
+  border-radius: 0 4px 4px 0;
+}
+.password-input :global(button) :global(.icon) {
+  font-size: var(--font-size--xx-large);
+}</style>

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

@@ -0,0 +1,36 @@
+/** @typedef {typeof __propDef.props}  PasswordInputProps */
+/** @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 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;
+        class?: string;
+        value?: (string | undefined);
+    };
+    events: {
+        input: Event;
+        keypress: KeyboardEvent;
+        change: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -0,0 +1,93 @@
+<!--
+  @component
+  @see https://w3c.github.io/aria/#radio
+  @see https://w3c.github.io/aria-practices/#radiobutton
+-->
+<script>
+  import { getRandomId } from '../helpers/util';
+  import Button from './button.svelte';
+  import Icon from './icon.svelte';
+
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  let className = '';
+
+  export { className as class };
+
+  /** @type {String} */
+  export let name = '';
+
+  /** @type {(String|undefined)} */
+  export let value = undefined;
+
+  /** @type {Boolean} */
+  export let selected = false;
+
+  const id = getRandomId('checkbox');
+  /** @type {Button} */
+  let buttonComponent;
+</script>
+
+{#if name && value && selected}
+  <input type="hidden" {name} {value} />
+{/if}
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span
+  class="sui radio-button {className}"
+  on:click={(event) => {
+    if (!event.target.matches('button')) {
+      buttonComponent.element.click();
+    }
+  }}
+>
+  <Button
+    {id}
+    role="radio"
+    aria-checked={selected}
+    aria-labelledby="{id}-label"
+    bind:this={buttonComponent}
+    on:click={(event) => {
+      event.preventDefault();
+      selected = !selected;
+    }}
+  >
+    <Icon slot="start-icon" name="circle" />
+  </Button>
+  <label id="{id}-label">
+    <slot />
+  </label>
+</span>
+
+<style>.radio-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.radio-button :global(button) {
+  justify-content: center;
+  overflow: hidden;
+  border-width: 2px;
+  border-color: var(--control-border-color);
+  border-radius: 24px;
+  width: 24px;
+  height: 24px;
+  color: var(--primary-accent-color-lighter);
+  transition: all 200ms;
+}
+.radio-button :global(button) :global(.icon) {
+  font-size: var(--font-size--large);
+  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+}
+.radio-button :global(button[aria-checked="true"]) {
+  color: var(--primary-accent-color-lighter);
+}
+.radio-button :global(button[aria-checked="false"]) {
+  color: transparent;
+}</style>

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

@@ -0,0 +1,37 @@
+/** @typedef {typeof __propDef.props}  RadioButtonProps */
+/** @typedef {typeof __propDef.events}  RadioButtonEvents */
+/** @typedef {typeof __propDef.slots}  RadioButtonSlots */
+/**
+ * @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 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;
+        name?: string;
+        value?: (string | undefined);
+        selected?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

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

@@ -0,0 +1,14 @@
+<script>
+  /**
+   * CSS class name on the button.
+   * @type {String}
+   */
+  // eslint-disable-next-line padding-line-between-statements
+  let className = 'tbody';
+
+  export { className as class };
+</script>
+
+<div role="rowgroup" class="sui row-group {className}" {...$$restProps}>
+  <slot />
+</div>

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

@@ -0,0 +1,29 @@
+/** @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 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;
+        class?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package/components/core/row.svelte

@@ -0,0 +1,14 @@
+<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 role="row" tabindex="0" class="sui row {className}" {...$$restProps} on:click>
+  <slot />
+</div>

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

@@ -0,0 +1,33 @@
+/** @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 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;
+        class?: string;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};