ninemoon-ui 0.0.27 → 0.1.1

package/dist/js/table/table.js

@@ -1,5 +1,6 @@
 import { defineComponent, computed, useSlots, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, createVNode, withDirectives, vShow, h, vModelCheckbox, withModifiers } from "vue";
-const _hoisted_1 = { class: "tdd-text-center tdd-text-word6 tdd-text-base" };
+import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
+const _hoisted_1 = { class: "text-center text-word6 text-base" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "table",
   props: {
@@ -8,7 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     showHead: { type: Boolean, default: true },
     headclass: {},
     cellclass: {},
-    tableclass: {}
+    tableclass: {},
+    idKey: {}
   },
   emits: ["rowClick", "selectionChange"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -18,43 +20,49 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const emit = __emit;
     const slots = useSlots();
+    const validSlots = computed(() => {
+      return slots.default().reduce((pre, cur) => {
+        if (cur.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          pre = pre.concat(cur.children);
+        } else if (cur.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+          pre.push(cur);
+        }
+        return pre;
+      }, []);
+    });
+    const appendSlots = computed(
+      () => validSlots.value.filter((slot) => slot.props.type === "append")
+    );
+    const prependSlots = computed(
+      () => validSlots.value.filter((slot) => slot.props.type === "prepend")
+    );
+    const restSlots = computed(
+      () => validSlots.value.filter(
+        (slot) => slot.props.type !== "append" && slot.props.type !== "prepend"
+      )
+    );
     const renderColGroup = () => {
       return h(
         "colgroup",
         null,
-        slots.default().map((it, _index) => {
-          if (typeof it.children == "string")
-            return null;
-          if (Array.isArray(it.children)) {
-            return it.children.map((itt, _i) => colitemHandle(itt));
-          } else {
-            return colitemHandle(it);
-          }
+        restSlots.value.map((it, _index) => {
+          return colitemHandle(it);
         })
       );
     };
     const colitemHandle = (it) => {
-      var _a;
       return h("col", {
-        width: ((_a = it.props) == null ? void 0 : _a.width) || null
+        width: it.props.width || null
       });
     };
     const renderHead = () => {
       return h(
         "thead",
         {
-          class: normalizeClass(["tdd-text-word6", [props.headclass]])
+          class: normalizeClass(["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);
-          }
+        restSlots.value.map((it) => {
+          return headitemHandle(it);
         })
       );
     };
@@ -63,18 +71,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return h(
         "th",
         {
-          class: "tdd-font-normal tdd-h-10 tdd-border-b "
+          class: "font-normal h-10 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"
+            class: "px-1 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"
+              class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 text-red-600 focus:outline-none"
             }),
             [[vModelCheckbox, allSelect.value]]
           )
@@ -84,119 +92,165 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const allSelect = computed({
       set(flag) {
         if (flag) {
-          choosed.value = props.data.map((_i, d) => d);
+          allSelection();
         } else {
-          choosed.value = [];
+          clearSelection();
         }
       },
       get() {
-        return hasData.value && choosed.value.length == props.data.length;
+        return hasData.value && choosedKeys.value.length == props.data.length;
       }
     });
-    const choosed = ref([]);
+    const MapData = computed(() => {
+      return props.data.reduce((map, item, index) => {
+        const key = props.idKey ? item[props.idKey] : index;
+        if (map.has(key)) {
+          console.warn(`重复键 ${key}，已合并为数组`);
+          map.set(key, [...map.get(key), item]);
+        } else {
+          map.set(key, [item]);
+        }
+        return map;
+      }, /* @__PURE__ */ new Map());
+    });
+    const choosedSet = ref(/* @__PURE__ */ new Set());
+    const choosedKeys = computed(() => Array.from(choosedSet.value));
+    const resultArray = computed(() => {
+      return choosedKeys.value.map((key) => {
+        const mapKey = props.idKey ? key : Number(key);
+        return MapData.value.get(mapKey) || [];
+      }).flat();
+    });
     const clearSelection = () => {
-      choosed.value = [];
+      choosedSet.value = /* @__PURE__ */ new Set();
     };
     const allSelection = () => {
-      let temp = [];
-      for (let i = 0; i < props.data.length; i++) {
-        temp.push(i);
-      }
-      choosed.value = temp;
+      choosedSet.value = new Set(MapData.value.keys());
     };
-    watch(
-      choosed,
-      (newd) => {
-        const res = props.data.filter((_i, d) => newd.includes(d));
-        emit("selectionChange", res);
-      },
-      {
-        deep: true
-      }
-    );
-    const toggleAllSelection = () => {
-      let temp = [];
-      for (let i = 0; i < props.data.length; i++) {
-        temp.push(i);
-      }
-      choosed.value = temp.filter((i) => !choosed.value.includes(i));
-    };
-    const toggleSelection = (arr) => {
-      choosed.value = arr;
+    watch(choosedKeys, () => {
+      emit("selectionChange", resultArray.value);
+    });
+    const renderSlotRows = (slots2, row, index, colSpan, modify) => {
+      const rowKey = getRowKey(row, index);
+      return slots2.map(
+        (slot) => h(
+          "tr",
+          { key: `${modify}-${rowKey}` },
+          h("td", { colSpan }, trRenderHandle(row, slot, index))
+        )
+      );
     };
-    const renderBody = () => {
+    const renderMainRow = (row, index) => {
+      const rowKey = getRowKey(row, index);
       return h(
-        "tbody",
-        {},
-        props.data.map((row, i) => {
-          return h(
-            "tr",
-            {
-              class: "tdd-border-b hover:tdd-bg-gray-100",
-              key: i,
-              onClick: withModifiers(() => {
-                emit("rowClick", { row, i });
-              }, ["stop"])
-            },
-            slots.default().map((it, _j) => {
-              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);
-              }
-            })
-          );
-        })
+        "tr",
+        {
+          class: "border-b hover:bg-gray-100 transition-colors",
+          key: rowKey,
+          // 使用唯一键替代索引
+          onClick: withModifiers(() => emit("rowClick", { row, index }), ["stop"])
+        },
+        restSlots.value.map(
+          (slot, colIndex) => bodyCellRenderer(row, slot, index, colIndex)
+        )
       );
     };
-    const bodyHandle = (row, it, i) => {
-      var _a;
+    const bodyCellRenderer = (row, slot, rowIndex, colIndex) => {
       return h(
         "td",
         {
-          class: normalizeClass(["tdd-text-center tdd-py-2", [props.cellclass]])
+          class: cellClasses(slot.props),
+          // 提取样式生成逻辑
+          key: `${getRowKey(row, rowIndex)}-${colIndex}`
+          // 复合键
         },
-        ((_a = it.props) == null ? void 0 : _a.type) && it.props.type === "selection" ? h(
-          "label",
-          {
-            class: "tdd-px-1 tdd-flex",
-            for: "checkbox"
+        renderCellContent(row, slot, rowIndex)
+      );
+    };
+    const renderCellContent = (row, slot, rowIndex) => {
+      var _a;
+      return ((_a = slot.props) == null ? void 0 : _a.type) === "selection" ? h(
+        "label",
+        {
+          class: "px-1 flex",
+          for: "checkbox"
+        },
+        h("input", {
+          type: "checkbox",
+          value: props.idKey ? row[props.idKey] : rowIndex,
+          onChange: (event) => {
+            const target = event.target;
+            const rowKey = props.idKey ? row[props.idKey] : rowIndex;
+            target.checked ? choosedSet.value.add(rowKey) : choosedSet.value.delete(rowKey);
           },
-          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
-        )
+          checked: choosedSet.value.has(
+            props.idKey ? row[props.idKey] : rowIndex
+          ),
+          class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 text-red-600 focus:outline-none "
+        })
+      ) : trRenderHandle(row, slot, rowIndex);
+    };
+    const cellClasses = (props2) => {
+      return normalizeClass([
+        "text-center py-2",
+        props2 == null ? void 0 : props2.cellclass,
+        (props2 == null ? void 0 : props2.align) === "right" ? "text-right" : "text-left"
+      ]);
+    };
+    const getRowKey = (row, index) => {
+      return props.idKey ? row[props.idKey] : `row-${index}`;
+    };
+    const renderBody = () => {
+      const { data } = props;
+      const prepend = prependSlots.value;
+      const append = appendSlots.value;
+      const rest = restSlots.value;
+      const colSpan = rest.length;
+      const renderRow = (row, index) => {
+        return [
+          // 前置插槽渲染
+          ...renderSlotRows(prepend, row, index, colSpan, "pre"),
+          // 主体行
+          renderMainRow(row, index),
+          // 后置插槽渲染
+          ...renderSlotRows(append, row, index, colSpan, "next")
+        ];
+      };
+      return h("tbody", data.map(renderRow));
+    };
+    const trRenderHandle = (row, it, i) => {
+      return h(
+        "div",
+        null,
+        it.children && it.children.default ? it.children.default({
+          row,
+          index: i
+        }) : row[it.props.prop] || props.whiteword
       );
     };
     __expose({
       clearSelection,
       allSelection,
-      toggleAllSelection,
-      toggleSelection
+      toggleSelection: () => {
+        if (choosedSet.value.size === MapData.value.size) {
+          clearSelection();
+          return;
+        }
+        const newSet = /* @__PURE__ */ new Set();
+        for (const key of MapData.value.keys()) {
+          if (!choosedSet.value.has(key))
+            newSet.add(key);
+        }
+        choosedSet.value = newSet;
+      },
+      setSelection: (arr) => {
+        choosedSet.value = new Set(arr);
+      }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("table", {
-          class: normalizeClass(["tdd-w-full tdd-text-sm", _ctx.tableclass])
+          class: normalizeClass(["w-full text-sm", _ctx.tableclass])
         }, [
           createVNode(renderColGroup),
           withDirectives(createVNode(renderHead, null, null, 512), [

package/dist/js/table/tableItem.js

@@ -6,7 +6,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     width: {},
     label: {},
     fixed: {},
-    type: {},
+    type: { default: "default" },
     sortable: { type: Boolean },
     row: {},
     index: {}

package/dist/js/tabs/tabs.js

@@ -1,10 +1,11 @@
-import { defineComponent, computed, ref, useSlots, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
-const _hoisted_1 = { class: "tdd-relative tdd-w-full tdd-overflow-hidden" };
+import { defineComponent, defineAsyncComponent, computed, ref, reactive, useSlots, onMounted, onUnmounted, openBlock, createElementBlock, createVNode, unref, withCtx, createElementVNode, normalizeStyle, createCommentVNode, h, normalizeClass, withDirectives, vShow } from "vue";
+import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
+const _hoisted_1 = { class: "relative w-full overflow-hidden" };
 const _hoisted_2 = {
   key: 0,
-  class: "tdd-relative tdd-my-2 tdd-w-full tdd-border-t-2 tdd-border-solid tdd-border-gray-200"
+  class: "relative my-2 border-t-2 border-solid border-gray-200"
 };
-const _hoisted_3 = { class: "tdd-relative tdd-w-full" };
+const _hoisted_3 = { class: "relative w-full" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "tabs",
   props: {
@@ -13,6 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   emits: ["update:active"],
   setup(__props, { emit: __emit }) {
+    const LibScrollBar = defineAsyncComponent(() => import("../scrollBar/scrollBar.js"));
     const props = __props;
     const showBaseline = computed(() => props.type === "line");
     const emit = __emit;
@@ -35,33 +37,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const activeIndex = ref(0);
-    const arrowNum = ref(8);
-    const arrowWidth = ref(0);
+    const indicatorPos = reactive({
+      left: 0,
+      width: 0
+    });
     const slots = useSlots();
+    const validSlots = computed(() => {
+      return slots.default().reduce((pre, cur) => {
+        if (cur.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          pre = pre.concat(cur.children);
+        } else if (cur.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+          pre.push(cur);
+        }
+        return pre;
+      }, []);
+    });
     const renderBar = () => {
       return h(
         "div",
         {
-          class: normalizeClass(["ETab", [props.type === "line" ? "tdd-px-2 tdd-pt-2" : " ETab_Card"]])
+          class: normalizeClass([
+            "ETab",
+            [showBaseline.value ? "px-2 pt-2" : " ETab_Card"]
+          ])
         },
-        slots.default().map((it, index) => {
-          if (typeof it.children == "string")
-            return null;
-          if (Array.isArray(it.children)) {
-            return it.children.map((simple, i) => {
-              return renderBtn(simple, i);
-            });
-          } else {
-            return renderBtn(it, index);
-          }
+        validSlots.value.map((it, index) => {
+          return renderBtn(it, index);
         })
       );
     };
     const renderBtn = (node, index) => {
       let btc = [];
       let divc = [];
-      switch (props.type) {
-        case "card":
+      switch (showBaseline.value) {
+        case false:
           btc.push("ETab_Card_Btn");
           divc.push("ETabline");
           if (index - 1 === activeIndex.value) {
@@ -86,44 +95,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "button",
         {
           type: "button",
+          key: `tab-${index}`,
           class: normalizeClass(btc),
           onClick: (e) => {
             activeIndex.value = index;
             let aim = e.target;
-            arrowWidth.value = aim.offsetWidth;
-            arrowNum.value = aim.offsetLeft;
+            indicatorPos.width = aim.offsetWidth;
+            indicatorPos.left = aim.offsetLeft;
             currentActive.value = node.props.name;
           }
         },
         h(
           "span",
           {
-            class: divc.join(" ")
+            class: normalizeClass(divc)
           },
           node.props.name
         )
       );
     };
-    const renderContent = () => {
-      let defaultindex = -1;
-      return h(
-        "div",
-        {},
-        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 {
-            defaultindex += 1;
-            return contentHandle(it, defaultindex);
-          }
-        })
-      );
-    };
+    const renderContent = () => validSlots.value.map((it, i) => {
+      return contentHandle(it, i);
+    });
     const contentHandle = (it, i) => {
       if (currentActive.value === it.props.name) {
         activeIndex.value = i;
@@ -142,35 +135,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
             const aim = observerRef.value.children[activeIndex.value];
-            arrowWidth.value = aim.offsetWidth;
-            arrowNum.value = aim.offsetLeft;
+            indicatorPos.width = aim.offsetWidth;
+            indicatorPos.left = aim.offsetLeft;
           }
         });
       });
-      if (observerRef.value) {
+      if (showBaseline.value) {
         observer.observe(observerRef.value);
       }
     });
     onUnmounted(() => {
-      if (observerRef.value) {
+      if (showBaseline.value) {
         observer.unobserve(observerRef.value);
       }
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        createVNode(renderBar, {
-          ref_key: "observerRef",
-          ref: observerRef
-        }, 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),
+        createVNode(unref(LibScrollBar), null, {
+          default: withCtx(() => [
+            createVNode(renderBar, {
+              ref_key: "observerRef",
+              ref: observerRef
+            }, null, 512),
+            showBaseline.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+              createElementVNode("div", {
+                class: "absolute bottom-0 border-t-2 border-solid border-blue-brand transition",
+                style: normalizeStyle({
+                  transform: `translateX(${indicatorPos.left}px`,
+                  width: `${indicatorPos.width}px`
+                })
+              }, null, 4)
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
         createElementVNode("div", _hoisted_3, [
           createVNode(renderContent)
         ])

package/dist/js/upload/upload.js

@@ -1,8 +1,9 @@
-import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, renderList, toDisplayString, createCommentVNode } from "vue";
+import { defineComponent, ref, openBlock, createElementBlock, Fragment, createElementVNode, renderSlot, renderList, toDisplayString, createVNode, createCommentVNode } from "vue";
+import { C as CloseIcon } from "../index/index.js";
 const _hoisted_1 = ["accept", "multiple"];
 const _hoisted_2 = {
   key: 0,
-  class: "tdd-mt-1 tdd-list-none tdd-space-y-1"
+  class: "mt-1 list-none space-y-1"
 };
 const _hoisted_3 = ["onClick"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -61,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("button", {
             onClick: fileGet,
             type: "button",
-            class: "tdd-appearance-none"
+            class: "appearance-none"
           }, [
             renderSlot(_ctx.$slots, "default")
           ])
@@ -70,31 +71,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           (openBlock(true), createElementBlock(Fragment, null, renderList(fileList.value, (i, d) => {
             return openBlock(), createElementBlock("li", {
               key: d,
-              class: "tdd-flex tdd-w-full tdd-justify-between tdd-p-1 hover:tdd-bg-gray-100"
+              class: "flex w-full justify-between p-1 hover:bg-gray-100"
             }, [
               createElementVNode("span", null, toDisplayString(i.name), 1),
               createElementVNode("button", {
                 type: "button",
                 onClick: ($event) => DeleteFileHandle(d)
-              }, _cache[1] || (_cache[1] = [
-                createElementVNode("svg", {
-                  class: "h-5 w-5 fill-gray-600",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  width: "24",
-                  height: "24",
-                  viewBox: "0 0 24 24",
-                  fill: "none"
-                }, [
-                  createElementVNode("g", null, [
-                    createElementVNode("path", {
-                      "fill-rule": "evenodd",
-                      "clip-rule": "evenodd",
-                      d: "M16.7782 7.22943C16.4824 6.93364 16.0046 6.93364 15.7088 7.22943L12 10.9306L8.29124 7.22184C7.99545 6.92605 7.51763 6.92605 7.22184 7.22184C6.92605 7.51763 6.92605 7.99545 7.22184 8.29124L10.9306 12L7.22184 15.7088C6.92605 16.0046 6.92605 16.4824 7.22184 16.7782C7.51763 17.0739 7.99545 17.0739 8.29124 16.7782L12 13.0694L15.7088 16.7782C16.0046 17.0739 16.4824 17.0739 16.7782 16.7782C17.0739 16.4824 17.0739 16.0046 16.7782 15.7088L13.0694 12L16.7782 8.29124C17.0664 8.00303 17.0664 7.51763 16.7782 7.22943Z",
-                      fill: "inherit"
-                    })
-                  ])
-                ], -1)
-              ]), 8, _hoisted_3)
+              }, [
+                createVNode(CloseIcon, { class: "h-5 w-5 fill-gray-600" })
+              ], 8, _hoisted_3)
             ]);
           }), 128))
         ])) : createCommentVNode("", true)

package/dist/tabs.css

@@ -1,8 +1,8 @@
-
 .ETab {
     display: flex;
-    width: 100%;
-    flex-wrap: wrap;
+    width: -moz-max-content;
+    width: max-content;
+    flex-wrap: nowrap;
     --tw-text-opacity: 1;
     color: rgb(102 102 102 / var(--tw-text-opacity, 1))
 }

package/dist/types/shapeFlag.d.ts

@@ -0,0 +1,13 @@
+export declare enum ShapeFlags {
+    ELEMENT = 1,// 表示一个普通的HTML元素
+    FUNCTIONAL_COMPONENT = 2,// 函数式组件
+    STATEFUL_COMPONENT = 4,// 有状态组件
+    TEXT_CHILDREN = 8,// 子节点是文本
+    ARRAY_CHILDREN = 16,// 子节点是数组
+    SLOTS_CHILDREN = 32,// 子节点是插槽
+    TELEPORT = 64,// 表示vnode描述的是个teleport组件
+    SUSPENSE = 128,// 表示vnode描述的是个suspense组件
+    COMPONENT_SHOULD_KEEP_ALIVE = 256,// 表示需要被keep-live的有状态组件
+    COMPONENT_KEPT_ALIVE = 512,// 已经被keep-live的有状态组件
+    COMPONENT = 6
+}