修复：选项卡

嵌套bug

doc/tab.html

@@ -1,5 +1,5 @@
 <div>
-
+    <p>静态</p>
     <div class="bny-tab" hx-ext="bny-tab">
         <div class="bny-tab-title">
             <div class="bny-tab-item">选项一</div>
@@ -13,4 +13,13 @@
         </div>
     </div>
     <br>
+    <p>动态</p>
+    <div class="bny-tab" selected="1" hx-ext="bny-tab">
+        <div class="bny-tab-title">
+            <div class="bny-tab-item" hx-get="doc/tab/demo01.html">选项一</div>
+            <div class="bny-tab-item" hx-get="doc/tab/demo02.html">选项二</div>
+            <div class="bny-tab-item" hx-get="doc/tab/demo03.html">选项三</div>
+        </div>
+        <div class="bny-tab-body" hx-trigger="load"></div>
+    </div>
 </div>

doc/tab/demo01.html

@@ -0,0 +1,3 @@
+<div>
+    <span>我是选项一</span>
+</div>

doc/tab/demo02.html

@@ -0,0 +1,3 @@
+<div>
+    <span>我是选项二</span>
+</div>

doc/tab/demo03.html

@@ -0,0 +1,3 @@
+<div>
+    <span>我是选项三</span>
+</div>

src/bny-tab.js

@@ -3,59 +3,70 @@ import tool from "./tool"
 
 // 拓展-选项卡
 (function () {
-    /**
-     * 获取顶级标签
-     * @param {object} elem 标签对象
-     * @returns object|null
-     */
-    function getTopParent(elem) {
-        let current = elem
-        while (current.parentNode) {
-            current = current.parentNode
-            if (current.classList.contains("bny-tab")) {
-                return current
+
+    function beforeProcessNode(evt) {
+        const elem = evt.target
+        if (evt.target.classList.contains("bny-tab")) {
+            let items = htmx.findAll(".bny-tab-item", elem)
+            items.forEach((item) => {
+                htmx.on(item, "click", function () {
+                    const index = tool.indexOf(this)
+                    const parent = this.parentNode.parentNode
+                    const body = htmx.find(parent, `.bny-tab-body>div:nth-child(${index + 1})`)
+                    htmx.find(parent, ".bny-tab-title .this")?.classList.remove("this")
+                    htmx.find(parent, ".bny-tab-body .this")?.classList.remove("this")
+                    htmx.addClass(this, "this")
+                    htmx.addClass(body, "this")
+                })
+            });
+            return false
+        }
+        return true
+    }
+
+    function afterProcessNode(evt) {
+        const elem = evt.target
+        if (elem.classList.contains("bny-tab-body")) {
+            const num = htmx.findAll(elem.parentNode, ".bny-tab-title .bny-tab-item").length
+            const then_num = htmx.findAll(elem, "div").length
+            if ((num - then_num) > 0) {
+                for (let i = 0; i < (num - then_num); i++) {
+                    const div = document.createElement("div")
+                    elem.append(div)
+                }
             }
+            let parent = elem.parentNode
+            const selected = parent.getAttribute("selected") ?? 0
+            const default_item = htmx.find(parent,
+                `.bny-tab-title .bny-tab-item:nth-child(${Number(selected) + 1})`)
+            default_item.click()
         }
-        return null
     }
+
+    function beforeSwap(evt) {
+        const elem = evt.target
+        if (elem.classList.contains("bny-tab-item")) {
+            const index = tool.indexOf(elem)
+            const body = htmx.find(elem.parentNode.parentNode, `.bny-tab-body>div:nth-child(${index + 1})`)
+            // body.innerHTML = evt.detail.serverResponse
+            htmx.swap(body, evt.detail.serverResponse, { swapStyle: "innerHTML" })
+            // htmx.process(body)
+        }
+    }
+
     htmx.defineExtension("bny-tab", {
         onEvent: function (name, evt) {
-            const elem = evt.target
+            // console.log(name, evt)
             if (name === "htmx:beforeProcessNode") {
-                if (elem.classList.contains("bny-tab")) {
-                    const items = htmx.findAll(".bny-tab-item", elem)
-                    const tab_body = htmx.find(".bny-tab-body", elem)
-                    items.forEach((item) => {
-                        let div = document.createElement("div")
-                        tab_body.append(div)
-                        htmx.on(item, "click", function () {
-                            const index = tool.indexOf(this)
-                            htmx.find(elem, ".bny-tab-title .this")?.classList.remove("this")
-                            htmx.find(elem, ".bny-tab-body .this")?.classList.remove("this")
-                            htmx.addClass(this, "this")
-                            const body = htmx.find(elem, `.bny-tab-body>div:nth-child(${index + 1})`)
-                            htmx.addClass(body, "this")
-                        })
-                    });
-                }
+                return beforeProcessNode(evt)
             }
             if (name === "htmx:afterProcessNode") {
-                if (elem.classList.contains("bny-tab-body")) {
-                    let parent = getTopParent(elem)
-                    const selected = parent.getAttribute("selected") ?? 0
-                    const default_item = htmx.find(parent,
-                        `.bny-tab-title .bny-tab-item:nth-child(${Number(selected) + 1})`)
-                    default_item.click()
-                }
+                afterProcessNode(evt)
+                return false
             }
             if (name === "htmx:beforeSwap") {
-                if (elem.classList.contains("bny-tab-item")) {
-                    const index = tool.indexOf(elem)
-                    const body = htmx.find(getTopParent(elem), `.bny-tab-body>div:nth-child(${index + 1})`)
-                    body.innerHTML = evt.detail.serverResponse
-                    htmx.process(body)
-                    return false
-                }
+                beforeSwap(evt)
+                return false
             }
         }
     })