hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/es/components/appTable/cpns/headerItem.vue.mjs

@@ -0,0 +1,98 @@
+import { computed, openBlock, createElementBlock, createElementVNode, createVNode, unref, withModifiers, withCtx, renderSlot } from 'vue';
+import { ElIcon } from 'element-plus';
+import { ArrowUpBold, ArrowDownBold } from '@element-plus/icons-vue';
+
+const _sfc_main = {
+  __name: "headerItem",
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    column: {
+      type: Object,
+      default: () => ({})
+    },
+    filterModel: {
+      Object,
+      default: () => ({})
+    }
+  },
+  emits: ["search"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const columnSort = computed(() => {
+      return props.column.sort;
+    });
+    function isSortActive(prop, order) {
+      return props.filterModel.sortBy === prop && props.filterModel.orderSort === order;
+    }
+    function onSortHandler(prop, order) {
+      if (props.filterModel.orderSort === "asc") {
+        if (props.filterModel.sortBy === prop) {
+          if (order) {
+            props.filterModel.orderSort = order === "asc" ? null : order;
+          } else {
+            props.filterModel.orderSort = null;
+            props.filterModel.sortBy = null;
+          }
+        } else {
+          props.filterModel.orderSort = order || "desc";
+          props.filterModel.sortBy = prop;
+        }
+      } else if (props.filterModel.orderSort === "desc") {
+        if (props.filterModel.sortBy === prop) {
+          if (order) {
+            props.filterModel.orderSort = order === "desc" ? null : order;
+          } else {
+            props.filterModel.orderSort = "asc";
+          }
+        } else {
+          props.filterModel.orderSort = order || "desc";
+          props.filterModel.sortBy = prop;
+        }
+      } else {
+        props.filterModel.orderSort = order || "desc";
+        props.filterModel.sortBy = prop;
+      }
+      emits("search");
+    }
+    return (_ctx, _cache) => {
+      return columnSort.value.show ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: "w-full relative cursor-pointer",
+        onClick: ($event) => onSortHandler(columnSort.value.prop, null)
+      }, [
+        createElementVNode("div", { class: "flex flex-col absolute top-1/2 -left-1 transform -translate-y-1/2 -translate-x-full" }, [
+          createVNode(unref(ElIcon), {
+            size: "8",
+            color: isSortActive(columnSort.value.prop, "asc") ? "rgba(var(--hy-theme))" : "rgba(var(--hy-auxiliary))",
+            onClick: withModifiers(($event) => onSortHandler(columnSort.value.prop, "asc"), ["stop"])
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(ArrowUpBold))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["color", "onClick"]),
+          createVNode(unref(ElIcon), {
+            size: "8",
+            color: isSortActive(columnSort.value.prop, "desc") ? "rgba(var(--hy-theme))" : "rgba(var(--hy-auxiliary))",
+            class: "-mt-0.5",
+            onClick: withModifiers(($event) => onSortHandler(columnSort.value.prop, "desc"), ["stop"])
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(ArrowDownBold))
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["color", "onClick"])
+        ]),
+        renderSlot(_ctx.$slots, "default")
+      ], 8, ["onClick"])) : renderSlot(_ctx.$slots, "default", { key: 1 });
+    };
+  }
+};
+
+export { _sfc_main as default };

package/es/components/appTable/cpns/virtualTable.vue.mjs

@@ -0,0 +1,560 @@
+import { ref, computed, openBlock, createBlock, unref, withCtx, renderSlot, resolveDynamicComponent, createElementBlock, Fragment, withModifiers, normalizeProps, mergeProps, createTextVNode, toDisplayString, renderList, createElementVNode, normalizeClass, createVNode, createCommentVNode, guardReactiveProps } from 'vue';
+import { ElTableV2, ElCheckbox, ElDropdown, ElIcon, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import { MoreFilled } from '@element-plus/icons-vue';
+import { operatorFilterHandler, operatorClickHandler, operatorDisabledHandler, operatorDisableTextdHandler, renderContentHandler, renderHeaderHandler } from '../js/index.mjs';
+import _sfc_main$1 from './headerItem.vue.mjs';
+import { AppIcon } from '../../appIcon/index.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+import { isNumber, isEmpty, isBoolean, isArray, isFunction } from '../../../utils/is.mjs';
+import { AppTooltip } from '../../appTooltip/index.mjs';
+
+const _sfc_main = {
+  __name: "virtualTable",
+  props: {
+    rowKey: {
+      type: [String, Number]
+    },
+    width: {
+      type: Number
+    },
+    height: {
+      type: Number
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Array,
+      default: () => []
+    },
+    columnsEditable: {
+      type: Object,
+      default: () => ({})
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    },
+    isShowAllSelect: {
+      type: Boolean,
+      default: true
+    },
+    filterModel: {
+      type: Object,
+      default: () => ({})
+    },
+    onRowClick: {
+      type: Function
+    },
+    onRowContextmenu: {
+      type: Function
+    }
+  },
+  emits: ["search", "select", "select-all"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useLocale();
+    const expandedKeys = ref([]);
+    const expandedMap = computed(() => {
+      return expandedKeys.value.reduce((keyMap, key, index) => {
+        keyMap.set(key, index);
+        return keyMap;
+      }, /* @__PURE__ */ new Map());
+    });
+    const avgWidth = computed(() => {
+      const { total, totalWidth } = props.columns.reduce(
+        ({ total: total2, totalWidth: totalWidth2 }, column) => {
+          if (props.columnsEditable[column.prop]?.checked) {
+            if (isNumber(column.width) && column.width > 0) {
+              totalWidth2 += column.width;
+            } else {
+              total2++;
+            }
+          }
+          return { total: total2, totalWidth: totalWidth2 };
+        },
+        { total: 0, totalWidth: 0 }
+      );
+      if (totalWidth >= props.width) return 80;
+      const avg = Math.floor((props.width - totalWidth) / total);
+      return avg < 80 ? 80 : avg;
+    });
+    const tableColumns = computed(() => {
+      return props.columns.filter((column) => {
+        return props.columnsEditable[column.prop]?.checked;
+      }).map((column) => {
+        return { ...column, width: column.width || avgWidth.value };
+      });
+    });
+    const selectionColumn = computed(() => {
+      return props.columns.find((item) => item.type === "selection");
+    });
+    const expandColumn = computed(() => {
+      return props.columns.find((item) => item.type === "expand");
+    });
+    const isExpandTable = computed(() => {
+      return expandColumn.value?.expandType === "expand";
+    });
+    const dataSource = computed(() => {
+      if (!isExpandTable.value) return props.data;
+      return props.data.map((item) => ({
+        ...item,
+        children: item.children?.length ? item.children : [{ id: /* @__PURE__ */ Symbol("expandKey"), rowType: "expand" }]
+      }));
+    });
+    const dataSourceMap = computed(() => {
+      return generateDataSourceMap(dataSource.value);
+    });
+    function getRowKey(row) {
+      return row[props.rowKey];
+    }
+    function generateDataSourceMap(list, dataMap = /* @__PURE__ */ new Map()) {
+      return (list || []).reduce((dataMap2, data) => {
+        if (data.children) {
+          generateDataSourceMap(data.children, dataMap2);
+        }
+        if (data?.rowType !== "expand") {
+          dataMap2.set(getRowKey(data), data);
+        }
+        return dataMap2;
+      }, dataMap);
+    }
+    function columnIndexHandler({ column, row, $index, cellIndex }) {
+      if (isFunction(column.index)) {
+        return column.index($index);
+      }
+      return $index + 1;
+    }
+    function onRowClickHandler(options) {
+      options = isArray(options)[0] ? options[0] : options;
+      if (!options) return;
+      const { rowData: row, event } = options;
+      const target = event?.target;
+      const classList = [
+        ...target?.classList || [],
+        ...target?.parentNode?.classList || [],
+        ...target?.parentNode?.parentNode?.classList || []
+      ];
+      if (classList.some((item) => item === "hy-el-table-v2__expand-icon")) {
+        return;
+      }
+      if (row.rowType === "expand") return;
+      if (!props.onRowClick) return;
+      props.onRowClick(row, void 0, event);
+    }
+    function onContextmenuHandler(options) {
+      options = isArray(options)[0] ? options[0] : options;
+      if (!options) return;
+      const { rowData: row, event } = options;
+      if (row.rowType === "expand") return;
+      if (!props.onRowContextmenu) return;
+      props.onRowContextmenu(row, void 0, event);
+    }
+    const isAllChecked = ref(false);
+    const selectedMap = ref(/* @__PURE__ */ new Map());
+    const indeterminateKeys = ref(/* @__PURE__ */ new Set());
+    function isSelectable(row) {
+      const column = selectionColumn.value;
+      if (!isFunction(column?.selectable)) return true;
+      return column.selectable(row);
+    }
+    function switchCheckHandler(row) {
+      if (!isSelectable(row)) return;
+      toggleRowSelection(row);
+      emits("select", Array.from(selectedMap.value.values()), row);
+    }
+    function toggleRowSelection(row, selected) {
+      const key = getRowKey(row);
+      if (!dataSourceMap.value.has(key)) {
+        throw Error(`toggleRowSelection\uFF1A\u627E\u4E0D\u5230\u3010${getRowKey(row)}\u3011`);
+      }
+      const checkedNodeMap = new Map(selectedMap.value);
+      const isChecked = isBoolean(selected) ? selected : !checkedNodeMap.has(key);
+      const toggle = (node, checked) => {
+        const nodeKey = getRowKey(node);
+        if (isSelectable(node)) {
+          if (checked) {
+            checkedNodeMap.set(nodeKey, node);
+          } else {
+            checkedNodeMap.delete(nodeKey);
+          }
+        }
+        const children = node.children;
+        if (children) {
+          children.forEach((childNode) => {
+            toggle(childNode, checked);
+          });
+        }
+      };
+      toggle(row, isChecked);
+      const result = generateIndeterminate(dataSource.value, checkedNodeMap);
+      isAllChecked.value = result.allChecked;
+      selectedMap.value = result.checkedNodeMap;
+      indeterminateKeys.value = result.indeterminateKeys;
+    }
+    function toggleAllSelection() {
+      if (isAllChecked.value) {
+        isAllChecked.value = false;
+        selectedMap.value.clear();
+      } else {
+        let checkedNodeMap = /* @__PURE__ */ new Map();
+        isAllChecked.value = true;
+        for (let [key, value] of dataSourceMap.value) {
+          if (isSelectable(value)) {
+            checkedNodeMap.set(key, value);
+          }
+        }
+        selectedMap.value = checkedNodeMap;
+      }
+      indeterminateKeys.value.clear();
+      emits("select-all", Array.from(selectedMap.value.values()));
+    }
+    function generateIndeterminate(list, checkedNodeMap = /* @__PURE__ */ new Map()) {
+      const handler = (list2, checkedNodeMap2 = /* @__PURE__ */ new Map(), indeterminateKeys3 = /* @__PURE__ */ new Set()) => {
+        let allChecked2 = true, hasChecked = false;
+        for (let i = 0; i < list2.length; i++) {
+          const node = list2[i];
+          const nodeKey = getRowKey(node);
+          if (node.children?.length) {
+            const result = handler(node.children, checkedNodeMap2, indeterminateKeys3);
+            if (isSelectable(node)) {
+              allChecked2 = allChecked2 && result.allChecked;
+              hasChecked = hasChecked || result.hasChecked;
+              if (result.allChecked) {
+                checkedNodeMap2.set(nodeKey, node);
+              } else {
+                checkedNodeMap2.delete(nodeKey, node);
+                if (result.hasChecked) {
+                  indeterminateKeys3.add(nodeKey);
+                }
+              }
+            }
+          } else {
+            const isChecked = checkedNodeMap2.has(nodeKey);
+            allChecked2 = allChecked2 && isChecked;
+            hasChecked = hasChecked || isChecked;
+          }
+        }
+        return { allChecked: allChecked2, hasChecked };
+      };
+      const indeterminateKeys2 = /* @__PURE__ */ new Set();
+      const { allChecked } = handler(list, checkedNodeMap, indeterminateKeys2);
+      return { checkedNodeMap, indeterminateKeys: indeterminateKeys2, allChecked };
+    }
+    __expose({
+      toggleRowSelection,
+      toggleAllSelection,
+      toggleRowExpansion(row, expanded) {
+        const index = expandedMap.value.get(getRowKey(row));
+        const isExpanded = isBoolean(expanded) ? expanded : !isNumber(index);
+        if (isExpanded) {
+          if (!isNumber(index)) {
+            expandedKeys.value.push(getRowKey(row));
+          }
+        } else {
+          if (isNumber(index)) {
+            expandedKeys.value.splice(index, 1);
+          }
+        }
+      },
+      clearSelection: () => {
+        isAllChecked.value = false;
+        selectedMap.value.clear();
+        indeterminateKeys.value.clear();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTableV2), {
+        "expanded-row-keys": expandedKeys.value,
+        "onUpdate:expandedRowKeys": ($event) => expandedKeys.value = $event,
+        "row-key": __props.rowKey,
+        data: dataSource.value,
+        columns: tableColumns.value,
+        width: __props.width,
+        height: __props.height,
+        "header-height": __props.showHeader ? 44 : 0,
+        "expand-column-key": expandColumn.value?.key,
+        fixed: "",
+        "row-event-handlers": {
+          onClick: onRowClickHandler,
+          onContextmenu: onContextmenuHandler
+        }
+      }, {
+        "header-cell": withCtx(({ column, columnIndex: $index }) => [
+          createVNode(_sfc_main$1, {
+            type: "virtual",
+            column,
+            "filter-model": __props.filterModel,
+            onSearch: () => emits("search")
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, column.headerSlot, normalizeProps(guardReactiveProps({ column, $index })), () => [
+                column.type === "selection" ? (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 0 },
+                  [
+                    __props.isShowAllSelect ? (openBlock(), createBlock(unref(ElCheckbox), {
+                      key: 0,
+                      "model-value": isAllChecked.value,
+                      indeterminate: !isAllChecked.value && !!selectedMap.value.size,
+                      onClick: withModifiers(toggleAllSelection, ["stop"])
+                    }, null, 8, ["model-value", "indeterminate"])) : createCommentVNode("v-if", true)
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : !unref(isEmpty)(unref(renderHeaderHandler)(column, { column, $index })) ? (openBlock(), createBlock(unref(AppTooltip), {
+                  key: 1,
+                  "over-line": 1,
+                  content: unref(renderHeaderHandler)(column, { column, $index })
+                }, null, 8, ["content"])) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1032, ["column", "filter-model", "onSearch"])
+        ]),
+        cell: withCtx(({ column, columnIndex: cellIndex, rowData: row, rowIndex: $index }) => [
+          column.type === "expand" && isExpandTable.value ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 0 },
+            [],
+            64
+            /* STABLE_FRAGMENT */
+          )) : column.type === "selection" ? (openBlock(), createBlock(unref(ElCheckbox), {
+            key: 1,
+            "model-value": selectedMap.value.has(getRowKey(row)),
+            indeterminate: indeterminateKeys.value.has(getRowKey(row)),
+            disabled: !isSelectable(row),
+            onClick: withModifiers(($event) => switchCheckHandler(row), ["stop"])
+          }, null, 8, ["model-value", "indeterminate", "disabled", "onClick"])) : column?.slot ? renderSlot(_ctx.$slots, column?.slot, normalizeProps(mergeProps({ key: 2 }, { column, row, $index, cellIndex }))) : column.type === "index" ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 3 },
+            [
+              createTextVNode(
+                toDisplayString(columnIndexHandler({ column, row, $index, cellIndex })),
+                1
+                /* TEXT */
+              )
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : column.type === "operator" ? (openBlock(), createElementBlock("div", {
+            key: 4,
+            class: "w-full flex items-center justify-between text-main",
+            onClick: withModifiers(() => {
+            }, ["stop"]),
+            onContextmenu: withModifiers(() => {
+            }, ["stop"])
+          }, [
+            (openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(unref(operatorFilterHandler)(
+                column,
+                { column, row, $index, cellIndex },
+                "default"
+              ), (citem, cindex) => {
+                return openBlock(), createBlock(unref(AppTooltip), {
+                  key: cindex,
+                  "is-always": "",
+                  content: citem.label
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", {
+                      class: normalizeClass(["w-[40px] h-[48px] inline-flex flex-col items-center justify-center text-xs hover:font-bold border border-transparent hover:border-theme hover:shadow-[0px_0px_5px_0px_rgba(var(--hy-theme),0.5)] rounded box-border cursor-pointer", citem.className]),
+                      onClick: ($event) => unref(operatorClickHandler)(
+                        cindex,
+                        column,
+                        { column, row, $index, cellIndex },
+                        "default"
+                      )
+                    }, [
+                      createVNode(unref(AppIcon), {
+                        "svg-name": citem.svgName,
+                        "class-name": "!w-4 !h-4"
+                      }, null, 8, ["svg-name"]),
+                      citem.subLabel ? (openBlock(), createElementBlock(
+                        "div",
+                        {
+                          key: 0,
+                          class: "mt-1 whitespace-nowrap"
+                        },
+                        toDisplayString(citem.subLabel),
+                        1
+                        /* TEXT */
+                      )) : (openBlock(), createElementBlock("div", {
+                        key: 1,
+                        class: "mt-1 whitespace-nowrap"
+                      }, "\xA0"))
+                    ], 10, ["onClick"])
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["content"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            )),
+            unref(operatorFilterHandler)(
+              column,
+              { column, row, $index, cellIndex },
+              "more"
+            )?.length ? (openBlock(), createBlock(unref(ElDropdown), {
+              key: 0,
+              ref: "operatorDropdownRef",
+              trigger: "click",
+              "popper-style": "min-width: 150px",
+              placement: "bottom",
+              onCommand: ($event) => unref(operatorClickHandler)(
+                $event,
+                column,
+                { column, row, $index, cellIndex },
+                "more"
+              )
+            }, {
+              dropdown: withCtx(() => [
+                createVNode(
+                  unref(ElDropdownMenu),
+                  null,
+                  {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(unref(operatorFilterHandler)(
+                          column,
+                          { column, row, $index, cellIndex },
+                          "more"
+                        ), (citem, cindex) => {
+                          return openBlock(), createBlock(unref(ElDropdownItem), {
+                            key: cindex,
+                            command: cindex,
+                            disabled: unref(operatorDisabledHandler)(citem, {
+                              column,
+                              row,
+                              $index,
+                              cellIndex
+                            })
+                          }, {
+                            default: withCtx(() => [
+                              createElementVNode("span", null, [
+                                createElementVNode(
+                                  "span",
+                                  null,
+                                  toDisplayString(citem.label),
+                                  1
+                                  /* TEXT */
+                                ),
+                                unref(operatorDisabledHandler)(citem, {
+                                  column,
+                                  row,
+                                  $index,
+                                  cellIndex
+                                }) ? (openBlock(), createElementBlock(
+                                  "span",
+                                  {
+                                    key: 0,
+                                    class: "text-xs leading-1"
+                                  },
+                                  "\uFF08" + toDisplayString(unref(operatorDisableTextdHandler)(citem, {
+                                    column,
+                                    row,
+                                    $index,
+                                    cellIndex
+                                  })) + "\uFF09",
+                                  1
+                                  /* TEXT */
+                                )) : createCommentVNode("v-if", true)
+                              ])
+                            ]),
+                            _: 2
+                            /* DYNAMIC */
+                          }, 1032, ["command", "disabled"]);
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1024
+                  /* DYNAMIC_SLOTS */
+                )
+              ]),
+              default: withCtx(() => [
+                createElementVNode("span", null, [
+                  createVNode(unref(AppTooltip), {
+                    "is-always": "",
+                    content: unref(t)("table.moreOperations")
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", { class: "w-[40px] h-[48px] inline-flex flex-col items-center justify-center text-main text-xs hover:font-bold border border-transparent hover:border-theme hover:shadow-[0px_0px_5px_0px_rgba(var(--hy-theme),0.5)] rounded box-border cursor-pointer" }, [
+                        createElementVNode("div", { class: "w-4 h-4" }, [
+                          createVNode(unref(ElIcon), {
+                            size: "16",
+                            color: "rgba(var(--hy-main))"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(MoreFilled))
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })
+                        ]),
+                        createElementVNode(
+                          "div",
+                          { class: "mt-1" },
+                          toDisplayString(unref(t)("table.more")),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["content"])
+                ])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["onCommand"])) : createCommentVNode("v-if", true)
+          ], 40, ["onClick", "onContextmenu"])) : ["default", "expand"].includes(column.type) ? (openBlock(), createElementBlock(
+            Fragment,
+            { key: 5 },
+            [
+              !unref(isEmpty)(
+                unref(renderContentHandler)(column, { column, row, $index, cellIndex })
+              ) ? (openBlock(), createBlock(unref(AppTooltip), {
+                key: 0,
+                "over-line": 2,
+                content: unref(renderContentHandler)(column, { column, row, $index, cellIndex })
+              }, null, 8, ["content"])) : (openBlock(), createElementBlock("span", {
+                key: 1,
+                class: "text-auxiliary"
+              }, "- -"))
+            ],
+            64
+            /* STABLE_FRAGMENT */
+          )) : createCommentVNode("v-if", true)
+        ]),
+        row: withCtx(({ cells, depth, expanded, rowData: row }) => [
+          depth > 0 && isExpandTable.value ? renderSlot(_ctx.$slots, expandColumn.value.slot, {
+            key: 0,
+            row,
+            expanded: expandedMap.value.has(getRowKey(row))
+          }) : (openBlock(), createBlock(resolveDynamicComponent(() => cells), { key: 1 }))
+        ]),
+        empty: withCtx(() => [
+          renderSlot(_ctx.$slots, "empty")
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["expanded-row-keys", "onUpdate:expandedRowKeys", "row-key", "data", "columns", "width", "height", "header-height", "expand-column-key", "row-event-handlers"]);
+    };
+  }
+};
+
+export { _sfc_main as default };