ninemoon-ui 0.0.12 → 0.0.13

package/dist/components/utils/tool.d.ts

@@ -1,4 +1,5 @@
-export declare const throttle: (fn: Function, delay: number) => () => void;
+export declare function debounce(func: Function, wait: number): () => void;
+export declare function throttle(func: Function, wait: number): () => void;
 export declare const usePotion: (baseDom: HTMLElement, aimDom: HTMLElement, set?: {
     position: 'topleft' | 'topmiddle' | 'topright' | 'bottomleft' | 'bottommiddle' | 'bottomright' | 'centerleft' | 'centerright';
     divide?: number;
@@ -7,6 +8,7 @@ export declare const usePotion: (baseDom: HTMLElement, aimDom: HTMLElement, set?
     Left: number;
     arrowLeft: number;
     arrowTop: number;
+    exChange: boolean;
 };
 export declare function getNewArray(array: Array<any>, subGroupLength: number): any[][];
 export declare function getScrollWidth(): number;
@@ -40,5 +42,6 @@ export declare const on: (element: {
 export declare const off: (element: {
     removeEventListener: (arg0: any, arg1: any, arg2: boolean) => void;
 }, event: any, handler: any) => void;
+export declare function createAndAppendElementWithId(id: string): void;
 declare const _default: {};
 export default _default;

package/dist/index.css

@@ -807,9 +807,9 @@
     content: var(--tw-content);
     position: absolute;
 }
-  .before\:tdd-box-border::before {
+  .before\:tdd-z-\[-1\]::before {
     content: var(--tw-content);
-    box-sizing: border-box;
+    z-index: -1;
 }
   .before\:tdd-h-2::before {
     content: var(--tw-content);
@@ -831,6 +831,31 @@
     content: var(--tw-content);
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+  .before\:tdd-rounded-bl::before {
+    content: var(--tw-content);
+    border-bottom-left-radius: 0.25rem;
+}
+  .before\:tdd-rounded-br::before {
+    content: var(--tw-content);
+    border-bottom-right-radius: 0.25rem;
+}
+  .before\:tdd-rounded-tl::before {
+    content: var(--tw-content);
+    border-top-left-radius: 0.25rem;
+}
+  .before\:tdd-rounded-tr::before {
+    content: var(--tw-content);
+    border-top-right-radius: 0.25rem;
+}
+  .before\:tdd-border::before {
+    content: var(--tw-content);
+    border-width: 1px;
+}
+  .before\:tdd-border-gray-300::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
   .before\:tdd-border-b-transparent::before {
     content: var(--tw-content);
@@ -852,10 +877,6 @@
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-  .before\:tdd-content-\[\'\'\]::before {
-    --tw-content: '';
-    content: var(--tw-content);
 }
   .checked\:tdd-border-transparent:checked {
     border-color: transparent;

package/dist/index.es.js

@@ -1,37 +1,37 @@
 import "vue";
-import { G, v, J, K, B, A, n, p, L, d, e, m, f, H, q, M, x, s, w, y, z, F, I, h, j, N, k, l, D, E, O, C, i } from "./js/index/index.js";
+import { H, w, K, N, C, B, q, s, L, f, h, p, j, I, t, M, y, v, x, z, A, G, J, k, l, O, m, n, E, F, P, D, i } from "./js/index/index.js";
 export {
-  G as LibAlert,
-  v as LibBadge,
-  J as LibCarousel,
-  K as LibCarouselItem,
-  B as LibCheckBox,
-  A as LibCheckGroup,
-  n as LibDatePicker,
-  p as LibDatePickerRange,
+  H as LibAlert,
+  w as LibBadge,
+  K as LibCarousel,
+  N as LibCarouselItem,
+  C as LibCheckBox,
+  B as LibCheckGroup,
+  q as LibDatePicker,
+  s as LibDatePickerRange,
   L as LibDialog,
-  d as LibForm,
-  e as LibFormLabel,
-  m as LibImage,
-  f as LibInput,
-  H as LibLoad,
-  q as LibMenu,
+  f as LibForm,
+  h as LibFormLabel,
+  p as LibImage,
+  j as LibInput,
+  I as LibLoad,
+  t as LibMenu,
   M as LibMessage,
-  x as LibNumberInput,
-  s as LibPagination,
-  w as LibPopover,
-  y as LibRadioBox,
-  z as LibRadioGroup,
-  F as LibScrollBar,
-  I as LibScrollLoad,
-  h as LibSelect,
-  j as LibSelectOption,
-  N as LibSwitch,
-  k as LibTable,
-  l as LibTableItem,
-  D as LibTabs,
-  E as LibTabsPane,
-  O as LibTree,
-  C as LibUpload,
+  y as LibNumberInput,
+  v as LibPagination,
+  x as LibPopover,
+  z as LibRadioBox,
+  A as LibRadioGroup,
+  G as LibScrollBar,
+  J as LibScrollLoad,
+  k as LibSelect,
+  l as LibSelectOption,
+  O as LibSwitch,
+  m as LibTable,
+  n as LibTableItem,
+  E as LibTabs,
+  F as LibTabsPane,
+  P as LibTree,
+  D as LibUpload,
   i as default
 };

package/dist/index.umd.js

@@ -812,9 +812,9 @@
     content: var(--tw-content);
     position: absolute;
 }
-  .before\\:tdd-box-border::before {
+  .before\\:tdd-z-\\[-1\\]::before {
     content: var(--tw-content);
-    box-sizing: border-box;
+    z-index: -1;
 }
   .before\\:tdd-h-2::before {
     content: var(--tw-content);
@@ -836,6 +836,31 @@
     content: var(--tw-content);
     --tw-rotate: 45deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+  .before\\:tdd-rounded-bl::before {
+    content: var(--tw-content);
+    border-bottom-left-radius: 0.25rem;
+}
+  .before\\:tdd-rounded-br::before {
+    content: var(--tw-content);
+    border-bottom-right-radius: 0.25rem;
+}
+  .before\\:tdd-rounded-tl::before {
+    content: var(--tw-content);
+    border-top-left-radius: 0.25rem;
+}
+  .before\\:tdd-rounded-tr::before {
+    content: var(--tw-content);
+    border-top-right-radius: 0.25rem;
+}
+  .before\\:tdd-border::before {
+    content: var(--tw-content);
+    border-width: 1px;
+}
+  .before\\:tdd-border-gray-300::before {
+    content: var(--tw-content);
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
   .before\\:tdd-border-b-transparent::before {
     content: var(--tw-content);
@@ -857,10 +882,6 @@
     content: var(--tw-content);
     --tw-bg-opacity: 1;
     background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-  .before\\:tdd-content-\\[\\'\\'\\]::before {
-    --tw-content: '';
-    content: var(--tw-content);
 }
   .checked\\:tdd-border-transparent:checked {
     border-color: transparent;
@@ -1784,32 +1805,46 @@
       el.removeChild(el.instance.$el);
     }
   };
-  const throttle = (fn, delay) => {
-    let flag = true;
+  function debounce(func, wait) {
+    let timeout;
     return function() {
-      if (flag) {
-        setTimeout(() => {
-          fn.apply(this, arguments);
-          flag = true;
-        }, delay);
+      const context = this;
+      const args = arguments;
+      clearTimeout(timeout);
+      timeout = setTimeout(function() {
+        func.apply(context, args);
+      }, wait);
+    };
+  }
+  function throttle(func, wait) {
+    let timeout;
+    return function() {
+      const context = this;
+      const args = arguments;
+      if (!timeout) {
+        timeout = setTimeout(function() {
+          timeout = null;
+          func.apply(context, args);
+        }, wait);
       }
-      flag = false;
     };
-  };
+  }
   const usePotion = (baseDom, aimDom, set) => {
     let left = 0;
     let top = 0;
     let arrowleft = 0;
     let arrowtop = 0;
+    let exchange = false;
     if (!baseDom || !aimDom) {
       return {
         Top: top,
         Left: left,
         arrowLeft: arrowleft,
-        arrowTop: arrowtop
+        arrowTop: arrowtop,
+        exChange: exchange
       };
     }
-    const { left: baseLeft, right, bottom, top: baseTop, width: baseWidth } = baseDom.getBoundingClientRect();
+    const { left: baseLeft, right, bottom, top: baseTop, width: baseWidth, height: baseHeight } = baseDom.getBoundingClientRect();
     const { height: aimHeight, width: aimWidth } = aimDom.getBoundingClientRect();
     const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
     const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -1818,13 +1853,11 @@
       case "bottommiddle":
       case "bottomright":
         top = scrollTop + bottom;
-        arrowtop = -5;
         break;
       case "topleft":
       case "topmiddle":
       case "topright":
         top = scrollTop + baseTop - aimHeight;
-        arrowtop = aimHeight - 5;
         break;
       case "centerleft":
       case "centerright":
@@ -1857,20 +1890,42 @@
         arrowleft = -5;
         break;
     }
-    if (top + aimHeight > window.innerHeight) {
-      top = scrollTop + window.innerHeight - aimHeight - 10;
+    if (top + aimHeight + 10 > window.innerHeight) {
+      switch (set == null ? void 0 : set.position) {
+        case "bottommiddle":
+        case "bottomleft":
+        case "bottomright":
+          exchange = true;
+          top = scrollTop + baseTop - aimHeight - 24;
+          break;
+        case "centerleft":
+        case "centerright":
+          top = scrollTop + window.innerHeight - aimHeight - 10;
+          arrowtop = baseTop + baseHeight / 2 - 10;
+          break;
+      }
     }
     if (top < 0) {
-      top = 10;
-    }
-    if (left + aimWidth > window.innerWidth) {
-      left = scrollLeft + right - aimWidth;
+      switch (set == null ? void 0 : set.position) {
+        case "topmiddle":
+        case "topleft":
+        case "topright":
+          exchange = true;
+          top = scrollTop + bottom + 24;
+          break;
+        case "centerleft":
+        case "centerright":
+          top = 10;
+          arrowtop = baseTop + baseHeight / 2 - 10;
+          break;
+      }
     }
     return {
       Top: top,
       Left: left,
       arrowLeft: arrowleft,
-      arrowTop: arrowtop
+      arrowTop: arrowtop,
+      exChange: exchange
     };
   };
   function getNewArray(array, subGroupLength) {
@@ -1940,6 +1995,13 @@
       }
     };
   }();
+  function createAndAppendElementWithId(id) {
+    if (!document.getElementById(id)) {
+      const element = document.createElement("div");
+      element.id = id;
+      document.body.appendChild(element);
+    }
+  }
   const scrolllead = {
     beforeMount(el, binding) {
       function scrollhandle(e) {
@@ -2998,7 +3060,7 @@
             mouseX = e.pageX;
             mouseY = e.pageY;
             ImgIsMoving.value = true;
-            el._vueMove_ = throttle(setMoveHandle, 60);
+            el._vueMove_ = debounce(setMoveHandle, 60);
             window.addEventListener("mousemove", el._vueMove_);
           }
           function upHandle() {
@@ -4522,9 +4584,12 @@
     emits: ["update:modelValue"],
     setup(__props, { expose: __expose, emit: emitAct }) {
       const props = __props;
+      const bindName = vue.ref("body");
       const base = vue.ref();
       const pop = vue.ref();
       const showPop = vue.ref(false);
+      createAndAppendElementWithId("tdd-pop");
+      bindName.value = "#tdd-pop";
       const trueFlag = vue.computed(() => {
         if (showPop.value || props.trigger === "native" && props.modelValue) {
           vue.nextTick(() => {
@@ -4562,22 +4627,41 @@
         }
         return margin;
       });
+      const styleConditions = {
+        left: (placement) => ["topleft", "topmiddle", "topright", "bottomleft", "bottommiddle", "bottomright"].includes(placement) ? `${arrowLeft.value}px` : "centerright" == placement ? "-5px" : null,
+        right: (placement) => "centerleft" == placement ? "-5px" : null,
+        top: (placement, exChange2) => ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && !exChange2 ? "-5px" : ["topleft", "topmiddle", "topright"].includes(placement) && exChange2 ? "-5px" : ["centerright", "centerleft"].includes(placement) ? `${arrowTop.value}px` : null,
+        bottom: (placement, exChange2) => ["topleft", "topmiddle", "topright"].includes(placement) && !exChange2 ? "-5px" : ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && exChange2 ? "-5px" : null
+      };
       const arrowHandle = () => {
+        const resultStyles = {};
+        for (const styleName in styleConditions) {
+          const condition = styleConditions[styleName];
+          if (typeof condition === "function") {
+            resultStyles[styleName] = condition(props.placement, exChange.value);
+          } else if (condition) {
+            resultStyles[styleName] = condition;
+          }
+        }
+        const publicClass = "tdd-absolute tdd-z-1000 tdd-w-2.5 tdd-h-2.5 before:tdd-z-[-1] before:tdd-border before:tdd-border-gray-300 before:tdd-bg-white before:tdd-content-border before:tdd-rotate-45 before:tdd-content-[' '] before:tdd-w-2.5 before:tdd-h-2.5 before:tdd-absolute";
         return vue.h(
           "span",
           {
-            class: vue.normalizeClass([
-              "tdd-absolute tdd-z-1000 tdd-w-2.5 tdd-h-2.5 before:tdd-bg-white before:tdd-box-border before:tdd-rotate-45 before:tdd-content-[''] before:tdd-w-2.5 before:tdd-h-2.5 before:tdd-absolute",
-              ["topleft", "topmiddle", "topright"].includes(props.placement) ? "before:tdd-border-t-transparent before:tdd-border-l-transparent" : "",
-              ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) ? "before:tdd-border-b-transparent before:tdd-border-r-transparent" : "",
-              "centerright" == props.placement ? "before:tdd-border-r-transparent before:tdd-border-t-transparent" : "",
-              "centerleft" == props.placement ? "before:tdd-border-l-transparent before:tdd-border-b-transparent" : "",
-              props.beforebgcolor
-            ]),
-            style: {
-              left: `${arrowLeft.value}px`,
-              top: `${arrowTop.value}px`
-            }
+            class: vue.normalizeClass(
+              [
+                publicClass,
+                ["topleft", "topmiddle", "topright"].includes(props.placement) && !exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
+                ["topleft", "topmiddle", "topright"].includes(props.placement) && exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
+                ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && !exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
+                ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
+                "centerright" == props.placement ? "before:tdd-border-r-transparent before:tdd-border-t-transparent before:tdd-rounded-bl" : "",
+                "centerleft" == props.placement ? "before:tdd-border-l-transparent before:tdd-border-b-transparent before:tdd-rounded-tr" : "",
+                props.beforebgcolor
+              ]
+            ),
+            style: vue.normalizeStyle(
+              resultStyles
+            )
           }
         );
       };
@@ -4593,12 +4677,8 @@
       const Top = vue.ref(0);
       const arrowLeft = vue.ref(0);
       const arrowTop = vue.ref(0);
+      const exChange = vue.ref(false);
       const setPosition = () => {
-        if (!pop.value) {
-          window.removeEventListener("resize", setPosition);
-          window.removeEventListener("scroll", setPosition, true);
-          return;
-        }
         const { top, bottom } = base.value.getBoundingClientRect();
         if (top < 0 || bottom > window.innerHeight) {
           if (props.trigger === "native") {
@@ -4608,8 +4688,6 @@
           }
           return;
         }
-        window.addEventListener("resize", setPosition);
-        window.addEventListener("scroll", setPosition, true);
         const position = usePotion(base.value, pop.value, {
           position: props.placement
         });
@@ -4617,23 +4695,25 @@
         Left.value = position.Left;
         arrowTop.value = position.arrowTop;
         arrowLeft.value = position.arrowLeft;
+        exChange.value = position.exChange;
+        window.addEventListener("resize", setPosition);
+        window.addEventListener("scroll", setPosition, true);
       };
       const vClickoutside = {
         mounted(el, binding) {
-          if (!(el instanceof HTMLElement)) {
-            console.error("el must be an instance of HTMLElement");
-            return;
-          }
           function documentHandler(e) {
-            if ((el == null ? void 0 : el.contains) && (el == null ? void 0 : el.contains(e.target))) {
+            var _a;
+            if (trueFlag.value == false)
+              return;
+            if (el.contains(e.target)) {
               return false;
-            } else if (base.value.contains(e.target)) {
+            } else if ((_a = base.value) == null ? void 0 : _a.contains(e.target)) {
               return false;
             } else {
               binding.value && binding.value(e);
             }
           }
-          el._vueClickOutside_ = throttle(documentHandler, 100);
+          el._vueClickOutside_ = debounce(documentHandler, 80);
           document.addEventListener("click", el._vueClickOutside_);
           switch (props.trigger) {
             case "hover":
@@ -4642,10 +4722,6 @@
           }
         },
         beforeUnmount(el) {
-          if (!(el instanceof HTMLElement)) {
-            console.error("el must be an instance of HTMLElement");
-            return;
-          }
           document.removeEventListener("click", el._vueClickOutside_);
           switch (props.trigger) {
             case "hover":
@@ -4656,6 +4732,7 @@
         }
       };
       const closeCenter = () => {
+        console.log(1111);
         if (props.beforeHidden) {
           props.beforeHidden(hideHandle);
         } else {
@@ -4706,37 +4783,15 @@
         }, [
           vue.renderSlot(_ctx.$slots, "reference"),
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
-            to: "body",
+            to: bindName.value,
             disabled: !trueFlag.value
           }, [
-            _ctx.vIF ? (vue.openBlock(), vue.createBlock(vue.Transition, {
-              key: 0,
-              name: "opecity"
-            }, {
-              default: vue.withCtx(() => [
-                trueFlag.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-                  key: 0,
-                  ref_key: "pop",
-                  ref: pop,
-                  class: vue.normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow", [marginClass.value, _ctx.insertClass]]),
-                  style: vue.normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
-                }, [
-                  vue.renderSlot(_ctx.$slots, "default"),
-                  vue.createVNode(arrowHandle)
-                ], 6)), [
-                  [vClickoutside, closeCenter]
-                ]) : vue.createCommentVNode("", true)
-              ]),
-              _: 3
-            })) : (vue.openBlock(), vue.createBlock(vue.Transition, {
-              key: 1,
-              name: "opecity"
-            }, {
+            vue.createVNode(vue.Transition, { name: "opecity" }, {
               default: vue.withCtx(() => [
                 vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
                   ref_key: "pop",
                   ref: pop,
-                  class: vue.normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow", [marginClass.value, _ctx.insertClass]]),
+                  class: vue.normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow tdd-border tdd-border-gray-300 tdd-box-border", [marginClass.value, _ctx.insertClass]]),
                   style: vue.normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
                 }, [
                   vue.renderSlot(_ctx.$slots, "default"),
@@ -4747,8 +4802,8 @@
                 ])
               ]),
               _: 3
-            }))
-          ], 8, ["disabled"]))
+            })
+          ], 8, ["to", "disabled"]))
         ], 40, _hoisted_1$7);
       };
     }

package/dist/js/image/image.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, createCommentVNode, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, withModifiers, normalizeStyle, normalizeClass, nextTick } from "vue";
-import { t as throttle } from "../index/index.js";
+import { d as debounce } from "../index/index.js";
 const _hoisted_1 = { class: "tdd-relative tdd-inline-block tdd-h-full tdd-w-full" };
 const _hoisted_2 = ["src"];
 const _hoisted_3 = /* @__PURE__ */ createElementVNode("svg", {
@@ -109,7 +109,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           mouseX = e.pageX;
           mouseY = e.pageY;
           ImgIsMoving.value = true;
-          el._vueMove_ = throttle(setMoveHandle, 60);
+          el._vueMove_ = debounce(setMoveHandle, 60);
           window.addEventListener("mousemove", el._vueMove_);
         }
         function upHandle() {

package/dist/js/index/index.js

@@ -535,32 +535,46 @@ const removeHandle = (el, root) => {
     el.removeChild(el.instance.$el);
   }
 };
-const throttle = (fn, delay) => {
-  let flag = true;
+function debounce(func, wait) {
+  let timeout;
   return function() {
-    if (flag) {
-      setTimeout(() => {
-        fn.apply(this, arguments);
-        flag = true;
-      }, delay);
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(function() {
+      func.apply(context, args);
+    }, wait);
+  };
+}
+function throttle(func, wait) {
+  let timeout;
+  return function() {
+    const context = this;
+    const args = arguments;
+    if (!timeout) {
+      timeout = setTimeout(function() {
+        timeout = null;
+        func.apply(context, args);
+      }, wait);
     }
-    flag = false;
   };
-};
+}
 const usePotion = (baseDom, aimDom, set) => {
   let left = 0;
   let top = 0;
   let arrowleft = 0;
   let arrowtop = 0;
+  let exchange = false;
   if (!baseDom || !aimDom) {
     return {
       Top: top,
       Left: left,
       arrowLeft: arrowleft,
-      arrowTop: arrowtop
+      arrowTop: arrowtop,
+      exChange: exchange
     };
   }
-  const { left: baseLeft, right, bottom, top: baseTop, width: baseWidth } = baseDom.getBoundingClientRect();
+  const { left: baseLeft, right, bottom, top: baseTop, width: baseWidth, height: baseHeight } = baseDom.getBoundingClientRect();
   const { height: aimHeight, width: aimWidth } = aimDom.getBoundingClientRect();
   const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
   const scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -569,13 +583,11 @@ const usePotion = (baseDom, aimDom, set) => {
     case "bottommiddle":
     case "bottomright":
       top = scrollTop + bottom;
-      arrowtop = -5;
       break;
     case "topleft":
     case "topmiddle":
     case "topright":
       top = scrollTop + baseTop - aimHeight;
-      arrowtop = aimHeight - 5;
       break;
     case "centerleft":
     case "centerright":
@@ -608,20 +620,42 @@ const usePotion = (baseDom, aimDom, set) => {
       arrowleft = -5;
       break;
   }
-  if (top + aimHeight > window.innerHeight) {
-    top = scrollTop + window.innerHeight - aimHeight - 10;
+  if (top + aimHeight + 10 > window.innerHeight) {
+    switch (set == null ? void 0 : set.position) {
+      case "bottommiddle":
+      case "bottomleft":
+      case "bottomright":
+        exchange = true;
+        top = scrollTop + baseTop - aimHeight - 24;
+        break;
+      case "centerleft":
+      case "centerright":
+        top = scrollTop + window.innerHeight - aimHeight - 10;
+        arrowtop = baseTop + baseHeight / 2 - 10;
+        break;
+    }
   }
   if (top < 0) {
-    top = 10;
-  }
-  if (left + aimWidth > window.innerWidth) {
-    left = scrollLeft + right - aimWidth;
+    switch (set == null ? void 0 : set.position) {
+      case "topmiddle":
+      case "topleft":
+      case "topright":
+        exchange = true;
+        top = scrollTop + bottom + 24;
+        break;
+      case "centerleft":
+      case "centerright":
+        top = 10;
+        arrowtop = baseTop + baseHeight / 2 - 10;
+        break;
+    }
   }
   return {
     Top: top,
     Left: left,
     arrowLeft: arrowleft,
-    arrowTop: arrowtop
+    arrowTop: arrowtop,
+    exChange: exchange
   };
 };
 function getNewArray(array, subGroupLength) {
@@ -691,6 +725,13 @@ const off = function() {
     }
   };
 }();
+function createAndAppendElementWithId(id) {
+  if (!document.getElementById(id)) {
+    const element = document.createElement("div");
+    element.id = id;
+    document.body.appendChild(element);
+  }
+}
 const scrolllead = {
   beforeMount(el, binding) {
     function scrollhandle(e) {
@@ -784,45 +825,46 @@ const index = {
   }
 };
 export {
-  LibCheckGroup as A,
-  LibCheckBox as B,
-  LibUpload as C,
-  LibTabs as D,
-  LibTabsPane as E,
-  LibScrollBar as F,
-  AlertCom as G,
-  LibLoad as H,
-  scrolllead as I,
-  LibCarousel as J,
-  LibCarouselItem as K,
+  LibRadioGroup as A,
+  LibCheckGroup as B,
+  LibCheckBox as C,
+  LibUpload as D,
+  LibTabs as E,
+  LibTabsPane as F,
+  LibScrollBar as G,
+  AlertCom as H,
+  LibLoad as I,
+  scrolllead as J,
+  LibCarousel as K,
   LibDialog as L,
   MessageCom as M,
-  LibSwitch as N,
-  LibTree as O,
+  LibCarouselItem as N,
+  LibSwitch as O,
+  LibTree as P,
   off as a,
   getScrollWidth as b,
-  addResizeListener as c,
-  LibForm as d,
-  LibFormLabel as e,
-  LibInput as f,
+  createAndAppendElementWithId as c,
+  debounce as d,
+  addResizeListener as e,
+  LibForm as f,
   getNewArray as g,
-  LibSelect as h,
+  LibFormLabel as h,
   index as i,
-  LibSelectOption as j,
-  LibTable as k,
-  LibTableItem as l,
-  LibImage as m,
-  LibDatePicker as n,
+  LibInput as j,
+  LibSelect as k,
+  LibSelectOption as l,
+  LibTable as m,
+  LibTableItem as n,
   on as o,
-  LibDatePickerRange as p,
-  LibMenu as q,
+  LibImage as p,
+  LibDatePicker as q,
   removeResizeListener as r,
-  LibPagination as s,
-  throttle as t,
+  LibDatePickerRange as s,
+  LibMenu as t,
   usePotion as u,
-  LibBadge as v,
-  LibPopover as w,
-  LibNumberInput as x,
-  LibRadioBox as y,
-  LibRadioGroup as z
+  LibPagination as v,
+  LibBadge as w,
+  LibPopover as x,
+  LibNumberInput as y,
+  LibRadioBox as z
 };

package/dist/js/popover/popover.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, nextTick, onUnmounted, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createVNode, createCommentVNode, vShow, h } from "vue";
-import { u as usePotion, t as throttle } from "../index/index.js";
+import { defineComponent, ref, computed, nextTick, onUnmounted, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, vShow, h } from "vue";
+import { c as createAndAppendElementWithId, u as usePotion, d as debounce } from "../index/index.js";
 const _hoisted_1 = ["onMouseenter"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "popover",
@@ -16,9 +16,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: emitAct }) {
     const props = __props;
+    const bindName = ref("body");
     const base = ref();
     const pop = ref();
     const showPop = ref(false);
+    createAndAppendElementWithId("tdd-pop");
+    bindName.value = "#tdd-pop";
     const trueFlag = computed(() => {
       if (showPop.value || props.trigger === "native" && props.modelValue) {
         nextTick(() => {
@@ -56,22 +59,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return margin;
     });
+    const styleConditions = {
+      left: (placement) => ["topleft", "topmiddle", "topright", "bottomleft", "bottommiddle", "bottomright"].includes(placement) ? `${arrowLeft.value}px` : "centerright" == placement ? "-5px" : null,
+      right: (placement) => "centerleft" == placement ? "-5px" : null,
+      top: (placement, exChange2) => ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && !exChange2 ? "-5px" : ["topleft", "topmiddle", "topright"].includes(placement) && exChange2 ? "-5px" : ["centerright", "centerleft"].includes(placement) ? `${arrowTop.value}px` : null,
+      bottom: (placement, exChange2) => ["topleft", "topmiddle", "topright"].includes(placement) && !exChange2 ? "-5px" : ["bottomleft", "bottommiddle", "bottomright"].includes(placement) && exChange2 ? "-5px" : null
+    };
     const arrowHandle = () => {
+      const resultStyles = {};
+      for (const styleName in styleConditions) {
+        const condition = styleConditions[styleName];
+        if (typeof condition === "function") {
+          resultStyles[styleName] = condition(props.placement, exChange.value);
+        } else if (condition) {
+          resultStyles[styleName] = condition;
+        }
+      }
+      const publicClass = "tdd-absolute tdd-z-1000 tdd-w-2.5 tdd-h-2.5 before:tdd-z-[-1] before:tdd-border before:tdd-border-gray-300 before:tdd-bg-white before:tdd-content-border before:tdd-rotate-45 before:tdd-content-[' '] before:tdd-w-2.5 before:tdd-h-2.5 before:tdd-absolute";
       return h(
         "span",
         {
-          class: normalizeClass([
-            "tdd-absolute tdd-z-1000 tdd-w-2.5 tdd-h-2.5 before:tdd-bg-white before:tdd-box-border before:tdd-rotate-45 before:tdd-content-[''] before:tdd-w-2.5 before:tdd-h-2.5 before:tdd-absolute",
-            ["topleft", "topmiddle", "topright"].includes(props.placement) ? "before:tdd-border-t-transparent before:tdd-border-l-transparent" : "",
-            ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) ? "before:tdd-border-b-transparent before:tdd-border-r-transparent" : "",
-            "centerright" == props.placement ? "before:tdd-border-r-transparent before:tdd-border-t-transparent" : "",
-            "centerleft" == props.placement ? "before:tdd-border-l-transparent before:tdd-border-b-transparent" : "",
-            props.beforebgcolor
-          ]),
-          style: {
-            left: `${arrowLeft.value}px`,
-            top: `${arrowTop.value}px`
-          }
+          class: normalizeClass(
+            [
+              publicClass,
+              ["topleft", "topmiddle", "topright"].includes(props.placement) && !exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
+              ["topleft", "topmiddle", "topright"].includes(props.placement) && exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
+              ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && !exChange.value ? "before:tdd-border-b-transparent before:tdd-border-r-transparent before:tdd-rounded-tl" : "",
+              ["bottomleft", "bottommiddle", "bottomright"].includes(props.placement) && exChange.value ? "before:tdd-border-t-transparent before:tdd-border-l-transparent before:tdd-rounded-br" : "",
+              "centerright" == props.placement ? "before:tdd-border-r-transparent before:tdd-border-t-transparent before:tdd-rounded-bl" : "",
+              "centerleft" == props.placement ? "before:tdd-border-l-transparent before:tdd-border-b-transparent before:tdd-rounded-tr" : "",
+              props.beforebgcolor
+            ]
+          ),
+          style: normalizeStyle(
+            resultStyles
+          )
         }
       );
     };
@@ -87,12 +109,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const Top = ref(0);
     const arrowLeft = ref(0);
     const arrowTop = ref(0);
+    const exChange = ref(false);
     const setPosition = () => {
-      if (!pop.value) {
-        window.removeEventListener("resize", setPosition);
-        window.removeEventListener("scroll", setPosition, true);
-        return;
-      }
       const { top, bottom } = base.value.getBoundingClientRect();
       if (top < 0 || bottom > window.innerHeight) {
         if (props.trigger === "native") {
@@ -102,8 +120,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
         return;
       }
-      window.addEventListener("resize", setPosition);
-      window.addEventListener("scroll", setPosition, true);
       const position = usePotion(base.value, pop.value, {
         position: props.placement
       });
@@ -111,23 +127,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       Left.value = position.Left;
       arrowTop.value = position.arrowTop;
       arrowLeft.value = position.arrowLeft;
+      exChange.value = position.exChange;
+      window.addEventListener("resize", setPosition);
+      window.addEventListener("scroll", setPosition, true);
     };
     const vClickoutside = {
       mounted(el, binding) {
-        if (!(el instanceof HTMLElement)) {
-          console.error("el must be an instance of HTMLElement");
-          return;
-        }
         function documentHandler(e) {
-          if ((el == null ? void 0 : el.contains) && (el == null ? void 0 : el.contains(e.target))) {
+          var _a;
+          if (trueFlag.value == false)
+            return;
+          if (el.contains(e.target)) {
             return false;
-          } else if (base.value.contains(e.target)) {
+          } else if ((_a = base.value) == null ? void 0 : _a.contains(e.target)) {
             return false;
           } else {
             binding.value && binding.value(e);
           }
         }
-        el._vueClickOutside_ = throttle(documentHandler, 100);
+        el._vueClickOutside_ = debounce(documentHandler, 80);
         document.addEventListener("click", el._vueClickOutside_);
         switch (props.trigger) {
           case "hover":
@@ -136,10 +154,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       },
       beforeUnmount(el) {
-        if (!(el instanceof HTMLElement)) {
-          console.error("el must be an instance of HTMLElement");
-          return;
-        }
         document.removeEventListener("click", el._vueClickOutside_);
         switch (props.trigger) {
           case "hover":
@@ -150,6 +164,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const closeCenter = () => {
+      console.log(1111);
       if (props.beforeHidden) {
         props.beforeHidden(hideHandle);
       } else {
@@ -200,37 +215,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, [
         renderSlot(_ctx.$slots, "reference"),
         (openBlock(), createBlock(Teleport, {
-          to: "body",
+          to: bindName.value,
           disabled: !trueFlag.value
         }, [
-          _ctx.vIF ? (openBlock(), createBlock(Transition, {
-            key: 0,
-            name: "opecity"
-          }, {
-            default: withCtx(() => [
-              trueFlag.value ? withDirectives((openBlock(), createElementBlock("div", {
-                key: 0,
-                ref_key: "pop",
-                ref: pop,
-                class: normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow", [marginClass.value, _ctx.insertClass]]),
-                style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
-              }, [
-                renderSlot(_ctx.$slots, "default"),
-                createVNode(arrowHandle)
-              ], 6)), [
-                [vClickoutside, closeCenter]
-              ]) : createCommentVNode("", true)
-            ]),
-            _: 3
-          })) : (openBlock(), createBlock(Transition, {
-            key: 1,
-            name: "opecity"
-          }, {
+          createVNode(Transition, { name: "opecity" }, {
             default: withCtx(() => [
               withDirectives((openBlock(), createElementBlock("div", {
                 ref_key: "pop",
                 ref: pop,
-                class: normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow", [marginClass.value, _ctx.insertClass]]),
+                class: normalizeClass(["tdd-absolute tdd-z-1000 tdd-rounded tdd-bg-white tdd-p-4 tdd-drop-shadow tdd-border tdd-border-gray-300 tdd-box-border", [marginClass.value, _ctx.insertClass]]),
                 style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
               }, [
                 renderSlot(_ctx.$slots, "default"),
@@ -241,8 +234,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ]),
             _: 3
-          }))
-        ], 8, ["disabled"]))
+          })
+        ], 8, ["to", "disabled"]))
       ], 40, _hoisted_1);
     };
   }

package/dist/js/scrollBar/scrollBar.js

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, onMounted, nextTick, onUnmounted, renderSlot, createVNode } from "vue";
-import { o as on, a as off, b as getScrollWidth, c as addResizeListener, r as removeResizeListener } from "../index/index.js";
+import { o as on, a as off, b as getScrollWidth, e as addResizeListener, r as removeResizeListener } from "../index/index.js";
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "movebar",
   props: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninemoon-ui",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "author": "zhuboy",
   "keywords": [
     "vue3",