@wlydfe/pro-ui 0.2.0

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

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

package/lib/components/table/src/table-column-drag-sort.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tableColumnDragSort_vue_vue_type_script_setup_true_lang = require('./table-column-drag-sort.vue2.js');
+const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+const PlusTableColumnDragSort = /* @__PURE__ */ _pluginVue_exportHelper.default(tableColumnDragSort_vue_vue_type_script_setup_true_lang.default, [["__file", "table-column-drag-sort.vue"]]);
+
+exports.default = PlusTableColumnDragSort;

package/lib/components/table/src/table-column-drag-sort.vue2.js

@@ -0,0 +1,78 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const vue = require('vue');
+const Sortable = require('sortablejs');
+require('../../utils/index.js');
+require('../../../hooks/index.js');
+const elementPlus = require('element-plus');
+const useLocale = require('../../../hooks/useLocale.js');
+const is = require('../../utils/is.js');
+
+const _hoisted_1 = { class: "plus-table-column-drag-icon" };
+const _sfc_main = /* @__PURE__ */ vue.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.useLocale();
+    vue.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 (is.isPlainObject(props.sortable)) {
+        config = { ...config, ...props.sortable };
+      }
+      Sortable.create(tbody, config);
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTableColumn), vue.mergeProps({
+        key: "dragSort",
+        label: vue.unref(t)("plus.table.sort"),
+        width: "60",
+        "class-name": "plus-table-column-drag-sort"
+      }, _ctx.dragSortableTableColumnProps), {
+        default: vue.withCtx(() => [
+          vue.createElementVNode("span", _hoisted_1, [
+            vue.renderSlot(_ctx.$slots, "drag-sort-icon", {}, () => [
+              _cache[0] || (_cache[0] = vue.createTextVNode("\u2637"))
+            ])
+          ])
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 16, ["label"]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/table/src/table-column-index.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tableColumnIndex_vue_vue_type_script_setup_true_lang = require('./table-column-index.vue2.js');
+const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+const PlusTableTableColumnIndex = /* @__PURE__ */ _pluginVue_exportHelper.default(tableColumnIndex_vue_vue_type_script_setup_true_lang.default, [["__file", "table-column-index.vue"]]);
+
+exports.default = PlusTableTableColumnIndex;

package/lib/components/table/src/table-column-index.vue2.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const vue = require('vue');
+require('../../../constants/index.js');
+require('../../utils/index.js');
+const elementPlus = require('element-plus');
+const page = require('../../../constants/page.js');
+const is = require('../../utils/is.js');
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "PlusTableTableColumnIndex"
+  },
+  __name: "table-column-index",
+  props: {
+    pageInfo: { default: () => ({ ...page.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) || page.DefaultPageInfo.page) - 1) * (((_b = props.pageInfo) == null ? void 0 : _b.pageSize) || page.DefaultPageInfo.page) + index + 1;
+      return +i;
+    };
+    const indexContentStyle = (row, index) => {
+      if (is.isFunction(props.indexContentStyle)) {
+        return props.indexContentStyle(row, index);
+      } else if (is.isPlainObject(props.indexContentStyle)) {
+        return props.indexContentStyle;
+      } else {
+        return {};
+      }
+    };
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(
+        vue.unref(elementPlus.ElTableColumn),
+        vue.mergeProps({
+          key: "index",
+          label: "#",
+          fixed: "left",
+          type: "index",
+          "class-name": "plus-table-column-index",
+          width: "60",
+          align: "center",
+          index: getTableIndex
+        }, _ctx.indexTableColumnProps),
+        {
+          default: vue.withCtx(({ row, $index }) => [
+            getTableIndex($index) > 999 ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElTooltip), {
+              key: 0,
+              content: String(getTableIndex($index)),
+              placement: "top-start"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode(
+                  "div",
+                  {
+                    class: "plus-table-column-index__content",
+                    style: vue.normalizeStyle(indexContentStyle(row, $index))
+                  },
+                  vue.toDisplayString(getTableIndex($index)),
+                  5
+                  /* TEXT, STYLE */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, 1032, ["content"])) : (vue.openBlock(), vue.createElementBlock(
+              "div",
+              {
+                key: 1,
+                class: "plus-table-column-index__content",
+                style: vue.normalizeStyle(indexContentStyle(row, $index))
+              },
+              vue.toDisplayString(getTableIndex($index)),
+              5
+              /* TEXT, STYLE */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        },
+        16
+        /* FULL_PROPS */
+      );
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/table/src/table-column.vue.js

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const tableColumn_vue_vue_type_script_setup_true_lang = require('./table-column.vue2.js');
+const _pluginVue_exportHelper = require('../../../_virtual/_plugin-vue_export-helper.js');
+
+const PlusTableColumnComponent = /* @__PURE__ */ _pluginVue_exportHelper.default(tableColumn_vue_vue_type_script_setup_true_lang.default, [["__file", "table-column.vue"]]);
+
+exports.default = PlusTableColumnComponent;

package/lib/components/table/src/table-column.vue2.js

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