@nutui/nutui 3.3.0 → 3.3.1-beta.0

package/dist/nutui.es.js

@@ -1,9 +1,9 @@
 /*!
-* @nutui/nutui v3.3.0 Fri Dec 02 2022 20:55:40 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.3.1-beta.0 Fri Dec 16 2022 15:46:54 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive, ref, defineComponent, createApp, h, toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, mergeProps, renderSlot, getCurrentInstance, Fragment, toDisplayString, createTextVNode, watchEffect, Transition, withCtx, withDirectives, withModifiers, vShow, watch, Teleport, createVNode, useSlots, inject, provide, unref, onMounted, onUnmounted, shallowReactive, markRaw, isVNode, nextTick, renderList, onActivated, createSlots, onBeforeUnmount, onBeforeMount, resolveDynamicComponent, readonly, vModelText, onDeactivated, render as render$4, normalizeProps, guardReactiveProps, useCssVars } from "vue";
+import { reactive, ref, defineComponent, createApp, h, toRefs, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, mergeProps, renderSlot, getCurrentInstance, Fragment, toDisplayString, createTextVNode, watchEffect, Transition, withCtx, withDirectives, withModifiers, vShow, watch, Teleport, createVNode, useSlots, inject, provide, unref, onMounted, onUnmounted, shallowReactive, markRaw, isVNode, nextTick, renderList, onActivated, createSlots, onBeforeUnmount, onBeforeMount, resolveDynamicComponent, readonly, vModelText, onDeactivated, render as render$3, normalizeProps, guardReactiveProps, useCssVars } from "vue";
 class BaseLang {
 }
 class Lang$1 extends BaseLang {
@@ -350,6 +350,10 @@ const padZero = (num, length = 2) => {
   }
   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 = reactive({
   "zh-CN": new Lang$1(),
   "en-US": new Lang()
@@ -576,7 +580,7 @@ const _sfc_main$1M = create$1M({
   }
 });
 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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -604,7 +608,7 @@ function _sfc_render$1z(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 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 = getCurrentInstance().proxy;
   return proxy.$router || null;
@@ -619,7 +623,7 @@ const _hoisted_2$11 = {
 };
 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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -708,7 +712,7 @@ const _sfc_main$1L = create$1L({
     };
   }
 });
-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: {
@@ -736,7 +740,7 @@ const _hoisted_2$10 = {
   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 openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
@@ -747,7 +751,7 @@ function _sfc_render$1y(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 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) => {
@@ -825,7 +829,7 @@ const _sfc_main$1J = create$1J({
     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 openBlock(), createBlock(Transition, { name: "overlay-fade" }, {
     default: withCtx(() => [
       withDirectives(createElementVNode("view", {
@@ -841,7 +845,7 @@ function _sfc_render$1x(_ctx, _cache, $props, $setup, $data, $options) {
     _: 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,
@@ -1016,7 +1020,7 @@ const component$9 = (componentName2) => {
 };
 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 = resolveComponent("nut-overlay");
   const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createBlock(Teleport, {
@@ -1062,7 +1066,7 @@ function _sfc_render$1w(_ctx, _cache, $props, $setup, $data, $options) {
     }, 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: "" },
@@ -1185,7 +1189,7 @@ const _hoisted_3$L = {
   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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
@@ -1216,7 +1220,7 @@ function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
     ])) : 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");
@@ -1255,7 +1259,7 @@ const _sfc_main$1E = create$1E({
     };
   }
 });
-function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1v(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes),
     style: normalizeStyle(_ctx.style)
@@ -1263,7 +1267,7 @@ function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
     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: {
@@ -1309,14 +1313,14 @@ const _sfc_main$1D = create$1D({
     };
   }
 });
-function _sfc_render$1t(_ctx, _cache, $props, $setup, $data, $options) {
+function _sfc_render$1u(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.getClasses())
   }, [
     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;
 }
@@ -1539,7 +1543,7 @@ const _sfc_main$1B = create$1B({
     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" ? (openBlock(), createElementBlock("view", {
     key: 0,
     class: normalizeClass(_ctx.classes)
@@ -1550,7 +1554,7 @@ function _sfc_render$1s(_ctx, _cache, $props, $setup, $data, $options) {
     class: 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) => {
@@ -1804,7 +1808,7 @@ const _hoisted_1$1b = {
   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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.rootClass),
@@ -1827,7 +1831,7 @@ function _sfc_render$1r(_ctx, _cache, $props, $setup, $data, $options) {
     ], 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: {
@@ -1933,7 +1937,7 @@ const _hoisted_7$l = {
   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 = resolveComponent("nut-icon");
   return _ctx.fixed && _ctx.placeholder ? (openBlock(), createElementBlock("view", _hoisted_1$1a, [
     createElementVNode("view", {
@@ -2017,7 +2021,7 @@ function _sfc_render$1q(_ctx, _cache, $props, $setup, $data, $options) {
     ])
   ], 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: {
@@ -2092,7 +2096,7 @@ const _hoisted_5$r = {
   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 = resolveComponent("nut-overlay");
   const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
@@ -2138,7 +2142,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
 }
 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: {
@@ -2290,7 +2294,7 @@ const _sfc_main$1w = create$1w({
 });
 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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
@@ -2322,7 +2326,7 @@ function _sfc_render$1p(_ctx, _cache, $props, $setup, $data, $options) {
     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: {
@@ -2439,7 +2443,7 @@ const _sfc_main$1v = create$1v({
 });
 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 = resolveComponent("nut-icon");
   const _component_nut_popup = resolveComponent("nut-popup");
   return withDirectives((openBlock(), createElementBlock("view", {
@@ -2497,7 +2501,7 @@ function _sfc_render$1o(_ctx, _cache, $props, $setup, $data, $options) {
     [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: {
@@ -2509,10 +2513,6 @@ const _sfc_main$1u = create$1u({
       type: Boolean,
       default: false
     },
-    type: {
-      type: String,
-      default: "base"
-    },
     size: {
       type: String,
       default: "20px"
@@ -2542,7 +2542,7 @@ const _sfc_main$1u = create$1u({
       val: props.visible,
       children: []
     });
-    const nutTabbar = ref(null);
+    const nutTabbar = ref();
     function changeIndex(index, active) {
       emit("update:visible", active);
       parentData.modelValue = active;
@@ -2566,8 +2566,7 @@ const _sfc_main$1u = create$1u({
     onMounted(() => {
       if (bottom.value && placeholder.value) {
         nextTick(() => {
-          var _a;
-          height.value = (_a = nutTabbar == null ? void 0 : nutTabbar.value) == null ? void 0 : _a.getBoundingClientRect().height;
+          height.value = useRect(nutTabbar).height;
         });
       }
     });
@@ -2578,7 +2577,7 @@ const _sfc_main$1u = create$1u({
     };
   }
 });
-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 ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "nut-tabbar__placeholder",
@@ -2597,7 +2596,7 @@ function _sfc_render$1n(_ctx, _cache, $props, $setup, $data, $options) {
     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: {
@@ -2617,7 +2616,7 @@ const _sfc_main$1t = create$1t({
       default: ""
     },
     num: {
-      type: String,
+      type: Number,
       default: ""
     },
     activeImg: {
@@ -2659,8 +2658,8 @@ const _sfc_main$1t = create$1t({
       var _a;
       if (child.proxy) {
         parent.children.push(child.proxy);
-        const index = 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(getCurrentInstance());
@@ -2731,7 +2730,7 @@ const _hoisted_5$q = {
 };
 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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("div", {
     class: normalizeClass(["nut-tabbar-item", { "nut-tabbar-item__icon--unactive": !_ctx.active }]),
@@ -2742,13 +2741,12 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode("view", _hoisted_1$16, [
       !_ctx.dot ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-        _ctx.num && _ctx.num <= 99 ? (openBlock(), createElementBlock("view", _hoisted_2$W, toDisplayString(_ctx.num), 1)) : _ctx.num && _ctx.num > 100 ? (openBlock(), createElementBlock("view", _hoisted_3$I, toDisplayString("99+"))) : createCommentVNode("", true)
+        _ctx.num && _ctx.num <= 99 ? (openBlock(), createElementBlock("view", _hoisted_2$W, toDisplayString(_ctx.num), 1)) : _ctx.num && _ctx.num >= 100 ? (openBlock(), createElementBlock("view", _hoisted_3$I, toDisplayString("99+"))) : createCommentVNode("", true)
       ], 64)) : createCommentVNode("", true),
       _ctx.dot ? (openBlock(), createElementBlock("div", _hoisted_4$z)) : createCommentVNode("", true),
-      _ctx.isHaveSlot("icon") ? (openBlock(), createElementBlock("div", _hoisted_5$q, [
+      _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_5$q, [
         renderSlot(_ctx.$slots, "icon", { active: _ctx.active })
-      ])) : createCommentVNode("", true),
-      _ctx.icon && !_ctx.isHaveSlot("icon") ? (openBlock(), createElementBlock("view", _hoisted_6$n, [
+      ])) : _ctx.icon ? (openBlock(), createElementBlock("view", _hoisted_6$n, [
         createVNode(_component_nut_icon, {
           class: "nut-tabbar-item_icon-box_icon",
           size: _ctx.state.size,
@@ -2756,8 +2754,7 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
           "font-class-name": _ctx.fontClassName,
           "class-prefix": _ctx.classPrefix
         }, null, 8, ["size", "name", "font-class-name", "class-prefix"])
-      ])) : createCommentVNode("", true),
-      !_ctx.icon && _ctx.activeImg && !_ctx.isHaveSlot("icon") ? (openBlock(), createElementBlock("div", {
+      ])) : _ctx.activeImg ? (openBlock(), createElementBlock("div", {
         key: 4,
         class: "nut-tabbar-item_icon-box_icon",
         style: normalizeStyle({
@@ -2769,16 +2766,17 @@ function _sfc_render$1m(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("view", {
         class: 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 ? (openBlock(), createElementBlock("view", _hoisted_7$k, toDisplayString(_ctx.tabTitle), 1)) : createCommentVNode("", true),
-        !_ctx.tabTitle ? renderSlot(_ctx.$slots, "default", { key: 1 }) : createCommentVNode("", true)
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          _ctx.tabTitle ? (openBlock(), createElementBlock("view", _hoisted_7$k, toDisplayString(_ctx.tabTitle), 1)) : 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 = getCurrentInstance();
   if (instance) {
@@ -2977,7 +2975,7 @@ const _hoisted_3$H = ["innerHTML"];
 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 openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
@@ -3048,7 +3046,7 @@ function _sfc_render$1l(_ctx, _cache, $props, $setup, $data, $options) {
     ], 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: {
@@ -3167,7 +3165,7 @@ const _hoisted_4$x = {
   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 openBlock(), createElementBlock("view", _hoisted_1$14, [
     createElementVNode("view", {
       class: normalizeClass(["nut-pagination-prev", _ctx.mode == "multi" ? "" : "simple-border", _ctx.modelValue == 1 ? "disabled" : ""]),
@@ -3203,7 +3201,7 @@ function _sfc_render$1k(_ctx, _cache, $props, $setup, $data, $options) {
     ], 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 = "";
@@ -3330,9 +3328,6 @@ const component$5 = {
         init(vnodes);
       }
     );
-    const getScrollTopRoot = () => {
-      return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    };
     watch(
       () => props.modelValue,
       (value) => {
@@ -3395,9 +3390,11 @@ const component$5 = {
     };
   }
 };
+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 = resolveComponent("nut-icon");
   const _component_nut_sticky = resolveComponent("nut-sticky");
   return openBlock(), createElementBlock("view", {
@@ -3487,9 +3484,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 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: {
@@ -3786,7 +3781,7 @@ function getDirection(x, y) {
   }
   return "";
 }
-function useTouch$1() {
+function useTouch() {
   const startX = ref(0);
   const startY = ref(0);
   const moveX = ref(0);
@@ -3890,7 +3885,7 @@ const _sfc_main$1k = create$1k({
     let currentValue;
     const root = ref();
     const dragStatus = ref();
-    const touch = useTouch$1();
+    const touch = useTouch();
     const marksList = computed(() => {
       const { marks, max, min } = props;
       const marksKeys = Object.keys(marks);
@@ -6368,7 +6363,7 @@ const _sfc_main$1c = create$1c({
   },
   emits: ["click", "change"],
   setup(props, { emit }) {
-    const touch = useTouch$1();
+    const touch = useTouch();
     const wrapper = ref();
     const state = reactive({
       touchParams: {
@@ -6492,7 +6487,7 @@ const _sfc_main$1c = create$1c({
         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;
@@ -6633,6 +6628,14 @@ const _sfc_main$1b = create$1b({
     swipeDuration: {
       type: [Number, String],
       default: 1e3
+    },
+    showOkText: {
+      type: Boolean,
+      default: true
+    },
+    showCancelText: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ["close", "change", "confirm", "update:visible", "update:modelValue"],
@@ -6841,15 +6844,17 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
     }, {
       default: withCtx(() => [
         createElementVNode("view", _hoisted_1$V, [
-          createElementVNode("view", {
+          _ctx.showCancelText ? (openBlock(), createElementBlock("view", {
+            key: 0,
             class: "nut-picker__left",
             onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
-          }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1),
+          }, toDisplayString(_ctx.cancelText || _ctx.translate("cancel")), 1)) : createCommentVNode("", true),
           createElementVNode("view", _hoisted_2$K, toDisplayString(_ctx.title), 1),
-          createElementVNode("view", {
+          _ctx.showOkText ? (openBlock(), createElementBlock("view", {
+            key: 1,
             class: "nut-picker__right",
             onClick: _cache[1] || (_cache[1] = ($event) => _ctx.confirmHandler())
-          }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)
+          }, toDisplayString(_ctx.okText || _ctx.translate("confirm")), 1)) : createCommentVNode("", true)
         ]),
         renderSlot(_ctx.$slots, "top"),
         createElementVNode("view", _hoisted_3$A, [
@@ -8070,7 +8075,7 @@ const useComponent = (touchable = true) => {
         }
         return v;
       };
-      const touch = useTouch$1();
+      const touch = useTouch();
       const touchMethods = {
         onTouchStart(event) {
           if (!props.touchable)
@@ -9603,7 +9608,7 @@ const _sfc_main$_ = create$_({
       }
       state.offset = offset;
     };
-    const touch = useTouch$1();
+    const touch = useTouch();
     const touchMethods = {
       onTouchStart(event) {
         if (props.disabled)
@@ -10501,7 +10506,7 @@ const _sfc_main$V = create$V({
   },
   emits: ["scroll-change", "load-more", "refresh"],
   setup(props, { emit, slots }) {
-    const touch = useTouch$1();
+    const touch = useTouch();
     const state = reactive({
       scrollEl: window,
       scroller: null,
@@ -10523,17 +10528,9 @@ const _sfc_main$V = create$V({
     const getStyle = 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);
     };
@@ -10541,8 +10538,8 @@ const _sfc_main$V = create$V({
       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;
         }
@@ -10565,7 +10562,7 @@ const _sfc_main$V = create$V({
       state.isInfiniting = false;
     };
     const handleScroll = () => {
-      requestAniFrame2()(() => {
+      requestAniFrame$1(() => {
         if (!isScrollAtBottom() || !props.hasMore || state.isInfiniting) {
           return false;
         } else {
@@ -10617,14 +10614,16 @@ const _sfc_main$V = create$V({
     const getParentElement = (el) => {
       return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
     };
+    const removeScrollListener = () => {
+      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+    };
     onMounted(() => {
       const parentElement = getParentElement(state.scroller);
       state.scrollEl = props.useWindow ? window : parentElement;
       scrollListener();
-      console.log(slots);
     });
     onUnmounted(() => {
-      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+      removeScrollListener();
     });
     const isKeepAlive = ref(false);
     onActivated(() => {
@@ -10635,7 +10634,7 @@ const _sfc_main$V = create$V({
     });
     onDeactivated(() => {
       isKeepAlive.value = true;
-      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+      removeScrollListener();
     });
     return {
       classes,
@@ -10658,10 +10657,7 @@ const _hoisted_5$f = {
   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 = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
@@ -10686,13 +10682,13 @@ function _sfc_render$U(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     createElementVNode("view", _hoisted_4$n, [
       _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_5$f, [
-        !_ctx.slots.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        renderSlot(_ctx.$slots, "loading", {}, () => [
           createVNode(_component_nut_icon, mergeProps({ class: "bottom-img" }, _ctx.$attrs, { name: _ctx.loadIcon }), null, 16, ["name"]),
           createElementVNode("view", _hoisted_6$e, toDisplayString(_ctx.loadTxt || _ctx.translate("loading")), 1)
-        ], 64)) : renderSlot(_ctx.$slots, "loading", { key: 1 })
-      ])) : !_ctx.hasMore ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        !_ctx.slots.finished ? (openBlock(), createElementBlock("view", _hoisted_7$c, toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)) : renderSlot(_ctx.$slots, "finished", { key: 1 })
-      ], 64)) : createCommentVNode("", true)
+        ])
+      ])) : !_ctx.hasMore ? renderSlot(_ctx.$slots, "finished", { key: 1 }, () => [
+        createElementVNode("view", _hoisted_7$c, toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)
+      ]) : createCommentVNode("", true)
     ])
   ], 34);
 }
@@ -10834,7 +10830,7 @@ const updateNotify = (opts) => {
       opts = { ...defaultOptions$1, ...opts };
     }
     const instance = createVNode(Notify, opts);
-    render$4(instance, container);
+    render$3(instance, container);
     return instance.component.data;
   }
 };
@@ -10870,7 +10866,7 @@ const mountNotify = (opts) => {
   };
   const instance = createVNode(Wrapper);
   document.body.appendChild(root);
-  render$4(instance, root);
+  render$3(instance, root);
 };
 const errorMsg$1 = (msg) => {
   if (!msg) {
@@ -11274,7 +11270,7 @@ const updateToast = (opts) => {
       opts = { ...defaultOptions, ...opts };
     }
     const instance = createVNode(Toast, opts);
-    render$4(instance, container);
+    render$3(instance, container);
     return ToastFunction;
   }
 };
@@ -13287,54 +13283,6 @@ function _sfc_render$G(_ctx, _cache, $props, $setup, $data, $options) {
   ], 2);
 }
 var Step = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["render", _sfc_render$G]]);
-const DISTANCE = 5;
-function useTouch() {
-  const state = 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: {
@@ -13347,7 +13295,7 @@ const _sfc_main$F = create$F({
       default: 0
     },
     direction: {
-      type: [String],
+      type: String,
       default: "horizontal"
     },
     paginationVisible: {
@@ -13416,11 +13364,25 @@ const _sfc_main$F = create$F({
       };
     });
     const isVertical = computed(() => props.direction === "vertical");
+    const classesInner = computed(() => {
+      const prefixCls = componentName$u;
+      return {
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-vertical`]: isVertical.value
+      };
+    });
+    const classesPagination = computed(() => {
+      const prefixCls = componentName$u;
+      return {
+        [`${prefixCls}-pagination`]: true,
+        [`${prefixCls}-pagination-vertical`]: isVertical.value
+      };
+    });
     const delTa = computed(() => {
-      return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+      return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
     });
     const isCorrectDirection = computed(() => {
-      return touch.state.direction === props.direction;
+      return touch.direction.value === props.direction;
     });
     const childCount = computed(() => state.children.length);
     const size = computed(() => state[isVertical.value ? "height" : "width"]);
@@ -13435,12 +13397,7 @@ const _sfc_main$F = create$F({
     const activePagination = 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)`,
@@ -13451,26 +13408,27 @@ const _sfc_main$F = create$F({
     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);
           }
@@ -13480,12 +13438,6 @@ const _sfc_main$F = create$F({
         }
       }
     };
-    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) {
@@ -13493,7 +13445,7 @@ const _sfc_main$F = create$F({
       }
       let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = range(targetOffset, minOffset.value, 0);
+        targetOffset = clamp(targetOffset, minOffset.value, 0);
       }
       return targetOffset;
     };
@@ -13501,9 +13453,9 @@ const _sfc_main$F = create$F({
       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;
     };
@@ -13542,48 +13494,39 @@ const _sfc_main$F = create$F({
     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
         });
       });
     };
@@ -13637,7 +13580,7 @@ const _sfc_main$F = create$F({
       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 {
@@ -13695,10 +13638,9 @@ const _sfc_main$F = create$F({
     return {
       state,
       classes,
+      classesInner,
+      classesPagination,
       container,
-      componentName: componentName$u,
-      isVertical,
-      slots,
       activePagination,
       onTouchStart,
       onTouchMove,
@@ -13716,21 +13658,15 @@ function _sfc_render$F(_ctx, _cache, $props, $setup, $data, $options) {
     onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
   }, [
     createElementVNode("view", {
-      class: normalizeClass({
-        [`${_ctx.componentName}-inner`]: true,
-        [`${_ctx.componentName}-vertical`]: _ctx.isVertical
-      }),
+      class: normalizeClass(_ctx.classesInner),
       style: normalizeStyle(_ctx.state.style)
     }, [
       renderSlot(_ctx.$slots, "default")
     ], 6),
     renderSlot(_ctx.$slots, "page"),
-    _ctx.paginationVisible && !_ctx.slots.page ? (openBlock(), createElementBlock("view", {
+    _ctx.paginationVisible && !_ctx.$slots.page ? (openBlock(), createElementBlock("view", {
       key: 0,
-      class: normalizeClass({
-        [`${_ctx.componentName}-pagination`]: true,
-        [`${_ctx.componentName}-pagination-vertical`]: _ctx.isVertical
-      })
+      class: normalizeClass(_ctx.classesPagination)
     }, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.state.children.length, (item, index) => {
         return openBlock(), createElementBlock("i", {
@@ -13822,12 +13758,17 @@ const _sfc_main$D = create$D({
     size: {
       type: String,
       default: "large"
+    },
+    strikeThrough: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const classes = computed(() => {
       return {
-        [componentName$s]: true
+        [componentName$s]: true,
+        [`${componentName$s}--strike`]: props.strikeThrough
       };
     });
     const showSymbol = computed(() => {
@@ -13946,7 +13887,7 @@ const _sfc_main$C = create$C({
       displayWidth: 0,
       displayHeight: 0
     });
-    const touch = useTouch$1();
+    const touch = useTouch();
     const vertical = computed(() => {
       const { rootWidth, rootHeight } = props;
       const rootRatio = rootHeight / rootWidth;
@@ -14104,7 +14045,6 @@ const _sfc_main$C = create$C({
       checkTap();
       touch.reset();
     };
-    const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
     const closeSwiper = () => {
       emit("close");
     };
@@ -15359,6 +15299,7 @@ const _sfc_main$w = create$w({
     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" },
@@ -15368,52 +15309,128 @@ const _sfc_main$w = create$w({
     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 = ref();
     const popoverContentRef = ref();
     const showPopup = ref(props.visible);
-    const state = reactive({
-      rootWidth: 0,
-      rootHeight: 0
-    });
+    let rootRect = ref();
+    let conentRootRect = ref();
     const popoverArrow = computed(() => {
       const prefixCls = "nut-popover-arrow";
       const loca = props.location;
       const direction = loca.split("-")[0];
       return `${prefixCls} ${prefixCls}-${direction} ${prefixCls}--${loca}`;
     });
-    const getStyles = computed(() => {
-      let cross = +state.rootHeight;
-      let lengthways = +state.rootWidth;
-      let { offset, location: location2 } = props;
+    const popoverArrowStyle = 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 = 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 h2 = direction == "bottom" ? height + cross : -(conentHeight + cross);
+          styles.top = `${top + h2}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 = 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);
     };
     watch(
       () => props.visible,
@@ -15448,7 +15465,12 @@ const _sfc_main$w = create$w({
     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();
       }
     };
@@ -15459,8 +15481,10 @@ const _sfc_main$w = create$w({
       closePopover,
       chooseItem,
       popoverRef,
-      getStyles,
-      popoverContentRef
+      popoverContentRef,
+      getRootPosition,
+      customStyle,
+      popoverArrowStyle
     };
   }
 });
@@ -15471,59 +15495,64 @@ const _hoisted_1$r = {
 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 = resolveComponent("nut-icon");
+  const _component_Icon = resolveComponent("Icon");
   const _component_nut_popup = resolveComponent("nut-popup");
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(["nut-popover", `nut-popover--${_ctx.theme}`, `${_ctx.customClass}`])
-  }, [
-    createElementVNode("view", {
+  return openBlock(), createElementBlock(Fragment, null, [
+    !_ctx.targetId ? (openBlock(), createElementBlock("div", {
+      key: 0,
       class: "nut-popover-wrapper",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.openPopover && _ctx.openPopover(...args)),
       ref: "popoverRef"
     }, [
       renderSlot(_ctx.$slots, "reference")
-    ], 512),
-    createVNode(_component_nut_popup, {
-      popClass: `nut-popover-content nut-popover-content--${_ctx.location}`,
-      style: 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: withCtx(() => [
-        createElementVNode("view", _hoisted_1$r, [
-          _ctx.showArrow ? (openBlock(), createElementBlock("view", {
-            key: 0,
-            class: normalizeClass(_ctx.popoverArrow)
-          }, null, 2)) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "content"),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
-            return openBlock(), createElementBlock("view", {
-              key: index,
-              class: normalizeClass([item.className, item.disabled && "nut-popover-menu-disabled", "nut-popover-menu-item"]),
-              onClick: withModifiers(($event) => _ctx.chooseItem(item, index), ["stop"])
-            }, [
-              item.icon ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
-                createVNode(_component_nut_icon, mergeProps(_ctx.$attrs, {
-                  class: "nut-popover-item-img",
-                  classPrefix: _ctx.iconPrefix,
-                  name: item.icon
-                }), null, 16, ["classPrefix", "name"])
-              ]) : createCommentVNode("", true),
-              createElementVNode("view", _hoisted_3$m, toDisplayString(item.name), 1)
-            ], 10, _hoisted_2$o);
-          }), 128))
-        ], 512)
-      ]),
-      _: 3
-    }, 8, ["popClass", "style", "visible", "overlay", "duration", "overlayStyle", "overlayClass", "closeOnClickOverlay"])
-  ], 2);
+    ], 512)) : createCommentVNode("", true),
+    createElementVNode("view", {
+      class: normalizeClass(["nut-popover", `nut-popover--${_ctx.theme}`, `${_ctx.customClass}`]),
+      style: normalizeStyle(_ctx.getRootPosition)
+    }, [
+      createVNode(_component_nut_popup, {
+        popClass: `nut-popover-content nut-popover-content--${_ctx.location}`,
+        style: 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: withCtx(() => [
+          createElementVNode("view", _hoisted_1$r, [
+            _ctx.showArrow ? (openBlock(), createElementBlock("view", {
+              key: 0,
+              class: normalizeClass(_ctx.popoverArrow),
+              style: normalizeStyle(_ctx.popoverArrowStyle)
+            }, null, 6)) : createCommentVNode("", true),
+            renderSlot(_ctx.$slots, "content"),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item, index) => {
+              return openBlock(), createElementBlock("view", {
+                key: index,
+                class: normalizeClass([item.className, item.disabled && "nut-popover-menu-disabled", "nut-popover-menu-item"]),
+                onClick: withModifiers(($event) => _ctx.chooseItem(item, index), ["stop"])
+              }, [
+                item.icon ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+                  createVNode(_component_Icon, mergeProps(_ctx.$attrs, {
+                    class: "nut-popover-item-img",
+                    classPrefix: _ctx.iconPrefix,
+                    name: item.icon
+                  }), null, 16, ["classPrefix", "name"])
+                ]) : createCommentVNode("", true),
+                createElementVNode("view", _hoisted_3$m, 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 = {
@@ -19845,6 +19874,6 @@ function install(app) {
     }
   });
 }
-const version = "3.3.0";
+const version = "3.3.1-beta.0";
 var nutui_vue_build = { install, version, Locale };
 export { ActionSheet, Address, AddressList, Animate, Audio, AudioOperate, Avatar, AvatarGroup, BackTop, Badge, Barrage, Button, Calendar, CalendarItem, Card, Cascader, Category, CategoryPane, Cell, CellGroup, _sfc_main$1e as Checkbox, _sfc_main$1d as CheckboxGroup, CircleProgress, Col, Collapse, CollapseItem, Comment, _sfc_main$1H as ConfigProvider, CountDown, CountUp, DatePicker, _Dialog as Dialog, Divider, Drag, Ecard, Elevator, Ellipsis, Empty, FixedNav, Form, FormItem, _sfc_main$1A as Grid, GridItem, _sfc_main$1N as Icon, Image$1 as Image, _ImagePreview as ImagePreview, Indicator, InfiniteLoading, Input, InputNumber, Invoice, _sfc_main$1F as Layout, List, Locale, Menu, MenuItem, Navbar, NoticeBar, NotifyFunction as Notify, NumberKeyboard, OverLay, Pagination, Picker, Popover, Popup, Price, Progress, _sfc_main$17 as Radio, _sfc_main$16 as RadioGroup, Range, Rate, Row, SearchBar, ShortPassword, SideNavBar, SideNavBarItem, Signature, Skeleton, Sku, Step, _sfc_main$H as Steps, _sfc_main$1C as Sticky, SubSideNavBar, Swipe, Swiper, SwiperItem, Switch, TabPane, Tabbar, TabbarItem, Table, Tabs, Tag, TextArea, TimeDetail, TimePannel, TimeSelect, ToastFunction as Toast, TrendArrow, Uploader, Video, WaterMark, nutui_vue_build as default, install, version };