xrk-components 0.4.2-beta.2 → 0.4.2-beta.4

package/lib/index.esm.js

@@ -1,6 +1,12 @@
 import { ref, watch, getCurrentScope, onScopeDispose, unref, getCurrentInstance, onMounted, nextTick, openBlock, createElementBlock, createElementVNode, warn, computed as computed$1, provide, inject, watchEffect, onBeforeUnmount, toRef, onUnmounted, isRef, onBeforeMount, defineComponent, mergeProps, renderSlot, useAttrs as useAttrs$1, useSlots, shallowRef, withDirectives, createCommentVNode, Fragment, normalizeClass, createBlock, withCtx, resolveDynamicComponent, withModifiers, createVNode, toDisplayString, normalizeStyle, vShow, Transition, reactive, onUpdated, cloneVNode, Text, Comment, Teleport, readonly, onDeactivated, renderList, createTextVNode, toRaw as toRaw$1, vModelCheckbox, toRefs, vModelRadio, withKeys, h as h$1, createSlots, triggerRef, resolveComponent, resolveDirective, vModelText, createApp, normalizeProps, render } from 'vue';
 import { check, base } from 'xrk-tools';
 
+/*
+ * @Description:
+ * @Date: 2022-10-18 09:44:40
+ */
+// 作用域问题导致无法使用inject方式在各组件内接收到defineProps。可通过修改当前app上下文处理，use-create-modal中已实现。
+// import { inject, computed } from 'vue';
 var provideKey = 'defaultProps';
 var useSetGlobalDefaultProps = function (props) {
     window[provideKey] = props;
@@ -38888,8 +38894,6 @@ var ElTableColumn$1 = defineComponent({
         column: {},
         $index: -1
       });
-      console.log(renderDefault,'renderDefault');
-
       const children = [];
       if (Array.isArray(renderDefault)) {
         for (const childNode of renderDefault) {
@@ -41240,7 +41244,8 @@ var script$3 = /*#__PURE__*/ defineComponent(__assign(__assign({}, __default__$3
         defaultSort: { type: Object, required: false },
         useBaseClass: { type: Boolean, required: false, default: (function () {
                 return useGetGlobalDefaultProp(propsKey$1, 'useBaseClass', true);
-            }) }
+            }) },
+        spanMethod: { type: null, required: false }
     }, emits: ["sort-change", "select", "select-all"], setup: function (__props, _a) {
         var expose = _a.expose, emits = _a.emit;
         setGlobalNamespace();
@@ -41281,6 +41286,7 @@ var script$3 = /*#__PURE__*/ defineComponent(__assign(__assign({}, __default__$3
                 expandRowKeys: __props.expandRowKeys,
                 defaultSort: __props.defaultSort,
                 emptyText: __props.emptyText,
+                spanMethod: __props.spanMethod,
                 onSortChange: handleSortChange
             }, {
                 empty: withCtx(function () { return [
@@ -41303,7 +41309,7 @@ var script$3 = /*#__PURE__*/ defineComponent(__assign(__assign({}, __default__$3
                     }), 128 /* KEYED_FRAGMENT */))
                 ]; }),
                 _: 3 /* FORWARDED */
-            }, 8 /* PROPS */, ["class", "data", "height", "maxHeight", "stripe", "border", "size", "fit", "rowClassName", "rowStyle", "cellClassName", "cellStyle", "headerRowClassName", "headerRowStyle", "rowKey", "defaultExpandAll", "expandRowKeys", "defaultSort", "emptyText"]));
+            }, 8 /* PROPS */, ["class", "data", "height", "maxHeight", "stripe", "border", "size", "fit", "rowClassName", "rowStyle", "cellClassName", "cellStyle", "headerRowClassName", "headerRowStyle", "rowKey", "defaultExpandAll", "expandRowKeys", "defaultSort", "emptyText", "spanMethod"]));
         };
     } }));
 
@@ -42084,19 +42090,39 @@ var createDialog = function (config) {
     container.classList.add('_xrk_create_dialog');
     container.style.position = 'relative';
     container.style.zIndex = "".concat(200 + customDialogCount);
-    render(h$1(script, __assign(__assign({ modelValue: true }, (config || {})), { appendToBody: false, onClose: function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a, _b;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0: return [4 /*yield*/, ((_a = config === null || config === void 0 ? void 0 : config.onClose) === null || _a === void 0 ? void 0 : _a.call(config))];
-                    case 1:
-                        _c.sent();
-                        (_b = document.querySelector('body')) === null || _b === void 0 ? void 0 : _b.removeChild(container);
-                        return [2 /*return*/];
-                }
+    var _instance = null;
+    var close = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0: return [4 /*yield*/, ((_a = config === null || config === void 0 ? void 0 : config.onClose) === null || _a === void 0 ? void 0 : _a.call(config))];
+                case 1:
+                    _c.sent();
+                    (_b = document.querySelector('body')) === null || _b === void 0 ? void 0 : _b.removeChild(container);
+                    _instance = null;
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    _instance = h$1(script, __assign({ modelValue: true, appendToBody: false, onClose: function () { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                close();
+                return [2 /*return*/];
             });
-        }); } })), container);
+        }); } }, (config || {})));
+    if (config && config.app) {
+        _instance.appContext = config.app._context; // 承接上下文，用于inject，调用层需要使用app.provide
+    }
+    render(_instance, container);
     (_a = document.querySelector('body')) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+    _instance.component.ctx.close = close;
+    _instance.component.ctx.$updateProps = function (props) {
+        props &&
+            Object.keys(props).forEach(function (k) {
+                _instance.component.props[k] = props[k];
+            });
+    };
+    return _instance.component.ctx;
 };
 
 /*
@@ -42157,6 +42183,39 @@ var useOtherComponents = function (otherComponents) {
     return otherComponents;
 };
 
+var useCreateModal = function (component, options, app) {
+    var _a;
+    console.log('useCreateModal app:', app);
+    var _instance = null;
+    var container = document.createElement('div');
+    var remove = function () {
+        _instance = null;
+        container.remove();
+    };
+    _instance = createVNode(component, __assign({ remove: remove, onRemove: function () {
+            remove();
+        } }, options));
+    // inject 函数调用组件导致内部inject无法接收到，需要使用app.provide（全局）：  https://github.com/vuejs/core/issues/6220
+    // context createApp需要use插件，内部才能使用插件\库相关API。可以直接修改上下文： https://github.com/vuejs/core/issues/2097
+    if (app) {
+        _instance.appContext = app._context; // 承接上下文，用于inject，调用层需要使用app.provide
+    }
+    render(_instance, container);
+    (_a = document.querySelector('body')) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+    // 在组件添加一个 remove 方法用来销毁组件
+    // 组件内调用 currentInstance.ctx.remove()
+    _instance.component.ctx.remove = remove;
+    console.log(_instance, '组件_instance');
+    // 更新props方法
+    _instance.component.ctx.$updateProps = function (props) {
+        props &&
+            Object.keys(props).forEach(function (k) {
+                _instance.component.props[k] = props[k];
+            });
+    };
+    return _instance.component.ctx;
+};
+
 /*
  * @Description:
  * @Date: 2022-06-30 22:57:28
@@ -42180,4 +42239,4 @@ var index = {
     install: install
 };
 
-export { BaseButton, BaseCheckbox, BaseCheckboxButton, BaseCheckboxGroup, BaseDatePicker, BaseDialog, BaseForm, BaseFormItem, BaseInput, BasePagination, BaseRadio, BaseRadioButton, BaseRadioGroup, BaseSelect, BaseSwitch, BaseTable, BaseTag, BaseTagGroup, XrkSearch, XrkTable, createDialog, index as default, useDatePickerColumn, useInputColumn, useOtherComponents, useResetBtn, useSearchBtn, useSearchColumns, useSelectColumn, useTableColumn };
+export { BaseButton, BaseCheckbox, BaseCheckboxButton, BaseCheckboxGroup, BaseDatePicker, BaseDialog, BaseForm, BaseFormItem, BaseInput, BasePagination, BaseRadio, BaseRadioButton, BaseRadioGroup, BaseSelect, BaseSwitch, BaseTable, BaseTag, BaseTagGroup, XrkSearch, XrkTable, createDialog, index as default, useCreateModal, useDatePickerColumn, useInputColumn, useOtherComponents, useResetBtn, useSearchBtn, useSearchColumns, useSelectColumn, useTableColumn };

package/lib/index.umd.js

@@ -4,6 +4,12 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Xrk = {}, global.vue, global.xrkTools));
 })(this, (function (exports, vue, xrkTools) { 'use strict';
 
+  /*
+   * @Description:
+   * @Date: 2022-10-18 09:44:40
+   */
+  // 作用域问题导致无法使用inject方式在各组件内接收到defineProps。可通过修改当前app上下文处理，use-create-modal中已实现。
+  // import { inject, computed } from 'vue';
   var provideKey = 'defaultProps';
   var useSetGlobalDefaultProps = function (props) {
       window[provideKey] = props;
@@ -38891,8 +38897,6 @@ usage: app.provide(ID_INJECTION_KEY, {
           column: {},
           $index: -1
         });
-        console.log(renderDefault,'renderDefault');
-
         const children = [];
         if (Array.isArray(renderDefault)) {
           for (const childNode of renderDefault) {
@@ -41243,7 +41247,8 @@ usage: app.provide(ID_INJECTION_KEY, {
           defaultSort: { type: Object, required: false },
           useBaseClass: { type: Boolean, required: false, default: (function () {
                   return useGetGlobalDefaultProp(propsKey$1, 'useBaseClass', true);
-              }) }
+              }) },
+          spanMethod: { type: null, required: false }
       }, emits: ["sort-change", "select", "select-all"], setup: function (__props, _a) {
           var expose = _a.expose, emits = _a.emit;
           setGlobalNamespace();
@@ -41284,6 +41289,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                   expandRowKeys: __props.expandRowKeys,
                   defaultSort: __props.defaultSort,
                   emptyText: __props.emptyText,
+                  spanMethod: __props.spanMethod,
                   onSortChange: handleSortChange
               }, {
                   empty: vue.withCtx(function () { return [
@@ -41306,7 +41312,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                       }), 128 /* KEYED_FRAGMENT */))
                   ]; }),
                   _: 3 /* FORWARDED */
-              }, 8 /* PROPS */, ["class", "data", "height", "maxHeight", "stripe", "border", "size", "fit", "rowClassName", "rowStyle", "cellClassName", "cellStyle", "headerRowClassName", "headerRowStyle", "rowKey", "defaultExpandAll", "expandRowKeys", "defaultSort", "emptyText"]));
+              }, 8 /* PROPS */, ["class", "data", "height", "maxHeight", "stripe", "border", "size", "fit", "rowClassName", "rowStyle", "cellClassName", "cellStyle", "headerRowClassName", "headerRowStyle", "rowKey", "defaultExpandAll", "expandRowKeys", "defaultSort", "emptyText", "spanMethod"]));
           };
       } }));
 
@@ -42087,19 +42093,39 @@ usage: app.provide(ID_INJECTION_KEY, {
       container.classList.add('_xrk_create_dialog');
       container.style.position = 'relative';
       container.style.zIndex = "".concat(200 + customDialogCount);
-      vue.render(vue.h(script, __assign(__assign({ modelValue: true }, (config || {})), { appendToBody: false, onClose: function () { return __awaiter(void 0, void 0, void 0, function () {
-              var _a, _b;
-              return __generator(this, function (_c) {
-                  switch (_c.label) {
-                      case 0: return [4 /*yield*/, ((_a = config === null || config === void 0 ? void 0 : config.onClose) === null || _a === void 0 ? void 0 : _a.call(config))];
-                      case 1:
-                          _c.sent();
-                          (_b = document.querySelector('body')) === null || _b === void 0 ? void 0 : _b.removeChild(container);
-                          return [2 /*return*/];
-                  }
+      var _instance = null;
+      var close = function () { return __awaiter(void 0, void 0, void 0, function () {
+          var _a, _b;
+          return __generator(this, function (_c) {
+              switch (_c.label) {
+                  case 0: return [4 /*yield*/, ((_a = config === null || config === void 0 ? void 0 : config.onClose) === null || _a === void 0 ? void 0 : _a.call(config))];
+                  case 1:
+                      _c.sent();
+                      (_b = document.querySelector('body')) === null || _b === void 0 ? void 0 : _b.removeChild(container);
+                      _instance = null;
+                      return [2 /*return*/];
+              }
+          });
+      }); };
+      _instance = vue.h(script, __assign({ modelValue: true, appendToBody: false, onClose: function () { return __awaiter(void 0, void 0, void 0, function () {
+              return __generator(this, function (_a) {
+                  close();
+                  return [2 /*return*/];
               });
-          }); } })), container);
+          }); } }, (config || {})));
+      if (config && config.app) {
+          _instance.appContext = config.app._context; // 承接上下文，用于inject，调用层需要使用app.provide
+      }
+      vue.render(_instance, container);
       (_a = document.querySelector('body')) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+      _instance.component.ctx.close = close;
+      _instance.component.ctx.$updateProps = function (props) {
+          props &&
+              Object.keys(props).forEach(function (k) {
+                  _instance.component.props[k] = props[k];
+              });
+      };
+      return _instance.component.ctx;
   };
 
   /*
@@ -42160,6 +42186,39 @@ usage: app.provide(ID_INJECTION_KEY, {
       return otherComponents;
   };
 
+  var useCreateModal = function (component, options, app) {
+      var _a;
+      console.log('useCreateModal app:', app);
+      var _instance = null;
+      var container = document.createElement('div');
+      var remove = function () {
+          _instance = null;
+          container.remove();
+      };
+      _instance = vue.createVNode(component, __assign({ remove: remove, onRemove: function () {
+              remove();
+          } }, options));
+      // inject 函数调用组件导致内部inject无法接收到，需要使用app.provide（全局）：  https://github.com/vuejs/core/issues/6220
+      // context createApp需要use插件，内部才能使用插件\库相关API。可以直接修改上下文： https://github.com/vuejs/core/issues/2097
+      if (app) {
+          _instance.appContext = app._context; // 承接上下文，用于inject，调用层需要使用app.provide
+      }
+      vue.render(_instance, container);
+      (_a = document.querySelector('body')) === null || _a === void 0 ? void 0 : _a.appendChild(container);
+      // 在组件添加一个 remove 方法用来销毁组件
+      // 组件内调用 currentInstance.ctx.remove()
+      _instance.component.ctx.remove = remove;
+      console.log(_instance, '组件_instance');
+      // 更新props方法
+      _instance.component.ctx.$updateProps = function (props) {
+          props &&
+              Object.keys(props).forEach(function (k) {
+                  _instance.component.props[k] = props[k];
+              });
+      };
+      return _instance.component.ctx;
+  };
+
   /*
    * @Description:
    * @Date: 2022-06-30 22:57:28
@@ -42205,6 +42264,7 @@ usage: app.provide(ID_INJECTION_KEY, {
   exports.XrkTable = XrkTable;
   exports.createDialog = createDialog;
   exports["default"] = index;
+  exports.useCreateModal = useCreateModal;
   exports.useDatePickerColumn = useDatePickerColumn;
   exports.useInputColumn = useInputColumn;
   exports.useOtherComponents = useOtherComponents;

package/lib/packages/base/dialog/index.d.ts

@@ -1,5 +1,9 @@
-import { Component, DefineComponent } from 'vue';
+import { Component, DefineComponent, App } from 'vue';
 import { BaseButtonProps } from '../button';
+interface ModalInstance {
+    close(): void;
+    $updateProps(props: Record<string, any>): void;
+}
 export declare type BaseDialogProps = {
     modelValue?: boolean;
     closeOnClickModal?: boolean;
@@ -21,6 +25,7 @@ export declare type BaseDialogProps = {
     footerRender?: (done: Function) => Component;
     confirmBtnConfig?: DialogBtnConfigProps;
     cancelBtnConfig?: DialogBtnConfigProps;
+    app?: App;
     onClose?: () => Promise<void> | void;
 };
 export interface DialogBtnConfigProps extends BaseButtonProps {
@@ -28,4 +33,5 @@ export interface DialogBtnConfigProps extends BaseButtonProps {
     content?: string;
 }
 export declare const BaseDialog: DefineComponent<BaseDialogProps, {}, {}, import("vue").ComputedOptions, import("vue").MethodOptions, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<BaseDialogProps>, {}>;
-export declare const createDialog: (config?: BaseDialogProps) => void;
+export declare const createDialog: (config?: BaseDialogProps) => ModalInstance;
+export {};

package/lib/packages/base/table/table.d.ts

@@ -91,6 +91,10 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: any;
     };
+    spanMethod: {
+        type: null;
+        required: false;
+    };
 }, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("sort-change" | "select" | "select-all")[], "sort-change" | "select" | "select-all", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -186,6 +190,10 @@ declare const _default: import("vue").DefineComponent<{
         required: false;
         default: any;
     };
+    spanMethod: {
+        type: null;
+        required: false;
+    };
 }>> & {
     "onSort-change"?: ((...args: any[]) => any) | undefined;
     onSelect?: ((...args: any[]) => any) | undefined;

package/lib/packages/base/table/types/type.d.ts

@@ -25,6 +25,15 @@ export declare type BaseTableSortInfoType = {
     prop: string;
     order: 'ascending' | 'descending' | null;
 };
+export declare type SpanMethod = (data: {
+    row: any;
+    rowIndex: number;
+    column: TableColumnCtx<any>;
+    columnIndex: number;
+}) => number[] | {
+    rowspan: number;
+    colspan: number;
+} | undefined;
 export declare type BaseTableProps = {
     data: Array<Record<string, any>>;
     columns: Array<BaseTableColumnProps>;
@@ -50,6 +59,7 @@ export declare type BaseTableProps = {
         prop: string;
         order: 'ascending' | 'descending';
     };
+    spanMethod?: SpanMethod;
     onSortChange?: (info: BaseTableSortInfoType) => void;
     onSelect?: (selection: any, row: any) => void;
     onSelectAll?: (selection: any) => void;

package/lib/packages/hooks/use-create-modal.d.ts

@@ -0,0 +1,9 @@
+import { App, Component } from 'vue';
+declare type anyObj = Record<string, any>;
+interface ModalInstance {
+    remove(): void;
+    $updateProps(props: anyObj): void;
+}
+export declare const useCreateModal: (component: Component, options?: anyObj, app?: App) => ModalInstance;
+declare const install: (app: App, component: Component, options: anyObj) => void;
+export default install;

package/lib/packages/index.d.ts

@@ -4,6 +4,7 @@ import { DefaultProps } from './hooks/use-default-props';
 export * from './components';
 export * from './functions';
 export * from './types';
+export { useCreateModal } from './hooks/use-create-modal';
 declare const _default: {
     version: any;
     useSetGlobalDefaultProps: (props: DefaultProps) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xrk-components",
-  "version": "0.4.2-beta.2",
+  "version": "0.4.2-beta.4",
   "description": "",
   "main": "lib/index.esm.js",
   "typings": "lib/packages/index.d.ts",