snail.vue 1.0.10 → 1.0.11

package/dist/css/snail.vue.vue.css

@@ -0,0 +1,6 @@
+/* src:container\dynamic.vue 	 index:0 */
+.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
+/* src:prompt\loading.vue 	 index:0 */
+.snail-loading{display:block;height:100%;left:0;position:absolute;top:0;width:100%;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .5s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
+/* src:container\components\dialog-wrapper.vue 	 index:0 */
+.snail-dialog{align-items:center;bottom:0;display:flex;justify-content:center;left:0;overflow:hidden;position:fixed;right:0;top:0}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;position:absolute;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);box-sizing:border-box;position:relative}.snail-dialog.unactive:before{display:none!important}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}.snail-dialog-enter-active,.snail-dialog-leave-active{transition:scale .1s ease-in-out,opacity .1s ease}.snail-dialog-enter-from{opacity:0;scale:.4}.snail-dialog-leave-to{opacity:0;scale:0}

package/dist/snail.vue.d.ts

@@ -1,2 +1,191 @@
+import * as vue from 'vue';
+import { App, Component } from 'vue';
+import { IScope } from 'snail.core';
 
-export { };
+/**
+ * Vue App助手类，做一些app实例的辅助性工作
+ */
+
+/**
+ * app实例创建完之后的回调通知
+ * @param fn 回调通知
+ * @returns 通知句柄，可销毁回调通知，一般在外部销毁时执行
+ */
+declare function onAppCreated(fn: (app: App) => void): IScope;
+/**
+ * 触发app创建后事件
+ * @param app 创建的app实例
+ * @returns app自身
+ */
+declare function triggerAppCreated(app: App): App;
+
+/**
+ * 组件配置选项
+ */
+type ComponentOptions = {
+    /**
+     * 组件名称；
+     * - 确保组件已注册，否则会加载不出来
+     */
+    name?: string;
+    /**
+     * Vue组件对象
+     * - name未传入时生效
+     */
+    component?: Component;
+    /**
+     * 组件js文件url地址
+     * - 支持#号锚点钻取
+     * - name、component未传入时生效
+     * - 推荐外部使用 shallowRef 包裹对象，避免响应式的性能问题
+     */
+    url?: string;
+};
+
+/**
+ * 模态弹窗显示的组件配置选项
+ */
+type DialogOptions = ComponentOptions & {
+    /**
+     * 传递给组件的属性值，执行v-bind绑定到要显示的组件
+     * - key为属性名称，遵循vue解析规则
+     * - 若为事件监听，则使用onXXX
+     */
+    props?: Record<string, any>;
+    /**
+     * 按下esc健时是否关闭弹窗
+     * - 默认值：false
+     */
+    closeOnEscape?: boolean;
+    /**
+     * 点击遮罩层时是否关闭弹窗
+     * - 默认值：false
+     */
+    closeOnMask?: boolean;
+    /**
+     * 自定义class
+     * - 绑定模块弹窗显示的组件根元素上
+     */
+    class?: string | string[];
+    /**
+     * 自定义style
+     * - 绑定模块弹窗显示的组件根元素上
+     */
+    style?: string | string[];
+    /**
+     * 弹窗的z-index值
+     * - 无特殊情况，建议不粗韩，内部会自动生成，确保弹窗正确性
+     */
+    zIndex?: number;
+    /**
+     * 模态弹窗的自定义class
+     * - 绑定到模态弹窗的根元素上
+     */
+    rootClass?: string | string[];
+};
+/**
+ * 模块弹窗打开后的结果
+ * - 执行destroy方法时，强制关闭，不会执行onDialogClose
+ */
+type DialogOpenResult<T> = Promise<T> & IScope;
+/**
+ * 弹窗句柄：绑定给子组件使用
+ */
+type DialogHandle<T> = {
+    /**  组件是否处于【弹窗】模式下 */
+    inDialog: boolean;
+    /**
+     * 关闭弹窗的方法
+     * @param data 关闭时传递数据
+     */
+    closeDialog(data?: T): void;
+    /**
+     * 注册监听【弹窗关闭的方法】
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 关闭时执行的钩子函数，支持异步，返回false时将阻止弹窗关闭
+     */
+    onDialogClose(fn: () => false | undefined | Promise<false | undefined>): void;
+};
+/**
+ * 模态弹窗；配合【../components/dialog-wrapper.vue】使用
+ */
+type Dialog = {
+    /**
+     * 弹窗Id，唯一值
+     */
+    id: string;
+    /**
+     * 模态弹窗显示的组件配置选项
+     */
+    options: DialogOptions;
+    /**
+     * 弹窗句柄
+     * - 提供关闭弹窗等操作
+     * - 将挂载到内容组件的属性上，方便使用
+     */
+    handle: DialogHandle<any>;
+};
+
+declare var __VLS_8: string | number;
+declare var __VLS_9: any;
+type __VLS_Slots$1 = {} & {
+    [K in NonNullable<typeof __VLS_8>]?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component$1: vue.DefineComponent<ComponentOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<ComponentOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const _default$1: __VLS_WithSlots$1<typeof __VLS_component$1, __VLS_Slots$1>;
+
+type __VLS_WithSlots$1<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+/**
+ * 打开模态弹窗
+ * @param options 弹窗组件配置选项
+ * @param onDestroyed 监听【调用方】的销毁时机，用于自动销毁打开的弹窗
+ * @returns 弹窗打开结果，可手动关闭弹窗
+ */
+declare function openDialog<T>(options: DialogOptions, onDestroyed?: (fn: () => void) => void): DialogOpenResult<T>;
+
+/**
+ * loading提示框的配置选项
+ */
+type LoadingOptions = {
+    /**
+     * 是否显示loading效果
+     * - 默认值：false
+     */
+    show: boolean;
+    /**
+     * 展示遮罩层
+     * - 默认值：false，显示遮罩层
+     */
+    disabledMask?: boolean;
+    /**
+     * loading的根样式
+     * - 外部传入后，可进行自由定制loading样式
+     */
+    rootClass?: string | string[];
+    /**
+     * loading组件显示隐藏的动画名
+     * - 默认：snail-loading
+     */
+    transition?: string;
+};
+
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: vue.DefineComponent<LoadingOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<LoadingOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+export { _default$1 as SnailDynamic, _default as SnailLoading, onAppCreated, openDialog, triggerAppCreated };
+export type { Dialog, DialogHandle, DialogOpenResult, DialogOptions, LoadingOptions };

package/dist/snail.vue.js

@@ -1,7 +1,268 @@
 //@ sourceURL=/snail.vue.js
-(function () {
-	'use strict';
+define(['exports', 'snail.core', 'vue'], (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);
+        };
+      }
+    });
+
+    var addLink = href => snail_core.style.register(href);
+
+    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
+          });
+        };
+      }
+    });
+
+    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);
+        }
+      };
+    })();
+
+    exports.SnailDynamic = _sfc_main$1;
+    exports.SnailLoading = _sfc_main$2;
+    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.10",
+  "version": "1.0.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -11,21 +11,21 @@
   "scripts": {
     "build": "rollup -c ./rollup.config.js",
     "types": "vue-tsc -p ./tsconfig.dts.json --declarationDir ./dist/_types",
-    "build:test": "rollup --watch  -c ./test/rollup.config.js"
+    "dev:test": "rollup --watch  -c ./test/rollup.config.js"
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=1.2.1"
+    "snail.core": ">=1.2.8"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.10",
-    "snail.rollup": ">=1.2.1",
+    "snail.rollup": ">=1.2.2",
     "snail.rollup-asset": ">=1.2.1",
     "snail.rollup-html": ">=1.2.1",
     "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-vue": ">=1.2.1"
+    "snail.rollup-vue": ">=1.2.3"
   }
 }