ninemoon-ui 0.0.9 → 0.0.11

package/dist/index.umd.js

@@ -140,6 +140,12 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
 }
+.-tdd-ml-3 {
+    margin-left: -0.75rem;
+}
+.-tdd-mt-3 {
+    margin-top: -0.75rem;
+}
 .tdd-mb-5 {
     margin-bottom: 1.25rem;
 }
@@ -149,6 +155,9 @@
 .tdd-ml-2 {
     margin-left: 0.5rem;
 }
+.tdd-ml-3 {
+    margin-left: 0.75rem;
+}
 .tdd-mr-1 {
     margin-right: 0.25rem;
 }
@@ -200,6 +209,12 @@
 .tdd-h-10 {
     height: 2.5rem;
 }
+.tdd-h-2 {
+    height: 0.5rem;
+}
+.tdd-h-2\\.5 {
+    height: 0.625rem;
+}
 .tdd-h-3 {
     height: 0.75rem;
 }
@@ -239,6 +254,12 @@
 .tdd-w-14 {
     width: 3.5rem;
 }
+.tdd-w-2 {
+    width: 0.5rem;
+}
+.tdd-w-2\\.5 {
+    width: 0.625rem;
+}
 .tdd-w-24 {
     width: 6rem;
 }
@@ -787,6 +808,60 @@
     background-position: 50%;
     background-repeat: no-repeat;
   }
+  .before\\:tdd-absolute::before {
+    content: var(--tw-content);
+    position: absolute;
+}
+  .before\\:tdd-box-border::before {
+    content: var(--tw-content);
+    box-sizing: border-box;
+}
+  .before\\:tdd-h-2::before {
+    content: var(--tw-content);
+    height: 0.5rem;
+}
+  .before\\:tdd-h-2\\.5::before {
+    content: var(--tw-content);
+    height: 0.625rem;
+}
+  .before\\:tdd-w-2::before {
+    content: var(--tw-content);
+    width: 0.5rem;
+}
+  .before\\:tdd-w-2\\.5::before {
+    content: var(--tw-content);
+    width: 0.625rem;
+}
+  .before\\:tdd-rotate-45::before {
+    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-border-b-transparent::before {
+    content: var(--tw-content);
+    border-bottom-color: transparent;
+}
+  .before\\:tdd-border-l-transparent::before {
+    content: var(--tw-content);
+    border-left-color: transparent;
+}
+  .before\\:tdd-border-r-transparent::before {
+    content: var(--tw-content);
+    border-right-color: transparent;
+}
+  .before\\:tdd-border-t-transparent::before {
+    content: var(--tw-content);
+    border-top-color: transparent;
+}
+  .before\\:tdd-bg-white::before {
+    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;
 }
@@ -1180,13 +1255,9 @@
     class: "tdd-h-4 tdd-w-4 tdd-fill-white",
     viewBox: "0 0 1024 1024",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "2124"
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_4$b = /* @__PURE__ */ vue.createElementVNode("path", {
-    d: "M883.2 247.466667c-17.066667-17.066667-44.8-17.066667-59.733333 0L409.6 665.6l-209.066667-204.8c-17.066667-17.066667-44.8-17.066667-59.733333 0-17.066667 17.066667-17.066667 44.8 0 59.733333l238.933333 234.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8 10.666667 0 21.333333-4.266667 29.866667-12.8l443.733333-448c17.066667-17.066667 17.066667-42.666667 0-59.733333z",
-    "p-id": "2125"
-  }, null, -1);
+  const _hoisted_4$b = /* @__PURE__ */ vue.createElementVNode("path", { d: "M883.2 247.466667c-17.066667-17.066667-44.8-17.066667-59.733333 0L409.6 665.6l-209.066667-204.8c-17.066667-17.066667-44.8-17.066667-59.733333 0-17.066667 17.066667-17.066667 44.8 0 59.733333l238.933333 234.666667c8.533333 8.533333 19.2 12.8 29.866667 12.8 10.666667 0 21.333333-4.266667 29.866667-12.8l443.733333-448c17.066667-17.066667 17.066667-42.666667 0-59.733333z" }, null, -1);
   const _hoisted_5$7 = [
     _hoisted_4$b
   ];
@@ -1195,13 +1266,9 @@
     class: "tdd-h-4 tdd-w-4 tdd-fill-white",
     viewBox: "0 0 1024 1024",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "762"
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_7$6 = /* @__PURE__ */ vue.createElementVNode("path", {
-    d: "M556.8 512L832 236.8c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L512 467.2l-275.2-277.333333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l275.2 277.333333-277.333333 275.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333L512 556.8 787.2 832c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466666-8.533333c12.8-12.8 12.8-32 0-44.8L556.8 512z",
-    "p-id": "763"
-  }, null, -1);
+  const _hoisted_7$6 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M556.8 512L832 236.8c12.8-12.8 12.8-32 0-44.8-12.8-12.8-32-12.8-44.8 0L512 467.2l-275.2-277.333333c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l275.2 277.333333-277.333333 275.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.933333 8.533333 23.466666 8.533333s17.066667-2.133333 23.466667-8.533333L512 556.8 787.2 832c6.4 6.4 14.933333 8.533333 23.466667 8.533333s17.066667-2.133333 23.466666-8.533333c12.8-12.8 12.8-32 0-44.8L556.8 512z" }, null, -1);
   const _hoisted_8$5 = [
     _hoisted_7$6
   ];
@@ -1210,17 +1277,10 @@
     class: "tdd-h-4 tdd-w-4 tdd-fill-white",
     viewBox: "0 0 1024 1024",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "1618"
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_10$4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    d: "M512 320m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z",
-    "p-id": "1620"
-  }, null, -1);
-  const _hoisted_11$4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    d: "M512 437.333333c-17.066667 0-32 14.933333-32 32v234.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V469.333333c0-17.066667-14.933333-32-32-32z",
-    "p-id": "1621"
-  }, null, -1);
+  const _hoisted_10$4 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M512 320m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" }, null, -1);
+  const _hoisted_11$4 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M512 437.333333c-17.066667 0-32 14.933333-32 32v234.666667c0 17.066667 14.933333 32 32 32s32-14.933333 32-32V469.333333c0-17.066667-14.933333-32-32-32z" }, null, -1);
   const _hoisted_12$4 = [
     _hoisted_10$4,
     _hoisted_11$4
@@ -1230,19 +1290,14 @@
     class: "tdd-h-4 tdd-w-4 tdd-fill-white",
     viewBox: "0 0 1024 1024",
     version: "1.1",
-    xmlns: "http://www.w3.org/2000/svg",
-    "p-id": "1487"
+    xmlns: "http://www.w3.org/2000/svg"
   };
-  const _hoisted_14$4 = /* @__PURE__ */ vue.createElementVNode("path", {
-    d: "M800 625.066667V448c0-117.333333-70.4-217.6-170.666667-262.4-4.266667-61.866667-55.466667-110.933333-117.333333-110.933333s-113.066667 49.066667-117.333333 110.933333c-100.266667 44.8-170.666667 145.066667-170.666667 262.4v177.066667c-57.6 46.933333-85.333333 110.933333-85.333333 185.6 0 17.066667 14.933333 32 32 32h206.933333c14.933333 61.866667 70.4 106.666667 134.4 106.666666s119.466667-44.8 134.4-106.666666H853.333333c17.066667 0 32-14.933333 32-32 0-76.8-27.733333-138.666667-85.333333-185.6zM512 138.666667c19.2 0 36.266667 10.666667 44.8 25.6-14.933333-2.133333-29.866667-4.266667-44.8-4.266667-14.933333 0-29.866667 2.133333-44.8 4.266667 8.533333-14.933333 25.6-25.6 44.8-25.6z m0 746.666666c-29.866667 0-55.466667-17.066667-66.133333-42.666666h134.4c-12.8 25.6-38.4 42.666667-68.266667 42.666666z m-307.2-106.666666c6.4-46.933333 29.866667-83.2 70.4-113.066667 8.533333-6.4 12.8-14.933333 12.8-25.6v-192c0-123.733333 100.266667-224 224-224S736 324.266667 736 448v192c0 10.666667 4.266667 19.2 12.8 25.6 40.533333 29.866667 64 66.133333 70.4 113.066667H204.8z",
-    "p-id": "1488"
-  }, null, -1);
+  const _hoisted_14$4 = /* @__PURE__ */ vue.createElementVNode("path", { d: "M800 625.066667V448c0-117.333333-70.4-217.6-170.666667-262.4-4.266667-61.866667-55.466667-110.933333-117.333333-110.933333s-113.066667 49.066667-117.333333 110.933333c-100.266667 44.8-170.666667 145.066667-170.666667 262.4v177.066667c-57.6 46.933333-85.333333 110.933333-85.333333 185.6 0 17.066667 14.933333 32 32 32h206.933333c14.933333 61.866667 70.4 106.666667 134.4 106.666666s119.466667-44.8 134.4-106.666666H853.333333c17.066667 0 32-14.933333 32-32 0-76.8-27.733333-138.666667-85.333333-185.6zM512 138.666667c19.2 0 36.266667 10.666667 44.8 25.6-14.933333-2.133333-29.866667-4.266667-44.8-4.266667-14.933333 0-29.866667 2.133333-44.8 4.266667 8.533333-14.933333 25.6-25.6 44.8-25.6z m0 746.666666c-29.866667 0-55.466667-17.066667-66.133333-42.666666h134.4c-12.8 25.6-38.4 42.666667-68.266667 42.666666z m-307.2-106.666666c6.4-46.933333 29.866667-83.2 70.4-113.066667 8.533333-6.4 12.8-14.933333 12.8-25.6v-192c0-123.733333 100.266667-224 224-224S736 324.266667 736 448v192c0 10.666667 4.266667 19.2 12.8 25.6 40.533333 29.866667 64 66.133333 70.4 113.066667H204.8z" }, null, -1);
   const _hoisted_15$4 = [
     _hoisted_14$4
   ];
-  const _hoisted_16$4 = { key: 0 };
-  const _hoisted_17$3 = ["onClick"];
-  const _hoisted_18$2 = /* @__PURE__ */ vue.createElementVNode("svg", {
+  const _hoisted_16$4 = ["onClick"];
+  const _hoisted_17$3 = /* @__PURE__ */ vue.createElementVNode("svg", {
     class: "tdd-h-5 tdd-w-5 tdd-fill-gray-600",
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
@@ -1259,8 +1314,8 @@
       })
     ])
   ], -1);
-  const _hoisted_19$2 = [
-    _hoisted_18$2
+  const _hoisted_18$2 = [
+    _hoisted_17$3
   ];
   const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "messagecomponent",
@@ -1348,6 +1403,25 @@
         },
         { deep: true }
       );
+      const contentRender = (props) => {
+        if (Array.isArray(props.c.vnode)) {
+          return props.c.vnode.map((v) => {
+            return vue.createBlock(
+              vue.resolveDynamicComponent(v)
+            );
+          });
+        } else if (props.c.vnode) {
+          return vue.createBlock(
+            vue.resolveDynamicComponent(props.c.vnode)
+          );
+        } else {
+          return vue.h(
+            "div",
+            {},
+            props.c.text
+          );
+        }
+      };
       vue.onUnmounted(() => {
         messageList.value.length = 0;
       });
@@ -1382,16 +1456,13 @@
                         i.type === "warning" ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_9$4, _hoisted_12$4)) : vue.createCommentVNode("", true),
                         i.type === "info" ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_13$4, _hoisted_15$4)) : vue.createCommentVNode("", true)
                       ], 2),
-                      !i.vnode ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$4, vue.toDisplayString(i.text), 1)) : vue.createCommentVNode("", true),
-                      i.vnode instanceof Array ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(i.vnode, (j) => {
-                        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(j));
-                      }), 256)) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(i.vnode), { key: 2 })),
+                      vue.createVNode(contentRender, { c: i }, null, 8, ["c"]),
                       i.showClose ? (vue.openBlock(), vue.createElementBlock("button", {
-                        key: 3,
+                        key: 0,
                         type: "button",
                         class: "tdd-appearance-none",
                         onClick: ($event) => hidden(d)
-                      }, _hoisted_19$2, 8, _hoisted_17$3)) : vue.createCommentVNode("", true)
+                      }, _hoisted_18$2, 8, _hoisted_16$4)) : vue.createCommentVNode("", true)
                     ])
                   ]);
                 }), 128))
@@ -1726,49 +1797,80 @@
     };
   };
   const usePotion = (baseDom, aimDom, set) => {
-    let Left = 0;
-    let Top = 0;
-    let Width = 0;
-    let Height = 0;
-    const height = aimDom.clientHeight;
-    const width = aimDom.clientWidth;
-    const { left, right, bottom, top } = baseDom.getBoundingClientRect();
+    let left = 0;
+    let top = 0;
+    let arrowleft = 0;
+    let arrowtop = 0;
+    if (!baseDom || !aimDom) {
+      return {
+        Top: top,
+        Left: left,
+        arrowLeft: arrowleft,
+        arrowTop: arrowtop
+      };
+    }
+    const { left: baseLeft, right, bottom, top: baseTop, width: baseWidth } = 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;
-    Left = scrollLeft + left;
-    if (set == null ? void 0 : set.position.includes("bottom")) {
-      Top = scrollTop + bottom;
+    switch (set == null ? void 0 : set.position) {
+      case "bottomleft":
+      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":
+        top = scrollTop + baseTop + (bottom - baseTop - aimHeight) / 2;
+        arrowtop = aimHeight / 2 - 5;
+        break;
     }
-    if (set == null ? void 0 : set.position.includes("top")) {
-      Top = scrollTop + top - height;
-    }
-    if (set == null ? void 0 : set.position.includes("middle")) {
-      Left = scrollLeft + left + (right - left - width) / 2;
-    }
-    if (set == null ? void 0 : set.position.includes("center")) {
-      Top = scrollTop + top + (bottom - top) / 2 - height / 2;
-      if (set.position === "centerleft") {
-        Left = scrollLeft + left - width;
-      } else {
-        Left = scrollLeft + right;
-      }
+    switch (set == null ? void 0 : set.position) {
+      case "topleft":
+      case "bottomleft":
+        left = scrollLeft + baseLeft;
+        arrowleft = (right - baseLeft) / 2;
+        break;
+      case "topmiddle":
+      case "bottommiddle":
+        left = scrollLeft + baseLeft + (right - baseLeft - aimWidth) / 2;
+        arrowleft = aimWidth / 2 - 5;
+        break;
+      case "topright":
+      case "bottomright":
+        left = scrollLeft + right - aimWidth;
+        arrowleft = aimWidth - baseWidth + baseWidth / 2 - 5;
+        break;
+      case "centerleft":
+        left = scrollLeft + baseLeft - aimWidth;
+        arrowleft = aimWidth - 5;
+        break;
+      case "centerright":
+        left = scrollLeft + right;
+        arrowleft = -5;
+        break;
     }
-    if (Top + height > window.innerHeight) {
-      Top = scrollTop + window.innerHeight - height - 10;
+    if (top + aimHeight > window.innerHeight) {
+      top = scrollTop + window.innerHeight - aimHeight - 10;
     }
-    if (Top < 0) {
-      Top = 10;
+    if (top < 0) {
+      top = 10;
     }
-    if (Left + width > window.innerWidth) {
-      Left = scrollLeft + right - width;
+    if (left + aimWidth > window.innerWidth) {
+      left = scrollLeft + right - aimWidth;
     }
-    Width = width;
-    Height = height;
     return {
-      Top,
-      Left,
-      Width,
-      Height
+      Top: top,
+      Left: left,
+      arrowLeft: arrowleft,
+      arrowTop: arrowtop
     };
   };
   function getNewArray(array, subGroupLength) {
@@ -2095,14 +2197,14 @@
       };
       const validate = async (callBack) => {
         let passflag = true;
-        for (const rule of checkList.value) {
+        checkList.value.forEach(async (rule) => {
           await rule.fc((msg) => {
             if (msg !== null && msg !== void 0) {
               passflag = false;
               console.warn(msg);
             }
           });
-        }
+        });
         if (passflag === true) {
           callBack(passflag);
         }
@@ -2443,6 +2545,8 @@
         const isThis = optionList.value.filter((v) => v.value === props.modelValue);
         if (isThis.length > 0) {
           return isThis[0].label;
+        } else if (props.modelValue) {
+          return;
         } else {
           emit("update:modelValue", null);
           ParentGetChangeHandle && ParentGetChangeHandle(null);
@@ -2459,7 +2563,7 @@
         return vue.h(
           "div",
           {
-            class: `label ${props.modelValue === it.props.value ? "labelselect" : ""}`,
+            class: vue.normalizeClass(["label", [props.modelValue === it.props.value ? "labelselect" : ""]]),
             key: it.props.key,
             onClick: () => {
               emit("update:modelValue", it.props.value);
@@ -2477,7 +2581,7 @@
           {
             class: "selectOption"
           },
-          slots.default().map((i, j) => {
+          slots.default().map((i, _j) => {
             if (typeof i.children == "string")
               return null;
             if (Array.isArray(i.children)) {
@@ -2492,6 +2596,7 @@
       };
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createBlock(vue.unref(Pop), {
+          vIF: false,
           trigger: "native",
           modelValue: showOption.value,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showOption.value = $event),
@@ -2589,7 +2694,9 @@
       const renderHead = () => {
         return vue.h(
           "thead",
-          { class: props.headclass ? `tdd-text-word6 ${props.headclass}` : "tdd-text-word6" },
+          {
+            class: vue.normalizeClass(["tdd-text-word6", [props.headclass]])
+          },
           slots.default().map((it) => {
             if (typeof it.children == "string")
               return null;
@@ -2703,7 +2810,7 @@
         return vue.h(
           "td",
           {
-            class: props.cellclass ? `tdd-text-center tdd-py-2 ${props.cellclass}` : "tdd-text-center tdd-py-2"
+            class: vue.normalizeClass(["tdd-text-center tdd-py-2", [props.cellclass]])
           },
           ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? vue.h(
             "label",
@@ -4411,7 +4518,9 @@
       placement: { default: "topleft" },
       insertClass: {},
       beforeHidden: {},
-      modelValue: { type: Boolean }
+      modelValue: { type: Boolean },
+      beforebgcolor: {},
+      vIF: { type: Boolean, default: true }
     },
     emits: ["update:modelValue"],
     setup(__props, { expose: __expose, emit: emitAct }) {
@@ -4419,7 +4528,15 @@
       const base = vue.ref();
       const pop = vue.ref();
       const showPop = vue.ref(false);
-      const showPopFlag = vue.computed(() => {
+      const trueFlag = vue.computed(() => {
+        if (showPop.value || props.trigger === "native" && props.modelValue) {
+          vue.nextTick(() => {
+            setPosition();
+          });
+        } else {
+          window.removeEventListener("resize", setPosition);
+          window.removeEventListener("scroll", setPosition, true);
+        }
         if (props.trigger === "native") {
           return props.modelValue;
         } else {
@@ -4432,22 +4549,41 @@
           case "topleft":
           case "topmiddle":
           case "topright":
-            margin = "-mt-3";
+            margin = "-tdd-mt-3";
             break;
           case "bottomleft":
           case "bottommiddle":
           case "bottomright":
-            margin = "mt-3";
+            margin = "tdd-mt-3";
             break;
           case "centerleft":
-            margin = "-ml-3";
+            margin = "-tdd-ml-3";
             break;
           case "centerright":
-            margin = "ml-3";
+            margin = "tdd-ml-3";
             break;
         }
         return margin;
       });
+      const arrowHandle = () => {
+        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`
+            }
+          }
+        );
+      };
       const showHandle = () => {
         showPop.value = true;
       };
@@ -4458,37 +4594,39 @@
       };
       const Left = vue.ref(0);
       const Top = vue.ref(0);
-      vue.watch(showPopFlag, (n) => {
-        if (n === true) {
-          vue.nextTick(() => {
-            setPosition();
-            if (props.trigger === "hover")
-              return;
-            window.addEventListener("resize", setPosition);
-            window.addEventListener("scroll", setPosition, true);
-          });
-        }
-      });
+      const arrowLeft = vue.ref(0);
+      const arrowTop = vue.ref(0);
       const setPosition = () => {
-        let { top, bottom } = base.value.getBoundingClientRect();
+        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") {
             emitAct("update:modelValue", false);
           } else {
             showPop.value = false;
           }
-          window.removeEventListener("resize", setPosition);
-          window.removeEventListener("scroll", setPosition, true);
           return;
         }
+        window.addEventListener("resize", setPosition);
+        window.addEventListener("scroll", setPosition, true);
         const position = usePotion(base.value, pop.value, {
           position: props.placement
         });
         Top.value = position.Top;
         Left.value = position.Left;
+        arrowTop.value = position.arrowTop;
+        arrowLeft.value = position.arrowLeft;
       };
       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))) {
               return false;
@@ -4507,6 +4645,10 @@
           }
         },
         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":
@@ -4527,8 +4669,6 @@
         if (disablecancelflag === true) {
           return;
         } else {
-          window.removeEventListener("resize", setPosition);
-          window.removeEventListener("scroll", setPosition, true);
           if (props.trigger === "native") {
             emitAct("update:modelValue", false);
           } else {
@@ -4570,24 +4710,47 @@
           vue.renderSlot(_ctx.$slots, "reference"),
           (vue.openBlock(), vue.createBlock(vue.Teleport, {
             to: "body",
-            disabled: !showPopFlag.value
+            disabled: !trueFlag.value
           }, [
-            vue.createVNode(vue.Transition, { name: "opecity" }, {
+            _ctx.vIF ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+              key: 0,
+              name: "opecity"
+            }, {
               default: vue.withCtx(() => [
-                showPopFlag.value ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                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.renderSlot(_ctx.$slots, "default"),
+                  vue.createVNode(arrowHandle)
                 ], 6)), [
                   [vClickoutside, closeCenter]
                 ]) : vue.createCommentVNode("", true)
               ]),
               _: 3
-            })
+            })) : (vue.openBlock(), vue.createBlock(vue.Transition, {
+              key: 1,
+              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]]),
+                  style: vue.normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
+                }, [
+                  vue.renderSlot(_ctx.$slots, "default"),
+                  vue.createVNode(arrowHandle)
+                ], 6)), [
+                  [vue.vShow, trueFlag.value],
+                  [vClickoutside, closeCenter]
+                ])
+              ]),
+              _: 3
+            }))
           ], 8, ["disabled"]))
         ], 40, _hoisted_1$7);
       };
@@ -4743,7 +4906,7 @@
         return vue.h(
           "label",
           {
-            class: "radioGroup " + (((_a = MySlot.props) == null ? void 0 : _a.class) || "") + (props.modelValue == MySlot.props.label ? " tdd-bg-wordblue" : "")
+            class: vue.normalizeClass(["radioGroup", [(_a = MySlot.props) == null ? void 0 : _a.class, props.modelValue == MySlot.props.label ? "tdd-bg-wordblue" : ""]])
           },
           [
             vue.withDirectives(
@@ -4754,14 +4917,14 @@
                   ParentGetChangeHandle(value);
                   emit("update:modelValue", value);
                 },
-                class: "hiddeninput form-tick" + (props.showinput ? "" : " tdd-hidden")
+                class: vue.normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : "tdd-hidden"]])
               }),
               [[vue.vModelRadio, props.modelValue]]
             ),
             vue.h(
               "span",
               {
-                class: "tdd-text-sm " + (props.modelValue == MySlot.props.label ? " tdd-text-white" : " tdd-text-word6")
+                class: vue.normalizeClass(["tdd-text-sm", [props.modelValue == MySlot.props.label ? "tdd-text-white" : "tdd-text-word6"]])
               },
               ((_b = MySlot.children) == null ? void 0 : _b.default()) || MySlot.props.label
             )
@@ -4827,7 +4990,7 @@
         return vue.h(
           "label",
           {
-            class: "checkGroup " + (MySlot.props.class || "") + (props.modelValue.includes(MySlot.props.label) ? " tdd-bg-wordblue" : "")
+            class: vue.normalizeClass(["checkGroup", [MySlot.props.class, props.modelValue.includes(MySlot.props.label) ? "tdd-bg-wordblue" : ""]])
           },
           [
             vue.withDirectives(
@@ -4838,14 +5001,14 @@
                   ParentGetChangeHandle(value);
                   emit("update:modelValue", value);
                 },
-                class: "hiddeninput form-tick" + (props.showinput ? "" : " tdd-hidden")
+                class: vue.normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : "tdd-hidden"]])
               }),
               [[vue.vModelCheckbox, props.modelValue]]
             ),
             vue.h(
               "span",
               {
-                class: "tdd-text-sm " + (props.modelValue.includes(MySlot.props.label) ? " tdd-text-white" : " tdd-text-word6")
+                class: vue.normalizeClass(["tdd-text-sm", [props.modelValue.includes(MySlot.props.label) ? "tdd-text-white" : "tdd-text-word6"]])
               },
               ((_a = MySlot.children) == null ? void 0 : _a.default()) || MySlot.props.label
             )
@@ -5073,7 +5236,7 @@
           "button",
           {
             type: "button",
-            class: btc.join(" "),
+            class: vue.normalizeClass(btc),
             onClick: (e) => {
               activeIndex.value = index2;
               let aim = e.target;
@@ -5095,7 +5258,7 @@
         return vue.h(
           "div",
           {
-            class: `ETab${props.type === "line" ? " tdd-px-2 tdd-pt-2" : " ETab_Card"}`
+            class: vue.normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
           },
           slots.default().map((it, index2) => {
             if (typeof it.children == "string")
@@ -5152,27 +5315,24 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-          vue.createTextVNode(vue.toDisplayString(noactive.value) + " ", 1),
-          vue.createElementVNode("div", _hoisted_1$4, [
-            vue.createVNode(renderBar, {
-              ref_key: "btnBar",
-              ref: btnBar
-            }, null, 512),
-            showBaseline.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
-              vue.createElementVNode("div", {
-                class: "tdd-absolute tdd-bottom-0 tdd-border-t-2 tdd-border-solid tdd-border-blue-brand tdd-transition",
-                style: vue.normalizeStyle({
-                  transform: `translateX(${arrowNum.value}px`,
-                  width: `${arrowWidth.value}px`
-                })
-              }, null, 4)
-            ])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", _hoisted_3$3, [
-              vue.createVNode(renderContent)
-            ])
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, [
+          vue.createVNode(renderBar, {
+            ref_key: "btnBar",
+            ref: btnBar
+          }, null, 512),
+          showBaseline.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
+            vue.createElementVNode("div", {
+              class: "tdd-absolute tdd-bottom-0 tdd-border-t-2 tdd-border-solid tdd-border-blue-brand tdd-transition",
+              style: vue.normalizeStyle({
+                transform: `translateX(${arrowNum.value}px`,
+                width: `${arrowWidth.value}px`
+              })
+            }, null, 4)
+          ])) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_3$3, [
+            vue.createVNode(renderContent)
           ])
-        ], 64);
+        ]);
       };
     }
   });
@@ -5467,7 +5627,7 @@
         return vue.h(
           "div",
           {
-            class: "carouselBody " + (activeIndex.value === d ? "tdd-z-10" : "-tdd-z-10"),
+            class: vue.normalizeClass(["carouselBody", [activeIndex.value === d ? "tdd-z-10" : "-tdd-z-10"]]),
             style: {
               transform: `translateX(${transformNum}px)`
             }