@zeyos/zx 2.2.1 → 2.3.0

package/dist/zx-compat.esm.js

@@ -5118,18 +5118,34 @@ function registerFieldUploadAdapter() {
 }
 
 // src/components/multi-value-editor/multi-value-editor.js
+var REORDER = Object.freeze({
+  both: { drag: true, buttons: true },
+  buttons: { drag: false, buttons: true },
+  drag: { drag: true, buttons: false },
+  none: { drag: false, buttons: false }
+});
+var PARTS = Object.freeze({
+  value: ".zx-multi-value-editor__value",
+  handle: ".zx-multi-value-editor__handle",
+  up: '[data-action="up"]',
+  down: '[data-action="down"]'
+});
 var MultiValueEditor = class extends Component {
   static cssName = "multi-value-editor";
   /** @type {MultiValueEditorOptions} */
-  static defaults = { values: [], options: null, addLabel: "Add value" };
+  static defaults = { values: [], options: null, addLabel: "Add value", reorder: "both" };
   /** @returns {HTMLElement} */
   render() {
     const root = (
       /** @type {HTMLElement} */
       this.el ?? h("div")
     );
+    this.el = root;
     this._values = Array.isArray(this.options.values) ? this.options.values.map(String) : [];
     this._ownedNodes = [];
+    this._initialState = root.getAttribute("data-state");
+    this._dragIndex = -1;
+    this._armed = null;
     this._rows = h("div", { class: "zx-multi-value-editor__rows" });
     this._add = h("button", {
       class: "zx-btn zx-multi-value-editor__add",
@@ -5140,6 +5156,17 @@ var MultiValueEditor = class extends Component {
     root.append(this._rows, this._add);
     this.listen(root, "click", (event) => this._handleClick(event));
     this.listen(this._rows, "change", (event) => this._handleChange(event));
+    this.listen(this._rows, "keydown", (event) => this._handleKeydown(event));
+    if (this._reorder().drag) {
+      this.listen(this._rows, "pointerdown", (event) => this._handlePointerDown(event));
+      this.listen(this._rows, "dragstart", (event) => this._handleDragStart(event));
+      this.listen(this._rows, "dragover", (event) => this._handleDragOver(event));
+      this.listen(this._rows, "dragleave", (event) => this._handleDragLeave(event));
+      this.listen(this._rows, "drop", (event) => this._handleDrop(event));
+      this.listen(this._rows, "dragend", () => this._finishDrag());
+      this.listen(document, "pointerup", () => this._disarm());
+      this.listen(document, "pointercancel", () => this._disarm());
+    }
     this._renderRows();
     return root;
   }
@@ -5162,16 +5189,27 @@ var MultiValueEditor = class extends Component {
     if (!silent) this.emit("change", { values: this.getValues() });
     return this;
   }
-  /** @param {number} [focusIndex=-1] @returns {void} */
-  _renderRows(focusIndex = -1) {
+  /** @returns {{drag: boolean, buttons: boolean}} */
+  _reorder() {
+    return REORDER[this.options.reorder] ?? REORDER.both;
+  }
+  /**
+   * @param {number} [focusIndex=-1] Row to focus after the render, or -1 for none.
+   * @param {keyof PARTS} [focusPart='value'] Which control of that row takes focus.
+   * @returns {void}
+   */
+  _renderRows(focusIndex = -1, focusPart = "value") {
     const choices = normalizeOptions2(this.options.options);
     const useSelect = this.options.options !== null;
+    const { drag, buttons } = this._reorder();
+    const last = this._values.length - 1;
     const rows = this._values.map((value, index) => {
+      const entries = !useSelect || choices.some(([option]) => option === value) ? choices : [[value, value], ...choices];
       const control = useSelect ? h("select", {
         class: "zx-multi-value-editor__value",
         ariaLabel: `Value ${index + 1}`,
         dataset: { index }
-      }, choices.map(([optionValue, label]) => h("option", {
+      }, entries.map(([optionValue, label]) => h("option", {
         value: optionValue,
         selected: optionValue === value
       }, label))) : h("input", {
@@ -5184,40 +5222,52 @@ var MultiValueEditor = class extends Component {
       return h(
         "div",
         { class: "zx-multi-value-editor__row", dataset: { row: index } },
+        drag ? h("button", {
+          class: "zx-multi-value-editor__handle",
+          type: "button",
+          ariaLabel: `Reorder value ${index + 1}. Use the arrow keys to move it.`,
+          dataset: { action: "grab", index }
+        }, icon("drag", { size: 12 })) : null,
         control,
         h(
           "div",
           { class: "zx-multi-value-editor__controls" },
-          h("button", {
+          buttons ? h("button", {
             class: "zx-btn",
             type: "button",
-            disabled: index === 0,
+            // `aria-disabled` rather than `disabled`: the buttons re-render on every move, and a
+            // control that disables itself under the reader's finger drops focus to the document.
+            ariaDisabled: String(index === 0),
             ariaLabel: `Move value ${index + 1} up`,
             dataset: { action: "up", index }
-          }, "\u2191"),
-          h("button", {
+          }, icon("chevron-up", { size: 12 })) : null,
+          buttons ? h("button", {
             class: "zx-btn",
             type: "button",
-            disabled: index === this._values.length - 1,
+            ariaDisabled: String(index === last),
             ariaLabel: `Move value ${index + 1} down`,
             dataset: { action: "down", index }
-          }, "\u2193"),
+          }, icon("chevron-down", { size: 12 })) : null,
           h("button", {
             class: "zx-btn",
             type: "button",
             ariaLabel: `Remove value ${index + 1}`,
             dataset: { action: "remove", index }
-          }, "\xD7")
+          }, icon("x", { size: 12 }))
         )
       );
     });
     this._rows.replaceChildren(...rows);
-    if (focusIndex >= 0) rows[focusIndex]?.querySelector(".zx-multi-value-editor__value")?.focus();
+    if (focusIndex >= 0) {
+      const row = rows[Math.min(focusIndex, rows.length - 1)];
+      row?.querySelector(PARTS[focusPart] ?? PARTS.value)?.focus();
+    }
   }
   /** @param {MouseEvent} event @returns {void} */
   _handleClick(event) {
     const button2 = event.target instanceof Element ? event.target.closest("[data-action]") : null;
     if (!button2 || !this.el.contains(button2)) return;
+    if (button2.getAttribute("aria-disabled") === "true") return;
     const action = button2.dataset.action;
     const index = Number(button2.dataset.index);
     if (action === "add") {
@@ -5230,28 +5280,156 @@ var MultiValueEditor = class extends Component {
       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();
+      this._move(index, index + (action === "up" ? -1 : 1), action);
     }
   }
   /** @param {Event} event @returns {void} */
   _handleChange(event) {
     const control = event.target instanceof Element ? event.target.closest("[data-index]") : null;
-    if (!control) return;
+    if (!control || !("value" in 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();
   }
+  /**
+   * The handle is the keyboard equivalent of dragging it, so `reorder: 'drag'` is still operable
+   * without a pointer.
+   * @param {KeyboardEvent} event
+   * @returns {void}
+   */
+  _handleKeydown(event) {
+    const handle = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__handle") : null;
+    if (!handle) return;
+    const index = Number(handle.dataset.index);
+    const target = event.key === "ArrowUp" ? index - 1 : event.key === "ArrowDown" ? index + 1 : event.key === "Home" ? 0 : event.key === "End" ? this._values.length - 1 : -1;
+    if (target < 0 || target >= this._values.length) return;
+    event.preventDefault();
+    this._move(index, target, "handle");
+  }
+  /**
+   * Arms the row for dragging. Only the handle does this, so text selection inside a row's input
+   * keeps working and a stray drag cannot reorder anything.
+   * @param {PointerEvent} event
+   * @returns {void}
+   */
+  _handlePointerDown(event) {
+    const handle = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__handle") : null;
+    this._disarm();
+    if (!handle || handle.disabled) return;
+    const row = (
+      /** @type {HTMLElement|null} */
+      handle.closest(".zx-multi-value-editor__row")
+    );
+    if (!row) return;
+    row.draggable = true;
+    this._armed = row;
+  }
+  /** @returns {void} */
+  _disarm() {
+    if (this._armed) this._armed.draggable = false;
+    this._armed = null;
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragStart(event) {
+    const row = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__row") : null;
+    if (!row || row !== this._armed) {
+      event.preventDefault();
+      return;
+    }
+    this._dragIndex = Number(row.dataset.row);
+    row.dataset.dragging = "true";
+    this.el.setAttribute("data-state", "dragging");
+    event.dataTransfer?.setData("text/plain", String(this._dragIndex));
+    if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragOver(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    this._showDrop(this._dropTarget(event.clientY));
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDragLeave(event) {
+    const to = event.relatedTarget;
+    if (to instanceof Node && this._rows.contains(to)) return;
+    this._clearDrop();
+  }
+  /** @param {DragEvent} event @returns {void} */
+  _handleDrop(event) {
+    if (this._dragIndex < 0) return;
+    event.preventDefault();
+    const from = this._dragIndex;
+    const slot = this._dropTarget(event.clientY);
+    this._finishDrag();
+    this._move(from, slot > from ? slot - 1 : slot, "handle");
+  }
+  /** @returns {void} */
+  _finishDrag() {
+    this._dragIndex = -1;
+    this._disarm();
+    this._clearDrop();
+    for (const row of this._rows.children) delete /** @type {HTMLElement} */
+    row.dataset.dragging;
+    if (this._initialState === null) this.el.removeAttribute("data-state");
+    else this.el.setAttribute("data-state", this._initialState);
+  }
+  /**
+   * Insertion slot (0…length) for a pointer at `clientY`.
+   * @param {number} clientY Pointer position.
+   * @returns {number}
+   */
+  _dropTarget(clientY) {
+    const rows = [...this._rows.children];
+    for (const [index, row] of rows.entries()) {
+      const box = row.getBoundingClientRect();
+      if (clientY < box.top + box.height / 2) return index;
+    }
+    return rows.length;
+  }
+  /** @param {number} slot Insertion slot to mark. @returns {void} */
+  _showDrop(slot) {
+    const rows = [...this._rows.children];
+    const inert = slot === this._dragIndex || slot === this._dragIndex + 1;
+    for (const [index, row] of rows.entries()) {
+      const cell = (
+        /** @type {HTMLElement} */
+        row
+      );
+      if (!inert && index === slot) cell.dataset.drop = "before";
+      else if (!inert && slot === rows.length && index === rows.length - 1) cell.dataset.drop = "after";
+      else delete cell.dataset.drop;
+    }
+  }
+  /** @returns {void} */
+  _clearDrop() {
+    for (const row of this._rows.children) delete /** @type {HTMLElement} */
+    row.dataset.drop;
+  }
+  /**
+   * @param {number} from Index to move.
+   * @param {number} to Destination index.
+   * @param {keyof PARTS} part Control of the moved row that takes focus.
+   * @returns {boolean} Whether anything moved.
+   */
+  _move(from, to, part) {
+    const size = this._values.length;
+    if (from === to || from < 0 || to < 0 || from >= size || to >= size) return false;
+    const [value] = this._values.splice(from, 1);
+    this._values.splice(to, 0, value);
+    this._renderRows(to, part);
+    this._emitChange();
+    return true;
+  }
   /** @returns {void} */
   _emitChange() {
     this.emit("change", { values: this.getValues() });
   }
   /** @returns {void} */
   destroy() {
+    if (this._initialState === null) this.el?.removeAttribute("data-state");
+    else this.el?.setAttribute("data-state", this._initialState);
     for (const node of this._ownedNodes ?? []) node.remove();
     super.destroy();
   }
@@ -6276,6 +6454,7 @@ var Select = class _Select extends Component {
   /** @type {SelectOptions} */
   static defaults = {
     items: [],
+    fixedItems: [],
     valueKey: "ID",
     labelKey: "name",
     renderItem: null,
@@ -6295,6 +6474,8 @@ var Select = class _Select extends Component {
   render() {
     this._items = [];
     this._visibleItems = [];
+    this._fixedItems = [];
+    this._visibleFixed = [];
     this._selected = null;
     this._optionEntries = [];
     this._activeIndex = -1;
@@ -6378,6 +6559,8 @@ var Select = class _Select extends Component {
     root.replaceChildren(control, panel);
     this._items = Array.isArray(this.options.items) ? this.options.items.slice() : [];
     this._visibleItems = this._items.slice();
+    this._fixedItems = Array.isArray(this.options.fixedItems) ? this.options.fixedItems.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
     this._disabled = Boolean(this.options.disabled);
     this._handleTypeahead = typeahead(
       () => this._optionEntries.filter((entry) => !entry.clear).map((entry) => entry.element),
@@ -6454,7 +6637,22 @@ var Select = class _Select extends Component {
     const selectedValue = this.value;
     this._items = Array.isArray(items) ? items.slice() : [];
     this._visibleItems = this._items.slice();
-    this._selected = selectedValue == null ? null : this._items.find((item) => Object.is(this._itemValue(item), selectedValue)) ?? null;
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
+    this._syncInputValue();
+    this._renderOptions();
+    this._position?.update();
+    return this;
+  }
+  /**
+   * Replaces the pinned choices and preserves selection by ID when possible.
+   * @param {SelectItem[]} items New fixed items.
+   * @returns {this}
+   */
+  setFixedItems(items) {
+    const selectedValue = this.value;
+    this._fixedItems = Array.isArray(items) ? items.slice() : [];
+    this._visibleFixed = this._fixedItems.slice();
+    this._selected = selectedValue == null ? null : this._findItem(selectedValue);
     this._syncInputValue();
     this._renderOptions();
     this._position?.update();
@@ -6508,6 +6706,7 @@ var Select = class _Select extends Component {
     this.refs.input.removeAttribute("aria-activedescendant");
     this._activeIndex = -1;
     this._visibleItems = this._items.slice();
+    this._visibleFixed = this._fixedItems.slice();
     this._syncInputValue();
     this.emit("close", {});
     return this;
@@ -6563,6 +6762,38 @@ var Select = class _Select extends Component {
     select.set(requestedValue, { silent: true });
     return select;
   }
+  /**
+   * Creates the record-permission picker: the fixed Private and Public choices above the groups a
+   * record can be shared with. The value is the tri-state ZeyOS stores — `false` for private,
+   * `true` for public, or a group ID — so the control binds straight to the record field.
+   *
+   * @param {Element|string|null} target Component target.
+   * @param {SelectOptions & {groups?: SelectItem[]|((query: string) => Promise<SelectItem[]>|SelectItem[])}} [options={}]
+   *   Select overrides other than the fixed choices; `groups` holds the shareable groups, either as
+   *   an array (filtered locally) or as a loader function (queried remotely).
+   * @returns {Select}
+   */
+  static permission(target, options = {}) {
+    const { groups = [], value = true, valueKey = "ID", labelKey = "name", ...rest } = options;
+    const loader = typeof groups === "function" ? groups : null;
+    const shareable = loader ? [] : groups;
+    const choices = [{ ID: false, name: "Private" }, { ID: true, name: "Public" }];
+    const select = new _Select(target, {
+      filter: loader ?? "local",
+      ...rest,
+      value: null,
+      items: shareable,
+      fixedItems: [],
+      // The two choices carry their own ID and label, so a caller's group readers stay untouched.
+      valueKey: (item) => choices.includes(item) ? item.ID : readItem(item, valueKey),
+      labelKey: (item) => choices.includes(item) ? item.name : String(readItem(item, labelKey) ?? "")
+    });
+    choices[0].name = select._message("permission.private", "Private");
+    choices[1].name = select._message("permission.public", "Public");
+    select.setFixedItems(choices);
+    select.set(value, { silent: true });
+    return select;
+  }
   /** Cleans up the panel, pending async work, and enhanced target contents. @returns {void} */
   destroy() {
     this._cancelQuery();
@@ -6633,8 +6864,8 @@ var Select = class _Select extends Component {
     );
     if (!this._open) this.open();
     if (this.options.filter === "local") {
-      const keys = this.options.searchKeys ?? [this.options.labelKey];
-      this._visibleItems = matchItems(this._items, query, keys);
+      this._visibleFixed = this._matchFixed(query);
+      this._visibleItems = matchItems(this._items, query, this._searchKeys());
       this._renderOptions();
       this._setActive(this._optionEntries.length > 0 ? 0 : -1);
       this._position?.update();
@@ -6689,6 +6920,10 @@ var Select = class _Select extends Component {
     if (this.options.clearable) {
       this._appendOption(null, true, this.options.placeholder || this._message("select.none", "No selection"));
     }
+    for (const item of this._visibleFixed) this._appendOption(item, false);
+    if (this._visibleFixed.length > 0 && this._visibleItems.length > 0 && !this.options.groupKey) {
+      list.append(h("div", { class: "zx-select__separator", role: "presentation" }));
+    }
     for (const item of this._visibleItems) {
       if (this.options.groupKey) {
         const group = this._read(item, this.options.groupKey);
@@ -6702,7 +6937,7 @@ var Select = class _Select extends Component {
       }
       this._appendOption(item, false);
     }
-    if (this._visibleItems.length === 0 && !this._loading) {
+    if (this._visibleItems.length === 0 && this._visibleFixed.length === 0 && !this._loading) {
       list.append(h("div", {
         class: "zx-select__empty",
         role: "status"
@@ -6742,6 +6977,7 @@ var Select = class _Select extends Component {
     if (this._queryTimer !== null) clearTimeout(this._queryTimer);
     this._requestSequence += 1;
     const sequence = this._requestSequence;
+    this._visibleFixed = this._matchFixed(query);
     if (query.length < Math.max(0, Number(this.options.minQuery) || 0)) {
       this._setLoading(false);
       this._visibleItems = [];
@@ -6826,13 +7062,14 @@ var Select = class _Select extends Component {
   }
   /** @param {unknown} candidate @returns {SelectItem|null} */
   _findItem(candidate) {
-    const direct = this._items.find((item) => item === candidate);
+    const pool = this._fixedItems.length === 0 ? this._items : [...this._fixedItems, ...this._items];
+    const direct = pool.find((item) => item === candidate);
     if (direct !== void 0) return direct;
     const value = candidate !== null && typeof candidate === "object" ? this._itemValue(
       /** @type {SelectItem} */
       candidate
     ) : candidate;
-    return this._items.find((item) => Object.is(this._itemValue(item), value)) ?? null;
+    return pool.find((item) => Object.is(this._itemValue(item), value)) ?? null;
   }
   /** @param {SelectItem|null} item @returns {unknown} */
   _itemValue(item) {
@@ -6845,9 +7082,20 @@ var Select = class _Select extends Component {
   }
   /** @param {SelectItem|null} item @param {SelectValueReader|SelectLabelReader} reader @returns {unknown} */
   _read(item, reader) {
-    if (typeof reader === "function") return reader(item);
-    if (item === null || typeof item !== "object") return item;
-    return item[reader];
+    return readItem(item, reader);
+  }
+  /** @returns {Array<SelectValueReader|SelectLabelReader>} */
+  _searchKeys() {
+    return this.options.searchKeys ?? [this.options.labelKey];
+  }
+  /**
+   * Narrows the pinned choices. They are always matched here and never handed to a filter
+   * function: a fixed choice belongs to the control, not to whatever the remote source returns.
+   * @param {string} query Search text.
+   * @returns {SelectItem[]}
+   */
+  _matchFixed(query) {
+    return matchItems(this._fixedItems, query, this._searchKeys());
   }
   /** @returns {number} */
   _selectedEntryIndex() {
@@ -6870,6 +7118,11 @@ var Select = class _Select extends Component {
     return message === key ? fallback : message;
   }
 };
+function readItem(item, reader) {
+  if (typeof reader === "function") return reader(item);
+  if (item === null || typeof item !== "object") return item;
+  return item[reader];
+}
 function isPrintable(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
 }
@@ -9996,6 +10249,10 @@ var Tabbox = class extends Component {
       if (!tab || !tablist.contains(tab)) return;
       const record = this._recordForTab(tab);
       if (!record || record.definition.disabled) return;
+      if (event.target.closest?.(".zx-tabbox__close")) {
+        this._closeTab(record);
+        return;
+      }
       this._setFocused(record);
       this.openTab(record.definition.name);
     });
@@ -10045,8 +10302,9 @@ var Tabbox = class extends Component {
     children.push(title, badge);
     if (normalized.closable) {
       children.push(h("span", {
-        class: "zx-tabbox__close",
-        ariaHidden: "true"
+        class: "zx-tabbox__close zx-icon-btn",
+        ariaHidden: "true",
+        title: "Close"
       }, icon("x", { size: 14 })));
     }
     const tab = (
@@ -10220,13 +10478,23 @@ var Tabbox = class extends Component {
     }
     if (event.key === "Delete" && current.definition.closable) {
       event.preventDefault();
-      const index = this._tabs.indexOf(current);
-      if (!this._removeTab(current.definition.name, true)) return;
-      const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
-      const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
-      if (focusTarget) this._setFocused(focusTarget);
+      this._closeTab(current);
     }
   }
+  /**
+   * Closes a tab on a user gesture, keeping roving focus inside the tablist.
+   * @param {TabRecord} record Tab to close.
+   * @returns {void}
+   * @fires Tabbox#close
+   */
+  _closeTab(record) {
+    const index = this._tabs.indexOf(record);
+    const held = record.tab.contains(document.activeElement);
+    if (!this._removeTab(record.definition.name, true)) return;
+    const remaining = this._tabs[Math.min(index, this._tabs.length - 1)] ?? this._tabs[index - 1];
+    const focusTarget = remaining && !remaining.definition.disabled ? remaining : this._active;
+    if (focusTarget) this._setFocused(focusTarget, held);
+  }
   /** @param {string} name @param {boolean} emitClose @returns {boolean} */
   _removeTab(name, emitClose) {
     const record = this._find(name);