@zeyos/zx 2.2.1 → 2.3.0

package/dist/zx.global.js

@@ -5159,18 +5159,34 @@ var zx = (() => {
   }
 
   // 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",
@@ -5181,6 +5197,17 @@ var zx = (() => {
       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;
     }
@@ -5203,16 +5230,27 @@ var zx = (() => {
       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", {
@@ -5225,40 +5263,52 @@ var zx = (() => {
         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 row2 = rows[Math.min(focusIndex, rows.length - 1)];
+        row2?.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") {
@@ -5271,28 +5321,156 @@ var zx = (() => {
         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 row2 = (
+        /** @type {HTMLElement|null} */
+        handle.closest(".zx-multi-value-editor__row")
+      );
+      if (!row2) return;
+      row2.draggable = true;
+      this._armed = row2;
+    }
+    /** @returns {void} */
+    _disarm() {
+      if (this._armed) this._armed.draggable = false;
+      this._armed = null;
+    }
+    /** @param {DragEvent} event @returns {void} */
+    _handleDragStart(event) {
+      const row2 = event.target instanceof Element ? event.target.closest(".zx-multi-value-editor__row") : null;
+      if (!row2 || row2 !== this._armed) {
+        event.preventDefault();
+        return;
+      }
+      this._dragIndex = Number(row2.dataset.row);
+      row2.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 row2 of this._rows.children) delete /** @type {HTMLElement} */
+      row2.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, row2] of rows.entries()) {
+        const box = row2.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, row2] of rows.entries()) {
+        const cell = (
+          /** @type {HTMLElement} */
+          row2
+        );
+        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 row2 of this._rows.children) delete /** @type {HTMLElement} */
+      row2.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 size2 = this._values.length;
+      if (from === to || from < 0 || to < 0 || from >= size2 || to >= size2) 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();
     }
@@ -6362,6 +6540,7 @@ var zx = (() => {
     /** @type {SelectOptions} */
     static defaults = {
       items: [],
+      fixedItems: [],
       valueKey: "ID",
       labelKey: "name",
       renderItem: null,
@@ -6381,6 +6560,8 @@ var zx = (() => {
     render() {
       this._items = [];
       this._visibleItems = [];
+      this._fixedItems = [];
+      this._visibleFixed = [];
       this._selected = null;
       this._optionEntries = [];
       this._activeIndex = -1;
@@ -6464,6 +6645,8 @@ var zx = (() => {
       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),
@@ -6540,7 +6723,22 @@ var zx = (() => {
       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();
@@ -6594,6 +6792,7 @@ var zx = (() => {
       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;
@@ -6649,6 +6848,38 @@ var zx = (() => {
       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();
@@ -6719,8 +6950,8 @@ var zx = (() => {
       );
       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();
@@ -6775,6 +7006,10 @@ var zx = (() => {
       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);
@@ -6788,7 +7023,7 @@ var zx = (() => {
         }
         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"
@@ -6828,6 +7063,7 @@ var zx = (() => {
       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 = [];
@@ -6912,13 +7148,14 @@ var zx = (() => {
     }
     /** @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) {
@@ -6931,9 +7168,20 @@ var zx = (() => {
     }
     /** @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() {
@@ -6956,6 +7204,11 @@ var zx = (() => {
       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;
   }
@@ -10469,6 +10722,10 @@ var zx = (() => {
         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);
       });
@@ -10518,8 +10775,9 @@ var zx = (() => {
       children.push(title, badge2);
       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 = (
@@ -10693,13 +10951,23 @@ var zx = (() => {
       }
       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);