@vue-start/element-pro 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.2.0](https://github.com/zxeryu/vue-start/compare/@vue-start/element-pro@0.1.2...@vue-start/element-pro@0.2.0) (2022-08-22)
+
+### Bug Fixes
+
+- **element-pro:** loading ([c512f63](https://github.com/zxeryu/vue-start/commit/c512f638f06acab64242bf85b2475b860097061e))
+- **element-pro:** serial number for table ([32e12aa](https://github.com/zxeryu/vue-start/commit/32e12aa6bdd494464bc2839eaaed5d8ce66330a5))
+
+### Features
+
+- **pro:** modal/page curd ([07b696c](https://github.com/zxeryu/vue-start/commit/07b696cf2a327d4ec083ec75f3d5b73c870bfcb3))
+
+### Performance Improvements
+
+- **pro:** columnState for table,form ([7f4431e](https://github.com/zxeryu/vue-start/commit/7f4431ebf2d426b93a24e381712d705700561ec9))
+
 ## [0.1.2](https://github.com/zxeryu/vue-start/compare/@vue-start/element-pro@0.1.1...@vue-start/element-pro@0.1.2) (2022-08-17)
 
 ### Bug Fixes

package/dist/index.d.ts

@@ -232,7 +232,7 @@ declare const proListProps: () => {
     tableProps: {
         type: PropType<Omit<Partial<ExtractPropTypes<{
             operate: {
-                type: PropType<ITableOperate>; /******************* search pagination ********************/
+                type: PropType<ITableOperate>;
             };
             columnEmptyText: {
                 type: StringConstructor;
@@ -243,12 +243,24 @@ declare const proListProps: () => {
             columns: {
                 type: PropType<TTableColumns>;
             };
+            columnState: {
+                type: PropType<Record<string, any>>;
+            };
             elementMap: {
                 type: PropType<TElementMap>;
             };
             loading: {
                 type: BooleanConstructor;
             };
+            serialNumber: {
+                type: BooleanConstructor;
+            };
+            pagination: {
+                type: PropType<{
+                    page?: number | undefined;
+                    pageSize?: number | undefined;
+                }>;
+            };
             provideExtra: {
                 type: PropType<IProTableProvideExtra>;
             };
@@ -286,7 +298,7 @@ declare const ProList: vue.DefineComponent<Partial<ExtractPropTypes<{
     tableProps: {
         type: PropType<Omit<Partial<ExtractPropTypes<{
             operate: {
-                type: PropType<ITableOperate>; /******************* search pagination ********************/
+                type: PropType<ITableOperate>;
             };
             columnEmptyText: {
                 type: StringConstructor;
@@ -297,12 +309,24 @@ declare const ProList: vue.DefineComponent<Partial<ExtractPropTypes<{
             columns: {
                 type: PropType<TTableColumns>;
             };
+            columnState: {
+                type: PropType<Record<string, any>>;
+            };
             elementMap: {
                 type: PropType<TElementMap>;
             };
             loading: {
                 type: BooleanConstructor;
             };
+            serialNumber: {
+                type: BooleanConstructor;
+            };
+            pagination: {
+                type: PropType<{
+                    page?: number | undefined;
+                    pageSize?: number | undefined;
+                }>;
+            };
             provideExtra: {
                 type: PropType<IProTableProvideExtra>;
             };
@@ -338,7 +362,7 @@ declare const ProList: vue.DefineComponent<Partial<ExtractPropTypes<{
     tableProps: {
         type: PropType<Omit<Partial<ExtractPropTypes<{
             operate: {
-                type: PropType<ITableOperate>; /******************* search pagination ********************/
+                type: PropType<ITableOperate>;
             };
             columnEmptyText: {
                 type: StringConstructor;
@@ -349,12 +373,24 @@ declare const ProList: vue.DefineComponent<Partial<ExtractPropTypes<{
             columns: {
                 type: PropType<TTableColumns>;
             };
+            columnState: {
+                type: PropType<Record<string, any>>;
+            };
             elementMap: {
                 type: PropType<TElementMap>;
             };
             loading: {
                 type: BooleanConstructor;
             };
+            serialNumber: {
+                type: BooleanConstructor;
+            };
+            pagination: {
+                type: PropType<{
+                    page?: number | undefined;
+                    pageSize?: number | undefined;
+                }>;
+            };
             provideExtra: {
                 type: PropType<IProTableProvideExtra>;
             };
@@ -454,6 +490,95 @@ declare const ProGrid: vue.DefineComponent<Partial<ExtractPropTypes<{
     };
 }>>>, {}>;
 
+declare const createLoadingId: (prefix?: string) => string;
+declare const proLoadingProps: () => {
+    loading: {
+        type: BooleanConstructor;
+    };
+    target: {
+        type: PropType<string | HTMLElement>;
+    };
+    body: {
+        type: BooleanConstructor;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+    };
+    lock: {
+        type: BooleanConstructor;
+    };
+    text: {
+        type: StringConstructor;
+    };
+    spinner: {
+        type: StringConstructor;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    customClass: {
+        type: StringConstructor;
+    };
+};
+declare type ProLoadingProps = Partial<ExtractPropTypes<ReturnType<typeof proLoadingProps>>>;
+declare const ProLoading: vue.DefineComponent<Partial<ExtractPropTypes<{
+    loading: {
+        type: BooleanConstructor;
+    };
+    target: {
+        type: PropType<string | HTMLElement>;
+    };
+    body: {
+        type: BooleanConstructor;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+    };
+    lock: {
+        type: BooleanConstructor;
+    };
+    text: {
+        type: StringConstructor;
+    };
+    spinner: {
+        type: StringConstructor;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    customClass: {
+        type: StringConstructor;
+    };
+}>>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<Partial<ExtractPropTypes<{
+    loading: {
+        type: BooleanConstructor;
+    };
+    target: {
+        type: PropType<string | HTMLElement>;
+    };
+    body: {
+        type: BooleanConstructor;
+    };
+    fullscreen: {
+        type: BooleanConstructor;
+    };
+    lock: {
+        type: BooleanConstructor;
+    };
+    text: {
+        type: StringConstructor;
+    };
+    spinner: {
+        type: StringConstructor;
+    };
+    background: {
+        type: StringConstructor;
+    };
+    customClass: {
+        type: StringConstructor;
+    };
+}>>>, {}>;
+
 declare const proFormItemProps: () => {
     name: {
         type: PropType<string | (string | number)[]>;
@@ -1381,12 +1506,24 @@ declare const ProCurdList: vue.DefineComponent<Partial<vue.ExtractPropTypes<{
             columns: {
                 type: vue.PropType<_vue_start_pro.TTableColumns>;
             };
+            columnState: {
+                type: vue.PropType<Record<string, any>>;
+            };
             elementMap: {
                 type: vue.PropType<_vue_start_pro.TElementMap>;
             };
             loading: {
                 type: BooleanConstructor;
             };
+            serialNumber: {
+                type: BooleanConstructor;
+            };
+            pagination: {
+                type: vue.PropType<{
+                    page?: number | undefined;
+                    pageSize?: number | undefined;
+                }>;
+            };
             provideExtra: {
                 type: vue.PropType<_vue_start_pro.IProTableProvideExtra>;
             };
@@ -1430,12 +1567,24 @@ declare const ProCurdList: vue.DefineComponent<Partial<vue.ExtractPropTypes<{
             columns: {
                 type: vue.PropType<_vue_start_pro.TTableColumns>;
             };
+            columnState: {
+                type: vue.PropType<Record<string, any>>;
+            };
             elementMap: {
                 type: vue.PropType<_vue_start_pro.TElementMap>;
             };
             loading: {
                 type: BooleanConstructor;
             };
+            serialNumber: {
+                type: BooleanConstructor;
+            };
+            pagination: {
+                type: vue.PropType<{
+                    page?: number | undefined;
+                    pageSize?: number | undefined;
+                }>;
+            };
             provideExtra: {
                 type: vue.PropType<_vue_start_pro.IProTableProvideExtra>;
             };
@@ -1479,4 +1628,4 @@ declare const ProSelect: vue.DefineComponent<any, {}, {}, {}, {}, vue.ComponentO
     [x: string]: any;
 }>;
 
-export { ButtonProps, ContinueAddButton, DescriptionsProps, ModalProps, OkButton, PaginationProps, ProCurdDesc, ProCurdDescConnect, ProCurdForm, ProCurdFormConnect, ProCurdFormProps, ProCurdList, ProCurdListConnect, ProCurdModal, ProCurdModalConnect, ProForm, ProFormCascader, ProFormCheckbox, ProFormDatePicker, ProFormItem, ProFormItemProps, ProFormList, ProFormListProps, ProFormProps, ProFormRadio, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextNumber, ProFormTimePicker, ProFormTreeSelect, ProGrid, ProGridProps, ProList, ProListProps, ProOperateButton, ProOperateButtonProps, ProSearchForm, ProSearchFormProps, ProSelect, ProSelectProps, ProSubmitButton, ProTable, ProTableProps, TPageState, createFormItemComponent, defaultPage };
+export { ButtonProps, ContinueAddButton, DescriptionsProps, ModalProps, OkButton, PaginationProps, ProCurdDesc, ProCurdDescConnect, ProCurdForm, ProCurdFormConnect, ProCurdFormProps, ProCurdList, ProCurdListConnect, ProCurdModal, ProCurdModalConnect, ProForm, ProFormCascader, ProFormCheckbox, ProFormDatePicker, ProFormItem, ProFormItemProps, ProFormList, ProFormListProps, ProFormProps, ProFormRadio, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextNumber, ProFormTimePicker, ProFormTreeSelect, ProGrid, ProGridProps, ProList, ProListProps, ProLoading, ProLoadingProps, ProOperateButton, ProOperateButtonProps, ProSearchForm, ProSearchFormProps, ProSelect, ProSelectProps, ProSubmitButton, ProTable, ProTableProps, TPageState, createFormItemComponent, createLoadingId, defaultPage };

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { defineComponent, createVNode, Fragment, mergeProps, isVNode, ref, reactive, toRaw, computed } from 'vue';
-import { ElTableColumn, ElTable, ElPagination, ElRow, ElCol, ElFormItem, ElForm, ElSelect, ElOption, ElInput, ElInputNumber, ElDatePicker, ElTimePicker, ElTreeSelect, ElCheckboxGroup, ElRadioGroup, ElSwitch, ElCascader, ElButton, ElDescriptions, ElDescriptionsItem, ElDialog } from 'element-plus';
-import { map, omit, get, keys, pick, isNumber, merge, size, isUndefined, mergeWith, isArray, concat } from 'lodash';
-import { useProTable, ProTable as ProTable$1, ProForm as ProForm$1, getFormItemEl, getColumnFormItemName, getValidValues, ProSearchForm as ProSearchForm$1, createFormItemCompFn, useProForm, ProFormList as ProFormList$1, useProCurd, CurdAddAction, CurdCurrentMode, useProModule, CurdAction, CurdSubAction } from '@vue-start/pro';
-import { setReactiveValue } from '@vue-start/hooks';
+import { ElLoading, ElTableColumn, ElTable, ElPagination, ElRow, ElCol, ElFormItem, ElForm, ElSelect, ElOption, ElInput, ElInputNumber, ElDatePicker, ElTimePicker, ElTreeSelect, ElCheckboxGroup, ElRadioGroup, ElSwitch, ElCascader, ElButton, ElDescriptions, ElDescriptionsItem, ElDialog } from 'element-plus';
+import { isString, map, omit, get, keys, pick, isNumber, size, isUndefined, mergeWith, isArray, concat } from 'lodash';
+import { generateId, useProTable, ProTable as ProTable$1, useProForm, getFormItemEl, getColumnFormItemName, ProForm as ProForm$1, getValidValues, ProSearchForm as ProSearchForm$1, createFormItemCompFn, ProFormList as ProFormList$1, useProCurd, CurdAddAction, CurdCurrentMode, useProModule, CurdAction, CurdSubAction } from '@vue-start/pro';
+import { useEffect, setReactiveValue } from '@vue-start/hooks';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -78,7 +78,98 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var Content = defineComponent(function () {
+var createLoadingId = function createLoadingId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "comp";
+  return prefix + "-" + generateId();
+};
+
+var proLoadingProps = function proLoadingProps() {
+  return {
+    loading: {
+      type: Boolean
+    },
+    target: {
+      type: [String, Object]
+    },
+    body: {
+      type: Boolean
+    },
+    fullscreen: {
+      type: Boolean
+    },
+    lock: {
+      type: Boolean
+    },
+    text: {
+      type: String
+    },
+    spinner: {
+      type: String
+    },
+    background: {
+      type: String
+    },
+    customClass: {
+      type: String
+    }
+  };
+};
+
+var ProLoading = defineComponent({
+  props: _objectSpread2({}, proLoadingProps()),
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+    var id = createLoadingId();
+    useEffect(function () {
+      if (!props.loading) {
+        return;
+      }
+
+      var element = props.target;
+
+      if (!slots["default"]) {
+        //监听
+        if (props.target && isString(props.target)) {
+          element = document.querySelector("#" + props.target);
+        }
+      } else {
+        //包裹
+        element = document.getElementById(id);
+      }
+
+      if (!element) {
+        return;
+      }
+
+      var instance = ElLoading.service({
+        target: element,
+        body: props.body,
+        fullscreen: props.fullscreen,
+        lock: props.lock,
+        text: props.text,
+        spinner: props.spinner,
+        background: props.background,
+        customClass: props.customClass
+      });
+      return function () {
+        instance && instance.close();
+      };
+    }, function () {
+      return props.loading;
+    });
+    return function () {
+      if (!slots["default"]) {
+        return null;
+      }
+
+      return createVNode("div", {
+        "id": id
+      }, [slots["default"]()]);
+    };
+  }
+});
+
+var Content$1 = defineComponent(function () {
   var _useProTable = useProTable(),
       columns = _useProTable.columns;
 
@@ -118,25 +209,30 @@ var ProTable = defineComponent({
     var slots = _ref.slots,
         expose = _ref.expose,
         attrs = _ref.attrs;
+    var id = createLoadingId("table");
     var tableRef = ref();
+    expose({
+      tableRef: tableRef
+    });
     var originKeys = keys(ProTable$1.props);
     return function () {
-      var _slots$default;
+      var _slots$top, _slots$default;
 
-      return createVNode(ProTable$1, mergeProps(attrs, pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
+      return createVNode(ProTable$1, mergeProps(pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
         "provideExtra": _objectSpread2({
           tableRef: tableRef
         }, props.provideExtra)
       }), {
         "default": function _default() {
           return [createVNode(ElTable, mergeProps({
-            "ref": function ref(el) {
-              expose(el);
-              tableRef.value = el;
-            }
-          }, omit(props, originKeys)), _objectSpread2({
+            "ref": tableRef,
+            "id": id
+          }, attrs, omit(props, originKeys)), _objectSpread2({
             "default": function _default() {
-              return [createVNode(Content, null, null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+              return [(_slots$top = slots.top) === null || _slots$top === void 0 ? void 0 : _slots$top.call(slots), createVNode(Content$1, null, null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), props.loading && createVNode(ProLoading, {
+                "target": id,
+                "loading": true
+              }, null)];
             }
           }, omit(slots, "default")))];
         }
@@ -229,7 +325,12 @@ var ProList = defineComponent({
         "default": function _default() {
           return [props.extraInSearch && extra];
         }
-      }), (_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), !props.extraInSearch && extra, slots["default"] ? slots["default"]() : createVNode(ProTable, omit(tableProps, "slots"), tableProps === null || tableProps === void 0 ? void 0 : tableProps.slots), (_slots$divide2 = slots.divide2) === null || _slots$divide2 === void 0 ? void 0 : _slots$divide2.call(slots), createVNode("div", {
+      }), (_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), !props.extraInSearch && extra, slots["default"] ? slots["default"]() : createVNode(ProTable, mergeProps({
+        "pagination": {
+          page: pageState.page,
+          pageSize: pageState.pageSize
+        }
+      }, omit(tableProps, "slots")), tableProps === null || tableProps === void 0 ? void 0 : tableProps.slots), (_slots$divide2 = slots.divide2) === null || _slots$divide2 === void 0 ? void 0 : _slots$divide2.call(slots), createVNode("div", {
         "class": "pro-list-footer"
       }, [(_slots$footerLeft = slots.footerLeft) === null || _slots$footerLeft === void 0 ? void 0 : _slots$footerLeft.call(slots), isNumber(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.total) && paginationProps.total > 0 && createVNode(Fragment, null, [slots.pagination ? slots.pagination(pagination) : createVNode(ElPagination, pagination, null)]), (_slots$footerRight = slots.footerRight) === null || _slots$footerRight === void 0 ? void 0 : _slots$footerRight.call(slots)])]);
     };
@@ -275,7 +376,7 @@ var ProGrid = defineComponent({
       return createVNode(ElRow, props.row, _isSlot$1(_slot = map(props.items, function (item) {
         return createVNode(ElCol, mergeProps({
           "key": item.rowKey
-        }, merge(props.col, item.col)), {
+        }, props.col, item.col), {
           "default": function _default() {
             return [item.vNode];
           }
@@ -310,6 +411,43 @@ var ProFormItem = defineComponent({
   }
 });
 //emit;
+var Content = defineComponent({
+  props: _objectSpread2(_objectSpread2({}, ProGrid.props), {}, {
+    needRules: {
+      type: Boolean
+    }
+  }),
+  setup: function setup(props) {
+    var _useProForm = useProForm(),
+        formElementMap = _useProForm.formElementMap,
+        columns = _useProForm.columns;
+
+    return function () {
+      if (!formElementMap || size(columns.value) <= 0) {
+        return null;
+      }
+
+      if (!props.row) {
+        return map(columns.value, function (item) {
+          return getFormItemEl(formElementMap, item, props.needRules);
+        });
+      }
+
+      return createVNode(ProGrid, {
+        "row": props.row,
+        "col": props.col,
+        "items": map(columns.value, function (item) {
+          var vNode = getFormItemEl(formElementMap, item, props.needRules);
+          return {
+            rowKey: getColumnFormItemName(item),
+            vNode: vNode,
+            col: get(item, ["extra", "col"])
+          };
+        })
+      }, null);
+    };
+  }
+});
 var ProForm = defineComponent({
   inheritAttrs: false,
   props: _objectSpread2(_objectSpread2(_objectSpread2({}, ElForm.props), omit(ProForm$1.props, "model")), omit(ProGrid.props, "items")),
@@ -346,8 +484,9 @@ var ProForm = defineComponent({
     };
 
     var originKeys = keys(omit(ProForm$1.props, "model"));
+    var gridKeys = keys(ProGrid.props);
     return function () {
-      var _slots$default;
+      var _slots$top, _slots$default;
 
       return createVNode(ProForm$1, mergeProps(pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
         "model": formState,
@@ -359,24 +498,13 @@ var ProForm = defineComponent({
         "default": function _default() {
           return [createVNode(ElForm, mergeProps({
             "ref": handleRef
-          }, attrs, omit.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["model"])), {
+          }, attrs, omit.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["model"], _toConsumableArray(gridKeys))), {
             "model": formState
           }), {
             "default": function _default() {
-              return [props.formElementMap && size(props.columns) > 0 && createVNode(Fragment, null, [props.row ? createVNode(ProGrid, {
-                "row": props.row,
-                "col": props.col,
-                "items": map(props.columns, function (item) {
-                  var vNode = getFormItemEl(props.formElementMap, item, props.needRules);
-                  return {
-                    rowKey: getColumnFormItemName(item),
-                    vNode: vNode,
-                    col: get(item, ["extra", "col"])
-                  };
-                })
-              }, null) : createVNode(Fragment, null, [map(props.columns, function (item) {
-                return getFormItemEl(props.formElementMap, item, props.needRules);
-              })])]), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+              return [(_slots$top = slots.top) === null || _slots$top === void 0 ? void 0 : _slots$top.call(slots), createVNode(Content, mergeProps(pick(props, gridKeys), {
+                "needRules": props.needRules
+              }), null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
             }
           })];
         }
@@ -819,6 +947,7 @@ var ProCurdList = defineComponent({
       var _curdState$listData, _curdState$listData2;
 
       var tableProps = props.tableProps;
+      var paginationProps = props.paginationProps;
       return createVNode(ProList, mergeProps({
         "onList": function onList(values) {
           sendCurdEvent({
@@ -848,8 +977,8 @@ var ProCurdList = defineComponent({
                   if (!item.onClick) {
                     nextItem.onClick = function (record) {
                       sendCurdEvent({
-                        action: CurdAction.LIST,
-                        type: "operate-".concat(item.value),
+                        action: "operate",
+                        type: item.value,
                         record: record
                       });
                     };
@@ -867,7 +996,7 @@ var ProCurdList = defineComponent({
           loading: curdState.listLoading,
           data: (_curdState$listData = curdState.listData) === null || _curdState$listData === void 0 ? void 0 : _curdState$listData.dataSource
         }),
-        "paginationProps": _objectSpread2(_objectSpread2({}, props.paginationProps), {}, {
+        "paginationProps": _objectSpread2(_objectSpread2({}, paginationProps), {}, {
           total: (_curdState$listData2 = curdState.listData) === null || _curdState$listData2 === void 0 ? void 0 : _curdState$listData2.total
         })
       }), slots);
@@ -993,4 +1122,4 @@ var ProCurdModalConnect = defineComponent({
   }
 });
 
-export { ContinueAddButton, OkButton, ProCurdDesc, ProCurdDescConnect, ProCurdForm, ProCurdFormConnect, ProCurdList, ProCurdListConnect, ProCurdModal, ProCurdModalConnect, ProForm, ProFormCascader, ProFormCheckbox, ProFormDatePicker, ProFormItem, ProFormList, ProFormRadio, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextNumber, ProFormTimePicker, ProFormTreeSelect, ProGrid, ProList, ProOperateButton, ProSearchForm, ProSelect, ProSubmitButton, ProTable, createFormItemComponent, defaultPage };
+export { ContinueAddButton, OkButton, ProCurdDesc, ProCurdDescConnect, ProCurdForm, ProCurdFormConnect, ProCurdList, ProCurdListConnect, ProCurdModal, ProCurdModalConnect, ProForm, ProFormCascader, ProFormCheckbox, ProFormDatePicker, ProFormItem, ProFormList, ProFormRadio, ProFormSelect, ProFormSwitch, ProFormText, ProFormTextNumber, ProFormTimePicker, ProFormTreeSelect, ProGrid, ProList, ProLoading, ProOperateButton, ProSearchForm, ProSelect, ProSubmitButton, ProTable, createFormItemComponent, createLoadingId, defaultPage };

package/dist/index.js

@@ -82,7 +82,98 @@ function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
-var Content = vue.defineComponent(function () {
+var createLoadingId = function createLoadingId() {
+  var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "comp";
+  return prefix + "-" + pro.generateId();
+};
+
+var proLoadingProps = function proLoadingProps() {
+  return {
+    loading: {
+      type: Boolean
+    },
+    target: {
+      type: [String, Object]
+    },
+    body: {
+      type: Boolean
+    },
+    fullscreen: {
+      type: Boolean
+    },
+    lock: {
+      type: Boolean
+    },
+    text: {
+      type: String
+    },
+    spinner: {
+      type: String
+    },
+    background: {
+      type: String
+    },
+    customClass: {
+      type: String
+    }
+  };
+};
+
+var ProLoading = vue.defineComponent({
+  props: _objectSpread2({}, proLoadingProps()),
+  setup: function setup(props, _ref) {
+    var slots = _ref.slots;
+    var id = createLoadingId();
+    hooks.useEffect(function () {
+      if (!props.loading) {
+        return;
+      }
+
+      var element = props.target;
+
+      if (!slots["default"]) {
+        //监听
+        if (props.target && lodash.isString(props.target)) {
+          element = document.querySelector("#" + props.target);
+        }
+      } else {
+        //包裹
+        element = document.getElementById(id);
+      }
+
+      if (!element) {
+        return;
+      }
+
+      var instance = elementPlus.ElLoading.service({
+        target: element,
+        body: props.body,
+        fullscreen: props.fullscreen,
+        lock: props.lock,
+        text: props.text,
+        spinner: props.spinner,
+        background: props.background,
+        customClass: props.customClass
+      });
+      return function () {
+        instance && instance.close();
+      };
+    }, function () {
+      return props.loading;
+    });
+    return function () {
+      if (!slots["default"]) {
+        return null;
+      }
+
+      return vue.createVNode("div", {
+        "id": id
+      }, [slots["default"]()]);
+    };
+  }
+});
+
+var Content$1 = vue.defineComponent(function () {
   var _useProTable = pro.useProTable(),
       columns = _useProTable.columns;
 
@@ -122,25 +213,30 @@ var ProTable = vue.defineComponent({
     var slots = _ref.slots,
         expose = _ref.expose,
         attrs = _ref.attrs;
+    var id = createLoadingId("table");
     var tableRef = vue.ref();
+    expose({
+      tableRef: tableRef
+    });
     var originKeys = lodash.keys(pro.ProTable.props);
     return function () {
-      var _slots$default;
+      var _slots$top, _slots$default;
 
-      return vue.createVNode(pro.ProTable, vue.mergeProps(attrs, lodash.pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
+      return vue.createVNode(pro.ProTable, vue.mergeProps(lodash.pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
         "provideExtra": _objectSpread2({
           tableRef: tableRef
         }, props.provideExtra)
       }), {
         "default": function _default() {
           return [vue.createVNode(elementPlus.ElTable, vue.mergeProps({
-            "ref": function ref(el) {
-              expose(el);
-              tableRef.value = el;
-            }
-          }, lodash.omit(props, originKeys)), _objectSpread2({
+            "ref": tableRef,
+            "id": id
+          }, attrs, lodash.omit(props, originKeys)), _objectSpread2({
             "default": function _default() {
-              return [vue.createVNode(Content, null, null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+              return [(_slots$top = slots.top) === null || _slots$top === void 0 ? void 0 : _slots$top.call(slots), vue.createVNode(Content$1, null, null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots), props.loading && vue.createVNode(ProLoading, {
+                "target": id,
+                "loading": true
+              }, null)];
             }
           }, lodash.omit(slots, "default")))];
         }
@@ -233,7 +329,12 @@ var ProList = vue.defineComponent({
         "default": function _default() {
           return [props.extraInSearch && extra];
         }
-      }), (_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), !props.extraInSearch && extra, slots["default"] ? slots["default"]() : vue.createVNode(ProTable, lodash.omit(tableProps, "slots"), tableProps === null || tableProps === void 0 ? void 0 : tableProps.slots), (_slots$divide2 = slots.divide2) === null || _slots$divide2 === void 0 ? void 0 : _slots$divide2.call(slots), vue.createVNode("div", {
+      }), (_slots$divide = slots.divide) === null || _slots$divide === void 0 ? void 0 : _slots$divide.call(slots), !props.extraInSearch && extra, slots["default"] ? slots["default"]() : vue.createVNode(ProTable, vue.mergeProps({
+        "pagination": {
+          page: pageState.page,
+          pageSize: pageState.pageSize
+        }
+      }, lodash.omit(tableProps, "slots")), tableProps === null || tableProps === void 0 ? void 0 : tableProps.slots), (_slots$divide2 = slots.divide2) === null || _slots$divide2 === void 0 ? void 0 : _slots$divide2.call(slots), vue.createVNode("div", {
         "class": "pro-list-footer"
       }, [(_slots$footerLeft = slots.footerLeft) === null || _slots$footerLeft === void 0 ? void 0 : _slots$footerLeft.call(slots), lodash.isNumber(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.total) && paginationProps.total > 0 && vue.createVNode(vue.Fragment, null, [slots.pagination ? slots.pagination(pagination) : vue.createVNode(elementPlus.ElPagination, pagination, null)]), (_slots$footerRight = slots.footerRight) === null || _slots$footerRight === void 0 ? void 0 : _slots$footerRight.call(slots)])]);
     };
@@ -279,7 +380,7 @@ var ProGrid = vue.defineComponent({
       return vue.createVNode(elementPlus.ElRow, props.row, _isSlot$1(_slot = lodash.map(props.items, function (item) {
         return vue.createVNode(elementPlus.ElCol, vue.mergeProps({
           "key": item.rowKey
-        }, lodash.merge(props.col, item.col)), {
+        }, props.col, item.col), {
           "default": function _default() {
             return [item.vNode];
           }
@@ -314,6 +415,43 @@ var ProFormItem = vue.defineComponent({
   }
 });
 //emit;
+var Content = vue.defineComponent({
+  props: _objectSpread2(_objectSpread2({}, ProGrid.props), {}, {
+    needRules: {
+      type: Boolean
+    }
+  }),
+  setup: function setup(props) {
+    var _useProForm = pro.useProForm(),
+        formElementMap = _useProForm.formElementMap,
+        columns = _useProForm.columns;
+
+    return function () {
+      if (!formElementMap || lodash.size(columns.value) <= 0) {
+        return null;
+      }
+
+      if (!props.row) {
+        return lodash.map(columns.value, function (item) {
+          return pro.getFormItemEl(formElementMap, item, props.needRules);
+        });
+      }
+
+      return vue.createVNode(ProGrid, {
+        "row": props.row,
+        "col": props.col,
+        "items": lodash.map(columns.value, function (item) {
+          var vNode = pro.getFormItemEl(formElementMap, item, props.needRules);
+          return {
+            rowKey: pro.getColumnFormItemName(item),
+            vNode: vNode,
+            col: lodash.get(item, ["extra", "col"])
+          };
+        })
+      }, null);
+    };
+  }
+});
 var ProForm = vue.defineComponent({
   inheritAttrs: false,
   props: _objectSpread2(_objectSpread2(_objectSpread2({}, elementPlus.ElForm.props), lodash.omit(pro.ProForm.props, "model")), lodash.omit(ProGrid.props, "items")),
@@ -350,8 +488,9 @@ var ProForm = vue.defineComponent({
     };
 
     var originKeys = lodash.keys(lodash.omit(pro.ProForm.props, "model"));
+    var gridKeys = lodash.keys(ProGrid.props);
     return function () {
-      var _slots$default;
+      var _slots$top, _slots$default;
 
       return vue.createVNode(pro.ProForm, vue.mergeProps(lodash.pick.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["provideExtra"])), {
         "model": formState,
@@ -363,24 +502,13 @@ var ProForm = vue.defineComponent({
         "default": function _default() {
           return [vue.createVNode(elementPlus.ElForm, vue.mergeProps({
             "ref": handleRef
-          }, attrs, lodash.omit.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["model"])), {
+          }, attrs, lodash.omit.apply(void 0, [props].concat(_toConsumableArray(originKeys), ["model"], _toConsumableArray(gridKeys))), {
             "model": formState
           }), {
             "default": function _default() {
-              return [props.formElementMap && lodash.size(props.columns) > 0 && vue.createVNode(vue.Fragment, null, [props.row ? vue.createVNode(ProGrid, {
-                "row": props.row,
-                "col": props.col,
-                "items": lodash.map(props.columns, function (item) {
-                  var vNode = pro.getFormItemEl(props.formElementMap, item, props.needRules);
-                  return {
-                    rowKey: pro.getColumnFormItemName(item),
-                    vNode: vNode,
-                    col: lodash.get(item, ["extra", "col"])
-                  };
-                })
-              }, null) : vue.createVNode(vue.Fragment, null, [lodash.map(props.columns, function (item) {
-                return pro.getFormItemEl(props.formElementMap, item, props.needRules);
-              })])]), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
+              return [(_slots$top = slots.top) === null || _slots$top === void 0 ? void 0 : _slots$top.call(slots), vue.createVNode(Content, vue.mergeProps(lodash.pick(props, gridKeys), {
+                "needRules": props.needRules
+              }), null), (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)];
             }
           })];
         }
@@ -823,6 +951,7 @@ var ProCurdList = vue.defineComponent({
       var _curdState$listData, _curdState$listData2;
 
       var tableProps = props.tableProps;
+      var paginationProps = props.paginationProps;
       return vue.createVNode(ProList, vue.mergeProps({
         "onList": function onList(values) {
           sendCurdEvent({
@@ -852,8 +981,8 @@ var ProCurdList = vue.defineComponent({
                   if (!item.onClick) {
                     nextItem.onClick = function (record) {
                       sendCurdEvent({
-                        action: pro.CurdAction.LIST,
-                        type: "operate-".concat(item.value),
+                        action: "operate",
+                        type: item.value,
                         record: record
                       });
                     };
@@ -871,7 +1000,7 @@ var ProCurdList = vue.defineComponent({
           loading: curdState.listLoading,
           data: (_curdState$listData = curdState.listData) === null || _curdState$listData === void 0 ? void 0 : _curdState$listData.dataSource
         }),
-        "paginationProps": _objectSpread2(_objectSpread2({}, props.paginationProps), {}, {
+        "paginationProps": _objectSpread2(_objectSpread2({}, paginationProps), {}, {
           total: (_curdState$listData2 = curdState.listData) === null || _curdState$listData2 === void 0 ? void 0 : _curdState$listData2.total
         })
       }), slots);
@@ -1022,10 +1151,12 @@ exports.ProFormTimePicker = ProFormTimePicker;
 exports.ProFormTreeSelect = ProFormTreeSelect;
 exports.ProGrid = ProGrid;
 exports.ProList = ProList;
+exports.ProLoading = ProLoading;
 exports.ProOperateButton = ProOperateButton;
 exports.ProSearchForm = ProSearchForm;
 exports.ProSelect = ProSelect;
 exports.ProSubmitButton = ProSubmitButton;
 exports.ProTable = ProTable;
 exports.createFormItemComponent = createFormItemComponent;
+exports.createLoadingId = createLoadingId;
 exports.defaultPage = defaultPage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-start/element-pro",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "> TODO: description",
   "author": "zx <zxpstudy@163.com>",
   "homepage": "https://github.com/zxeryu/vue-start#readme",
@@ -27,11 +27,10 @@
   "peerDependencies": {
     "@vue-start/hooks": "*",
     "@vue-start/pro": "*",
-    "@vue-start/request": "*",
     "element-plus": ">=2.x",
     "lodash": ">= 4.x",
     "rxjs": ">=7.x",
     "vue": ">= 3.x"
   },
-  "gitHead": "38c111cd89647f67ccdc5f7c708064056692e1cc"
+  "gitHead": "111a06e1350911d6315f2e19a2c3abbaa64d8092"
 }