@sveltia/ui 0.1.5 → 0.2.1

package/package/components/core/checkbox.svelte

@@ -29,6 +29,9 @@
   /** @type {Boolean} */
   export let indeterminate = false;
 
+  /** @type {Boolean} */
+  export let disabled = false;
+
   const dispatch = createEventDispatcher();
   const id = getRandomId('checkbox');
   /** @type {Button} */
@@ -42,6 +45,9 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <label
   class="sui checkbox {className}"
+  class:checked
+  class:indeterminate
+  class:disabled
   on:click|preventDefault|stopPropagation={(event) => {
     if (!event.target.matches('button')) {
       button.element.click();
@@ -50,6 +56,7 @@
 >
   <Button
     {id}
+    {disabled}
     role="checkbox"
     aria-checked={indeterminate ? 'mixed' : checked}
     aria-labelledby="{id}-label"
@@ -80,6 +87,9 @@
   -webkit-user-select: none;
   user-select: none;
 }
+.checkbox.disabled {
+  cursor: default;
+}
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
@@ -93,7 +103,7 @@
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: 20px;
+  font-size: var(--font-size--xx-large);
 }
 .checkbox :global(button[aria-checked="true"]),
 .checkbox :global(button[aria-checked="mixed"]) {

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

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

package/package/components/core/dialog.svelte

@@ -49,47 +49,60 @@
   const dispatch = createEventDispatcher();
   /** @type {?HTMLDialogElement} */
   let dialog;
+  /** @type {?HTMLFormElement} */
+  let form;
   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;
+  const openDialog = async () => {
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    showContent = true;
+
+    if (modal) {
+      dialog.showModal();
+    } else {
+      dialog.show();
+    }
+
+    window.requestAnimationFrame(() => {
+      showDialog = true;
+    });
+  };
 
-        closeDialogTimer = window.setTimeout(() => {
-          showContent = false;
-          dialog?.close();
-          dialog?.remove();
-        }, 500);
+  const closeDialog = async () => {
+    showDialog = false;
 
-        if (dialog.returnValue === 'ok') {
-          dispatch('ok');
-        }
+    if (dialog.returnValue === 'ok') {
+      dispatch('ok');
+    }
 
-        if (dialog.returnValue === 'cancel') {
-          dispatch('cancel');
-        }
+    if (dialog.returnValue === 'cancel') {
+      dispatch('cancel');
+    }
 
-        dispatch('close', dialog.returnValue);
+    dispatch('close', dialog.returnValue);
+
+    await new Promise((resolve) => {
+      form.addEventListener('transitionend', () => resolve(), { once: true });
+    });
+
+    showContent = false;
+    dialog?.close();
+    dialog?.remove();
+  };
+
+  const toggleDialog = () => {
+    if (dialog) {
+      if (open) {
+        openDialog();
+      } else {
+        closeDialog();
       }
     }
-  }
+  };
+
+  // Call the function only when the `open` prop is changed
+  $: toggleDialog(open);
 
   onMount(() => {
     dialog.remove();
@@ -113,12 +126,12 @@
       open = false;
     }
   }}
-  on:cancel={() => {
+  on:cancel|preventDefault={() => {
     // Cancelled with the Escape key
     open = false;
   }}
 >
-  <form method="dialog" on:submit|preventDefault>
+  <form method="dialog" bind:this={form} on:submit|preventDefault>
     {#if showContent}
       {#if title || showClose || $$slots.header || $$slots['header-extra']}
         <div class="header">
@@ -134,7 +147,7 @@
             {/if}
             {#if showClose}
               <Button
-                class="ternary iconic"
+                class="tertiary iconic"
                 on:click={() => {
                   dialog.returnValue = 'close';
                   open = false;
@@ -191,6 +204,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  outline: 0;
   background-color: var(--popup-backdrop-color);
 }
 dialog.open form {
@@ -260,7 +274,7 @@ dialog.x-large form {
   height: 32px;
 }
 .header .title {
-  font-size: 16px;
+  font-size: var(--font-size--large);
 }
 
 .footer {

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

@@ -5,11 +5,39 @@
  * @see https://w3c.github.io/aria/#dialog
  * @see https://w3c.github.io/aria-practices/#dialog_modal
  */
-export default class Dialog {
+export default class Dialog extends SvelteComponentTyped<{
+    title?: string;
+    open?: boolean;
+    class?: string;
+    size?: "small" | "medium" | "large";
+    modal?: boolean;
+    showCancel?: boolean;
+    showOk?: boolean;
+    showClose?: boolean;
+    okLabel?: string;
+    okDisabled?: boolean;
+    cancelLabel?: string;
+    cancelDisabled?: boolean;
+    closeOnBackdropClick?: boolean;
+}, {
+    submit: SubmitEvent;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'header-extra': {};
+    default: {};
+    footer: {};
+    'footer-extra': {};
+}> {
 }
 export type DialogProps = typeof __propDef.props;
 export type DialogEvents = typeof __propDef.events;
 export type DialogSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         title?: string;

package/package/components/core/drawer.svelte

@@ -0,0 +1,338 @@
+<!--
+  @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 };
+
+  /**
+   * Whether to open the drawer.
+   */
+  export let open = false;
+
+  /**
+   * Title text displayed on the header.
+   */
+  export let title = '';
+
+  /**
+   * Position of the drawer.
+   * @type {('top'|'right'|'bottom'|'left')}
+   */
+  export let position = 'right';
+
+  /**
+   * Width or height of the drawer.
+   * @type {('small'|'medium'|'large'|'x-large')}
+   */
+  export let size = 'small';
+
+  /**
+   * Whether to show the Close button.
+   * @type {('inside'|'outside'|false)}
+   */
+  export let showClose = 'outside';
+
+  /**
+   * Whether to close the drawer when the backdrop (outside of the drawer) is clicked.
+   */
+  export let closeOnBackdropClick = false;
+
+  const dispatch = createEventDispatcher();
+  /** @type {?HTMLDialogElement} */
+  let dialog;
+  /** @type {?HTMLFormElement} */
+  let form;
+  let showDialog = false;
+  let showContent = false;
+
+  $: orientation = position === 'right' || position === 'left' ? 'vertical' : 'horizontal';
+
+  const openDialog = async () => {
+    (document.querySelector('.sui.app-shell') || document.body).appendChild(dialog);
+    showContent = true;
+    dialog.showModal();
+
+    window.requestAnimationFrame(() => {
+      showDialog = true;
+    });
+  };
+
+  const closeDialog = async () => {
+    showDialog = false;
+
+    if (dialog.returnValue === 'ok') {
+      dispatch('ok');
+    }
+
+    if (dialog.returnValue === 'cancel') {
+      dispatch('cancel');
+    }
+
+    dispatch('close', dialog.returnValue);
+
+    await new Promise((resolve) => {
+      form.addEventListener('transitionend', () => resolve(), { once: true });
+    });
+
+    showContent = false;
+    dialog?.close();
+    dialog?.remove();
+  };
+
+  const toggleDialog = () => {
+    if (dialog) {
+      if (open) {
+        openDialog();
+      } else {
+        closeDialog();
+      }
+    }
+  };
+
+  // Call the function only when the `open` prop is changed
+  $: toggleDialog(open);
+
+  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} {position} {orientation}"
+  class:open={showDialog}
+  on:click={({ target }) => {
+    if (closeOnBackdropClick && target?.matches('dialog')) {
+      dialog.returnValue = 'cancel';
+      open = false;
+    }
+  }}
+  on:cancel|preventDefault={() => {
+    // Cancelled with the Escape key
+    open = false;
+  }}
+>
+  <form method="dialog" bind:this={form} on:submit|preventDefault>
+    <div class="extra-control">
+      {#if showClose === 'outside'}
+        <Button
+          class="iconic close"
+          on:click={() => {
+            dialog.returnValue = 'close';
+            open = false;
+          }}
+        >
+          <Icon slot="start-icon" name="close" label={$_('sui._.close')} />
+        </Button>
+      {/if}
+    </div>
+    {#if showContent}
+      {#if title || showClose === 'inside' || $$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 === 'inside'}
+              <Button
+                class="tertiary iconic close"
+                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 $$slots.footer}
+        <div class="footer">
+          <slot name="footer" />
+        </div>
+      {/if}
+    {/if}
+  </form>
+</dialog>
+
+<style>dialog {
+  overflow: hidden;
+  outline: 0;
+  background-color: var(--popup-backdrop-color);
+}
+dialog.open form {
+  opacity: 1;
+  transform: translateX(0%);
+  transition-duration: 100ms;
+}
+dialog:not(.open) {
+  pointer-events: none !important;
+}
+dialog:not(.open) form {
+  opacity: 0;
+  transform: translateX(105%);
+  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 {
+  position: absolute;
+  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 form .extra-control {
+  position: absolute;
+}
+dialog form .extra-control :global(button.close) {
+  margin: 8px;
+}
+dialog.right form {
+  inset: 0 0 0 auto;
+}
+dialog.right form .extra-control {
+  inset: 0 100% auto auto;
+}
+dialog.right:not(.open) form {
+  transform: translateX(105%);
+}
+dialog.left form {
+  inset: 0 auto 0 0;
+}
+dialog.left form .extra-control {
+  inset: 0 auto auto 100%;
+}
+dialog.left:not(.open) form {
+  transform: translateX(-105%);
+}
+dialog.vertical {
+  height: 100%;
+  max-width: 100vw;
+}
+dialog.vertical.open form {
+  transform: translateX(0%);
+}
+dialog.vertical.small form {
+  width: 400px;
+}
+dialog.vertical.medium form {
+  width: 600px;
+}
+dialog.vertical.large form {
+  width: 800px;
+}
+dialog.vertical.x-large form {
+  width: 1000px;
+}
+dialog.top form {
+  inset: 0 0 auto 0;
+}
+dialog.top form .extra-control {
+  inset: 100% 0 auto auto;
+}
+dialog.top:not(.open) form {
+  transform: translateY(-105%);
+}
+dialog.bottom form {
+  inset: auto 0 0 0;
+}
+dialog.bottom form .extra-control {
+  inset: auto 0 100% auto;
+}
+dialog.bottom:not(.open) form {
+  transform: translateY(105%);
+}
+dialog.horizontal {
+  width: 100%;
+  max-height: 100vh;
+}
+dialog.horizontal.open form {
+  transform: translateY(0%);
+}
+dialog.horizontal.small form {
+  height: 400px;
+}
+dialog.horizontal.medium form {
+  height: 600px;
+}
+dialog.horizontal.large form {
+  height: 800px;
+}
+dialog.horizontal.x-large form {
+  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: var(--font-size--large);
+}
+
+.footer {
+  margin: 0 24px 24px;
+}
+
+.main {
+  flex: auto;
+  overflow: auto;
+  margin: 24px 24px;
+  white-space: normal;
+}</style>

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

@@ -0,0 +1,59 @@
+/** @typedef {typeof __propDef.props}  DrawerProps */
+/** @typedef {typeof __propDef.events}  DrawerEvents */
+/** @typedef {typeof __propDef.slots}  DrawerSlots */
+/**
+ * @see https://w3c.github.io/aria/#dialog
+ * @see https://w3c.github.io/aria-practices/#dialog_modal
+ */
+export default class Drawer extends SvelteComponentTyped<{
+    title?: string;
+    position?: "top" | "right" | "bottom" | "left";
+    open?: boolean;
+    class?: string;
+    size?: "small" | "medium" | "large" | "x-large";
+    showClose?: false | "inside" | "outside";
+    closeOnBackdropClick?: boolean;
+}, {
+    submit: SubmitEvent;
+    ok: CustomEvent<any>;
+    cancel: CustomEvent<any>;
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    'header-extra': {};
+    default: {};
+    footer: {};
+}> {
+}
+export type DrawerProps = typeof __propDef.props;
+export type DrawerEvents = typeof __propDef.events;
+export type DrawerSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title?: string;
+        position?: ('top' | 'right' | 'bottom' | 'left');
+        open?: boolean;
+        class?: string;
+        size?: ('small' | 'medium' | 'large' | 'x-large');
+        showClose?: ('inside' | 'outside' | false);
+        closeOnBackdropClick?: boolean;
+    };
+    events: {
+        submit: SubmitEvent;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'header-extra': {};
+        default: {};
+        footer: {};
+    };
+};
+export {};

package/package/components/core/grid-cell.svelte.d.ts

@@ -1,11 +1,19 @@
 /** @typedef {typeof __propDef.props}  GridCellProps */
 /** @typedef {typeof __propDef.events}  GridCellEvents */
 /** @typedef {typeof __propDef.slots}  GridCellSlots */
-export default class GridCell {
+export default class GridCell extends SvelteComponentTyped<{
+    [x: string]: any;
+    class?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type GridCellProps = typeof __propDef.props;
 export type GridCellEvents = typeof __propDef.events;
 export type GridCellSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

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

@@ -1,11 +1,21 @@
 /** @typedef {typeof __propDef.props}  GroupProps */
 /** @typedef {typeof __propDef.events}  GroupEvents */
 /** @typedef {typeof __propDef.slots}  GroupSlots */
-export default class Group {
+export default class Group extends SvelteComponentTyped<{
+    [x: string]: any;
+    title?: string;
+    class?: string;
+    ariaLabel?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
 }
 export type GroupProps = typeof __propDef.props;
 export type GroupEvents = typeof __propDef.events;
 export type GroupSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;