@wlydfe/pro-ui 0.2.21 → 0.2.24

package/lib/components/table/src/table-title-bar.vue2.js

@@ -0,0 +1,493 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var iconsVue = require('@element-plus/icons-vue');
+var index$1 = require('../../popover/index.js');
+require('../../../hooks/index.js');
+var index = require('../../utils/index.js');
+var elementPlus = require('element-plus');
+var Sortable = require('sortablejs');
+var useLocale = require('../../../hooks/useLocale.js');
+var is = require('../../utils/is.js');
+
+const _hoisted_1 = { class: "plus-table-title-bar" };
+const _hoisted_2 = { class: "plus-table-title-bar__title" };
+const _hoisted_3 = { class: "plus-table-title-bar__toolbar" };
+const _hoisted_4 = { class: "plus-table-title-bar__toolbar__density" };
+const _hoisted_5 = /* @__PURE__ */ vue.createElementVNode(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    focusable: "false",
+    "data-icon": "column-height",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  },
+  [
+    /* @__PURE__ */ vue.createElementVNode("path", { d: "M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z" })
+  ],
+  -1
+  /* HOISTED */
+);
+const _hoisted_6 = { class: "plus-table-checkbox-checkAll" };
+const _hoisted_7 = {
+  key: 0,
+  class: "plus-table-checkbox-handle"
+};
+const _hoisted_8 = { key: 1 };
+const _hoisted_9 = { key: 1 };
+var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusTableToolbar"
+  },
+  __name: "table-title-bar",
+  props: {
+    columns: { default: () => [] },
+    titleBar: { type: [Boolean, Object], default: true },
+    defaultSize: { default: "default" },
+    columnsIsChange: { type: Boolean, default: false }
+  },
+  emits: ["filterTableHeader", "clickDensity", "refresh"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale.useLocale();
+    const checkboxGroupInstance = vue.ref(null);
+    const titleBarConfig = vue.computed(() => props.titleBar);
+    const iconSize = vue.computed(() => {
+      var _a, _b;
+      return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.size) || 18;
+    });
+    const iconColor = vue.computed(() => {
+      var _a, _b;
+      return ((_b = (_a = titleBarConfig.value) == null ? void 0 : _a.icon) == null ? void 0 : _b.color) || "";
+    });
+    const columnSetting = vue.computed(() => {
+      var _a;
+      return (_a = titleBarConfig.value) == null ? void 0 : _a.columnSetting;
+    });
+    const columnSettingPopoverWidth = vue.computed(() => {
+      var _a;
+      return ((_a = columnSetting.value) == null ? void 0 : _a.popoverWidth) || 100;
+    });
+    const overflowLabelLength = vue.computed(() => {
+      var _a;
+      return ((_a = columnSetting.value) == null ? void 0 : _a.overflowLabelLength) || 6;
+    });
+    const sortable = vue.ref(null);
+    const buttonNameDensity = [
+      {
+        size: "default",
+        text: vue.computed(() => t("plus.table.default"))
+      },
+      {
+        size: "large",
+        text: vue.computed(() => t("plus.table.loose"))
+      },
+      {
+        size: "small",
+        text: vue.computed(() => t("plus.table.compact"))
+      }
+    ];
+    const getCheckList = (hasDisabled = false) => {
+      if (hasDisabled) {
+        return props.columns.filter((item) => item.disabledHeaderFilter === true).filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
+      }
+      return props.columns.filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
+    };
+    const state = vue.reactive({
+      checkAll: true,
+      isIndeterminate: false,
+      bigImageVisible: false,
+      srcList: [],
+      checkList: []
+    });
+    const setCheckAllState = (value) => {
+      const checkedCount = value.length;
+      state.checkAll = checkedCount === props.columns.length;
+      state.isIndeterminate = checkedCount > 0 && checkedCount < props.columns.length;
+    };
+    vue.watch(
+      () => props.columnsIsChange,
+      () => {
+        state.checkList = getCheckList();
+        setCheckAllState(state.checkList);
+      },
+      {
+        immediate: true
+      }
+    );
+    const handleCheckAllChange = (val) => {
+      state.checkList = val ? props.columns.map((item) => index.getTableKey(item)) : props.columns.filter((item) => item.disabledHeaderFilter === true).map((item) => index.getTableKey(item));
+      setCheckAllState(state.checkList);
+      handleFilterTableConfirm("allCheck");
+    };
+    const handleFilterTableConfirm = (type) => {
+      const filterColumns = props.columns.map((item) => {
+        if (state.checkList.includes(index.getTableKey(item))) {
+          return { ...item, headerIsChecked: true };
+        }
+        return { ...item, headerIsChecked: false };
+      });
+      emit("filterTableHeader", filterColumns, type);
+    };
+    const handleCheckGroupChange = (value) => {
+      setCheckAllState(value);
+      handleFilterTableConfirm("check");
+    };
+    const handleClickDensity = (size) => {
+      emit("clickDensity", size);
+    };
+    const handleRefresh = () => {
+      emit("refresh");
+    };
+    const getLabelValue = (label) => {
+      const tempLabel = index.getLabel(label);
+      if (tempLabel && (tempLabel == null ? void 0 : tempLabel.length) <= overflowLabelLength.value) {
+        return tempLabel;
+      }
+      return (tempLabel == null ? void 0 : tempLabel.slice(0, overflowLabelLength.value)) + "...";
+    };
+    const handleDrop = () => {
+      var _a;
+      if (!checkboxGroupInstance.value) return;
+      let config = {
+        onEnd: handleDragEnd,
+        ghostClass: "plus-table-ghost-class"
+      };
+      const dragSort = (_a = columnSetting.value) == null ? void 0 : _a.dragSort;
+      if (is.isPlainObject(dragSort)) {
+        config = { ...config, ...dragSort, handle: ".plus-table-checkbox-handle" };
+      }
+      sortable.value = new Sortable(checkboxGroupInstance.value, config);
+    };
+    const handleDragEnd = (event) => {
+      const subDragCheckboxList = [...props.columns];
+      const draggedCheckbox = props.columns[event.oldIndex];
+      subDragCheckboxList.splice(event.oldIndex, 1);
+      subDragCheckboxList.splice(event.newIndex, 0, draggedCheckbox);
+      const list = subDragCheckboxList.filter((item) => item);
+      emit("filterTableHeader", list, "drag");
+    };
+    const resetCheckBoxList = () => {
+      state.checkList = props.columns.filter((item) => vue.unref(item.headerIsChecked) !== false).map((item) => index.getTableKey(item));
+      setCheckAllState(state.checkList);
+      const filterColumns = props.columns.map((item) => ({ ...item }));
+      emit("filterTableHeader", filterColumns, "reset");
+    };
+    vue.onMounted(() => {
+      var _a;
+      const dragSort = (_a = columnSetting.value) == null ? void 0 : _a.dragSort;
+      if (dragSort !== false) {
+        if (checkboxGroupInstance.value) {
+          handleDrop();
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      var _a, _b, _c;
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createElementVNode("div", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "title", {}, () => [
+            vue.createTextVNode(
+              vue.toDisplayString(titleBarConfig.value.title),
+              1
+              /* TEXT */
+            )
+          ])
+        ]),
+        vue.createElementVNode("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "toolbar"),
+          ((_a = titleBarConfig.value) == null ? void 0 : _a.refresh) === true ? (vue.openBlock(), vue.createElementBlock("span", {
+            key: 0,
+            class: "plus-table-title-bar__toolbar__refresh",
+            onClick: handleRefresh
+          }, [
+            vue.createVNode(vue.unref(elementPlus.ElTooltip), {
+              effect: "dark",
+              content: vue.unref(t)("plus.table.refresh"),
+              placement: "top"
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "refresh-icon", {}, () => [
+                  vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                    size: iconSize.value,
+                    color: iconColor.value,
+                    class: "plus-table-title-bar__toolbar__icon"
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(iconsVue.RefreshRight))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["size", "color"])
+                ])
+              ]),
+              _: 3
+              /* FORWARDED */
+            }, 8, ["content"])
+          ])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u8868\u683C\u5BC6\u5EA6 "),
+          ((_b = titleBarConfig.value) == null ? void 0 : _b.density) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusPopover), {
+            key: 1,
+            placement: "bottom",
+            width: 200,
+            trigger: "click",
+            title: vue.unref(t)("plus.table.density")
+          }, {
+            reference: vue.withCtx(() => [
+              vue.createVNode(vue.unref(elementPlus.ElTooltip), {
+                effect: "dark",
+                content: vue.unref(t)("plus.table.density"),
+                placement: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "density-icon", {}, () => [
+                    vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                      size: iconSize.value,
+                      color: iconColor.value,
+                      class: "plus-table-title-bar__toolbar__icon"
+                    }, {
+                      default: vue.withCtx(() => [
+                        _hoisted_5
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["size", "color"])
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["content"])
+            ]),
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_4, [
+                (vue.openBlock(), vue.createElementBlock(
+                  vue.Fragment,
+                  null,
+                  vue.renderList(buttonNameDensity, (item) => {
+                    return vue.createVNode(vue.unref(elementPlus.ElButton), {
+                      key: item.size,
+                      plain: _ctx.defaultSize !== item.size,
+                      type: "primary",
+                      size: "small",
+                      onClick: ($event) => handleClickDensity(item.size)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createTextVNode(
+                          vue.toDisplayString(vue.unref(item.text)),
+                          1
+                          /* TEXT */
+                        )
+                      ]),
+                      _: 2
+                      /* DYNAMIC */
+                    }, 1032, ["plain", "onClick"]);
+                  }),
+                  64
+                  /* STABLE_FRAGMENT */
+                ))
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["title"])) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u5217\u8BBE\u7F6E "),
+          ((_c = titleBarConfig.value) == null ? void 0 : _c.columnSetting) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.PlusPopover), {
+            key: 2,
+            placement: "bottom",
+            width: columnSettingPopoverWidth.value,
+            trigger: "click",
+            title: vue.unref(t)("plus.table.columnSettings")
+          }, {
+            reference: vue.withCtx(() => [
+              vue.createVNode(vue.unref(elementPlus.ElTooltip), {
+                effect: "dark",
+                content: vue.unref(t)("plus.table.columnSettings"),
+                placement: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "column-settings-icon", {}, () => [
+                    vue.createVNode(vue.unref(elementPlus.ElIcon), {
+                      size: iconSize.value,
+                      color: iconColor.value,
+                      class: "plus-table-title-bar__toolbar__icon"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(iconsVue.Setting))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    }, 8, ["size", "color"])
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["content"])
+            ]),
+            default: vue.withCtx(() => {
+              var _a2, _b2, _c2;
+              return [
+                vue.createElementVNode("div", _hoisted_6, [
+                  vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
+                    modelValue: state.checkAll,
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.checkAll = $event),
+                    indeterminate: state.isIndeterminate,
+                    onChange: handleCheckAllChange
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(vue.unref(t)("plus.table.selectAll")),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 8, ["modelValue", "indeterminate"]),
+                  ((_a2 = columnSetting.value) == null ? void 0 : _a2.reset) !== false ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElLink), vue.mergeProps({
+                    key: 0,
+                    type: "primary",
+                    underline: vue.unref(index.versionIsLessThan299) ? false : "never",
+                    href: "javaScript:;"
+                  }, vue.unref(is.isPlainObject)((_b2 = columnSetting.value) == null ? void 0 : _b2.reset) ? (_c2 = columnSetting.value) == null ? void 0 : _c2.reset : {}, {
+                    onClick: vue.withModifiers(resetCheckBoxList, ["stop", "prevent"])
+                  }), {
+                    default: vue.withCtx(() => [
+                      vue.createTextVNode(
+                        vue.toDisplayString(vue.unref(t)("plus.table.resetText")),
+                        1
+                        /* TEXT */
+                      )
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }, 16, ["underline"])) : vue.createCommentVNode("v-if", true)
+                ]),
+                vue.createVNode(vue.unref(elementPlus.ElCheckboxGroup), {
+                  modelValue: state.checkList,
+                  "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.checkList = $event),
+                  onChange: handleCheckGroupChange
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createElementVNode(
+                      "div",
+                      {
+                        ref_key: "checkboxGroupInstance",
+                        ref: checkboxGroupInstance,
+                        class: "plus-table-checkbox-sortable-list"
+                      },
+                      [
+                        (vue.openBlock(true), vue.createElementBlock(
+                          vue.Fragment,
+                          null,
+                          vue.renderList(_ctx.columns, (item) => {
+                            var _a3;
+                            return vue.openBlock(), vue.createElementBlock("div", {
+                              key: item.prop,
+                              class: "plus-table-checkbox-item"
+                            }, [
+                              ((_a3 = columnSetting.value) == null ? void 0 : _a3.dragSort) !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+                                vue.renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
+                                  vue.createTextVNode("\u2637")
+                                ])
+                              ])) : vue.createCommentVNode("v-if", true),
+                              vue.createCommentVNode(" element-plus \u7248\u672C\u53F7\u5C0F\u4E8E2.6.0 "),
+                              vue.unref(index.versionIsLessThan260) ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElCheckbox), {
+                                key: 1,
+                                label: vue.unref(index.getTableKey)(item),
+                                disabled: item.disabledHeaderFilter,
+                                class: "plus-table-title-bar__toolbar__checkbox__item"
+                              }, {
+                                default: vue.withCtx(() => [
+                                  vue.unref(index.getLabel)(item.label).length > overflowLabelLength.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
+                                    key: 0,
+                                    content: vue.unref(index.getLabel)(item.label),
+                                    placement: "right-start"
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createTextVNode(
+                                        vue.toDisplayString(getLabelValue(item.label)),
+                                        1
+                                        /* TEXT */
+                                      )
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
+                                    "span",
+                                    _hoisted_8,
+                                    vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
+                                    1
+                                    /* TEXT */
+                                  ))
+                                ]),
+                                _: 2
+                                /* DYNAMIC */
+                              }, 1032, ["label", "disabled"])) : (vue.openBlock(), vue.createElementBlock(
+                                vue.Fragment,
+                                { key: 2 },
+                                [
+                                  vue.createCommentVNode(" element-plus \u7248\u672C\u53F7\u5927\u4E8E\u7B49\u4E8E2.6.0 "),
+                                  vue.createVNode(vue.unref(elementPlus.ElCheckbox), {
+                                    value: vue.unref(index.getTableKey)(item),
+                                    disabled: item.disabledHeaderFilter,
+                                    class: "plus-table-title-bar__toolbar__checkbox__item"
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.unref(index.getLabel)(item.label).length > overflowLabelLength.value ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
+                                        key: 0,
+                                        content: vue.unref(index.getLabel)(item.label),
+                                        placement: "right-start"
+                                      }, {
+                                        default: vue.withCtx(() => [
+                                          vue.createTextVNode(
+                                            vue.toDisplayString(getLabelValue(item.label)),
+                                            1
+                                            /* TEXT */
+                                          )
+                                        ]),
+                                        _: 2
+                                        /* DYNAMIC */
+                                      }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
+                                        "span",
+                                        _hoisted_9,
+                                        vue.toDisplayString(item.label ? getLabelValue(item.label) : ""),
+                                        1
+                                        /* TEXT */
+                                      ))
+                                    ]),
+                                    _: 2
+                                    /* DYNAMIC */
+                                  }, 1032, ["value", "disabled"])
+                                ],
+                                64
+                                /* STABLE_FRAGMENT */
+                              ))
+                            ]);
+                          }),
+                          128
+                          /* KEYED_FRAGMENT */
+                        ))
+                      ],
+                      512
+                      /* NEED_PATCH */
+                    )
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                }, 8, ["modelValue"])
+              ];
+            }),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["width", "title"])) : vue.createCommentVNode("v-if", true)
+        ])
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;