snail.vue 1.0.33 → 1.0.35

package/dist/snail.vue.d.ts

@@ -1,7 +1,7 @@
 import * as snail_view 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 { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
 import { IScope, RunResult, IAsyncScope } from 'snail.core';
 
 /**
@@ -149,6 +149,10 @@ type TreeOptions<T> = {
      */
     nodeExtend?: TreeNodeExtendOptions;
 };
+/**
+ * 树组件事件
+ */
+type TreeEvents<T> = {};
 /**
  * 树节点
  */
@@ -166,6 +170,12 @@ type TreeNode<T> = {
      * 树节点附加数据
      */
     data?: T;
+    /**
+     * 是否可点击
+     * - true 此节点可点击，点击时触发 click 事件
+     * - false 此节点不可点击
+     */
+    clickable?: boolean;
     /**
      * 是否禁用
      * - true：禁用此节点 禁用时不显示此节点及其子节点
@@ -184,6 +194,10 @@ type TreeNodeOptions<T> = {
      * 树节点
      */
     node: TreeNode<T>;
+    /**
+     * 父节点
+     */
+    parent?: TreeNode<T>;
     /**
      * 节点层级
      * - 从1开始
@@ -195,6 +209,18 @@ type TreeNodeOptions<T> = {
      */
     extend?: TreeNodeExtendOptions;
 };
+/**
+ * 树节点事件
+ */
+type TreeNodeEvents<T> = {
+    /**
+     * 点击树节点
+     * - 节点 clickable 为 true 时，点击此节点时触发
+     * @param node 点击的树节点
+     * @param parent node 所属 父节点
+     */
+    click: [node: TreeNode<T>, parent?: TreeNode<T>];
+};
 /**
  * 树节点扩展配置选项
  */
@@ -410,6 +436,10 @@ type IconOptions = {
      * 图标类型
      */
     type: IconType;
+    /**
+     * 标题，鼠标移上去时的提示
+     */
+    title?: string;
     /**
      * 图标颜色
      */
@@ -641,6 +671,16 @@ interface IReactiveManager {
      * @returns 任务自身
      */
     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;
 }
 /**
  * 响应式变量
@@ -683,6 +723,71 @@ declare function triggerAppCreated(app: App): App;
  */
 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;
+};
+/**
+ * 排序组件 事件
+ */
+type SortEvents = {
+    /**
+     * 元素排序顺序变化
+     * @param oldIndex 旧位置索引值
+     * @param newIndex 新顺序索引值
+     */
+    update: [oldIndex: number, newIndex: number];
+};
+
 /**
  * 挂载vue组件
  * - 全新创建一个Vue实例挂载的传入组件
@@ -1152,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: {};
@@ -1211,7 +1370,11 @@ declare const components: {
         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, {
+        }> & 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: {};
@@ -1221,14 +1384,20 @@ declare const components: {
         }, Readonly<{
             nodes: TreeNode<any>[];
             nodeExtend?: TreeNodeExtendOptions;
-        }> & Readonly<{}>, {}, {}, {}, {}, {}>;
+        }> & Readonly<{
+            onClick?: (node: TreeNode<any>, parent?: TreeNode<any>) => any;
+        }>, {}, {}, {}, {}, {}>;
         __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 () => {
+    }> & 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;
         };
@@ -1288,4 +1457,4 @@ declare const components: {
 };
 
 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 };
+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 };