el-plus 0.0.17 → 0.0.19

package/dist/index.full.js

@@ -1,10 +1,10 @@
-/*! ElPlus v0.0.17 */
+/*! ElPlus v0.0.19 */
 
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus'), require('@vue/shared'), require('axios'), require('js-cookie'), require('defu'), require('qs'), require('element-plus/es/components/table/src/table/defaults'), require('@element-plus/icons-vue'), require('mitt'), require('@vueuse/core'), require('vue-router')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus', '@vue/shared', 'axios', 'js-cookie', 'defu', 'qs', 'element-plus/es/components/table/src/table/defaults', '@element-plus/icons-vue', 'mitt', '@vueuse/core', 'vue-router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElPlus = {}, global.Vue, global.ElementPlus, global.shared, global.axios, global.Cookies, global.defu, global.qs, global.elTableProps, global.iconsVue, global.mitt, global.core, global.vueRouter));
-})(this, (function (exports, vue, elementPlus, shared, axios, Cookies, defu, qs, elTableProps, iconsVue, mitt, core, vueRouter) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('element-plus'), require('@vue/shared'), require('axios'), require('js-cookie'), require('defu'), require('qs'), require('element-plus/es/components/table/src/table/defaults'), require('@element-plus/icons-vue'), require('mitt'), require('lodash-unified'), require('@vueuse/core'), require('vue-router')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'element-plus', '@vue/shared', 'axios', 'js-cookie', 'defu', 'qs', 'element-plus/es/components/table/src/table/defaults', '@element-plus/icons-vue', 'mitt', 'lodash-unified', '@vueuse/core', 'vue-router'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ElPlus = {}, global.Vue, global.ElementPlus, global.shared, global.axios, global.Cookies, global.defu, global.qs, global.elTableProps, global.iconsVue, global.mitt, global.lodashUnified, global.core, global.vueRouter));
+})(this, (function (exports, vue, elementPlus, shared, axios, Cookies, defu, qs, elTableProps, iconsVue, mitt, lodashUnified, core, vueRouter) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -949,7 +949,9 @@
       });
     }
     if (render) {
-      scopedSlots.default = render;
+      scopedSlots.default = () => {
+        return render(attrs["table-scope"]);
+      };
     }
     return {
       scopedSlots
@@ -1054,7 +1056,7 @@
     }
   });
 
-  var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpForm",
       inheritAttrs: false
@@ -1152,7 +1154,7 @@
     }
   });
 
-  const EpForm = withInstall(_sfc_main$8);
+  const EpForm = withInstall(_sfc_main$9);
 
   const { t: t$2 } = useLocale();
   const inputProps = {
@@ -1181,7 +1183,7 @@
   };
   const inputEmitsKeys = Object.keys(inputEmits);
 
-  var _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpInput",
       inheritAttrs: false
@@ -1315,7 +1317,7 @@
     }
   });
 
-  const EpInput = withInstall(_sfc_main$7);
+  const EpInput = withInstall(_sfc_main$8);
 
   function _isSlot$1(s) {
     return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
@@ -1408,6 +1410,7 @@
     } = useLocale();
     const {
       scopedSlots = {},
+      instance,
       render,
       destroyOnClose,
       onConfirm,
@@ -1483,10 +1486,10 @@
     });
     if (render) {
       const container = document.createElement("div");
-      const instance = vue.getCurrentInstance();
+      const newInstance = instance || vue.getCurrentInstance();
       const vnode = vue.h(Dialog);
-      if (instance && instance.appContext) {
-        vnode.appContext = instance.appContext;
+      if (newInstance && newInstance.appContext) {
+        vnode.appContext = newInstance.appContext;
       }
       vue.render(vnode, container);
       document.body.appendChild(container);
@@ -1636,7 +1639,7 @@
     }
   };
 
-  var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpCustomColumn",
       inheritAttrs: false
@@ -1841,7 +1844,7 @@
     }
   });
 
-  const EpCustomColumn = withInstall(_sfc_main$6);
+  const EpCustomColumn = withInstall(_sfc_main$7);
 
   const inheritTableProps = {
     ...elTableProps,
@@ -1915,8 +1918,8 @@
       type: Array,
       default: () => []
     },
-    // 链接列
-    linkProps: {
+    // 格式化列
+    formatColumns: {
       type: Array,
       default: () => []
     },
@@ -1938,6 +1941,38 @@
   const tableEmits = [...elementPlus.ElTable.emits, "single-selection-change"];
   const tableEmitsKeys = tableEmits;
 
+  const bem$1 = createNameSpace("form-dialog");
+  const useFormDialog = (options = {}) => {
+    const {
+      dialogProps,
+      title,
+      ...formProps
+    } = options;
+    const formRef = vue.ref();
+    let formData = formProps.formData || vue.reactive({});
+    return useDialog({
+      class: bem$1.b(),
+      width: "80%",
+      title,
+      render: (props) => {
+        return vue.createVNode(EpForm, vue.mergeProps({
+          "ref": formRef,
+          "modelValue": formData,
+          "onUpdate:modelValue": ($event) => formData = $event
+        }, {
+          col: 1,
+          "label-width": "auto",
+          ...formProps
+        }), null);
+      },
+      onConfirm: async (resolve) => {
+        await formRef.value.validate();
+        resolve(formData);
+      },
+      ...dialogProps
+    });
+  };
+
   const useTable$1 = (props) => {
     const elFormRef = vue.useTemplateRef("elFormRef");
     const elTableRef = vue.useTemplateRef("elTableRef");
@@ -1973,14 +2008,11 @@
       }
     });
     const customColumns = vue.ref([]);
+    const attrs = vue.useAttrs();
     const search = async (init = false, isPagination = false) => {
-      if (props.customColumnModule) {
-        loading.value = true;
-        const columns = await bus.once("loadedCustomColumn");
-        customColumns.value = columns;
-        bus.on("loadedCustomColumn", (columns2) => {
-          customColumns.value = columns2;
-        });
+      const beforeSearch = attrs["before-search"];
+      if (typeof beforeSearch === "function") {
+        await beforeSearch?.();
       }
       if (init) {
         pagination.pageNo = 1;
@@ -1998,7 +2030,8 @@
         if (props.api) {
           requestFn({
             pageNo: pagination.pageNo,
-            pageSize: pagination.pageSize
+            pageSize: pagination.pageSize,
+            pageNum: pagination.pageNo
           });
         } else if (props.data?.length) {
           customData.value = props.data;
@@ -2009,9 +2042,20 @@
       pagination,
       paginationProps
     } = usePagination(props, search);
-    if (props.isInitSearch) {
-      search(true);
-    }
+    (async () => {
+      if (props.isInitSearch) {
+        if (props.customColumnModule) {
+          loading.value = true;
+          const columns = await bus.once("loadedCustomColumn");
+          loading.value = false;
+          customColumns.value = columns;
+          bus.on("loadedCustomColumn", (columns2) => {
+            customColumns.value = columns2;
+          });
+        }
+        search(true);
+      }
+    })();
     const validate = () => {
       return elFormRef.value.validate();
     };
@@ -2075,6 +2119,7 @@
     };
   };
   const useTableColumn = (props, tableData, customColumns) => {
+    const instance = vue.getCurrentInstance();
     const columnProps = (column) => {
       const attrs = {
         "show-overflow-tooltip": true,
@@ -2087,16 +2132,50 @@
         if (typeof column.required === "function") {
           required = column.required();
         }
-        if (required) {
-          attrs["renderHeader"] = (data) => {
-            const {
-              column: column2
-            } = data;
-            return vue.createVNode("span", null, [vue.createVNode("span", {
-              "style": "color:var(--el-color-danger)"
-            }, [vue.createTextVNode(" * ")]), column2.label]);
-          };
-        }
+        const editable = column.editable;
+        attrs["renderHeader"] = () => {
+          return vue.createVNode("span", null, [required ? vue.createVNode("span", {
+            "style": "color:var(--el-color-danger)"
+          }, [vue.createTextVNode(" * ")]) : "", vue.createVNode("span", {
+            "class": {
+              "is-edit": editable
+            },
+            "onClick": editable ? async () => {
+              const cloneColumn = {
+                ...column
+              };
+              delete cloneColumn.editable;
+              const rawRender = cloneColumn.render;
+              const formData = vue.reactive({});
+              if (rawRender) {
+                cloneColumn.render = () => {
+                  return rawRender({
+                    row: formData
+                  });
+                };
+              }
+              const formDialog = useFormDialog({
+                title: cloneColumn.label,
+                dialogProps: {
+                  destroyOnClose: true,
+                  instance
+                },
+                formItemList: [cloneColumn],
+                formData
+                // formData: reactive({}),
+              });
+              const data = await formDialog.open();
+              (tableData.value || []).forEach((item) => {
+                item[column.prop] = data[column.prop];
+              });
+              if (typeof editable === "function") {
+                editable(vue.toRaw(data));
+              }
+            } : void 0
+          }, [column.label, editable ? vue.createVNode(elementPlus.ElIcon, null, {
+            default: () => [vue.createVNode(iconsVue.EditPen, null, null)]
+          }) : ""])]);
+        };
       }
       if (column.filter) {
         const arr = tableData.value.map((item) => item[column.prop]);
@@ -2110,29 +2189,31 @@
           return row[column.prop] === value;
         };
       }
+      if (column.type === "EpLink") {
+        attrs.className = "table-column-link";
+      }
       return {
         ...attrs,
         ...prepareProps(column)
       };
     };
     const columnList = vue.computed(() => {
-      let columns = props.columns;
-      if (props.customColumnModule) {
-        columns = customColumns.value;
-      }
-      return columns.filter((column) => {
-        if (props.linkProps.length) {
-          const linkColumn = props.linkProps.find((item) => item.prop === column.prop);
-          if (linkColumn) {
-            column.type = "EpButtons";
-            column.className = "table-column-link";
-            column.props = {
-              list: [linkColumn],
-              type: "text",
-              ...column.props
+      const columns = props.customColumnModule ? customColumns.value : props.columns;
+      return columns.map((column) => {
+        let newColumn = {
+          ...column
+        };
+        if (props.formatColumns.length) {
+          const formatColumn = props.formatColumns.find((item) => item.prop === column.prop);
+          if (formatColumn) {
+            newColumn = {
+              ...newColumn,
+              ...formatColumn
             };
           }
         }
+        return newColumn;
+      }).filter((column) => {
         if ("show" in column) {
           return typeof column.show === "function" ? column.show(column) : column.show;
         } else if ("hide" in column) {
@@ -2147,7 +2228,8 @@
     };
   };
   const useTableFormItem = (props) => {
-    const formItemProps = (scope, item) => {
+    const formItemProps = (scope, rawItem) => {
+      const item = lodashUnified.cloneDeep(rawItem);
       let required = item.required;
       if (typeof required === "function") {
         required = required();
@@ -2182,10 +2264,19 @@
           }
         });
       }
+      if (item.type === "EpLink") {
+        (item.props ? item.props : item.props = {}).content = item.props.content || scope.row[item.prop];
+      }
       for (const key in item) {
         if (key.startsWith("on") && typeof item[key] === "function") {
           const fn = item[key];
-          item[key] = (...args) => fn(...args, scope);
+          item[key] = (...args) => {
+            let event;
+            if (args[0] instanceof Event) {
+              event = args.shift();
+            }
+            return fn(...args, scope, event);
+          };
         }
       }
       return {
@@ -2207,7 +2298,7 @@
     };
   };
 
-  var _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpTable",
       inheritAttrs: false
@@ -2355,12 +2446,13 @@
               }, {
                 ref_for: true
               }, vue.unref(columnProps)(item)), {
-                default: vue.withCtx((scope) => [item.type ? (vue.openBlock(), vue.createBlock(vue.unref(EpFormItem), vue.mergeProps({
+                default: vue.withCtx((scope) => [item.type || item.render ? (vue.openBlock(), vue.createBlock(vue.unref(EpFormItem), vue.mergeProps({
                   key: 0,
-                  "form-data": scope.row
+                  "form-data": scope.row,
+                  "table-scope": scope
                 }, {
                   ref_for: true
-                }, vue.unref(formItemProps)(scope, item)), null, 16, ["form-data"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+                }, vue.unref(formItemProps)(scope, item)), null, 16, ["form-data", "table-scope"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                   key: 1
                 }, [vue.createTextVNode(vue.toDisplayString(scope.row[item.prop]), 1)], 64))]),
                 _: 2
@@ -2392,7 +2484,7 @@
     }
   });
 
-  const EpTable = withInstall(_sfc_main$5);
+  const EpTable = withInstall(_sfc_main$6);
 
   const searchListPageProps = {
     ...apiProps,
@@ -2426,9 +2518,9 @@
     actionButtons: {
       ...tableProps.actionButtons
     },
-    // 链接列
-    linkProps: {
-      ...tableProps.linkProps
+    // 格式化列
+    formatColumns: {
+      ...tableProps.formatColumns
     },
     showSelectionCol: Boolean,
     showSingleSelectionCol: Boolean,
@@ -2483,7 +2575,8 @@
       search,
       reset,
       tableRef,
-      formRef
+      formRef,
+      beforeSearch: validate
     };
   };
   const useTable = (props, config) => {
@@ -2500,7 +2593,7 @@
         showSelectionCol: props.showSelectionCol,
         showSingleSelectionCol: props.showSingleSelectionCol,
         actionButtons: props.actionButtons,
-        linkProps: props.linkProps,
+        formatColumns: props.formatColumns,
         api: props.api,
         reqData: props.formData,
         customColumnModule: props.customColumnModule,
@@ -2620,12 +2713,11 @@
       };
     });
     const search = async (isInitSearch = false) => {
-      await validate();
       tableRef.value.search(isInitSearch);
     };
     const reset = async () => {
       resetFields();
-      search();
+      search(true);
     };
     const searchButtons = [
       {
@@ -2646,7 +2738,7 @@
     };
   };
 
-  var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     ...{ name: "EpSearchListPage" },
     __name: "search-list-page",
     props: searchListPageProps,
@@ -2661,7 +2753,8 @@
         reset,
         tableRef,
         formRef,
-        tableProps
+        tableProps,
+        beforeSearch
       } = useSearchListPage(props);
       __expose({
         search,
@@ -2692,13 +2785,13 @@
             ], 2)
           ]),
           vue.renderSlot(_ctx.$slots, "tableBefore"),
-          vue.createVNode(vue.unref(EpTable), vue.normalizeProps(vue.guardReactiveProps(vue.unref(tableProps))), null, 16)
+          vue.createVNode(vue.unref(EpTable), vue.mergeProps(vue.unref(tableProps), { "before-search": vue.unref(beforeSearch) }), null, 16, ["before-search"])
         ], 6);
       };
     }
   });
 
-  const EpSearchListPage = withInstall(_sfc_main$4);
+  const EpSearchListPage = withInstall(_sfc_main$5);
 
   const inheritSelectProps = {
     ...elementPlus.selectProps,
@@ -2824,7 +2917,7 @@
     };
   }
 
-  var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpSelect",
       inheritAttrs: false
@@ -2903,7 +2996,7 @@
     }
   });
 
-  const EpSelect = withInstall(_sfc_main$3);
+  const EpSelect = withInstall(_sfc_main$4);
 
   const titleProps = {
     // 右侧按钮
@@ -2959,7 +3052,7 @@
     };
   };
 
-  var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpTitle",
       inheritAttrs: false
@@ -3022,7 +3115,7 @@
     }
   });
 
-  const EpTitle = withInstall(_sfc_main$2);
+  const EpTitle = withInstall(_sfc_main$3);
 
   const headerProps = {
     // 页面模式
@@ -3133,7 +3226,7 @@
     };
   };
 
-  var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpHeader",
       inheritAttrs: false
@@ -3166,7 +3259,7 @@
     }
   });
 
-  const EpHeader = withInstall(_sfc_main$1);
+  const EpHeader = withInstall(_sfc_main$2);
 
   const { t } = useLocale();
   const datePickerRangeProps = {
@@ -3236,7 +3329,7 @@
   };
   const datePickerRangeEmits = {};
 
-  var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "EpDatePickerRange",
       inheritAttrs: false
@@ -3292,7 +3385,69 @@
     }
   });
 
-  const EpDatePickerRange = withInstall(_sfc_main);
+  const EpDatePickerRange = withInstall(_sfc_main$1);
+
+  const linkProps = {
+    ...elementPlus.linkProps,
+    content: {
+      type: String
+    },
+    type: {
+      ...elementPlus.linkProps.type,
+      default: "primary"
+    },
+    underline: {
+      ...elementPlus.linkProps.underline,
+      default: "never"
+    }
+  };
+
+  var _sfc_main = /* @__PURE__ */ vue.defineComponent({
+    ...{
+      name: "EpLink",
+      inheritAttrs: false
+    },
+    __name: "link",
+    props: linkProps,
+    setup(__props) {
+      const bem = createNameSpace("link");
+      const props = __props;
+      const attrs = vue.useAttrs();
+      const slots = vue.computed(() => {
+        return Object.keys(vue.useSlots());
+      });
+      return (_ctx, _cache) => {
+        const _component_el_link = vue.resolveComponent("el-link");
+        return vue.openBlock(), vue.createBlock(_component_el_link, vue.mergeProps({
+          class: `${vue.unref(bem).b()} ${vue.unref(prepareClassNames)()}`,
+          style: {
+            ...vue.unref(prepareStyles)()
+          }
+        }, {
+          ...props,
+          ...vue.unref(attrs)
+        }), vue.createSlots({
+          default: vue.withCtx(() => [
+            _ctx.content ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              vue.createTextVNode(vue.toDisplayString(_ctx.content), 1)
+            ], 64)) : vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          vue.renderList(slots.value, (name) => {
+            return {
+              name,
+              fn: vue.withCtx((scope) => [
+                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(scope)))
+              ])
+            };
+          })
+        ]), 1040, ["class", "style"]);
+      };
+    }
+  });
+
+  const EpLink = withInstall(_sfc_main);
 
   var components = [
     EpButtons,
@@ -3304,10 +3459,11 @@
     EpTitle,
     EpHeader,
     EpDatePickerRange,
-    EpCustomColumn
+    EpCustomColumn,
+    EpLink
   ];
 
-  var version = "0.0.17";
+  var version = "0.0.19";
 
   var globalProperties = {
     install(app) {
@@ -3320,7 +3476,7 @@
     globalProperties: globalProperties
   });
 
-  const bem$1 = createNameSpace("choose-dialog");
+  const bem = createNameSpace("choose-dialog");
   const useChooseDialog = (options = {}) => {
     const {
       t
@@ -3337,12 +3493,12 @@
     if (!showSingleSelectionCol) {
       scopedSlots.footerPrepend = () => {
         return vue.createVNode("span", {
-          "class": bem$1.e("selected-count")
+          "class": bem.e("selected-count")
         }, [t("ep.chooseDialog.selected"), selections.length, t("ep.chooseDialog.unit")]);
       };
     }
     return useDialog({
-      class: bem$1.b(),
+      class: bem.b(),
       width: "80%",
       showFooter: !showSingleSelectionCol,
       scopedSlots,
@@ -3379,38 +3535,6 @@
     });
   };
 
-  const bem = createNameSpace("form-dialog");
-  const useFormDialog = (options = {}) => {
-    const {
-      dialogProps,
-      title,
-      ...formProps
-    } = options;
-    const formRef = vue.ref();
-    let formData = formProps.formData || vue.reactive({});
-    return useDialog({
-      class: bem.b(),
-      width: "80%",
-      title,
-      render: (props) => {
-        return vue.createVNode(EpForm, vue.mergeProps({
-          "ref": formRef,
-          "modelValue": formData,
-          "onUpdate:modelValue": ($event) => formData = $event
-        }, {
-          col: 1,
-          "label-width": "auto",
-          ...formProps
-        }), null);
-      },
-      onConfirm: async (resolve) => {
-        await formRef.value.validate();
-        resolve(formData);
-      },
-      ...dialogProps
-    });
-  };
-
   const useNavigation = () => {
     const router = vueRouter.useRouter();
     const $goto = (r) => {
@@ -3494,6 +3618,7 @@
   exports.EpFormItem = EpFormItem;
   exports.EpHeader = EpHeader;
   exports.EpInput = EpInput;
+  exports.EpLink = EpLink;
   exports.EpSearchListPage = EpSearchListPage;
   exports.EpSelect = EpSelect;
   exports.EpTable = EpTable;
@@ -3519,6 +3644,7 @@
   exports.inputEmitsKeys = inputEmitsKeys;
   exports.inputProps = inputProps;
   exports.install = install;
+  exports.linkProps = linkProps;
   exports.searchListPageProps = searchListPageProps;
   exports.selectEmits = selectEmits;
   exports.selectEmitsKeys = selectEmitsKeys;