@golemui/gui-lit 2.0.0-rc.0 → 2.0.0-rc.1

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.0.0-rc.1 (2026-10-09)
+
+### 🚀 Features
+
+- **gui-components:** simplify list api ([#421](https://github.com/golemui/golemui/pull/421))
+
+### ❤️ Thank You
+
+- Raúl Jiménez @Elecash
+
 ## 2.0.0-rc.0 (2026-10-08)
 
 ### 🚀 Features

package/default-list-item-renderer-sJeXkSKR.js

@@ -0,0 +1,15 @@
+import { html as t } from "lit";
+import { classMap as i } from "lit/directives/class-map.js";
+import "@golemui/core";
+const r = (e) => {
+  const s = {
+    "gui-list__item": !0,
+    "gui-list__item-selected": !!e.selected,
+    "gui-list__item-focused": !!e.focused,
+    "gui-list__item-disabled": !!e.disabled
+  };
+  return t` <div class=${i(s)}>${e.template}</div> `;
+};
+export {
+  r as d
+};

package/{default-multi-list-item-renderer-Cv-guvEX.js → default-multi-list-item-renderer-CG3Fuye0.js}

@@ -1,20 +1,15 @@
-import { html as i } from "lit";
-import { classMap as t } from "lit/directives/class-map.js";
+import { html as s } from "lit";
+import { classMap as i } from "lit/directives/class-map.js";
 import "@golemui/core";
-const r = (e) => {
-  const s = {
+const m = (e) => {
+  const t = {
     "gui-list__item": !0,
     "gui-list__item-selected": !!e.selected,
     "gui-list__item-focused": !!e.focused,
     "gui-list__item-disabled": !!e.disabled
   };
-  return i`
-    <div
-      role="option"
-      class=${t(s)}
-      aria-selected=${e.selected ? "true" : "false"}
-      aria-disabled=${e.disabled ? "true" : "false"}
-    >
+  return s`
+    <div class=${i(t)}>
       <span class="gui-list__item-check" aria-hidden="true">
         <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 256 256">
           <path
@@ -27,5 +22,5 @@ const r = (e) => {
   `;
 };
 export {
-  r as d
+  m as d
 };

package/{dropdown.element-Djee1u1L.js → dropdown.element-C55MHVq-.js}

@@ -1,26 +1,27 @@
-import { InputWidgetAdapter as F, formContext as x, inputContext as C } from "@golemui/lit";
-import { consume as D, provide as R } from "@lit/context";
-import { LitElement as L, nothing as p, html as _ } from "lit";
-import { classMap as v } from "lit/directives/class-map.js";
-import { property as k, state as d, query as $ } from "lit/decorators.js";
-import { unsubscribeAll as V, cspStyleMap as S, safeDefine as T } from "@golemui/lit/internals";
-import { Subject as j, debounceTime as P } from "rxjs";
-import { d as q } from "./default-list-item-renderer-CuPJ9jUD.js";
+import { InputWidgetAdapter as b, formContext as $, inputContext as I } from "@golemui/lit";
+import { searchItems as w } from "@golemui/gui-components/internals";
+import { consume as v, provide as y } from "@lit/context";
+import { LitElement as F, nothing as n, html as u } from "lit";
+import { classMap as m } from "lit/directives/class-map.js";
+import { property as D, state as d, query as p } from "lit/decorators.js";
+import { unsubscribeAll as x, cspStyleMap as C, safeDefine as R } from "@golemui/lit/internals";
+import { Subject as k, debounceTime as L } from "rxjs";
+import { d as V } from "./default-list-item-renderer-sJeXkSKR.js";
 import "@golemui/gui-components/label";
 import "@golemui/gui-components/list";
 import "@golemui/gui-components/errors";
-import { live as O } from "lit/directives/live.js";
-var E = Object.defineProperty, l = (g, e, t, s) => {
-  for (var i = void 0, u = g.length - 1, h; u >= 0; u--)
-    (h = g[u]) && (i = h(e, t, i) || i);
-  return i && E(e, t, i), i;
+import { live as T } from "lit/directives/live.js";
+var j = Object.defineProperty, o = (c, e, t, l) => {
+  for (var a = void 0, r = c.length - 1, h; r >= 0; r--)
+    (h = c[r]) && (a = h(e, t, a) || a);
+  return a && j(e, t, a), a;
 };
-class a extends L {
+class s extends F {
   constructor() {
-    super(...arguments), this.adapter = new F(), this.debouncer = new j(), this.subscriptions = [], this._range = { start: 0, end: 10 }, this._filteredItems = [], this._listItems = [], this._focusedIndex = -1, this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
+    super(...arguments), this.adapter = new b(), this.debouncer = new k(), this.subscriptions = [], this._visibleItems = [], this._filteredItems = [], this._listItems = [], this._isFiltering = !1, this._isListVisible = !1, this._selectedItem = void 0, this._ignoreNextFocus = !1, this.onDocumentClick = (e) => {
       if (!this._isListVisible) return;
-      const t = e.composedPath(), s = this._inputRef && t.includes(this._inputRef), i = this._panelRef && t.includes(this._panelRef);
-      !s && !i && (this._isListVisible = !1);
+      const t = e.composedPath(), l = this._inputRef && t.includes(this._inputRef), a = this._panelRef && t.includes(this._panelRef);
+      !l && !a && (this._isListVisible = !1);
     }, this._onToggleMouseDown = (e) => {
       e.preventDefault();
     }, this._onToggleClick = (e) => {
@@ -38,37 +39,29 @@ class a extends L {
         const e = this.adapter.templateData;
         e.items && this._listItems?.length === 0 && this._filteredItems?.length === 0 && (this._filteredItems = e.items, this._listItems = e.items), this.requestUpdate();
       }),
-      this.debouncer.pipe(P(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
+      this.debouncer.pipe(L(this.adapter.templateData.inputDebounce ?? 500)).subscribe((e) => {
         this._filterItems(e);
       })
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.adapter.destroy(), V(this.subscriptions);
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick), this.adapter.destroy(), x(this.subscriptions);
   }
-  _onRangeChange(e) {
-    this._range = { start: e.detail.startIndex, end: e.detail.endIndex };
+  _onVisibleItemsChange(e) {
+    this._visibleItems = e.detail;
   }
   _onUpdateItems(e) {
     const t = e.detail || [];
     if (this._listItems = t, !this._selectedItem && this.adapter.templateData.value != null) {
-      const s = t.find(
-        (i) => i.value === this.adapter.templateData.value
+      const l = t.find(
+        (a) => a.value === this.adapter.templateData.value
       );
-      s && (this._selectedItem = s);
+      l && (this._selectedItem = l);
     }
   }
-  _onFocusChange(e) {
-    this._focusedIndex = e.detail.index;
-  }
-  _onClickItem(e, t) {
-    if (this.adapter.templateData.readonly || e.disabled) return;
-    const s = this.adapter.templateData;
-    this.adapter.valueChanged(e.value), this.adapter.filterChanged(""), this._focusedIndex = t, this._selectedItem = e, this._isFiltering = !1, this._isListVisible = !1, this._listRef && (this._listRef.focusItemAtIndex(t), this._inputRef.value = s.valueField ? e.template[s.valueField] : e.template);
-  }
   _onValueChange(e) {
     const t = e.detail.value;
-    this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((s) => s.value === t), this._isFiltering = !1, this._isListVisible = !1;
+    this.adapter.valueChanged(t), this.adapter.filterChanged(""), this._selectedItem = this._listItems.find((l) => l.value === t), this._isFiltering = !1, this._isListVisible = !1;
   }
   async _onKeyDown(e) {
     switch (e.key) {
@@ -85,20 +78,12 @@ class a extends L {
     this.debouncer.next(t);
   }
   _filterItems(e) {
-    const t = this.adapter.templateData, s = !!this.widget.on?.filter;
-    if (this.adapter.filterChanged(e), e && !s) {
-      this._isFiltering = !0, this._isListVisible = !0;
-      const i = t.searchFields ?? [t.labelField, t.valueField].filter(
-        (o) => !!o
-      ), u = i.length > 0, m = (t.items || []).filter((o) => {
-        if (o === null || typeof o != "object")
-          return o != null && o.toString().toLowerCase().includes(e.toLowerCase());
-        const f = Object.keys(o), n = (c, b) => c || o[b].toString().toLowerCase().includes(e.toLowerCase());
-        return u ? f.filter((c) => i.includes(c)).reduce(n, !1) : f.reduce(n, !1);
-      });
-      this._filteredItems = [...m];
-    } else
-      this._isFiltering = !1, this._filteredItems = [...t.items];
+    const t = this.adapter.templateData, l = !!this.widget.on?.filter;
+    this.adapter.filterChanged(e), e && !l ? (this._isFiltering = !0, this._isListVisible = !0, this._filteredItems = w(
+      t.items || [],
+      e,
+      t
+    )) : (this._isFiltering = !1, this._filteredItems = [...t.items]);
   }
   _onWidgetKeyDown(e) {
     e.key !== "Escape" || !this._isListVisible || (e.preventDefault(), e.stopPropagation(), this._isListVisible = !1, this._isFiltering = !1, this._ignoreNextFocus = !0, this._inputRef?.focus(), setTimeout(() => {
@@ -117,11 +102,11 @@ class a extends L {
     t && this.contains(t) || (this.adapter.onBlur(), this._isListVisible = !1, this._isFiltering = !1);
   }
   render() {
-    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, s = this._listItems.slice(this._range.start, this._range.end), i = this.adapter.getItemRenderer(
+    const e = this.adapter.templateData, t = e.touched && e.errors && e.errors.length > 0, l = this.adapter.getItemRenderer(
       e.itemRenderer,
-      q
-    ), h = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, m = h ? this._selectedItem?.template[h] : this._selectedItem?.template, o = !!this.widget.on?.filter;
-    return _`
+      V
+    ), r = this._selectedItem?.template !== null && typeof this._selectedItem?.template == "object" ? e.labelField ?? "label" : null, h = r ? this._selectedItem?.template[r] : this._selectedItem?.template, f = !!this.widget.on?.filter;
+    return u`
       <gui-label
         .targetElement=${[this._listRef, this._inputRef]}
         .uid=${this.widget.uid}
@@ -134,34 +119,34 @@ class a extends L {
       ></gui-label>
 
       <div class="gui-widget" @keydown=${this._onWidgetKeyDown} @focusout=${this._onFocusOut}>
-        ${e.icon ? _`<span
-              class=${v({ "gui-widget-icon": !0, [e.icon]: !0 })}
+        ${e.icon ? u`<span
+              class=${m({ "gui-widget-icon": !0, [e.icon]: !0 })}
               data-icon=${e.icon}
               aria-hidden="true"
-            ></span>` : p}
+            ></span>` : n}
         <input
           type="text"
           role="combobox"
           id=${this.widget.uid}
           data-cy=${`${this.widget.uid}_textinput`}
-          class=${v({
+          class=${m({
       "gui-widget-input": !0,
       "gui-dropdown--icon": !!e.icon
     })}
-          .value=${m ?? e.value ?? ""}
+          .value=${h ?? e.value ?? ""}
           ?required=${e.validator?.required}
           ?disabled=${e.disabled}
           ?readonly=${e.readonly}
           placeholder=${e.placeholder ?? ""}
-          autocomplete=${e.autocomplete || p}
+          autocomplete=${e.autocomplete || n}
           @keydown=${this._onKeyDown}
           @input=${this._onInput}
           @focus=${this._onFocus}
           aria-expanded=${this._isListVisible ? "true" : "false"}
           aria-controls=${`${this.widget.uid}-list`}
           aria-autocomplete="list"
-          aria-labelledby=${e.label ? `${this.widget.uid}_label` : p}
-          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : p}
+          aria-labelledby=${e.label ? `${this.widget.uid}_label` : n}
+          aria-describedby=${e.hint ? `${this.widget.uid}_hint` : n}
         />
         <button
           type="button"
@@ -185,9 +170,9 @@ class a extends L {
           <gui-list
             id=${`${this.widget.uid}-list`}
             .uid=${this.widget.uid}
-            .value=${O(e.value ?? "")}
+            .value=${T(e.value ?? "")}
             .valueField=${e.valueField}
-            .items=${this._isFiltering && !o ? this._filteredItems : e.items}
+            .items=${this._isFiltering && !f ? this._filteredItems : e.items}
             .itemHeight=${e.itemHeight}
             .height=${e.height}
             ?required=${e.validator?.required}
@@ -195,92 +180,87 @@ class a extends L {
             ?disabled=${e.disabled}
             ?readonly=${e.readonly}
             ?hidden=${!this._isListVisible}
-            @gui-range-change=${this._onRangeChange}
+            @gui-visible-items-change=${this._onVisibleItemsChange}
             @gui-update-items=${this._onUpdateItems}
-            @gui-focus-change=${this._onFocusChange}
             @focus=${this._onFocus}
             @gui-input=${this._onValueChange}
           >
-            ${s.map((r, f) => {
-      const n = this._range.start + f, c = e.value === r.value, b = this._focusedIndex === n, I = !!e.disabled || !!r.disabled, w = e.labelField ?? "label", y = r.template !== null && typeof r.template == "object" && w && !e.itemRenderer ? r.template[w] : r.template;
-      return _`
+            ${this._visibleItems.map((i) => {
+      const _ = e.labelField ?? "label", g = i.template !== null && typeof i.template == "object" && _ && !e.itemRenderer ? i.template[_] : i.template;
+      return u`
                 <div
                   role="option"
                   tabindex="-1"
                   class="gui-list__item-wrapper"
-                  id="${this.widget.uid}-item-${n}"
-                  style=${S({ height: `${e.itemHeight || 40}px` })}
-                  aria-selected=${c ? "true" : "false"}
-                  aria-disabled=${I ? "true" : "false"}
-                  @click=${() => this._onClickItem(r, n)}
+                  id=${i.id}
+                  style=${C({ height: `${e.itemHeight || 40}px` })}
+                  aria-selected=${i.selected ? "true" : "false"}
+                  aria-disabled=${i.disabled ? "true" : "false"}
                 >
-                  ${i({
-        template: y,
-        value: r.value,
-        index: n,
-        selected: c,
-        disabled: I,
-        focused: b
+                  ${l({
+        template: g,
+        value: i.value,
+        index: i.index,
+        selected: i.selected,
+        disabled: i.disabled,
+        focused: i.focused
       })}
                 </div>
               `;
     })}
           </gui-list>
-          ${t ? _`<gui-errors
+          ${t ? u`<gui-errors
                 panel
                 .uid=${this.widget.uid}
                 .errors=${e.errors}
                 .touched=${e.touched}
-              ></gui-errors>` : p}
+              ></gui-errors>` : n}
         </div>
       </div>
 
-      ${t ? _`<gui-errors
+      ${t ? u`<gui-errors
             .uid=${this.widget.uid}
             .errors=${e.errors}
             .touched=${e.touched}
-          ></gui-errors>` : p}
+          ></gui-errors>` : n}
     `;
   }
 }
-l([
-  D({ context: x }),
-  k({ attribute: !1 })
-], a.prototype, "formContext");
-l([
-  R({ context: C })
-], a.prototype, "adapter");
-l([
-  d()
-], a.prototype, "_range");
-l([
+o([
+  v({ context: $ }),
+  D({ attribute: !1 })
+], s.prototype, "formContext");
+o([
+  y({ context: I })
+], s.prototype, "adapter");
+o([
   d()
-], a.prototype, "_filteredItems");
-l([
+], s.prototype, "_visibleItems");
+o([
   d()
-], a.prototype, "_listItems");
-l([
+], s.prototype, "_filteredItems");
+o([
   d()
-], a.prototype, "_focusedIndex");
-l([
+], s.prototype, "_listItems");
+o([
   d()
-], a.prototype, "_isFiltering");
-l([
+], s.prototype, "_isFiltering");
+o([
   d()
-], a.prototype, "_isListVisible");
-l([
+], s.prototype, "_isListVisible");
+o([
   d()
-], a.prototype, "_selectedItem");
-l([
-  $("input")
-], a.prototype, "_inputRef");
-l([
-  $("gui-list")
-], a.prototype, "_listRef");
-l([
-  $(".gui-picker__panel")
-], a.prototype, "_panelRef");
-T("gui-dropdown-input", a);
+], s.prototype, "_selectedItem");
+o([
+  p("input")
+], s.prototype, "_inputRef");
+o([
+  p("gui-list")
+], s.prototype, "_listRef");
+o([
+  p(".gui-picker__panel")
+], s.prototype, "_panelRef");
+R("gui-dropdown-input", s);
 export {
-  a as DropdownElement
+  s as DropdownElement
 };

package/index.js

@@ -21,13 +21,13 @@ const n = {
   dateInput: async () => (await import("./date.element-Ba8wmaNU.js")).DateElement,
   datePicker: async () => (await import("./date-picker.element-X__hfSnj.js")).DatePickerElement,
   dateTimePicker: async () => (await import("./date-time-picker.element-QGn5dEbf.js")).DateTimePickerElement,
-  dropdown: async () => (await import("./dropdown.element-Djee1u1L.js")).DropdownElement,
+  dropdown: async () => (await import("./dropdown.element-C55MHVq-.js")).DropdownElement,
   fileUpload: async () => (await import("./file-upload.element-B3oBEQ_s.js")).FileUploadElement,
-  list: async () => (await import("./list.element-DfLD2X8s.js")).ListElement,
+  list: async () => (await import("./list.element-CIrv32zU.js")).ListElement,
   markdown: async () => (await import("./markdown.element-7tvZ028P.js")).MarkdownElement,
-  multiDropdown: async () => (await import("./multi-dropdown.element-B1vV4rF-.js")).MultiDropdownElement,
+  multiDropdown: async () => (await import("./multi-dropdown.element-nOsP8HUx.js")).MultiDropdownElement,
   multiFileUpload: async () => (await import("./multi-file-upload.element-4h6JQgRF.js")).MultiFileUploadElement,
-  multiList: async () => (await import("./multi-list.element-CNVHVkj0.js")).MultiListElement,
+  multiList: async () => (await import("./multi-list.element-CZfmTbCf.js")).MultiListElement,
   password: async () => (await import("./password.element-DnV_PqKI.js")).PasswordElement,
   textinput: async () => (await import("./textinput.element-CCgsbYTB.js")).TextinputElement,
   timeInput: async () => (await import("./time.element-B0L2sriD.js")).TimeElement,