ninemoon-ui 0.0.8 → 0.0.10

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: {
@@ -10,80 +10,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const ParentGetChangeHandle = inject("changHandle", () => null);
     const slots = useSlots();
+    const BoxHandle = (MySlot) => {
+      var _a, _b;
+      return h(
+        "label",
+        {
+          class: normalizeClass(["radioGroup", [(_a = MySlot.props) == null ? void 0 : _a.class, props.modelValue == MySlot.props.label ? " tdd-bg-wordblue" : ""]])
+        },
+        [
+          withDirectives(
+            h("input", {
+              type: "radio",
+              value: MySlot.props.label,
+              "onUpdate:modelValue": (value) => {
+                ParentGetChangeHandle(value);
+                emit("update:modelValue", value);
+              },
+              class: normalizeClass(["hiddeninput form-tick", [props.showinput ? "" : " tdd-hidden"]])
+            }),
+            [[vModelRadio, props.modelValue]]
+          ),
+          h(
+            "span",
+            {
+              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
+          )
+        ]
+      );
+    };
     const renderBoxs = () => {
       return h(
         "div",
         {},
         slots.default().map((MySlot) => {
-          var _a, _b;
-          if (MySlot.type.toString().includes("Symbol")) {
-            if (MySlot.children && MySlot.children instanceof Array) {
-              return MySlot.children.map((trueSlot) => {
-                var _a2;
-                return h(
-                  "label",
-                  {
-                    class: "radioGroup " + // @ts-ignore
-                    (trueSlot.props.class || "") + // @ts-ignore
-                    (props.modelValue == trueSlot.props.label ? " tdd-bg-wordblue" : "")
-                  },
-                  [
-                    withDirectives(
-                      h("input", {
-                        type: "radio",
-                        // @ts-ignore
-                        value: trueSlot.props.label,
-                        "onUpdate:modelValue": (value) => {
-                          ParentGetChangeHandle(value);
-                          emit("update:modelValue", value);
-                        },
-                        class: "hiddeninput form-tick" + // @ts-ignore
-                        (props.showinput ? "" : " tdd-hidden")
-                      }),
-                      [[vModelRadio, props.modelValue]]
-                    ),
-                    h(
-                      "span",
-                      {
-                        class: "tdd-text-sm " + // @ts-ignore
-                        (props.modelValue == trueSlot.props.label ? " tdd-text-white" : " tdd-text-word6")
-                      },
-                      // @ts-ignore
-                      ((_a2 = trueSlot.children) == null ? void 0 : _a2.default()) || trueSlot.props.label
-                    )
-                  ]
-                );
-              });
-            }
+          if (typeof MySlot.children === "string")
+            return null;
+          if (Array.isArray(MySlot.children)) {
+            return MySlot.children.map((slot) => {
+              return BoxHandle(slot);
+            });
           } else {
-            return h(
-              "label",
-              {
-                class: "radioGroup " + (((_a = MySlot.props) == null ? void 0 : _a.class) || "") + (props.modelValue == MySlot.props.label ? " tdd-bg-wordblue" : "")
-              },
-              [
-                withDirectives(
-                  h("input", {
-                    type: "radio",
-                    value: MySlot.props.label,
-                    "onUpdate:modelValue": (value) => {
-                      ParentGetChangeHandle(value);
-                      emit("update:modelValue", value);
-                    },
-                    class: "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")
-                  },
-                  // @ts-ignore
-                  ((_b = MySlot.children) == null ? void 0 : _b.default()) || MySlot.props.label
-                )
-              ]
-            );
+            return BoxHandle(MySlot);
           }
         })
       );

package/dist/js/select/select.js

@@ -1,4 +1,4 @@
-import { defineComponent, defineAsyncComponent, inject, useSlots, ref, computed, watch, 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,67 +29,58 @@ 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);
+        emit("change", null);
         return null;
       }
     });
     const optionList = ref([]);
+    const optionHandle = (it) => {
+      optionList.value.push({
+        value: it.props.value,
+        label: it.props.label
+      });
+      return h(
+        "div",
+        {
+          class: normalizeClass(["label", [props.modelValue === it.props.value ? "labelselect" : ""]]),
+          key: it.props.key,
+          onClick: () => {
+            emit("update:modelValue", it.props.value);
+            ParentGetChangeHandle && ParentGetChangeHandle(it.props.value);
+            emit("change", it.props.value);
+            showOption.value = false;
+          }
+        },
+        it.children || it.props.label
+      );
+    };
     const renderOption = () => {
       return h(
         "div",
         {
           class: "selectOption"
         },
-        slots.default().map((i, j) => {
-          if (i.type.toString().includes("Symbol")) {
-            return i.children.map((it, k) => {
-              optionList.value.push({
-                value: it.props.value,
-                label: it.props.label
-              });
-              return h(
-                "div",
-                {
-                  class: `label ${props.modelValue === it.props.value ? "labelselect" : ""}`,
-                  key: `${j}-${k}`,
-                  onClick: () => {
-                    emit("update:modelValue", it.props.value);
-                    showOption.value = false;
-                  }
-                },
-                it.children || it.props.label
-              );
+        slots.default().map((i, _j) => {
+          if (typeof i.children == "string")
+            return null;
+          if (Array.isArray(i.children)) {
+            return i.children.map((it) => {
+              return optionHandle(it);
             });
           } else {
-            optionList.value.push({
-              value: i.props.value,
-              label: i.props.label
-            });
-            return h(
-              "div",
-              {
-                class: `label ${props.modelValue === i.props.value ? "labelselect" : ""}`,
-                key: j,
-                onClick: () => {
-                  emit("update:modelValue", i.props.value);
-                  showOption.value = false;
-                }
-              },
-              i.children || i.props.label
-            );
+            return optionHandle(i);
           }
         })
       );
     };
-    watch(
-      () => props.modelValue,
-      (n) => {
-        ParentGetChangeHandle && ParentGetChangeHandle(n);
-        emit("change", n);
-      }
-    );
     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

@@ -22,47 +22,64 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "colgroup",
         null,
         slots.default().map((it, _index) => {
-          var _a;
-          return h("col", {
-            width: ((_a = it.props) == null ? void 0 : _a.width) || null
-          });
+          if (typeof it.children == "string")
+            return null;
+          if (Array.isArray(it.children)) {
+            return it.children.map((itt, _i) => colitemHandle(itt));
+          } else {
+            return colitemHandle(it);
+          }
         })
       );
     };
+    const colitemHandle = (it) => {
+      var _a;
+      return h("col", {
+        width: ((_a = it.props) == null ? void 0 : _a.width) || null
+      });
+    };
     const renderHead = () => {
       return h(
         "thead",
-        { class: props.headclass ? `tdd-text-word6 ${props.headclass}` : "tdd-text-word6" },
-        slots.default().map((it, index) => {
-          var _a;
-          return h(
-            "th",
-            {
-              class: "tdd-font-normal tdd-h-10 tdd-border-b ",
-              key: index
-            },
-            // @ts-ignore
-            it.children && it.children.head ? (
-              // @ts-ignore
-              it.children.head()
-            ) : ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
-              "label",
-              {
-                class: "tdd-px-1 tdd-flex"
-              },
-              withDirectives(
-                h("input", {
-                  type: "checkbox",
-                  "onUpdate:modelValue": (value) => allSelect.value = value,
-                  class: "tdd-appearance-none form-tick tdd-h-4 tdd-w-4 tdd-border tdd-border-gray-300 tdd-rounded checked:tdd-border-transparent checked:tdd-bg-red-600 tdd-text-red-600 focus:tdd-outline-none"
-                }),
-                [[vModelCheckbox, allSelect.value]]
-              )
-            ) : it.props.label
-          );
+        {
+          class: normalizeClass(["tdd-text-word6", [props.headclass]])
+        },
+        slots.default().map((it) => {
+          if (typeof it.children == "string")
+            return null;
+          if (Array.isArray(it.children)) {
+            return it.children.map((itt) => {
+              return headitemHandle(itt);
+            });
+          } else {
+            return headitemHandle(it);
+          }
         })
       );
     };
+    const headitemHandle = (it) => {
+      var _a;
+      return h(
+        "th",
+        {
+          class: "tdd-font-normal tdd-h-10 tdd-border-b "
+        },
+        it.children && it.children.head ? it.children.head() : ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
+          "label",
+          {
+            class: "tdd-px-1 tdd-flex"
+          },
+          withDirectives(
+            h("input", {
+              type: "checkbox",
+              "onUpdate:modelValue": (value) => allSelect.value = value,
+              class: "tdd-appearance-none form-tick tdd-h-4 tdd-w-4 tdd-border tdd-border-gray-300 tdd-rounded checked:tdd-border-transparent checked:tdd-bg-red-600 tdd-text-red-600 focus:tdd-outline-none"
+            }),
+            [[vModelCheckbox, allSelect.value]]
+          )
+        ) : it.props.label
+      );
+    };
     const allSelect = computed({
       set(flag) {
         if (flag) {
@@ -121,47 +138,54 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, ["stop"])
             },
             slots.default().map((it, _j) => {
-              var _a;
-              return h(
-                "td",
-                {
-                  class: props.cellclass ? `tdd-text-center tdd-py-2 ${props.cellclass}` : "tdd-text-center tdd-py-2"
-                },
-                ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
-                  "label",
-                  {
-                    class: "tdd-px-1 tdd-flex",
-                    for: "checkbox"
-                  },
-                  withDirectives(
-                    h("input", {
-                      type: "checkbox",
-                      value: i,
-                      "onUpdate:modelValue": (value) => {
-                        choosed.value = value;
-                      },
-                      class: "tdd-appearance-none form-tick tdd-h-4 tdd-w-4 tdd-border tdd-border-gray-300 tdd-rounded checked:tdd-border-transparent checked:tdd-bg-red-600 tdd-text-red-600 focus:tdd-outline-none "
-                    }),
-                    [[vModelCheckbox, choosed.value]]
-                  )
-                ) : h(
-                  "div",
-                  null,
-                  // @ts-ignore
-                  it.children && it.children.default ? (
-                    // @ts-ignore
-                    it.children.default({
-                      row,
-                      index: i
-                    })
-                  ) : row[it.props.prop] != null ? row[it.props.prop] : props.whiteword
-                )
-              );
+              if (typeof it.children == "string")
+                return null;
+              if (Array.isArray(it.children)) {
+                return it.children.map((itt) => {
+                  return bodyHandle(row, itt, i);
+                });
+              } else {
+                return bodyHandle(row, it, i);
+              }
             })
           );
         })
       );
     };
+    const bodyHandle = (row, it, i) => {
+      var _a;
+      return h(
+        "td",
+        {
+          class: normalizeClass(["tdd-text-center tdd-py-2", [props.cellclass]])
+        },
+        ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
+          "label",
+          {
+            class: "tdd-px-1 tdd-flex",
+            for: "checkbox"
+          },
+          withDirectives(
+            h("input", {
+              type: "checkbox",
+              value: i,
+              "onUpdate:modelValue": (value) => {
+                choosed.value = value;
+              },
+              class: "tdd-appearance-none form-tick tdd-h-4 tdd-w-4 tdd-border tdd-border-gray-300 tdd-rounded checked:tdd-border-transparent checked:tdd-bg-red-600 tdd-text-red-600 focus:tdd-outline-none "
+            }),
+            [[vModelCheckbox, choosed.value]]
+          )
+        ) : h(
+          "div",
+          null,
+          it.children && it.children.default ? it.children.default({
+            row,
+            index: i
+          }) : row[it.props.prop] != null ? row[it.props.prop] : props.whiteword
+        )
+      );
+    };
     __expose({
       clearSelection,
       allSelection,