snail.vue 1.0.32 → 1.0.35

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 { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
+import { IScope, RunResult, IAsyncScope } from 'snail.core';
 
 /**
  * loading提示框的配置选项
@@ -135,6 +135,109 @@ type InputEvents = {
     change: [value: string];
 };
 
+/**
+ * 树组件配置选项
+ */
+type TreeOptions<T> = {
+    /**
+     * 树节点
+     */
+    nodes: TreeNode<T>[];
+    /**
+     * 树节点的扩展配置
+     * - 用于对树节点做进一步控制
+     */
+    nodeExtend?: TreeNodeExtendOptions;
+};
+/**
+ * 树组件事件
+ */
+type TreeEvents<T> = {};
+/**
+ * 树节点
+ */
+type TreeNode<T> = {
+    /**
+     * 树节点 文本
+     */
+    text: string;
+    /**
+     * 节点类型
+     * - 用于外部构建插槽时做区分使用
+     */
+    type?: string;
+    /**
+     * 树节点附加数据
+     */
+    data?: T;
+    /**
+     * 是否可点击
+     * - true 此节点可点击，点击时触发 click 事件
+     * - false 此节点不可点击
+     */
+    clickable?: boolean;
+    /**
+     * 是否禁用
+     * - true：禁用此节点 禁用时不显示此节点及其子节点
+     */
+    disabled?: boolean;
+    /**
+     * 子节点 数据
+     */
+    children?: TreeNode<T>[];
+};
+/**
+ * 树节点 组件配置选项
+ */
+type TreeNodeOptions<T> = {
+    /**
+     * 树节点
+     */
+    node: TreeNode<T>;
+    /**
+     * 父节点
+     */
+    parent?: TreeNode<T>;
+    /**
+     * 节点层级
+     * - 从1开始
+     */
+    level: number;
+    /**
+     * 节点的扩展配置
+     * - 用于对树节点做进一步控制
+     */
+    extend?: TreeNodeExtendOptions;
+};
+/**
+ * 树节点事件
+ */
+type TreeNodeEvents<T> = {
+    /**
+     * 点击树节点
+     * - 节点 clickable 为 true 时，点击此节点时触发
+     * @param node 点击的树节点
+     * @param parent node 所属 父节点
+     */
+    click: [node: TreeNode<T>, parent?: TreeNode<T>];
+};
+/**
+ * 树节点扩展配置选项
+ */
+type TreeNodeExtendOptions = {
+    /**
+     * 是否禁用【折叠】子节点操作
+     * - true 时禁用 折叠操作
+     */
+    foldDisabled?: boolean;
+    /**
+     * 重写树节点
+     * - true 时，插槽作为完整树节点对象；
+     * - false 时，插槽仅作为扩展元素，如自定义操作等
+     */
+    rewrite?: boolean;
+};
+
 /**
  * 滚动视图配置选项
  */
@@ -300,6 +403,30 @@ type SwitchEvents = {
     change: [value: boolean];
 };
 
+/**
+ * 搜索组件配置选项
+ */
+type SearchOptions = {
+    /**
+     * 是否为只读模式
+     */
+    readonly?: boolean;
+    /**
+     * 搜索提示语
+     */
+    placeholder?: string;
+};
+/**
+ * 搜索组件事件
+ */
+type SearchEvents = {
+    /**
+     * 事件：执行搜索
+     * @param value 为搜索文本
+     */
+    search: [value: string];
+};
+
 /**
  * 图标配置选项
  * - 后续支持外部直接传入svg路径，这样实现更细粒度的控制
@@ -309,10 +436,18 @@ type IconOptions = {
      * 图标类型
      */
     type: IconType;
+    /**
+     * 标题，鼠标移上去时的提示
+     */
+    title?: string;
     /**
      * 图标颜色
      */
     color?: string;
+    /**
+     * 鼠标移入时的图标颜色
+     */
+    hoverColor?: string;
     /**
      * 图标大小：默认24
      */
@@ -321,8 +456,9 @@ type IconOptions = {
      * 图标绘制路径
      * - 等效 svg-path的d属性
      * - 仅在type为 custom 时生效
+     * - 若为数组，则表示多条绘制路径
      */
-    draw?: string;
+    draw?: string | string[];
 };
 /**
  * 图标类型
@@ -330,22 +466,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 +560,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[]];
+};
+
 /**
  * 按钮配置选项
  */
@@ -471,7 +655,7 @@ 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;
@@ -486,11 +670,17 @@ interface IReactiveManager {
      * @param delay 延迟时间，单位ms；不传则不延迟
      * @returns 任务自身
      */
-    load<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>>;
+    /**
+     * 监听器：监听单个值变化
+     * - 内部利用vue的watch逻辑实现
+     * - 自动进行生命周期管理，作用域销毁时自动清理watch监听
+     * - 仅实现简化版本watch监听；复杂的监听逻辑，自行使用watch方法
+     * @param source 监听源
+     * @param callback 回调方法：可接收新旧值变化
+     * @returns 监听作用域，destroy可销毁监听
+     */
+    watcher<T>(source: WatchSource<T>, callback: (newValue: T, oldValue: T) => void): IScope;
 }
 /**
  * 响应式变量
@@ -526,12 +716,77 @@ declare function triggerAppCreated(app: App): App;
  */
 
 /**
- * 基于类型获取Svg图标信息
+ * 基于类型获取Svg图标绘制路径
  * @param type 图标类型
  * @param color 填充颜色，不传入则使用默认的
- * @returns 图标路径信息
+ * @returns 图标路径
+ */
+declare function getSvgDraw(options: IconOptions): string[];
+
+/**
+ * 排序组件 配置选项
+ * - 整理部分SortableJs中的配置，不分逻辑不开放
+ */
+type SortOptions<T> = {
+    /**
+     * 变化器
+     * - 在此元素值发生变化时，重新刷新排序面板
+     * - 如在增加元素时，改变此值实现 新元素 可拖拽排序
+     */
+    changer: T;
+    /**
+     * 是否禁用排序
+     * - true 不支持排序
+     */
+    disabled?: boolean;
+    /**
+     * 拖动哪个元素
+     * - 传入类样式选择器；如 .table-row
+     */
+    draggable: string;
+    /**
+     * 哪个元素启动拖拽
+     * - 传入类样式选择器；如 .sort-handle
+     * - 不传入则默认 draggable
+     * - 若自定义，则传入 draggable 下的dom元素作为启动拖拽的句柄
+     */
+    handle?: string;
+    /**
+     * 拖动的元素上增加的类样式
+     * - 执行拖拽时随着鼠标移动元素，脱离文档流了
+     * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
+     * - 默认：snail-sort-drag
+     */
+    dragClass?: string;
+    /**
+     * 幽灵元素类样式名称
+     * - 拖动时在面板上占位的元素
+     * - 默认：snail-sort-ghost
+     */
+    ghostClass?: string;
+    /**
+     * 排序组
+     * - 组相同时，可跨组拖拽排序
+     * - 不传入，则内部生成guid
+     */
+    group?: string;
+    /**
+     * 动画时间
+     * - 单位ms；默认150ms
+     */
+    animation?: number;
+};
+/**
+ * 排序组件 事件
  */
-declare function getSvgIcon(options: IconOptions): IconPathOptions;
+type SortEvents = {
+    /**
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
+     */
+    update: [oldIndex: number, newIndex: number];
+};
 
 /**
  * 挂载vue组件
@@ -822,6 +1077,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;
@@ -882,6 +1160,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, {
@@ -968,6 +1257,60 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Sort: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
+            changer: any;
+            disabled?: boolean;
+            draggable: string;
+            handle?: string;
+            dragClass?: string;
+            ghostClass?: string;
+            group?: string;
+            animation?: number;
+        }> & Readonly<{
+            onUpdate?: (oldIndex: number, newIndex: number) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            update: (oldIndex: number, newIndex: number) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            changer: any;
+            disabled?: boolean;
+            draggable: string;
+            handle?: string;
+            dragClass?: string;
+            ghostClass?: string;
+            group?: string;
+            animation?: number;
+        }> & Readonly<{
+            onUpdate?: (oldIndex: number, newIndex: number) => any;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<{
+        changer: any;
+        disabled?: boolean;
+        draggable: string;
+        handle?: string;
+        dragClass?: string;
+        ghostClass?: string;
+        group?: string;
+        animation?: number;
+    }> & Readonly<{
+        onUpdate?: (oldIndex: number, newIndex: number) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        update: (oldIndex: number, newIndex: number) => any;
+    }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
+        $slots: {
+            default?: (props: {}) => any;
+        };
+    });
     Table: {
         new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<TableOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, true, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
             P: {};
@@ -1023,6 +1366,42 @@ declare const components: {
             default?: (props: {}) => any;
         };
     });
+    Tree: {
+        new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
+            nodes: TreeNode<any>[];
+            nodeExtend?: TreeNodeExtendOptions;
+        }> & Readonly<{
+            onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+            click: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            nodes: TreeNode<any>[];
+            nodeExtend?: TreeNodeExtendOptions;
+        }> & Readonly<{
+            onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & vue.ComponentOptionsBase<Readonly<{
+        nodes: TreeNode<any>[];
+        nodeExtend?: TreeNodeExtendOptions;
+    }> & Readonly<{
+        onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+    }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+        click: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+    }, 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, {
@@ -1077,5 +1456,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, ReactiveVar, 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, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtendOptions, TreeNodeOptions, TreeOptions };