@nutui/nutui 3.3.0 → 3.3.1-beta.1

package/dist/nutui.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui v3.3.0 Fri Dec 02 2022 20:55:40 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.3.1-beta.1 Fri Dec 16 2022 16:18:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -353,6 +353,10 @@
     }
     return num.toString();
   };
+  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+  const getScrollTopRoot = () => {
+    return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+  };
   const langs = vue.reactive({
     "zh-CN": new Lang$1(),
     "en-US": new Lang()
@@ -579,7 +583,7 @@
     }
   });
   const _hoisted_1$1f = { class: "nut-button__warp" };
-  function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1A(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes),
@@ -607,7 +611,7 @@
       ])
     ], 6);
   }
-  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["render", _sfc_render$1z]]);
+  var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1M, [["render", _sfc_render$1A]]);
   function useRouter() {
     const proxy = vue.getCurrentInstance().proxy;
     return proxy.$router || null;
@@ -622,7 +626,7 @@
   };
   const _hoisted_3$N = { class: "title" };
   const _hoisted_4$C = { class: "nut-cell__title-desc" };
-  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes),
@@ -711,7 +715,7 @@
       };
     }
   });
-  var Cell = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", render$3]]);
+  var Cell = /* @__PURE__ */ _export_sfc(_sfc_main$1L, [["render", render$2]]);
   const { componentName: componentName$1g, create: create$1K } = createComponent("cell-group");
   const _sfc_main$1K = create$1K({
     props: {
@@ -739,7 +743,7 @@
     class: "nut-cell-group__desc"
   };
   const _hoisted_3$M = { class: "nut-cell-group__warp" };
-  function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes)
     }, [
@@ -750,7 +754,7 @@
       ])
     ], 2);
   }
-  var CellGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$1y]]);
+  var CellGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1K, [["render", _sfc_render$1z]]);
   let count = 0;
   const CLSNAME = "nut-overflow-hidden";
   const useLockScroll = (isLock) => {
@@ -828,7 +832,7 @@
       return { classes, style, onClick };
     }
   });
-  function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createBlock(vue.Transition, { name: "overlay-fade" }, {
       default: vue.withCtx(() => [
         vue.withDirectives(vue.createElementVNode("view", {
@@ -844,7 +848,7 @@
       _: 3
     });
   }
-  var OverLay = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1x]]);
+  var OverLay = /* @__PURE__ */ _export_sfc(_sfc_main$1J, [["render", _sfc_render$1y]]);
   const popupProps = {
     visible: {
       type: Boolean,
@@ -1019,7 +1023,7 @@
   };
   const { componentName: componentName$1e, create: create$1I } = createComponent("popup");
   const _sfc_main$1I = create$1I(component$9(componentName$1e));
-  function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_overlay = vue.resolveComponent("nut-overlay");
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createBlock(vue.Teleport, {
@@ -1065,7 +1069,7 @@
       }, 8, ["name", "onAfterEnter", "onAfterLeave"])
     ], 8, ["to", "disabled"]);
   }
-  var Popup = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["render", _sfc_render$1w]]);
+  var Popup = /* @__PURE__ */ _export_sfc(_sfc_main$1I, [["render", _sfc_render$1x]]);
   const component$8 = {
     props: {
       theme: { type: String, default: "" },
@@ -1188,7 +1192,7 @@
     key: 1,
     class: "nut-img-error"
   };
-  function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes),
@@ -1219,7 +1223,7 @@
       ])) : vue.createCommentVNode("", true)
     ], 6);
   }
-  var Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1v]]);
+  var Image$1 = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["render", _sfc_render$1w]]);
   const { create: create$1F } = createComponent("layout");
   const _sfc_main$1F = create$1F({});
   const { componentName: componentName$1b, create: create$1E } = createComponent("col");
@@ -1258,7 +1262,7 @@
       };
     }
   });
-  function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes),
       style: vue.normalizeStyle(_ctx.style)
@@ -1266,7 +1270,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 6);
   }
-  var Col = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1u]]);
+  var Col = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["render", _sfc_render$1v]]);
   const { componentName: componentName$1a, create: create$1D } = createComponent("row");
   const _sfc_main$1D = create$1D({
     props: {
@@ -1312,14 +1316,14 @@
       };
     }
   });
-  function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.getClasses())
     }, [
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var Row = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1t]]);
+  var Row = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["render", _sfc_render$1u]]);
   function isWindow(val) {
     return val === window;
   }
@@ -1542,7 +1546,7 @@
       return { classes };
     }
   });
-  function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.direction === "horizontal" ? (vue.openBlock(), vue.createElementBlock("view", {
       key: 0,
       class: vue.normalizeClass(_ctx.classes)
@@ -1553,7 +1557,7 @@
       class: vue.normalizeClass(_ctx.classes)
     }, null, 2));
   }
-  var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1s]]);
+  var Divider = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["render", _sfc_render$1t]]);
   function flattenVNodes(children, childName) {
     const result = [];
     const traverse = (children2) => {
@@ -1807,7 +1811,7 @@
     key: 3,
     class: "nut-grid-item__text"
   };
-  function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.rootClass),
@@ -1830,7 +1834,7 @@
       ], 2)
     ], 6);
   }
-  var GridItem = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1r]]);
+  var GridItem = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["render", _sfc_render$1s]]);
   const { componentName: componentName$15, create: create$1y } = createComponent("navbar");
   const _sfc_main$1y = create$1y({
     props: {
@@ -1936,7 +1940,7 @@
     key: 0,
     class: "nut-navbar__text"
   };
-  function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return _ctx.fixed && _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_1$1a, [
       vue.createElementVNode("view", {
@@ -2020,7 +2024,7 @@
       ])
     ], 6));
   }
-  var Navbar = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1q]]);
+  var Navbar = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["render", _sfc_render$1r]]);
   const { componentName: componentName$14, translate: translate$s } = createComponent("fixednav");
   const component$6 = {
     props: {
@@ -2095,7 +2099,7 @@
     class: "b"
   };
   const _hoisted_6$o = { class: "text" };
-  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_overlay = vue.resolveComponent("nut-overlay");
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
@@ -2141,7 +2145,7 @@
   }
   const { create: create$1x } = createComponent("fixednav");
   const _sfc_main$1x = create$1x(component$6);
-  var FixedNav = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", render$2]]);
+  var FixedNav = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["render", render$1]]);
   const { componentName: componentName$13, create: create$1w } = createComponent("menu");
   const _sfc_main$1w = create$1w({
     props: {
@@ -2293,7 +2297,7 @@
   });
   const _hoisted_1$18 = ["onClick"];
   const _hoisted_2$Y = { class: "nut-menu__title-text" };
-  function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes)
@@ -2325,7 +2329,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 2);
   }
-  var Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1p]]);
+  var Menu = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["render", _sfc_render$1q]]);
   const { componentName: componentName$12, create: create$1v } = createComponent("menu-item");
   const _sfc_main$1v = create$1v({
     props: {
@@ -2348,6 +2352,10 @@
       optionIcon: {
         type: String,
         default: "Check"
+      },
+      classPrefix: {
+        type: String,
+        default: "nut-icon"
       }
     },
     components: {
@@ -2442,7 +2450,7 @@
   });
   const _hoisted_1$17 = { class: "nut-menu-item__content nut-menu-item__overflow" };
   const _hoisted_2$X = ["onClick"];
-  function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     const _component_nut_popup = vue.resolveComponent("nut-popup");
     return vue.withDirectives((vue.openBlock(), vue.createElementBlock("view", {
@@ -2483,8 +2491,9 @@
                 option.value === _ctx.modelValue ? (vue.openBlock(), vue.createBlock(_component_nut_icon, vue.mergeProps({ key: 0 }, _ctx.$attrs, {
                   class: { activeTitleClass: option.value === _ctx.modelValue, inactiveTitleClass: option.value !== _ctx.modelValue },
                   name: _ctx.optionIcon,
-                  color: _ctx.parent.props.activeColor
-                }), null, 16, ["class", "name", "color"])) : vue.createCommentVNode("", true),
+                  color: _ctx.parent.props.activeColor,
+                  "class-prefix": _ctx.classPrefix
+                }), null, 16, ["class", "name", "color", "class-prefix"])) : vue.createCommentVNode("", true),
                 vue.createElementVNode("view", {
                   class: vue.normalizeClass({ activeTitleClass: option.value === _ctx.modelValue, inactiveTitleClass: option.value !== _ctx.modelValue }),
                   style: vue.normalizeStyle({ color: option.value === _ctx.modelValue ? _ctx.parent.props.activeColor : "" })
@@ -2500,7 +2509,7 @@
       [vue.vShow, _ctx.state.showWrapper]
     ]);
   }
-  var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1o]]);
+  var MenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["render", _sfc_render$1p]]);
   const { create: create$1u } = createComponent("tabbar");
   const _sfc_main$1u = create$1u({
     props: {
@@ -2512,10 +2521,6 @@
         type: Boolean,
         default: false
       },
-      type: {
-        type: String,
-        default: "base"
-      },
       size: {
         type: String,
         default: "20px"
@@ -2545,7 +2550,7 @@
         val: props.visible,
         children: []
       });
-      const nutTabbar = vue.ref(null);
+      const nutTabbar = vue.ref();
       function changeIndex(index, active) {
         emit("update:visible", active);
         parentData.modelValue = active;
@@ -2569,8 +2574,7 @@
       vue.onMounted(() => {
         if (bottom.value && placeholder.value) {
           vue.nextTick(() => {
-            var _a;
-            height.value = (_a = nutTabbar == null ? void 0 : nutTabbar.value) == null ? void 0 : _a.getBoundingClientRect().height;
+            height.value = useRect(nutTabbar).height;
           });
         }
       });
@@ -2581,7 +2585,7 @@
       };
     }
   });
-  function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     return _ctx.bottom && _ctx.placeholder ? (vue.openBlock(), vue.createElementBlock("div", {
       key: 0,
       class: "nut-tabbar__placeholder",
@@ -2600,7 +2604,7 @@
       vue.renderSlot(_ctx.$slots, "default")
     ], 2));
   }
-  var Tabbar = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1n]]);
+  var Tabbar = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["render", _sfc_render$1o]]);
   const { create: create$1t } = createComponent("tabbar-item");
   const _sfc_main$1t = create$1t({
     props: {
@@ -2620,7 +2624,7 @@
         default: ""
       },
       num: {
-        type: String,
+        type: Number,
         default: ""
       },
       activeImg: {
@@ -2662,8 +2666,8 @@
         var _a;
         if (child.proxy) {
           parent.children.push(child.proxy);
-          const index = vue.computed(() => parent.children.indexOf(child.proxy));
-          state.index = (_a = props.name) != null ? _a : index.value;
+          const index = parent.children.indexOf(child.proxy);
+          state.index = (_a = props.name) != null ? _a : index;
         }
       };
       relation(vue.getCurrentInstance());
@@ -2734,7 +2738,7 @@
   };
   const _hoisted_6$n = { key: 3 };
   const _hoisted_7$k = { key: 0 };
-  function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("div", {
       class: vue.normalizeClass(["nut-tabbar-item", { "nut-tabbar-item__icon--unactive": !_ctx.active }]),
@@ -2745,13 +2749,12 @@
     }, [
       vue.createElementVNode("view", _hoisted_1$16, [
         !_ctx.dot ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-          _ctx.num && _ctx.num <= 99 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$W, vue.toDisplayString(_ctx.num), 1)) : _ctx.num && _ctx.num > 100 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_3$I, vue.toDisplayString("99+"))) : vue.createCommentVNode("", true)
+          _ctx.num && _ctx.num <= 99 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_2$W, vue.toDisplayString(_ctx.num), 1)) : _ctx.num && _ctx.num >= 100 ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_3$I, vue.toDisplayString("99+"))) : vue.createCommentVNode("", true)
         ], 64)) : vue.createCommentVNode("", true),
         _ctx.dot ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$z)) : vue.createCommentVNode("", true),
-        _ctx.isHaveSlot("icon") ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$q, [
+        _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$q, [
           vue.renderSlot(_ctx.$slots, "icon", { active: _ctx.active })
-        ])) : vue.createCommentVNode("", true),
-        _ctx.icon && !_ctx.isHaveSlot("icon") ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$n, [
+        ])) : _ctx.icon ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_6$n, [
           vue.createVNode(_component_nut_icon, {
             class: "nut-tabbar-item_icon-box_icon",
             size: _ctx.state.size,
@@ -2759,8 +2762,7 @@
             "font-class-name": _ctx.fontClassName,
             "class-prefix": _ctx.classPrefix
           }, null, 8, ["size", "name", "font-class-name", "class-prefix"])
-        ])) : vue.createCommentVNode("", true),
-        !_ctx.icon && _ctx.activeImg && !_ctx.isHaveSlot("icon") ? (vue.openBlock(), vue.createElementBlock("div", {
+        ])) : _ctx.activeImg ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 4,
           class: "nut-tabbar-item_icon-box_icon",
           style: vue.normalizeStyle({
@@ -2772,16 +2774,17 @@
         vue.createElementVNode("view", {
           class: vue.normalizeClass([
             "nut-tabbar-item_icon-box_nav-word",
-            { "nut-tabbar-item_icon-box_big-word": !_ctx.icon && !_ctx.activeImg && !_ctx.isHaveSlot("icon") }
+            { "nut-tabbar-item_icon-box_big-word": !_ctx.icon && !_ctx.activeImg && !_ctx.$slots.icon }
           ])
         }, [
-          _ctx.tabTitle ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_7$k, vue.toDisplayString(_ctx.tabTitle), 1)) : vue.createCommentVNode("", true),
-          !_ctx.tabTitle ? vue.renderSlot(_ctx.$slots, "default", { key: 1 }) : vue.createCommentVNode("", true)
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            _ctx.tabTitle ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_7$k, vue.toDisplayString(_ctx.tabTitle), 1)) : vue.createCommentVNode("", true)
+          ])
         ], 2)
       ])
     ], 6);
   }
-  var TabbarItem = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1m]]);
+  var TabbarItem = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["render", _sfc_render$1n]]);
   function useExpose(apis) {
     const instance = vue.getCurrentInstance();
     if (instance) {
@@ -2980,7 +2983,7 @@
   const _hoisted_4$y = { class: "fixed-title" };
   const _hoisted_5$p = { class: "nut-elevator__bars__inner" };
   const _hoisted_6$m = ["data-index", "onClick"];
-  function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("view", {
       class: vue.normalizeClass(_ctx.classes)
     }, [
@@ -3051,7 +3054,7 @@
       ], 32)
     ], 2);
   }
-  var Elevator = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1l]]);
+  var Elevator = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["render", _sfc_render$1m]]);
   const { create: create$1r, translate: translate$r } = createComponent("pagination");
   const _sfc_main$1r = create$1r({
     props: {
@@ -3170,7 +3173,7 @@
     class: "nut-pagination-contain"
   };
   const _hoisted_5$o = { class: "nut-pagination-simple" };
-  function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("view", _hoisted_1$14, [
       vue.createElementVNode("view", {
         class: vue.normalizeClass(["nut-pagination-prev", _ctx.mode == "multi" ? "" : "simple-border", _ctx.modelValue == 1 ? "disabled" : ""]),
@@ -3206,7 +3209,7 @@
       ], 2)
     ]);
   }
-  var Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1k]]);
+  var Pagination = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["render", _sfc_render$1l]]);
   class Title {
     constructor() {
       this.title = "";
@@ -3333,9 +3336,6 @@
           init(vnodes);
         }
       );
-      const getScrollTopRoot = () => {
-        return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-      };
       vue.watch(
         () => props.modelValue,
         (value) => {
@@ -3398,9 +3398,11 @@
       };
     }
   };
+  const { create: create$1q } = createComponent("tabs");
+  const _sfc_main$1q = create$1q(component$5);
   const _hoisted_1$13 = ["onClick"];
   const _hoisted_2$T = ["onClick"];
-  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     const _component_nut_sticky = vue.resolveComponent("nut-sticky");
     return vue.openBlock(), vue.createElementBlock("view", {
@@ -3490,9 +3492,7 @@
       ], 4)
     ], 2);
   }
-  const { create: create$1q } = createComponent("tabs");
-  const _sfc_main$1q = create$1q(component$5);
-  var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", render$1]]);
+  var Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$1q, [["render", _sfc_render$1k]]);
   const { create: create$1p } = createComponent("tabpane");
   const _sfc_main$1p = create$1p({
     props: {
@@ -3789,7 +3789,7 @@
     }
     return "";
   }
-  function useTouch$1() {
+  function useTouch() {
     const startX = vue.ref(0);
     const startY = vue.ref(0);
     const moveX = vue.ref(0);
@@ -3893,7 +3893,7 @@
       let currentValue;
       const root = vue.ref();
       const dragStatus = vue.ref();
-      const touch = useTouch$1();
+      const touch = useTouch();
       const marksList = vue.computed(() => {
         const { marks, max, min } = props;
         const marksKeys = Object.keys(marks);
@@ -6371,7 +6371,7 @@
     },
     emits: ["click", "change"],
     setup(props, { emit }) {
-      const touch = useTouch$1();
+      const touch = useTouch();
       const wrapper = vue.ref();
       const state = vue.reactive({
         touchParams: {
@@ -6495,7 +6495,7 @@
           let currentDeg = (-updateMove / state.lineSpacing + 1) * state.rotation;
           const maxDeg = (props.column.length + 1) * state.rotation;
           const minDeg = 0;
-          deg = Math.min(Math.max(currentDeg, minDeg), maxDeg);
+          deg = clamp(currentDeg, minDeg, maxDeg);
           if (minDeg < deg && deg < maxDeg) {
             setTransform(updateMove, null, void 0, deg + "deg");
             state.currIndex = Math.abs(Math.round(updateMove / state.lineSpacing)) + 1;
@@ -6636,6 +6636,14 @@
       swipeDuration: {
         type: [Number, String],
         default: 1e3
+      },
+      showOkText: {
+        type: Boolean,
+        default: true
+      },
+      showCancelText: {
+        type: Boolean,
+        default: true
       }
     },
     emits: ["close", "change", "confirm", "update:visible", "update:modelValue"],
@@ -6844,15 +6852,17 @@
       }, {
         default: vue.withCtx(() => [
           vue.createElementVNode("view", _hoisted_1$V, [
-            vue.createElementVNode("view", {
+            _ctx.showCancelText ? (vue.openBlock(), vue.createElementBlock("view", {
+              key: 0,
               class: "nut-picker__left",
               onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
-            }, vue.toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
+            }, vue.toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)) : vue.createCommentVNode("", true),
             vue.createElementVNode("view", _hoisted_2$K, vue.toDisplayString(_ctx.title), 1),
-            vue.createElementVNode("view", {
+            _ctx.showOkText ? (vue.openBlock(), vue.createElementBlock("view", {
+              key: 1,
               class: "nut-picker__right",
               onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
-            }, vue.toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
+            }, vue.toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)) : vue.createCommentVNode("", true)
           ]),
           vue.renderSlot(_ctx.$slots, "top"),
           vue.createElementVNode("view", _hoisted_3$A, [
@@ -8073,7 +8083,7 @@
           }
           return v;
         };
-        const touch = useTouch$1();
+        const touch = useTouch();
         const touchMethods = {
           onTouchStart(event) {
             if (!props.touchable)
@@ -9606,7 +9616,7 @@
         }
         state.offset = offset;
       };
-      const touch = useTouch$1();
+      const touch = useTouch();
       const touchMethods = {
         onTouchStart(event) {
           if (props.disabled)
@@ -10504,7 +10514,7 @@
     },
     emits: ["scroll-change", "load-more", "refresh"],
     setup(props, { emit, slots }) {
-      const touch = useTouch$1();
+      const touch = useTouch();
       const state = vue.reactive({
         scrollEl: window,
         scroller: null,
@@ -10526,17 +10536,9 @@
       const getStyle = vue.computed(() => {
         return {
           height: state.distance < 0 ? `0px` : `${state.distance}px`,
-          transition: state.isTouching ? `height 0s cubic-bezier(0.25,0.1,0.25,1)` : `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`
+          transitionDuration: state.isTouching ? 0 : `0.2s`
         };
       });
-      const requestAniFrame2 = () => {
-        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
-          window.setTimeout(callback, 1e3 / 60);
-        };
-      };
-      const getWindowScrollTop = () => {
-        return window.pageYOffset !== void 0 ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-      };
       const calculateTopPosition = (el) => {
         return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent);
       };
@@ -10544,8 +10546,8 @@
         let offsetDistance = 0;
         let resScrollTop = 0;
         let direction = "down";
-        const windowScrollTop = getWindowScrollTop();
         if (props.useWindow) {
+          const windowScrollTop = getScrollTopRoot();
           if (state.scroller) {
             offsetDistance = calculateTopPosition(state.scroller) + state.scroller.offsetHeight - windowScrollTop - window.innerHeight;
           }
@@ -10568,7 +10570,7 @@
         state.isInfiniting = false;
       };
       const handleScroll = () => {
-        requestAniFrame2()(() => {
+        requestAniFrame$1(() => {
           if (!isScrollAtBottom() || !props.hasMore || state.isInfiniting) {
             return false;
           } else {
@@ -10620,14 +10622,16 @@
       const getParentElement = (el) => {
         return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
       };
+      const removeScrollListener = () => {
+        state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+      };
       vue.onMounted(() => {
         const parentElement = getParentElement(state.scroller);
         state.scrollEl = props.useWindow ? window : parentElement;
         scrollListener();
-        console.log(slots);
       });
       vue.onUnmounted(() => {
-        state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+        removeScrollListener();
       });
       const isKeepAlive = vue.ref(false);
       vue.onActivated(() => {
@@ -10638,7 +10642,7 @@
       });
       vue.onDeactivated(() => {
         isKeepAlive.value = true;
-        state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+        removeScrollListener();
       });
       return {
         classes,
@@ -10661,10 +10665,7 @@
     class: "bottom-box"
   };
   const _hoisted_6$e = { class: "bottom-text" };
-  const _hoisted_7$c = {
-    key: 0,
-    class: "tips"
-  };
+  const _hoisted_7$c = { class: "tips" };
   function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_nut_icon = vue.resolveComponent("nut-icon");
     return vue.openBlock(), vue.createElementBlock("view", {
@@ -10689,13 +10690,13 @@
       ]),
       vue.createElementVNode("view", _hoisted_4$n, [
         _ctx.isInfiniting ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_5$f, [
-          !_ctx.slots.loading ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+          vue.renderSlot(_ctx.$slots, "loading", {}, () => [
             vue.createVNode(_component_nut_icon, vue.mergeProps({ class: "bottom-img" }, _ctx.$attrs, { name: _ctx.loadIcon }), null, 16, ["name"]),
             vue.createElementVNode("view", _hoisted_6$e, vue.toDisplayString(_ctx.loadTxt || _ctx.translate("loading")), 1)
-          ], 64)) : vue.renderSlot(_ctx.$slots, "loading", { key: 1 })
-        ])) : !_ctx.hasMore ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          !_ctx.slots.finished ? (vue.openBlock(), vue.createElementBlock("view", _hoisted_7$c, vue.toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)) : vue.renderSlot(_ctx.$slots, "finished", { key: 1 })
-        ], 64)) : vue.createCommentVNode("", true)
+          ])
+        ])) : !_ctx.hasMore ? vue.renderSlot(_ctx.$slots, "finished", { key: 1 }, () => [
+          vue.createElementVNode("view", _hoisted_7$c, vue.toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)
+        ]) : vue.createCommentVNode("", true)
       ])
     ], 34);
   }
@@ -13290,54 +13291,6 @@
     ], 2);
   }
   var Step = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G]]);
-  const DISTANCE = 5;
-  function useTouch() {
-    const state = vue.reactive({
-      startX: 0,
-      startY: 0,
-      deltaX: 0,
-      deltaY: 0,
-      offsetX: 0,
-      offsetY: 0,
-      direction: ""
-    });
-    const getDirection2 = (x, y) => {
-      if (x > y && x > DISTANCE)
-        return "horizontal";
-      if (y > x && y > DISTANCE)
-        return "vertical";
-      return "";
-    };
-    const reset = () => {
-      state.startX = 0;
-      state.startY = 0;
-      state.deltaX = 0;
-      state.deltaY = 0;
-      state.offsetX = 0;
-      state.offsetY = 0;
-      state.direction = "";
-    };
-    const start = (e) => {
-      reset();
-      state.startX = e.touches[0].clientX;
-      state.startY = e.touches[0].clientY;
-    };
-    const move = (e) => {
-      state.deltaX = e.touches[0].clientX - state.startX;
-      state.deltaY = e.touches[0].clientY - state.startY;
-      state.offsetX = Math.abs(state.deltaX);
-      state.offsetY = Math.abs(state.deltaY);
-      if (!state.direction) {
-        state.direction = getDirection2(state.offsetX, state.offsetY);
-      }
-    };
-    return {
-      state,
-      start,
-      reset,
-      move
-    };
-  }
   const { create: create$F, componentName: componentName$u } = createComponent("swiper");
   const _sfc_main$F = create$F({
     props: {
@@ -13350,7 +13303,7 @@
         default: 0
       },
       direction: {
-        type: [String],
+        type: String,
         default: "horizontal"
       },
       paginationVisible: {
@@ -13419,11 +13372,25 @@
         };
       });
       const isVertical = vue.computed(() => props.direction === "vertical");
+      const classesInner = vue.computed(() => {
+        const prefixCls = componentName$u;
+        return {
+          [`${prefixCls}-inner`]: true,
+          [`${prefixCls}-vertical`]: isVertical.value
+        };
+      });
+      const classesPagination = vue.computed(() => {
+        const prefixCls = componentName$u;
+        return {
+          [`${prefixCls}-pagination`]: true,
+          [`${prefixCls}-pagination-vertical`]: isVertical.value
+        };
+      });
       const delTa = vue.computed(() => {
-        return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+        return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
       });
       const isCorrectDirection = vue.computed(() => {
-        return touch.state.direction === props.direction;
+        return touch.direction.value === props.direction;
       });
       const childCount = vue.computed(() => state.children.length);
       const size = vue.computed(() => state[isVertical.value ? "height" : "width"]);
@@ -13438,12 +13405,7 @@
       const activePagination = vue.computed(() => (state.active + childCount.value) % childCount.value);
       const getStyle = () => {
         let offset = 0;
-        if (!props.isCenter) {
-          offset = state.offset;
-        } else {
-          let val = isVertical.value ? state.rect.height - size.value : state.rect.width - size.value;
-          offset = state.offset + (state.active === childCount.value - 1 ? -val / 2 : val / 2);
-        }
+        offset = state.offset;
         state.style = {
           transitionDuration: `${state.moving ? 0 : props.duration}ms`,
           transform: `translate${isVertical.value ? "Y" : "X"}(${offset}px)`,
@@ -13454,26 +13416,27 @@
       const relation = (child) => {
         var _a;
         let children = [];
+        const childrenVNodeLen = state.childrenVNode.length;
         let slot = (_a = slots == null ? void 0 : slots.default) == null ? void 0 : _a.call(slots);
         slot = slot.filter((item) => item.children && Array.isArray(item.children));
         slot.forEach((item) => {
           children = children.concat(item.children);
         });
-        if (!state.childrenVNode.length) {
+        if (!childrenVNodeLen) {
           state.childrenVNode = children.slice();
           child.proxy && state.children.push(child.proxy);
         } else {
-          if (state.childrenVNode.length > children.length) {
+          if (childrenVNodeLen > children.length) {
             state.children = state.children.filter((item) => child.proxy !== item);
-          } else if (state.childrenVNode.length < children.length) {
-            for (let i = 0; i < state.childrenVNode.length; i++) {
+          } else if (childrenVNodeLen < children.length) {
+            for (let i = 0; i < childrenVNodeLen; i++) {
               if (children[i].key !== state.childrenVNode[i].key) {
                 child.proxy && state.children.splice(i, 0, child.proxy);
                 child.vnode && state.childrenVNode.splice(i, 0, child.vnode);
                 break;
               }
             }
-            if (state.childrenVNode.length !== children.length) {
+            if (childrenVNodeLen !== children.length) {
               child.proxy && state.children.push(child.proxy);
               child.vnode && state.childrenVNode.push(child.vnode);
             }
@@ -13483,12 +13446,6 @@
           }
         }
       };
-      const range = (num, min, max) => {
-        return Math.min(Math.max(num, min), max);
-      };
-      const requestFrame = (fn) => {
-        window.requestAnimationFrame.call(window, fn);
-      };
       const getOffset = (active, offset = 0) => {
         let currentPosition = active * size.value;
         if (!props.loop) {
@@ -13496,7 +13453,7 @@
         }
         let targetOffset = offset - currentPosition;
         if (!props.loop) {
-          targetOffset = range(targetOffset, minOffset.value, 0);
+          targetOffset = clamp(targetOffset, minOffset.value, 0);
         }
         return targetOffset;
       };
@@ -13504,9 +13461,9 @@
         const { active } = state;
         if (pace) {
           if (props.loop) {
-            return range(active + pace, -1, childCount.value);
+            return clamp(active + pace, -1, childCount.value);
           }
-          return range(active + pace, 0, childCount.value - 1);
+          return clamp(active + pace, 0, childCount.value - 1);
         }
         return active;
       };
@@ -13545,48 +13502,39 @@
       const stopAutoPlay = () => {
         clearTimeout(state.autoplayTimer);
       };
-      const prev = () => {
+      const jump = (pace) => {
         resettPosition();
         touch.reset();
-        requestFrame(() => {
-          requestFrame(() => {
+        requestAniFrame$1(() => {
+          requestAniFrame$1(() => {
             state.moving = false;
             move({
-              pace: -1,
+              pace,
               isEmit: true
             });
           });
         });
       };
+      const prev = () => {
+        jump(-1);
+      };
       const next = () => {
-        resettPosition();
-        touch.reset();
-        requestFrame(() => {
-          requestFrame(() => {
-            state.moving = false;
-            move({
-              pace: 1,
-              isEmit: true
-            });
-          });
-        });
+        jump(1);
       };
       const to = (index) => {
         resettPosition();
         touch.reset();
-        requestFrame(() => {
-          requestFrame(() => {
-            state.moving = false;
-            let targetIndex;
-            if (props.loop && childCount.value === index) {
-              targetIndex = state.active === 0 ? 0 : index;
-            } else {
-              targetIndex = index % childCount.value;
-            }
-            move({
-              pace: targetIndex - state.active,
-              isEmit: true
-            });
+        requestAniFrame$1(() => {
+          state.moving = false;
+          let targetIndex;
+          if (props.loop && childCount.value === index) {
+            targetIndex = state.active === 0 ? 0 : index;
+          } else {
+            targetIndex = index % childCount.value;
+          }
+          move({
+            pace: targetIndex - state.active,
+            isEmit: true
           });
         });
       };
@@ -13640,7 +13588,7 @@
         const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(delTa.value) > +(size.value / 2).toFixed(2);
         if (isShouldMove && isCorrectDirection.value) {
           let pace = 0;
-          const offset = isVertical.value ? touch.state.offsetY : touch.state.offsetX;
+          const offset = isVertical.value ? touch.offsetY.value : touch.offsetX.value;
           if (props.loop) {
             pace = offset > 0 ? delTa.value > 0 ? -1 : 1 : 0;
           } else {
@@ -13698,10 +13646,9 @@
       return {
         state,
         classes,
+        classesInner,
+        classesPagination,
         container,
-        componentName: componentName$u,
-        isVertical,
-        slots,
         activePagination,
         onTouchStart,
         onTouchMove,
@@ -13719,21 +13666,15 @@
       onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
     }, [
       vue.createElementVNode("view", {
-        class: vue.normalizeClass({
-          [`${_ctx.componentName}-inner`]: true,
-          [`${_ctx.componentName}-vertical`]: _ctx.isVertical
-        }),
+        class: vue.normalizeClass(_ctx.classesInner),
         style: vue.normalizeStyle(_ctx.state.style)
       }, [
         vue.renderSlot(_ctx.$slots, "default")
       ], 6),
       vue.renderSlot(_ctx.$slots, "page"),
-      _ctx.paginationVisible && !_ctx.slots.page ? (vue.openBlock(), vue.createElementBlock("view", {
+      _ctx.paginationVisible && !_ctx.$slots.page ? (vue.openBlock(), vue.createElementBlock("view", {
         key: 0,
-        class: vue.normalizeClass({
-          [`${_ctx.componentName}-pagination`]: true,
-          [`${_ctx.componentName}-pagination-vertical`]: _ctx.isVertical
-        })
+        class: vue.normalizeClass(_ctx.classesPagination)
       }, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.state.children.length, (item, index) => {
           return vue.openBlock(), vue.createElementBlock("i", {
@@ -13825,12 +13766,17 @@
       size: {
         type: String,
         default: "large"
+      },
+      strikeThrough: {
+        type: Boolean,
+        default: false
       }
     },
     setup(props) {
       const classes = vue.computed(() => {
         return {
-          [componentName$s]: true
+          [componentName$s]: true,
+          [`${componentName$s}--strike`]: props.strikeThrough
         };
       });
       const showSymbol = vue.computed(() => {
@@ -13949,7 +13895,7 @@
         displayWidth: 0,
         displayHeight: 0
       });
-      const touch = useTouch$1();
+      const touch = useTouch();
       const vertical = vue.computed(() => {
         const { rootWidth, rootHeight } = props;
         const rootRatio = rootHeight / rootWidth;
@@ -14107,7 +14053,6 @@
         checkTap();
         touch.reset();
       };
-      const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
       const closeSwiper = () => {
         emit("close");
       };
@@ -15362,6 +15307,7 @@
       theme: { type: String, default: "light" },
       location: { type: String, default: "bottom" },
       offset: { type: Array, default: [0, 12] },
+      arrowOffset: { type: Number, default: 0 },
       customClass: { type: String, default: "" },
       showArrow: { type: Boolean, default: true },
       iconPrefix: { type: String, default: "nut-icon" },
@@ -15371,52 +15317,128 @@
       overlayStyle: { type: Object },
       closeOnClickOverlay: { type: Boolean, default: true },
       closeOnClickAction: { type: Boolean, default: true },
-      closeOnClickOutside: { type: Boolean, default: true }
+      closeOnClickOutside: { type: Boolean, default: true },
+      targetId: { type: String, default: "" },
+      bgColor: { type: String, default: "" }
     },
     emits: ["update", "update:visible", "close", "choose", "open"],
     setup(props, { emit }) {
       const popoverRef = vue.ref();
       const popoverContentRef = vue.ref();
       const showPopup = vue.ref(props.visible);
-      const state = vue.reactive({
-        rootWidth: 0,
-        rootHeight: 0
-      });
+      let rootRect = vue.ref();
+      let conentRootRect = vue.ref();
       const popoverArrow = vue.computed(() => {
         const prefixCls = "nut-popover-arrow";
         const loca = props.location;
         const direction = loca.split("-")[0];
         return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}--${loca}`;
       });
-      const getStyles = vue.computed(() => {
-        let cross = +state.rootHeight;
-        let lengthways = +state.rootWidth;
-        let { offset, location: location2 } = props;
+      const popoverArrowStyle = vue.computed(() => {
+        const styles = {};
+        const { bgColor, arrowOffset, location: location2 } = props;
+        const direction = location2.split("-")[0];
+        const skew = location2.split("-")[1];
+        const base = 16;
+        if (bgColor) {
+          styles[`border${upperCaseFirst(direction)}Color`] = bgColor;
+        }
+        if (props.arrowOffset != 0) {
+          if (["bottom", "top"].includes(direction)) {
+            if (!skew) {
+              styles.left = `calc(50% + ${arrowOffset}px)`;
+            }
+            if (skew == "start") {
+              styles.left = `${base + arrowOffset}px`;
+            }
+            if (skew == "end") {
+              styles.right = `${base - arrowOffset}px`;
+            }
+          }
+          if (["left", "right"].includes(direction)) {
+            if (!skew) {
+              styles.top = `calc(50% - ${arrowOffset}px)`;
+            }
+            if (skew == "start") {
+              styles.top = `${base - arrowOffset}px`;
+            }
+            if (skew == "end") {
+              styles.bottom = `${base + arrowOffset}px`;
+            }
+          }
+        }
+        return styles;
+      });
+      const upperCaseFirst = (str) => {
+        var str = str.toLowerCase();
+        str = str.replace(/\b\w+\b/g, (word) => word.substring(0, 1).toUpperCase() + word.substring(1));
+        return str;
+      };
+      const getRootPosition = vue.computed(() => {
+        let styles = {};
+        if (!rootRect.value || !conentRootRect.value)
+          return {};
+        const conentWidth = conentRootRect.value.width;
+        const conentHeight = conentRootRect.value.height;
+        const { width, height, left, top } = rootRect.value;
+        const { location: location2, offset } = props;
+        const direction = location2.split("-")[0];
+        const skew = location2.split("-")[1];
+        let cross = 0;
+        let parallel = 0;
         if (isArray(offset) && offset.length == 2) {
           cross += +offset[1];
-          lengthways += +offset[1];
+          parallel += +offset[0];
+        }
+        if (width) {
+          if (["bottom", "top"].includes(direction)) {
+            const h = direction == "bottom" ? height + cross : -(conentHeight + cross);
+            styles.top = `${top + h}px`;
+            if (!skew) {
+              styles.left = `${-(conentWidth - width) / 2 + left + parallel}px`;
+            }
+            if (skew == "start") {
+              styles.left = `${left + parallel}px`;
+            }
+            if (skew == "end") {
+              styles.left = `${rootRect.value.right + parallel}px`;
+            }
+          }
+          if (["left", "right"].includes(direction)) {
+            const contentW = direction == "left" ? -(conentWidth + cross) : width + cross;
+            styles.left = `${left + contentW}px`;
+            if (!skew) {
+              styles.top = `${top - conentHeight / 2 + height / 2 - 4 + parallel}px`;
+            }
+            if (skew == "start") {
+              styles.top = `${top + parallel}px`;
+            }
+            if (skew == "end") {
+              styles.top = `${top + height + parallel}px`;
+            }
+          }
         }
-        const direction = location2.split("-")[0];
-        const style = {};
-        const mapd = {
-          top: "bottom",
-          bottom: "top",
-          left: "right",
-          right: "left"
-        };
-        if (["top", "bottom"].includes(direction)) {
-          style[mapd[direction]] = `${cross}px`;
-          style.marginLeft = `${offset[0]}px`;
-        } else {
-          style[mapd[direction]] = `${lengthways}px`;
-          style.marginTop = `${offset[0]}px`;
+        return styles;
+      });
+      const customStyle = vue.computed(() => {
+        const styles = {};
+        if (props.bgColor) {
+          styles.background = props.bgColor;
         }
-        return style;
+        return styles;
       });
       const getContentWidth = () => {
-        const { offsetHeight, offsetWidth } = popoverRef.value;
-        state.rootHeight = offsetHeight;
-        state.rootWidth = offsetWidth;
+        let rect2 = useRect(popoverRef.value);
+        if (props.targetId) {
+          rect2 = useRect(document.querySelector(`#${props.targetId}`));
+        }
+        rootRect.value = rect2;
+        setTimeout(() => {
+          conentRootRect.value = {
+            height: popoverContentRef.value.clientHeight,
+            width: popoverContentRef.value.clientWidth
+          };
+        }, 0);
       };
       vue.watch(
         () => props.visible,
@@ -15451,7 +15473,12 @@
       const clickAway = (event) => {
         const element = popoverRef.value;
         const elContent = popoverContentRef.value;
-        if (element && !element.contains(event.target) && elContent && !elContent.contains(event.target) && props.closeOnClickOutside) {
+        let el = element && !element.contains(event.target);
+        if (props.targetId) {
+          const dom = document.querySelector(`#${props.targetId}`);
+          el = dom && !dom.contains(event.target);
+        }
+        if (el && elContent && !elContent.contains(event.target) && props.closeOnClickOutside) {
           closePopover();
         }
       };
@@ -15462,8 +15489,10 @@
         closePopover,
         chooseItem,
         popoverRef,
-        getStyles,
-        popoverContentRef
+        popoverContentRef,
+        getRootPosition,
+        customStyle,
+        popoverArrowStyle
       };
     }
   });
@@ -15474,59 +15503,64 @@
   const _hoisted_2$o = ["onClick"];
   const _hoisted_3$m = { class: "nut-popover-menu-item-name" };
   function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
-    const _component_nut_icon = vue.resolveComponent("nut-icon");
+    const _component_Icon = vue.resolveComponent("Icon");
     const _component_nut_popup = vue.resolveComponent("nut-popup");
-    return vue.openBlock(), vue.createElementBlock("view", {
-      class: vue.normalizeClass(["nut-popover", `nut-popover--${_ctx.theme}`, `${_ctx.customClass}`])
-    }, [
-      vue.createElementVNode("view", {
+    return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+      !_ctx.targetId ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
         class: "nut-popover-wrapper",
         onClick: _cache[0] || (_cache[0] = (...args) => _ctx.openPopover && _ctx.openPopover(...args)),
         ref: "popoverRef"
       }, [
         vue.renderSlot(_ctx.$slots, "reference")
-      ], 512),
-      vue.createVNode(_component_nut_popup, {
-        popClass: `nut-popover-content nut-popover-content--${_ctx.location}`,
-        style: vue.normalizeStyle(_ctx.getStyles),
-        visible: _ctx.showPopup,
-        "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPopup = $event),
-        position: "",
-        transition: "nut-popover",
-        overlay: _ctx.overlay,
-        duration: _ctx.duration,
-        overlayStyle: _ctx.overlayStyle,
-        overlayClass: _ctx.overlayClass,
-        closeOnClickOverlay: _ctx.closeOnClickOverlay
-      }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("view", _hoisted_1$r, [
-            _ctx.showArrow ? (vue.openBlock(), vue.createElementBlock("view", {
-              key: 0,
-              class: vue.normalizeClass(_ctx.popoverArrow)
-            }, null, 2)) : vue.createCommentVNode("", true),
-            vue.renderSlot(_ctx.$slots, "content"),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (item, index) => {
-              return vue.openBlock(), vue.createElementBlock("view", {
-                key: index,
-                class: vue.normalizeClass([item.className, item.disabled && "nut-popover-menu-disabled", "nut-popover-menu-item"]),
-                onClick: vue.withModifiers(($event) => _ctx.chooseItem(item, index), ["stop"])
-              }, [
-                item.icon ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
-                  vue.createVNode(_component_nut_icon, vue.mergeProps(_ctx.$attrs, {
-                    class: "nut-popover-item-img",
-                    classPrefix: _ctx.iconPrefix,
-                    name: item.icon
-                  }), null, 16, ["classPrefix", "name"])
-                ]) : vue.createCommentVNode("", true),
-                vue.createElementVNode("view", _hoisted_3$m, vue.toDisplayString(item.name), 1)
-              ], 10, _hoisted_2$o);
-            }), 128))
-          ], 512)
-        ]),
-        _: 3
-      }, 8, ["popClass", "style", "visible", "overlay", "duration", "overlayStyle", "overlayClass", "closeOnClickOverlay"])
-    ], 2);
+      ], 512)) : vue.createCommentVNode("", true),
+      vue.createElementVNode("view", {
+        class: vue.normalizeClass(["nut-popover", `nut-popover--${_ctx.theme}`, `${_ctx.customClass}`]),
+        style: vue.normalizeStyle(_ctx.getRootPosition)
+      }, [
+        vue.createVNode(_component_nut_popup, {
+          popClass: `nut-popover-content nut-popover-content--${_ctx.location}`,
+          style: vue.normalizeStyle(_ctx.customStyle),
+          visible: _ctx.showPopup,
+          "onUpdate:visible": _cache[1] || (_cache[1] = ($event) => _ctx.showPopup = $event),
+          position: "",
+          transition: "nut-popover",
+          overlay: _ctx.overlay,
+          duration: _ctx.duration,
+          overlayStyle: _ctx.overlayStyle,
+          overlayClass: _ctx.overlayClass,
+          closeOnClickOverlay: _ctx.closeOnClickOverlay
+        }, {
+          default: vue.withCtx(() => [
+            vue.createElementVNode("view", _hoisted_1$r, [
+              _ctx.showArrow ? (vue.openBlock(), vue.createElementBlock("view", {
+                key: 0,
+                class: vue.normalizeClass(_ctx.popoverArrow),
+                style: vue.normalizeStyle(_ctx.popoverArrowStyle)
+              }, null, 6)) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "content"),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.list, (item, index) => {
+                return vue.openBlock(), vue.createElementBlock("view", {
+                  key: index,
+                  class: vue.normalizeClass([item.className, item.disabled && "nut-popover-menu-disabled", "nut-popover-menu-item"]),
+                  onClick: vue.withModifiers(($event) => _ctx.chooseItem(item, index), ["stop"])
+                }, [
+                  item.icon ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+                    vue.createVNode(_component_Icon, vue.mergeProps(_ctx.$attrs, {
+                      class: "nut-popover-item-img",
+                      classPrefix: _ctx.iconPrefix,
+                      name: item.icon
+                    }), null, 16, ["classPrefix", "name"])
+                  ]) : vue.createCommentVNode("", true),
+                  vue.createElementVNode("view", _hoisted_3$m, vue.toDisplayString(item.name), 1)
+                ], 10, _hoisted_2$o);
+              }), 128))
+            ], 512)
+          ]),
+          _: 3
+        }, 8, ["popClass", "style", "visible", "overlay", "duration", "overlayStyle", "overlayClass", "closeOnClickOverlay"])
+      ], 6)
+    ], 64);
   }
   var Popover = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w]]);
   const component$1 = {
@@ -19848,7 +19882,7 @@
       }
     });
   }
-  const version = "3.3.0";
+  const version = "3.3.1-beta.1";
   var nutui_vue_build = { install, version, Locale };
   exports2.ActionSheet = ActionSheet;
   exports2.Address = Address;