snail.vue 1.0.30 → 1.0.31

package/dist/snail.vue.d.ts

@@ -1,7 +1,7 @@
 import * as snail_view from 'snail.view';
 import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle } from 'snail.view';
 import * as vue from 'vue';
-import { Component, App, ShallowRef } from 'vue';
+import { Component, ShallowRef, Ref, App } from 'vue';
 import { IScope, IAsyncScope } from 'snail.core';
 
 /**
@@ -461,7 +461,7 @@ type ButtonOptions = {
  */
 interface IReactiveManager {
     /**
-     * 【过渡】响应式变量值
+     * 【过渡】变量值
      * - 通过设置 rv.value 的值来实现.value值过渡
      * - 执行顺序 from、to
      * - 开始时，设置 rv.value 值为 from；延迟time时间后，强制销毁scope
@@ -471,20 +471,28 @@ interface IReactiveManager {
      * @param time 过渡持续时间，到时间后销毁作用域
      * @returns 作用域对象，可销毁【值过渡】效果
      */
-    transition<T>(rv: {
-        value?: T;
-    }, effect: {
+    transition<T>(rv: ShallowRef<T> | Ref<T>, effect: {
         from: T;
         to: T;
     }, time: number): IScope;
+    /**
+     * 【任务】响应式
+     * - 任务运行时，设置loading.value=true
+     * - 任务完成后，设置loading.value=false
+     * - 可通过delay值，延迟执行 loading.value=false 操作
+     * - 可在api请求等耗时操作任务过程中，实现响应式显隐Loading组件
+     * @param task 要运行的任务
+     * @param loading 正在加载的响应式变量
+     * @param delay 延迟时间，单位ms；不传则不延迟
+     * @returns 任务自身
+     */
+    task<T, E>(task: Promise<T>, loading: ShallowRef<boolean> | Ref<boolean>, delay: number): Promise<{
+        success: boolean;
+        data?: T;
+        error?: E;
+    }>;
 }
 
-/**
- * 响应式 模块；
- *  1、针对Vue的响应式相关功能，做一些便捷封装
- *  2、方便使用，减少重复性代码量
- */
-
 /**
  * 使用【响应式管理器】
  * - 请在Vue组件的setup中使用此方法，否则 getCurrentScope 方法无法取到值

package/dist/snail.vue.js

@@ -1,6 +1,6 @@
 //@ sourceURL=/snail.vue.js
 import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, createBlock, createCommentVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, unref, mergeModels, useModel, Transition, withCtx, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, mergeProps, createSlots, renderList, useTemplateRef, onUnmounted, createVNode, computed, normalizeStyle, createApp, onMounted, withModifiers, getCurrentScope, onScopeDispose } from 'vue';
-import { tidyString, throwError, mustString, useScopes, mountScope, throwIfFalse, isObject, mustFunction, useScope, isStringNotEmpty, script, delay, getMessage, mustObject, isFunction, useHook, defer, useAsyncScope, onMountScope } from 'snail.core';
+import { tidyString, throwError, mustString, useScopes, mountScope, throwIfFalse, isPromise, isObject, mustFunction, useScope, isStringNotEmpty, script, delay, getMessage, mustObject, isFunction, useHook, defer, useAsyncScope, onMountScope } from 'snail.core';
 import { link, useAnimation, css, useObserver } from 'snail.view';
 
 var _sfc_main$j = defineComponent({
@@ -251,8 +251,23 @@ function useReactive() {
       clearTimeout(endId);
     });
   }
+  function task(task2, loading, delay) {
+    throwIfFalse(isPromise(task2), "task: task must be a Promise.");
+    loading.value = true;
+    task2.finally(function () {
+      delay > 0 ? setTimeout(() => loading.value = false, delay) : loading.value = false;
+    });
+    return task2.then(data => ({
+      success: true,
+      data
+    }), error => ({
+      success: false,
+      error
+    }));
+  }
   const manager = mountScope({
-    transition
+    transition,
+    task
   });
   manager.onDestroy(scopes.destroy);
   return Object.freeze(manager);
@@ -431,7 +446,9 @@ var _sfc_main$c = defineComponent({
     } = _ref;
     const props = __props;
     const emit = __emit;
-    const animation = useAnimation();
+    const {
+      transition
+    } = useAnimation();
     const status = useModel(__props, "status");
     const statusWatch = watch(status, updateFoldStyle);
     const statusIcon = getFoldStatusDraw();
@@ -440,7 +457,7 @@ var _sfc_main$c = defineComponent({
     function updateFoldStyle() {
       const isExpand = status.value == "expand";
       if (foldStatusSpanRef.value) {
-        animation.transition(foldStatusSpanRef.value, {
+        transition(foldStatusSpanRef.value, {
           from: {
             transition: "transform 0.2s ease",
             transform: isExpand ? "rotateZ(180deg)" : "rotate(0)"
@@ -456,7 +473,7 @@ var _sfc_main$c = defineComponent({
       if (foldBodyRef.value) {
         const minHeight = 32;
         const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-        animation.transition(foldBodyRef.value.parentElement, {
+        transition(foldBodyRef.value.parentElement, {
           from: {
             transition: "height 0.2s ease",
             overflow: "hidden",
@@ -659,6 +676,7 @@ var _sfc_main$8 = defineComponent({
 function mount(options, onDestroyed) {
   mustObject(options, "options");
   options.target instanceof HTMLElement || throwError("options.target must be a HTMLElement");
+  options.target.classList.add("snail-app");
   const app = createApp(_sfc_main$d, {
     name: options.name,
     compponent: options.component,
@@ -713,7 +731,7 @@ var _sfc_main$7 = defineComponent({
     } = _ref;
     const props = __props;
     const emit = __emit;
-    const inputRef = useTemplateRef("inputRef");
+    const inputRef = useTemplateRef("input-el");
     const inputModel = useModel(__props, "modelValue");
     const validateRef = shallowRef();
     const titleStyle = computed(() => css.buildStyle(props.titleStyle));
@@ -736,8 +754,7 @@ var _sfc_main$7 = defineComponent({
         class: "text",
         textContent: toDisplayString(props.title)
       }, null, 8, _hoisted_1$4), props.readonly != true && props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$3)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$1, [createElementVNode("input", {
-        ref_key: "inputRef",
-        ref: inputRef,
+        ref: "input-el",
         type: props.type || "text",
         value: inputModel.value,
         readonly: props.readonly,
@@ -824,7 +841,7 @@ const initPopupApp = function () {
   return function () {
     if (popupApp == void 0) {
       const container = document.createElement("div");
-      container.classList.add("snail-popup-app");
+      container.classList.add("snail-app", "snail-popup-app");
       container.style = "height:0 !important; width:0 !important;";
       document.body.appendChild(container);
       popupApp = createApp(_sfc_main$6, {
@@ -930,11 +947,13 @@ var _sfc_main$5 = defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const observer = useObserver();
+    const {
+      onEvent
+    } = useObserver();
     const loading = shallowRef(false);
     onMounted(() => {
       loading.value = true;
-      observer.onEvent(window, "keyup", event => {
+      onEvent(window, "keyup", event => {
         event.key === "Escape" && props.dialogStatus.value == "active" && props.closeOnEscape && props.closeDialog();
       });
     });
@@ -1068,13 +1087,10 @@ var _sfc_main$2 = defineComponent({
   props: {
     type: {},
     message: {},
-    id: {},
-    zIndex: {},
     inPopup: {},
     closePopup: {
       type: Function
-    },
-    popupStatus: {}
+    }
   },
   setup(__props) {
     const props = __props;
@@ -1226,7 +1242,9 @@ var _sfc_main$1 = defineComponent({
       emit: __emit
     } = _ref;
     const emit = __emit;
-    const observer = useObserver();
+    const {
+      onEvent
+    } = useObserver();
     const isTouch = "ontouchstart" in window;
     const dragHandle = useTemplateRef("dragHandle");
     const dragInfo = ref({
@@ -1265,8 +1283,8 @@ var _sfc_main$1 = defineComponent({
       }
     }
     isTouch || onMounted(function () {
-      observer.onEvent(window, "mousemove", onDragMove);
-      observer.onEvent(window, "mouseup", onDragEnd);
+      onEvent(window, "mousemove", onDragMove);
+      onEvent(window, "mouseup", onDragEnd);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {

package/dist/snail.vue.umd.js

@@ -74,6 +74,10 @@
     }
   });
 
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
+
   function getSvgIcon(options) {
     var {
       type,
@@ -249,8 +253,23 @@
         clearTimeout(endId);
       });
     }
+    function task(task2, loading, delay) {
+      snail_core.throwIfFalse(snail_core.isPromise(task2), "task: task must be a Promise.");
+      loading.value = true;
+      task2.finally(function () {
+        delay > 0 ? setTimeout(() => loading.value = false, delay) : loading.value = false;
+      });
+      return task2.then(data => ({
+        success: true,
+        data
+      }), error => ({
+        success: false,
+        error
+      }));
+    }
     const manager = snail_core.mountScope({
-      transition
+      transition,
+      task
     });
     manager.onDestroy(scopes.destroy);
     return Object.freeze(manager);
@@ -429,7 +448,9 @@
       } = _ref;
       const props = __props;
       const emit = __emit;
-      const animation = snail_view.useAnimation();
+      const {
+        transition
+      } = snail_view.useAnimation();
       const status = vue.useModel(__props, "status");
       const statusWatch = vue.watch(status, updateFoldStyle);
       const statusIcon = getFoldStatusDraw();
@@ -438,7 +459,7 @@
       function updateFoldStyle() {
         const isExpand = status.value == "expand";
         if (foldStatusSpanRef.value) {
-          animation.transition(foldStatusSpanRef.value, {
+          transition(foldStatusSpanRef.value, {
             from: {
               transition: "transform 0.2s ease",
               transform: isExpand ? "rotateZ(180deg)" : "rotate(0)"
@@ -454,7 +475,7 @@
         if (foldBodyRef.value) {
           const minHeight = 32;
           const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-          animation.transition(foldBodyRef.value.parentElement, {
+          transition(foldBodyRef.value.parentElement, {
             from: {
               transition: "height 0.2s ease",
               overflow: "hidden",
@@ -657,6 +678,7 @@
   function mount(options, onDestroyed) {
     snail_core.mustObject(options, "options");
     options.target instanceof HTMLElement || snail_core.throwError("options.target must be a HTMLElement");
+    options.target.classList.add("snail-app");
     const app = vue.createApp(_sfc_main$d, {
       name: options.name,
       compponent: options.component,
@@ -711,7 +733,7 @@
       } = _ref;
       const props = __props;
       const emit = __emit;
-      const inputRef = vue.useTemplateRef("inputRef");
+      const inputRef = vue.useTemplateRef("input-el");
       const inputModel = vue.useModel(__props, "modelValue");
       const validateRef = vue.shallowRef();
       const titleStyle = vue.computed(() => snail_view.css.buildStyle(props.titleStyle));
@@ -734,8 +756,7 @@
           class: "text",
           textContent: vue.toDisplayString(props.title)
         }, null, 8, _hoisted_1$4), props.readonly != true && props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$3)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$1, [vue.createElementVNode("input", {
-          ref_key: "inputRef",
-          ref: inputRef,
+          ref: "input-el",
           type: props.type || "text",
           value: inputModel.value,
           readonly: props.readonly,
@@ -822,7 +843,7 @@
     return function () {
       if (popupApp == void 0) {
         const container = document.createElement("div");
-        container.classList.add("snail-popup-app");
+        container.classList.add("snail-app", "snail-popup-app");
         container.style = "height:0 !important; width:0 !important;";
         document.body.appendChild(container);
         popupApp = vue.createApp(_sfc_main$6, {
@@ -928,11 +949,13 @@
     },
     setup(__props) {
       const props = __props;
-      const observer = snail_view.useObserver();
+      const {
+        onEvent
+      } = snail_view.useObserver();
       const loading = vue.shallowRef(false);
       vue.onMounted(() => {
         loading.value = true;
-        observer.onEvent(window, "keyup", event => {
+        onEvent(window, "keyup", event => {
           event.key === "Escape" && props.dialogStatus.value == "active" && props.closeOnEscape && props.closeDialog();
         });
       });
@@ -1066,13 +1089,10 @@
     props: {
       type: {},
       message: {},
-      id: {},
-      zIndex: {},
       inPopup: {},
       closePopup: {
         type: Function
-      },
-      popupStatus: {}
+      }
     },
     setup(__props) {
       const props = __props;
@@ -1224,7 +1244,9 @@
         emit: __emit
       } = _ref;
       const emit = __emit;
-      const observer = snail_view.useObserver();
+      const {
+        onEvent
+      } = snail_view.useObserver();
       const isTouch = "ontouchstart" in window;
       const dragHandle = vue.useTemplateRef("dragHandle");
       const dragInfo = vue.ref({
@@ -1263,8 +1285,8 @@
         }
       }
       isTouch || vue.onMounted(function () {
-        observer.onEvent(window, "mousemove", onDragMove);
-        observer.onEvent(window, "mouseup", onDragEnd);
+        onEvent(window, "mousemove", onDragMove);
+        onEvent(window, "mouseup", onDragEnd);
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {

package/dist/styles/app.css

@@ -0,0 +1 @@
+.snail-app{font-family:Microsoft YaHei,微软雅黑,Hiragino Sans GB,tahoma,arial,simsun,\ 宋体,"sans-serif"}.snail-app,.snail-app *{box-sizing:border-box}.snail-app input{border-radius:4px;font:inherit;margin:0;outline:0!important}

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

@@ -2,24 +2,24 @@
 .snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:left}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:right}
 /* src:base\button.vue 	 index:0 */
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;font-size:14px;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
-/* src:base\header.vue 	 index:0 */
-.snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding-left:24px;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
-/* src:base\icon.vue 	 index:0 */
-.snail-icon{cursor:pointer;opacity:1}
-/* src:container\dynamic.vue 	 index:0 */
-.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:base\switch.vue 	 index:0 */
 .snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:default}
+/* src:base\header.vue 	 index:0 */
+.snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:700}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
 /* src:container\fold.vue 	 index:0 */
 .snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-fold>div.fold-header>.title{color:#2e3033;font-size:14px;font-weight:700;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{align-items:right;display:flex;flex:1;justify-content:right}.snail-fold>div.fold-body{padding-left:20px}
+/* src:base\icon.vue 	 index:0 */
+.snail-icon{cursor:pointer;opacity:1}
 /* src:container\scroll.vue 	 index:0 */
 .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
-/* src:container\components\table-col.vue 	 index:0 */
-.table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
-/* src:container\components\table-row.vue 	 index:0 */
-.table-row{align-items:center;display:flex;min-width:100%}
+/* src:container\dynamic.vue 	 index:0 */
+.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:container\table.vue 	 index:0 */
 .snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{position:sticky!important;top:0}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
+/* src:container\components\table-row.vue 	 index:0 */
+.table-row{align-items:center;display:flex;min-width:100%}
+/* src:container\components\table-col.vue 	 index:0 */
+.table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
 /* src:form\input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;font-size:14px;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{border:1px solid #dddfed;color:#2e3033;flex:1;font-size:14px;font-weight:400;padding:0 10px;text-overflow:ellipsis}.snail-input>.input-body>input:focus{border:1px solid #3292ea}.snail-input>.input-body>span{background-color:red;flex-shrink:0}.snail-input.readonly>div.input-body>input:focus{border:1px solid #dddfed}
 /* src:prompt\drag-verify.vue 	 index:0 */
@@ -28,11 +28,11 @@
 .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-size:14px;font-weight:400;padding:0 10px 10px}
 /* src:prompt\loading.vue 	 index:0 */
 .snail-loading{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:popup\components\confirm-container.vue 	 index:0 */
-.snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>*{box-sizing:border-box}.snail-confirm>div.confirm-body{flex:1;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word}
 /* src:popup\components\dialog-container.vue 	 index:0 */
-.snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.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}
+.snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.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);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}
 /* src:popup\components\popup-container.vue 	 index:0 */
 .snail-popup{left:0;position:fixed;top:0}.snail-popup-enter-active,.snail-popup-leave-active{transition:opacity .1s ease}.snail-popup-enter-from,.snail-popup-leave-to{opacity:0}
 /* src:popup\components\toast-container.vue 	 index:0 */
-.snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;opacity:0;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity .5s ease}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
+.snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;opacity:0;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%);transition:opacity .5s ease}.snail-toast.show-toast{opacity:1}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
+/* src:popup\components\confirm-container.vue 	 index:0 */
+.snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word}

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",