@yewdiel21/motion-kit 0.10.0 → 0.14.0

package/src/components/dialog/element.ts

@@ -1,118 +1,123 @@
-import { MkElement, defineElement, type OptionType } from '../../elements/base';
-import type { Instance } from '../../core/types';
-import { iconSvg } from '../icons';
-import { createDialog, type DialogInstance, type DialogPlacement, type DialogVariant } from './engine';
-
-/**
- * <mk-dialog id="crear" heading="Crear proyecto" [description] [shared="id"] [variant="liquid"]
- *   [placement="anchor|side"] [size="sm|lg|xl"] [float="key"] [no-backdrop] [persistent] [no-drag]>…</mk-dialog>
- * Any [data-mk-open="crear"] opens it from that button. On connect its children
- * move into a <dialog class="mk-dialog"> (with `heading`, a header with title and
- * close button and a body are made for them); on disconnect they move back.
- */
-export class MkDialogElement extends MkElement<Instance> {
-  static options: Record<string, OptionType> = {
-    variant: 'string',
-    placement: 'string',
-    size: 'string',
-    heading: 'string',
-    description: 'string',
-    float: 'string',
-    noBackdrop: 'boolean',
-    persistent: 'boolean',
-    noDrag: 'boolean',
-    closeLabel: 'string',
-    shared: 'string',
-  };
-
-  dialog: DialogInstance | null = null;
-
-  protected create(options: Record<string, unknown>): Instance {
-    const original = [...this.childNodes];
-    const dialog = document.createElement('dialog');
-    dialog.className = 'mk-dialog';
-    if (options.size && options.size !== 'md') dialog.classList.add(`mk-dialog--${options.size}`);
-    const hasParts = original.some((node) => node instanceof Element && node.matches('[data-mk-part]'));
-    const closeLabel = (options.closeLabel as string | undefined) ?? 'Cerrar';
-    if (options.heading) {
-      const header = document.createElement('header');
-      header.dataset.mkPart = 'header';
-      const text = document.createElement('div');
-      const title = document.createElement('h2');
-      title.dataset.mkPart = 'title';
-      title.textContent = options.heading as string;
-      if (options.shared) title.dataset.mkShared = options.shared as string;
-      text.append(title);
-      if (options.description) {
-        const description = document.createElement('p');
-        description.dataset.mkPart = 'description';
-        description.textContent = options.description as string;
-        text.append(description);
-      }
-      const actions = document.createElement('div');
-      actions.dataset.mkPart = 'actions';
-      if (options.float) {
-        const handle = document.createElement('button');
-        handle.type = 'button';
-        handle.dataset.mkPart = 'handle';
-        handle.innerHTML = iconSvg('expand', 18);
-        actions.append(handle);
-      }
-      const close = document.createElement('button');
-      close.type = 'button';
-      close.dataset.mkPart = 'close';
-      close.setAttribute('aria-label', closeLabel);
-      close.innerHTML = iconSvg('close');
-      actions.append(close);
-      header.append(text, actions);
-      const body = document.createElement('div');
-      body.dataset.mkPart = 'body';
-      // A footer stays out of the scrolling body.
-      const isFooter = (node: Node) => node instanceof Element && node.matches('[data-mk-part="footer"]');
-      body.append(...original.filter((node) => !isFooter(node)));
-      dialog.append(header, body, ...original.filter(isFooter));
-    } else if (hasParts) {
-      dialog.append(...original);
-    } else {
-      const body = document.createElement('div');
-      body.dataset.mkPart = 'body';
-      body.append(...original);
-      dialog.append(body);
-    }
-    this.append(dialog);
-
-    const engine = createDialog(dialog, {
-      variant: (options.variant as DialogVariant) ?? 'morph',
-      placement: (options.placement as DialogPlacement) ?? 'center',
-      backdrop: !options.noBackdrop,
-      closeOnBackdrop: !options.persistent,
-      drag: !options.noDrag,
-      float: (options.float as string) || false,
-      triggers: this.id || false,
-      labels: { close: closeLabel },
-    });
-    this.dialog = engine;
-    return {
-      destroy: () => {
-        engine.destroy();
-        this.append(...original);
-        dialog.remove();
-        this.dialog = null;
-      },
-    };
-  }
-
-  open(origin?: HTMLElement | null) {
-    this.dialog?.open(origin);
-  }
-
-  close() {
-    this.dialog?.close();
-  }
-
-  get isOpen() {
-    return this.dialog?.isOpen ?? false;
-  }
-}
-
-export const defineDialog = () => defineElement('mk-dialog', MkDialogElement);
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import type { Instance } from '../../core/types';
+import { iconSvg } from '../icons';
+import { createDialog, type DialogInstance, type DialogOptions, type DialogPlacement, type DialogVariant } from './engine';
+
+/**
+ * <mk-dialog id="crear" heading="Crear proyecto" [description] [shared="id"] [variant="liquid"]
+ *   [placement="anchor|side"] [size="sm|lg|xl"] [float="key"] [no-backdrop] [persistent] [no-drag]>…</mk-dialog>
+ * Any [data-mk-open="crear"] opens it from that button. On connect its children
+ * move into a <dialog class="mk-dialog"> (with `heading`, a header with title and
+ * close button and a body are made for them); on disconnect they move back.
+ */
+export class MkDialogElement extends MkElement<Instance> {
+  static options: Record<string, OptionType> = {
+    variant: 'string',
+    placement: 'string',
+    size: 'string',
+    heading: 'string',
+    description: 'string',
+    float: 'string',
+    noBackdrop: 'boolean',
+    persistent: 'boolean',
+    noDrag: 'boolean',
+    closeLabel: 'string',
+    shared: 'string',
+  };
+
+  dialog: DialogInstance | null = null;
+
+  protected create(options: Record<string, unknown>): Instance {
+    const original = [...this.childNodes];
+    const dialog = document.createElement('dialog');
+    dialog.className = 'mk-dialog';
+    if (options.size && options.size !== 'md') dialog.classList.add(`mk-dialog--${options.size}`);
+    const hasParts = original.some((node) => node instanceof Element && node.matches('[data-mk-part]'));
+    const closeLabel = (options.closeLabel as string | undefined) ?? 'Cerrar';
+    if (options.heading) {
+      const header = document.createElement('header');
+      header.dataset.mkPart = 'header';
+      const text = document.createElement('div');
+      const title = document.createElement('h2');
+      title.dataset.mkPart = 'title';
+      title.textContent = options.heading as string;
+      if (options.shared) title.dataset.mkShared = options.shared as string;
+      text.append(title);
+      if (options.description) {
+        const description = document.createElement('p');
+        description.dataset.mkPart = 'description';
+        description.textContent = options.description as string;
+        text.append(description);
+      }
+      const actions = document.createElement('div');
+      actions.dataset.mkPart = 'actions';
+      if (options.float) {
+        const handle = document.createElement('button');
+        handle.type = 'button';
+        handle.dataset.mkPart = 'handle';
+        handle.innerHTML = iconSvg('expand', 18);
+        actions.append(handle);
+      }
+      const close = document.createElement('button');
+      close.type = 'button';
+      close.dataset.mkPart = 'close';
+      close.setAttribute('aria-label', closeLabel);
+      close.innerHTML = iconSvg('close');
+      actions.append(close);
+      header.append(text, actions);
+      const body = document.createElement('div');
+      body.dataset.mkPart = 'body';
+      // A footer stays out of the scrolling body.
+      const isFooter = (node: Node) => node instanceof Element && node.matches('[data-mk-part="footer"]');
+      body.append(...original.filter((node) => !isFooter(node)));
+      dialog.append(header, body, ...original.filter(isFooter));
+    } else if (hasParts) {
+      dialog.append(...original);
+    } else {
+      const body = document.createElement('div');
+      body.dataset.mkPart = 'body';
+      body.append(...original);
+      dialog.append(body);
+    }
+    this.append(dialog);
+
+    const engine = this.createEngine(dialog, {
+      variant: (options.variant as DialogVariant) ?? 'morph',
+      placement: (options.placement as DialogPlacement) ?? 'center',
+      backdrop: !options.noBackdrop,
+      closeOnBackdrop: !options.persistent,
+      drag: !options.noDrag,
+      float: (options.float as string) || false,
+      triggers: this.id || false,
+      labels: { close: closeLabel },
+    }, options);
+    this.dialog = engine;
+    return {
+      destroy: () => {
+        engine.destroy();
+        this.append(...original);
+        dialog.remove();
+        this.dialog = null;
+      },
+    };
+  }
+
+  /** The engine on the built <dialog> (Drawer swaps it). */
+  protected createEngine(dialog: HTMLDialogElement, options: DialogOptions, _attributes: Record<string, unknown>): DialogInstance {
+    return createDialog(dialog, options);
+  }
+
+  open(origin?: HTMLElement | null) {
+    this.dialog?.open(origin);
+  }
+
+  close() {
+    this.dialog?.close();
+  }
+
+  get isOpen() {
+    return this.dialog?.isOpen ?? false;
+  }
+}
+
+export const defineDialog = () => defineElement('mk-dialog', MkDialogElement);