xrk-components 0.4.2-beta.3 → 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;
@@ -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;
@@ -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/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.3",
+  "version": "0.4.2-beta.4",
   "description": "",
   "main": "lib/index.esm.js",
   "typings": "lib/packages/index.d.ts",