element-ps 1.0.6 → 1.0.10

package/dist/index.full.js

@@ -4619,7 +4619,7 @@
     class: "el-input__prefix"
   };
   const _hoisted_5$i = { class: "el-input__prefix-inner" };
-  const _hoisted_6$b = {
+  const _hoisted_6$c = {
     key: 2,
     class: "el-input__suffix"
   };
@@ -4696,7 +4696,7 @@
           ])
         ])) : vue.createCommentVNode("v-if", true),
         vue.createCommentVNode(" suffix slot "),
-        _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$b, [
+        _ctx.suffixVisible ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$c, [
           vue.createElementVNode("span", _hoisted_7$8, [
             !_ctx.showClear || !_ctx.showPwdVisible || !_ctx.isWordLimitVisible ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               vue.renderSlot(_ctx.$slots, "suffix"),
@@ -5273,6 +5273,214 @@
   });
   const PsBreadcrumbItem = withNoopInstall(script$1w);
 
+  function tryOnScopeDispose(fn) {
+    if (vue.getCurrentScope()) {
+      vue.onScopeDispose(fn);
+      return true;
+    }
+    return false;
+  }
+
+  const isClient = typeof window !== "undefined";
+  const isString = (val) => typeof val === "string";
+  const noop = () => {
+  };
+
+  function createFilterWrapper(filter, fn) {
+    function wrapper(...args) {
+      filter(() => fn.apply(this, args), { fn, thisArg: this, args });
+    }
+    return wrapper;
+  }
+  function throttleFilter(ms, trailing = true, leading = true) {
+    let lastExec = 0;
+    let timer;
+    let preventLeading = !leading;
+    const clear = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = void 0;
+      }
+    };
+    const filter = (invoke) => {
+      const duration = vue.unref(ms);
+      const elapsed = Date.now() - lastExec;
+      clear();
+      if (duration <= 0) {
+        lastExec = Date.now();
+        return invoke();
+      }
+      if (elapsed > duration) {
+        lastExec = Date.now();
+        if (preventLeading)
+          preventLeading = false;
+        else
+          invoke();
+      } else if (trailing) {
+        timer = setTimeout(() => {
+          lastExec = Date.now();
+          if (!leading)
+            preventLeading = true;
+          clear();
+          invoke();
+        }, duration);
+      }
+      if (!leading && !timer)
+        timer = setTimeout(() => preventLeading = true, duration);
+    };
+    return filter;
+  }
+
+  function useThrottleFn(fn, ms = 200, trailing = true, leading = true) {
+    return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
+  }
+
+  function useTimeoutFn(cb, interval, options = {}) {
+    const {
+      immediate = true
+    } = options;
+    const isPending = vue.ref(false);
+    let timer = null;
+    function clear() {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    }
+    function stop() {
+      isPending.value = false;
+      clear();
+    }
+    function start(...args) {
+      clear();
+      isPending.value = true;
+      timer = setTimeout(() => {
+        isPending.value = false;
+        timer = null;
+        cb(...args);
+      }, vue.unref(interval));
+    }
+    if (immediate) {
+      isPending.value = true;
+      if (isClient)
+        start();
+    }
+    tryOnScopeDispose(stop);
+    return {
+      isPending,
+      start,
+      stop
+    };
+  }
+
+  function unrefElement(elRef) {
+    var _a;
+    const plain = vue.unref(elRef);
+    return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+  }
+
+  const defaultWindow = isClient ? window : void 0;
+  isClient ? window.document : void 0;
+  isClient ? window.navigator : void 0;
+
+  function useEventListener(...args) {
+    let target;
+    let event;
+    let listener;
+    let options;
+    if (isString(args[0])) {
+      [event, listener, options] = args;
+      target = defaultWindow;
+    } else {
+      [target, event, listener, options] = args;
+    }
+    if (!target)
+      return noop;
+    let cleanup = noop;
+    const stopWatch = vue.watch(() => vue.unref(target), (el) => {
+      cleanup();
+      if (!el)
+        return;
+      el.addEventListener(event, listener, options);
+      cleanup = () => {
+        el.removeEventListener(event, listener, options);
+        cleanup = noop;
+      };
+    }, { immediate: true, flush: "post" });
+    const stop = () => {
+      stopWatch();
+      cleanup();
+    };
+    tryOnScopeDispose(stop);
+    return stop;
+  }
+
+  function useCssVar(prop, target, { window = defaultWindow } = {}) {
+    const variable = vue.ref("");
+    const elRef = vue.computed(() => {
+      var _a;
+      return unrefElement(target) || ((_a = window == null ? void 0 : window.document) == null ? void 0 : _a.documentElement);
+    });
+    vue.watch(elRef, (el) => {
+      if (el && window)
+        variable.value = window.getComputedStyle(el).getPropertyValue(prop);
+    }, { immediate: true });
+    vue.watch(variable, (val) => {
+      var _a;
+      if ((_a = elRef.value) == null ? void 0 : _a.style)
+        elRef.value.style.setProperty(prop, val);
+    });
+    return variable;
+  }
+
+  var SwipeDirection;
+  (function(SwipeDirection2) {
+    SwipeDirection2["UP"] = "UP";
+    SwipeDirection2["RIGHT"] = "RIGHT";
+    SwipeDirection2["DOWN"] = "DOWN";
+    SwipeDirection2["LEFT"] = "LEFT";
+    SwipeDirection2["NONE"] = "NONE";
+  })(SwipeDirection || (SwipeDirection = {}));
+
+  function calcColorChannels(c) {
+    let rawColor = c.replace("#", "");
+    if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
+      rawColor = rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2);
+    }
+    if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
+      return {
+        red: parseInt(rawColor.slice(0, 2), 16),
+        green: parseInt(rawColor.slice(2, 4), 16),
+        blue: parseInt(rawColor.slice(4, 6), 16)
+      };
+    }
+    return {
+      red: 255,
+      green: 255,
+      blue: 255
+    };
+  }
+  function mixColor(color, percent = 0.2) {
+    let { red, green, blue } = calcColorChannels(color);
+    if (percent > 0) {
+      red *= 1 - percent;
+      green *= 1 - percent;
+      blue *= 1 - percent;
+    } else {
+      const value = Math.abs(percent);
+      red += (255 - red) * Math.abs(percent);
+      green += (255 - green) * value;
+      blue += (255 - blue) * value;
+    }
+    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
+  }
+  function lighten(color, percent = 0.2) {
+    return mixColor(color, -percent);
+  }
+  function darken(color, percent = 0.2) {
+    return mixColor(color, percent);
+  }
+
   const buttonType = [
     "default",
     "primary",
@@ -5306,6 +5514,7 @@
     autofocus: Boolean,
     round: Boolean,
     circle: Boolean,
+    color: String,
     autoInsertSpace: {
       type: Boolean
     }
@@ -5344,7 +5553,44 @@
         size: vue.computed(() => elBtnGroup == null ? void 0 : elBtnGroup.size)
       });
       const buttonType = vue.computed(() => props.type || (elBtnGroup == null ? void 0 : elBtnGroup.type) || "default");
+      const typeColor = vue.computed(() => useCssVar(`--el-color-${props.type}`).value);
+      const buttonStyle = vue.computed(() => {
+        let styles = {};
+        const buttonColor = props.color || typeColor.value;
+        if (buttonColor) {
+          const darkenBgColor = darken(buttonColor, 0.1);
+          if (props.plain) {
+            styles = {
+              "--el-button-bg-color": lighten(buttonColor, 0.9),
+              "--el-button-text-color": buttonColor,
+              "--el-button-hover-text-color": "var(--el-color-white)",
+              "--el-button-hover-bg-color": buttonColor,
+              "--el-button-hover-border-color": buttonColor,
+              "--el-button-active-bg-color": darkenBgColor,
+              "--el-button-active-text-color": "var(--el-color-white)",
+              "--el-button-active-border-color": darkenBgColor
+            };
+          } else {
+            const lightenBgColor = lighten(buttonColor);
+            styles = {
+              "--el-button-bg-color": buttonColor,
+              "--el-button-border-color": buttonColor,
+              "--el-button-hover-bg-color": lightenBgColor,
+              "--el-button-hover-border-color": lightenBgColor,
+              "--el-button-active-bg-color": darkenBgColor,
+              "--el-button-active-border-color": darkenBgColor
+            };
+          }
+          if (buttonDisabled.value) {
+            const disabledButtonColor = lighten(buttonColor, 0.5);
+            styles["--el-button-disabled-bg-color"] = disabledButtonColor;
+            styles["--el-button-disabled-border-color"] = disabledButtonColor;
+          }
+        }
+        return styles;
+      });
       return {
+        buttonStyle,
         buttonSize,
         buttonType,
         buttonDisabled,
@@ -5372,7 +5618,8 @@
       ]),
       disabled: _ctx.buttonDisabled || _ctx.loading,
       autofocus: _ctx.autofocus,
-      type: _ctx.nativeType
+      type: _ctx.nativeType,
+      style: vue.normalizeStyle(_ctx.buttonStyle)
     }, [
       _ctx.loading ? (vue.openBlock(), vue.createBlock(_component_ps_icon, {
         key: 0,
@@ -5394,7 +5641,7 @@
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 2)) : vue.createCommentVNode("v-if", true)
-    ], 10, _hoisted_1$11);
+    ], 14, _hoisted_1$11);
   }
 
   script$1v.render = render$1o;
@@ -7363,7 +7610,7 @@
   const _hoisted_3$t = /* @__PURE__ */ vue.createElementVNode("span", { class: "el-checkbox__inner" }, null, -1);
   const _hoisted_4$l = ["aria-hidden", "name", "disabled", "true-value", "false-value"];
   const _hoisted_5$h = ["aria-hidden", "disabled", "value", "name"];
-  const _hoisted_6$a = {
+  const _hoisted_6$b = {
     key: 0,
     class: "el-checkbox__label"
   };
@@ -7415,7 +7662,7 @@
           [vue.vModelCheckbox, _ctx.model]
         ])
       ], 10, _hoisted_2$G),
-      _ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$a, [
+      _ctx.$slots.default || _ctx.label ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$b, [
         vue.renderSlot(_ctx.$slots, "default"),
         !_ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
           vue.createTextVNode(vue.toDisplayString(_ctx.label), 1)
@@ -10552,149 +10799,6 @@
     }
   });
 
-  function tryOnScopeDispose(fn) {
-    if (vue.getCurrentScope()) {
-      vue.onScopeDispose(fn);
-      return true;
-    }
-    return false;
-  }
-
-  const isClient = typeof window !== "undefined";
-  const isString = (val) => typeof val === "string";
-  const noop = () => {
-  };
-
-  function createFilterWrapper(filter, fn) {
-    function wrapper(...args) {
-      filter(() => fn.apply(this, args), { fn, thisArg: this, args });
-    }
-    return wrapper;
-  }
-  function throttleFilter(ms, trailing = true, leading = true) {
-    let lastExec = 0;
-    let timer;
-    let preventLeading = !leading;
-    const clear = () => {
-      if (timer) {
-        clearTimeout(timer);
-        timer = void 0;
-      }
-    };
-    const filter = (invoke) => {
-      const duration = vue.unref(ms);
-      const elapsed = Date.now() - lastExec;
-      clear();
-      if (duration <= 0) {
-        lastExec = Date.now();
-        return invoke();
-      }
-      if (elapsed > duration) {
-        lastExec = Date.now();
-        if (preventLeading)
-          preventLeading = false;
-        else
-          invoke();
-      } else if (trailing) {
-        timer = setTimeout(() => {
-          lastExec = Date.now();
-          if (!leading)
-            preventLeading = true;
-          clear();
-          invoke();
-        }, duration);
-      }
-      if (!leading && !timer)
-        timer = setTimeout(() => preventLeading = true, duration);
-    };
-    return filter;
-  }
-
-  function useThrottleFn(fn, ms = 200, trailing = true, leading = true) {
-    return createFilterWrapper(throttleFilter(ms, trailing, leading), fn);
-  }
-
-  function useTimeoutFn(cb, interval, options = {}) {
-    const {
-      immediate = true
-    } = options;
-    const isPending = vue.ref(false);
-    let timer = null;
-    function clear() {
-      if (timer) {
-        clearTimeout(timer);
-        timer = null;
-      }
-    }
-    function stop() {
-      isPending.value = false;
-      clear();
-    }
-    function start(...args) {
-      clear();
-      isPending.value = true;
-      timer = setTimeout(() => {
-        isPending.value = false;
-        timer = null;
-        cb(...args);
-      }, vue.unref(interval));
-    }
-    if (immediate) {
-      isPending.value = true;
-      if (isClient)
-        start();
-    }
-    tryOnScopeDispose(stop);
-    return {
-      isPending,
-      start,
-      stop
-    };
-  }
-
-  const defaultWindow = isClient ? window : void 0;
-
-  function useEventListener(...args) {
-    let target;
-    let event;
-    let listener;
-    let options;
-    if (isString(args[0])) {
-      [event, listener, options] = args;
-      target = defaultWindow;
-    } else {
-      [target, event, listener, options] = args;
-    }
-    if (!target)
-      return noop;
-    let cleanup = noop;
-    const stopWatch = vue.watch(() => vue.unref(target), (el) => {
-      cleanup();
-      if (!el)
-        return;
-      el.addEventListener(event, listener, options);
-      cleanup = () => {
-        el.removeEventListener(event, listener, options);
-        cleanup = noop;
-      };
-    }, { immediate: true, flush: "post" });
-    const stop = () => {
-      stopWatch();
-      cleanup();
-    };
-    tryOnScopeDispose(stop);
-    return stop;
-  }
-
-  var SwipeDirection;
-  (function(SwipeDirection2) {
-    SwipeDirection2["UP"] = "UP";
-    SwipeDirection2["RIGHT"] = "RIGHT";
-    SwipeDirection2["DOWN"] = "DOWN";
-    SwipeDirection2["LEFT"] = "LEFT";
-    SwipeDirection2["NONE"] = "NONE";
-  })(SwipeDirection || (SwipeDirection = {}));
-
   const onTouchMove = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -10986,7 +11090,7 @@
   });
 
   const _hoisted_1$H = { class: "el-overlay-dialog" };
-  const _hoisted_2$v = ["aria-label"];
+  const _hoisted_2$v = ["aria-label", "widget"];
   const _hoisted_3$m = ["widget"];
   const _hoisted_4$i = { class: "el-dialog__title" };
   const _hoisted_5$f = {
@@ -10995,7 +11099,7 @@
     class: "el-dialog__headerbtn",
     type: "button"
   };
-  const _hoisted_6$9 = ["widget"];
+  const _hoisted_6$a = ["widget"];
   const _hoisted_7$7 = ["widget"];
   function render$W(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_close = vue.resolveComponent("close");
@@ -11028,11 +11132,12 @@
               "aria-label": _ctx.title || "dialog",
               style: vue.normalizeStyle(_ctx.style),
               onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-              }, ["stop"]))
+              }, ["stop"])),
+              widget: _ctx.widget
             }, [
               vue.createElementVNode("div", {
                 class: "el-dialog__header",
-                widget: _ctx.widget
+                widget: `dialog:title:${_ctx.widget.split(":")[1]}`
               }, [
                 vue.renderSlot(_ctx.$slots, "title", {}, () => [
                   vue.createElementVNode("span", _hoisted_4$i, vue.toDisplayString(_ctx.title), 1)
@@ -11049,14 +11154,14 @@
               _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 0,
                 class: "el-dialog__body",
-                widget: _ctx.widget
+                widget: `dialog:default:${_ctx.widget.split(":")[1]}`
               }, [
                 vue.renderSlot(_ctx.$slots, "default")
-              ], 8, _hoisted_6$9)) : vue.createCommentVNode("v-if", true),
+              ], 8, _hoisted_6$a)) : vue.createCommentVNode("v-if", true),
               _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("div", {
                 key: 1,
                 class: "el-dialog__footer",
-                widget: _ctx.widget
+                widget: `dialog:footer:${_ctx.widget.split(":")[1]}`
               }, [
                 vue.renderSlot(_ctx.$slots, "footer")
               ], 8, _hoisted_7$7)) : vue.createCommentVNode("v-if", true)
@@ -11154,11 +11259,12 @@
     }
   });
 
-  const _hoisted_1$G = ["aria-label"];
-  const _hoisted_2$u = ["widget"];
-  const _hoisted_3$l = ["title"];
-  const _hoisted_4$h = ["aria-label"];
-  const _hoisted_5$e = ["widget"];
+  const _hoisted_1$G = { class: "el-overlay-drawer" };
+  const _hoisted_2$u = ["aria-label", "widget"];
+  const _hoisted_3$l = ["widget"];
+  const _hoisted_4$h = ["title"];
+  const _hoisted_5$e = ["aria-label"];
+  const _hoisted_6$9 = ["widget"];
   function render$U(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_close = vue.resolveComponent("close");
     const _component_ps_icon = vue.resolveComponent("ps-icon");
@@ -11173,51 +11279,54 @@
         "z-index": _ctx.zIndex
       }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
-            ref: "drawerRef",
-            "aria-modal": "true",
-            "aria-labelledby": "el-drawer__title",
-            "aria-label": _ctx.title,
-            class: vue.normalizeClass(["el-drawer", _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
-            style: vue.normalizeStyle(_ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize),
-            role: "dialog",
-            onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-            }, ["stop"]))
-          }, [
-            _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
-              key: 0,
-              id: "el-drawer__title",
-              class: "el-drawer__header",
+          vue.createElementVNode("div", _hoisted_1$G, [
+            vue.createElementVNode("div", {
+              ref: "drawerRef",
+              "aria-modal": "true",
+              "aria-labelledby": "el-drawer__title",
+              "aria-label": _ctx.title,
+              class: vue.normalizeClass(["el-drawer", _ctx.direction, _ctx.visible && "open", _ctx.customClass]),
+              style: vue.normalizeStyle(_ctx.isHorizontal ? "width: " + _ctx.drawerSize : "height: " + _ctx.drawerSize),
+              role: "dialog",
+              onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+              }, ["stop"])),
               widget: _ctx.widget
             }, [
-              vue.renderSlot(_ctx.$slots, "title", {}, () => [
-                vue.createElementVNode("span", {
-                  role: "heading",
-                  title: _ctx.title
-                }, vue.toDisplayString(_ctx.title), 9, _hoisted_3$l)
-              ]),
-              _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+              _ctx.withHeader ? (vue.openBlock(), vue.createElementBlock("header", {
                 key: 0,
-                "aria-label": "close " + (_ctx.title || "drawer"),
-                class: "el-drawer__close-btn",
-                type: "button"
+                id: "el-drawer__title",
+                class: "el-drawer__header",
+                widget: `drawer:title:${_ctx.widget.split(":")[1]}`
               }, [
-                vue.createVNode(_component_ps_icon, { class: "el-drawer__close" }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_close)
-                  ]),
-                  _: 1
-                })
-              ], 8, _hoisted_4$h)) : vue.createCommentVNode("v-if", true)
-            ], 8, _hoisted_2$u)) : vue.createCommentVNode("v-if", true),
-            _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", {
-              key: 1,
-              class: "el-drawer__body",
-              widget: _ctx.widget
-            }, [
-              vue.renderSlot(_ctx.$slots, "default")
-            ], 8, _hoisted_5$e)) : vue.createCommentVNode("v-if", true)
-          ], 14, _hoisted_1$G)
+                vue.renderSlot(_ctx.$slots, "title", {}, () => [
+                  vue.createElementVNode("span", {
+                    role: "heading",
+                    title: _ctx.title
+                  }, vue.toDisplayString(_ctx.title), 9, _hoisted_4$h)
+                ]),
+                _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
+                  key: 0,
+                  "aria-label": "close " + (_ctx.title || "drawer"),
+                  class: "el-drawer__close-btn",
+                  type: "button"
+                }, [
+                  vue.createVNode(_component_ps_icon, { class: "el-drawer__close" }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_close)
+                    ]),
+                    _: 1
+                  })
+                ], 8, _hoisted_5$e)) : vue.createCommentVNode("v-if", true)
+              ], 8, _hoisted_3$l)) : vue.createCommentVNode("v-if", true),
+              _ctx.rendered ? (vue.openBlock(), vue.createElementBlock("section", {
+                key: 1,
+                class: "el-drawer__body",
+                widget: `drawer:default:${_ctx.widget.split(":")[1]}`
+              }, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ], 8, _hoisted_6$9)) : vue.createCommentVNode("v-if", true)
+            ], 14, _hoisted_2$u)
+          ])
         ]),
         _: 3
       }, 8, ["mask", "overlay-class", "z-index"]), [
@@ -15280,42 +15389,6 @@
     };
   }
 
-  function calcColorChannels(c) {
-    let rawColor = c.replace("#", "");
-    if (/^[0-9a-fA-F]{3}$/.test(rawColor)) {
-      rawColor = rawColor[0].repeat(2) + rawColor[1].repeat(2) + rawColor[2].repeat(2);
-    }
-    if (/^[0-9a-fA-F]{6}$/.test(rawColor)) {
-      return {
-        red: parseInt(rawColor.slice(0, 2), 16),
-        green: parseInt(rawColor.slice(2, 4), 16),
-        blue: parseInt(rawColor.slice(4, 6), 16)
-      };
-    }
-    return {
-      red: 255,
-      green: 255,
-      blue: 255
-    };
-  }
-  function mixColor(color, percent = 0.2) {
-    let { red, green, blue } = calcColorChannels(color);
-    if (percent > 0) {
-      red *= 1 - percent;
-      green *= 1 - percent;
-      blue *= 1 - percent;
-    } else {
-      const value = Math.abs(percent);
-      red += (255 - red) * Math.abs(percent);
-      green += (255 - green) * value;
-      blue += (255 - blue) * value;
-    }
-    return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)})`;
-  }
-  function darken(color, percent = 0.2) {
-    return mixColor(color, percent);
-  }
-
   function useMenuColor(props) {
     const menuBarColor = vue.computed(() => {
       const color = props.backgroundColor;
@@ -22143,7 +22216,7 @@
           key: `${column.id}-thead`,
           rowSpan: column.rowSpan,
           style: this.getHeaderCellStyle(rowIndex, cellIndex, subColumns, column),
-          widget: column.widget
+          widget: `table-column:header:${column.widget.split(":")[1]}`
         }, [
           vue.h("div", {
             class: [
@@ -22469,7 +22542,7 @@
           colspan,
           onMouseenter: ($event) => handleCellMouseEnter($event, { ...row, tooltipEffect }),
           onMouseleave: handleCellMouseLeave,
-          widget: column.widget
+          widget: `table-column:default:${column.widget.split(":")[1]}`
         }, [column.renderCell(data)]);
       }));
     };
@@ -24507,12 +24580,10 @@
           panes.value = [];
         }
       };
-      vue.onUpdated(() => {
-        setPaneInstances();
-      });
-      vue.onMounted(() => {
-        setPaneInstances();
-      });
+      vue.onUpdated(() => setPaneInstances());
+      vue.onMounted(() => setPaneInstances());
+      vue.watch(() => props.activeName, (modelValue) => currentName.value = modelValue);
+      vue.watch(() => props.modelValue, (modelValue) => currentName.value = modelValue);
       return {
         nav$,
         currentName,