snail.vue 2.0.22 → 2.0.24

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, CSSClassOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
 
@@ -439,7 +439,7 @@ type ScrollEvents = {
 /**
  * 包裹组件 相关实体
  */
-type WrapperOptions = ReadonlyOptions & {
+type WrapperOptions = {
     /**
      * 是否是弹窗模式
      */
@@ -448,18 +448,18 @@ type WrapperOptions = ReadonlyOptions & {
      * Header组件配置
      * - 不传入，则不需要 Header组件
      */
-    header?: HeaderOptions & DisabledOptions;
+    header?: Partial<HeaderOptions> & DisabledOptions & CSSClassOptions;
     /**
      * 内容组件配置
      * - 滚动相关配置
      * - 不传入则无需滚动
      */
-    content?: ScrollOptions;
+    content?: ScrollOptions & CSSClassOptions;
     /**
      * Footer组件配置
      * - 不传入，则不需要 Footer 组件
      */
-    footer?: FooterOptions & DisabledOptions;
+    footer?: FooterOptions & DisabledOptions & CSSClassOptions;
 };
 /**
  * 包裹组件 事件
@@ -1061,12 +1061,7 @@ type LayoutOptions = {
 /**
  * 布局组件子区域 配置选项
  */
-type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & {
-    /**
-     * 子区域自定义类样式
-     * - 多个类样式，使用“ ”隔开
-     */
-    class?: string;
+type LayoutAraeOptions<Style extends WidthStyle | HeightStyle | void> = Style & CSSClassOptions & {
     /**
      * 滚动视图配置
      * - 视图属性：滚动条大小、显示时机
@@ -1086,7 +1081,7 @@ type LayoutAreaItem = {
     /**
      * 内容区域元素的类样式名
      */
-    class: string;
+    class: string[];
     /**
      * css样式
      */
@@ -1155,6 +1150,16 @@ type FoldOptions = DisabledOptions & TitleOptions & {
      * - 跟随在title后
      */
     subtitle?: string;
+    /**
+     * 面板头部区域配置
+     * - 如指定特定的css式
+     */
+    header?: CSSClassOptions;
+    /**
+     * 面板内容区域配置
+     * - 如指定特定的css样式
+     */
+    body?: CSSClassOptions;
 };
 /**
  * 折叠状态
@@ -1162,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;
+};
 /**
  * 折叠面板事件
  */
@@ -1976,8 +2002,9 @@ type ButtonOptions = TitleOptions & {
 
 /**
  * 可操作项组件 的配置选项
+ * - disabled 为true时，不响应操作项触发
  */
-type ActionOptions = {
+type ActionOptions = DisabledOptions & {
     /**
      * 触发方式
      *  - hover：鼠标移入显示
@@ -2453,6 +2480,11 @@ type PopupDescriptor<Options extends PopupOptions, ExtOptions> = PopupStatusOpti
  * @see ComponentBindOptions 了解 Props、Model 泛型参数的含义
  */
 type DialogOptions<Props = void, Model = void> = PopupOptions<Props, Model> & {
+    /**
+     * 包裹器配置
+     * - 若传入配置，则启用弹窗包裹；弹窗打开时使用`Wrapper`包裹弹窗内容组件
+     */
+    wrapper?: Pick<WrapperOptions, "header" | "content" | "footer">;
     /**
      * 禁用【遮罩层】
      * - 目前没实现，先忽略
@@ -2481,9 +2513,21 @@ type DialogHandle<T> = PopupHandle<T> & {
     /**
      * 注册监听【弹窗关闭】事件方法
      * - 仅支持注册一次，多次注册以最后一次的为准
-     * @param fn 关闭时执行的钩子函数，支持异步，返回false时将阻止弹窗关闭
+     * @param fn 关闭时执行的钩子函数，支持异步；；调用后若返回false时将阻止弹窗关闭
+     */
+    onBeforeClose(fn: (data?: T) => false | undefined | Promise<false | undefined>): void;
+};
+/**
+ * 弹窗包裹器操作句柄
+ */
+type DialogWrapperHandle<T> = {
+    /**
+     * 注册【构建数据】事件方法
+     * - 仅在Dialog为使用了wrapper模式时生效，用于在【确认】按钮点击时，构建实际内容组件中的数据
+     * - 仅支持注册一次，多次注册以最后一次的为准
+     * @param fn 取数据时执行的钩子函数，支持异步；若需要阻止弹窗关闭则`fn`方法直接报错即可
      */
-    onBeforeClose(fn: () => false | undefined | Promise<false | undefined>): void;
+    onBuildData(fn: () => T | Promise<T>): void;
 };
 
 /**
@@ -3161,6 +3205,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<{
@@ -3178,6 +3224,8 @@ declare const components: {
             Defaults: {};
         }, Readonly<DisabledOptions & TitleOptions & {
             subtitle?: string;
+            header?: snail_view.CSSClassOptions;
+            body?: snail_view.CSSClassOptions;
         } & {
             status?: FoldStatus;
         }> & Readonly<{
@@ -3189,6 +3237,8 @@ declare const components: {
         __isSuspense?: never;
     } & vue.ComponentOptionsBase<Readonly<DisabledOptions & TitleOptions & {
         subtitle?: string;
+        header?: snail_view.CSSClassOptions;
+        body?: snail_view.CSSClassOptions;
     } & {
         status?: FoldStatus;
     }> & Readonly<{
@@ -3199,9 +3249,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: {
@@ -3612,4 +3670,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, DialogWrapperHandle, 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 };