ninemoon-ui 0.0.8 → 0.0.9

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 } from "vue";
 const _hoisted_1 = ["value", "disabled", "readonly", "placeholder"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "select",
@@ -30,10 +30,33 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (isThis.length > 0) {
         return isThis[0].label;
       } 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: `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",
@@ -41,53 +64,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           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
-              );
+          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), {
         trigger: "native",

package/dist/js/table/table.js

@@ -22,47 +22,62 @@ 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
-          );
+        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 +136,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: 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,
+          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,

package/dist/js/tabs/tabs.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, ref, useSlots, onMounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, withDirectives, vShow } from "vue";
+import { defineComponent, computed, ref, useSlots, onMounted, openBlock, createElementBlock, Fragment, createTextVNode, toDisplayString, createElementVNode, createVNode, normalizeStyle, createCommentVNode, h, withDirectives, vShow } from "vue";
 const _hoisted_1 = { class: "tdd-relative tdd-w-full tdd-overflow-hidden" };
 const _hoisted_2 = {
   key: 0,
@@ -8,23 +8,39 @@ const _hoisted_3 = { class: "tdd-relative tdd-w-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: {
-    active: {},
-    default: {},
+    active: { default: "" },
     type: { default: "line" }
   },
   emits: ["update:active"],
   setup(__props, { emit }) {
     const props = __props;
     const showBaseline = computed(() => props.type === "line");
-    const currentActive = ref(props.default || "");
-    const activeIndex = ref(0);
-    const arrowNum = ref(8);
-    const arrowWidth = ref(0);
     const changeHandle = (name) => {
       emit("update:active", name);
     };
+    const noactive = ref(props.active === "");
+    const activename = ref("");
+    const currentActive = computed({
+      set(val) {
+        if (noactive.value) {
+          activename.value = val;
+        } else {
+          changeHandle(val);
+        }
+      },
+      get() {
+        if (noactive.value) {
+          return activename.value;
+        } else {
+          return props.active;
+        }
+      }
+    });
+    const activeIndex = ref(0);
+    const arrowNum = ref(8);
+    const arrowWidth = ref(0);
     const slots = useSlots();
-    const renderBtn = (name, index) => {
+    const renderBtn = (node, index) => {
       let btc = [];
       let divc = [];
       switch (props.type) {
@@ -59,17 +75,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             let aim = e.target;
             arrowWidth.value = aim.offsetWidth;
             arrowNum.value = aim.offsetLeft;
-            changeHandle(name);
-            currentActive.value = name;
+            currentActive.value = node.props.name;
           }
-          // key: index,
         },
         h(
           "span",
           {
             class: divc.join(" ")
           },
-          name
+          node.props.name
         )
       );
     };
@@ -77,84 +91,84 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "div",
         {
-          class: `ETab${props.type === "line" ? " px-2 pt-2" : " ETab_Card"}`
+          class: `ETab${props.type === "line" ? " tdd-px-2 tdd-pt-2" : " ETab_Card"}`
         },
         slots.default().map((it, index) => {
-          var _a;
-          if (it.type.toString().includes("Symbol")) {
+          if (typeof it.children == "string")
+            return null;
+          if (Array.isArray(it.children)) {
             return it.children.map((simple, i) => {
-              return renderBtn(simple.props.name, i);
+              return renderBtn(simple, i);
             });
           } else {
-            return renderBtn((_a = it.props) == null ? void 0 : _a.name, index);
+            return renderBtn(it, index);
           }
         })
       );
     };
+    const contentHandle = (it, i) => {
+      if (currentActive.value === "") {
+        activeIndex.value = i;
+        currentActive.value = it.props.name;
+      } else if (currentActive.value === it.props.name) {
+        activeIndex.value = i;
+      }
+      return withDirectives(
+        h(it, {
+          key: it.props.name
+        }),
+        [[vShow, currentActive.value === "" || currentActive.value === it.props.name]]
+      );
+    };
     const renderContent = () => {
+      let defaultindex = -1;
       return h(
         "div",
         {},
-        slots.default().map((it, index) => {
-          var _a, _b;
-          if (it.type.toString().includes("Symbol")) {
-            return it.children.map((simple, i) => {
-              if (currentActive.value === "") {
-                activeIndex.value = i;
-                currentActive.value = simple.props.name;
-              } else if (currentActive.value === simple.props.name) {
-                activeIndex.value = i;
-              }
-              return withDirectives(
-                h(simple, {
-                  key: simple.props.name
-                }),
-                [[vShow, currentActive.value === "" || currentActive.value === simple.props.name]]
-              );
+        slots.default().map((it, _) => {
+          if (typeof it.children == "string")
+            return null;
+          if (Array.isArray(it.children)) {
+            return it.children.map((itt, _i) => {
+              defaultindex += 1;
+              return contentHandle(itt, defaultindex);
             });
           } else {
-            if (currentActive.value === "") {
-              activeIndex.value = index;
-              currentActive.value = (_a = it.props) == null ? void 0 : _a.name;
-            } else if (currentActive.value === ((_b = it.props) == null ? void 0 : _b.name)) {
-              activeIndex.value = index;
-            }
-            return withDirectives(
-              h(it, {
-                key: it.props.name
-              }),
-              [[vShow, currentActive.value === "" || currentActive.value === it.props.name]]
-            );
+            defaultindex += 1;
+            return contentHandle(it, defaultindex);
           }
         })
       );
     };
     const btnBar = ref();
     onMounted(() => {
-      if (props.type === "line") {
+      if (showBaseline.value) {
         const aim = btnBar.value.children[activeIndex.value];
-        arrowWidth.value = aim.children[0].innerHTML.length * 14 + 16;
+        arrowWidth.value = aim.children[0].innerHTML.length * 14;
       }
     });
     return (_ctx, _cache) => {
-      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)
+      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)
+          ])
         ])
-      ]);
+      ], 64);
     };
   }
 });

package/package.json

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