xrk-components 0.4.2-beta.3 → 0.4.2-beta.5

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;
@@ -20440,7 +20446,7 @@ const inputEmits = {
 
 const _hoisted_1$y = ["role"];
 const _hoisted_2$m = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-const _hoisted_3$b = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+const _hoisted_3$a = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
 const __default__$Q = defineComponent({
   name: "ElInput",
   inheritAttrs: false
@@ -20833,7 +20839,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
             onBlur: handleBlur,
             onChange: handleChange,
             onKeydown: handleKeydown
-          }), null, 16, _hoisted_3$b),
+          }), null, 16, _hoisted_3$a),
           unref(isWordLimitVisible) ? (openBlock(), createElementBlock("span", {
             key: 0,
             style: normalizeStyle(countStyle.value),
@@ -25934,7 +25940,7 @@ const useCheckbox = (props, slots) => {
 
 const _hoisted_1$t = ["tabindex", "role", "aria-checked"];
 const _hoisted_2$i = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-const _hoisted_3$a = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
+const _hoisted_3$9 = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
 const __default__$E = defineComponent({
   name: "ElCheckbox"
 });
@@ -26014,7 +26020,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
               onChange: _cache[5] || (_cache[5] = (...args) => unref(handleChange) && unref(handleChange)(...args)),
               onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
               onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
-            }, null, 42, _hoisted_3$a)), [
+            }, null, 42, _hoisted_3$9)), [
               [vModelCheckbox, unref(model)]
             ]),
             createElementVNode("span", {
@@ -26871,7 +26877,7 @@ const _hoisted_2$g = {
   key: 0,
   scope: "col"
 };
-const _hoisted_3$9 = ["aria-label"];
+const _hoisted_3$8 = ["aria-label"];
 const _hoisted_4$5 = ["aria-current", "aria-selected", "tabindex"];
 const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "basic-date-table",
@@ -27189,7 +27195,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
                 key,
                 scope: "col",
                 "aria-label": unref(t)("el.datepicker.weeksFull." + week)
-              }, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$9);
+              }, toDisplayString(unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$8);
             }), 128))
           ]),
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(rows), (row, rowKey) => {
@@ -27227,7 +27233,7 @@ const basicMonthTableProps = buildProps({
 
 const _hoisted_1$n = ["aria-label"];
 const _hoisted_2$f = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
-const _hoisted_3$8 = { class: "cell" };
+const _hoisted_3$7 = { class: "cell" };
 const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "basic-month-table",
   props: basicMonthTableProps,
@@ -27410,7 +27416,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
                   ]
                 }, [
                   createElementVNode("div", null, [
-                    createElementVNode("span", _hoisted_3$8, toDisplayString(unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
+                    createElementVNode("span", _hoisted_3$7, toDisplayString(unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
                   ])
                 ], 42, _hoisted_2$f);
               }), 128))
@@ -27432,7 +27438,7 @@ const basicYearTableProps = buildProps({
 
 const _hoisted_1$m = ["aria-label"];
 const _hoisted_2$e = ["aria-selected", "tabindex", "onKeydown"];
-const _hoisted_3$7 = { class: "cell" };
+const _hoisted_3$6 = { class: "cell" };
 const _hoisted_4$4 = { key: 1 };
 const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "basic-year-table",
@@ -27517,7 +27523,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
                       withKeys(withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
                     ]
                   }, [
-                    createElementVNode("span", _hoisted_3$7, toDisplayString(unref(startYear) + i * 4 + j), 1)
+                    createElementVNode("span", _hoisted_3$6, toDisplayString(unref(startYear) + i * 4 + j), 1)
                   ], 42, _hoisted_2$e)) : (openBlock(), createElementBlock("td", _hoisted_4$4))
                 ], 64);
               }), 64))
@@ -27532,7 +27538,7 @@ var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__file", "/home/runn
 
 const _hoisted_1$l = ["onClick"];
 const _hoisted_2$d = ["aria-label"];
-const _hoisted_3$6 = ["aria-label"];
+const _hoisted_3$5 = ["aria-label"];
 const _hoisted_4$3 = ["aria-label"];
 const _hoisted_5$3 = ["aria-label"];
 const _sfc_main$j = /* @__PURE__ */ defineComponent({
@@ -28020,7 +28026,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_3$6), [
+                ], 10, _hoisted_3$5), [
                   [vShow, currentView.value === "date"]
                 ])
               ], 2),
@@ -28259,7 +28265,7 @@ const useRangePicker = (props, {
 
 const _hoisted_1$k = ["onClick"];
 const _hoisted_2$c = ["disabled"];
-const _hoisted_3$5 = ["disabled"];
+const _hoisted_3$4 = ["disabled"];
 const _hoisted_4$2 = ["disabled"];
 const _hoisted_5$2 = ["disabled"];
 const unit$1 = "month";
@@ -28775,7 +28781,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_3$5)) : createCommentVNode("v-if", true),
+                ], 10, _hoisted_3$4)) : createCommentVNode("v-if", true),
                 createElementVNode("div", null, toDisplayString(unref(leftLabel)), 1)
               ], 2),
               createVNode(DateTable, {
@@ -28959,7 +28965,7 @@ const useMonthRangeHeader = ({
 
 const _hoisted_1$j = ["onClick"];
 const _hoisted_2$b = ["disabled"];
-const _hoisted_3$4 = ["disabled"];
+const _hoisted_3$3 = ["disabled"];
 const unit = "year";
 const __default__$x = defineComponent({
   name: "DatePickerMonthRange"
@@ -29137,7 +29143,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   })
-                ], 10, _hoisted_3$4)) : createCommentVNode("v-if", true),
+                ], 10, _hoisted_3$3)) : createCommentVNode("v-if", true),
                 createElementVNode("button", {
                   type: "button",
                   class: normalizeClass([unref(ppNs).e("icon-btn"), "d-arrow-right"]),
@@ -33716,7 +33722,7 @@ const paginationPagerProps = buildProps({
 
 const _hoisted_1$a = ["onKeyup"];
 const _hoisted_2$6 = ["aria-current", "tabindex"];
-const _hoisted_3$3 = ["tabindex"];
+const _hoisted_3$2 = ["tabindex"];
 const _hoisted_4$1 = ["aria-current", "tabindex"];
 const _hoisted_5$1 = ["tabindex"];
 const _hoisted_6 = ["aria-current", "tabindex"];
@@ -33873,7 +33879,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           onBlur: _cache[3] || (_cache[3] = ($event) => quickPrevFocus.value = false)
         }, [
           quickPrevHover.value || quickPrevFocus.value ? (openBlock(), createBlock(unref(d_arrow_left_default), { key: 0 })) : (openBlock(), createBlock(unref(more_filled_default), { key: 1 }))
-        ], 42, _hoisted_3$3)) : createCommentVNode("v-if", true),
+        ], 42, _hoisted_3$2)) : createCommentVNode("v-if", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(pagers), (pager) => {
           return openBlock(), createElementBlock("li", {
             key: pager,
@@ -34259,7 +34265,7 @@ const switchEmits = {
 
 const _hoisted_1$9 = ["onClick"];
 const _hoisted_2$5 = ["id", "aria-checked", "aria-disabled", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"];
-const _hoisted_3$2 = ["aria-hidden"];
+const _hoisted_3$1 = ["aria-hidden"];
 const _hoisted_4 = ["aria-hidden"];
 const _hoisted_5 = ["aria-hidden"];
 const COMPONENT_NAME = "ElSwitch";
@@ -34420,7 +34426,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           !_ctx.inactiveIcon && _ctx.inactiveText ? (openBlock(), createElementBlock("span", {
             key: 1,
             "aria-hidden": unref(checked)
-          }, toDisplayString(_ctx.inactiveText), 9, _hoisted_3$2)) : createCommentVNode("v-if", true)
+          }, toDisplayString(_ctx.inactiveText), 9, _hoisted_3$1)) : createCommentVNode("v-if", true)
         ], 2)) : createCommentVNode("v-if", true),
         createElementVNode("span", {
           ref_key: "core",
@@ -36256,7 +36262,7 @@ const _sfc_main$1 = defineComponent({
 });
 const _hoisted_1$8 = { key: 0 };
 const _hoisted_2$4 = ["disabled"];
-const _hoisted_3$1 = ["label", "onClick"];
+const _hoisted_3 = ["label", "onClick"];
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_el_checkbox = resolveComponent("el-checkbox");
   const _component_el_checkbox_group = resolveComponent("el-checkbox-group");
@@ -36345,7 +36351,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
             class: normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
             label: filter.value,
             onClick: ($event) => _ctx.handleSelect(filter.value)
-          }, toDisplayString(filter.text), 11, _hoisted_3$1);
+          }, toDisplayString(filter.text), 11, _hoisted_3);
         }), 128))
       ], 2))
     ]),
@@ -41891,7 +41897,6 @@ var XrkTable = script$1;
 
 var _hoisted_1 = { key: 1 };
 var _hoisted_2 = { key: 1 };
-var _hoisted_3 = { key: 1 };
 var __default__ = {
     name: 'base-dialog'
 };
@@ -42022,42 +42027,44 @@ var script = /*#__PURE__*/ defineComponent(__assign(__assign({}, __default__), {
                             key: 0,
                             render: __props.titleRender
                         }, null, 8 /* PROPS */, ["render"]))
-                        : (__props.title)
-                            ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(__props.title), 1 /* TEXT */))
-                            : renderSlot(_ctx.$slots, "header", { key: 2 })
+                        : renderSlot(_ctx.$slots, "header", { key: 1 }, function () { return [
+                            createTextVNode(toDisplayString(__props.title), 1 /* TEXT */)
+                        ]; })
                 ]; }),
                 footer: withCtx(function () { return [
-                    (__props.footerRender)
-                        ? (openBlock(), createBlock(unref(BaseDialogRender), {
-                            key: 0,
-                            render: __props.footerRender
-                        }, null, 8 /* PROPS */, ["render"]))
-                        : (__props.showFooter)
-                            ? (openBlock(), createElementBlock("div", _hoisted_3, [
-                                (__props.cancelBtnConfig.show)
-                                    ? (openBlock(), createBlock(unref(BaseButton), mergeProps({
-                                        key: 0,
-                                        size: "large"
-                                    }, __props.cancelBtnConfig, { click: handleCancelClick }), {
-                                        default: withCtx(function () { return [
-                                            createTextVNode(toDisplayString(__props.cancelBtnConfig.content), 1 /* TEXT */)
-                                        ]; }),
-                                        _: 1 /* STABLE */
-                                    }, 16 /* FULL_PROPS */))
-                                    : createCommentVNode("v-if", true),
-                                (__props.confirmBtnConfig.show)
-                                    ? (openBlock(), createBlock(unref(BaseButton), mergeProps({
-                                        key: 1,
-                                        size: "large"
-                                    }, __props.confirmBtnConfig, { click: handleConfirmClick }), {
-                                        default: withCtx(function () { return [
-                                            createTextVNode(toDisplayString(__props.confirmBtnConfig.content), 1 /* TEXT */)
-                                        ]; }),
-                                        _: 1 /* STABLE */
-                                    }, 16 /* FULL_PROPS */))
-                                    : createCommentVNode("v-if", true)
-                            ]))
-                            : createCommentVNode("v-if", true)
+                    renderSlot(_ctx.$slots, "footer", {}, function () { return [
+                        (__props.footerRender)
+                            ? (openBlock(), createBlock(unref(BaseDialogRender), {
+                                key: 0,
+                                render: __props.footerRender
+                            }, null, 8 /* PROPS */, ["render"]))
+                            : (__props.showFooter)
+                                ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                                    (__props.cancelBtnConfig.show)
+                                        ? (openBlock(), createBlock(unref(BaseButton), mergeProps({
+                                            key: 0,
+                                            size: "large"
+                                        }, __props.cancelBtnConfig, { click: handleCancelClick }), {
+                                            default: withCtx(function () { return [
+                                                createTextVNode(toDisplayString(__props.cancelBtnConfig.content), 1 /* TEXT */)
+                                            ]; }),
+                                            _: 1 /* STABLE */
+                                        }, 16 /* FULL_PROPS */))
+                                        : createCommentVNode("v-if", true),
+                                    (__props.confirmBtnConfig.show)
+                                        ? (openBlock(), createBlock(unref(BaseButton), mergeProps({
+                                            key: 1,
+                                            size: "large"
+                                        }, __props.confirmBtnConfig, { click: handleConfirmClick }), {
+                                            default: withCtx(function () { return [
+                                                createTextVNode(toDisplayString(__props.confirmBtnConfig.content), 1 /* TEXT */)
+                                            ]; }),
+                                            _: 1 /* STABLE */
+                                        }, 16 /* FULL_PROPS */))
+                                        : createCommentVNode("v-if", true)
+                                ]))
+                                : createCommentVNode("v-if", true)
+                    ]; })
                 ]; }),
                 default: withCtx(function () { return [
                     (__props.contentRender)
@@ -42066,7 +42073,7 @@ var script = /*#__PURE__*/ defineComponent(__assign(__assign({}, __default__), {
                             render: __props.contentRender
                         }, null, 8 /* PROPS */, ["render"]))
                         : (__props.content)
-                            ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(__props.content), 1 /* TEXT */))
+                            ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(__props.content), 1 /* TEXT */))
                             : renderSlot(_ctx.$slots, "default", { key: 2 })
                 ]; }),
                 _: 3 /* FORWARDED */
@@ -42084,19 +42091,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 +42184,46 @@ 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 () {
+        container.remove();
+        _instance = null;
+    };
+    _instance = createVNode(component, __assign({ remove: remove, close: remove, onRemove: function () {
+            remove();
+        }, 
+        // 兼容base-dialog
+        onClose: function () {
+            remove();
+        }, 
+        // 兼容base-dialog，true会导致没有append到container容器中
+        appendToBody: false }, 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;
+    _instance.component.ctx.close = close;
+    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 +42247,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;
@@ -20443,7 +20449,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$y = ["role"];
   const _hoisted_2$m = ["id", "type", "disabled", "formatter", "parser", "readonly", "autocomplete", "tabindex", "aria-label", "placeholder", "form"];
-  const _hoisted_3$b = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
+  const _hoisted_3$a = ["id", "tabindex", "disabled", "readonly", "autocomplete", "aria-label", "placeholder", "form"];
   const __default__$Q = vue.defineComponent({
     name: "ElInput",
     inheritAttrs: false
@@ -20836,7 +20842,7 @@ usage: app.provide(ID_INJECTION_KEY, {
               onBlur: handleBlur,
               onChange: handleChange,
               onKeydown: handleKeydown
-            }), null, 16, _hoisted_3$b),
+            }), null, 16, _hoisted_3$a),
             vue.unref(isWordLimitVisible) ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 0,
               style: vue.normalizeStyle(countStyle.value),
@@ -25937,7 +25943,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$t = ["tabindex", "role", "aria-checked"];
   const _hoisted_2$i = ["id", "aria-hidden", "name", "tabindex", "disabled", "true-value", "false-value"];
-  const _hoisted_3$a = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
+  const _hoisted_3$9 = ["id", "aria-hidden", "disabled", "value", "name", "tabindex"];
   const __default__$E = vue.defineComponent({
     name: "ElCheckbox"
   });
@@ -26017,7 +26023,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                 onChange: _cache[5] || (_cache[5] = (...args) => vue.unref(handleChange) && vue.unref(handleChange)(...args)),
                 onFocus: _cache[6] || (_cache[6] = ($event) => isFocused.value = true),
                 onBlur: _cache[7] || (_cache[7] = ($event) => isFocused.value = false)
-              }, null, 42, _hoisted_3$a)), [
+              }, null, 42, _hoisted_3$9)), [
                 [vue.vModelCheckbox, vue.unref(model)]
               ]),
               vue.createElementVNode("span", {
@@ -26874,7 +26880,7 @@ usage: app.provide(ID_INJECTION_KEY, {
     key: 0,
     scope: "col"
   };
-  const _hoisted_3$9 = ["aria-label"];
+  const _hoisted_3$8 = ["aria-label"];
   const _hoisted_4$5 = ["aria-current", "aria-selected", "tabindex"];
   const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
     __name: "basic-date-table",
@@ -27192,7 +27198,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                   key,
                   scope: "col",
                   "aria-label": vue.unref(t)("el.datepicker.weeksFull." + week)
-                }, vue.toDisplayString(vue.unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$9);
+                }, vue.toDisplayString(vue.unref(t)("el.datepicker.weeks." + week)), 9, _hoisted_3$8);
               }), 128))
             ]),
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(rows), (row, rowKey) => {
@@ -27230,7 +27236,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$n = ["aria-label"];
   const _hoisted_2$f = ["aria-selected", "aria-label", "tabindex", "onKeydown"];
-  const _hoisted_3$8 = { class: "cell" };
+  const _hoisted_3$7 = { class: "cell" };
   const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
     __name: "basic-month-table",
     props: basicMonthTableProps,
@@ -27413,7 +27419,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                     ]
                   }, [
                     vue.createElementVNode("div", null, [
-                      vue.createElementVNode("span", _hoisted_3$8, vue.toDisplayString(vue.unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
+                      vue.createElementVNode("span", _hoisted_3$7, vue.toDisplayString(vue.unref(t)("el.datepicker.months." + months.value[cell.text])), 1)
                     ])
                   ], 42, _hoisted_2$f);
                 }), 128))
@@ -27435,7 +27441,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$m = ["aria-label"];
   const _hoisted_2$e = ["aria-selected", "tabindex", "onKeydown"];
-  const _hoisted_3$7 = { class: "cell" };
+  const _hoisted_3$6 = { class: "cell" };
   const _hoisted_4$4 = { key: 1 };
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     __name: "basic-year-table",
@@ -27520,7 +27526,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                         vue.withKeys(vue.withModifiers(handleYearTableClick, ["prevent", "stop"]), ["enter"])
                       ]
                     }, [
-                      vue.createElementVNode("span", _hoisted_3$7, vue.toDisplayString(vue.unref(startYear) + i * 4 + j), 1)
+                      vue.createElementVNode("span", _hoisted_3$6, vue.toDisplayString(vue.unref(startYear) + i * 4 + j), 1)
                     ], 42, _hoisted_2$e)) : (vue.openBlock(), vue.createElementBlock("td", _hoisted_4$4))
                   ], 64);
                 }), 64))
@@ -27535,7 +27541,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$l = ["onClick"];
   const _hoisted_2$d = ["aria-label"];
-  const _hoisted_3$6 = ["aria-label"];
+  const _hoisted_3$5 = ["aria-label"];
   const _hoisted_4$3 = ["aria-label"];
   const _hoisted_5$3 = ["aria-label"];
   const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
@@ -28023,7 +28029,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_3$6), [
+                  ], 10, _hoisted_3$5), [
                     [vue.vShow, currentView.value === "date"]
                   ])
                 ], 2),
@@ -28262,7 +28268,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$k = ["onClick"];
   const _hoisted_2$c = ["disabled"];
-  const _hoisted_3$5 = ["disabled"];
+  const _hoisted_3$4 = ["disabled"];
   const _hoisted_4$2 = ["disabled"];
   const _hoisted_5$2 = ["disabled"];
   const unit$1 = "month";
@@ -28778,7 +28784,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_3$5)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_3$4)) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("div", null, vue.toDisplayString(vue.unref(leftLabel)), 1)
                 ], 2),
                 vue.createVNode(DateTable, {
@@ -28962,7 +28968,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$j = ["onClick"];
   const _hoisted_2$b = ["disabled"];
-  const _hoisted_3$4 = ["disabled"];
+  const _hoisted_3$3 = ["disabled"];
   const unit = "year";
   const __default__$x = vue.defineComponent({
     name: "DatePickerMonthRange"
@@ -29140,7 +29146,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                       ]),
                       _: 1
                     })
-                  ], 10, _hoisted_3$4)) : vue.createCommentVNode("v-if", true),
+                  ], 10, _hoisted_3$3)) : vue.createCommentVNode("v-if", true),
                   vue.createElementVNode("button", {
                     type: "button",
                     class: vue.normalizeClass([vue.unref(ppNs).e("icon-btn"), "d-arrow-right"]),
@@ -33719,7 +33725,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$a = ["onKeyup"];
   const _hoisted_2$6 = ["aria-current", "tabindex"];
-  const _hoisted_3$3 = ["tabindex"];
+  const _hoisted_3$2 = ["tabindex"];
   const _hoisted_4$1 = ["aria-current", "tabindex"];
   const _hoisted_5$1 = ["tabindex"];
   const _hoisted_6 = ["aria-current", "tabindex"];
@@ -33876,7 +33882,7 @@ usage: app.provide(ID_INJECTION_KEY, {
             onBlur: _cache[3] || (_cache[3] = ($event) => quickPrevFocus.value = false)
           }, [
             quickPrevHover.value || quickPrevFocus.value ? (vue.openBlock(), vue.createBlock(vue.unref(d_arrow_left_default), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(more_filled_default), { key: 1 }))
-          ], 42, _hoisted_3$3)) : vue.createCommentVNode("v-if", true),
+          ], 42, _hoisted_3$2)) : vue.createCommentVNode("v-if", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(pagers), (pager) => {
             return vue.openBlock(), vue.createElementBlock("li", {
               key: pager,
@@ -34262,7 +34268,7 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   const _hoisted_1$9 = ["onClick"];
   const _hoisted_2$5 = ["id", "aria-checked", "aria-disabled", "name", "true-value", "false-value", "disabled", "tabindex", "onKeydown"];
-  const _hoisted_3$2 = ["aria-hidden"];
+  const _hoisted_3$1 = ["aria-hidden"];
   const _hoisted_4 = ["aria-hidden"];
   const _hoisted_5 = ["aria-hidden"];
   const COMPONENT_NAME = "ElSwitch";
@@ -34423,7 +34429,7 @@ usage: app.provide(ID_INJECTION_KEY, {
             !_ctx.inactiveIcon && _ctx.inactiveText ? (vue.openBlock(), vue.createElementBlock("span", {
               key: 1,
               "aria-hidden": vue.unref(checked)
-            }, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_3$2)) : vue.createCommentVNode("v-if", true)
+            }, vue.toDisplayString(_ctx.inactiveText), 9, _hoisted_3$1)) : vue.createCommentVNode("v-if", true)
           ], 2)) : vue.createCommentVNode("v-if", true),
           vue.createElementVNode("span", {
             ref_key: "core",
@@ -36259,7 +36265,7 @@ usage: app.provide(ID_INJECTION_KEY, {
   });
   const _hoisted_1$8 = { key: 0 };
   const _hoisted_2$4 = ["disabled"];
-  const _hoisted_3$1 = ["label", "onClick"];
+  const _hoisted_3 = ["label", "onClick"];
   function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_el_checkbox = vue.resolveComponent("el-checkbox");
     const _component_el_checkbox_group = vue.resolveComponent("el-checkbox-group");
@@ -36348,7 +36354,7 @@ usage: app.provide(ID_INJECTION_KEY, {
               class: vue.normalizeClass([_ctx.ns.e("list-item"), _ctx.ns.is("active", _ctx.isActive(filter))]),
               label: filter.value,
               onClick: ($event) => _ctx.handleSelect(filter.value)
-            }, vue.toDisplayString(filter.text), 11, _hoisted_3$1);
+            }, vue.toDisplayString(filter.text), 11, _hoisted_3);
           }), 128))
         ], 2))
       ]),
@@ -41894,7 +41900,6 @@ usage: app.provide(ID_INJECTION_KEY, {
 
   var _hoisted_1 = { key: 1 };
   var _hoisted_2 = { key: 1 };
-  var _hoisted_3 = { key: 1 };
   var __default__ = {
       name: 'base-dialog'
   };
@@ -42025,42 +42030,44 @@ usage: app.provide(ID_INJECTION_KEY, {
                               key: 0,
                               render: __props.titleRender
                           }, null, 8 /* PROPS */, ["render"]))
-                          : (__props.title)
-                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(__props.title), 1 /* TEXT */))
-                              : vue.renderSlot(_ctx.$slots, "header", { key: 2 })
+                          : vue.renderSlot(_ctx.$slots, "header", { key: 1 }, function () { return [
+                              vue.createTextVNode(vue.toDisplayString(__props.title), 1 /* TEXT */)
+                          ]; })
                   ]; }),
                   footer: vue.withCtx(function () { return [
-                      (__props.footerRender)
-                          ? (vue.openBlock(), vue.createBlock(vue.unref(BaseDialogRender), {
-                              key: 0,
-                              render: __props.footerRender
-                          }, null, 8 /* PROPS */, ["render"]))
-                          : (__props.showFooter)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-                                  (__props.cancelBtnConfig.show)
-                                      ? (vue.openBlock(), vue.createBlock(vue.unref(BaseButton), vue.mergeProps({
-                                          key: 0,
-                                          size: "large"
-                                      }, __props.cancelBtnConfig, { click: handleCancelClick }), {
-                                          default: vue.withCtx(function () { return [
-                                              vue.createTextVNode(vue.toDisplayString(__props.cancelBtnConfig.content), 1 /* TEXT */)
-                                          ]; }),
-                                          _: 1 /* STABLE */
-                                      }, 16 /* FULL_PROPS */))
-                                      : vue.createCommentVNode("v-if", true),
-                                  (__props.confirmBtnConfig.show)
-                                      ? (vue.openBlock(), vue.createBlock(vue.unref(BaseButton), vue.mergeProps({
-                                          key: 1,
-                                          size: "large"
-                                      }, __props.confirmBtnConfig, { click: handleConfirmClick }), {
-                                          default: vue.withCtx(function () { return [
-                                              vue.createTextVNode(vue.toDisplayString(__props.confirmBtnConfig.content), 1 /* TEXT */)
-                                          ]; }),
-                                          _: 1 /* STABLE */
-                                      }, 16 /* FULL_PROPS */))
-                                      : vue.createCommentVNode("v-if", true)
-                              ]))
-                              : vue.createCommentVNode("v-if", true)
+                      vue.renderSlot(_ctx.$slots, "footer", {}, function () { return [
+                          (__props.footerRender)
+                              ? (vue.openBlock(), vue.createBlock(vue.unref(BaseDialogRender), {
+                                  key: 0,
+                                  render: __props.footerRender
+                              }, null, 8 /* PROPS */, ["render"]))
+                              : (__props.showFooter)
+                                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                                      (__props.cancelBtnConfig.show)
+                                          ? (vue.openBlock(), vue.createBlock(vue.unref(BaseButton), vue.mergeProps({
+                                              key: 0,
+                                              size: "large"
+                                          }, __props.cancelBtnConfig, { click: handleCancelClick }), {
+                                              default: vue.withCtx(function () { return [
+                                                  vue.createTextVNode(vue.toDisplayString(__props.cancelBtnConfig.content), 1 /* TEXT */)
+                                              ]; }),
+                                              _: 1 /* STABLE */
+                                          }, 16 /* FULL_PROPS */))
+                                          : vue.createCommentVNode("v-if", true),
+                                      (__props.confirmBtnConfig.show)
+                                          ? (vue.openBlock(), vue.createBlock(vue.unref(BaseButton), vue.mergeProps({
+                                              key: 1,
+                                              size: "large"
+                                          }, __props.confirmBtnConfig, { click: handleConfirmClick }), {
+                                              default: vue.withCtx(function () { return [
+                                                  vue.createTextVNode(vue.toDisplayString(__props.confirmBtnConfig.content), 1 /* TEXT */)
+                                              ]; }),
+                                              _: 1 /* STABLE */
+                                          }, 16 /* FULL_PROPS */))
+                                          : vue.createCommentVNode("v-if", true)
+                                  ]))
+                                  : vue.createCommentVNode("v-if", true)
+                      ]; })
                   ]; }),
                   default: vue.withCtx(function () { return [
                       (__props.contentRender)
@@ -42069,7 +42076,7 @@ usage: app.provide(ID_INJECTION_KEY, {
                               render: __props.contentRender
                           }, null, 8 /* PROPS */, ["render"]))
                           : (__props.content)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(__props.content), 1 /* TEXT */))
+                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(__props.content), 1 /* TEXT */))
                               : vue.renderSlot(_ctx.$slots, "default", { key: 2 })
                   ]; }),
                   _: 3 /* FORWARDED */
@@ -42087,19 +42094,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 +42187,46 @@ 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 () {
+          container.remove();
+          _instance = null;
+      };
+      _instance = vue.createVNode(component, __assign({ remove: remove, close: remove, onRemove: function () {
+              remove();
+          }, 
+          // 兼容base-dialog
+          onClose: function () {
+              remove();
+          }, 
+          // 兼容base-dialog，true会导致没有append到container容器中
+          appendToBody: false }, 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;
+      _instance.component.ctx.close = close;
+      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 +42272,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,10 @@
+import { App, Component } from 'vue';
+declare type anyObj = Record<string, any>;
+interface ModalInstance {
+    remove(): void;
+    close(): 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.5",
   "description": "",
   "main": "lib/index.esm.js",
   "typings": "lib/packages/index.d.ts",