snail.vue 1.0.12 → 1.0.14

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,5 +1,5 @@
 //@ sourceURL=/snail.vue.js
-import { mustFunction, isStringNotEmpty, isObject, script, delay, getMessage, style, hook, mustObject, defer, newId, isFunction } from 'snail.core';
+import { mustFunction, isStringNotEmpty, isObject, script, delay, getMessage, style, hook, mustObject, defer, newId, isFunction, throwError } 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 = [];
@@ -260,4 +260,23 @@ const initVueApp = (() => {
   };
 })();
 
-export { _sfc_main$1 as SnailDynamic, _sfc_main$2 as SnailLoading, onAppCreated, openDialog, triggerAppCreated };
+function mount(options, onDestroyed) {
+  mustObject(options, "options");
+  options.target instanceof HTMLElement || throwError("options.target must be a HTMLElement");
+  const app = createApp(_sfc_main$1, {
+    name: options.name,
+    compponent: options.component,
+    url: options.url,
+    ...(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

@@ -259,8 +259,28 @@
       };
     })();
 
+    function mount(options, onDestroyed) {
+      snail_core.mustObject(options, "options");
+      options.target instanceof HTMLElement || snail_core.throwError("options.target must be a HTMLElement");
+      const app = vue.createApp(_sfc_main$1, {
+        name: options.name,
+        compponent: options.component,
+        url: options.url,
+        ...(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,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=1.2.9"
+    "snail.core": ">=1.2.10"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.10",
-    "snail.rollup": ">=1.2.6",
+    "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.2",