@sveltia/ui 0.1.4 → 0.2.0

package/package/components/core/button.svelte

@@ -1,205 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#button
-  @see https://w3c.github.io/aria-practices/#button
--->
-<svelte:options accessors={true} />
-
-<script>
-  import Popup from '../util/popup.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  // eslint-disable-next-line padding-line-between-statements
-  let className = '';
-
-  export { className as class };
-
-  /**
-   * Reference to the button element.
-   * @type {(HTMLButtonElement|undefined)}
-   */
-  export let element = undefined;
-
-  /**
-   * The `type` attribute on the button element.
-   * @type {('button'|'submit'|'reset')}
-   */
-  export let type = 'button';
-
-  /**
-   * The `role` attribute on the button element.
-   * @type {String}
-   */
-  export let role = 'button';
-
-  /**
-   * The height of the button.
-   * @type {('small'|'medium'|'large')}
-   */
-  export let size = 'medium';
-
-  /**
-   * Whether the button is hidden.
-   * @type {Boolean}
-   */
-  export let hidden = false;
-
-  /**
-   * Whether the button is disabled.
-   * @type {Boolean}
-   */
-  export let disabled = false;
-
-  /**
-   * The `aria-pressed` attribute on the button element.
-   * @type {(Boolean|String|undefined)}
-   */
-  export let pressed = undefined;
-
-  /**
-   * Text label displayed on the button.
-   * @type {String}
-   */
-  export let label = '';
-
-  /**
-   * Where to show the dropdown menu.
-   * @type {PopupPosition}
-   */
-  export let popupPosition = 'bottom-left';
-
-  /** @type {?Popup} */
-  let popupComponent;
-</script>
-
-<button
-  {type}
-  {role}
-  hidden={hidden ? 'hidden' : undefined}
-  disabled={disabled ? 'disabled' : undefined}
-  class="sui button {size} {className}"
-  aria-hidden={hidden ? true : undefined}
-  aria-disabled={disabled ? true : undefined}
-  aria-pressed={pressed}
-  {...$$restProps}
-  on:mouseenter
-  on:mouseleave
-  on:click
-  on:dragover
-  on:dragleave
-  on:dragend
-  on:drop
-  on:keydown
-  on:keyup
-  on:keypress
-  bind:this={element}
->
-  <slot name="start-icon" />
-  {#if label}
-    <span class="label">{label}</span>
-  {/if}
-  <slot />
-  <slot name="end-icon" />
-</button>
-
-{#if $$slots.popup}
-  <Popup anchor={element} position={popupPosition} bind:this={popupComponent}>
-    <slot name="popup" />
-  </Popup>
-{/if}
-
-<style>button {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border-width: 0;
-  border-style: solid;
-  border-color: transparent;
-  padding: 0;
-  color: inherit;
-  background-color: transparent;
-  box-shadow: none;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-  transition: all 200ms;
-}
-button > :global(*) {
-  pointer-events: none;
-}
-button:global(:not(:disabled):focus-visible) {
-  z-index: 1;
-}
-button[hidden] {
-  display: none !important;
-}
-button[disabled] {
-  opacity: 0.4;
-  cursor: default;
-  pointer-events: none;
-}
-button:global(.primary), button:global(.secondary), button:global(.ternary) {
-  justify-content: center;
-  border-radius: var(--button--medium--border-radius);
-  padding: var(--button--medium--padding, 0 8px);
-  height: var(--button--medium--height);
-}
-button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.ternary) :global(.label:only-child) {
-  padding: 0 4px;
-}
-button:global(.primary) {
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  color: var(--primary-accent-color-foreground);
-  background-color: var(--primary-accent-color);
-}
-button:global(.primary):hover {
-  background-color: var(--primary-accent-color-lighter);
-}
-button:global(.primary):active {
-  background-color: var(--primary-accent-color-darker);
-}
-button:global(.secondary) {
-  border-width: 1px;
-  border-color: var(--control-border-color);
-  color: var(--highlight-foreground-color);
-  background-color: var(--ternary-background-color);
-}
-button:global(.secondary)[aria-pressed=true] {
-  background-color: var(--primary-accent-color);
-}
-button:global(.ternary) {
-  color: var(--primary-foreground-color);
-  padding: var(--button--medium--padding, 0 8px);
-}
-button:global(.ternary)[aria-pressed=true] {
-  background-color: var(--highlight-background-color);
-}
-button:global(.danger) {
-  background-color: var(--danger-background-color);
-}
-button:global(.large) {
-  height: var(--button--large--height);
-}
-button:global(.small) {
-  padding: var(--button--small--padding, 0 8px);
-  height: var(--button--small--height);
-  font-size: 12px;
-}
-button:global(.small) :global(.icon) {
-  font-size: 16px;
-}
-button:global(.link) {
-  color: var(--primary-accent-color-lighter);
-}
-button:global(.iconic) {
-  justify-content: center;
-  border-radius: 4px;
-  aspect-ratio: 1/1;
-}
-button :global(.label) {
-  padding: 0 4px;
-}</style>

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

@@ -1,78 +0,0 @@
-/** @typedef {typeof __propDef.props}  ButtonProps */
-/** @typedef {typeof __propDef.events}  ButtonEvents */
-/** @typedef {typeof __propDef.slots}  ButtonSlots */
-/**
- * @see https://w3c.github.io/aria/#button
- * @see https://w3c.github.io/aria-practices/#button
- */
-export default class Button {
-    /**accessor*/
-    set class(arg: any);
-    get class(): any;
-    /**accessor*/
-    set element(arg: any);
-    get element(): any;
-    /**accessor*/
-    set type(arg: any);
-    get type(): any;
-    /**accessor*/
-    set role(arg: any);
-    get role(): any;
-    /**accessor*/
-    set size(arg: any);
-    get size(): any;
-    /**accessor*/
-    set hidden(arg: any);
-    get hidden(): any;
-    /**accessor*/
-    set disabled(arg: any);
-    get disabled(): any;
-    /**accessor*/
-    set pressed(arg: any);
-    get pressed(): any;
-    /**accessor*/
-    set label(arg: any);
-    get label(): any;
-    /**accessor*/
-    set popupPosition(arg: any);
-    get popupPosition(): any;
-}
-export type ButtonProps = typeof __propDef.props;
-export type ButtonEvents = typeof __propDef.events;
-export type ButtonSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        label?: string;
-        class?: string;
-        element?: (HTMLButtonElement | undefined);
-        type?: ('button' | 'submit' | 'reset');
-        role?: string;
-        size?: ('small' | 'medium' | 'large');
-        hidden?: boolean;
-        disabled?: boolean;
-        pressed?: (boolean | string | undefined);
-        popupPosition?: any;
-    };
-    events: {
-        mouseenter: MouseEvent;
-        mouseleave: MouseEvent;
-        click: MouseEvent;
-        dragover: DragEvent;
-        dragleave: DragEvent;
-        dragend: DragEvent;
-        drop: DragEvent;
-        keydown: KeyboardEvent;
-        keyup: KeyboardEvent;
-        keypress: KeyboardEvent;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        'start-icon': {};
-        default: {};
-        'end-icon': {};
-        popup: {};
-    };
-};
-export {};

package/package/components/core/checkbox.svelte

@@ -1,107 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#checkbox
-  @see https://w3c.github.io/aria-practices/#checkbox
--->
-<script>
-  import { createEventDispatcher } from 'svelte';
-  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|String|undefined)} */
-  export let checked = false;
-
-  /** @type {Boolean} */
-  export let indeterminate = false;
-
-  const dispatch = createEventDispatcher();
-  const id = getRandomId('checkbox');
-  /** @type {Button} */
-  let button;
-
-  $: {
-    dispatch('change', { checked });
-  }
-</script>
-
-{#if name && value && checked && !indeterminate}
-  <input type="hidden" {name} {value} />
-{/if}
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<label
-  class="sui checkbox {className}"
-  on:click|preventDefault|stopPropagation={(event) => {
-    if (!event.target.matches('button')) {
-      button.element.click();
-    }
-  }}
->
-  <Button
-    {id}
-    role="checkbox"
-    aria-checked={indeterminate ? 'mixed' : checked}
-    aria-labelledby="{id}-label"
-    bind:this={button}
-    on:click={(event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      checked = indeterminate ? true : !checked;
-      indeterminate = false;
-    }}
-  >
-    <Icon slot="start-icon" name={indeterminate ? 'remove' : 'check'} />
-  </Button>
-  {#if $$slots.default}
-    <label id="{id}-label">
-      <slot />
-    </label>
-  {/if}
-</label>
-
-<style>.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  color: inherit;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.checkbox :global(button) {
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-width: 2px;
-  border-color: var(--control-border-color);
-  border-radius: 4px;
-  width: 24px;
-  height: 24px;
-  color: var(--primary-accent-color-lighter);
-  transition: all 200ms;
-}
-.checkbox :global(button) :global(.icon) {
-  font-size: 20px;
-}
-.checkbox :global(button[aria-checked="true"]),
-.checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--primary-accent-color-lighter);
-}
-.checkbox :global(button[aria-checked="false"]) {
-  color: transparent;
-}</style>

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

@@ -1,30 +0,0 @@
-/** @typedef {typeof __propDef.props}  CheckboxProps */
-/** @typedef {typeof __propDef.events}  CheckboxEvents */
-/** @typedef {typeof __propDef.slots}  CheckboxSlots */
-/**
- * @see https://w3c.github.io/aria/#checkbox
- * @see https://w3c.github.io/aria-practices/#checkbox
- */
-export default class Checkbox {
-}
-export type CheckboxProps = typeof __propDef.props;
-export type CheckboxEvents = typeof __propDef.events;
-export type CheckboxSlots = typeof __propDef.slots;
-declare const __propDef: {
-    props: {
-        class?: string;
-        name?: string;
-        value?: (string | undefined);
-        checked?: (boolean | string | undefined);
-        indeterminate?: boolean;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export {};

package/package/components/core/dialog.svelte

@@ -1,274 +0,0 @@
-<!--
-  @component
-  @see https://w3c.github.io/aria/#dialog
-  @see https://w3c.github.io/aria-practices/#dialog_modal
--->
-<script>
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { _ } from 'svelte-i18n';
-  import Button from './button.svelte';
-  import Icon from './icon.svelte';
-  import Spacer from './spacer.svelte';
-
-  /**
-   * CSS class name on the button.
-   * @type {String}
-   */
-  let className = '';
-
-  export { className as class };
-
-  export let open = false;
-
-  export let title = '';
-
-  /**
-   * Width of the dialog.
-   * @type {('small'|'medium'|'large')}
-   */
-  export let size = 'medium';
-
-  export let modal = true;
-
-  export let showCancel = true;
-
-  export let showOk = true;
-
-  export let showClose = false;
-
-  export let okLabel = '';
-
-  export let okDisabled = false;
-
-  export let cancelLabel = '';
-
-  export let cancelDisabled = false;
-
-  export let closeOnBackdropClick = false;
-
-  const dispatch = createEventDispatcher();
-  /** @type {?HTMLDialogElement} */
-  let dialog;
-  let showDialog = false;
-  let showContent = false;
-  let closeDialogTimer = 0;
-
-  $: {
-    if (dialog) {
-      if (open) {
-        window.clearTimeout(closeDialogTimer);
-        (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
-        showContent = true;
-
-        if (modal) {
-          dialog.showModal();
-        } else {
-          dialog.show();
-        }
-
-        window.requestAnimationFrame(() => {
-          showDialog = true;
-        });
-      } else {
-        showDialog = false;
-
-        closeDialogTimer = window.setTimeout(() => {
-          showContent = false;
-          dialog?.close();
-          dialog?.remove();
-        }, 500);
-
-        if (dialog.returnValue === 'ok') {
-          dispatch('ok');
-        }
-
-        if (dialog.returnValue === 'cancel') {
-          dispatch('cancel');
-        }
-
-        dispatch('close', dialog.returnValue);
-      }
-    }
-  }
-
-  onMount(() => {
-    dialog.remove();
-
-    // onUnmount
-    return () => {
-      dialog?.close();
-      dialog?.remove();
-    };
-  });
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<dialog
-  bind:this={dialog}
-  class="sui dialog {className} {size}"
-  class:open={showDialog}
-  on:click={({ target }) => {
-    if (closeOnBackdropClick && target?.matches('dialog')) {
-      dialog.returnValue = 'cancel';
-      open = false;
-    }
-  }}
-  on:cancel={() => {
-    // Cancelled with the Escape key
-    open = false;
-  }}
->
-  <form method="dialog" on:submit|preventDefault>
-    {#if showContent}
-      {#if title || showClose || $$slots.header || $$slots['header-extra']}
-        <div class="header">
-          {#if $$slots.header}
-            <slot name="header" />
-          {:else}
-            <div class="title">
-              {title}
-            </div>
-            <Spacer flex={true} />
-            {#if $$slots['header-extra']}
-              <slot name="header-extra" />
-            {/if}
-            {#if showClose}
-              <Button
-                class="ternary iconic"
-                on:click={() => {
-                  dialog.returnValue = 'close';
-                  open = false;
-                }}
-              >
-                <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
-              </Button>
-            {/if}
-          {/if}
-        </div>
-      {/if}
-      <div class="main">
-        <slot />
-      </div>
-      {#if showOk || showCancel || $$slots.footer || $$slots['footer-extra']}
-        <div class="footer">
-          {#if $$slots.footer}
-            <slot name="footer" />
-          {:else}
-            {#if $$slots['footer-extra']}
-              <slot name="footer-extra" />
-            {/if}
-            <Spacer flex={true} />
-            {#if showOk}
-              <Button
-                class="primary"
-                label={okLabel || $_('sui._.ok')}
-                disabled={okDisabled}
-                on:click={() => {
-                  dialog.returnValue = 'ok';
-                  open = false;
-                }}
-              />
-            {/if}
-            {#if showCancel}
-              <Button
-                class="secondary"
-                label={cancelLabel || $_('sui._.cancel')}
-                disabled={cancelDisabled}
-                on:click={() => {
-                  dialog.returnValue = 'cancel';
-                  open = false;
-                }}
-              />
-            {/if}
-          {/if}
-        </div>
-      {/if}
-    {/if}
-  </form>
-</dialog>
-
-<style>dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--popup-backdrop-color);
-}
-dialog.open form {
-  opacity: 1;
-  transform: scale(100%);
-  transition-duration: 100ms;
-}
-dialog:not(.open) {
-  pointer-events: none !important;
-}
-dialog:not(.open) form {
-  opacity: 0;
-  transform: scale(90%);
-  pointer-events: none;
-  transition-duration: 200ms;
-}
-dialog:not(.open) :global(*) {
-  pointer-events: none !important;
-}
-dialog :global(a),
-dialog :global(input),
-dialog :global(textarea),
-dialog :global(button),
-dialog :global([tabindex="0"]) {
-  pointer-events: all;
-}
-dialog form {
-  display: flex;
-  flex-direction: column;
-  border-radius: 4px;
-  background-color: var(--secondary-background-color-translucent);
-  backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
-  will-change: opacity, transform;
-  transition-property: opacity, transform;
-}
-dialog.small form {
-  width: 400px;
-  max-height: 400px;
-}
-dialog.medium form {
-  width: 600px;
-  max-height: 600px;
-}
-dialog.large form {
-  width: 800px;
-  max-height: 800px;
-}
-dialog.x-large form {
-  width: 1000px;
-  max-height: 1000px;
-}
-
-.header,
-.footer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.header {
-  box-sizing: content-box;
-  margin: 0 16px;
-  border-width: 0 0 1px;
-  border-color: var(--secondary-border-color);
-  padding: 16px 8px;
-  height: 32px;
-}
-.header .title {
-  font-size: 16px;
-}
-
-.footer {
-  margin: 0 24px 24px;
-}
-
-.main {
-  overflow: auto;
-  margin: 24px 24px;
-  white-space: normal;
-}</style>