ninemoon-ui 0.1.8 → 0.1.9

package/dist/js/table/table.js

@@ -1,6 +1,25 @@
-import { defineComponent, computed, useSlots, ref, watch, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, createVNode, withDirectives, vShow, h, vModelCheckbox, withModifiers } from "vue";
+import { defineComponent, computed, useSlots, h, nextTick, ref, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, renderList, withDirectives, vModelCheckbox, createCommentVNode, createTextVNode, toDisplayString, createBlock, markRaw } from "vue";
 import { S as ShapeFlags } from "../shapeFlag/shapeFlag.js";
-const _hoisted_1 = { class: "text-center text-word6 text-base" };
+const _hoisted_1 = ["width"];
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = ["colspan"];
+const _hoisted_4 = { class: "border-b" };
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = {
+  class: "px-1",
+  for: "checkbox"
+};
+const _hoisted_7 = ["checked", "onChange"];
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = {
+  key: 1,
+  class: "border-b"
+};
+const _hoisted_10 = ["colspan"];
+const _hoisted_11 = {
+  key: 0,
+  class: "text-center text-word6 text-base"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "table",
   props: {
@@ -10,85 +29,133 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     headclass: {},
     cellclass: {},
     tableclass: {},
-    idKey: {}
+    idKey: {},
+    outSideCheck: { type: Boolean, default: false }
   },
-  emits: ["rowClick", "selectionChange"],
+  emits: ["rowClick", "selectionChange", "finishRender"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const hasData = computed(() => {
       return props.data.length > 0;
     });
     const emit = __emit;
+    const emitSelection = () => {
+      emit("selectionChange", resultArray.value);
+    };
     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);
+    const groupedSlots = computed(() => {
+      const groups = {
+        append: null,
+        prepend: null,
+        rest: [],
+        restLen: 0,
+        normal: [],
+        hasindex: false,
+        hascheck: false
+      };
+      const _categorizeSlot = (slot) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+        const type = (_a = slot.props) == null ? void 0 : _a.type;
+        switch (type) {
+          case "append":
+            groups.append = slot;
+            break;
+          case "prepend":
+            groups.prepend = slot;
+            break;
+          case "index":
+            groups.rest.push({
+              type: (_b = slot.props) == null ? void 0 : _b.type,
+              prop: (_c = slot.props) == null ? void 0 : _c.prop,
+              label: ((_d = slot.props) == null ? void 0 : _d.label) || "",
+              width: (_e = slot.props) == null ? void 0 : _e.width
+            });
+            groups.restLen += 1;
+            groups.hasindex = true;
+            break;
+          case "selection":
+            groups.rest.push({
+              type: (_f = slot.props) == null ? void 0 : _f.type,
+              prop: (_g = slot.props) == null ? void 0 : _g.prop,
+              label: ((_h = slot.props) == null ? void 0 : _h.label) || "",
+              width: (_i = slot.props) == null ? void 0 : _i.width
+            });
+            groups.restLen += 1;
+            groups.hascheck = true;
+            break;
+          default:
+            groups.rest.push({
+              type: (_j = slot.props) == null ? void 0 : _j.type,
+              prop: (_k = slot.props) == null ? void 0 : _k.prop,
+              label: ((_l = slot.props) == null ? void 0 : _l.label) || "",
+              width: (_m = slot.props) == null ? void 0 : _m.width
+            });
+            groups.restLen += 1;
+            groups.normal.push({
+              isSlot: Boolean((_n = slot.children) == null ? void 0 : _n.default),
+              prop: (_o = slot.props) == null ? void 0 : _o.prop,
+              slot
+            });
+            break;
+        }
+      };
+      slots.default().forEach((node) => {
+        if (node.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+          node.children.forEach(_categorizeSlot);
+        } else if (node.shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
+          _categorizeSlot(node);
         }
-        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,
-        restSlots.value.map((it, _index) => {
-          return colitemHandle(it);
-        })
-      );
-    };
-    const colitemHandle = (it) => {
-      return h("col", {
-        width: it.props.width || null
       });
+      return groups;
+    });
+    const prependSlot = computed(() => groupedSlots.value.prepend);
+    const appendSlot = computed(() => groupedSlots.value.append);
+    const dynamicPre = (props2) => {
+      var _a, _b, _c;
+      return (_c = (_a = prependSlot.value) == null ? void 0 : (_b = _a.children).default) == null ? void 0 : _c.call(_b, props2);
     };
-    const renderHead = () => {
-      return h(
-        "thead",
-        {
-          class: normalizeClass(["text-word6", [props.headclass]])
-        },
-        restSlots.value.map((it) => {
-          return headitemHandle(it);
-        })
-      );
+    const dynamicAppend = (props2) => {
+      var _a, _b, _c;
+      return (_c = (_a = appendSlot.value) == null ? void 0 : (_b = _a.children).default) == null ? void 0 : _c.call(_b, props2);
     };
-    const headitemHandle = (it) => {
-      var _a;
-      return h(
-        "th",
-        {
-          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",
+    const hasindexSlot = computed(() => groupedSlots.value.hasindex);
+    const hascheckSlot = computed(() => groupedSlots.value.hascheck);
+    const normalSlots = computed(() => groupedSlots.value.normal);
+    const cachedSlots = computed(() => groupedSlots.value.rest);
+    const dynamicnormal = computed(() => {
+      return normalSlots.value.map((eachslot) => {
+        if (eachslot.isSlot) {
+          return (dyprops) => {
+            var _a;
+            return (_a = eachslot.slot) == null ? void 0 : _a.children.default(dyprops);
+          };
+        } else {
+          return (dyprops) => {
+            const text = dyprops.row[eachslot.prop] || props.whiteword;
+            return h("span", text);
+          };
+        }
+      });
+    });
+    nextTick(() => {
+      emit("finishRender");
+    });
+    const dynormalRenderHandle = (rowprops) => {
+      return dynamicnormal.value.map((rh, _) => {
+        return h(
+          "td",
           {
-            class: "px-1 flex"
+            class: normalizeClass(["text-center py-2", props.cellclass])
           },
-          withDirectives(
-            h("input", {
-              type: "checkbox",
-              "onUpdate:modelValue": (value) => allSelect.value = value,
-              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]]
-          )
-        ) : it.props.label
-      );
+          rh({ row: rowprops.row, index: rowprops.rowindex })
+        );
+      });
     };
+    const getRowKey = (rowdata, index) => props.idKey ? `row_${rowdata[props.idKey]}` : `row_${index}`;
+    const getPreRowkey = (rowdata, index) => props.idKey ? `prepend_${rowdata[props.idKey]}` : `prepend_${index}`;
+    const getAppendRowkey = (rowdata, index) => props.idKey ? `append_${rowdata[props.idKey]}` : `append_${index}`;
+    const colSpan = computed(() => groupedSlots.value.restLen);
+    const choosedSet = ref(/* @__PURE__ */ new Set());
     const allSelect = computed({
       set(flag) {
         if (flag) {
@@ -96,137 +163,52 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         } else {
           clearSelection();
         }
+        emitSelection();
       },
       get() {
-        return hasData.value && choosedKeys.value.length == props.data.length;
+        if (MapData.value.size === 0)
+          return false;
+        for (const key of MapData.value.keys()) {
+          if (!choosedSet.value.has(key))
+            return false;
+        }
+        return true;
       }
     });
     const MapData = computed(() => {
-      return props.data.reduce((map, item, index) => {
+      return props.data.reduce((thismap, 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]);
+        if (thismap.has(key)) {
+          console.warn(`重复键 ${key}，已覆盖`);
         }
-        return map;
+        thismap.set(key, item);
+        return thismap;
       }, /* @__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();
+      if (choosedSet.value.size === 0)
+        return [];
+      let result = [];
+      choosedSet.value.forEach((key) => {
+        if (MapData.value.has(key)) {
+          result.push(MapData.value.get(key));
+        }
+      });
+      return result;
     });
     const clearSelection = () => {
-      choosedSet.value = /* @__PURE__ */ new Set();
+      choosedSet.value.clear();
+      emitSelection();
     };
     const allSelection = () => {
       choosedSet.value = new Set(MapData.value.keys());
+      emitSelection();
     };
-    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 renderMainRow = (row, index) => {
-      const rowKey = getRowKey(row, index);
-      return h(
-        "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 bodyCellRenderer = (row, slot, rowIndex, colIndex) => {
-      return h(
-        "td",
-        {
-          class: cellClasses(slot.props),
-          // 提取样式生成逻辑
-          key: `${getRowKey(row, rowIndex)}-${colIndex}`
-          // 复合键
-        },
-        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);
-          },
-          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
-      );
+    const checkChange = (event, row, index) => {
+      const target = event.target;
+      const rowKey = props.idKey ? row[props.idKey] : index;
+      target.checked ? choosedSet.value.add(rowKey) : choosedSet.value.delete(rowKey);
+      emitSelection();
     };
     __expose({
       clearSelection,
@@ -242,9 +224,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             newSet.add(key);
         }
         choosedSet.value = newSet;
+        emitSelection();
       },
       setSelection: (arr) => {
         choosedSet.value = new Set(arr);
+        emitSelection();
       }
     });
     return (_ctx, _cache) => {
@@ -252,15 +236,86 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("table", {
           class: normalizeClass(["w-full text-sm", _ctx.tableclass])
         }, [
-          createVNode(renderColGroup),
-          withDirectives(createVNode(renderHead, null, null, 512), [
-            [vShow, _ctx.showHead]
+          createElementVNode("colgroup", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(cachedSlots.value, (i, j) => {
+              return openBlock(), createElementBlock("col", {
+                width: i.width,
+                key: j
+              }, null, 8, _hoisted_1);
+            }), 128))
           ]),
-          createVNode(renderBody)
+          _ctx.showHead ? (openBlock(), createElementBlock("thead", {
+            key: 0,
+            class: normalizeClass(["text-word6", _ctx.headclass])
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(cachedSlots.value, (i, j) => {
+              return openBlock(), createElementBlock("th", {
+                class: "font-normal h-10 border-b",
+                key: j
+              }, [
+                i.type === "selection" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                  !_ctx.outSideCheck ? withDirectives((openBlock(), createElementBlock("input", {
+                    key: 0,
+                    type: "checkbox",
+                    class: "appearance-none form-tick h-4 w-4 border border-gray-300 rounded checked:border-transparent checked:bg-blue-600 focus:outline-none",
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => allSelect.value = $event)
+                  }, null, 512)), [
+                    [vModelCheckbox, allSelect.value]
+                  ]) : createCommentVNode("", true)
+                ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                  createTextVNode(toDisplayString(i.label), 1)
+                ], 64))
+              ]);
+            }), 128))
+          ], 2)) : createCommentVNode("", true),
+          createElementVNode("tbody", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (rowdata, rowindex) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: getRowKey(rowdata, rowindex)
+              }, [
+                prependSlot.value ? (openBlock(), createElementBlock("tr", _hoisted_2, [
+                  createElementVNode("td", { colspan: colSpan.value }, [
+                    (openBlock(), createBlock(dynamicPre, {
+                      row: markRaw(rowdata),
+                      index: rowindex,
+                      key: getPreRowkey(rowdata, rowindex)
+                    }, null, 8, ["row", "index"]))
+                  ], 8, _hoisted_3)
+                ])) : createCommentVNode("", true),
+                createElementVNode("tr", _hoisted_4, [
+                  hascheckSlot.value ? (openBlock(), createElementBlock("td", _hoisted_5, [
+                    createElementVNode("label", _hoisted_6, [
+                      createElementVNode("input", {
+                        type: "checkbox",
+                        checked: choosedSet.value.has(_ctx.idKey ? rowdata[_ctx.idKey] : rowindex),
+                        onChange: ($event) => checkChange($event, rowdata, 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"
+                      }, null, 40, _hoisted_7)
+                    ])
+                  ])) : createCommentVNode("", true),
+                  hasindexSlot.value ? (openBlock(), createElementBlock("td", _hoisted_8, [
+                    createElementVNode("div", null, toDisplayString(rowindex + 1), 1)
+                  ])) : createCommentVNode("", true),
+                  (openBlock(), createBlock(dynormalRenderHandle, {
+                    row: markRaw(rowdata),
+                    rowindex,
+                    key: getRowKey(rowdata, rowindex)
+                  }, null, 8, ["row", "rowindex"]))
+                ]),
+                appendSlot.value ? (openBlock(), createElementBlock("tr", _hoisted_9, [
+                  createElementVNode("td", { colspan: colSpan.value }, [
+                    (openBlock(), createBlock(dynamicAppend, {
+                      row: markRaw(rowdata),
+                      index: rowindex,
+                      key: getAppendRowkey(rowdata, rowindex)
+                    }, null, 8, ["row", "index"]))
+                  ], 8, _hoisted_10)
+                ])) : createCommentVNode("", true)
+              ], 64);
+            }), 128))
+          ])
         ], 2),
-        withDirectives(createElementVNode("div", _hoisted_1, "暂无数据", 512), [
-          [vShow, !hasData.value]
-        ])
+        !hasData.value ? (openBlock(), createElementBlock("div", _hoisted_11, "暂无数据")) : createCommentVNode("", true)
       ], 64);
     };
   }

package/dist/js/table/tableItem.js

@@ -9,7 +9,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     type: { default: "default" },
     sortable: { type: Boolean },
     row: {},
-    index: {}
+    index: {},
+    cellclass: {}
   },
   setup(__props) {
     return (_ctx, _cache) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ninemoon-ui",
   "private": false,
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": "zhuboy",
   "keywords": [
     "vue3",
@@ -18,6 +18,7 @@
   "main": "dist/index.es.js",
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/runtime-core": "^3.5.13",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",
     "sass": "^1.64.1",

package/dist/directives/whitespaceclick.d.ts

@@ -1,12 +0,0 @@
-import { ObjectDirective } from 'vue';
-
-interface BgPictureDirectiveOptions {
-    onBgPicture: (e: MouseEvent) => void;
-}
-interface bgPictureDom extends HTMLElement {
-    _bgPicture_handlers_?: {
-        bgPicture: (e: MouseEvent) => void;
-    };
-}
-export declare const createBgClickeDirective: (options: Partial<BgPictureDirectiveOptions>) => ObjectDirective<bgPictureDom, any>;
-export {};