snail.vue 2.0.21 → 2.0.23

package/dist/snail.vue.d.ts

@@ -1,7 +1,7 @@
 import * as snail_core from 'snail.core';
 import { DateFormat, DateValue, TimeValue, IScope, RunResult, IAsyncScope } from 'snail.core';
 import * as snail_view from 'snail.view';
-import { ScrollbarOptions, ScrollStatus, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
+import { ScrollbarOptions, ScrollStatus, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, CSSClassOptions, MarginStyle } from 'snail.view';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
 
@@ -1030,7 +1030,7 @@ type LayoutOptions = {
      * - 对应插槽名：main；主要内容显示区域，处于布局中的【中】区域
      * - 配置主内容区域的滚动条配置
      */
-    main?: Pick<LayoutAraeOptions<void>, "scroll">;
+    main?: Pick<LayoutAraeOptions<void>, "scroll" | "class">;
     /**
      * 【左侧】区域配置
      * - 对应插槽名`left` ；`mode` 为 `horizontal` 时生效
@@ -1061,7 +1061,7 @@ type LayoutOptions = {
 /**
  * 布局组件子区域 配置选项
  */
-type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & {
+type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
     /**
      * 滚动视图配置
      * - 视图属性：滚动条大小、显示时机
@@ -1081,7 +1081,7 @@ type LayoutAreaItem = {
     /**
      * 内容区域元素的类样式名
      */
-    class: string;
+    class: string[];
     /**
      * css样式
      */
@@ -1150,6 +1150,16 @@ type FoldOptions = DisabledOptions & TitleOptions & {
      * - 跟随在title后
      */
     subtitle?: string;
+    /**
+     * 面板头部区域配置
+     * - 如指定特定的css式
+     */
+    header?: CSSClassOptions;
+    /**
+     * 面板内容区域配置
+     * - 如指定特定的css样式
+     */
+    body?: CSSClassOptions;
 };
 /**
  * 折叠状态
@@ -1157,6 +1167,27 @@ type FoldOptions = DisabledOptions & TitleOptions & {
  * - fold   ： 折叠状态
  */
 type FoldStatus = "expand" | "fold";
+/**
+ * 折叠面板组件插槽句柄
+ * - 将折叠面板状态和操作共享给插槽中自定义组件使用
+ */
+type FoldSlotHandle = {
+    /**
+     * 获取折叠面板状态
+     * @returns
+     */
+    getStatus(): FoldStatus;
+    /**
+     * 设置折叠面板状态
+     * @param status 新的状态
+     */
+    setStatus(status: FoldStatus): void;
+    /**
+     * 切换面板状态
+     * @returns 新的状态
+     */
+    toggle(): FoldStatus;
+};
 /**
  * 折叠面板事件
  */
@@ -1971,8 +2002,9 @@ type ButtonOptions = TitleOptions & {
 
 /**
  * 可操作项组件 的配置选项
+ * - disabled 为true时，不响应操作项触发
  */
-type ActionOptions = {
+type ActionOptions = DisabledOptions & {
     /**
      * 触发方式
      *  - hover：鼠标移入显示
@@ -3156,6 +3188,8 @@ declare const components: {
     Fold: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & TitleOptions & {
             subtitle?: string;
+            header?: snail_view.CSSClassOptions;
+            body?: snail_view.CSSClassOptions;
         } & {
             status?: FoldStatus;
         }> & Readonly<{
@@ -3173,6 +3207,8 @@ declare const components: {
             Defaults: {};
         }, Readonly<DisabledOptions & TitleOptions & {
             subtitle?: string;
+            header?: snail_view.CSSClassOptions;
+            body?: snail_view.CSSClassOptions;
         } & {
             status?: FoldStatus;
         }> & Readonly<{
@@ -3184,6 +3220,8 @@ declare const components: {
         __isSuspense?: never;
     } & vue.ComponentOptionsBase<Readonly<DisabledOptions & TitleOptions & {
         subtitle?: string;
+        header?: snail_view.CSSClassOptions;
+        body?: snail_view.CSSClassOptions;
     } & {
         status?: FoldStatus;
     }> & Readonly<{
@@ -3194,9 +3232,17 @@ declare const components: {
         "update:status": (value: FoldStatus) => any;
     }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
         $slots: {
-            header?: (props: {}) => any;
+            header?: (props: {
+                getStatus(): FoldStatus;
+                setStatus(status: FoldStatus): void;
+                toggle(): FoldStatus;
+            }) => any;
         } & {
-            default?: (props: {}) => any;
+            default?: (props: {
+                getStatus(): FoldStatus;
+                setStatus(status: FoldStatus): void;
+                toggle(): FoldStatus;
+            }) => any;
         };
     });
     Motion: {
@@ -3607,4 +3653,4 @@ declare const components: {
 };
 
 export { MOTION, components, getBuiltinIcon, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
-export type { ActionEvents, ActionItem, ActionItemsOptions, ActionOptions, ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, ElasticEvents, ElasticExpose, ElasticOptions, ElasticSpringStatus, EmitterType, EmptyOptions, EventsType, FlexOptions, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowPositionOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MotionEffectOptions, MotionOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollExpose, ScrollOptions, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
+export type { ActionEvents, ActionItem, ActionItemsOptions, ActionOptions, ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, ElasticEvents, ElasticExpose, ElasticOptions, ElasticSpringStatus, EmitterType, EmptyOptions, EventsType, FlexOptions, FoldEvents, FoldOptions, FoldSlotHandle, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowPositionOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MotionEffectOptions, MotionOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollExpose, ScrollOptions, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
 import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, vShow, onBeforeUnmount, onActivated, getCurrentScope, onScopeDispose } from 'vue';
 import { throwError, isObject, correctNumber, correctString, useKey, isArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isNumberNotNaN, isStringNotEmpty, hasAny, mustFunction, useScope, removeFromArray, mustObject, isArrayNotEmpty, hasOwnProperty, isString, script, delay, useTimer, defer, useAsyncScope, useHook, newId, throwIfTrue, isFunction, isNullish, getTimeNumber, getDateValue, parseDate, formatDateValue, getDateByValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, isValidTime, getFromArray, onMountScope } from 'snail.core';
-import { css, link, useObserver, useScroll, useAnimation } from 'snail.view';
+import { link, css, useObserver, useScroll, useAnimation } from 'snail.view';
 
 const _hoisted_1$o = ["title"];
 var _sfc_main$F = defineComponent({
@@ -25,6 +25,10 @@ var _sfc_main$F = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 function getBuiltinIcon(iconType) {
   switch (iconType) {
     case "success":
@@ -137,7 +141,7 @@ var _sfc_main$E = defineComponent({
 const _hoisted_1$m = ["title", "onClick"];
 const _hoisted_2$e = ["type", "checked"];
 const _hoisted_3$9 = ["textContent"];
-const _hoisted_4$7 = ["textContent"];
+const _hoisted_4$6 = ["textContent"];
 var _sfc_main$D = defineComponent({
   ...{
     name: "Choose",
@@ -230,16 +234,12 @@ var _sfc_main$D = defineComponent({
           key: 3,
           class: "item-des",
           textContent: toDisplayString(node.item.description)
-        }, null, 8, _hoisted_4$7)) : createCommentVNode("", true)], 14, _hoisted_1$m);
+        }, null, 8, _hoisted_4$6)) : createCommentVNode("", true)], 14, _hoisted_1$m);
       }), 128))], 2);
     };
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 var _sfc_main$C = defineComponent({
   ...{
     name: "Footer",
@@ -350,8 +350,8 @@ const _hoisted_2$d = {
 const _hoisted_3$8 = {
   class: "input-body"
 };
-const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
-const _hoisted_5$4 = ["title"];
+const _hoisted_4$5 = ["type", "value", "readonly", "placeholder", "title"];
+const _hoisted_5$3 = ["title"];
 var _sfc_main$A = defineComponent({
   ...{
     name: "Input",
@@ -413,7 +413,7 @@ var _sfc_main$A = defineComponent({
         title: inputModel.value,
         onChange: onValueChange,
         onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-      }, null, 40, _hoisted_4$6), !!validateRef.value ? (openBlock(), createElementBlock("span", {
+      }, null, 40, _hoisted_4$5), !!validateRef.value ? (openBlock(), createElementBlock("span", {
         key: 0,
         class: "validate",
         title: validateRef.value
@@ -422,7 +422,7 @@ var _sfc_main$A = defineComponent({
         button: "",
         size: 16,
         color: "red"
-      })], 8, _hoisted_5$4)) : createCommentVNode("", true)])], 2);
+      })], 8, _hoisted_5$3)) : createCommentVNode("", true)])], 2);
     };
   }
 });
@@ -633,11 +633,11 @@ const _hoisted_1$j = {
 };
 const _hoisted_2$c = ["textContent"];
 const _hoisted_3$7 = ["inputmode", "placeholder", "title"];
-const _hoisted_4$5 = {
+const _hoisted_4$4 = {
   key: 1,
   class: "number-suffix"
 };
-const _hoisted_5$3 = ["textContent"];
+const _hoisted_5$2 = ["textContent"];
 const _hoisted_6$2 = ["title", "textContent"];
 const _hoisted_7$1 = ["title", "textContent"];
 var _sfc_main$z = defineComponent({
@@ -836,10 +836,10 @@ var _sfc_main$z = defineComponent({
         button: "",
         size: 20,
         rotate: 90
-      })])], 64)) : createCommentVNode("", true)], 2), unref(hasSuffix) ? (openBlock(), createElementBlock("div", _hoisted_4$5, [createElementVNode("span", {
+      })])], 64)) : createCommentVNode("", true)], 2), unref(hasSuffix) ? (openBlock(), createElementBlock("div", _hoisted_4$4, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(suffix))
-      }, null, 8, _hoisted_5$3)])) : createCommentVNode("", true), unref(upper) ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_5$2)])) : createCommentVNode("", true), unref(upper) ? (openBlock(), createElementBlock("div", {
         key: 2,
         class: "number-util ellipsis",
         title: upperTextRef.value,
@@ -2254,7 +2254,7 @@ const _hoisted_1$d = {
 };
 const _hoisted_2$7 = ["title", "textContent"];
 const _hoisted_3$4 = ["textContent"];
-const _hoisted_4$4 = {
+const _hoisted_4$3 = {
   key: 1,
   class: "placeholder"
 };
@@ -2407,7 +2407,7 @@ var _sfc_main$m = defineComponent({
         button: "",
         size: 24,
         rotate: 90
-      })) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$4, "暂无可选项"))], 2);
+      })) : createCommentVNode("", true)], 64)) : (openBlock(), createElementBlock("div", _hoisted_4$3, "暂无可选项"))], 2);
     };
   }
 });
@@ -2586,10 +2586,15 @@ const _hoisted_1$a = {
   class: "snail-action flex-cross-center",
   ref: "snail-action"
 };
-const _hoisted_2$5 = ["title"];
+const _hoisted_2$5 = {
+  class: "action-slot flex-cross-center"
+};
 var _sfc_main$i = defineComponent({
   __name: "action",
   props: {
+    disabled: {
+      type: Boolean
+    },
     trigger: {},
     actions: {}
   },
@@ -2614,21 +2619,23 @@ var _sfc_main$i = defineComponent({
         popupScope.destroy();
         return;
       }
-      popupScope = follow(rootDom.value, {
-        component: _sfc_main$j,
-        closeOnEscape: true,
-        closeOnMask: true,
-        closeOnResize: true,
-        closeOnTarget: true,
-        followX: longPress ? ["center", "start", "end"] : ["after", "end", "start", "end", "center"],
-        followY: longPress ? ["center", "after", "before"] : ["after", "before", "center", "end", "after"],
-        props: {
-          mode: "vertical",
-          actions: props.actions
-        }
-      });
-      const code = await popupScope;
-      isStringNotEmpty(code) && emits("trigger", code);
+      if (props.disabled != true) {
+        popupScope = follow(rootDom.value, {
+          component: _sfc_main$j,
+          closeOnEscape: true,
+          closeOnMask: true,
+          closeOnResize: true,
+          closeOnTarget: true,
+          followX: longPress ? ["center", "start", "end"] : ["after", "end", "start", "end", "center"],
+          followY: longPress ? ["center", "after", "before"] : ["after", "before", "center", "end", "after"],
+          props: {
+            mode: "vertical",
+            actions: props.actions
+          }
+        });
+        const code = await popupScope;
+        isStringNotEmpty(code) && emits("trigger", code);
+      }
     }
     function onMouseDown() {
       if (props.trigger == "long-press" && pressStartDate == void 0) {
@@ -2662,10 +2669,7 @@ var _sfc_main$i = defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", {
-        class: "action-slot flex-cross-center",
-        title: String(__props.trigger == "hover")
-      }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_2$5), __props.trigger == "hover" ? (openBlock(), createBlock(_sfc_main$E, {
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [createElementVNode("div", _hoisted_2$5, [renderSlot(_ctx.$slots, "default")]), __props.trigger == "hover" && __props.disabled != true ? (openBlock(), createBlock(_sfc_main$E, {
         key: 0,
         class: "hover-tips",
         button: "",
@@ -3041,19 +3045,12 @@ var _sfc_main$g = defineComponent({
   }
 });
 
-const _hoisted_1$9 = {
-  class: "fold-header"
-};
+const _hoisted_1$9 = ["textContent"];
 const _hoisted_2$4 = ["textContent"];
-const _hoisted_3$3 = ["textContent"];
-const _hoisted_4$3 = {
+const _hoisted_3$3 = {
   key: 1,
   class: "status"
 };
-const _hoisted_5$2 = {
-  class: "fold-body",
-  ref: "foldBody"
-};
 var _sfc_main$f = defineComponent({
   ...{
     name: "Fold",
@@ -3065,7 +3062,9 @@ var _sfc_main$f = defineComponent({
       type: Boolean
     },
     title: {},
-    subtitle: {}
+    subtitle: {},
+    header: {},
+    body: {}
   }, {
     "status": {
       default: "expand"
@@ -3085,27 +3084,37 @@ var _sfc_main$f = defineComponent({
       watcher
     } = useReactive();
     const statusModel = useModel(__props, "status");
-    watcher(statusModel, updateFoldStyle);
+    const foldHeaderDom = useTemplateRef("foldHeader");
     const foldBodyDom = useTemplateRef("foldBody");
-    function updateFoldStyle() {
+    const slotHandle = {
+      getStatus: () => statusModel.value,
+      setStatus: value => statusModel.value = value,
+      toggle: () => (onStatusClick(), statusModel.value)
+    };
+    function updateFoldStyle(disableAnimation) {
       const isExpand = statusModel.value == "expand";
       if (foldBodyDom.value) {
-        const minHeight = 32;
+        const minHeight = foldHeaderDom.value.getBoundingClientRect().height;
         const maxHeight = minHeight + foldBodyDom.value.getBoundingClientRect().height;
-        transition(foldBodyDom.value.parentElement, {
-          from: {
-            transition: "height 0.2s ease",
-            overflow: "hidden",
-            height: `${isExpand ? minHeight : maxHeight}px`
-          },
-          to: {
-            height: `${isExpand ? maxHeight : minHeight}px`
-          },
-          end: {
-            overflow: isExpand ? "" : "hidden",
-            height: isExpand ? "" : `${minHeight}px`
-          }
-        });
+        const endStyle = {
+          overflow: isExpand ? "" : "hidden",
+          height: isExpand ? "" : `${minHeight}px`
+        };
+        if (disableAnimation === true) {
+          Object.assign(foldBodyDom.value.parentElement.style, endStyle);
+        } else {
+          transition(foldBodyDom.value.parentElement, {
+            from: {
+              transition: "height 0.2s ease",
+              overflow: "hidden",
+              height: `${isExpand ? minHeight : maxHeight}px`
+            },
+            to: {
+              height: `${isExpand ? maxHeight : minHeight}px`
+            },
+            end: endStyle
+          });
+        }
       }
     }
     function onStatusClick() {
@@ -3121,24 +3130,33 @@ var _sfc_main$f = defineComponent({
       }
       nextTick(() => emits("change", statusModel.value));
     }
+    onMounted(() => {
+      statusModel.value != "expand" && updateFoldStyle(true);
+      watcher(statusModel, () => updateFoldStyle(false));
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["snail-fold", statusModel.value])
-      }, [createElementVNode("div", _hoisted_1$9, [renderSlot(_ctx.$slots, "header", {}, () => [createElementVNode("div", {
+      }, [createElementVNode("div", {
+        class: normalizeClass(["fold-header", __props.header ? __props.header.class : []]),
+        ref: "foldHeader"
+      }, [renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotHandle)), () => [createElementVNode("div", {
         class: "title ellipsis",
         textContent: toDisplayString(__props.title)
-      }, null, 8, _hoisted_2$4), !!__props.subtitle ? (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_1$9), !!__props.subtitle ? (openBlock(), createElementBlock("div", {
         key: 0,
         class: "subtitle ellipsis",
         textContent: toDisplayString(__props.subtitle)
-      }, null, 8, _hoisted_3$3)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_4$3, [createVNode(_sfc_main$E, {
-        custom: false,
+      }, null, 8, _hoisted_2$4)) : createCommentVNode("", true), __props.disabled != true ? (openBlock(), createElementBlock("div", _hoisted_3$3, [createVNode(_sfc_main$E, {
         type: "arrow",
         button: "",
         title: statusModel.value == "expand" ? "收起" : "展开",
         rotate: statusModel.value == "expand" ? -90 : 90,
         onClick: onStatusClick
-      }, null, 8, ["title", "rotate"])])) : createCommentVNode("", true)])]), createElementVNode("div", _hoisted_5$2, [renderSlot(_ctx.$slots, "default")], 512)], 2);
+      }, null, 8, ["title", "rotate"])])) : createCommentVNode("", true)])], 2), createElementVNode("div", {
+        class: normalizeClass(["fold-body", __props.body ? __props.body.class : []]),
+        ref: "foldBody"
+      }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotHandle)))], 2)], 2);
     };
   }
 });
@@ -3203,34 +3221,45 @@ var _sfc_main$d = defineComponent({
       const map = Object.create(null);
       map.main = {
         scrollable: props.main && props.main.scroll != void 0,
-        class: "main-area",
+        class: buildAreaClass("main-area", props.main),
         style: void 0
       };
       if (props.mode == "vertical") {
         map.top = {
           scrollable: props.top && props.top.scroll != void 0,
-          class: "top-area",
+          class: buildAreaClass("top-area", props.top),
           style: buildHeightStyle(props.top)
         };
         map.bottom = {
           scrollable: props.bottom && props.bottom.scroll != void 0,
-          class: "bottom-area",
+          class: buildAreaClass("bottom-area", props.bottom),
           style: buildHeightStyle(props.bottom)
         };
       } else {
         map.left = {
           scrollable: props.left && props.left.scroll != void 0,
-          class: "left-area",
+          class: buildAreaClass("left-area", props.left),
           style: buildWidthStyle(props.left)
         };
         map.right = {
           scrollable: props.right && props.right.scroll != void 0,
-          class: "right-area",
+          class: buildAreaClass("right-area", props.right),
           style: buildWidthStyle(props.right)
         };
       }
       return map;
     });
+    function buildAreaClass(fixedClass, cssClass) {
+      const classArray = [fixedClass];
+      if (cssClass != void 0) {
+        if (isArray(cssClass.class) == true) {
+          classArray.push(...cssClass.class);
+        } else if (isStringNotEmpty(cssClass.class) == true) {
+          classArray.push(cssClass.class);
+        }
+      }
+      return classArray;
+    }
     function buildWidthStyle(style) {
       return style ? css.buildStyle({
         minWidth: style.minWidth,

package/dist/snail.vue.umd.js

@@ -27,6 +27,10 @@
     }
   });
 
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
+
   function getBuiltinIcon(iconType) {
     switch (iconType) {
       case "success":
@@ -139,7 +143,7 @@
   const _hoisted_1$m = ["title", "onClick"];
   const _hoisted_2$e = ["type", "checked"];
   const _hoisted_3$9 = ["textContent"];
-  const _hoisted_4$7 = ["textContent"];
+  const _hoisted_4$6 = ["textContent"];
   var _sfc_main$D = vue.defineComponent({
     ...{
       name: "Choose",
@@ -232,16 +236,12 @@
             key: 3,
             class: "item-des",
             textContent: vue.toDisplayString(node.item.description)
-          }, null, 8, _hoisted_4$7)) : vue.createCommentVNode("", true)], 14, _hoisted_1$m);
+          }, null, 8, _hoisted_4$6)) : vue.createCommentVNode("", true)], 14, _hoisted_1$m);
         }), 128))], 2);
       };
     }
   });
 
-  var addLink = href => setTimeout(snail_view.link.register, 0, href);
-
-  addLink("/styles/snail.vue.vue.css");
-
   var _sfc_main$C = vue.defineComponent({
     ...{
       name: "Footer",
@@ -352,8 +352,8 @@
   const _hoisted_3$8 = {
     class: "input-body"
   };
-  const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
-  const _hoisted_5$4 = ["title"];
+  const _hoisted_4$5 = ["type", "value", "readonly", "placeholder", "title"];
+  const _hoisted_5$3 = ["title"];
   var _sfc_main$A = vue.defineComponent({
     ...{
       name: "Input",
@@ -415,7 +415,7 @@
           title: inputModel.value,
           onChange: onValueChange,
           onClick: _cache[0] || (_cache[0] = $event => emits("click"))
-        }, null, 40, _hoisted_4$6), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
+        }, null, 40, _hoisted_4$5), !!validateRef.value ? (vue.openBlock(), vue.createElementBlock("span", {
           key: 0,
           class: "validate",
           title: validateRef.value
@@ -424,7 +424,7 @@
           button: "",
           size: 16,
           color: "red"
-        })], 8, _hoisted_5$4)) : vue.createCommentVNode("", true)])], 2);
+        })], 8, _hoisted_5$3)) : vue.createCommentVNode("", true)])], 2);
       };
     }
   });
@@ -635,11 +635,11 @@
   };
   const _hoisted_2$c = ["textContent"];
   const _hoisted_3$7 = ["inputmode", "placeholder", "title"];
-  const _hoisted_4$5 = {
+  const _hoisted_4$4 = {
     key: 1,
     class: "number-suffix"
   };
-  const _hoisted_5$3 = ["textContent"];
+  const _hoisted_5$2 = ["textContent"];
   const _hoisted_6$2 = ["title", "textContent"];
   const _hoisted_7$1 = ["title", "textContent"];
   var _sfc_main$z = vue.defineComponent({
@@ -838,10 +838,10 @@
           button: "",
           size: 20,
           rotate: 90
-        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$5, [vue.createElementVNode("span", {
+        })])], 64)) : vue.createCommentVNode("", true)], 2), vue.unref(hasSuffix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(suffix))
-        }, null, 8, _hoisted_5$3)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_5$2)])) : vue.createCommentVNode("", true), vue.unref(upper) ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 2,
           class: "number-util ellipsis",
           title: upperTextRef.value,
@@ -2256,7 +2256,7 @@
   };
   const _hoisted_2$7 = ["title", "textContent"];
   const _hoisted_3$4 = ["textContent"];
-  const _hoisted_4$4 = {
+  const _hoisted_4$3 = {
     key: 1,
     class: "placeholder"
   };
@@ -2409,7 +2409,7 @@
           button: "",
           size: 24,
           rotate: 90
-        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$4, "暂无可选项"))], 2);
+        })) : vue.createCommentVNode("", true)], 64)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, "暂无可选项"))], 2);
       };
     }
   });
@@ -2588,10 +2588,15 @@
     class: "snail-action flex-cross-center",
     ref: "snail-action"
   };
-  const _hoisted_2$5 = ["title"];
+  const _hoisted_2$5 = {
+    class: "action-slot flex-cross-center"
+  };
   var _sfc_main$i = vue.defineComponent({
     __name: "action",
     props: {
+      disabled: {
+        type: Boolean
+      },
       trigger: {},
       actions: {}
     },
@@ -2616,21 +2621,23 @@
           popupScope.destroy();
           return;
         }
-        popupScope = follow(rootDom.value, {
-          component: _sfc_main$j,
-          closeOnEscape: true,
-          closeOnMask: true,
-          closeOnResize: true,
-          closeOnTarget: true,
-          followX: longPress ? ["center", "start", "end"] : ["after", "end", "start", "end", "center"],
-          followY: longPress ? ["center", "after", "before"] : ["after", "before", "center", "end", "after"],
-          props: {
-            mode: "vertical",
-            actions: props.actions
-          }
-        });
-        const code = await popupScope;
-        snail_core.isStringNotEmpty(code) && emits("trigger", code);
+        if (props.disabled != true) {
+          popupScope = follow(rootDom.value, {
+            component: _sfc_main$j,
+            closeOnEscape: true,
+            closeOnMask: true,
+            closeOnResize: true,
+            closeOnTarget: true,
+            followX: longPress ? ["center", "start", "end"] : ["after", "end", "start", "end", "center"],
+            followY: longPress ? ["center", "after", "before"] : ["after", "before", "center", "end", "after"],
+            props: {
+              mode: "vertical",
+              actions: props.actions
+            }
+          });
+          const code = await popupScope;
+          snail_core.isStringNotEmpty(code) && emits("trigger", code);
+        }
       }
       function onMouseDown() {
         if (props.trigger == "long-press" && pressStartDate == void 0) {
@@ -2664,10 +2671,7 @@
         }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", {
-          class: "action-slot flex-cross-center",
-          title: String(__props.trigger == "hover")
-        }, [vue.renderSlot(_ctx.$slots, "default")], 8, _hoisted_2$5), __props.trigger == "hover" ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.createElementVNode("div", _hoisted_2$5, [vue.renderSlot(_ctx.$slots, "default")]), __props.trigger == "hover" && __props.disabled != true ? (vue.openBlock(), vue.createBlock(_sfc_main$E, {
           key: 0,
           class: "hover-tips",
           button: "",
@@ -3043,19 +3047,12 @@
     }
   });
 
-  const _hoisted_1$9 = {
-    class: "fold-header"
-  };
+  const _hoisted_1$9 = ["textContent"];
   const _hoisted_2$4 = ["textContent"];
-  const _hoisted_3$3 = ["textContent"];
-  const _hoisted_4$3 = {
+  const _hoisted_3$3 = {
     key: 1,
     class: "status"
   };
-  const _hoisted_5$2 = {
-    class: "fold-body",
-    ref: "foldBody"
-  };
   var _sfc_main$f = vue.defineComponent({
     ...{
       name: "Fold",
@@ -3067,7 +3064,9 @@
         type: Boolean
       },
       title: {},
-      subtitle: {}
+      subtitle: {},
+      header: {},
+      body: {}
     }, {
       "status": {
         default: "expand"
@@ -3087,27 +3086,37 @@
         watcher
       } = useReactive();
       const statusModel = vue.useModel(__props, "status");
-      watcher(statusModel, updateFoldStyle);
+      const foldHeaderDom = vue.useTemplateRef("foldHeader");
       const foldBodyDom = vue.useTemplateRef("foldBody");
-      function updateFoldStyle() {
+      const slotHandle = {
+        getStatus: () => statusModel.value,
+        setStatus: value => statusModel.value = value,
+        toggle: () => (onStatusClick(), statusModel.value)
+      };
+      function updateFoldStyle(disableAnimation) {
         const isExpand = statusModel.value == "expand";
         if (foldBodyDom.value) {
-          const minHeight = 32;
+          const minHeight = foldHeaderDom.value.getBoundingClientRect().height;
           const maxHeight = minHeight + foldBodyDom.value.getBoundingClientRect().height;
-          transition(foldBodyDom.value.parentElement, {
-            from: {
-              transition: "height 0.2s ease",
-              overflow: "hidden",
-              height: `${isExpand ? minHeight : maxHeight}px`
-            },
-            to: {
-              height: `${isExpand ? maxHeight : minHeight}px`
-            },
-            end: {
-              overflow: isExpand ? "" : "hidden",
-              height: isExpand ? "" : `${minHeight}px`
-            }
-          });
+          const endStyle = {
+            overflow: isExpand ? "" : "hidden",
+            height: isExpand ? "" : `${minHeight}px`
+          };
+          if (disableAnimation === true) {
+            Object.assign(foldBodyDom.value.parentElement.style, endStyle);
+          } else {
+            transition(foldBodyDom.value.parentElement, {
+              from: {
+                transition: "height 0.2s ease",
+                overflow: "hidden",
+                height: `${isExpand ? minHeight : maxHeight}px`
+              },
+              to: {
+                height: `${isExpand ? maxHeight : minHeight}px`
+              },
+              end: endStyle
+            });
+          }
         }
       }
       function onStatusClick() {
@@ -3123,24 +3132,33 @@
         }
         vue.nextTick(() => emits("change", statusModel.value));
       }
+      vue.onMounted(() => {
+        statusModel.value != "expand" && updateFoldStyle(true);
+        watcher(statusModel, () => updateFoldStyle(false));
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: vue.normalizeClass(["snail-fold", statusModel.value])
-        }, [vue.createElementVNode("div", _hoisted_1$9, [vue.renderSlot(_ctx.$slots, "header", {}, () => [vue.createElementVNode("div", {
+        }, [vue.createElementVNode("div", {
+          class: vue.normalizeClass(["fold-header", __props.header ? __props.header.class : []]),
+          ref: "foldHeader"
+        }, [vue.renderSlot(_ctx.$slots, "header", vue.normalizeProps(vue.guardReactiveProps(slotHandle)), () => [vue.createElementVNode("div", {
           class: "title ellipsis",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_2$4), !!__props.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_1$9), !!__props.subtitle ? (vue.openBlock(), vue.createElementBlock("div", {
           key: 0,
           class: "subtitle ellipsis",
           textContent: vue.toDisplayString(__props.subtitle)
-        }, null, 8, _hoisted_3$3)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [vue.createVNode(_sfc_main$E, {
-          custom: false,
+        }, null, 8, _hoisted_2$4)) : vue.createCommentVNode("", true), __props.disabled != true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$3, [vue.createVNode(_sfc_main$E, {
           type: "arrow",
           button: "",
           title: statusModel.value == "expand" ? "收起" : "展开",
           rotate: statusModel.value == "expand" ? -90 : 90,
           onClick: onStatusClick
-        }, null, 8, ["title", "rotate"])])) : vue.createCommentVNode("", true)])]), vue.createElementVNode("div", _hoisted_5$2, [vue.renderSlot(_ctx.$slots, "default")], 512)], 2);
+        }, null, 8, ["title", "rotate"])])) : vue.createCommentVNode("", true)])], 2), vue.createElementVNode("div", {
+          class: vue.normalizeClass(["fold-body", __props.body ? __props.body.class : []]),
+          ref: "foldBody"
+        }, [vue.renderSlot(_ctx.$slots, "default", vue.normalizeProps(vue.guardReactiveProps(slotHandle)))], 2)], 2);
       };
     }
   });
@@ -3205,34 +3223,45 @@
         const map = Object.create(null);
         map.main = {
           scrollable: props.main && props.main.scroll != void 0,
-          class: "main-area",
+          class: buildAreaClass("main-area", props.main),
           style: void 0
         };
         if (props.mode == "vertical") {
           map.top = {
             scrollable: props.top && props.top.scroll != void 0,
-            class: "top-area",
+            class: buildAreaClass("top-area", props.top),
             style: buildHeightStyle(props.top)
           };
           map.bottom = {
             scrollable: props.bottom && props.bottom.scroll != void 0,
-            class: "bottom-area",
+            class: buildAreaClass("bottom-area", props.bottom),
             style: buildHeightStyle(props.bottom)
           };
         } else {
           map.left = {
             scrollable: props.left && props.left.scroll != void 0,
-            class: "left-area",
+            class: buildAreaClass("left-area", props.left),
             style: buildWidthStyle(props.left)
           };
           map.right = {
             scrollable: props.right && props.right.scroll != void 0,
-            class: "right-area",
+            class: buildAreaClass("right-area", props.right),
             style: buildWidthStyle(props.right)
           };
         }
         return map;
       });
+      function buildAreaClass(fixedClass, cssClass) {
+        const classArray = [fixedClass];
+        if (cssClass != void 0) {
+          if (snail_core.isArray(cssClass.class) == true) {
+            classArray.push(...cssClass.class);
+          } else if (snail_core.isStringNotEmpty(cssClass.class) == true) {
+            classArray.push(cssClass.class);
+          }
+        }
+        return classArray;
+      }
       function buildWidthStyle(style) {
         return style ? snail_view.css.buildStyle({
           minWidth: style.minWidth,

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

@@ -2,12 +2,12 @@
 .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;overflow:hidden;-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:../../../../../01_snail/snail.js/packages/snail.vue/src/base/choose.vue 	 index:0 */
 .snail-choose>div.choose-item{align-items:center;display:flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:not(.readonly){cursor:pointer}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose>div.choose-item>.item-text{color:#2e3033}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose.horizontal{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose.horizontal>div.choose-item{margin:0 8px}.snail-choose.horizontal>div.choose-item:first-child{margin-left:0}.snail-choose.vertical{display:flex;flex-direction:column;justify-content:center}.snail-choose.beautiful>.choose-item>.status{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden}.snail-choose.beautiful>.choose-item>.status.selected{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose.beautiful>.choose-item>.status:not(.selected){border:1px solid #dcdfe6}.snail-choose.beautiful.radio>.choose-item>.status{border-radius:50%;height:16px;width:16px}.snail-choose.beautiful.checkbox>.choose-item>.status{height:14px;width:14px}.snail-choose.beautiful.readonly>.choose-item>.status.selected{background-color:#d5d7db;border-color:#d5d7db}.snail-choose.beautiful.readonly>.choose-item>.status:not(.selected){opacity:.5}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/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:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/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}.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:bold}.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:../../../../../01_snail/snail.js/packages/snail.vue/src/base/icon.vue 	 index:0 */
 .snail-icon{fill:#8a8099;opacity:1;transition:all .2s linear}.snail-icon.button{cursor:pointer}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/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:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/input.vue 	 index:0 */
 .snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;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{flex:1}.snail-input>.input-body>span{background-color:red;flex-shrink:0}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/number.vue 	 index:0 */
@@ -18,10 +18,10 @@
 .snail-select{align-items:center;border:1px solid #dddfed;border-radius:4px;color:#2e3033;display:flex;height:32px;width:100%}.snail-select:not(.readonly){background-color:#fff}.snail-select:not(.readonly,.empty){cursor:pointer}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.placeholder{flex:1;padding:0 10px 0 6px}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{flex:1;padding:0 8px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/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:not-allowed}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/action.vue 	 index:0 */
-.snail-action,.snail-action *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-action>.action-slot{flex:1;overflow:hidden;position:relative}.snail-action>.hover-tips{display:none;flex-shrink:0}.snail-action:hover>.hover-tips{display:block}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/textarea.vue 	 index:0 */
 textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overflow-y:auto;resize:none;width:100%}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/action.vue 	 index:0 */
+.snail-action,.snail-action *{-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-action>.action-slot{flex:1;overflow:hidden;position:relative}.snail-action>.hover-tips{display:none;flex-shrink:0}.snail-action:hover>.hover-tips{display:block}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/dynamic.vue 	 index:0 */
 .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/elastic.vue 	 index:0 */
@@ -60,20 +60,20 @@ textarea.snail-textarea{font-size:14px;line-height:1.5em;overflow-x:hidden;overf
 .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/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)}}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/time-pc.vue 	 index:0 */
-.snail-layout.time-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:240px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:210px!important}.snail-layout.time-picker.pc>.main-area{display:flex;flex-wrap:nowrap;justify-content:space-between;margin:10px;overflow:hidden}.snail-layout.time-picker.pc>.main-area>.tz-item{border:1px solid #eee;border-left:none;flex-shrink:0;overflow:hidden auto;width:30%}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number{align-items:center;border-left:1px solid #eee;cursor:pointer;display:flex;height:24px;justify-content:center}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number:hover{background-color:#f4f4f4}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active{background-color:#58a4fd;border-color:#58a4fd;color:#fff!important}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active.disabled{opacity:.6}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.disabled{color:#ddd;cursor:not-allowed}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar{width:4px}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.6);border:none;border-radius:0}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}.snail-layout.time-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.time-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.time-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.time-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.time-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}.snail-layout.time-picker.pc.second-disabled{width:180px}.snail-layout.time-picker.pc.second-disabled>.main-area>.tz-item{width:46%}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/date-pc.vue 	 index:0 */
-.snail-layout.date-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:300px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:280px!important}.snail-layout.date-picker.pc.time-now:after{background-color:gray;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%}.snail-layout.date-picker.pc>.top-area{align-items:center;border-bottom:1px solid #eee;display:flex;flex-wrap:nowrap;padding:0 4px}.snail-layout.date-picker.pc>.top-area>svg{fill:#8a9099;flex-shrink:0}.snail-layout.date-picker.pc>.top-area>svg:hover{fill:#58a4fd}.snail-layout.date-picker.pc>.top-area>div.header-content{align-items:center;display:flex;flex:1;justify-content:center}.snail-layout.date-picker.pc>.top-area>div.header-content>div{align-items:center;display:flex;font-size:16px;height:100%}.snail-layout.date-picker.pc>.top-area>div.header-content>div:nth-child(2){margin-left:8px}.snail-layout.date-picker.pc>.top-area>div.header-content:not(.year)>div:hover{color:#58a4fd;cursor:pointer}.snail-layout.date-picker.pc>.main-area{display:flex;flex-wrap:wrap;justify-content:space-between}.snail-layout.date-picker.pc>.main-area>div{align-items:center;display:flex;flex-shrink:0;font-size:13px;justify-content:center;position:relative}.snail-layout.date-picker.pc>.main-area>div>span{align-items:center;display:flex;height:28px;justify-content:center}.snail-layout.date-picker.pc>.main-area>div>span:hover{background:#f4f4f4;cursor:pointer}.snail-layout.date-picker.pc>.main-area>div.active>span{background-color:#58a4fd;color:#fff!important}.snail-layout.date-picker.pc>.main-area>div.active.disabled{opacity:.6}.snail-layout.date-picker.pc>.main-area>div.disabled>span{color:#aaa;cursor:not-allowed}.snail-layout.date-picker.pc>.main-area>div.day-item{height:30px;width:36px}.snail-layout.date-picker.pc>.main-area>div.day-item.week{font-weight:bold}.snail-layout.date-picker.pc>.main-area>div.day-item.active>span,.snail-layout.date-picker.pc>.main-area>div.day-item:hover>span{border-radius:100%;width:28px}.snail-layout.date-picker.pc>.main-area>div.day-item:not(.now-month)>span{color:#aaa}.snail-layout.date-picker.pc>.main-area>div.month-item,.snail-layout.date-picker.pc>.main-area>div.year-item{width:30%}.snail-layout.date-picker.pc>.main-area>div.month-item.active>span,.snail-layout.date-picker.pc>.main-area>div.month-item:hover>span,.snail-layout.date-picker.pc>.main-area>div.year-item.active>span,.snail-layout.date-picker.pc>.main-area>div.year-item:hover>span{border-radius:15px;padding:0 8px;width:-moz-fit-content;width:fit-content}.snail-layout.date-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.date-picker.pc>.bottom-area>.time-area{color:#58a4fd;cursor:pointer;font-size:12px;margin-left:10px;margin-right:auto}.snail-layout.date-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.date-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.date-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.date-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/confirm-container.vue 	 index:0 */
 .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/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%;opacity:1;position:absolute;transition:opacity .4s ease-in-out;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{opacity:0}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}
-/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/follow-container.vue 	 index:0 */
-.snail-follow{background-color:#fff;max-height:100%;max-width:100%;position:fixed;transition-duration:.1s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/popup-container.vue 	 index:0 */
 .snail-popup{left:0;position:fixed;top:0}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/popup/components/follow-container.vue 	 index:0 */
+.snail-follow{background-color:#fff;max-height:100%;max-width:100%;position:fixed;transition-duration:.1s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/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;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.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;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/time-pc.vue 	 index:0 */
+.snail-layout.time-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:240px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:210px!important}.snail-layout.time-picker.pc>.main-area{display:flex;flex-wrap:nowrap;justify-content:space-between;margin:10px;overflow:hidden}.snail-layout.time-picker.pc>.main-area>.tz-item{border:1px solid #eee;border-left:none;flex-shrink:0;overflow:hidden auto;width:30%}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number{align-items:center;border-left:1px solid #eee;cursor:pointer;display:flex;height:24px;justify-content:center}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number:hover{background-color:#f4f4f4}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active{background-color:#58a4fd;border-color:#58a4fd;color:#fff!important}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.active.disabled{opacity:.6}.snail-layout.time-picker.pc>.main-area>.tz-item>.tzi-number.disabled{color:#ddd;cursor:not-allowed}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar{width:4px}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.6);border:none;border-radius:0}.snail-layout.time-picker.pc>.main-area>.tz-item::-webkit-scrollbar-track{background:rgba(0,0,0,.1);border-radius:0}.snail-layout.time-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.time-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.time-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.time-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.time-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}.snail-layout.time-picker.pc.second-disabled{width:180px}.snail-layout.time-picker.pc.second-disabled>.main-area>.tz-item{width:46%}
+/* src:../../../../../01_snail/snail.js/packages/snail.vue/src/picker/components/date-pc.vue 	 index:0 */
+.snail-layout.date-picker.pc{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:4px;box-shadow:0 0 3px rgba(0,0,0,.12);height:300px!important;overflow:hidden!important;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:280px!important}.snail-layout.date-picker.pc.time-now:after{background-color:gray;content:"";height:100%;left:0;opacity:.6;position:absolute;top:0;width:100%}.snail-layout.date-picker.pc>.top-area{align-items:center;border-bottom:1px solid #eee;display:flex;flex-wrap:nowrap;padding:0 4px}.snail-layout.date-picker.pc>.top-area>svg{fill:#8a9099;flex-shrink:0}.snail-layout.date-picker.pc>.top-area>svg:hover{fill:#58a4fd}.snail-layout.date-picker.pc>.top-area>div.header-content{align-items:center;display:flex;flex:1;justify-content:center}.snail-layout.date-picker.pc>.top-area>div.header-content>div{align-items:center;display:flex;font-size:16px;height:100%}.snail-layout.date-picker.pc>.top-area>div.header-content>div:nth-child(2){margin-left:8px}.snail-layout.date-picker.pc>.top-area>div.header-content:not(.year)>div:hover{color:#58a4fd;cursor:pointer}.snail-layout.date-picker.pc>.main-area{display:flex;flex-wrap:wrap;justify-content:space-between}.snail-layout.date-picker.pc>.main-area>div{align-items:center;display:flex;flex-shrink:0;font-size:13px;justify-content:center;position:relative}.snail-layout.date-picker.pc>.main-area>div>span{align-items:center;display:flex;height:28px;justify-content:center}.snail-layout.date-picker.pc>.main-area>div>span:hover{background:#f4f4f4;cursor:pointer}.snail-layout.date-picker.pc>.main-area>div.active>span{background-color:#58a4fd;color:#fff!important}.snail-layout.date-picker.pc>.main-area>div.active.disabled{opacity:.6}.snail-layout.date-picker.pc>.main-area>div.disabled>span{color:#aaa;cursor:not-allowed}.snail-layout.date-picker.pc>.main-area>div.day-item{height:30px;width:36px}.snail-layout.date-picker.pc>.main-area>div.day-item.week{font-weight:bold}.snail-layout.date-picker.pc>.main-area>div.day-item.active>span,.snail-layout.date-picker.pc>.main-area>div.day-item:hover>span{border-radius:100%;width:28px}.snail-layout.date-picker.pc>.main-area>div.day-item:not(.now-month)>span{color:#aaa}.snail-layout.date-picker.pc>.main-area>div.month-item,.snail-layout.date-picker.pc>.main-area>div.year-item{width:30%}.snail-layout.date-picker.pc>.main-area>div.month-item.active>span,.snail-layout.date-picker.pc>.main-area>div.month-item:hover>span,.snail-layout.date-picker.pc>.main-area>div.year-item.active>span,.snail-layout.date-picker.pc>.main-area>div.year-item:hover>span{border-radius:15px;padding:0 8px;width:-moz-fit-content;width:fit-content}.snail-layout.date-picker.pc>.bottom-area{align-items:center;border-top:1px solid #eee;display:flex;height:30px;justify-content:flex-end;padding-right:10px}.snail-layout.date-picker.pc>.bottom-area>.time-area{color:#58a4fd;cursor:pointer;font-size:12px;margin-left:10px;margin-right:auto}.snail-layout.date-picker.pc>.bottom-area>.snail-button{color:#999;font-size:12px;margin-left:4px}.snail-layout.date-picker.pc>.bottom-area>.snail-button:hover,.snail-layout.date-picker.pc>.bottom-area>.snail-button:last-child{color:#58a4fd}.snail-layout.date-picker.pc>.bottom-area>.snail-button.disabled{cursor:not-allowed;opacity:.6}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/base/components/select-popup.vue 	 index:0 */
 .snail-select-popup{background:#fff;border:1px solid #dddfed;border-radius:4px;box-shadow:0 1px 5px 1px #dddfed;display:flex;flex-direction:column;max-height:90%;min-height:32px;overflow:auto}.snail-select-popup>div.snail-search{margin:12px}.snail-select-popup>div.clear-all{align-items:center;background-color:#fff;border-top:1px solid #dddfed;bottom:0;color:#8a9099;cursor:pointer;display:flex;flex-shrink:0;height:32px;padding:0 12px;position:sticky!important;z-index:1}.snail-select-popup>div.clear-all:hover{color:#ff4c4c}.snail-select-popup.child-popup{max-width:250px;min-width:200px;padding-bottom:6px;padding-top:6px}.snail-select-popup.child-popup.placeholder{justify-content:center;padding:0 12px;width:100px!important}
 /* src:../../../../../01_snail/snail.js/packages/snail.vue/src/container/components/action-items.vue 	 index:0 */

package/package.json

@@ -3,7 +3,7 @@
   "description": "依赖【snail】，基于vue封装常用UI组件",
   "author": "snail_dev@163.com",
   "license": "MIT",
-  "version": "2.0.21",
+  "version": "2.0.23",
   "type": "module",
   "main": "dist/snail.vue.js",
   "module": "dist/snail.vue.js",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "vue": "^3.5.14",
-    "snail.core": ">=2.0.29",
-    "snail.view": ">=2.0.7",
+    "snail.core": ">=2.0.30",
+    "snail.view": ">=2.0.11",
     "sortablejs": ">=1.15.6"
   },
   "devDependencies": {