@dt-frames/ui 2.0.15 → 2.0.17

package/es/components/tree/index.less

@@ -1,5 +1,5 @@
 .dt-tree-search{
-    padding: 10px;
+    padding: 0 4px 0 10px;
 
     & > i {
         width: 24px;
@@ -22,17 +22,58 @@
         overflow-y: auto;
         padding: 10px 0;
 
+        .ant-tree-treenode{
+            padding: 0;
+            align-items: center;
+            .ant-tree-switcher-icon{
+                line-height: 28px;
+            }
+        }
+
+        .ant-tree-checkbox {
+            margin-top: 0;
+        }
+
         .tree-title{
             font-size: 13px;
             position: relative;
             display: flex;
             align-items: center;
             width: 100%;
+            line-height: 28px;
             padding-right: 10px;
+            padding-left: 3px;
+            transition: all 0.2s;
+            svg {
+                width: 22px;
+                padding-right: 8px;
+                opacity: 0.7;
+            }
             &:hover .tree-action{
                 visibility: visible;
             }
+            &:hover{
+                background-color: @primary-color-hover;
+            }
         }
+
+        .anticon-file {
+            opacity: 0.6;
+            svg{
+                width: 12px;
+            }
+        }
+    }
+
+    .toolbar{
+        transition: color 0.2s;
+        &:hover{
+            color: @primary-color;
+        }
+    }
+
+    .dragging::after {
+        bottom: 0 !important;
     }
 
     .tree-action{
@@ -41,24 +82,55 @@
         top: 0;
         right: 3px;
         display: flex;
+        .i{
+            font-size: 16px;
+            width: 22px;
+            color: @primary-color;
+        }
     }
-}
 
-.dt-theme-middle .dt-tree .ant-spin-nested-loading{
-    .tree-title{
-        font-size: 13px;
+    .tree-active-node {
+        background-color: @primary-color-hover;
+        color: @primary-color;
     }
-}
 
-.dt-theme-large .dt-tree .ant-spin-nested-loading{
-    .tree-title{
-        font-size: 14px;
+    &-middle{
+        .ant-spin-nested-loading{
+            .ant-tree-treenode{
+                .ant-tree-switcher-icon{
+                    line-height: 32px;
+                }
+            }
+            .tree-title{
+                font-size: 13px;
+                line-height: 32px;
+            }
+        }
+    }
+
+    &-large{
+        .ant-spin-nested-loading{
+            .ant-tree-treenode{
+                .ant-tree-switcher-icon{
+                    line-height: 36px;
+                }
+            }
+            .tree-title{
+                font-size: 14px;
+                line-height: 36px;
+            }
+
+            .anticon-file {
+                svg{
+                    width: 13px;
+                }
+            }
+        }
     }
 }
 
 
 .dt-context-menu{
-    width: 156px;
     ul{
         margin: 0;
         list-style: none;
@@ -79,12 +151,15 @@
     li {
         display: inline-block;
         width: 100%;
-        height: 38px;
+        height: 34px;
         margin: 0 !important;
-        line-height: 38px;
+        line-height: 32px;
+        &.ant-menu-item{
+            height: 34px;
+        }
   
         span {
-            line-height: 38px;
+            line-height: 34px;
             font-size: 13px;
         }
 

package/es/components/tree/src/basicProps.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties, PropType } from "vue";
 import { Recordable } from "@dt-frames/core";
-import { KeyType, CheckKeys, FieldNames, TreeActionItem, TreeItem } from './type/tree';
+import { KeyType, CheckKeys, FieldNames, TreeItem } from './type/tree';
 import { Axis, ContextMenuItem } from "./type/menu";
 export declare const BasicProps: {
     defaultExpandLevel: {
@@ -9,10 +9,51 @@ export declare const BasicProps: {
     defaultExpandAll: {
         type: BooleanConstructor;
     };
+    height: {
+        type: PropType<String | Number>;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
     };
+    blockNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fieldNames: {
+        type: PropType<FieldNames>;
+        default: {
+            children: string;
+            title: string;
+            key: string;
+        };
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterTreeNode: {
+        type: PropType<(node: Recordable) => boolean>;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    activeKey: {
+        type: PropType<KeyType>;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -33,9 +74,6 @@ export declare const BasicProps: {
         type: PropType<CheckKeys>;
         default: () => any[];
     };
-    fieldNames: {
-        type: PropType<FieldNames>;
-    };
     beforeRightClick: {
         type: PropType<(...arg: any) => ContextMenuItem[]>;
         default: any;
@@ -50,9 +88,8 @@ export declare const BasicProps: {
         type: PropType<String | Boolean>;
         default: boolean;
     };
-    actionList: {
-        type: PropType<TreeActionItem[]>;
-        default: () => any[];
+    action: {
+        type: PropType<(record: Recordable) => any>;
     };
     clickRowToExpand: {
         type: BooleanConstructor;
@@ -66,10 +103,14 @@ export declare const BasicProps: {
         type: PropType<(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean>;
         default: any;
     };
-    checkable: BooleanConstructor;
-    expandOnSearch: BooleanConstructor;
-    checkOnSearch: BooleanConstructor;
-    selectedOnSearch: BooleanConstructor;
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandOnSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     treeData: {
         type: PropType<import("ant-design-vue/lib/tree").DataNode[]>;
     };
@@ -143,4 +184,7 @@ export declare const rightMenuProps: {
         type: PropType<ContextMenuItem[]>;
         default: () => any[];
     };
+    node: {
+        type: PropType<Recordable<any>>;
+    };
 };

package/es/components/tree/src/components/ContextMenu.d.ts

@@ -27,6 +27,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<ContextMenuItem[]>;
         default: () => any[];
     };
+    node: {
+        type: import("vue").PropType<import("@dt-frames/core").Recordable<any>>;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     width: {
         type: NumberConstructor;
@@ -54,6 +57,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<ContextMenuItem[]>;
         default: () => any[];
     };
+    node: {
+        type: import("vue").PropType<import("@dt-frames/core").Recordable<any>>;
+    };
 }>>, {
     showIcon: boolean;
     width: number;

package/es/components/tree/src/components/TreeHeader.d.ts

@@ -87,10 +87,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>> & {
     onSearch?: (...args: any[]) => any;
 }, {
-    checkable: boolean;
+    search: boolean;
     title: string;
+    checkable: boolean;
     toolbar: boolean;
-    search: boolean;
     searchText: string;
     checkAll: Function;
     expandAll: Function;

package/es/components/tree/src/hooks/useTree.d.ts

@@ -1,7 +1,7 @@
 import { ComputedRef, Ref } from "vue";
 import { FieldNames, TreeItem, KeyType, InsertNodeParams } from "../type/tree";
-import { TreeDataItem } from "ant-design-vue/lib/tree/Tree";
-export declare function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>): {
+import { TreeDataItem, AntTreeNodeDropEvent } from "ant-design-vue/es/tree/Tree";
+export declare function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames: ComputedRef<FieldNames>, emit: (event: string, ...args: any[]) => void): {
     getAllKeys: (list?: TreeDataItem[]) => KeyType[];
     getEnabledKeys: (list?: TreeDataItem[]) => KeyType[];
     getChildrenKeys: (nodeKey: string | number, list?: TreeDataItem[]) => KeyType[];
@@ -11,4 +11,5 @@ export declare function useTree(treeDataRef: Ref<TreeDataItem[]>, getFieldNames:
     insertNodesByKey: ({ parentKey, list, push }: InsertNodeParams) => void;
     deleteNodeByKey: (key: string, list?: TreeDataItem[]) => void;
     getSelectedNode: (key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) => TreeItem;
+    onDrop: (info: AntTreeNodeDropEvent) => void;
 };

package/es/components/tree/src/index.d.ts

@@ -8,10 +8,51 @@ declare const _sfc_main: import("vue").DefineComponent<{
     defaultExpandAll: {
         type: BooleanConstructor;
     };
+    height: {
+        type: import("vue").PropType<String | Number>;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
     };
+    blockNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fieldNames: {
+        type: import("vue").PropType<FieldNames>;
+        default: {
+            children: string;
+            title: string;
+            key: string;
+        };
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterTreeNode: {
+        type: import("vue").PropType<(node: Recordable<any>) => boolean>;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    activeKey: {
+        type: import("vue").PropType<KeyType>;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -32,9 +73,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<CheckKeys>;
         default: () => any[];
     };
-    fieldNames: {
-        type: import("vue").PropType<FieldNames>;
-    };
     beforeRightClick: {
         type: import("vue").PropType<(...arg: any) => import("./type/menu").ContextMenuItem[]>;
         default: any;
@@ -49,9 +87,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<String | Boolean>;
         default: boolean;
     };
-    actionList: {
-        type: import("vue").PropType<import("./type/tree").TreeActionItem[]>;
-        default: () => any[];
+    action: {
+        type: import("vue").PropType<(record: Recordable<any>) => any>;
     };
     clickRowToExpand: {
         type: BooleanConstructor;
@@ -65,10 +102,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean>;
         default: any;
     };
-    checkable: BooleanConstructor;
-    expandOnSearch: BooleanConstructor;
-    checkOnSearch: BooleanConstructor;
-    selectedOnSearch: BooleanConstructor;
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandOnSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     treeData: {
         type: import("vue").PropType<import("ant-design-vue/lib/tree").DataNode[]>;
     };
@@ -98,9 +139,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     }>, slot?: string, data?: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[];
-    extendSlots: (slots: Readonly<{
-        [name: string]: import("vue").Slot;
-    }>, excludeKeys?: string[]) => any;
+    getUiSize: import("vue").ComputedRef<import('../../../theme').UiSize>;
     props: any;
     attrs: {
         [x: string]: unknown;
@@ -108,7 +147,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     slots: Readonly<{
         [name: string]: import("vue").Slot;
     }>;
-    emit: (event: "update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "update:searchValue", ...args: any[]) => void;
+    emit: (event: "update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "drop" | "update:searchValue", ...args: any[]) => void;
+    activeKey: import("vue").Ref<KeyType>;
     state: {
         expandedKeys: KeyType[];
         selectedKeys: KeyType[];
@@ -6283,24 +6323,25 @@ declare const _sfc_main: import("vue").DefineComponent<{
     }>;
     getTreeData: import("vue").ComputedRef<TreeItem[]>;
     getNotFound: import("vue").ComputedRef<boolean>;
-    getIcon: (params: Recordable, icon?: string) => string;
+    getIcon: (params: Recordable, icon?: string) => string | JSX.Element;
     treeData: import("vue").ComputedRef<any>;
     getBindValues: import("vue").ComputedRef<any>;
     showTitle: import("vue").ComputedRef<string | true | import("vue").Slot>;
     handleClickNode: (key: string, children: TreeItem[], node: TreeItem) => void;
-    renderAction: (node: TreeItem) => JSX.Element[];
+    renderAction: (node: TreeItem) => JSX.Element;
     handleSearch: (searchValue: string) => void;
     createContextMenu: ((options: CreateContextOptions) => Promise<unknown>) | (() => void);
     handleRightClick: ({ event, node }: Recordable) => Promise<void>;
-    deleteNodeByKey: (key: string, list?: import("ant-design-vue/lib/tree").DataNode[]) => void;
+    deleteNodeByKey: (key: string, list?: import("ant-design-vue/es/tree").DataNode[]) => void;
     insertNodeByKey: ({ parentKey, node, push }: import("./type/tree").InsertNodeParams) => void;
     insertNodesByKey: ({ parentKey, list, push }: import("./type/tree").InsertNodeParams) => void;
-    filterByLevel: (level?: number, list?: import("ant-design-vue/lib/tree").DataNode[], currentLevel?: number) => string[] | number[];
-    updateNodeByKey: (key: string, node: import("ant-design-vue/lib/tree").DataNode, list?: import("ant-design-vue/lib/tree").DataNode[]) => void;
-    getAllKeys: (list?: import("ant-design-vue/lib/tree").DataNode[]) => KeyType[];
-    getChildrenKeys: (nodeKey: string | number, list?: import("ant-design-vue/lib/tree").DataNode[]) => KeyType[];
-    getEnabledKeys: (list?: import("ant-design-vue/lib/tree").DataNode[]) => KeyType[];
+    filterByLevel: (level?: number, list?: import("ant-design-vue/es/tree").DataNode[], currentLevel?: number) => string[] | number[];
+    updateNodeByKey: (key: string, node: import("ant-design-vue/es/tree").DataNode, list?: import("ant-design-vue/es/tree").DataNode[]) => void;
+    getAllKeys: (list?: import("ant-design-vue/es/tree").DataNode[]) => KeyType[];
+    getChildrenKeys: (nodeKey: string | number, list?: import("ant-design-vue/es/tree").DataNode[]) => KeyType[];
+    getEnabledKeys: (list?: import("ant-design-vue/es/tree").DataNode[]) => KeyType[];
     getSelectedNode: (key: KeyType, list?: TreeItem[], selectedNode?: TreeItem) => TreeItem;
+    onDrop: (info: import("ant-design-vue/es/tree").AntTreeNodeDropEvent) => void;
     setExpandedKeys: (keys: KeyType[]) => void;
     getExpandedKeys: () => KeyType[];
     setSelectedKeys: (keys: KeyType[]) => void;
@@ -6402,25 +6443,66 @@ declare const _sfc_main: import("vue").DefineComponent<{
     }>> & {
         onSearch?: (...args: any[]) => any;
     }, {
-        checkable: boolean;
+        search: boolean;
         title: string;
+        checkable: boolean;
         toolbar: boolean;
-        search: boolean;
         searchText: string;
         checkAll: Function;
         expandAll: Function;
     }>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "update:searchValue")[], "update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "update:searchValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "drop" | "update:searchValue")[], "update:expandedKeys" | "update:selectedKeys" | "update:value" | "check" | "change" | "clickNode" | "drop" | "update:searchValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     defaultExpandLevel: {
         type: StringConstructor;
     };
     defaultExpandAll: {
         type: BooleanConstructor;
     };
+    height: {
+        type: import("vue").PropType<String | Number>;
+    };
     showIcon: {
         type: BooleanConstructor;
         default: boolean;
     };
+    blockNode: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fieldNames: {
+        type: import("vue").PropType<FieldNames>;
+        default: {
+            children: string;
+            title: string;
+            key: string;
+        };
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    draggable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    filterTreeNode: {
+        type: import("vue").PropType<(node: Recordable<any>) => boolean>;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    selectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLine: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    activeKey: {
+        type: import("vue").PropType<KeyType>;
+    };
     loading: {
         type: BooleanConstructor;
         default: boolean;
@@ -6441,9 +6523,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<CheckKeys>;
         default: () => any[];
     };
-    fieldNames: {
-        type: import("vue").PropType<FieldNames>;
-    };
     beforeRightClick: {
         type: import("vue").PropType<(...arg: any) => import("./type/menu").ContextMenuItem[]>;
         default: any;
@@ -6458,9 +6537,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<String | Boolean>;
         default: boolean;
     };
-    actionList: {
-        type: import("vue").PropType<import("./type/tree").TreeActionItem[]>;
-        default: () => any[];
+    action: {
+        type: import("vue").PropType<(record: Recordable<any>) => any>;
     };
     clickRowToExpand: {
         type: BooleanConstructor;
@@ -6474,10 +6552,14 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: import("vue").PropType<(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean>;
         default: any;
     };
-    checkable: BooleanConstructor;
-    expandOnSearch: BooleanConstructor;
-    checkOnSearch: BooleanConstructor;
-    selectedOnSearch: BooleanConstructor;
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandOnSearch: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     treeData: {
         type: import("vue").PropType<import("ant-design-vue/lib/tree").DataNode[]>;
     };
@@ -6500,10 +6582,24 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onCheck?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     onClickNode?: (...args: any[]) => any;
+    onDrop?: (...args: any[]) => any;
     "onUpdate:searchValue"?: (...args: any[]) => any;
 }, {
+    search: boolean;
+    title: string;
     defaultExpandAll: boolean;
     showIcon: boolean;
+    blockNode: boolean;
+    fieldNames: {
+        children: string;
+        title: string;
+        key: string;
+    };
+    disabled: boolean;
+    draggable: boolean;
+    multiple: boolean;
+    selectable: boolean;
+    showLine: boolean;
     loading: boolean;
     checkStrictly: boolean;
     expandedKeys: KeyType[];
@@ -6511,16 +6607,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     checkedKeys: CheckKeys;
     beforeRightClick: (...arg: any) => import("./type/menu").ContextMenuItem[];
     highlight: String | Boolean;
-    actionList: import("./type/tree").TreeActionItem[];
     clickRowToExpand: boolean;
     searchValue: string;
     filterFn: (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean;
     checkable: boolean;
     expandOnSearch: boolean;
-    checkOnSearch: boolean;
-    selectedOnSearch: boolean;
-    title: string;
     toolbar: boolean;
-    search: boolean;
 }>;
 export default _sfc_main;

package/es/components/tree/src/type/menu.d.ts

@@ -1,3 +1,4 @@
+import { Recordable } from "@dt-frames/core";
 export interface Axis {
     x: number;
     y: number;
@@ -21,6 +22,7 @@ export interface CreateContextOptions {
     icon?: string;
     styles?: any;
     items?: ContextMenuItem[];
+    node?: Recordable;
 }
 export interface ContextMenuProps {
     event?: MouseEvent;
@@ -30,4 +32,5 @@ export interface ContextMenuProps {
     axis?: Axis;
     width?: number;
     showIcon?: boolean;
+    node?: Recordable;
 }

package/es/components/tree/src/type/tree.d.ts

@@ -12,7 +12,6 @@ export interface FieldNames {
 }
 export interface TreeActionItem {
     render: (record: Recordable) => any;
-    show?: boolean | ((record: Recordable) => boolean);
 }
 export interface TreeItem extends TreeDataItem {
     icon?: any;