snail.vue 1.0.11 → 1.0.13

package/dist/snail.vue.d.ts

@@ -1,6 +1,6 @@
+import { IScope } from 'snail.core';
 import * as vue from 'vue';
 import { App, Component } from 'vue';
-import { IScope } from 'snail.core';
 
 /**
  * Vue App助手类，做一些app实例的辅助性工作
@@ -41,6 +41,21 @@ type ComponentOptions = {
      */
     url?: string;
 };
+/**
+ *
+ */
+type ComponentMountOptions = ComponentOptions & {
+    /**
+     * 挂载到哪个dom元素下
+     */
+    target: Element;
+    /**
+     * 传递给组件的属性值，执行v-bind绑定到要显示的组件
+     * - key为属性名称，遵循vue解析规则
+     * - 若为事件监听，则使用onXXX
+     */
+    props?: Record<string, any>;
+};
 
 /**
  * 模态弹窗显示的组件配置选项
@@ -52,16 +67,6 @@ type DialogOptions = ComponentOptions & {
      * - 若为事件监听，则使用onXXX
      */
     props?: Record<string, any>;
-    /**
-     * 按下esc健时是否关闭弹窗
-     * - 默认值：false
-     */
-    closeOnEscape?: boolean;
-    /**
-     * 点击遮罩层时是否关闭弹窗
-     * - 默认值：false
-     */
-    closeOnMask?: boolean;
     /**
      * 自定义class
      * - 绑定模块弹窗显示的组件根元素上
@@ -72,6 +77,16 @@ type DialogOptions = ComponentOptions & {
      * - 绑定模块弹窗显示的组件根元素上
      */
     style?: string | string[];
+    /**
+     * 按下esc健时是否关闭弹窗
+     * - 默认值：false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 点击遮罩层时是否关闭弹窗
+     * - 默认值：false
+     */
+    closeOnMask?: boolean;
     /**
      * 弹窗的z-index值
      * - 无特殊情况，建议不粗韩，内部会自动生成，确保弹窗正确性
@@ -187,5 +202,15 @@ type __VLS_WithSlots<T, S> = T & {
     };
 };
 
-export { _default$1 as SnailDynamic, _default as SnailLoading, onAppCreated, openDialog, triggerAppCreated };
-export type { Dialog, DialogHandle, DialogOpenResult, DialogOptions, LoadingOptions };
+/**
+ * 挂载vue组件
+ * - 全新创建一个Vue实例挂载的传入组件
+ * - 用于在非vue环境下渲染vue组件内容
+ * @param options 挂载配置选项
+ * @param onDestroyed  监听【调用方】的销毁时机，用于自动销毁挂载的实力
+ * @returns
+ */
+declare function mount(options: ComponentMountOptions, onDestroyed?: (fn: () => void) => void): IScope;
+
+export { _default$1 as SnailDynamic, _default as SnailLoading, mount, onAppCreated, openDialog, triggerAppCreated };
+export type { ComponentMountOptions, ComponentOptions, Dialog, DialogHandle, DialogOpenResult, DialogOptions, LoadingOptions };

package/dist/snail.vue.js

@@ -1,268 +1,277 @@
 //@ sourceURL=/snail.vue.js
-define(['exports', 'snail.core', 'vue'], (function (exports, snail_core, vue) { 'use strict';
+import { mustFunction, isStringNotEmpty, isObject, script, delay, getMessage, style, hook, mustObject, defer, newId, isFunction } from 'snail.core';
+import { defineComponent, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, normalizeClass, renderSlot, normalizeProps, guardReactiveProps, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, mergeProps, createSlots, renderList, createTextVNode, createElementVNode, toDisplayString, TransitionGroup, withModifiers, normalizeStyle, createVNode, createApp } from 'vue';
 
-    const appCreatedFns = [];
-    function onAppCreated(fn) {
-      snail_core.mustFunction(fn, "fn");
-      appCreatedFns.push(fn);
-      return {
-        destroy: () => {
-          const index = appCreatedFns.indexOf(fn);
-          index >= 0 && appCreatedFns.splice(index, 1);
-        }
-      };
+const appCreatedFns = [];
+function onAppCreated(fn) {
+  mustFunction(fn, "fn");
+  appCreatedFns.push(fn);
+  return {
+    destroy: () => {
+      const index = appCreatedFns.indexOf(fn);
+      index >= 0 && appCreatedFns.splice(index, 1);
     }
-    function triggerAppCreated(app) {
-      appCreatedFns.forEach(fn => fn(app));
-      return app;
+  };
+}
+function triggerAppCreated(app) {
+  appCreatedFns.forEach(fn => fn(app));
+  return app;
+}
+
+var _sfc_main$2 = defineComponent({
+  ...{
+    name: "SnailLoading",
+    inheritAttrs: false
+  },
+  __name: "loading",
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    disabledMask: {
+      type: Boolean,
+      default: false
+    },
+    rootClass: {
+      default: () => []
+    },
+    transition: {
+      default: "snail-loading"
     }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        name: _ctx.transition
+      }, {
+        default: withCtx(() => [_ctx.show ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["snail-loading", {
+            "show-mask": _ctx.disabledMask != true
+          }, _ctx.rootClass])
+        }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(_ctx.$attrs)))], 2)) : createCommentVNode("", true)]),
+        _: 3
+      }, 8, ["name"]);
+    };
+  }
+});
 
-    var _sfc_main$2 = vue.defineComponent({
-      ...{
-        name: "SnailLoading",
-        inheritAttrs: false
-      },
-      __name: "loading",
-      props: {
-        show: {
-          type: Boolean,
-          default: false
-        },
-        disabledMask: {
-          type: Boolean,
-          default: false
-        },
-        rootClass: {
-          default: () => []
-        },
-        transition: {
-          default: "snail-loading"
-        }
-      },
-      setup(__props) {
-        return (_ctx, _cache) => {
-          return vue.openBlock(), vue.createBlock(vue.Transition, {
-            name: _ctx.transition
-          }, {
-            default: vue.withCtx(() => [_ctx.show ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(["snail-loading", {
-                "show-mask": _ctx.disabledMask != true
-              }, _ctx.rootClass])
-            }, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)))], 2)) : vue.createCommentVNode("", true)]),
-            _: 3
-          }, 8, ["name"]);
-        };
+var _sfc_main$1 = defineComponent({
+  ...{
+    name: "SnailDynamic",
+    inheritAttrs: false
+  },
+  __name: "dynamic",
+  props: {
+    name: {},
+    component: {},
+    url: {}
+  },
+  setup(__props) {
+    const componentRef = ref(null);
+    const dynamicComponent = shallowRef(void 0);
+    const dynamicError = shallowRef(void 0);
+    async function buildDynamicComponent() {
+      dynamicComponent.value = void 0;
+      dynamicError.value = void 0;
+      if (isStringNotEmpty(__props.name) == true) {
+        dynamicComponent.value = __props.name;
+        return;
       }
-    });
-
-    var _sfc_main$1 = vue.defineComponent({
-      ...{
-        name: "SnailDynamic",
-        inheritAttrs: false
-      },
-      __name: "dynamic",
-      props: {
-        name: {},
-        component: {},
-        url: {}
-      },
-      setup(__props) {
-        const componentRef = vue.ref(null);
-        const dynamicComponent = vue.shallowRef(void 0);
-        const dynamicError = vue.shallowRef(void 0);
-        async function buildDynamicComponent() {
+      if (isObject(__props.component) == true) {
+        dynamicComponent.value = __props.component;
+        return;
+      } else if (isStringNotEmpty(__props.url) == true) {
+        console.log("load dynamic component:", __props.url);
+        const task = script.load(__props.url);
+        await delay(200);
+        try {
+          const comp = await task;
+          isObject(comp) || isStringNotEmpty(comp) ? dynamicComponent.value = comp : dynamicError.value = `load component failed:return nulll or undefined. url:${__props.url}.`;
+        } catch (ex) {
           dynamicComponent.value = void 0;
-          dynamicError.value = void 0;
-          if (snail_core.isStringNotEmpty(__props.name) == true) {
-            dynamicComponent.value = __props.name;
-            return;
-          }
-          if (snail_core.isObject(__props.component) == true) {
-            dynamicComponent.value = __props.component;
-            return;
-          } else if (snail_core.isStringNotEmpty(__props.url) == true) {
-            console.log("load dynamic component:", __props.url);
-            const task = snail_core.script.load(__props.url);
-            await snail_core.delay(200);
-            try {
-              const comp = await task;
-              snail_core.isObject(comp) || snail_core.isStringNotEmpty(comp) ? dynamicComponent.value = comp : dynamicError.value = `load component failed:return nulll or undefined. url:${__props.url}.`;
-            } catch (ex) {
-              dynamicComponent.value = void 0;
-              dynamicError.value = snail_core.getMessage(ex);
-            }
-          } else {
-            dynamicError.value = "load error: name component、url are all empty.";
-          }
-        }
-        {
-          vue.watch(() => __props.name, buildDynamicComponent);
-          vue.watch(() => __props.component, buildDynamicComponent);
-          vue.watch(() => __props.url, buildDynamicComponent);
-          buildDynamicComponent();
+          dynamicError.value = getMessage(ex);
         }
-        vue.onErrorCaptured((error, vm, info) => {
-          if (componentRef.value == null || vm == componentRef.value) {
-            console.error("动态加载组件报错，已拦截错误：", error.message, error);
-            return false;
-          }
-        });
-        vue.onActivated(() => console.log("onActivated"));
-        vue.onDeactivated(() => console.log("onDeactivated"));
-        return (_ctx, _cache) => {
-          return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(dynamicComponent.value), vue.mergeProps(_ctx.$attrs, {
-            ref_key: "componentRef",
-            ref: componentRef
-          }), vue.createSlots({
-            _: 2
-          }, [vue.renderList(_ctx.$slots, (_, name) => {
-            return {
-              name,
-              fn: vue.withCtx(slotData => [vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotData)))])
-            };
-          })]), 1040)), dynamicError.value != void 0 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
-            key: 0,
-            class: "snail-dynamic-error"
-          }, _ctx.$attrs), [_cache[0] || (_cache[0] = vue.createTextVNode(" load component error：")), vue.createElementVNode("span", null, vue.toDisplayString(dynamicError.value), 1)], 16)) : dynamicComponent.value == void 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
-            key: 1,
-            show: true,
-            "disabled-mask": true
-          })) : vue.createCommentVNode("", true)], 64);
-        };
+      } else {
+        dynamicError.value = "load error: name component、url are all empty.";
+      }
+    }
+    {
+      watch(() => __props.name, buildDynamicComponent);
+      watch(() => __props.component, buildDynamicComponent);
+      watch(() => __props.url, buildDynamicComponent);
+      buildDynamicComponent();
+    }
+    onErrorCaptured((error, vm, info) => {
+      if (componentRef.value == null || vm == componentRef.value) {
+        console.error("动态加载组件报错，已拦截错误：", error.message, error);
+        return false;
       }
     });
+    onActivated(() => console.log("onActivated"));
+    onDeactivated(() => console.log("onDeactivated"));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [(openBlock(), createBlock(resolveDynamicComponent(dynamicComponent.value), mergeProps(_ctx.$attrs, {
+        ref_key: "componentRef",
+        ref: componentRef
+      }), createSlots({
+        _: 2
+      }, [renderList(_ctx.$slots, (_, name) => {
+        return {
+          name,
+          fn: withCtx(slotData => [renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotData)))])
+        };
+      })]), 1040)), dynamicError.value != void 0 ? (openBlock(), createElementBlock("div", mergeProps({
+        key: 0,
+        class: "snail-dynamic-error"
+      }, _ctx.$attrs), [_cache[0] || (_cache[0] = createTextVNode(" load component error：")), createElementVNode("span", null, toDisplayString(dynamicError.value), 1)], 16)) : dynamicComponent.value == void 0 ? (openBlock(), createBlock(_sfc_main$2, {
+        key: 1,
+        show: true,
+        "disabled-mask": true
+      })) : createCommentVNode("", true)], 64);
+    };
+  }
+});
 
-    var addLink = href => snail_core.style.register(href);
+var addLink = href => setTimeout(style.register, 0, href);
 
-    addLink("/css/snail.vue.vue.css");
+addLink("/css/snail.vue.vue.css");
 
-    const _hoisted_1 = ["onClick"];
-    var _sfc_main = vue.defineComponent({
-      ...{
-        name: "SnailDialogWrapper",
-        inheritAttrs: true
-      },
-      __name: "dialog-wrapper",
-      props: {
-        descriptors: {
-          type: Array,
-          required: true
-        }
-      },
-      setup(__props) {
-        function onMaskClick(dialog) {
-          const last = __props.descriptors[__props.descriptors.length - 1];
-          last === dialog && dialog.options.closeOnMask && dialog.handle.closeDialog(dialog);
-        }
-        addEventListener("keyup", event => {
-          if (event.key === "Escape" && __props.descriptors.length > 0) {
-            const dialog = __props.descriptors[__props.descriptors.length - 1];
-            dialog.options.closeOnEscape && dialog.handle.closeDialog(dialog);
-          }
-        });
-        return (_ctx, _cache) => {
-          return vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
-            name: "snail-dialog"
-          }, {
-            default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.descriptors, (dialog, $index) => {
-              return vue.openBlock(), vue.createElementBlock("div", {
-                key: dialog.id,
-                class: vue.normalizeClass(["snail-dialog", dialog.options.rootClass, {
-                  "unactive": __props.descriptors.length - 1 !== $index
-                }]),
-                style: vue.normalizeStyle("z-index:" + dialog.options.zIndex),
-                onClick: vue.withModifiers($event => onMaskClick(dialog), ["self"])
-              }, [vue.createVNode(_sfc_main$1, vue.mergeProps({
-                class: ["dialog-body", dialog.options.class],
-                name: dialog.options.name,
-                component: dialog.options.component,
-                url: dialog.options.url,
-                style: dialog.options.style
-              }, {
-                ref_for: true
-              }, dialog.options.props, {
-                ref_for: true
-              }, dialog.handle), null, 16, ["name", "component", "url", "class", "style"])], 14, _hoisted_1);
-            }), 128))]),
-            _: 1
-          });
-        };
+const _hoisted_1 = ["onClick"];
+var _sfc_main = defineComponent({
+  ...{
+    name: "SnailDialogWrapper",
+    inheritAttrs: true
+  },
+  __name: "dialog-wrapper",
+  props: {
+    descriptors: {
+      type: Array,
+      required: true
+    }
+  },
+  setup(__props) {
+    function onMaskClick(dialog) {
+      const last = __props.descriptors[__props.descriptors.length - 1];
+      last === dialog && dialog.options.closeOnMask && dialog.handle.closeDialog(dialog);
+    }
+    addEventListener("keyup", event => {
+      if (event.key === "Escape" && __props.descriptors.length > 0) {
+        const dialog = __props.descriptors[__props.descriptors.length - 1];
+        dialog.options.closeOnEscape && dialog.handle.closeDialog(dialog);
       }
     });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(TransitionGroup, {
+        name: "snail-dialog"
+      }, {
+        default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.descriptors, (dialog, $index) => {
+          return openBlock(), createElementBlock("div", {
+            key: dialog.id,
+            class: normalizeClass(["snail-dialog", dialog.options.rootClass, {
+              "unactive": __props.descriptors.length - 1 !== $index
+            }]),
+            style: normalizeStyle("z-index:" + dialog.options.zIndex),
+            onClick: withModifiers($event => onMaskClick(dialog), ["self"])
+          }, [createVNode(_sfc_main$1, mergeProps({
+            class: ["dialog-body", dialog.options.class],
+            name: dialog.options.name,
+            component: dialog.options.component,
+            url: dialog.options.url,
+            style: dialog.options.style
+          }, {
+            ref_for: true
+          }, dialog.options.props, {
+            ref_for: true
+          }, dialog.handle), null, 16, ["name", "component", "url", "class", "style"])], 14, _hoisted_1);
+        }), 128))]),
+        _: 1
+      });
+    };
+  }
+});
 
-    function openDialog(options, onDestroyed) {
-      snail_core.mustObject(options, "options");
-      options.zIndex = options.zIndex || 2e3;
-      const deferred = snail_core.defer();
-      const dialog = {
-        id: snail_core.newId(),
-        options,
-        handle: Object.freeze({
-          inDialog: true,
-          async closeDialog(data) {
-            const hookCode = createDialogHookCode(dialog);
-            const rt = await dialogHook.runHookAsync(hookCode, {
-              mode: "one",
-              order: "desc"
-            });
-            if (rt.success != true) {
-              console.warn("run onDialogClose failed", rt.reason, rt.ex);
-              return;
-            }
-            destroyDialog(dialog);
-            deferred.resolve(data);
-          },
-          onDialogClose(fn) {
-            const hookCode = createDialogHookCode(dialog);
-            dialogHook.register(hookCode, fn);
-          }
-        })
-      };
-      initVueApp();
-      descriptors.value.push(dialog);
-      snail_core.isFunction(onDestroyed) && onDestroyed(() => destroyDialog(dialog));
-      const dr = deferred.promise;
-      dr.destroy = () => {
-        console.warn("force close dialog after openDialog caller called close function.");
-        destroyDialog(dialog);
-        deferred.resolve(void 0);
-      };
-      return dr;
-    }
-    const descriptors = vue.ref([]);
-    const dialogHook = snail_core.hook.newScope();
-    const createDialogHookCode = dialog => `onCloseDialog:${dialog.id}`;
-    function destroyDialog(dialog) {
-      const index = descriptors.value.indexOf(dialog);
-      if (index != -1) {
-        for (var tmpIndex = index; tmpIndex < descriptors.value.length; tmpIndex++) {
-          const hookCode = createDialogHookCode(descriptors.value[tmpIndex]);
-          dialogHook.remove(hookCode);
+function openDialog(options, onDestroyed) {
+  mustObject(options, "options");
+  options.zIndex = options.zIndex || 2e3;
+  const deferred = defer();
+  const dialog = {
+    id: newId(),
+    options,
+    handle: Object.freeze({
+      inDialog: true,
+      async closeDialog(data) {
+        const hookCode = createDialogHookCode(dialog);
+        const rt = await dialogHook.runHookAsync(hookCode, {
+          mode: "one",
+          order: "desc"
+        });
+        if (rt.success != true) {
+          console.warn("run onDialogClose failed", rt.reason, rt.ex);
+          return;
         }
-        descriptors.value.splice(index);
+        destroyDialog(dialog);
+        deferred.resolve(data);
+      },
+      onDialogClose(fn) {
+        const hookCode = createDialogHookCode(dialog);
+        dialogHook.register(hookCode, fn);
       }
+    })
+  };
+  initVueApp();
+  descriptors.value.push(dialog);
+  isFunction(onDestroyed) && onDestroyed(() => destroyDialog(dialog));
+  const dr = deferred.promise;
+  dr.destroy = () => {
+    console.warn("force close dialog after openDialog caller called close function.");
+    destroyDialog(dialog);
+    deferred.resolve(void 0);
+  };
+  return dr;
+}
+const descriptors = ref([]);
+const dialogHook = hook.newScope();
+const createDialogHookCode = dialog => `onCloseDialog:${dialog.id}`;
+function destroyDialog(dialog) {
+  const index = descriptors.value.indexOf(dialog);
+  if (index != -1) {
+    for (var tmpIndex = index; tmpIndex < descriptors.value.length; tmpIndex++) {
+      const hookCode = createDialogHookCode(descriptors.value[tmpIndex]);
+      dialogHook.remove(hookCode);
     }
-    const initVueApp = (() => {
-      var dialogApp = void 0;
-      return function () {
-        if (dialogApp == void 0) {
-          const container = document.createElement("div");
-          container.style = "height:0 !important; width:0 !important;";
-          container.classList.add("snail-dialog-container");
-          document.body.appendChild(container);
-          dialogApp = vue.createApp(_sfc_main, {
-            descriptors: descriptors.value
-          });
-          triggerAppCreated(dialogApp).mount(container);
-        }
-      };
-    })();
+    descriptors.value.splice(index);
+  }
+}
+const initVueApp = (() => {
+  var dialogApp = void 0;
+  return function () {
+    if (dialogApp == void 0) {
+      const container = document.createElement("div");
+      container.style = "height:0 !important; width:0 !important;";
+      container.classList.add("snail-dialog-container");
+      document.body.appendChild(container);
+      dialogApp = createApp(_sfc_main, {
+        descriptors: descriptors.value
+      });
+      triggerAppCreated(dialogApp).mount(container);
+    }
+  };
+})();
 
-    exports.SnailDynamic = _sfc_main$1;
-    exports.SnailLoading = _sfc_main$2;
-    exports.onAppCreated = onAppCreated;
-    exports.openDialog = openDialog;
-    exports.triggerAppCreated = triggerAppCreated;
+function mount(options, onDestroyed) {
+  mustObject(options, "options");
+  mustObject(options.target, "options.target");
+  const app = createApp(_sfc_main$1, options.props);
+  app.mount(options.target);
+  function destroy() {
+    app.unmount();
+  }
+  isFunction(onDestroyed) && onDestroyed(destroy);
+  return {
+    destroy
+  };
+}
 
-}));
+export { _sfc_main$1 as SnailDynamic, _sfc_main$2 as SnailLoading, mount, onAppCreated, openDialog, triggerAppCreated };

package/dist/snail.vue.umd.js

@@ -0,0 +1,283 @@
+//@ sourceURL=/snail.vue.js
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('snail.core'), require('vue')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'snail.core', 'vue'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Snail, global.Vue));
+})(this, (function (exports, snail_core, vue) { 'use strict';
+
+    const appCreatedFns = [];
+    function onAppCreated(fn) {
+      snail_core.mustFunction(fn, "fn");
+      appCreatedFns.push(fn);
+      return {
+        destroy: () => {
+          const index = appCreatedFns.indexOf(fn);
+          index >= 0 && appCreatedFns.splice(index, 1);
+        }
+      };
+    }
+    function triggerAppCreated(app) {
+      appCreatedFns.forEach(fn => fn(app));
+      return app;
+    }
+
+    var _sfc_main$2 = vue.defineComponent({
+      ...{
+        name: "SnailLoading",
+        inheritAttrs: false
+      },
+      __name: "loading",
+      props: {
+        show: {
+          type: Boolean,
+          default: false
+        },
+        disabledMask: {
+          type: Boolean,
+          default: false
+        },
+        rootClass: {
+          default: () => []
+        },
+        transition: {
+          default: "snail-loading"
+        }
+      },
+      setup(__props) {
+        return (_ctx, _cache) => {
+          return vue.openBlock(), vue.createBlock(vue.Transition, {
+            name: _ctx.transition
+          }, {
+            default: vue.withCtx(() => [_ctx.show ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(["snail-loading", {
+                "show-mask": _ctx.disabledMask != true
+              }, _ctx.rootClass])
+            }, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)))], 2)) : vue.createCommentVNode("", true)]),
+            _: 3
+          }, 8, ["name"]);
+        };
+      }
+    });
+
+    var _sfc_main$1 = vue.defineComponent({
+      ...{
+        name: "SnailDynamic",
+        inheritAttrs: false
+      },
+      __name: "dynamic",
+      props: {
+        name: {},
+        component: {},
+        url: {}
+      },
+      setup(__props) {
+        const componentRef = vue.ref(null);
+        const dynamicComponent = vue.shallowRef(void 0);
+        const dynamicError = vue.shallowRef(void 0);
+        async function buildDynamicComponent() {
+          dynamicComponent.value = void 0;
+          dynamicError.value = void 0;
+          if (snail_core.isStringNotEmpty(__props.name) == true) {
+            dynamicComponent.value = __props.name;
+            return;
+          }
+          if (snail_core.isObject(__props.component) == true) {
+            dynamicComponent.value = __props.component;
+            return;
+          } else if (snail_core.isStringNotEmpty(__props.url) == true) {
+            console.log("load dynamic component:", __props.url);
+            const task = snail_core.script.load(__props.url);
+            await snail_core.delay(200);
+            try {
+              const comp = await task;
+              snail_core.isObject(comp) || snail_core.isStringNotEmpty(comp) ? dynamicComponent.value = comp : dynamicError.value = `load component failed:return nulll or undefined. url:${__props.url}.`;
+            } catch (ex) {
+              dynamicComponent.value = void 0;
+              dynamicError.value = snail_core.getMessage(ex);
+            }
+          } else {
+            dynamicError.value = "load error: name component、url are all empty.";
+          }
+        }
+        {
+          vue.watch(() => __props.name, buildDynamicComponent);
+          vue.watch(() => __props.component, buildDynamicComponent);
+          vue.watch(() => __props.url, buildDynamicComponent);
+          buildDynamicComponent();
+        }
+        vue.onErrorCaptured((error, vm, info) => {
+          if (componentRef.value == null || vm == componentRef.value) {
+            console.error("动态加载组件报错，已拦截错误：", error.message, error);
+            return false;
+          }
+        });
+        vue.onActivated(() => console.log("onActivated"));
+        vue.onDeactivated(() => console.log("onDeactivated"));
+        return (_ctx, _cache) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(dynamicComponent.value), vue.mergeProps(_ctx.$attrs, {
+            ref_key: "componentRef",
+            ref: componentRef
+          }), vue.createSlots({
+            _: 2
+          }, [vue.renderList(_ctx.$slots, (_, name) => {
+            return {
+              name,
+              fn: vue.withCtx(slotData => [vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotData)))])
+            };
+          })]), 1040)), dynamicError.value != void 0 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+            key: 0,
+            class: "snail-dynamic-error"
+          }, _ctx.$attrs), [_cache[0] || (_cache[0] = vue.createTextVNode(" load component error：")), vue.createElementVNode("span", null, vue.toDisplayString(dynamicError.value), 1)], 16)) : dynamicComponent.value == void 0 ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+            key: 1,
+            show: true,
+            "disabled-mask": true
+          })) : vue.createCommentVNode("", true)], 64);
+        };
+      }
+    });
+
+    const _hoisted_1 = ["onClick"];
+    var _sfc_main = vue.defineComponent({
+      ...{
+        name: "SnailDialogWrapper",
+        inheritAttrs: true
+      },
+      __name: "dialog-wrapper",
+      props: {
+        descriptors: {
+          type: Array,
+          required: true
+        }
+      },
+      setup(__props) {
+        function onMaskClick(dialog) {
+          const last = __props.descriptors[__props.descriptors.length - 1];
+          last === dialog && dialog.options.closeOnMask && dialog.handle.closeDialog(dialog);
+        }
+        addEventListener("keyup", event => {
+          if (event.key === "Escape" && __props.descriptors.length > 0) {
+            const dialog = __props.descriptors[__props.descriptors.length - 1];
+            dialog.options.closeOnEscape && dialog.handle.closeDialog(dialog);
+          }
+        });
+        return (_ctx, _cache) => {
+          return vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
+            name: "snail-dialog"
+          }, {
+            default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.descriptors, (dialog, $index) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: dialog.id,
+                class: vue.normalizeClass(["snail-dialog", dialog.options.rootClass, {
+                  "unactive": __props.descriptors.length - 1 !== $index
+                }]),
+                style: vue.normalizeStyle("z-index:" + dialog.options.zIndex),
+                onClick: vue.withModifiers($event => onMaskClick(dialog), ["self"])
+              }, [vue.createVNode(_sfc_main$1, vue.mergeProps({
+                class: ["dialog-body", dialog.options.class],
+                name: dialog.options.name,
+                component: dialog.options.component,
+                url: dialog.options.url,
+                style: dialog.options.style
+              }, {
+                ref_for: true
+              }, dialog.options.props, {
+                ref_for: true
+              }, dialog.handle), null, 16, ["name", "component", "url", "class", "style"])], 14, _hoisted_1);
+            }), 128))]),
+            _: 1
+          });
+        };
+      }
+    });
+
+    function openDialog(options, onDestroyed) {
+      snail_core.mustObject(options, "options");
+      options.zIndex = options.zIndex || 2e3;
+      const deferred = snail_core.defer();
+      const dialog = {
+        id: snail_core.newId(),
+        options,
+        handle: Object.freeze({
+          inDialog: true,
+          async closeDialog(data) {
+            const hookCode = createDialogHookCode(dialog);
+            const rt = await dialogHook.runHookAsync(hookCode, {
+              mode: "one",
+              order: "desc"
+            });
+            if (rt.success != true) {
+              console.warn("run onDialogClose failed", rt.reason, rt.ex);
+              return;
+            }
+            destroyDialog(dialog);
+            deferred.resolve(data);
+          },
+          onDialogClose(fn) {
+            const hookCode = createDialogHookCode(dialog);
+            dialogHook.register(hookCode, fn);
+          }
+        })
+      };
+      initVueApp();
+      descriptors.value.push(dialog);
+      snail_core.isFunction(onDestroyed) && onDestroyed(() => destroyDialog(dialog));
+      const dr = deferred.promise;
+      dr.destroy = () => {
+        console.warn("force close dialog after openDialog caller called close function.");
+        destroyDialog(dialog);
+        deferred.resolve(void 0);
+      };
+      return dr;
+    }
+    const descriptors = vue.ref([]);
+    const dialogHook = snail_core.hook.newScope();
+    const createDialogHookCode = dialog => `onCloseDialog:${dialog.id}`;
+    function destroyDialog(dialog) {
+      const index = descriptors.value.indexOf(dialog);
+      if (index != -1) {
+        for (var tmpIndex = index; tmpIndex < descriptors.value.length; tmpIndex++) {
+          const hookCode = createDialogHookCode(descriptors.value[tmpIndex]);
+          dialogHook.remove(hookCode);
+        }
+        descriptors.value.splice(index);
+      }
+    }
+    const initVueApp = (() => {
+      var dialogApp = void 0;
+      return function () {
+        if (dialogApp == void 0) {
+          const container = document.createElement("div");
+          container.style = "height:0 !important; width:0 !important;";
+          container.classList.add("snail-dialog-container");
+          document.body.appendChild(container);
+          dialogApp = vue.createApp(_sfc_main, {
+            descriptors: descriptors.value
+          });
+          triggerAppCreated(dialogApp).mount(container);
+        }
+      };
+    })();
+
+    function mount(options, onDestroyed) {
+      snail_core.mustObject(options, "options");
+      snail_core.mustObject(options.target, "options.target");
+      const app = vue.createApp(_sfc_main$1, options.props);
+      app.mount(options.target);
+      function destroy() {
+        app.unmount();
+      }
+      snail_core.isFunction(onDestroyed) && onDestroyed(destroy);
+      return {
+        destroy
+      };
+    }
+
+    exports.SnailDynamic = _sfc_main$1;
+    exports.SnailLoading = _sfc_main$2;
+    exports.mount = mount;
+    exports.onAppCreated = onAppCreated;
+    exports.openDialog = openDialog;
+    exports.triggerAppCreated = triggerAppCreated;
+
+}));

package/package.json

@@ -3,11 +3,11 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/snail.vue.js",
+  "module": "dist/snail.vue.js",
+  "types": "dist/snail.vue.d.ts",
   "scripts": {
     "build": "rollup -c ./rollup.config.js",
     "types": "vue-tsc -p ./tsconfig.dts.json --declarationDir ./dist/_types",
@@ -15,17 +15,17 @@
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=1.2.8"
+    "snail.core": ">=1.2.10"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.10",
-    "snail.rollup": ">=1.2.2",
+    "snail.rollup": ">=1.2.7",
     "snail.rollup-asset": ">=1.2.1",
-    "snail.rollup-html": ">=1.2.1",
+    "snail.rollup-html": ">=1.2.2",
     "snail.rollup-url": ">=1.2.1",
     "snail.rollup-inject": ">=1.2.1",
-    "snail.rollup-script": ">=1.2.1",
-    "snail.rollup-style": ">=1.2.1",
+    "snail.rollup-script": ">=1.2.2",
+    "snail.rollup-style": ">=1.2.2",
     "snail.rollup-vue": ">=1.2.3"
   }
 }