@selkit/dom 0.1.1 → 0.3.0

package/dist/index.cjs

@@ -155,6 +155,11 @@ var SelkitDom = class {
   #dropdownParent;
   #templateSelection;
   #templateOption;
+  #templateArrow;
+  #templateClear;
+  #templateTagRemove;
+  #templateGroup;
+  #templateEmpty;
   #sourceSelect;
   #control;
   #field;
@@ -165,6 +170,8 @@ var SelkitDom = class {
   #hiddenContainer = null;
   #selectPrevDisplay = "";
   #dragFrom = -1;
+  /** 上次已捲入可視的 activeIndex 僅在變動時才捲 避免跟使用者手動捲動打架 */
+  #lastActive = -1;
   #positioner = null;
   #unsubscribe;
   #offClose;
@@ -192,6 +199,11 @@ var SelkitDom = class {
     this.#dropdownParent = resolveParent(cfg.dropdownParent);
     this.#templateSelection = cfg.templateSelection;
     this.#templateOption = cfg.templateOption;
+    this.#templateArrow = cfg.templateArrow;
+    this.#templateClear = cfg.templateClear;
+    this.#templateTagRemove = cfg.templateTagRemove;
+    this.#templateGroup = cfg.templateGroup;
+    this.#templateEmpty = cfg.templateEmpty;
     this.controller = (0, import_core.createSelkit)(cfg);
     this.element = document.createElement("div");
     this.element.className = this.#prefix;
@@ -432,16 +444,50 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.#scrollActiveIntoView(s);
   }
-  /** 套用 templateSelection 到已選容器 字串走 textContent Node 直接掛入 無模板則用 label */
+  /**
+   * 鍵盤導航/開啟時讓作用中選項保持可見（aria-activedescendant 完整度）
+   * 僅在 activeIndex 變動時動作 手動捲動觸發的重繪不會跟著捲
+   */
+  #scrollActiveIntoView(s) {
+    if (!s.isOpen) {
+      this.#lastActive = -1;
+      return;
+    }
+    if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
+    this.#lastActive = s.activeIndex;
+    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    if (this.#virtual && !hasGroups) {
+      const next = (0, import_core.computeScrollIntoView)({
+        index: s.activeIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight,
+        itemHeight: this.#itemHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
+    const active = this.#dropdown.querySelector(
+      `.${this.#cls("option", "active")}`
+    );
+    active?.scrollIntoView?.({ block: "nearest" });
+  }
+  /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
+  #applyTemplate(host, out) {
+    if (out instanceof Node) host.append(out);
+    else host.textContent = out;
+  }
+  /** 套用 templateSelection 到已選容器 無模板則用 label */
   #fillSelection(host, option, meta) {
     if (!this.#templateSelection) {
       host.textContent = option.label;
       return;
     }
-    const out = this.#templateSelection(option, meta);
-    if (out instanceof Node) host.append(out);
-    else host.textContent = out;
+    this.#applyTemplate(host, this.#templateSelection(option, meta));
   }
   #renderField(s) {
     for (const child of Array.from(this.#field.children)) {
@@ -462,7 +508,11 @@ var SelkitDom = class {
         remove.className = this.#cls("tag-remove");
         remove.dataset.index = String(i);
         remove.setAttribute("aria-label", `Remove ${opt.label}`);
-        remove.textContent = "\xD7";
+        if (this.#templateTagRemove) {
+          this.#applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
+        } else {
+          remove.textContent = "\xD7";
+        }
         tag.append(label, remove);
         frag.append(tag);
       });
@@ -492,12 +542,19 @@ var SelkitDom = class {
       clear.type = "button";
       clear.className = this.#cls("clear");
       clear.setAttribute("aria-label", "Clear");
-      clear.textContent = "\xD7";
+      if (this.#templateClear) {
+        this.#applyTemplate(clear, this.#templateClear());
+      } else {
+        clear.textContent = "\xD7";
+      }
       this.#indicators.append(clear);
     }
     const arrow = document.createElement("span");
     arrow.className = this.#cls("arrow");
     arrow.setAttribute("aria-hidden", "true");
+    if (this.#templateArrow) {
+      this.#applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
+    }
     this.#indicators.append(arrow);
   }
   #renderOptions(s) {
@@ -507,7 +564,19 @@ var SelkitDom = class {
     if (view.rows.length === 0) {
       const empty = document.createElement("div");
       empty.className = this.#cls("empty");
-      empty.textContent = this.controller.getEmptyMessage();
+      const message = this.controller.getEmptyMessage();
+      if (this.#templateEmpty) {
+        this.#applyTemplate(
+          empty,
+          this.#templateEmpty({
+            reason: this.controller.getEmptyReason(),
+            message,
+            query: s.query
+          })
+        );
+      } else {
+        empty.textContent = message;
+      }
       this.#dropdown.append(empty);
       return;
     }
@@ -536,7 +605,14 @@ var SelkitDom = class {
         const group = document.createElement("div");
         group.className = this.#cls("group");
         if (row.disabled) group.classList.add(this.#cls("group", "disabled"));
-        group.textContent = row.label;
+        if (this.#templateGroup) {
+          this.#applyTemplate(
+            group,
+            this.#templateGroup({ label: row.label, disabled: !!row.disabled })
+          );
+        } else {
+          group.textContent = row.label;
+        }
         this.#dropdown.append(group);
         continue;
       }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { SelkitController, SelkitConfig, SelkitOption } from '@selkit/core';
+import { SelkitController, SelkitConfig, SelkitOption, SelkitEmptyReason } from '@selkit/core';
 
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
@@ -28,6 +28,27 @@ interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
         active: boolean;
         selected: boolean;
     }) => string | Node;
+    /** 自訂下拉箭頭內容（▾）外殼保留 回傳 string 走 textContent Node 直接掛入 */
+    templateArrow?: (meta: {
+        open: boolean;
+    }) => string | Node;
+    /** 自訂清除鈕內容（×）按鈕外殼與 click 行為保留 */
+    templateClear?: () => string | Node;
+    /** 自訂多選標籤移除鈕內容（×）按鈕外殼與 click 行為保留 */
+    templateTagRemove?: (option: SelkitOption<T>, meta: {
+        index: number;
+    }) => string | Node;
+    /** 自訂分組標題內容 外殼保留 */
+    templateGroup?: (meta: {
+        label: string;
+        disabled: boolean;
+    }) => string | Node;
+    /** 自訂下拉為空/載入中的整塊內容 reason 分流 message 為預設文字 */
+    templateEmpty?: (meta: {
+        reason: SelkitEmptyReason;
+        message: string;
+        query: string;
+    }) => string | Node;
 }
 interface SelkitDomInstance<T = unknown> {
     readonly controller: SelkitController<T>;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { SelkitController, SelkitConfig, SelkitOption } from '@selkit/core';
+import { SelkitController, SelkitConfig, SelkitOption, SelkitEmptyReason } from '@selkit/core';
 
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
@@ -28,6 +28,27 @@ interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
         active: boolean;
         selected: boolean;
     }) => string | Node;
+    /** 自訂下拉箭頭內容（▾）外殼保留 回傳 string 走 textContent Node 直接掛入 */
+    templateArrow?: (meta: {
+        open: boolean;
+    }) => string | Node;
+    /** 自訂清除鈕內容（×）按鈕外殼與 click 行為保留 */
+    templateClear?: () => string | Node;
+    /** 自訂多選標籤移除鈕內容（×）按鈕外殼與 click 行為保留 */
+    templateTagRemove?: (option: SelkitOption<T>, meta: {
+        index: number;
+    }) => string | Node;
+    /** 自訂分組標題內容 外殼保留 */
+    templateGroup?: (meta: {
+        label: string;
+        disabled: boolean;
+    }) => string | Node;
+    /** 自訂下拉為空/載入中的整塊內容 reason 分流 message 為預設文字 */
+    templateEmpty?: (meta: {
+        reason: SelkitEmptyReason;
+        message: string;
+        query: string;
+    }) => string | Node;
 }
 interface SelkitDomInstance<T = unknown> {
     readonly controller: SelkitController<T>;

package/dist/index.js

@@ -1,5 +1,9 @@
 // src/dom.ts
-import { computeVirtualRange, createSelkit } from "@selkit/core";
+import {
+  computeScrollIntoView,
+  computeVirtualRange,
+  createSelkit
+} from "@selkit/core";
 
 // src/positioner.ts
 function computePosition(triggerRect, dropdownHeight, viewportHeight, gap = 4) {
@@ -124,6 +128,11 @@ var SelkitDom = class {
   #dropdownParent;
   #templateSelection;
   #templateOption;
+  #templateArrow;
+  #templateClear;
+  #templateTagRemove;
+  #templateGroup;
+  #templateEmpty;
   #sourceSelect;
   #control;
   #field;
@@ -134,6 +143,8 @@ var SelkitDom = class {
   #hiddenContainer = null;
   #selectPrevDisplay = "";
   #dragFrom = -1;
+  /** 上次已捲入可視的 activeIndex 僅在變動時才捲 避免跟使用者手動捲動打架 */
+  #lastActive = -1;
   #positioner = null;
   #unsubscribe;
   #offClose;
@@ -161,6 +172,11 @@ var SelkitDom = class {
     this.#dropdownParent = resolveParent(cfg.dropdownParent);
     this.#templateSelection = cfg.templateSelection;
     this.#templateOption = cfg.templateOption;
+    this.#templateArrow = cfg.templateArrow;
+    this.#templateClear = cfg.templateClear;
+    this.#templateTagRemove = cfg.templateTagRemove;
+    this.#templateGroup = cfg.templateGroup;
+    this.#templateEmpty = cfg.templateEmpty;
     this.controller = createSelkit(cfg);
     this.element = document.createElement("div");
     this.element.className = this.#prefix;
@@ -401,16 +417,50 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.#scrollActiveIntoView(s);
   }
-  /** 套用 templateSelection 到已選容器 字串走 textContent Node 直接掛入 無模板則用 label */
+  /**
+   * 鍵盤導航/開啟時讓作用中選項保持可見（aria-activedescendant 完整度）
+   * 僅在 activeIndex 變動時動作 手動捲動觸發的重繪不會跟著捲
+   */
+  #scrollActiveIntoView(s) {
+    if (!s.isOpen) {
+      this.#lastActive = -1;
+      return;
+    }
+    if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
+    this.#lastActive = s.activeIndex;
+    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    if (this.#virtual && !hasGroups) {
+      const next = computeScrollIntoView({
+        index: s.activeIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight,
+        itemHeight: this.#itemHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
+    const active = this.#dropdown.querySelector(
+      `.${this.#cls("option", "active")}`
+    );
+    active?.scrollIntoView?.({ block: "nearest" });
+  }
+  /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
+  #applyTemplate(host, out) {
+    if (out instanceof Node) host.append(out);
+    else host.textContent = out;
+  }
+  /** 套用 templateSelection 到已選容器 無模板則用 label */
   #fillSelection(host, option, meta) {
     if (!this.#templateSelection) {
       host.textContent = option.label;
       return;
     }
-    const out = this.#templateSelection(option, meta);
-    if (out instanceof Node) host.append(out);
-    else host.textContent = out;
+    this.#applyTemplate(host, this.#templateSelection(option, meta));
   }
   #renderField(s) {
     for (const child of Array.from(this.#field.children)) {
@@ -431,7 +481,11 @@ var SelkitDom = class {
         remove.className = this.#cls("tag-remove");
         remove.dataset.index = String(i);
         remove.setAttribute("aria-label", `Remove ${opt.label}`);
-        remove.textContent = "\xD7";
+        if (this.#templateTagRemove) {
+          this.#applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
+        } else {
+          remove.textContent = "\xD7";
+        }
         tag.append(label, remove);
         frag.append(tag);
       });
@@ -461,12 +515,19 @@ var SelkitDom = class {
       clear.type = "button";
       clear.className = this.#cls("clear");
       clear.setAttribute("aria-label", "Clear");
-      clear.textContent = "\xD7";
+      if (this.#templateClear) {
+        this.#applyTemplate(clear, this.#templateClear());
+      } else {
+        clear.textContent = "\xD7";
+      }
       this.#indicators.append(clear);
     }
     const arrow = document.createElement("span");
     arrow.className = this.#cls("arrow");
     arrow.setAttribute("aria-hidden", "true");
+    if (this.#templateArrow) {
+      this.#applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
+    }
     this.#indicators.append(arrow);
   }
   #renderOptions(s) {
@@ -476,7 +537,19 @@ var SelkitDom = class {
     if (view.rows.length === 0) {
       const empty = document.createElement("div");
       empty.className = this.#cls("empty");
-      empty.textContent = this.controller.getEmptyMessage();
+      const message = this.controller.getEmptyMessage();
+      if (this.#templateEmpty) {
+        this.#applyTemplate(
+          empty,
+          this.#templateEmpty({
+            reason: this.controller.getEmptyReason(),
+            message,
+            query: s.query
+          })
+        );
+      } else {
+        empty.textContent = message;
+      }
       this.#dropdown.append(empty);
       return;
     }
@@ -505,7 +578,14 @@ var SelkitDom = class {
         const group = document.createElement("div");
         group.className = this.#cls("group");
         if (row.disabled) group.classList.add(this.#cls("group", "disabled"));
-        group.textContent = row.label;
+        if (this.#templateGroup) {
+          this.#applyTemplate(
+            group,
+            this.#templateGroup({ label: row.label, disabled: !!row.disabled })
+          );
+        } else {
+          group.textContent = row.label;
+        }
         this.#dropdown.append(group);
         continue;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkit/dom",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Vanilla JS renderer for Selkit — DOM, events, a11y and default positioner.",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@selkit/core": "0.1.1"
+    "@selkit/core": "0.3.0"
   },
   "devDependencies": {
     "axe-core": "^4.12.1",