@sveltia/ui 0.2.0 → 0.2.2

package/package/components/core/dialog.svelte

@@ -0,0 +1,288 @@
+<!--
+  @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;
+  /** @type {?HTMLFormElement} */
+  let form;
+  let showDialog = false;
+  let showContent = 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;
+    });
+  };
+
+  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}"
+  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>
+    {#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="ghost 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;
+  outline: 0;
+  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: var(--font-size--large);
+}
+
+.footer {
+  margin: 0 24px 24px;
+}
+
+.main {
+  overflow: auto;
+  margin: 24px 24px;
+  white-space: normal;
+}</style>

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

@@ -0,0 +1,73 @@
+/** @typedef {typeof __propDef.props}  DialogProps */
+/** @typedef {typeof __propDef.events}  DialogEvents */
+/** @typedef {typeof __propDef.slots}  DialogSlots */
+/**
+ * @see https://w3c.github.io/aria/#dialog
+ * @see https://w3c.github.io/aria-practices/#dialog_modal
+ */
+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;
+        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;
+    };
+    events: {
+        submit: SubmitEvent;
+        ok: CustomEvent<any>;
+        cancel: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        'header-extra': {};
+        default: {};
+        footer: {};
+        'footer-extra': {};
+    };
+};
+export {};

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="ghost 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="ghost 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>