@selkit/dom 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -155,6 +155,11 @@ var SelkitDom = class {
   #dropdownParent;
   #templateSelection;
   #templateOption;
+  #templateArrow;
+  #templateClear;
+  #templateTagRemove;
+  #templateGroup;
+  #templateEmpty;
   #sourceSelect;
   #control;
   #field;
@@ -192,6 +197,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;
@@ -433,15 +443,18 @@ var SelkitDom = class {
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
   }
-  /** 套用 templateSelection 到已選容器 字串走 textContent Node 直接掛入 無模板則用 label */
+  /** 套用模板輸出：字串走 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 +475,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 +509,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 +531,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 +572,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

@@ -124,6 +124,11 @@ var SelkitDom = class {
   #dropdownParent;
   #templateSelection;
   #templateOption;
+  #templateArrow;
+  #templateClear;
+  #templateTagRemove;
+  #templateGroup;
+  #templateEmpty;
   #sourceSelect;
   #control;
   #field;
@@ -161,6 +166,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;
@@ -402,15 +412,18 @@ var SelkitDom = class {
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
   }
-  /** 套用 templateSelection 到已選容器 字串走 textContent Node 直接掛入 無模板則用 label */
+  /** 套用模板輸出：字串走 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 +444,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 +478,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 +500,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 +541,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.2.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.2.0"
   },
   "devDependencies": {
     "axe-core": "^4.12.1",