@zeyos/zx 2.1.0 → 2.2.1

package/src/components/modal/modal.js

@@ -0,0 +1,203 @@
+import { Component } from '../../core/component.js';
+import { h } from '../../core/dom.js';
+
+/**
+ * @typedef {Object} ModalOptions
+ * @property {Node|string|number|{toElement: () => Node|null}|null} [content=null] Modal content.
+ * @property {string|number} [width='auto'] CSS width, or a pixel width when numeric.
+ * @property {boolean} [closable=true] Whether Escape may close the modal.
+ * @property {boolean} [lightDismiss=false] Whether a backdrop click closes the modal.
+ * @property {boolean} [destroyOnClose=false] Whether to destroy the modal after it closes.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [onopen] Open event listener.
+ * @property {(event: CustomEvent<{result: unknown}>) => void} [onclose] Close event listener.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [oncancel] Cancel event listener.
+ */
+
+/**
+ * Thin native-dialog overlay with lifecycle-safe content and dismissal behavior.
+ * The constructor always creates and appends a new dialog; its target argument is ignored.
+ * @fires Modal#open
+ * @fires Modal#close
+ * @fires Modal#cancel
+ * @extends {Component<ModalOptions>}
+ */
+export class Modal extends Component {
+  static cssName = 'modal';
+
+  /** @type {Readonly<ModalOptions>} */
+  static defaults = {
+    content: null,
+    width: 'auto',
+    closable: true,
+    lightDismiss: false,
+    destroyOnClose: false
+  };
+
+  #pendingResult;
+  #hasPendingResult = false;
+  #destroying = false;
+
+  /**
+   * Creates a modal appended to `document.body`.
+   * @param {Element|string|null} [_target=null] Ignored; Modal always owns its root dialog.
+   * @param {ModalOptions} [options={}] Modal options.
+   */
+  constructor(_target = null, options = {}) {
+    super(null, options);
+    this.#setWidth(this.options.width);
+    replaceContent(this.refs.content, this.options.content);
+
+    this.listen(this.el, 'cancel', (event) => {
+      const cancelEvent = this.emit('cancel');
+      if (!this.options.closable || cancelEvent.defaultPrevented) event.preventDefault();
+    });
+    this.listen(this.el, 'close', () => {
+      this.el.dataset.state = 'closed';
+      delete this.el.dataset.zxOverlayOrder;
+      const result = this.#hasPendingResult ? this.#pendingResult : (this.el.returnValue || undefined);
+      this.#pendingResult = undefined;
+      this.#hasPendingResult = false;
+      this.emit('close', { result });
+      if (this.options.destroyOnClose && !this.#destroying) this.destroy();
+    });
+    this.listen(this.el, 'click', (event) => {
+      if (!this.options.lightDismiss || event.target !== this.el || !isBackdropClick(this.el, event)) return;
+      this.close();
+    });
+  }
+
+  /**
+   * Creates the owned native dialog.
+   * @returns {HTMLDialogElement}
+   */
+  render() {
+    const dialog = /** @type {HTMLDialogElement} */ (h('dialog', {
+      class: 'zx-modal'
+    }, h('div', { class: 'zx-modal__content', ref: 'content' })));
+    dialog.dataset.state = 'closed';
+    document.body.append(dialog);
+    return dialog;
+  }
+
+  /**
+   * Opens the modal in the browser top layer.
+   * @returns {this}
+   * @fires Modal#open
+   */
+  open() {
+    if (this.isOpen()) return this;
+    this.el.dataset.zxOverlayOrder = String(nextOverlayOrder());
+    this.el.returnValue = '';
+    try {
+      this.el.showModal();
+    } catch (error) {
+      delete this.el.dataset.zxOverlayOrder;
+      throw error;
+    }
+    this.el.dataset.state = 'open';
+    this.emit('open');
+    return this;
+  }
+
+  /**
+   * Closes the modal with an optional result.
+   * @param {unknown} [result] Result included in the close event.
+   * @returns {this}
+   */
+  close(result) {
+    if (!this.isOpen()) return this;
+    this.#pendingResult = result;
+    this.#hasPendingResult = true;
+    this.el.close(typeof result === 'string' ? result : '');
+    return this;
+  }
+
+  /**
+   * Replaces the modal content without interpreting strings as HTML.
+   * @param {Node|string|number|{toElement: () => Node|null}|null} content Content to display.
+   * @returns {this}
+   */
+  setContent(content) {
+    replaceContent(this.refs.content, content);
+    return this;
+  }
+
+  /**
+   * Reports whether the native dialog is open.
+   * @returns {boolean}
+   */
+  isOpen() {
+    return this.el.open;
+  }
+
+  /**
+   * Closes and removes the owned dialog. Safe to call repeatedly.
+   * @returns {void}
+   */
+  destroy() {
+    if (this.#destroying) return;
+    this.#destroying = true;
+    if (this.isOpen()) this.el.close();
+    super.destroy();
+  }
+
+  /** @param {string|number} width @returns {void} */
+  #setWidth(width) {
+    if (typeof width === 'number' && Number.isFinite(width)) {
+      this.el.style.inlineSize = `${Math.max(0, width)}px`;
+    } else {
+      this.el.style.inlineSize = String(width ?? 'auto');
+    }
+  }
+}
+
+/**
+ * Fired after the modal enters the top layer.
+ * @event Modal#open
+ * @type {CustomEvent<Record<string, never>>}
+ */
+
+/**
+ * Fired after the native dialog closes.
+ * @event Modal#close
+ * @type {CustomEvent<{result: unknown}>}
+ */
+
+/**
+ * Fired when Escape requests cancellation. Preventing it keeps the modal open.
+ * @event Modal#cancel
+ * @type {CustomEvent<Record<string, never>>}
+ */
+
+/**
+ * @param {Element} target
+ * @param {Node|string|number|{toElement: () => Node|null}|null|undefined} content
+ * @returns {void}
+ */
+function replaceContent(target, content) {
+  target.replaceChildren();
+  if (content == null) return;
+  if (typeof content === 'string' || typeof content === 'number') {
+    target.append(document.createTextNode(String(content)));
+  } else if (typeof content.toElement === 'function') {
+    const element = content.toElement();
+    if (element) target.append(element);
+  } else if (typeof content.nodeType === 'number') {
+    target.append(content);
+  }
+}
+
+/** @param {HTMLDialogElement} dialog @param {MouseEvent} event @returns {boolean} */
+function isBackdropClick(dialog, event) {
+  const rect = dialog.getBoundingClientRect();
+  return event.clientX < rect.left || event.clientX > rect.right ||
+    event.clientY < rect.top || event.clientY > rect.bottom;
+}
+
+/** @returns {number} */
+function nextOverlayOrder() {
+  const orders = Array.from(document.querySelectorAll('[data-zx-overlay-order]'), (element) =>
+    Number(element.getAttribute('data-zx-overlay-order')) || 0
+  );
+  return Math.max(0, ...orders) + 1;
+}

package/src/components/multi-value-editor/field-adapter.js

@@ -0,0 +1,44 @@
+import { Field } from '../field/field.js';
+import { MultiValueEditor } from './multi-value-editor.js';
+
+/**
+ * Registers the MultiValueEditor-backed `multivalueeditor` field type.
+ * @returns {void}
+ */
+export function registerMultiValueEditorFieldAdapter() {
+  Field.register('multivalueeditor', (field, options) => {
+    const editor = field.own(new MultiValueEditor(null, {
+      ...(options.props ?? {}),
+      values: Array.isArray(options.value) ? options.value : []
+    }));
+    const originalDisabled = new WeakMap();
+    let disabled = false;
+    const syncDisabled = () => {
+      editor.el.setAttribute('aria-disabled', String(disabled));
+      for (const control of editor.el.querySelectorAll('input, button, select, textarea')) {
+        if (disabled) {
+          if (!originalDisabled.has(control)) originalDisabled.set(control, Boolean(control.disabled));
+          control.disabled = true;
+        } else if (originalDisabled.has(control)) {
+          control.disabled = originalDisabled.get(control);
+          originalDisabled.delete(control);
+        }
+      }
+    };
+    field.listen(editor.el, 'change', (event) => event.stopImmediatePropagation());
+    editor.on('change', (event) => field.emit('change', { value: event.detail.values }));
+    return {
+      el: editor.el,
+      get: () => editor.getValues(),
+      set: (value) => {
+        editor.setValues(Array.isArray(value) ? value : [], { silent: true });
+        syncDisabled();
+      },
+      focus: () => editor.el.querySelector('.zx-multi-value-editor__value:not([disabled]), button:not([disabled])')?.focus(),
+      setDisabled: (value) => {
+        disabled = Boolean(value);
+        syncDisabled();
+      }
+    };
+  });
+}

package/src/components/multi-value-editor/multi-value-editor.css

@@ -0,0 +1,56 @@
+.zx-multi-value-editor {
+  display: grid;
+  gap: var(--zx-space-3);
+  min-inline-size: 0;
+  padding: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-surface);
+  container-type: inline-size;
+}
+
+.zx-multi-value-editor__rows {
+  display: grid;
+  gap: var(--zx-space-2);
+}
+
+.zx-multi-value-editor__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--zx-space-2);
+  align-items: center;
+}
+
+.zx-multi-value-editor__value {
+  inline-size: 100%;
+}
+
+.zx-multi-value-editor__controls {
+  display: inline-flex;
+  gap: var(--zx-space-1);
+}
+
+.zx-multi-value-editor__controls .zx-btn {
+  min-inline-size: var(--zx-control-height);
+  padding-inline: var(--zx-space-2);
+}
+
+.zx-multi-value-editor__controls .zx-btn:last-child {
+  color: var(--zx-color-danger);
+}
+
+.zx-multi-value-editor__add {
+  justify-self: start;
+  border-color: var(--zx-color-accent);
+  color: var(--zx-color-accent);
+}
+
+@container (max-width: 24rem) {
+  .zx-multi-value-editor__row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .zx-multi-value-editor__controls {
+    justify-self: end;
+  }
+}

package/src/components/multi-value-editor/multi-value-editor.js

@@ -0,0 +1,170 @@
+import { Component } from '../../core/component.js';
+import { h } from '../../core/dom.js';
+
+/**
+ * @typedef {Object} MultiValueEditorOptions
+ * @property {unknown[]} [values=[]] Initial ordered values.
+ * @property {unknown[]|Record<string, string>|null} [options=null] Allowed values; null uses text inputs.
+ * @property {string} [addLabel='Add value'] Add-row button text.
+ */
+
+/**
+ * Ordered value editor with explicit editable rows and controls.
+ * @fires MultiValueEditor#change
+ * @extends {Component<MultiValueEditorOptions>}
+ */
+export class MultiValueEditor extends Component {
+  static cssName = 'multi-value-editor';
+
+  /** @type {MultiValueEditorOptions} */
+  static defaults = { values: [], options: null, addLabel: 'Add value' };
+
+  /** @returns {HTMLElement} */
+  render() {
+    const root = /** @type {HTMLElement} */ (this.el ?? h('div'));
+    this._values = Array.isArray(this.options.values) ? this.options.values.map(String) : [];
+    this._ownedNodes = [];
+    this._rows = h('div', { class: 'zx-multi-value-editor__rows' });
+    this._add = h('button', {
+      class: 'zx-btn zx-multi-value-editor__add',
+      type: 'button',
+      dataset: { action: 'add' }
+    }, String(this.options.addLabel ?? 'Add value'));
+    this._ownedNodes.push(this._rows, this._add);
+    root.append(this._rows, this._add);
+    this.listen(root, 'click', (event) => this._handleClick(event));
+    this.listen(this._rows, 'change', (event) => this._handleChange(event));
+    this._renderRows();
+    return root;
+  }
+
+  /**
+   * Returns a copy of the ordered values.
+   * @returns {string[]}
+   */
+  getValues() {
+    return this._values.slice();
+  }
+
+  /**
+   * Replaces all rows.
+   * @param {unknown[]} values New ordered values.
+   * @param {{silent?: boolean}} [options={}] Set `silent` to suppress `change`.
+   * @returns {this}
+   */
+  setValues(values, { silent = false } = {}) {
+    this._values = Array.isArray(values) ? values.map(String) : [];
+    this._renderRows();
+    if (!silent) this.emit('change', { values: this.getValues() });
+    return this;
+  }
+
+  /** @param {number} [focusIndex=-1] @returns {void} */
+  _renderRows(focusIndex = -1) {
+    const choices = normalizeOptions(this.options.options);
+    const useSelect = this.options.options !== null;
+    const rows = this._values.map((value, index) => {
+      const control = useSelect ? h('select', {
+        class: 'zx-multi-value-editor__value',
+        ariaLabel: `Value ${index + 1}`,
+        dataset: { index }
+      }, choices.map(([optionValue, label]) => h('option', {
+        value: optionValue,
+        selected: optionValue === value
+      }, label))) : h('input', {
+        class: 'zx-multi-value-editor__value',
+        type: 'text',
+        value,
+        ariaLabel: `Value ${index + 1}`,
+        dataset: { index }
+      });
+      return h('div', { class: 'zx-multi-value-editor__row', dataset: { row: index } },
+        control,
+        h('div', { class: 'zx-multi-value-editor__controls' },
+          h('button', {
+            class: 'zx-btn',
+            type: 'button',
+            disabled: index === 0,
+            ariaLabel: `Move value ${index + 1} up`,
+            dataset: { action: 'up', index }
+          }, '↑'),
+          h('button', {
+            class: 'zx-btn',
+            type: 'button',
+            disabled: index === this._values.length - 1,
+            ariaLabel: `Move value ${index + 1} down`,
+            dataset: { action: 'down', index }
+          }, '↓'),
+          h('button', {
+            class: 'zx-btn',
+            type: 'button',
+            ariaLabel: `Remove value ${index + 1}`,
+            dataset: { action: 'remove', index }
+          }, '×')
+        )
+      );
+    });
+    this._rows.replaceChildren(...rows);
+    if (focusIndex >= 0) rows[focusIndex]?.querySelector('.zx-multi-value-editor__value')?.focus();
+  }
+
+  /** @param {MouseEvent} event @returns {void} */
+  _handleClick(event) {
+    const button = event.target instanceof Element ? event.target.closest('[data-action]') : null;
+    if (!button || !this.el.contains(button)) return;
+    const action = button.dataset.action;
+    const index = Number(button.dataset.index);
+    if (action === 'add') {
+      const choices = normalizeOptions(this.options.options);
+      this._values.push(this.options.options === null ? '' : choices[0]?.[0] ?? '');
+      this._renderRows(this._values.length - 1);
+      this._emitChange();
+    } else if (action === 'remove' && Number.isInteger(index)) {
+      this._values.splice(index, 1);
+      this._renderRows(Math.min(index, this._values.length - 1));
+      this._emitChange();
+    } else if ((action === 'up' || action === 'down') && Number.isInteger(index)) {
+      const target = index + (action === 'up' ? -1 : 1);
+      if (target < 0 || target >= this._values.length) return;
+      [this._values[index], this._values[target]] = [this._values[target], this._values[index]];
+      this._renderRows(target);
+      this._emitChange();
+    }
+  }
+
+  /** @param {Event} event @returns {void} */
+  _handleChange(event) {
+    const control = event.target instanceof Element ? event.target.closest('[data-index]') : null;
+    if (!control) return;
+    const index = Number(control.dataset.index);
+    if (!Number.isInteger(index) || index < 0 || index >= this._values.length) return;
+    this._values[index] = control.value;
+    this._emitChange();
+  }
+
+  /** @returns {void} */
+  _emitChange() {
+    this.emit('change', { values: this.getValues() });
+  }
+
+  /** @returns {void} */
+  destroy() {
+    for (const node of this._ownedNodes ?? []) node.remove();
+    super.destroy();
+  }
+}
+
+/** @param {MultiValueEditorOptions['options']} options @returns {Array<[string, string]>} */
+function normalizeOptions(options) {
+  if (Array.isArray(options)) return options.map((value) => [String(value), String(value)]);
+  if (options && typeof options === 'object') {
+    return Object.entries(options).map(([value, label]) => [value, String(label)]);
+  }
+  return [];
+}
+
+/**
+ * Ordered values changed event.
+ * @event MultiValueEditor#change
+ * @type {CustomEvent<{values: string[]}>
+ */

package/src/components/navigation-bar/navigation-bar.css

@@ -0,0 +1,130 @@
+.zx-navigation-bar {
+  min-inline-size: 0;
+  container-type: inline-size;
+}
+
+.zx-navigation-bar__bar {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--zx-space-3);
+  border: 1px solid var(--zx-color-border);
+  border-radius: var(--zx-radius-lg);
+  background: var(--zx-color-bg-raised);
+  padding: var(--zx-space-2) var(--zx-space-3);
+  box-shadow: var(--zx-overlay-shadow);
+}
+
+.zx-navigation-bar__brand {
+  flex: none;
+  padding-inline: var(--zx-space-2);
+  color: var(--zx-color-accent);
+  font-size: var(--zx-text-xl);
+  font-weight: 750;
+}
+
+.zx-navigation-bar__navigation {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.zx-navigation-bar__items {
+  display: flex;
+  min-inline-size: 0;
+  align-items: center;
+  gap: var(--zx-space-1);
+}
+
+.zx-navigation-bar__item {
+  display: inline-flex;
+  min-block-size: var(--zx-control-height);
+  align-items: center;
+  gap: var(--zx-space-2);
+  border: 0;
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-raised);
+  padding-inline: var(--zx-control-pad-x);
+  color: var(--zx-color-text-muted);
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.zx-navigation-bar__item:hover:not([aria-disabled="true"]) {
+  background: var(--zx-color-bg-hover);
+  color: var(--zx-color-text);
+}
+
+.zx-navigation-bar__item[aria-current="page"],
+.zx-navigation-bar__item[aria-selected="true"] {
+  background: var(--zx-color-bg-selected);
+  color: var(--zx-color-accent);
+  font-weight: 650;
+}
+
+.zx-navigation-bar__item[aria-disabled="true"] {
+  color: var(--zx-color-text-muted);
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.zx-navigation-bar__item:focus-visible {
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-navigation-bar__badge {
+  min-inline-size: var(--zx-space-4);
+  border-radius: var(--zx-radius-full);
+  background: var(--zx-color-accent);
+  padding-inline: var(--zx-space-1);
+  color: var(--zx-color-on-accent);
+  font-size: var(--zx-text-sm);
+  font-weight: 700;
+  line-height: var(--zx-space-4);
+  text-align: center;
+}
+
+.zx-navigation-bar__more {
+  display: none;
+}
+
+.zx-navigation-bar__more[data-empty="true"] {
+  display: none;
+}
+
+.zx-navigation-bar__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--zx-space-2);
+  margin-inline-start: auto;
+}
+
+.zx-navigation-bar__actions:empty {
+  display: none;
+}
+
+.zx-navigation-bar__panels {
+  border: 1px solid var(--zx-color-border);
+  border-block-start: 0;
+  border-radius: 0 0 var(--zx-radius-lg) var(--zx-radius-lg);
+  background: var(--zx-color-bg-surface);
+}
+
+.zx-navigation-bar__panel {
+  padding: var(--zx-space-4);
+}
+
+.zx-navigation-bar__panel:focus-visible {
+  box-shadow: inset var(--zx-focus-ring);
+}
+
+@container (max-width: 44rem) {
+  .zx-navigation-bar__items {
+    display: none;
+  }
+
+  .zx-navigation-bar__more:not([data-empty="true"]) {
+    display: inline-flex;
+  }
+}