ninemoon-ui 0.1.14 → 0.2.1

package/dist/js/table/table.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, useSlots, h, nextTick, ref, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, renderList, withDirectives, vModelCheckbox, createCommentVNode, createTextVNode, toDisplayString, createBlock, markRaw } from "vue";
+import { defineComponent, computed, useSlots, h, nextTick, normalizeClass, ref, openBlock, createElementBlock, Fragment, createElementVNode, renderList, withDirectives, vModelCheckbox, createCommentVNode, createTextVNode, toDisplayString, createBlock, resolveDynamicComponent, Comment, Text } from "vue";
 import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
 const _hoisted_1 = ["width"];
 const _hoisted_2 = { key: 0 };
@@ -8,11 +8,8 @@ const _hoisted_5 = {
   key: 0,
   class: "text-center"
 };
-const _hoisted_6 = {
-  class: "px-1",
-  for: "checkbox"
-};
-const _hoisted_7 = ["checked", "onChange"];
+const _hoisted_6 = ["for"];
+const _hoisted_7 = ["id", "checked", "onChange"];
 const _hoisted_8 = {
   key: 1,
   class: "text-center"
@@ -49,7 +46,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("selectionChange", resultArray.value);
     };
     const slots = useSlots();
+    const flattenSlots = (nodes) => {
+      const result = [];
+      for (const node of nodes) {
+        if (!node)
+          continue;
+        if (node.type === Comment || node.type === Text)
+          continue;
+        if (node.type === Fragment) {
+          if (node.children) {
+            result.push(...flattenSlots(
+              Array.isArray(node.children) ? node.children : [node.children]
+            ));
+          }
+          continue;
+        }
+        if (node.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          if (node.children) {
+            result.push(...flattenSlots(node.children));
+          }
+          continue;
+        }
+        if (node.shapeFlag & (ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT | ShapeFlags.SLOTS_CHILDREN)) {
+          result.push(node);
+        }
+      }
+      return result;
+    };
+    const validSlots = computed(() => {
+      var _a;
+      const defaultSlots = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+      return flattenSlots(defaultSlots);
+    });
     const groupedSlots = computed(() => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
       const groups = {
         append: null,
         prepend: null,
@@ -59,8 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         hasindex: false,
         hascheck: false
       };
-      const _categorizeSlot = (slot) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+      for (const slot of validSlots.value) {
         const type = (_a = slot.props) == null ? void 0 : _a.type;
         switch (type) {
           case "append":
@@ -71,59 +100,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             break;
           case "index":
             groups.rest.push({
-              type: (_b = slot.props) == null ? void 0 : _b.type,
-              prop: (_c = slot.props) == null ? void 0 : _c.prop,
-              label: ((_d = slot.props) == null ? void 0 : _d.label) || "",
-              width: (_e = slot.props) == null ? void 0 : _e.width
+              type,
+              prop: (_b = slot.props) == null ? void 0 : _b.prop,
+              label: ((_c = slot.props) == null ? void 0 : _c.label) || "",
+              width: (_d = slot.props) == null ? void 0 : _d.width
             });
             groups.restLen += 1;
             groups.hasindex = true;
             break;
           case "selection":
             groups.rest.push({
-              type: (_f = slot.props) == null ? void 0 : _f.type,
-              prop: (_g = slot.props) == null ? void 0 : _g.prop,
-              label: ((_h = slot.props) == null ? void 0 : _h.label) || "",
-              width: (_i = slot.props) == null ? void 0 : _i.width
+              type,
+              prop: (_e = slot.props) == null ? void 0 : _e.prop,
+              label: ((_f = slot.props) == null ? void 0 : _f.label) || "",
+              width: (_g = slot.props) == null ? void 0 : _g.width
             });
             groups.restLen += 1;
             groups.hascheck = true;
             break;
           default:
             groups.rest.push({
-              type: (_j = slot.props) == null ? void 0 : _j.type,
-              prop: (_k = slot.props) == null ? void 0 : _k.prop,
-              label: ((_l = slot.props) == null ? void 0 : _l.label) || "",
-              width: (_m = slot.props) == null ? void 0 : _m.width
+              type,
+              prop: (_h = slot.props) == null ? void 0 : _h.prop,
+              label: ((_i = slot.props) == null ? void 0 : _i.label) || "",
+              width: (_j = slot.props) == null ? void 0 : _j.width
             });
             groups.restLen += 1;
             groups.normal.push({
-              isSlot: Boolean((_n = slot.children) == null ? void 0 : _n.default),
-              prop: (_o = slot.props) == null ? void 0 : _o.prop,
+              isSlot: Boolean((_k = slot.children) == null ? void 0 : _k.default),
+              prop: (_l = slot.props) == null ? void 0 : _l.prop,
               slot
             });
             break;
         }
-      };
-      slots.default().forEach((node) => {
-        if (node.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-          node.children.forEach(_categorizeSlot);
-        } else if (node.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-          _categorizeSlot(node);
-        }
-      });
+      }
       return groups;
     });
     const prependSlot = computed(() => groupedSlots.value.prepend);
     const appendSlot = computed(() => groupedSlots.value.append);
-    const dynamicPre = (props2) => {
+    const dynamicPre = computed(() => (props2) => {
       var _a, _b, _c;
       return (_c = (_a = prependSlot.value) == null ? void 0 : (_b = _a.children).default) == null ? void 0 : _c.call(_b, props2);
-    };
-    const dynamicAppend = (props2) => {
+    });
+    const dynamicAppend = computed(() => (props2) => {
       var _a, _b, _c;
       return (_c = (_a = appendSlot.value) == null ? void 0 : (_b = _a.children).default) == null ? void 0 : _c.call(_b, props2);
-    };
+    });
     const hasindexSlot = computed(() => groupedSlots.value.hasindex);
     const hascheckSlot = computed(() => groupedSlots.value.hascheck);
     const normalSlots = computed(() => groupedSlots.value.normal);
@@ -146,17 +168,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     nextTick(() => {
       emit("finishRender");
     });
-    const dynormalRenderHandle = (rowprops) => {
-      return dynamicnormal.value.map((rh, _) => {
-        return h(
-          "td",
-          {
-            class: normalizeClass(["text-center py-2", props.cellclass])
-          },
-          rh({ row: rowprops.row, index: rowprops.rowindex })
-        );
-      });
-    };
+    const dynormalRenderHandle = computed(() => {
+      return (rowprops) => {
+        return dynamicnormal.value.map((rh, _) => {
+          return h(
+            "td",
+            {
+              class: normalizeClass(["text-center py-2", props.cellclass])
+            },
+            rh({ row: rowprops.row, index: rowprops.rowindex })
+          );
+        });
+      };
+    });
     const getRowKey = (rowdata, index) => props.idKey ? `row_${rowdata[props.idKey]}` : `row_${index}`;
     const getPreRowkey = (rowdata, index) => props.idKey ? `prepend_${rowdata[props.idKey]}` : `prepend_${index}`;
     const getAppendRowkey = (rowdata, index) => props.idKey ? `append_${rowdata[props.idKey]}` : `append_${index}`;
@@ -240,7 +264,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("table", {
-          class: normalizeClass(["w-full text-sm", _ctx.tableclass])
+          class: normalizeClass(["w-full text-sm", __props.tableclass])
         }, [
           createElementVNode("colgroup", null, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(cachedSlots.value, (i, j) => {
@@ -250,39 +274,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, null, 8, _hoisted_1);
             }), 128))
           ]),
-          _ctx.showHead ? (openBlock(), createElementBlock("thead", {
+          __props.showHead ? (openBlock(), createElementBlock("thead", {
             key: 0,
-            class: normalizeClass(["text-word6", _ctx.headclass])
+            class: normalizeClass(["text-word6", __props.headclass])
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(cachedSlots.value, (i, j) => {
-              return openBlock(), createElementBlock("th", {
-                class: "font-normal h-10 border-b",
-                key: j
-              }, [
-                i.type === "selection" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                  !_ctx.outSideCheck ? withDirectives((openBlock(), createElementBlock("input", {
-                    key: 0,
-                    type: "checkbox",
-                    class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 focus:outline-none",
-                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allSelect.value = $event)
-                  }, null, 512)), [
-                    [vModelCheckbox, allSelect.value]
-                  ]) : createCommentVNode("", true)
-                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                  createTextVNode(toDisplayString(i.label), 1)
-                ], 64))
-              ]);
-            }), 128))
+            createElementVNode("tr", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(cachedSlots.value, (i, j) => {
+                return openBlock(), createElementBlock("th", {
+                  class: "font-normal h-10 border-b",
+                  key: j
+                }, [
+                  i.type === "selection" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    !__props.outSideCheck ? withDirectives((openBlock(), createElementBlock("input", {
+                      key: 0,
+                      type: "checkbox",
+                      class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 focus:outline-none",
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allSelect.value = $event)
+                    }, null, 512)), [
+                      [vModelCheckbox, allSelect.value]
+                    ]) : createCommentVNode("", true)
+                  ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                    createTextVNode(toDisplayString(i.label), 1)
+                  ], 64))
+                ]);
+              }), 128))
+            ])
           ], 2)) : createCommentVNode("", true),
           createElementVNode("tbody", null, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (rowdata, rowindex) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (rowdata, rowindex) => {
               return openBlock(), createElementBlock(Fragment, {
                 key: getRowKey(rowdata, rowindex)
               }, [
                 prependSlot.value ? (openBlock(), createElementBlock("tr", _hoisted_2, [
                   createElementVNode("td", { colspan: colSpan.value }, [
-                    (openBlock(), createBlock(dynamicPre, {
-                      row: markRaw(rowdata),
+                    (openBlock(), createBlock(resolveDynamicComponent(dynamicPre.value), {
+                      row: rowdata,
                       index: rowindex,
                       key: getPreRowkey(rowdata, rowindex)
                     }, null, 8, ["row", "index"]))
@@ -290,28 +316,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ])) : createCommentVNode("", true),
                 createElementVNode("tr", _hoisted_4, [
                   hascheckSlot.value ? (openBlock(), createElementBlock("td", _hoisted_5, [
-                    createElementVNode("label", _hoisted_6, [
+                    createElementVNode("label", {
+                      class: "px-1",
+                      for: `checkbox_${getRowKey(rowdata, rowindex)}`
+                    }, [
                       createElementVNode("input", {
                         type: "checkbox",
-                        checked: choosedSet.value.has(_ctx.idKey ? rowdata[_ctx.idKey] : rowindex),
+                        id: `checkbox_${getRowKey(rowdata, rowindex)}`,
+                        checked: choosedSet.value.has(__props.idKey ? rowdata[__props.idKey] : rowindex),
                         onChange: ($event) => checkChange($event, rowdata, rowindex),
                         class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 text-red-600 focus:outline-none"
                       }, null, 40, _hoisted_7)
-                    ])
+                    ], 8, _hoisted_6)
                   ])) : createCommentVNode("", true),
                   hasindexSlot.value ? (openBlock(), createElementBlock("td", _hoisted_8, [
                     createElementVNode("div", null, toDisplayString(rowindex + 1), 1)
                   ])) : createCommentVNode("", true),
-                  (openBlock(), createBlock(dynormalRenderHandle, {
-                    row: markRaw(rowdata),
+                  (openBlock(), createBlock(resolveDynamicComponent(dynormalRenderHandle.value), {
+                    row: rowdata,
                     rowindex,
                     key: getRowKey(rowdata, rowindex)
                   }, null, 8, ["row", "rowindex"]))
                 ]),
                 appendSlot.value ? (openBlock(), createElementBlock("tr", _hoisted_9, [
                   createElementVNode("td", { colspan: colSpan.value }, [
-                    (openBlock(), createBlock(dynamicAppend, {
-                      row: markRaw(rowdata),
+                    (openBlock(), createBlock(resolveDynamicComponent(dynamicAppend.value), {
+                      row: rowdata,
                       index: rowindex,
                       key: getAppendRowkey(rowdata, rowindex)
                     }, null, 8, ["row", "index"]))

package/dist/js/table/tableItem.js

@@ -15,8 +15,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     return (_ctx, _cache) => {
       return renderSlot(_ctx.$slots, "default", {
-        row: _ctx.row,
-        index: _ctx.index
+        row: __props.row,
+        index: __props.index
       });
     };
   }

package/dist/js/tabs/tabs.js

@@ -1,11 +1,14 @@
-import { defineComponent, computed, ref, reactive, useSlots, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
+import { defineComponent, computed, ref, reactive, useSlots, onMounted, nextTick, onUnmounted, openBlock, createElementBlock, createElementVNode, createVNode, normalizeClass, withCtx, Fragment, renderList, toDisplayString, createCommentVNode, normalizeStyle, Comment, Text, h, withDirectives, vShow } from "vue";
+import { _ as _sfc_main$1 } from "../popover.vue_vue_type_script_setup_true_lang/popover.vue_vue_type_script_setup_true_lang.js";
 import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
+import "../index/index.js";
 const _hoisted_1 = { class: "relative w-full overflow-hidden" };
-const _hoisted_2 = {
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = {
   key: 0,
   class: "relative my-2 border-t-2 border-solid border-gray-200"
 };
-const _hoisted_3 = { class: "relative w-full" };
+const _hoisted_4 = { class: "relative w-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: {
@@ -40,27 +43,98 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       left: 0,
       width: 0
     });
+    const showPopver = ref(false);
+    const dropdownSelected = ref("");
+    const containerWidth = ref(0);
+    const tabsWidth = ref([]);
+    const hasOverflow = ref(false);
     const slots = useSlots();
+    const flattenSlots = (nodes) => {
+      const result = [];
+      for (const node of nodes) {
+        if (!node)
+          continue;
+        if (node.type === Comment || node.type === Text)
+          continue;
+        if (node.type === Fragment) {
+          if (node.children) {
+            result.push(...flattenSlots(
+              Array.isArray(node.children) ? node.children : [node.children]
+            ));
+          }
+          continue;
+        }
+        if (node.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          if (node.children) {
+            result.push(...flattenSlots(node.children));
+          }
+          continue;
+        }
+        if (node.shapeFlag & (ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT | ShapeFlags.SLOTS_CHILDREN)) {
+          result.push(node);
+        }
+      }
+      return result;
+    };
     const validSlots = computed(() => {
-      return slots.default().reduce((pre, cur) => {
-        if (cur.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-          pre = pre.concat(cur.children);
-        } else if (cur.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
-          pre.push(cur);
+      var _a;
+      const defaultSlots = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || [];
+      return flattenSlots(defaultSlots);
+    });
+    const visibleTabs = computed(() => {
+      if (!hasOverflow.value) {
+        return validSlots.value;
+      }
+      let totalWidth = 0;
+      const dropdownWidth = 64;
+      const maxWidth = containerWidth.value - dropdownWidth;
+      const visible = [];
+      for (let i = 0; i < validSlots.value.length; i++) {
+        const tabWidth = tabsWidth.value[i] || 100;
+        if (totalWidth + tabWidth <= maxWidth || i === 0 && validSlots.value.length > 1) {
+          totalWidth += tabWidth;
+          visible.push(validSlots.value[i]);
+        } else {
+          break;
         }
-        return pre;
-      }, []);
+      }
+      if (visible.length === validSlots.value.length) {
+        return validSlots.value;
+      }
+      return visible;
     });
+    const overflowTabs = computed(() => {
+      if (!hasOverflow.value) {
+        return [];
+      }
+      return validSlots.value.slice(visibleTabs.value.length);
+    });
+    const handleDropdownChange = () => {
+      const selectedIndex = validSlots.value.findIndex((tab) => tab.props.name === dropdownSelected.value);
+      if (selectedIndex !== -1) {
+        activeIndex.value = selectedIndex;
+        currentActive.value = dropdownSelected.value;
+        nextTick(() => {
+          var _a;
+          const activeElement = (_a = observerRef.value) == null ? void 0 : _a.children[selectedIndex];
+          if (activeElement) {
+            indicatorPos.width = activeElement.offsetWidth;
+            indicatorPos.left = activeElement.offsetLeft;
+          }
+        });
+      }
+    };
     const renderBar = () => {
       return h(
         "div",
         {
           class: normalizeClass([
-            "ETab",
+            "ETab flex-grow",
             [showBaseline.value ? "px-2 pt-2" : " ETab_Card"]
-          ])
+          ]),
+          ref: observerRef
         },
-        validSlots.value.map((it, index) => {
+        visibleTabs.value.map((it, index) => {
           return renderBtn(it, index);
         })
       );
@@ -109,7 +183,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           {
             class: normalizeClass(divc)
           },
-          node.props.name
+          node.props.label || node.props.name
         )
       );
     };
@@ -127,8 +201,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         [[vShow, activeIndex.value === i]]
       );
     };
+    const containRef = ref();
     const observerRef = ref();
     let observer;
+    const resizeObserver = new ResizeObserver((entries) => {
+      if (entries.length > 0) {
+        const entry = entries[0];
+        const newWidth = entry.contentRect.width;
+        if (Math.abs(newWidth - containerWidth.value) > 1) {
+          containerWidth.value = newWidth;
+          checkOverflow();
+        }
+      }
+    });
+    const checkOverflow = () => {
+      if (!observerRef.value)
+        return;
+      const tabElements = observerRef.value.children;
+      const newTabsWidth = Array.from(tabElements).map((el) => el.clientWidth);
+      const totalWidth = newTabsWidth.reduce((sum, width) => sum + width, 0);
+      const dropdownWidth = 64;
+      const wouldOverflow = totalWidth > containerWidth.value;
+      const wouldOverflowWithDropdown = totalWidth + dropdownWidth > containerWidth.value;
+      const newHasOverflow = hasOverflow.value ? wouldOverflowWithDropdown : wouldOverflow;
+      if (newHasOverflow !== hasOverflow.value) {
+        hasOverflow.value = newHasOverflow;
+      }
+      const widthChanged = newTabsWidth.length !== tabsWidth.value.length || newTabsWidth.some((width, index) => width !== tabsWidth.value[index]);
+      if (widthChanged) {
+        tabsWidth.value = newTabsWidth;
+      }
+      if (newHasOverflow && overflowTabs.value.length > 0) {
+        const isActiveInOverflow = overflowTabs.value.some((tab) => tab.props.name === currentActive.value);
+        if (isActiveInOverflow && dropdownSelected.value !== currentActive.value) {
+          dropdownSelected.value = currentActive.value || "";
+        }
+      }
+    };
+    const handleOverflowTabClick = (tab) => {
+      const name = tab.props.name;
+      dropdownSelected.value = name;
+      handleDropdownChange();
+      showPopver.value = false;
+    };
     onMounted(() => {
       observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
@@ -142,28 +257,94 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (observerRef.value) {
         observer.observe(observerRef.value);
       }
+      if (containRef.value) {
+        containerWidth.value = containRef.value.clientWidth;
+        resizeObserver.observe(containRef.value);
+      }
+      nextTick(() => {
+        checkOverflow();
+      });
     });
     onUnmounted(() => {
       if (observerRef.value) {
         observer.unobserve(observerRef.value);
       }
+      if (containRef.value) {
+        resizeObserver.unobserve(containRef.value);
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(renderBar, {
-          ref_key: "observerRef",
-          ref: observerRef
-        }, null, 512),
-        showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+        createElementVNode("div", {
+          class: "flex items-end",
+          ref_key: "containRef",
+          ref: containRef
+        }, [
+          createVNode(renderBar, {
+            ref_key: "observerRef",
+            ref: observerRef
+          }, null, 512),
+          hasOverflow.value ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            class: normalizeClass({ "ETab_Card": !showBaseline.value, "h-11": !showBaseline.value })
+          }, [
+            createVNode(_sfc_main$1, {
+              trigger: "native",
+              "insert-class": "!p-0",
+              placement: "bottomright",
+              arrowshow: false,
+              modelValue: showPopver.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => showPopver.value = $event),
+              ref: "morePopoverRef"
+            }, {
+              reference: withCtx(() => [
+                createElementVNode("div", {
+                  onClick: _cache[0] || (_cache[0] = ($event) => showPopver.value = true),
+                  class: normalizeClass([
+                    "text-blue-500 cursor-pointer inline-flex items-center justify-center px-2 text-sm",
+                    showBaseline.value ? " " : "h-11 rounded-tl-lg rounded-tr-lg  font-medium focus:text-blue-brand"
+                  ])
+                }, [..._cache[2] || (_cache[2] = [
+                  createElementVNode("div", { class: "whitespace-nowrap" }, "更多", -1),
+                  createElementVNode("svg", {
+                    class: "w-4 h-4 ml-1",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    xmlns: "http://www.w3.org/2000/svg"
+                  }, [
+                    createElementVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M19 9l-7 7-7-7"
+                    })
+                  ], -1)
+                ])], 2)
+              ]),
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(overflowTabs.value, (tab) => {
+                  return openBlock(), createElementBlock("div", {
+                    key: tab.props.name,
+                    class: "px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer whitespace-nowrap",
+                    onClick: ($event) => handleOverflowTabClick(tab)
+                  }, toDisplayString(tab.props.label || tab.props.name), 9, _hoisted_2);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ], 2)) : createCommentVNode("", true)
+        ], 512),
+        showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
           createElementVNode("div", {
             class: "absolute bottom-0 border-t-2 border-solid border-blue-brand transition",
             style: normalizeStyle({
-              transform: `translateX(${indicatorPos.left}px`,
+              transform: `translateX(${indicatorPos.left}px)`,
               width: `${indicatorPos.width}px`
             })
           }, null, 4)
         ])) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_3, [
+        createElementVNode("div", _hoisted_4, [
           createVNode(renderContent)
         ])
       ]);