@wlydfe/pro-ui 0.2.0

package/es/components/table/src/table-action-bar.vue2.mjs

@@ -0,0 +1,217 @@
+import { defineComponent, unref, h, openBlock, createBlock, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, resolveDynamicComponent, createVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
+import { ArrowDownBold } from '@element-plus/icons-vue';
+import { ElTooltip, ElIcon, ElButton, ElLink, ElMessageBox, ElTableColumn, ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus';
+import '../../utils/index.mjs';
+import '../../../hooks/index.mjs';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+import { isFunction, isPlainObject } from '../../utils/is.mjs';
+
+const _hoisted_1 = { class: "plus-table-action-bar__dropdown__link" };
+const _hoisted_2 = { class: "plus-table-action-bar__more-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusTableActionBar"
+  },
+  __name: "table-action-bar",
+  props: {
+    label: { default: "" },
+    fixed: { default: "right" },
+    showNumber: { default: 3 },
+    type: { default: "link" },
+    buttons: { default: () => [] },
+    width: { default: 200 },
+    actionBarTableColumnProps: { default: () => ({}) }
+  },
+  emits: ["clickAction", "clickActionConfirmCancel"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    const getSubButtons = (row, index) => {
+      const data = props.buttons.filter((item) => {
+        if (isFunction(item.show)) {
+          const tempFunction = item.show;
+          const isShow = tempFunction(row, index, item);
+          return unref(isShow) !== false;
+        }
+        return unref(item.show) !== false;
+      });
+      const preButtons = data.slice(0, props.showNumber);
+      const nextButtons = data.slice(props.showNumber);
+      const showMore = data.length > props.showNumber;
+      return {
+        showMore,
+        preButtons,
+        nextButtons
+      };
+    };
+    const render = (row, buttonRow, index) => {
+      if (props.type === "icon") {
+        return h(
+          ElTooltip,
+          { placement: "top", content: unref(buttonRow.text), ...buttonRow.tooltipProps },
+          () => h(
+            ElIcon,
+            {
+              size: 16,
+              ...buttonRow.props,
+              onClick: (event) => handleClickAction(row, buttonRow, index, event)
+            },
+            () => buttonRow.icon ? h(buttonRow.icon) : ""
+          )
+        );
+      } else {
+        const Tag = props.type === "button" ? ElButton : ElLink;
+        const defaultProps = props.type === "link" ? { href: "javaScript:;" } : {};
+        return h(
+          Tag,
+          {
+            size: "small",
+            ...defaultProps,
+            ...buttonRow.props,
+            onClick: (event) => handleClickAction(row, buttonRow, index, event)
+          },
+          () => {
+            if (isFunction(buttonRow.text)) {
+              const tempFunction = buttonRow.text;
+              const text = tempFunction(row, index, buttonRow);
+              return unref(text);
+            } else {
+              return unref(buttonRow.text);
+            }
+          }
+        );
+      }
+    };
+    const handleClickAction = (row, buttonRow, index, e) => {
+      var _a, _b;
+      const data = { row, buttonRow, index, e };
+      if (buttonRow.confirm) {
+        let message = t("plus.table.confirmToPerformThisOperation");
+        let title = t("plus.table.prompt");
+        let options = void 0;
+        let appContext = null;
+        if (isPlainObject(buttonRow.confirm) && typeof buttonRow.confirm !== "boolean") {
+          const tempTitle = isFunction(buttonRow.confirm.title) ? buttonRow.confirm.title(data) : buttonRow.confirm.title;
+          if (tempTitle) {
+            title = tempTitle;
+          }
+          const tempMessage = isFunction(buttonRow.confirm.message) ? buttonRow.confirm.message(data) : buttonRow.confirm.message;
+          if (tempMessage) {
+            message = tempMessage;
+          }
+          options = (_a = buttonRow.confirm) == null ? void 0 : _a.options;
+          appContext = (_b = buttonRow.confirm) == null ? void 0 : _b.appContext;
+        }
+        ElMessageBox.confirm(message, title, options, appContext).then(() => {
+          emit("clickAction", data);
+        }).catch(() => {
+          emit("clickActionConfirmCancel", data);
+        });
+      } else {
+        emit("clickAction", data);
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
+        key: "actionBar",
+        "class-name": "plus-table-action-bar",
+        align: "center",
+        label: _ctx.label || unref(t)("plus.table.action"),
+        fixed: _ctx.fixed || "right",
+        width: _ctx.width || 200
+      }, props.actionBarTableColumnProps), {
+        default: withCtx(({ row, $index }) => [
+          createCommentVNode(" \u663E\u793A\u51FA\u6765\u7684\u6309\u94AE "),
+          (openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(getSubButtons(row, $index).preButtons, (buttonRow) => {
+              return openBlock(), createBlock(resolveDynamicComponent(() => render(row, buttonRow, $index)), {
+                key: buttonRow.text
+              });
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          createCommentVNode(" \u9690\u85CF\u7684\u6309\u94AE "),
+          getSubButtons(row, $index).showMore ? (openBlock(), createBlock(
+            unref(ElDropdown),
+            {
+              key: 0,
+              trigger: "click",
+              class: "plus-table-action-bar__dropdown"
+            },
+            {
+              dropdown: withCtx(() => [
+                createVNode(
+                  unref(ElDropdownMenu),
+                  null,
+                  {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(
+                        Fragment,
+                        null,
+                        renderList(getSubButtons(row, $index).nextButtons, (buttonRow) => {
+                          return openBlock(), createBlock(
+                            unref(ElDropdownItem),
+                            {
+                              key: unref(buttonRow.text)
+                            },
+                            {
+                              default: withCtx(() => [
+                                (openBlock(), createBlock(resolveDynamicComponent(() => render(row, buttonRow, $index))))
+                              ]),
+                              _: 2
+                              /* DYNAMIC */
+                            },
+                            1024
+                            /* DYNAMIC_SLOTS */
+                          );
+                        }),
+                        128
+                        /* KEYED_FRAGMENT */
+                      ))
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1024
+                  /* DYNAMIC_SLOTS */
+                )
+              ]),
+              default: withCtx(() => [
+                createElementVNode("span", _hoisted_1, [
+                  createElementVNode(
+                    "span",
+                    _hoisted_2,
+                    toDisplayString(unref(t)("plus.table.more")),
+                    1
+                    /* TEXT */
+                  ),
+                  renderSlot(_ctx.$slots, "action-bar-more-icon", {}, () => [
+                    createVNode(unref(ElIcon), null, {
+                      default: withCtx(() => [
+                        createVNode(unref(ArrowDownBold))
+                      ]),
+                      _: 1
+                      /* STABLE */
+                    })
+                  ])
+                ])
+              ]),
+              _: 2
+              /* DYNAMIC */
+            },
+            1024
+            /* DYNAMIC_SLOTS */
+          )) : createCommentVNode("v-if", true)
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["label", "fixed", "width"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/table/src/table-column-drag-sort.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './table-column-drag-sort.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const PlusTableColumnDragSort = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "table-column-drag-sort.vue"]]);
+
+export { PlusTableColumnDragSort as default };

package/es/components/table/src/table-column-drag-sort.vue2.mjs

@@ -0,0 +1,74 @@
+import { defineComponent, watch, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, renderSlot, createTextVNode } from 'vue';
+import Sortable from 'sortablejs';
+import '../../utils/index.mjs';
+import '../../../hooks/index.mjs';
+import { ElTableColumn } from 'element-plus';
+import { useLocale } from '../../../hooks/useLocale.mjs';
+import { isPlainObject } from '../../utils/is.mjs';
+
+const _hoisted_1 = { class: "plus-table-column-drag-icon" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusTableColumnDragSort"
+  },
+  __name: "table-column-drag-sort",
+  props: {
+    sortable: { type: Boolean, default: true },
+    tableInstance: { default: null },
+    dragSortableTableColumnProps: { default: () => ({}) }
+  },
+  emits: ["dragSortEnd"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useLocale();
+    watch(
+      () => props.tableInstance,
+      (val) => {
+        if (val && props.sortable) {
+          rowDrop();
+        }
+      }
+    );
+    const rowDrop = () => {
+      var _a, _b;
+      const tbody = (_b = (_a = props.tableInstance) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(".el-table__body-wrapper tbody");
+      if (!tbody) return;
+      let config = {
+        handle: ".plus-table-column-drag-icon",
+        animation: 150,
+        group: "box",
+        easing: "cubic-bezier(1, 0, 0, 1)",
+        chosenClass: "sortable-chosen",
+        forceFallback: true,
+        onEnd({ newIndex, oldIndex }) {
+          emit("dragSortEnd", newIndex, oldIndex);
+        }
+      };
+      if (isPlainObject(props.sortable)) {
+        config = { ...config, ...props.sortable };
+      }
+      Sortable.create(tbody, config);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
+        key: "dragSort",
+        label: unref(t)("plus.table.sort"),
+        width: "60",
+        "class-name": "plus-table-column-drag-sort"
+      }, _ctx.dragSortableTableColumnProps), {
+        default: withCtx(() => [
+          createElementVNode("span", _hoisted_1, [
+            renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
+              _cache[0] || (_cache[0] = createTextVNode("\u2637"))
+            ])
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["label"]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/table/src/table-column-index.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './table-column-index.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const PlusTableTableColumnIndex = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "table-column-index.vue"]]);
+
+export { PlusTableTableColumnIndex as default };

package/es/components/table/src/table-column-index.vue2.mjs

@@ -0,0 +1,91 @@
+import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createElementVNode, normalizeStyle, toDisplayString, createElementBlock } from 'vue';
+import '../../../constants/index.mjs';
+import '../../utils/index.mjs';
+import { ElTableColumn, ElTooltip } from 'element-plus';
+import { DefaultPageInfo } from '../../../constants/page.mjs';
+import { isFunction, isPlainObject } from '../../utils/is.mjs';
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusTableTableColumnIndex"
+  },
+  __name: "table-column-index",
+  props: {
+    pageInfo: { default: () => ({ ...DefaultPageInfo }) },
+    indexTableColumnProps: { default: () => ({}) },
+    max: { default: 999 },
+    indexContentStyle: { type: [Object, Function], default: () => ({}) }
+  },
+  setup(__props) {
+    const props = __props;
+    const getTableIndex = (index) => {
+      var _a, _b;
+      const i = ((((_a = props.pageInfo) == null ? void 0 : _a.page) || DefaultPageInfo.page) - 1) * (((_b = props.pageInfo) == null ? void 0 : _b.pageSize) || DefaultPageInfo.page) + index + 1;
+      return +i;
+    };
+    const indexContentStyle = (row, index) => {
+      if (isFunction(props.indexContentStyle)) {
+        return props.indexContentStyle(row, index);
+      } else if (isPlainObject(props.indexContentStyle)) {
+        return props.indexContentStyle;
+      } else {
+        return {};
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(
+        unref(ElTableColumn),
+        mergeProps({
+          key: "index",
+          label: "#",
+          fixed: "left",
+          type: "index",
+          "class-name": "plus-table-column-index",
+          width: "60",
+          align: "center",
+          index: getTableIndex
+        }, _ctx.indexTableColumnProps),
+        {
+          default: withCtx(({ row, $index }) => [
+            getTableIndex($index) > 999 ? (openBlock(), createBlock(unref(ElTooltip), {
+              key: 0,
+              content: String(getTableIndex($index)),
+              placement: "top-start"
+            }, {
+              default: withCtx(() => [
+                createElementVNode(
+                  "div",
+                  {
+                    class: "plus-table-column-index__content",
+                    style: normalizeStyle(indexContentStyle(row, $index))
+                  },
+                  toDisplayString(getTableIndex($index)),
+                  5
+                  /* TEXT, STYLE */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["content"])) : (openBlock(), createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: "plus-table-column-index__content",
+                style: normalizeStyle(indexContentStyle(row, $index))
+              },
+              toDisplayString(getTableIndex($index)),
+              5
+              /* TEXT, STYLE */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        },
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/table/src/table-column.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './table-column.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const PlusTableColumnComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "table-column.vue"]]);
+
+export { PlusTableColumnComponent as default };

package/es/components/table/src/table-column.vue2.mjs

@@ -0,0 +1,161 @@
+import { defineComponent, shallowRef, inject, watch, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, mergeProps, withCtx, createElementVNode, createCommentVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createSlots } from 'vue';
+import { PlusDisplayItem } from '../../display-item/index.mjs';
+import { getTableKey, getTableHeaderSlotName, getTooltip, getFieldSlotName, getExtraSlotName, getTableCellSlotName } from '../../utils/index.mjs';
+import '../../../constants/index.mjs';
+import { QuestionFilled } from '@element-plus/icons-vue';
+import { PlusRender } from '../../render/index.mjs';
+import { ElTableColumn, ElTooltip, ElIcon } from 'element-plus';
+import { TableFormRefInjectionKey } from '../../../constants/form.mjs';
+import { isFunction } from '../../utils/is.mjs';
+
+const _hoisted_1 = { class: "plus-table-column__header" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "PlusTableTableColumn"
+  },
+  __name: "table-column",
+  props: {
+    columns: { default: () => [] }
+  },
+  emits: ["formChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const plusDisplayItemInstance = shallowRef();
+    const formRef = inject(TableFormRefInjectionKey);
+    watch(plusDisplayItemInstance, (event) => {
+      const data = {};
+      const list = (event == null ? void 0 : event.map((item) => ({ ...item, ...item == null ? void 0 : item.getDisplayItemInstance() }))) || [];
+      list.forEach((item) => {
+        if (!data[item.index]) {
+          data[item.index] = [];
+        }
+        data[item.index].push(item);
+      });
+      formRef.value = data;
+    });
+    const getKey = (item) => getTableKey(item, true);
+    const handleChange = (data, index, column, item) => {
+      emit("formChange", { ...data, index, column: { ...column, ...item } });
+    };
+    __expose({
+      plusDisplayItemInstance
+    });
+    return (_ctx, _cache) => {
+      return openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList(_ctx.columns, (item) => {
+          return openBlock(), createBlock(unref(ElTableColumn), mergeProps({
+            key: getKey(item),
+            "class-name": "plus-table-column"
+          }, { ref_for: true }, item.tableColumnProps, {
+            prop: item.prop,
+            width: item.width,
+            "min-width": item.minWidth
+          }), {
+            header: withCtx(() => [
+              createElementVNode("span", _hoisted_1, [
+                item.renderHeader && unref(isFunction)(item.renderHeader) ? (openBlock(), createBlock(unref(PlusRender), {
+                  key: 0,
+                  render: item.renderHeader,
+                  params: item,
+                  "callback-value": item.label
+                }, null, 8, ["render", "params", "callback-value"])) : (openBlock(), createElementBlock(
+                  Fragment,
+                  { key: 1 },
+                  [
+                    createCommentVNode("\u8868\u683C\u5355\u5143\u683CHeader\u7684\u63D2\u69FD "),
+                    renderSlot(_ctx.$slots, unref(getTableHeaderSlotName)(item.prop), {
+                      prop: item.prop,
+                      label: item.label,
+                      fieldProps: item.fieldProps,
+                      valueType: item.valueType,
+                      column: item
+                    }, () => [
+                      createTextVNode(
+                        toDisplayString(item.label),
+                        1
+                        /* TEXT */
+                      )
+                    ])
+                  ],
+                  2112
+                  /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                )),
+                item.tooltip ? (openBlock(), createBlock(
+                  unref(ElTooltip),
+                  mergeProps({
+                    key: 2,
+                    placement: "top"
+                  }, { ref_for: true }, unref(getTooltip)(item.tooltip)),
+                  {
+                    default: withCtx(() => [
+                      renderSlot(_ctx.$slots, "tooltip-icon", {}, () => [
+                        createVNode(unref(ElIcon), {
+                          class: "plus-table-column__header__icon",
+                          size: 16
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(QuestionFilled))
+                          ]),
+                          _: 1
+                          /* STABLE */
+                        })
+                      ])
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  },
+                  1040
+                  /* FULL_PROPS, DYNAMIC_SLOTS */
+                )) : createCommentVNode("v-if", true)
+              ])
+            ]),
+            default: withCtx(({ row, column, $index }) => [
+              createVNode(unref(PlusDisplayItem), {
+                ref_for: true,
+                ref_key: "plusDisplayItemInstance",
+                ref: plusDisplayItemInstance,
+                column: item,
+                row,
+                index: $index,
+                onChange: (data) => handleChange(data, $index, column, item)
+              }, createSlots({
+                _: 2
+                /* DYNAMIC */
+              }, [
+                _ctx.$slots[unref(getFieldSlotName)(item.prop)] ? {
+                  name: unref(getFieldSlotName)(item.prop),
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, unref(getFieldSlotName)(item.prop), mergeProps({ ref_for: true }, data))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.$slots[unref(getExtraSlotName)(item.prop)] ? {
+                  name: unref(getExtraSlotName)(item.prop),
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, unref(getExtraSlotName)(item.prop), mergeProps({ ref_for: true }, data))
+                  ]),
+                  key: "1"
+                } : void 0,
+                _ctx.$slots[unref(getTableCellSlotName)(item.prop)] ? {
+                  name: unref(getTableCellSlotName)(item.prop),
+                  fn: withCtx((data) => [
+                    renderSlot(_ctx.$slots, unref(getTableCellSlotName)(item.prop), mergeProps({ ref_for: true }, data))
+                  ]),
+                  key: "2"
+                } : void 0
+              ]), 1032, ["column", "row", "index", "onChange"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, 1040, ["prop", "width", "min-width"]);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };