@sveltia/ui 0.1.5 → 0.2.0

package/package/components/core/menu-item.svelte

@@ -1,113 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#menuitem
--->
-<script>
-  import { writable } from 'svelte/store';
-  import Menu from '../composite/menu.svelte';
-  import Popup from '../util/popup.svelte';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-
-  let className = '';
-
-  export { className as class };
-
-  /** @type {('menuitem'|'menuitemcheckbox'|'menuitemradio')} */
-  export let role = 'menuitem';
-
-  export let label = '';
-
-  export let iconName = '';
-
-  export let iconLabel = '';
-
-  export let checked = false;
-
-  /** @type {Button} */
-  let buttonComponent;
-  let isPopupOpen = writable(false);
-
-  $: hasChildren = role === 'menuitem' && $$slots.default;
-</script>
-
-<div class="sui menuitem {className}">
-  <Button
-    {role}
-    aria-checked={checked}
-    aria-haspopup={hasChildren ? 'menu' : undefined}
-    aria-expanded={$isPopupOpen ? true : undefined}
-    {...$$restProps}
-    bind:this={buttonComponent}
-    on:click
-    on:mouseenter={() => {
-      $isPopupOpen = true;
-    }}
-    on:mouseleave={() => {
-      $isPopupOpen = false;
-    }}
-  >
-    {#if iconName}
-      <Icon slot="start-icon" name={iconName} label={iconLabel} />
-    {/if}
-    {#if label}
-      <span class="label">{label}</span>
-    {/if}
-    {#if role === 'menuitemradio' || role === 'menuitemcheckbox'}
-      <span class="icon-outer">
-        {#if checked}
-          <Icon name="check" />
-        {/if}
-      </span>
-    {/if}
-    {#if hasChildren}
-      <span class="icon-outer">
-        <Icon name="chevron_right" />
-      </span>
-    {/if}
-  </Button>
-  {#if hasChildren}
-    <Popup anchor={buttonComponent?.element} position="right-top" bind:open={isPopupOpen}>
-      <Menu>
-        <slot />
-      </Menu>
-    </Popup>
-  {/if}
-</div>
-
-<style>.menuitem {
-  position: relative;
-}
-.menuitem :global(button) {
-  display: flex;
-  justify-content: space-between !important;
-  border-radius: 4px;
-  padding: 0 16px;
-  width: 100%;
-  min-width: 160px;
-  height: var(--option--medium--height);
-}
-.menuitem :global(button[aria-checked="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
-}
-.menuitem :global(button:hover),
-.menuitem :global(button:focus) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
-}
-.menuitem:hover > :global([role="menu"]) {
-  opacity: 1;
-}
-.menuitem > :global([role="menu"]) {
-  position: absolute;
-  inset: 2px auto auto calc(100% + 4px);
-}
-.menuitem > :global([role="menu"]):hover {
-  opacity: 1;
-}
-
-.icon-outer {
-  flex: none;
-  width: 24px;
-  height: 24px;
-}</style>

package/package/components/core/menu-item.svelte.d.ts

@@ -1,29 +0,0 @@
-/** @typedef {typeof __propDef.props}  MenuItemProps */
-/** @typedef {typeof __propDef.events}  MenuItemEvents */
-/** @typedef {typeof __propDef.slots}  MenuItemSlots */
-/** @see https://w3c.github.io/aria/#menuitem */
-export default class MenuItem {
-}
-export type MenuItemProps = typeof __propDef.props;
-export type MenuItemEvents = typeof __propDef.events;
-export type MenuItemSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        class?: string;
-        role?: ('menuitem' | 'menuitemcheckbox' | 'menuitemradio');
-        checked?: boolean;
-        iconName?: string;
-        iconLabel?: string;
-    };
-    events: {
-        click: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

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

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

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

@@ -1,28 +0,0 @@
-/** @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 {
-}
-export type NumberInputProps = typeof __propDef.props;
-export type NumberInputEvents = typeof __propDef.events;
-export type NumberInputSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        disabled?: boolean;
-        value?: (string | undefined);
-        min?: any;
-        max?: any;
-        step?: number;
-    };
-    events: {
-        keypress: any;
-        input: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/package/components/core/option.svelte

@@ -1,59 +0,0 @@
-<!--
-  @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 selected = false;
-</script>
-
-<div class="sui option {className}">
-  <Button
-    role="option"
-    aria-selected={selected}
-    {...$$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);
-}
-.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

@@ -1,35 +0,0 @@
-/** @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 {
-}
-export type OptionProps = typeof __propDef.props;
-export type OptionEvents = typeof __propDef.events;
-export type OptionSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        selected?: boolean;
-    };
-    events: {
-        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

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

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

@@ -1,25 +0,0 @@
-/** @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 {
-}
-export type PasswordInputProps = typeof __propDef.props;
-export type PasswordInputEvents = typeof __propDef.events;
-export type PasswordInputSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-        value?: (string | undefined);
-    };
-    events: {
-        input: any;
-        keypress: any;
-        change: any;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

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

@@ -1,93 +0,0 @@
-<!--
-  @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: 16px;
-  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

@@ -1,27 +0,0 @@
-/** @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 {
-}
-export type RadioButtonProps = typeof __propDef.props;
-export type RadioButtonEvents = typeof __propDef.events;
-export type RadioButtonSlots = typeof __propDef.slots;
-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

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

@@ -1,21 +0,0 @@
-/** @typedef {typeof __propDef.props}  RowGroupProps */
-/** @typedef {typeof __propDef.events}  RowGroupEvents */
-/** @typedef {typeof __propDef.slots}  RowGroupSlots */
-export default class RowGroup {
-}
-export type RowGroupProps = typeof __propDef.props;
-export type RowGroupEvents = typeof __propDef.events;
-export type RowGroupSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        class?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/row.svelte

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

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