snail.vue 1.0.22 → 1.0.23

package/dist/snail.vue.d.ts

@@ -1,4 +1,4 @@
-import { AlignStyle, SizeOptions } from 'snail.style';
+import { AlignStyle, SizeOptions } from 'snail.view';
 import * as vue from 'vue';
 import { Component, App, Ref, ShallowRef } from 'vue';
 import { IScope } from 'snail.core';
@@ -549,73 +549,6 @@ declare function triggerAppCreated(app: App): App;
  */
 declare function getSvgIcon(options: IconOptions): IconPathOptions;
 
-/**
- * 监视器 模块：封装便捷方法做监听，并在不支持浏览器下做垫片
- * - 和 VueUse 库很像，但只封装自己需要的
- * - 内部变量不使用响应式，那样外部需要 传入el时内部需要兼容useTemplateRef逻辑，这个交给外部处理更灵活
- * - ResizeObserver 监听元素大小变化
- */
-
-/**
- * 使用作用域
- * - 内部管理多个子作用域，在destroy时自动执行子作用域的destroy方法
- * - 在vue的setup中使用时，vue组件销毁时，自动销毁作用域
- * @returns 销毁方法，add 添加子作用域
- */
-declare function useScopes(): IScope & {
-    add: (scope: IScope) => void;
-};
-/**
- * 监听Interval执行
- * - 内部使用 setInterval 实现
- * @param fn 执行方法
- * @param delay 间隔，单位：ms
- * @param args fn执行时传递参数
- * @returns destroy 停止fn执行
- */
-declare function onInterval(fn: (...args: any[]) => void, delay?: number, ...args: any[]): IScope;
-/**
- * 监听Timeout执行
- * - 内部使用 setTimeout 实现
- * @param fn 执行方法
- * @param delay 延时，单位：ms
- * @param args fn执行时传递参数
- * @returns destroy 停止fn执行；若fn已执行则无效
- */
-declare function onTimeout(fn: (...args: any[]) => void, delay?: number, ...args: any[]): IScope;
-/**
- * 监听事件
- * - 内部使用addEventListener 方法监听事件，销毁时自动执行removeEventListener
- * @param target 监听元素
- * @param name 事件名称
- * @param fn 事件处理方法
- * @returns destroy 销毁监听
- */
-declare function onEvent(target: Element | Window, name: string, fn: EventListenerOrEventListenerObject): IScope;
-/**
- * 监听元素尺寸变化
- * @param el 监听元素
- * @param fn 尺寸变化时的回调方法
- * @returns destroy 销毁监听
- */
-declare function onResize(el: Element, fn: (size: Readonly<{
-    width: number;
-    height: number;
-}>) => void): IScope;
-/**
- * 监听元素客户端位置、大小变化
- * - 位置计算规则：相对window屏幕
- * @param el 监听元素
- * @param fn
- * @returns destroy 销毁监听
- */
-declare function onRerect(el: Element, fn: (rect: DOMRectReadOnly) => void): IScope;
-
-/**
- * 动画相应时样式类型
- */
-type AnimationRefStyle = Partial<CSSStyleDeclaration>;
-
 /**
  * 响应式助手类，封装一些响应式相关的工具方法
  */
@@ -632,21 +565,6 @@ type AnimationRefStyle = Partial<CSSStyleDeclaration>;
  * @returns 新创建的作用域对象
  */
 declare function scopeRef<T>(rv: Ref<T> | ShallowRef<T>, start: T, end: T, dealy?: number): IScope;
-/**
- * 动画ref，方法执行逻辑：
- * - 1、初始动画，设置styleRef起始值：styleRef.value = start
- * - 2、开始动画，设置styleRef目标值：styleRef.value = target
- * - 3、结束动画，设置styleRef最终值：styleRef.value = end
- * - 备注示例：外部自己控制动画效果，这里只操作样式值
- * - 1、设置height动画效果（0-100，1s动画结束后清理height值）：animationRef(styleRef,1000,{height:0},{height:"100px",{}})
- * @param styleRef 动画样式ref对象
- * @param start 初始动画style样式
- * @param target 目标动画style样式
- * @param aTime 动画时间，单位ms，延迟 aTime后执行【结束动画】操作，不传入则忽略【结束动画】操作
- * @param end 结束动画style样式；不传入则忽略【结束动画】操作
- * @returns 作用域对象，destroy 方法直接执行【结束动画】操作
- */
-declare function animationRef(styleRef: ShallowRef<AnimationRefStyle>, start: AnimationRefStyle, target: AnimationRefStyle, aTime?: number, end?: AnimationRefStyle): IScope;
 
 /**
  * 模态弹窗显示的组件配置选项
@@ -1124,5 +1042,5 @@ declare const components: {
  */
 declare function mount(options: ComponentMountOptions, onDestroyed?: (fn: () => void) => void): IScope;
 
-export { animationRef, components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeDialog, scopeRef, toast, triggerAppCreated, useScopes };
+export { components, confirm, getSvgIcon, mount, onAppCreated, openDialog, scopeDialog, scopeRef, toast, triggerAppCreated };
 export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmHandle, ConfirmOptions, Dialog, DialogHandle, DialogOpenResult, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IconOptions, IconPathOptions, IconType, InputEvents, InputOptions, LoadingOptions, ScrollEvents, ScrollOptions, ScrollTouchType, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TableStyleOptions, ToastHandle, ToastOptions };

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, createBlock, createCommentVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, unref, computed, mergeProps, mergeModels, useModel, getCurrentScope, onScopeDispose, Transition, withCtx, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, createSlots, renderList, useTemplateRef, onUnmounted, normalizeStyle, createVNode, TransitionGroup, withModifiers, createApp, onMounted } from 'vue';
-import { tidyString, throwError, mustString, style, mustFunction, throwIfFalse, isStringNotEmpty, isObject, script, delay, getMessage, hook, mustObject, defer, newId, isFunction } from 'snail.core';
-import { getSizeStyle, getAlignStyle } from 'snail.style';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, createBlock, createCommentVNode, toDisplayString, createElementVNode, normalizeProps, guardReactiveProps, unref, computed, mergeProps, mergeModels, useModel, Transition, withCtx, ref, shallowRef, watch, onErrorCaptured, onActivated, onDeactivated, Fragment, resolveDynamicComponent, createSlots, renderList, useTemplateRef, onUnmounted, createVNode, normalizeStyle, TransitionGroup, withModifiers, createApp, onMounted } from 'vue';
+import { tidyString, throwError, mustString, style, mustFunction, useScope, isStringNotEmpty, isObject, script, delay, getMessage, useHook, mustObject, defer, newId, isFunction } from 'snail.core';
+import { useAnimation, style as style$1, useObserver } from 'snail.view';
 
 var _sfc_main$h = defineComponent({
   ...{
@@ -135,10 +135,6 @@ var _sfc_main$f = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(style.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 const _hoisted_1$8 = ["textContent"];
 var _sfc_main$e = defineComponent({
   ...{
@@ -194,6 +190,10 @@ var _sfc_main$e = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(style.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 var _sfc_main$d = defineComponent({
   ...{
     name: "Switch",
@@ -246,150 +246,21 @@ const appCreatedFns = [];
 function onAppCreated(fn) {
   mustFunction(fn, "fn");
   appCreatedFns.push(fn);
-  return {
-    destroy: () => {
-      const index = appCreatedFns.indexOf(fn);
-      index >= 0 && appCreatedFns.splice(index, 1);
-    }
-  };
+  return useScope().onDestroy(() => {
+    const index = appCreatedFns.indexOf(fn);
+    index >= 0 && appCreatedFns.splice(index, 1);
+  });
 }
 function triggerAppCreated(app) {
   appCreatedFns.forEach(fn => fn(app));
   return app;
 }
 
-function tryOnScopeDispose(fn) {
-  if (getCurrentScope()) {
-    onScopeDispose(fn);
-    return true;
-  }
-  return false;
-}
-function useScopes() {
-  const scopes = [];
-  const destroy = () => scopes.forEach(scope => scope.destroy());
-  tryOnScopeDispose(destroy);
-  function add(scope) {
-    onScope(scope, () => {
-      const index = scopes.indexOf(scope);
-      index >= 0 && scopes.splice(index, 1);
-    });
-    scopes.push(scope);
-  }
-  return {
-    add,
-    destroy
-  };
-}
-function onScope(scope, destroy) {
-  mustFunction((scope || {}).destroy, "onScope: scope.destroy");
-  mustFunction(destroy, "onScope: destroy");
-  const origin = scope.destroy;
-  scope.destroy = function () {
-    origin();
-    destroy();
-  };
-}
-function onInterval(fn, delay) {
-  mustFunction(fn, "onInterval: fn");
-  for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-    args[_key - 2] = arguments[_key];
-  }
-  const timer = setInterval(fn, delay, ...args);
-  return {
-    destroy: () => clearInterval(timer)
-  };
-}
-function onTimeout(fn, delay) {
-  mustFunction(fn, "onTimeout: fn");
-  for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-    args[_key2 - 2] = arguments[_key2];
-  }
-  const timer = setTimeout(fn, delay, ...args);
-  return {
-    destroy: () => clearTimeout(timer)
-  };
-}
-function onEvent(target, name, fn) {
-  throwIfFalse(target instanceof Element || target === window, "onEvent: target must be Element or Window");
-  mustString(name, "onEvent: name");
-  mustFunction(fn, "onEvent: fn");
-  target.addEventListener(name, fn);
-  return {
-    destroy: () => target.removeEventListener(name, fn)
-  };
-}
-function onResize(el, fn) {
-  throwIfFalse(el instanceof Element, "onResize: el must be Element.");
-  var isDestroy = false;
-  var preSize = void 0;
-  function calcSize() {
-    if (isDestroy == true) {
-      resizeObserver && resizeObserver.disconnect();
-      timer && clearInterval(timer);
-      return;
-    }
-    const rect = el.getBoundingClientRect();
-    const isChange = preSize == void 0 || preSize.width != rect.width || preSize.height != rect.height;
-    if (isChange == true) {
-      preSize = Object.freeze({
-        width: rect.width,
-        height: rect.height
-      });
-      fn(preSize);
-    }
-  }
-  const resizeObserver = "ResizeObserver" in window ? new ResizeObserver(calcSize) : void 0;
-  const timer = resizeObserver ? resizeObserver.observe(el) : setInterval(calcSize, 100);
-  calcSize();
-  return {
-    destroy: () => isDestroy = true
-  };
-}
-function onRerect(el, fn) {
-  throwIfFalse(el instanceof Element, "onRect: el must be Element.");
-  var isDestroy = false;
-  var preRect = void 0;
-  function calcRect() {
-    if (isDestroy == true) {
-      clearInterval(timer);
-      return;
-    }
-    const rect = el.getBoundingClientRect();
-    const isChange = preRect == void 0 || rect.x != preRect.x || rect.y != preRect.y || rect.width != preRect.width || rect.height != preRect.height;
-    if (isChange == true) {
-      preRect = DOMRectReadOnly.fromRect(rect);
-      fn(preRect);
-    }
-  }
-  const timer = setInterval(calcRect, 100);
-  calcRect();
-  return {
-    destroy: () => isDestroy = true
-  };
-}
-
 function scopeRef(rv, start, end, dealy) {
   rv.value = start;
-  const destroy = () => rv.value = end;
-  return dealy > 0 ? {
-    destroy: () => setTimeout(destroy, dealy)
-  } : {
-    destroy
-  };
-}
-function animationRef(styleRef, start, target, aTime, end) {
-  styleRef.value = start;
-  const st = setTimeout(() => styleRef.value = target, 1);
-  const ct = aTime != void 0 && end != void 0 ? setTimeout(() => styleRef.value = end, aTime) : void 0;
-  function destroy() {
-    clearTimeout(st);
-    ct && clearTimeout(ct);
-    styleRef.value = end;
-  }
-  return {
-    destroy
-  };
+  return useScope().onDestroy(() => {
+    dealy > 0 ? setTimeout(() => rv.value = end, dealy) : rv.value = end;
+  });
 }
 
 var _sfc_main$c = defineComponent({
@@ -547,22 +418,21 @@ var _sfc_main$a = defineComponent({
     } = _ref;
     const props = __props;
     const emit = __emit;
+    const animationScope = useAnimation();
     const status = useModel(__props, "status");
     const statusWatch = watch(status, calcFoldStyle);
     const statusIcon = getFoldStatusDraw();
     const foldBodyRef = useTemplateRef("foldBodyRef");
-    const foldStyleRef = shallowRef(Object.create(null));
     function calcFoldStyle() {
       if (foldBodyRef.value) {
         const minHeight = 32;
         const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-        animationRef(foldStyleRef, {
-          height: `${status.value == "expand" ? minHeight : maxHeight}px`,
-          overflow: "hidden"
-        }, {
-          height: `${status.value == "expand" ? maxHeight : minHeight}px`,
-          overflow: "hidden"
-        }, 200, Object.create(null));
+        animationScope.roll(foldBodyRef.value, "vertical", {
+          start: `${status.value == "expand" ? minHeight : maxHeight}px`,
+          target: `${status.value == "expand" ? maxHeight : minHeight}px`,
+          time: 200,
+          clear: true
+        });
       }
     }
     function onStatusClick() {
@@ -578,11 +448,13 @@ var _sfc_main$a = defineComponent({
       }
       emit("change", status.value);
     }
-    onUnmounted(() => statusWatch.stop());
+    onUnmounted(() => {
+      animationScope.destroy();
+      statusWatch.stop();
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["snail-fold", status.value]),
-        style: normalizeStyle(foldStyleRef.value)
+        class: normalizeClass(["snail-fold", status.value])
       }, [createElementVNode("div", _hoisted_1$7, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
         class: "title",
         textContent: toDisplayString(props.title)
@@ -600,7 +472,7 @@ var _sfc_main$a = defineComponent({
         class: "fold-body",
         ref_key: "foldBodyRef",
         ref: foldBodyRef
-      }, [renderSlot(_ctx.$slots, "default")], 512)], 6);
+      }, [renderSlot(_ctx.$slots, "default")], 512)], 2);
     };
   }
 });
@@ -846,19 +718,17 @@ function openDialog(options, onDestroyed) {
 }
 async function scopeDialog(options, scopeRef) {
   scopeRef.value && scopeRef.value.destroy();
-  scopeRef.value = {
-    destroy() {
-      scopeRef.value = void 0;
-      ret.destroy();
-    }
-  };
+  scopeRef.value = useScope().onDestroy(() => {
+    scopeRef.value = void 0;
+    ret.destroy();
+  });
   const ret = openDialog(options);
   const data = await ret;
   scopeRef.value = void 0;
   return data;
 }
 const descriptors = ref([]);
-const dialogHook = hook.newScope();
+const dialogHook = useHook();
 const createDialogHookCode = dialog => `onCloseDialog:${dialog.id}`;
 function destroyDialog(dialog) {
   const index = descriptors.value.indexOf(dialog);
@@ -887,12 +757,10 @@ const initVueApp = (() => {
 })();
 
 function getTitleStyle(options, isFlex) {
-  const style = Object.create(null);
-  if (options.titleStyle) {
-    getSizeStyle(style, options.titleStyle, "width", isFlex);
-    getAlignStyle(style, options.titleStyle, isFlex);
-  }
-  return style;
+  return options && options.titleStyle ? style$1.build({
+    ...options.titleStyle,
+    width: options.titleStyle
+  }, isFlex) : Object.create(null);
 }
 
 const _hoisted_1$4 = ["textContent"];
@@ -1008,8 +876,8 @@ var _sfc_main$3 = defineComponent({
       width: 0,
       height: 0
     });
-    const scopes = useScopes();
     var destroyTimer;
+    const observer = useObserver();
     function onMouseEvent(isLeave) {
       destroyTimer && clearTimeout(destroyTimer);
       destroyTimer = void 0;
@@ -1020,12 +888,12 @@ var _sfc_main$3 = defineComponent({
       setTimeout(props.close, 200);
     }
     onMounted(() => {
-      scopes.add(onResize(toastRef.value, size => toastSize.value = size));
+      observer.onSize(toastRef.value, size => toastSize.value = size);
       destroyTimer = setTimeout(onToastClose, 2e3);
       showToast.value = true;
     });
     onUnmounted(() => {
-      scopes.destroy();
+      observer.destroy();
       destroyTimer && clearTimeout(destroyTimer);
     });
     return (_ctx, _cache) => {
@@ -1314,13 +1182,9 @@ function mount(options, onDestroyed) {
   });
   triggerAppCreated(app);
   app.mount(options.target);
-  function destroy() {
-    app.unmount();
-  }
-  isFunction(onDestroyed) && onDestroyed(destroy);
-  return {
-    destroy
-  };
+  const scope = useScope().onDestroy(() => app.unmount());
+  isFunction(onDestroyed) && onDestroyed(scope.destroy);
+  return scope;
 }
 
-export { animationRef, components, confirm, getSvgIcon, mount, onAppCreated, onEvent, onInterval, onRerect, onResize, onTimeout, openDialog, scopeDialog, scopeRef, toast, triggerAppCreated, useScopes };
+export { components, confirm, getSvgIcon, mount, onAppCreated, openDialog, scopeDialog, scopeRef, toast, triggerAppCreated };

package/dist/snail.vue.umd.js

@@ -1,9 +1,9 @@
 //@ sourceURL=/snail.vue.js
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('snail.core'), require('snail.style')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'snail.core', 'snail.style'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailStyle));
-})(this, (function (exports, vue, snail_core, snail_style) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('snail.core'), require('snail.view')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'snail.core', 'snail.view'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SnailVue = global.SnailVue || {}, global.Vue, global.Snail, global.SnailView));
+})(this, (function (exports, vue, snail_core, snail_view) { 'use strict';
 
   var _sfc_main$h = vue.defineComponent({
     ...{
@@ -244,150 +244,21 @@
   function onAppCreated(fn) {
     snail_core.mustFunction(fn, "fn");
     appCreatedFns.push(fn);
-    return {
-      destroy: () => {
-        const index = appCreatedFns.indexOf(fn);
-        index >= 0 && appCreatedFns.splice(index, 1);
-      }
-    };
+    return snail_core.useScope().onDestroy(() => {
+      const index = appCreatedFns.indexOf(fn);
+      index >= 0 && appCreatedFns.splice(index, 1);
+    });
   }
   function triggerAppCreated(app) {
     appCreatedFns.forEach(fn => fn(app));
     return app;
   }
 
-  function tryOnScopeDispose(fn) {
-    if (vue.getCurrentScope()) {
-      vue.onScopeDispose(fn);
-      return true;
-    }
-    return false;
-  }
-  function useScopes() {
-    const scopes = [];
-    const destroy = () => scopes.forEach(scope => scope.destroy());
-    tryOnScopeDispose(destroy);
-    function add(scope) {
-      onScope(scope, () => {
-        const index = scopes.indexOf(scope);
-        index >= 0 && scopes.splice(index, 1);
-      });
-      scopes.push(scope);
-    }
-    return {
-      add,
-      destroy
-    };
-  }
-  function onScope(scope, destroy) {
-    snail_core.mustFunction((scope || {}).destroy, "onScope: scope.destroy");
-    snail_core.mustFunction(destroy, "onScope: destroy");
-    const origin = scope.destroy;
-    scope.destroy = function () {
-      origin();
-      destroy();
-    };
-  }
-  function onInterval(fn, delay) {
-    snail_core.mustFunction(fn, "onInterval: fn");
-    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
-      args[_key - 2] = arguments[_key];
-    }
-    const timer = setInterval(fn, delay, ...args);
-    return {
-      destroy: () => clearInterval(timer)
-    };
-  }
-  function onTimeout(fn, delay) {
-    snail_core.mustFunction(fn, "onTimeout: fn");
-    for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
-      args[_key2 - 2] = arguments[_key2];
-    }
-    const timer = setTimeout(fn, delay, ...args);
-    return {
-      destroy: () => clearTimeout(timer)
-    };
-  }
-  function onEvent(target, name, fn) {
-    snail_core.throwIfFalse(target instanceof Element || target === window, "onEvent: target must be Element or Window");
-    snail_core.mustString(name, "onEvent: name");
-    snail_core.mustFunction(fn, "onEvent: fn");
-    target.addEventListener(name, fn);
-    return {
-      destroy: () => target.removeEventListener(name, fn)
-    };
-  }
-  function onResize(el, fn) {
-    snail_core.throwIfFalse(el instanceof Element, "onResize: el must be Element.");
-    var isDestroy = false;
-    var preSize = void 0;
-    function calcSize() {
-      if (isDestroy == true) {
-        resizeObserver && resizeObserver.disconnect();
-        timer && clearInterval(timer);
-        return;
-      }
-      const rect = el.getBoundingClientRect();
-      const isChange = preSize == void 0 || preSize.width != rect.width || preSize.height != rect.height;
-      if (isChange == true) {
-        preSize = Object.freeze({
-          width: rect.width,
-          height: rect.height
-        });
-        fn(preSize);
-      }
-    }
-    const resizeObserver = "ResizeObserver" in window ? new ResizeObserver(calcSize) : void 0;
-    const timer = resizeObserver ? resizeObserver.observe(el) : setInterval(calcSize, 100);
-    calcSize();
-    return {
-      destroy: () => isDestroy = true
-    };
-  }
-  function onRerect(el, fn) {
-    snail_core.throwIfFalse(el instanceof Element, "onRect: el must be Element.");
-    var isDestroy = false;
-    var preRect = void 0;
-    function calcRect() {
-      if (isDestroy == true) {
-        clearInterval(timer);
-        return;
-      }
-      const rect = el.getBoundingClientRect();
-      const isChange = preRect == void 0 || rect.x != preRect.x || rect.y != preRect.y || rect.width != preRect.width || rect.height != preRect.height;
-      if (isChange == true) {
-        preRect = DOMRectReadOnly.fromRect(rect);
-        fn(preRect);
-      }
-    }
-    const timer = setInterval(calcRect, 100);
-    calcRect();
-    return {
-      destroy: () => isDestroy = true
-    };
-  }
-
   function scopeRef(rv, start, end, dealy) {
     rv.value = start;
-    const destroy = () => rv.value = end;
-    return dealy > 0 ? {
-      destroy: () => setTimeout(destroy, dealy)
-    } : {
-      destroy
-    };
-  }
-  function animationRef(styleRef, start, target, aTime, end) {
-    styleRef.value = start;
-    const st = setTimeout(() => styleRef.value = target, 1);
-    const ct = aTime != void 0 && end != void 0 ? setTimeout(() => styleRef.value = end, aTime) : void 0;
-    function destroy() {
-      clearTimeout(st);
-      ct && clearTimeout(ct);
-      styleRef.value = end;
-    }
-    return {
-      destroy
-    };
+    return snail_core.useScope().onDestroy(() => {
+      dealy > 0 ? setTimeout(() => rv.value = end, dealy) : rv.value = end;
+    });
   }
 
   var _sfc_main$c = vue.defineComponent({
@@ -545,22 +416,21 @@
       } = _ref;
       const props = __props;
       const emit = __emit;
+      const animationScope = snail_view.useAnimation();
       const status = vue.useModel(__props, "status");
       const statusWatch = vue.watch(status, calcFoldStyle);
       const statusIcon = getFoldStatusDraw();
       const foldBodyRef = vue.useTemplateRef("foldBodyRef");
-      const foldStyleRef = vue.shallowRef(Object.create(null));
       function calcFoldStyle() {
         if (foldBodyRef.value) {
           const minHeight = 32;
           const maxHeight = minHeight + foldBodyRef.value.getBoundingClientRect().height;
-          animationRef(foldStyleRef, {
-            height: `${status.value == "expand" ? minHeight : maxHeight}px`,
-            overflow: "hidden"
-          }, {
-            height: `${status.value == "expand" ? maxHeight : minHeight}px`,
-            overflow: "hidden"
-          }, 200, Object.create(null));
+          animationScope.roll(foldBodyRef.value, "vertical", {
+            start: `${status.value == "expand" ? minHeight : maxHeight}px`,
+            target: `${status.value == "expand" ? maxHeight : minHeight}px`,
+            time: 200,
+            clear: true
+          });
         }
       }
       function onStatusClick() {
@@ -576,11 +446,13 @@
         }
         emit("change", status.value);
       }
-      vue.onUnmounted(() => statusWatch.stop());
+      vue.onUnmounted(() => {
+        animationScope.destroy();
+        statusWatch.stop();
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["snail-fold", status.value]),
-          style: vue.normalizeStyle(foldStyleRef.value)
+          class: vue.normalizeClass(["snail-fold", status.value])
         }, [vue.createElementVNode("div", _hoisted_1$7, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
           class: "title",
           textContent: vue.toDisplayString(props.title)
@@ -598,7 +470,7 @@
           class: "fold-body",
           ref_key: "foldBodyRef",
           ref: foldBodyRef
-        }, [vue.renderSlot(_ctx.$slots, "default")], 512)], 6);
+        }, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
       };
     }
   });
@@ -844,19 +716,17 @@
   }
   async function scopeDialog(options, scopeRef) {
     scopeRef.value && scopeRef.value.destroy();
-    scopeRef.value = {
-      destroy() {
-        scopeRef.value = void 0;
-        ret.destroy();
-      }
-    };
+    scopeRef.value = snail_core.useScope().onDestroy(() => {
+      scopeRef.value = void 0;
+      ret.destroy();
+    });
     const ret = openDialog(options);
     const data = await ret;
     scopeRef.value = void 0;
     return data;
   }
   const descriptors = vue.ref([]);
-  const dialogHook = snail_core.hook.newScope();
+  const dialogHook = snail_core.useHook();
   const createDialogHookCode = dialog => `onCloseDialog:${dialog.id}`;
   function destroyDialog(dialog) {
     const index = descriptors.value.indexOf(dialog);
@@ -885,12 +755,10 @@
   })();
 
   function getTitleStyle(options, isFlex) {
-    const style = Object.create(null);
-    if (options.titleStyle) {
-      snail_style.getSizeStyle(style, options.titleStyle, "width", isFlex);
-      snail_style.getAlignStyle(style, options.titleStyle, isFlex);
-    }
-    return style;
+    return options && options.titleStyle ? snail_view.style.build({
+      ...options.titleStyle,
+      width: options.titleStyle
+    }, isFlex) : Object.create(null);
   }
 
   const _hoisted_1$4 = ["textContent"];
@@ -1006,8 +874,8 @@
         width: 0,
         height: 0
       });
-      const scopes = useScopes();
       var destroyTimer;
+      const observer = snail_view.useObserver();
       function onMouseEvent(isLeave) {
         destroyTimer && clearTimeout(destroyTimer);
         destroyTimer = void 0;
@@ -1018,12 +886,12 @@
         setTimeout(props.close, 200);
       }
       vue.onMounted(() => {
-        scopes.add(onResize(toastRef.value, size => toastSize.value = size));
+        observer.onSize(toastRef.value, size => toastSize.value = size);
         destroyTimer = setTimeout(onToastClose, 2e3);
         showToast.value = true;
       });
       vue.onUnmounted(() => {
-        scopes.destroy();
+        observer.destroy();
         destroyTimer && clearTimeout(destroyTimer);
       });
       return (_ctx, _cache) => {
@@ -1312,31 +1180,20 @@
     });
     triggerAppCreated(app);
     app.mount(options.target);
-    function destroy() {
-      app.unmount();
-    }
-    snail_core.isFunction(onDestroyed) && onDestroyed(destroy);
-    return {
-      destroy
-    };
+    const scope = snail_core.useScope().onDestroy(() => app.unmount());
+    snail_core.isFunction(onDestroyed) && onDestroyed(scope.destroy);
+    return scope;
   }
 
-  exports.animationRef = animationRef;
   exports.components = components;
   exports.confirm = confirm;
   exports.getSvgIcon = getSvgIcon;
   exports.mount = mount;
   exports.onAppCreated = onAppCreated;
-  exports.onEvent = onEvent;
-  exports.onInterval = onInterval;
-  exports.onRerect = onRerect;
-  exports.onResize = onResize;
-  exports.onTimeout = onTimeout;
   exports.openDialog = openDialog;
   exports.scopeDialog = scopeDialog;
   exports.scopeRef = scopeRef;
   exports.toast = toast;
   exports.triggerAppCreated = triggerAppCreated;
-  exports.useScopes = useScopes;
 
 }));

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

@@ -1,36 +1,36 @@
 /* src:base\button.vue 	 index:0 */
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:inline-flex;font-size:14px;justify-content:center;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\icon.vue 	 index:0 */
-.snail-icon{cursor:pointer;opacity:1}
-/* 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\footer.vue 	 index:0 */
 .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:container\dynamic.vue 	 index:0 */
-.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:base\header.vue 	 index:0 */
 .snail-header{align-items:center;background-color:#fff;display:flex;flex-direction:row;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}.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:container\fold.vue 	 index:0 */
 .snail-fold{flex-shrink:0;transition:height .2s ease}.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;white-space:nowrap}.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{display:flex;flex:1;justify-content:right;justify-self:right}.snail-fold>div.fold-header>div.status>span{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>span{transform:rotate(0deg)}.snail-fold.fold{height:32px;overflow:hidden}.snail-fold.fold>div.fold-header>div.status>span{transform:rotate(180deg)}
+/* src:container\components\table-col.vue 	 index:0 */
+.table-col{align-items:center;display:inline-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\table.vue 	 index:0 */
 .snail-table{display:flex;flex-direction:column}.snail-table>footer.table-footer,.snail-table>header.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>header.table-header{position:sticky!important;top:0}.snail-table>main.table-body{flex:1;width:100%}.snail-table.start-border>footer.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>header.table-header>.table-col:nth-child(n+2),.snail-table.start-border>main.table-body>.table-row>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>footer.table-footer>.table-col,.snail-table.start-border>main.table-body>.table-row>.table-col{border-top:none!important}
-/* 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-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:inline-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:prompt\empty.vue 	 index:0 */
-.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{bottom:0;left:0;position:absolute;right:0;top:0;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: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 */
 .snail-drag-verify{background:#f8f9fa;border:1px solid #dddfed;border-radius:8px;height:40px;overflow:hidden;position:relative;width:100%}.snail-drag-verify>div{height:100%;width:100%}.snail-drag-verify>.drag-progress{background-color:#0c6;transition:width .5s ease-in-out}.snail-drag-verify>.drag-handle,.snail-drag-verify>.verify-message{left:0;position:absolute;top:0;transition:left .5s ease-in-out}.snail-drag-verify>.verify-message{align-items:center;background-image:-webkit-linear-gradient(left,#666,#666 45%,#fff 50%,#666 55%,#666);color:#7e848c;display:flex;font-size:12px;font-weight:400;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-text-fill-color:transparent;animation:snail-drag-verify 2s linear infinite;-webkit-background-clip:text;background-clip:text;background-size:200% 100%}.snail-drag-verify>.drag-handle{align-items:center;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURQAAAGBQUGBaWmJZWWJYWGNYWGNZWWJYWGJZWWBYWGNYWGNZWWRYWIqwlb0AAAANdFJOUwAQMMDQoFBgcCCw4ECQ8pPMAAAAP0lEQVQI12NgwATTGBgawAwRBYZwMIPRiYErAcxSFmA0AjN4HBikBcCsUgYmQxQGE0wKphhIQrSzwAyEW4EOACHhB32zIad6AAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;border-right:1px solid #dddfed;cursor:move;display:flex;justify-content:center;width:40px}.snail-drag-verify.dragging>.drag-handle,.snail-drag-verify.dragging>.drag-progress{transition:none!important}.snail-drag-verify.success>.verify-message{-webkit-text-fill-color:#fff;color:#fff}.snail-drag-verify.success>.drag-handle>svg{background:#76c61d;border-radius:50%;padding:4px}@keyframes snail-drag-verify{0%{background-position:0 0}to{background-position:-200% 0}}
+/* src:prompt\empty.vue 	 index:0 */
+.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{bottom:0;left:0;position:absolute;right:0;top:0;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\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\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}
 /* src:prompt\components\confirm.vue 	 index:0 */
 .snail-confirm{background-color:#fff;border-radius:4px;box-sizing:border-box;color:#2e2f33;display:flex;flex-direction:column;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>main{flex:1;font-size:14px;margin:20px 40px;overflow:auto;word-wrap:break-word;box-sizing:border-box}
 /* src:prompt\components\toast.vue 	 index:0 */
-.snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.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: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}
+.snail-toast{background:rgba(0,0,0,.7);border-radius:5px;color:#fff;display:flex;max-height:200px;max-width:500px;min-width:200px;opacity:.2;overflow:hidden;padding:20px 30px 20px 20px;position:fixed;transition:opacity .2s ease;z-index:99999}.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}

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -15,18 +15,18 @@
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=1.2.13"
+    "snail.core": ">=2.0.3",
+    "snail.view": ">=1.0.2"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.10",
     "snail.rollup": ">=1.2.8",
     "snail.rollup-asset": ">=1.2.1",
     "snail.rollup-html": ">=1.2.3",
-    "snail.rollup-url": ">=1.2.1",
+    "snail.rollup-url": ">=1.2.2",
     "snail.rollup-inject": ">=1.2.1",
     "snail.rollup-script": ">=1.2.4",
     "snail.rollup-style": ">=1.2.5",
-    "snail.style": ">=1.0.0",
     "snail.rollup-vue": ">=1.2.4"
   }
 }