hy-dispatch-ui-v3 0.2.29 → 0.2.31

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

@@ -1,6 +1,6 @@
-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 { ref, computed, openBlock, createBlock, unref, withCtx, renderSlot, createCommentVNode, createElementBlock, Fragment, createElementVNode, normalizeClass, renderList, normalizeStyle, withModifiers, createVNode, mergeProps, createTextVNode, toDisplayString, normalizeProps, guardReactiveProps } from 'vue';
+import { ElTableV2, ElIcon, ElCheckbox, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import { ArrowRight, 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 { useLocale } from '../../../hooks/useLocale.mjs';
@@ -63,6 +63,13 @@ const _sfc_main = {
         return keyMap;
       }, /* @__PURE__ */ new Map());
     });
+    function onRowExpandSwitch({ rowKey }) {
+      if (expandedMap.value.has(rowKey)) {
+        expandedKeys.value.splice(expandedMap.value.get(rowKey), 1);
+      } else {
+        expandedKeys.value.push(rowKey);
+      }
+    }
     const avgWidth = computed(() => {
       const { total, totalWidth } = props.columns.reduce(
         ({ total: total2, totalWidth: totalWidth2 }, column) => {
@@ -98,11 +105,19 @@ const _sfc_main = {
       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" }]
-      }));
+      if (isExpandTable.value) {
+        return props.data.map((item) => {
+          item.children = [
+            {
+              id: /* @__PURE__ */ Symbol("expandKey"),
+              rowType: "expand",
+              dataKey: getRowKey(item)
+            }
+          ];
+          return item;
+        });
+      }
+      return props.data;
     });
     const dataSourceMap = computed(() => {
       return generateDataSourceMap(dataSource.value);
@@ -128,28 +143,17 @@ const _sfc_main = {
       return $index + 1;
     }
     function onRowClickHandler(options) {
-      options = isArray(options)[0] ? options[0] : options;
+      options = isArray(options) ? 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;
+      if (row.rowType === "expand" || !props.onRowClick) return;
       props.onRowClick(row, void 0, event);
     }
     function onContextmenuHandler(options) {
-      options = isArray(options)[0] ? options[0] : options;
+      options = isArray(options) ? options[0] : options;
       if (!options) return;
       const { rowData: row, event } = options;
-      if (row.rowType === "expand") return;
-      if (!props.onRowContextmenu) return;
+      if (row.rowType === "expand" || !props.onRowContextmenu) return;
       props.onRowContextmenu(row, void 0, event);
     }
     const isAllChecked = ref(false);
@@ -275,6 +279,8 @@ const _sfc_main = {
         width: __props.width,
         height: __props.height,
         "header-height": __props.showHeader ? 44 : 0,
+        "row-height": 50,
+        "estimated-row-height": 50,
         "expand-column-key": expandColumn.value?.key,
         fixed: "",
         "row-event-handlers": {
@@ -316,240 +322,318 @@ const _sfc_main = {
             /* 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(
+        row: withCtx(({ columns, depth, rowData: row, rowIndex: $index }) => [
+          createCommentVNode(" \u5C55\u5F00\u5185\u5BB9 "),
+          depth > 0 && isExpandTable.value ? renderSlot(_ctx.$slots, expandColumn.value.slot, {
+            key: 0,
+            row: dataSourceMap.value.get(row.dataKey)
+          }) : (openBlock(), createElementBlock(
             Fragment,
-            { key: 3 },
+            { key: 1 },
             [
-              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(HyTooltip), {
-                  key: cindex,
-                  "is-always": "",
-                  overLine: 1,
-                  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(HyIcon), {
-                        "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),
+              createCommentVNode(" \u5355\u5143\u683C\u5185\u5BB9 "),
+              createElementVNode("div", {
+                class: normalizeClass(["hy-el-table-v2__row is-customized", [
+                  `hy-el-table-v2__row-depth-${depth}`,
+                  { "is-expanded": expandedMap.value.has(getRowKey(row)) }
+                ]]),
+                role: "row",
+                rowkey: getRowKey(row)
+              }, [
+                (openBlock(true), createElementBlock(
+                  Fragment,
                   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, {
+                  renderList(columns, (column, cellIndex) => {
+                    return openBlock(), createElementBlock(
+                      "div",
+                      {
+                        key: cellIndex,
+                        class: "hy-el-table-v2__row-cell",
+                        role: "cell",
+                        style: normalizeStyle([{ "flex": "0 0 auto" }, { width: `${column.width}px` }])
+                      },
+                      [
+                        column.type === "expand" ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 0 },
+                          [
+                            row.children && row.children.length ? (openBlock(), createElementBlock("button", {
+                              key: 0,
+                              type: "button",
+                              "aria-label": "\u5C55\u5F00\u5F53\u524D\u884C",
+                              "aria-expanded": "false",
+                              class: normalizeClass(["hy-el-table-v2__expand-icon", { "is-expanded": expandedMap.value.has(getRowKey(row)) }]),
+                              onClick: withModifiers(($event) => onRowExpandSwitch({
+                                rowData: _ctx.rowData,
+                                rowKey: getRowKey(row)
+                              }), ["stop"])
+                            }, [
+                              createVNode(unref(ElIcon), {
+                                style: normalizeStyle({ "margin-inline-start": `${depth * 12}px` })
+                              }, {
+                                default: withCtx(() => [
+                                  createVNode(unref(ArrowRight))
+                                ]),
+                                _: 1
+                                /* STABLE */
+                              }, 8, ["style"])
+                            ], 10, ["onClick"])) : (openBlock(), createElementBlock(
+                              "div",
+                              {
+                                key: 1,
+                                class: "w-3 h-3",
+                                style: normalizeStyle({ "margin-inline-start": `${(depth + 1) * 12}px` })
+                              },
+                              null,
+                              4
+                              /* STYLE */
+                            ))
+                          ],
+                          64
+                          /* STABLE_FRAGMENT */
+                        )) : createCommentVNode("v-if", true),
+                        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 && (column.type !== "expand" || !isExpandTable.value) ? renderSlot(_ctx.$slots, column?.slot, mergeProps({
+                          key: 2,
+                          ref_for: true
+                        }, { 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,
-                              row,
-                              $index,
-                              cellIndex
-                            })
+                              { column, row, $index, cellIndex },
+                              "default"
+                            ), (citem, cindex) => {
+                              return openBlock(), createBlock(unref(HyTooltip), {
+                                key: cindex,
+                                "is-always": "",
+                                overLine: 1,
+                                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(HyIcon), {
+                                      "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_for: true,
+                            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, [
-                                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)
+                                createVNode(unref(HyTooltip), {
+                                  "is-always": "",
+                                  overLine: 1,
+                                  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, ["command", "disabled"]);
-                        }),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  },
-                  1024
-                  /* DYNAMIC_SLOTS */
-                )
-              ]),
-              default: withCtx(() => [
-                createElementVNode("span", null, [
-                  createVNode(unref(HyTooltip), {
-                    "is-always": "",
-                    overLine: 1,
-                    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(HyTooltip), {
-                key: 0,
-                "is-always": false,
-                "over-line": 2,
-                content: unref(renderContentHandler)(column, { column, row, $index, cellIndex })
-              }, null, 8, ["content"])) : (openBlock(), createElementBlock("span", {
-                key: 1,
-                class: "text-auxiliary"
-              }, "- -"))
+                          }, 1032, ["onCommand"])) : createCommentVNode("v-if", true)
+                        ], 40, ["onClick", "onContextmenu"])) : column.type === "default" ? (openBlock(), createElementBlock(
+                          Fragment,
+                          { key: 5 },
+                          [
+                            !unref(isEmpty)(
+                              unref(renderContentHandler)(column, {
+                                column,
+                                row,
+                                $index,
+                                cellIndex
+                              })
+                            ) ? (openBlock(), createBlock(unref(HyTooltip), {
+                              key: 0,
+                              "is-always": false,
+                              "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)
+                      ],
+                      4
+                      /* STYLE */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ], 10, ["rowkey"])
             ],
-            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 }))
+            2112
+            /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+          )) 
         ]),
         empty: withCtx(() => [
           renderSlot(_ctx.$slots, "empty")