snail.vue 1.0.31 → 1.0.33

package/dist/snail.vue.d.ts

@@ -1,8 +1,8 @@
 import * as snail_view from 'snail.view';
-import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle } from 'snail.view';
+import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
 import * as vue from 'vue';
 import { Component, ShallowRef, Ref, App } from 'vue';
-import { IScope, IAsyncScope } from 'snail.core';
+import { IScope, RunResult, IAsyncScope } from 'snail.core';
 
 /**
  * loading提示框的配置选项
@@ -135,6 +135,83 @@ type InputEvents = {
     change: [value: string];
 };
 
+/**
+ * 树组件配置选项
+ */
+type TreeOptions<T> = {
+    /**
+     * 树节点
+     */
+    nodes: TreeNode<T>[];
+    /**
+     * 树节点的扩展配置
+     * - 用于对树节点做进一步控制
+     */
+    nodeExtend?: TreeNodeExtendOptions;
+};
+/**
+ * 树节点
+ */
+type TreeNode<T> = {
+    /**
+     * 树节点 文本
+     */
+    text: string;
+    /**
+     * 节点类型
+     * - 用于外部构建插槽时做区分使用
+     */
+    type?: string;
+    /**
+     * 树节点附加数据
+     */
+    data?: T;
+    /**
+     * 是否禁用
+     * - true：禁用此节点 禁用时不显示此节点及其子节点
+     */
+    disabled?: boolean;
+    /**
+     * 子节点 数据
+     */
+    children?: TreeNode<T>[];
+};
+/**
+ * 树节点 组件配置选项
+ */
+type TreeNodeOptions<T> = {
+    /**
+     * 树节点
+     */
+    node: TreeNode<T>;
+    /**
+     * 节点层级
+     * - 从1开始
+     */
+    level: number;
+    /**
+     * 节点的扩展配置
+     * - 用于对树节点做进一步控制
+     */
+    extend?: TreeNodeExtendOptions;
+};
+/**
+ * 树节点扩展配置选项
+ */
+type TreeNodeExtendOptions = {
+    /**
+     * 是否禁用【折叠】子节点操作
+     * - true 时禁用 折叠操作
+     */
+    foldDisabled?: boolean;
+    /**
+     * 重写树节点
+     * - true 时，插槽作为完整树节点对象；
+     * - false 时，插槽仅作为扩展元素，如自定义操作等
+     */
+    rewrite?: boolean;
+};
+
 /**
  * 滚动视图配置选项
  */
@@ -300,6 +377,30 @@ type SwitchEvents = {
     change: [value: boolean];
 };
 
+/**
+ * 搜索组件配置选项
+ */
+type SearchOptions = {
+    /**
+     * 是否为只读模式
+     */
+    readonly?: boolean;
+    /**
+     * 搜索提示语
+     */
+    placeholder?: string;
+};
+/**
+ * 搜索组件事件
+ */
+type SearchEvents = {
+    /**
+     * 事件：执行搜索
+     * @param value 为搜索文本
+     */
+    search: [value: string];
+};
+
 /**
  * 图标配置选项
  * - 后续支持外部直接传入svg路径，这样实现更细粒度的控制
@@ -313,6 +414,10 @@ type IconOptions = {
      * 图标颜色
      */
     color?: string;
+    /**
+     * 鼠标移入时的图标颜色
+     */
+    hoverColor?: string;
     /**
      * 图标大小：默认24
      */
@@ -321,8 +426,9 @@ type IconOptions = {
      * 图标绘制路径
      * - 等效 svg-path的d属性
      * - 仅在type为 custom 时生效
+     * - 若为数组，则表示多条绘制路径
      */
-    draw?: string;
+    draw?: string | string[];
 };
 /**
  * 图标类型
@@ -330,22 +436,11 @@ type IconOptions = {
  * - close 关闭 用作数据删除，弹窗关闭
  * - error 错误
  * - warn 警告图标
+ * - trash 垃圾桶图标，常用于【删除】操作
+ * - grip   紧握图标，垂直方向，一般用于拖动句柄
  * - custom 自定义图标：此时IconOptions.draw属性传入绘制路径
  */
-type IconType = "success" | "close" | "error" | "warn" | "custom";
-/**
- * 图标路径配置选项
- */
-type IconPathOptions = {
-    /**
-     * 绘制路径
-     */
-    d: string;
-    /**
-     * 填充颜色
-     */
-    fill?: string;
-};
+type IconType = "success" | "close" | "error" | "warn" | "trash" | "grip" | "custom";
 
 /**
  * 头部配置选项
@@ -435,6 +530,65 @@ type FooterEvents = {
     confirm: [];
 };
 
+/**
+ * 检查选项 数据结构
+ */
+
+/**
+ * 选择 组件配置选项
+ */
+type ChooseOptions<T> = {
+    /**
+     * 是否为多选模式
+     * - true 多选模式，可以选中items中多个选项
+     * - false 单选模式，只能选中items中的一个选项
+     */
+    multi?: boolean;
+    /**
+     * 选项类型
+     * - radio:     单选框样式
+     * - checkbox:  多选框样式
+     */
+    type: "checkbox" | "radio";
+    /**
+     * 是否是只读模式
+     */
+    readonly?: boolean;
+    /**
+     * 待选项目
+     * text 可不传入
+     */
+    items: ChooseItem<T>[];
+    /**
+     * 选项自定义样式
+     * - 可指定选项宽度、高度、外边距
+     */
+    itemStyle?: WidthStyle & HeightStyle & MarginStyle;
+};
+/**
+ * 选择项
+ */
+type ChooseItem<T> = {
+    /**
+     * 选项文本
+     */
+    text?: string;
+    /**
+     * 选项值
+     */
+    value: any;
+};
+/**
+ * 选择 组件事件
+ */
+type ChooseEvents<T> = {
+    /**
+     * 值改变 事件
+     * - values 为当前选中值；单选时为单个值，多选时为值数组
+     */
+    change: [values: T | T[]];
+};
+
 /**
  * 按钮配置选项
  */
@@ -461,7 +615,7 @@ type ButtonOptions = {
  */
 interface IReactiveManager {
     /**
-     * 【过渡】变量值
+     * 响应式【过渡】变量值
      * - 通过设置 rv.value 的值来实现.value值过渡
      * - 执行顺序 from、to
      * - 开始时，设置 rv.value 值为 from；延迟time时间后，强制销毁scope
@@ -471,12 +625,12 @@ interface IReactiveManager {
      * @param time 过渡持续时间，到时间后销毁作用域
      * @returns 作用域对象，可销毁【值过渡】效果
      */
-    transition<T>(rv: ShallowRef<T> | Ref<T>, effect: {
+    transition<T>(rv: ReactiveVar<T>, effect: {
         from: T;
         to: T;
     }, time: number): IScope;
     /**
-     * 【任务】响应式
+     * 响应式【加载】任务
      * - 任务运行时，设置loading.value=true
      * - 任务完成后，设置loading.value=false
      * - 可通过delay值，延迟执行 loading.value=false 操作
@@ -486,12 +640,12 @@ interface IReactiveManager {
      * @param delay 延迟时间，单位ms；不传则不延迟
      * @returns 任务自身
      */
-    task<T, E>(task: Promise<T>, loading: ShallowRef<boolean> | Ref<boolean>, delay: number): Promise<{
-        success: boolean;
-        data?: T;
-        error?: E;
-    }>;
+    load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
 }
+/**
+ * 响应式变量
+ */
+type ReactiveVar<T> = ShallowRef<T> | Ref<T>;
 
 /**
  * 使用【响应式管理器】
@@ -522,12 +676,12 @@ declare function triggerAppCreated(app: App): App;
  */
 
 /**
- * 基于类型获取Svg图标信息
+ * 基于类型获取Svg图标绘制路径
  * @param type 图标类型
  * @param color 填充颜色，不传入则使用默认的
- * @returns 图标路径信息
+ * @returns 图标路径
  */
-declare function getSvgIcon(options: IconOptions): IconPathOptions;
+declare function getSvgDraw(options: IconOptions): string[];
 
 /**
  * 挂载vue组件
@@ -818,6 +972,29 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Choose: vue.DefineComponent<{
+        multi?: boolean;
+        type: "checkbox" | "radio";
+        readonly?: boolean;
+        items: ChooseItem<any>[];
+        itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
+    } & {
+        modelValue?: any | any[];
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        change: (values: any) => any;
+        "update:modelValue": (value: any) => any;
+    }, string, vue.PublicProps, Readonly<{
+        multi?: boolean;
+        type: "checkbox" | "radio";
+        readonly?: boolean;
+        items: ChooseItem<any>[];
+        itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
+    } & {
+        modelValue?: any | any[];
+    }> & Readonly<{
+        onChange?: (values: any) => any;
+        "onUpdate:modelValue"?: (value: any) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
     Footer: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FooterOptions> & Readonly<{
             onCancel?: () => any;
@@ -878,6 +1055,17 @@ declare const components: {
         };
     });
     Icon: vue.DefineComponent<IconOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+    Search: vue.DefineComponent<SearchOptions & {
+        modelValue?: string;
+    }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        search: (value: string) => any;
+        "update:modelValue": (value: string) => any;
+    }, string, vue.PublicProps, Readonly<SearchOptions & {
+        modelValue?: string;
+    }> & Readonly<{
+        onSearch?: (value: string) => any;
+        "onUpdate:modelValue"?: (value: string) => any;
+    }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
     Switch: vue.DefineComponent<SwitchOptions & {
         modelValue?: boolean;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -1019,6 +1207,32 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Tree: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
+            nodes: TreeNode<any>[];
+            nodeExtend?: TreeNodeExtendOptions;
+        }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            nodes: TreeNode<any>[];
+            nodeExtend?: TreeNodeExtendOptions;
+        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<{
+        nodes: TreeNode<any>[];
+        nodeExtend?: TreeNodeExtendOptions;
+    }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: any) => any;
+        };
+    });
     Input: vue.DefineComponent<InputOptions & {
         modelValue?: string;
     }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -1073,5 +1287,5 @@ declare const components: {
     });
 };
 
-export { components, getSvgIcon, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
-export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconPathOptions, IconType, InputEvents, InputOptions, LoadingOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ScrollEvents, ScrollOptions, ScrollTouchType, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions };
+export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
+export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ReactiveVar, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions, TreeNode, TreeNodeExtendOptions, TreeNodeOptions, TreeOptions };