ninemoon-ui 0.0.9 → 0.0.10

package/dist/components/popover/popover.vue.d.ts

@@ -19,6 +19,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     beforeHidden: {
         type: import("vue").PropType<Function>;
     };
+    vIF: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }, {
     hideHandle: (disablecancelflag?: boolean | undefined) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -42,11 +46,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     beforeHidden: {
         type: import("vue").PropType<Function>;
     };
+    vIF: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     placement: "topleft" | "topmiddle" | "topright" | "bottomleft" | "bottommiddle" | "bottomright" | "centerleft" | "centerright";
     trigger: "click" | "hover" | "native";
+    vIF: boolean;
 }, {}>, {
     reference?(_: {}): any;
     default?(_: {}): any;

package/dist/components/select/select.vue.d.ts

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: import("vue").PropType<string | number>;
+        type: import("vue").PropType<string | number | null>;
         required: true;
     };
     placeHolder: {
@@ -25,7 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: import("vue").PropType<string | number>;
+        type: import("vue").PropType<string | number | null>;
         required: true;
     };
     placeHolder: {

package/dist/index.d.ts

@@ -774,7 +774,7 @@ declare const LibSelect: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: import("vue").PropType<string | number>;
+        type: import("vue").PropType<string | number | null>;
         required: true;
     };
     placeHolder: {
@@ -791,7 +791,7 @@ declare const LibSelect: import("vue").DefineComponent<{
         default: boolean;
     };
     modelValue: {
-        type: import("vue").PropType<string | number>;
+        type: import("vue").PropType<string | number | null>;
         required: true;
     };
     placeHolder: {
@@ -1539,6 +1539,7 @@ declare const LibPopover: {
         $props: {
             placement?: "topleft" | "topmiddle" | "topright" | "bottomleft" | "bottommiddle" | "bottomright" | "centerleft" | "centerright" | undefined;
             trigger?: "click" | "hover" | "native" | undefined;
+            vIF?: boolean | undefined;
             style?: unknown;
             class?: unknown;
             key?: string | number | symbol | undefined;
@@ -1623,6 +1624,10 @@ declare const LibPopover: {
             beforeHidden: {
                 type: import("vue").PropType<Function>;
             };
+            vIF: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
         }>> & {
             "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
         }, {
@@ -1630,6 +1635,7 @@ declare const LibPopover: {
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
             placement: "topleft" | "topmiddle" | "topright" | "bottomleft" | "bottommiddle" | "bottomright" | "centerleft" | "centerright";
             trigger: "click" | "hover" | "native";
+            vIF: boolean;
         }, {}, string, {}> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -1671,6 +1677,10 @@ declare const LibPopover: {
         beforeHidden: {
             type: import("vue").PropType<Function>;
         };
+        vIF: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
     }>> & {
         "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
@@ -1700,6 +1710,10 @@ declare const LibPopover: {
     beforeHidden: {
         type: import("vue").PropType<Function>;
     };
+    vIF: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
@@ -1707,6 +1721,7 @@ declare const LibPopover: {
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
     placement: "topleft" | "topmiddle" | "topright" | "bottomleft" | "bottommiddle" | "bottomright" | "centerleft" | "centerright";
     trigger: "click" | "hover" | "native";
+    vIF: boolean;
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         reference?(_: {}): any;

package/dist/index.umd.js

@@ -1726,49 +1726,74 @@
     };
   };
   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 width = 0;
+    let height = 0;
+    if (!baseDom || !aimDom) {
+      return {
+        Top: top,
+        Left: left,
+        Width: width,
+        Height: height
+      };
+    }
+    const { left: baseLeft, right, bottom, top: baseTop } = baseDom.getBoundingClientRect();
+    const { clientHeight: aimHeight, clientWidth: aimWidth } = aimDom;
     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;
-    }
-    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;
+    switch (set == null ? void 0 : set.position) {
+      case "bottomleft":
+      case "bottommiddle":
+      case "bottomright":
+        top = scrollTop + bottom;
+        break;
+      case "topleft":
+      case "topmiddle":
+      case "topright":
+        top = scrollTop + baseTop - aimHeight;
+        break;
+      case "centerleft":
+      case "centerright":
+        top = scrollTop + baseTop + (bottom - baseTop - aimHeight) / 2;
+        break;
     }
-    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;
+        break;
+      case "topmiddle":
+      case "bottommiddle":
+        left = scrollLeft + baseLeft + (right - baseLeft - aimWidth) / 2;
+        break;
+      case "topright":
+      case "bottomright":
+        left = scrollLeft + right - aimWidth;
+        break;
+      case "centerleft":
+        left = scrollLeft + baseLeft - aimWidth;
+        break;
+      case "centerright":
+        left = scrollLeft + right;
+        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;
+    width = aimWidth;
+    height = aimHeight;
     return {
-      Top,
-      Left,
-      Width,
-      Height
+      Top: top,
+      Left: left,
+      Width: width,
+      Height: height
     };
   };
   function getNewArray(array, subGroupLength) {
@@ -2095,14 +2120,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 +2468,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 +2486,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 +2504,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 +2519,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 +2617,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 +2733,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 +4441,8 @@
       placement: { default: "topleft" },
       insertClass: {},
       beforeHidden: {},
-      modelValue: { type: Boolean }
+      modelValue: { type: Boolean },
+      vIF: { type: Boolean, default: true }
     },
     emits: ["update:modelValue"],
     setup(__props, { expose: __expose, emit: emitAct }) {
@@ -4419,7 +4450,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 {
@@ -4458,29 +4497,23 @@
       };
       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 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
         });
@@ -4489,6 +4522,10 @@
       };
       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 +4544,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 +4568,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,11 +4609,14 @@
           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,
@@ -4587,7 +4629,25 @@
                 ]) : 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")
+                ], 6)), [
+                  [vue.vShow, trueFlag.value],
+                  [vClickoutside, closeCenter]
+                ])
+              ]),
+              _: 3
+            }))
           ], 8, ["disabled"]))
         ], 40, _hoisted_1$7);
       };
@@ -4743,7 +4803,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 +4814,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 +4887,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 +4898,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 +5133,7 @@
           "button",
           {
             type: "button",
-            class: btc.join(" "),
+            class: vue.normalizeClass(btc),
             onClick: (e) => {
               activeIndex.value = index2;
               let aim = e.target;
@@ -5095,7 +5155,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 +5212,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 +5524,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)`
             }

package/dist/js/carousel/carousel.js

@@ -1,4 +1,4 @@
-import { defineComponent, useSlots, ref, computed, onMounted, watch, onUnmounted, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, h } from "vue";
+import { defineComponent, useSlots, ref, computed, onMounted, watch, onUnmounted, openBlock, createElementBlock, normalizeStyle, createElementVNode, createVNode, h, normalizeClass } from "vue";
 const _hoisted_1 = /* @__PURE__ */ createElementVNode("svg", {
   class: "tdd-w-4 tdd-h-4 tdd-fill-white tdd-inline-block",
   viewBox: "0 0 1024 1024",
@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "div",
         {
-          class: "carouselBody " + (activeIndex.value === d ? "tdd-z-10" : "-tdd-z-10"),
+          class: normalizeClass(["carouselBody", [activeIndex.value === d ? "tdd-z-10" : "-tdd-z-10"]]),
           style: {
             transform: `translateX(${transformNum}px)`
           }

package/dist/js/check/checkgroup.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, useSlots, openBlock, createBlock, h, withDirectives, vModelCheckbox } from "vue";
+import { defineComponent, inject, useSlots, openBlock, createBlock, h, normalizeClass, withDirectives, vModelCheckbox } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "checkgroup",
   props: {
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "label",
         {
-          class: "checkGroup " + (MySlot.props.class || "") + (props.modelValue.includes(MySlot.props.label) ? " tdd-bg-wordblue" : "")
+          class: normalizeClass(["checkGroup", [MySlot.props.class, props.modelValue.includes(MySlot.props.label) ? " tdd-bg-wordblue" : ""]])
         },
         [
           withDirectives(
@@ -26,14 +26,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ParentGetChangeHandle(value);
                 emit("update:modelValue", value);
               },
-              class: "hiddeninput form-tick" + (props.showinput ? "" : " tdd-hidden")
+              class: normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : " tdd-hidden"]])
             }),
             [[vModelCheckbox, props.modelValue]]
           ),
           h(
             "span",
             {
-              class: "tdd-text-sm " + (props.modelValue.includes(MySlot.props.label) ? " tdd-text-white" : " tdd-text-word6")
+              class: 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
           )

package/dist/js/form/form.js

@@ -24,14 +24,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     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);
       }

package/dist/js/index/index.js

@@ -552,49 +552,74 @@ const throttle = (fn, delay) => {
   };
 };
 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 width = 0;
+  let height = 0;
+  if (!baseDom || !aimDom) {
+    return {
+      Top: top,
+      Left: left,
+      Width: width,
+      Height: height
+    };
+  }
+  const { left: baseLeft, right, bottom, top: baseTop } = baseDom.getBoundingClientRect();
+  const { clientHeight: aimHeight, clientWidth: aimWidth } = aimDom;
   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;
-  }
-  if (set == null ? void 0 : set.position.includes("top")) {
-    Top = scrollTop + top - height;
+  switch (set == null ? void 0 : set.position) {
+    case "bottomleft":
+    case "bottommiddle":
+    case "bottomright":
+      top = scrollTop + bottom;
+      break;
+    case "topleft":
+    case "topmiddle":
+    case "topright":
+      top = scrollTop + baseTop - aimHeight;
+      break;
+    case "centerleft":
+    case "centerright":
+      top = scrollTop + baseTop + (bottom - baseTop - aimHeight) / 2;
+      break;
   }
-  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;
+      break;
+    case "topmiddle":
+    case "bottommiddle":
+      left = scrollLeft + baseLeft + (right - baseLeft - aimWidth) / 2;
+      break;
+    case "topright":
+    case "bottomright":
+      left = scrollLeft + right - aimWidth;
+      break;
+    case "centerleft":
+      left = scrollLeft + baseLeft - aimWidth;
+      break;
+    case "centerright":
+      left = scrollLeft + right;
+      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;
+  width = aimWidth;
+  height = aimHeight;
   return {
-    Top,
-    Left,
-    Width,
-    Height
+    Top: top,
+    Left: left,
+    Width: width,
+    Height: height
   };
 };
 function getNewArray(array, subGroupLength) {

package/dist/js/popover/popover.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, nextTick, onUnmounted, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, nextTick, onUnmounted, openBlock, createElementBlock, withModifiers, renderSlot, createBlock, Teleport, Transition, withCtx, withDirectives, normalizeClass, normalizeStyle, createCommentVNode, vShow } from "vue";
 import { u as usePotion, t as throttle } from "../index/index.js";
 const _hoisted_1 = ["onMouseenter"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -9,7 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     placement: { default: "topleft" },
     insertClass: {},
     beforeHidden: {},
-    modelValue: { type: Boolean }
+    modelValue: { type: Boolean },
+    vIF: { type: Boolean, default: true }
   },
   emits: ["update:modelValue"],
   setup(__props, { expose: __expose, emit: emitAct }) {
@@ -17,7 +18,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const base = ref();
     const pop = ref();
     const showPop = ref(false);
-    const showPopFlag = computed(() => {
+    const trueFlag = computed(() => {
+      if (showPop.value || props.trigger === "native" && props.modelValue) {
+        nextTick(() => {
+          setPosition();
+        });
+      } else {
+        window.removeEventListener("resize", setPosition);
+        window.removeEventListener("scroll", setPosition, true);
+      }
       if (props.trigger === "native") {
         return props.modelValue;
       } else {
@@ -56,29 +65,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const Left = ref(0);
     const Top = ref(0);
-    watch(showPopFlag, (n) => {
-      if (n === true) {
-        nextTick(() => {
-          setPosition();
-          if (props.trigger === "hover")
-            return;
-          window.addEventListener("resize", setPosition);
-          window.addEventListener("scroll", setPosition, true);
-        });
-      }
-    });
     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
       });
@@ -87,6 +90,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     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;
@@ -105,6 +112,10 @@ 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":
@@ -125,8 +136,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (disablecancelflag === true) {
         return;
       } else {
-        window.removeEventListener("resize", setPosition);
-        window.removeEventListener("scroll", setPosition, true);
         if (props.trigger === "native") {
           emitAct("update:modelValue", false);
         } else {
@@ -168,11 +177,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         renderSlot(_ctx.$slots, "reference"),
         (openBlock(), createBlock(Teleport, {
           to: "body",
-          disabled: !showPopFlag.value
+          disabled: !trueFlag.value
         }, [
-          createVNode(Transition, { name: "opecity" }, {
+          _ctx.vIF ? (openBlock(), createBlock(Transition, {
+            key: 0,
+            name: "opecity"
+          }, {
             default: withCtx(() => [
-              showPopFlag.value ? withDirectives((openBlock(), createElementBlock("div", {
+              trueFlag.value ? withDirectives((openBlock(), createElementBlock("div", {
                 key: 0,
                 ref_key: "pop",
                 ref: pop,
@@ -185,7 +197,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]) : createCommentVNode("", true)
             ]),
             _: 3
-          })
+          })) : (openBlock(), createBlock(Transition, {
+            key: 1,
+            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]]),
+                style: normalizeStyle({ width: widthNum.value, top: `${Top.value}px`, left: `${Left.value}px` })
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 6)), [
+                [vShow, trueFlag.value],
+                [vClickoutside, closeCenter]
+              ])
+            ]),
+            _: 3
+          }))
         ], 8, ["disabled"]))
       ], 40, _hoisted_1);
     };

package/dist/js/radio/radiogroup.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, useSlots, openBlock, createBlock, h, withDirectives, vModelRadio } from "vue";
+import { defineComponent, inject, useSlots, openBlock, createBlock, h, normalizeClass, withDirectives, vModelRadio } from "vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "radiogroup",
   props: {
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "label",
         {
-          class: "radioGroup " + (((_a = MySlot.props) == null ? void 0 : _a.class) || "") + (props.modelValue == MySlot.props.label ? " tdd-bg-wordblue" : "")
+          class: normalizeClass(["radioGroup", [(_a = MySlot.props) == null ? void 0 : _a.class, props.modelValue == MySlot.props.label ? " tdd-bg-wordblue" : ""]])
         },
         [
           withDirectives(
@@ -26,14 +26,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ParentGetChangeHandle(value);
                 emit("update:modelValue", value);
               },
-              class: "hiddeninput form-tick" + (props.showinput ? "" : " tdd-hidden")
+              class: normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : " tdd-hidden"]])
             }),
             [[vModelRadio, props.modelValue]]
           ),
           h(
             "span",
             {
-              class: "tdd-text-sm " + (props.modelValue == MySlot.props.label ? " tdd-text-white" : " tdd-text-word6")
+              class: 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
           )

package/dist/js/select/select.js

@@ -1,4 +1,4 @@
-import { defineComponent, defineAsyncComponent, inject, useSlots, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, h } from "vue";
+import { defineComponent, defineAsyncComponent, inject, useSlots, ref, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, h, normalizeClass } from "vue";
 const _hoisted_1 = ["value", "disabled", "readonly", "placeholder"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select",
@@ -29,6 +29,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       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);
@@ -45,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "div",
         {
-          class: `label ${props.modelValue === it.props.value ? "labelselect" : ""}`,
+          class: normalizeClass(["label", [props.modelValue === it.props.value ? "labelselect" : ""]]),
           key: it.props.key,
           onClick: () => {
             emit("update:modelValue", it.props.value);
@@ -63,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         {
           class: "selectOption"
         },
-        slots.default().map((i, j) => {
+        slots.default().map((i, _j) => {
           if (typeof i.children == "string")
             return null;
           if (Array.isArray(i.children)) {
@@ -78,6 +80,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(Pop), {
+        vIF: false,
         trigger: "native",
         modelValue: showOption.value,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => showOption.value = $event),

package/dist/js/table/table.js

@@ -41,7 +41,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const renderHead = () => {
       return h(
         "thead",
-        { class: props.headclass ? `tdd-text-word6 ${props.headclass}` : "tdd-text-word6" },
+        {
+          class: normalizeClass(["tdd-text-word6", [props.headclass]])
+        },
         slots.default().map((it) => {
           if (typeof it.children == "string")
             return null;
@@ -155,7 +157,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "td",
         {
-          class: props.cellclass ? `tdd-text-center tdd-py-2 ${props.cellclass}` : "tdd-text-center tdd-py-2"
+          class: normalizeClass(["tdd-text-center tdd-py-2", [props.cellclass]])
         },
         ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
           "label",

package/dist/js/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useSlots, onMounted, openBlock, createElementBlock, Fragment, createTextVNode, toDisplayString, createElementVNode, createVNode, normalizeStyle, createCommentVNode, h, withDirectives, vShow } from "vue";
+import { defineComponent, computed, ref, useSlots, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
 const _hoisted_1 = { class: "tdd-relative tdd-w-full tdd-overflow-hidden" };
 const _hoisted_2 = {
   key: 0,
@@ -69,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "button",
         {
           type: "button",
-          class: btc.join(" "),
+          class: normalizeClass(btc),
           onClick: (e) => {
             activeIndex.value = index;
             let aim = e.target;
@@ -91,7 +91,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "div",
         {
-          class: `ETab${props.type === "line" ? " tdd-px-2 tdd-pt-2" : " ETab_Card"}`
+          class: normalizeClass(["ETab", [props.type === "line" ? " tdd-px-2 tdd-pt-2" : " ETab_Card"]])
         },
         slots.default().map((it, index) => {
           if (typeof it.children == "string")
@@ -148,27 +148,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createTextVNode(toDisplayString(noactive.value) + " ", 1),
-        createElementVNode("div", _hoisted_1, [
-          createVNode(renderBar, {
-            ref_key: "btnBar",
-            ref: btnBar
-          }, null, 512),
-          showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
-            createElementVNode("div", {
-              class: "tdd-absolute tdd-bottom-0 tdd-border-t-2 tdd-border-solid tdd-border-blue-brand tdd-transition",
-              style: normalizeStyle({
-                transform: `translateX(${arrowNum.value}px`,
-                width: `${arrowWidth.value}px`
-              })
-            }, null, 4)
-          ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_3, [
-            createVNode(renderContent)
-          ])
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(renderBar, {
+          ref_key: "btnBar",
+          ref: btnBar
+        }, null, 512),
+        showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createElementVNode("div", {
+            class: "tdd-absolute tdd-bottom-0 tdd-border-t-2 tdd-border-solid tdd-border-blue-brand tdd-transition",
+            style: normalizeStyle({
+              transform: `translateX(${arrowNum.value}px`,
+              width: `${arrowWidth.value}px`
+            })
+          }, null, 4)
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_3, [
+          createVNode(renderContent)
         ])
-      ], 64);
+      ]);
     };
   }
 });

package/package.json

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