@dt-frames/ui 2.0.14 → 2.0.16

package/es/components/tree/index.less

@@ -1,5 +1,5 @@
 .dt-tree-search{
-    padding: 10px;
+    padding: 0 4px 0 10px;
 
     & > i {
         width: 24px;
@@ -22,43 +22,102 @@
         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;
+            }
+        }
+    }
+
+    .toolbar{
+        transition: color 0.2s;
+        &:hover{
+            color: @primary-color;
         }
     }
 
+    .dragging::after {
+        bottom: 0 !important;
+    }
+
     .tree-action{
         visibility: hidden;
         position: absolute;
         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;
+    }
+
+    &-middle{
+        .ant-spin-nested-loading{
+            .ant-tree-treenode{
+                .ant-tree-switcher-icon{
+                    line-height: 32px;
+                }
+            }
+            .tree-title{
+                font-size: 13px;
+                line-height: 32px;
+            }
+        }
     }
-}
 
-.dt-theme-large .dt-tree .ant-spin-nested-loading{
-    .tree-title{
-        font-size: 14px;
+    &-large{
+        .ant-spin-nested-loading{
+            .ant-tree-treenode{
+                .ant-tree-switcher-icon{
+                    line-height: 36px;
+                }
+            }
+            .tree-title{
+                font-size: 14px;
+                line-height: 36px;
+            }
+        }
     }
 }
 
 
 .dt-context-menu{
-    width: 156px;
     ul{
         margin: 0;
         list-style: none;
@@ -79,12 +138,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

@@ -13,6 +13,44 @@ export declare const BasicProps: {
         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 +71,6 @@ export declare const BasicProps: {
         type: PropType<CheckKeys>;
         default: () => any[];
     };
-    fieldNames: {
-        type: PropType<FieldNames>;
-    };
     beforeRightClick: {
         type: PropType<(...arg: any) => ContextMenuItem[]>;
         default: any;
@@ -66,10 +101,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[]>;
     };

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

@@ -12,6 +12,44 @@ declare const _sfc_main: import("vue").DefineComponent<{
         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 +70,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;
@@ -65,10 +100,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[]>;
     };
@@ -101,6 +140,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     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 +148,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,7 +6324,7 @@ 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>;
@@ -6292,15 +6333,16 @@ declare const _sfc_main: import("vue").DefineComponent<{
     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,15 +6444,15 @@ 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;
     };
@@ -6421,6 +6463,44 @@ declare const _sfc_main: import("vue").DefineComponent<{
         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 +6521,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;
@@ -6474,10 +6551,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 +6581,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[];
@@ -6517,10 +6612,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
     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;