@zeyos/zx 2.1.0 → 2.2.0

package/src/components/search/search.js

@@ -0,0 +1,193 @@
+import { Component } from '../../core/component.js';
+import { h } from '../../core/dom.js';
+import { icon } from '../../core/icons.js';
+
+/**
+ * @typedef {Object} SearchOptions
+ * @property {string} [placeholder=''] Input placeholder.
+ * @property {string} [value=''] Initial query.
+ * @property {boolean} [clearable=true] Whether to show a clear control.
+ * @property {number} [debounce=250] Input debounce in milliseconds.
+ * @property {(event: CustomEvent<{value: string}>) => void} [oninput] Input callback.
+ * @property {(event: CustomEvent<{value: string}>) => void} [onsubmit] Submit callback.
+ * @property {(event: CustomEvent<Record<string, never>>) => void} [onclear] Clear callback.
+ */
+
+/**
+ * Search field with embedded submit and optional clear controls.
+ * @fires Search#input
+ * @fires Search#submit
+ * @fires Search#clear
+ * @extends {Component<SearchOptions>}
+ */
+export class Search extends Component {
+  static cssName = 'search';
+
+  /** @type {Readonly<SearchOptions>} */
+  static defaults = {
+    placeholder: '',
+    value: '',
+    clearable: true,
+    debounce: 250
+  };
+
+  /** @returns {HTMLElement} */
+  render() {
+    const created = !this.el;
+    const root = /** @type {HTMLElement} */ (this.el ?? h('form'));
+    this._createdRoot = created;
+    this._original = created ? null : snapshot(root);
+    this._inputTimer = null;
+    root.setAttribute('role', 'search');
+    const input = h('input', {
+      class: 'zx-search__input',
+      ref: 'input',
+      type: 'search',
+      placeholder: String(this.options.placeholder),
+      value: String(this.options.value),
+      ariaLabel: String(this.options.placeholder || 'Search')
+    });
+    const clear = this.options.clearable ? h('button', {
+      class: 'zx-search__clear',
+      ref: 'clear',
+      type: 'button',
+      ariaLabel: 'Clear search',
+      title: 'Clear search'
+    }, icon('x', { size: 15 })) : null;
+    const submit = h('button', {
+      class: 'zx-search__submit',
+      ref: 'submit',
+      type: root.localName === 'form' ? 'submit' : 'button',
+      ariaLabel: 'Submit search',
+      title: 'Search'
+    }, icon('search', { size: 16 }));
+    root.replaceChildren(...[input, clear, submit].filter(Boolean));
+    this._syncClear();
+
+    this.listen(input, 'input', () => {
+      this._syncClear();
+      this._scheduleInput();
+    });
+    if (root.localName === 'form') {
+      this.listen(root, 'submit', (event) => {
+        event.preventDefault();
+        this.emit('submit', { value: this.get() });
+      });
+    } else {
+      this.listen(input, 'keydown', (event) => {
+        if (event.key !== 'Enter') return;
+        event.preventDefault();
+        this.emit('submit', { value: this.get() });
+      });
+      this.listen(submit, 'click', () => this.emit('submit', { value: this.get() }));
+    }
+    if (clear) this.listen(clear, 'click', () => this.clear());
+    return root;
+  }
+
+  /**
+   * Returns the current query.
+   * @returns {string}
+   */
+  get() {
+    return /** @type {HTMLInputElement} */ (this.refs.input).value;
+  }
+
+  /**
+   * Sets the current query.
+   * @param {string} value Next query.
+   * @param {{silent?: boolean}} [options={}] Set `silent` to suppress `input`.
+   * @returns {this}
+   */
+  set(value, { silent = false } = {}) {
+    if (this._inputTimer !== null) {
+      clearTimeout(this._inputTimer);
+      this._inputTimer = null;
+    }
+    /** @type {HTMLInputElement} */ (this.refs.input).value = String(value);
+    this._syncClear();
+    if (!silent) this._scheduleInput();
+    return this;
+  }
+
+  /**
+   * Focuses the input.
+   * @returns {this}
+   */
+  focus() {
+    /** @type {HTMLInputElement} */ (this.refs.input).focus();
+    return this;
+  }
+
+  /**
+   * Clears the query and reports both the value update and clear action.
+   * @returns {this}
+   * @fires Search#input
+   * @fires Search#clear
+   */
+  clear() {
+    this.set('');
+    this.emit('clear');
+    this.focus();
+    return this;
+  }
+
+  /** @returns {void} */
+  destroy() {
+    if (this._cleaned) return;
+    this._cleaned = true;
+    if (this._inputTimer !== null) clearTimeout(this._inputTimer);
+    super.destroy();
+    if (!this._createdRoot && this._original) restore(this.el, this._original);
+  }
+
+  /** @returns {void} */
+  _scheduleInput() {
+    if (this._inputTimer !== null) clearTimeout(this._inputTimer);
+    const delay = Math.max(0, Number(this.options.debounce) || 0);
+    this._inputTimer = setTimeout(() => {
+      this._inputTimer = null;
+      this.emit('input', { value: this.get() });
+    }, delay);
+  }
+
+  /** @returns {void} */
+  _syncClear() {
+    if (this.refs.clear) {
+      /** @type {HTMLButtonElement} */ (this.refs.clear).hidden = this.get() === '';
+    }
+  }
+}
+
+/**
+ * Debounced query update.
+ * @event Search#input
+ * @type {CustomEvent<{value: string}>}
+ */
+
+/**
+ * Search submission.
+ * @event Search#submit
+ * @type {CustomEvent<{value: string}>}
+ */
+
+/**
+ * Explicit clear action.
+ * @event Search#clear
+ * @type {CustomEvent<Record<string, never>>}
+ */
+
+/** @param {Element} element @returns {{attributes: [string, string][], children: Node[]}} */
+function snapshot(element) {
+  return {
+    attributes: Array.from(element.attributes, (attribute) => [attribute.name, attribute.value]),
+    children: Array.from(element.childNodes)
+  };
+}
+
+/** @param {Element} element @param {{attributes: [string, string][], children: Node[]}} state */
+function restore(element, state) {
+  for (const attribute of Array.from(element.attributes)) element.removeAttribute(attribute.name);
+  for (const [name, value] of state.attributes) element.setAttribute(name, value);
+  element.replaceChildren(...state.children);
+}

package/src/components/select/field-adapter.js

@@ -0,0 +1,24 @@
+import { Field } from '../field/field.js';
+import { Select } from './select.js';
+
+/**
+ * Registers the Select-backed `zxselect` field type.
+ * @returns {void}
+ */
+export function registerSelectFieldAdapter() {
+  Field.register('zxselect', (field, options) => {
+    const select = field.own(new Select(null, {
+      ...(options.props ?? {}),
+      value: options.value
+    }));
+    field.listen(select.el, 'change', (event) => event.stopImmediatePropagation());
+    select.on('change', (event) => field.emit('change', { value: event.detail.value }));
+    return {
+      el: select.el,
+      get: () => select.value,
+      set: (value) => select.set(value, { silent: true }),
+      focus: () => select.focus(),
+      setDisabled: (disabled) => disabled ? select.disable() : select.enable()
+    };
+  });
+}

package/src/components/select/filter.js

@@ -0,0 +1,39 @@
+/**
+ * Returns items whose searchable values contain every query word.
+ * Matching is case- and diacritic-insensitive.
+ *
+ * @template T
+ * @param {T[]} items Items to search.
+ * @param {string} query User-entered search text.
+ * @param {Array<string|((item: T) => unknown)>} keys Searchable object keys or value readers.
+ * @returns {T[]} Matching items in their original order.
+ */
+export function matchItems(items, query, keys) {
+  const words = normalize(query).split(/\s+/).filter(Boolean);
+  if (words.length === 0) return items.slice();
+
+  return items.filter((item) => {
+    const values = searchableValues(item, keys).map(normalize);
+    return words.every((word) => values.some((value) => value.includes(word)));
+  });
+}
+
+/**
+ * @template T
+ * @param {T} item
+ * @param {Array<string|((item: T) => unknown)>} keys
+ * @returns {unknown[]}
+ */
+function searchableValues(item, keys) {
+  if (item === null || typeof item !== 'object') return [item];
+  if (!Array.isArray(keys) || keys.length === 0) return [item];
+  return keys.map((key) => typeof key === 'function' ? key(item) : item[key]);
+}
+
+/** @param {unknown} value @returns {string} */
+function normalize(value) {
+  return String(value ?? '')
+    .normalize('NFD')
+    .replace(/\p{M}+/gu, '')
+    .toLocaleLowerCase();
+}

package/src/components/select/select.css

@@ -0,0 +1,180 @@
+.zx-select {
+  display: inline-block;
+  inline-size: 100%;
+  min-inline-size: 0;
+  color: var(--zx-color-text);
+  font-size: var(--zx-control-font-size);
+}
+
+.zx-select__control {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto auto;
+  align-items: center;
+  min-block-size: var(--zx-control-height);
+  overflow: hidden;
+  border: 1px solid var(--zx-color-border-control);
+  border-radius: var(--zx-control-radius);
+  background: var(--zx-color-bg-control);
+}
+
+.zx-select__control:has(.zx-select__input:focus-visible) {
+  box-shadow: var(--zx-focus-ring);
+}
+
+.zx-select__input {
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: calc(var(--zx-control-height) - 2px) !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.zx-select__input:read-only {
+  cursor: default;
+}
+
+.zx-select__clear,
+.zx-select__toggle {
+  display: grid;
+  place-items: center;
+  inline-size: var(--zx-control-height);
+  min-block-size: calc(var(--zx-control-height) - 2px) !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: none !important;
+  color: var(--zx-color-text-muted);
+  padding: 0 !important;
+}
+
+.zx-select__clear:hover,
+.zx-select__toggle:hover {
+  color: var(--zx-color-text);
+}
+
+.zx-select__clear[hidden],
+.zx-select__loading[hidden] {
+  display: none;
+}
+
+.zx-select__loading {
+  inline-size: 14px;
+  block-size: 14px;
+  border: 2px solid var(--zx-color-border);
+  border-block-start-color: var(--zx-color-accent);
+  border-radius: var(--zx-radius-full);
+}
+
+.zx-select[aria-disabled="true"] .zx-select__control {
+  background: var(--zx-color-bg-page);
+  color: var(--zx-color-text-muted);
+  cursor: default;
+}
+
+.zx-select__panel {
+  z-index: 20;
+  inline-size: max-content;
+  max-inline-size: calc(100vw - var(--zx-space-4));
+  overflow: hidden;
+  border: 1px solid var(--zx-color-border-strong);
+  border-radius: var(--zx-radius-md);
+  background: var(--zx-color-bg-raised);
+  box-shadow: var(--zx-overlay-shadow);
+  color: var(--zx-color-text);
+  padding: var(--zx-space-1);
+}
+
+.zx-select__list {
+  min-inline-size: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.zx-select__option {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+  min-block-size: var(--zx-control-height);
+  border-radius: var(--zx-radius-sm);
+  cursor: default;
+  padding: var(--zx-space-1) var(--zx-control-pad-x);
+}
+
+.zx-select__option-content {
+  min-inline-size: 0;
+  flex: 1;
+}
+
+.zx-select__option[data-active="true"] {
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-select__option:hover {
+  background: var(--zx-color-bg-hover);
+}
+
+.zx-select__option[aria-selected="true"] {
+  background: var(--zx-color-bg-selected);
+}
+
+.zx-select__option > svg,
+.zx-select__option > .zx-icon {
+  flex: none;
+  color: var(--zx-color-accent);
+}
+
+.zx-select__group {
+  position: sticky;
+  z-index: 1;
+  inset-block-start: 0;
+  background: var(--zx-color-bg-raised);
+  color: var(--zx-color-text-muted);
+  font-size: var(--zx-text-xs);
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: var(--zx-space-2) var(--zx-control-pad-x) var(--zx-space-1);
+  text-transform: uppercase;
+}
+
+.zx-select__empty {
+  color: var(--zx-color-text-muted);
+  padding: var(--zx-space-3) var(--zx-control-pad-x);
+  text-align: center;
+}
+
+.zx-select__priority {
+  display: flex;
+  align-items: center;
+  gap: var(--zx-space-2);
+}
+
+.zx-select__priority-icon {
+  inline-size: 10px;
+  block-size: 10px;
+  flex: none;
+  border-radius: var(--zx-radius-sm);
+  background: var(--zx-color-warning);
+}
+
+.zx-select__priority-icon[data-level="0"],
+.zx-select__priority-icon[data-level="1"] {
+  background: var(--zx-color-success);
+}
+
+.zx-select__priority-icon[data-level="3"],
+.zx-select__priority-icon[data-level="4"] {
+  background: var(--zx-color-danger);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .zx-select__loading {
+    animation: zx-select-spin var(--zx-dur-slow) linear infinite;
+  }
+}
+
+@keyframes zx-select-spin {
+  to {
+    transform: rotate(1turn);
+  }
+}