@dt-frames/ui 2.0.4 → 2.0.6

package/es/components/tree/index.less

@@ -0,0 +1,119 @@
+.dt-tree-search{
+    padding: 10px;
+
+    & > i {
+        width: 24px;
+    }
+
+    input.ant-input-sm{
+        font-size: 12px;
+        height: 28px;
+    }
+}
+
+.dt-tree-header{
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.dt-tree{
+    background: #fff;
+    .ant-spin-nested-loading{
+        flex: 1;
+        overflow-y: auto;
+        padding: 10px 0;
+
+        .tree-title{
+            font-size: 13px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            padding-right: 10px;
+            &:hover .tree-action{
+                visibility: visible;
+            }
+        }
+    }
+
+    .tree-action{
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        right: 3px;
+        display: flex;
+    }
+}
+
+.dt-theme-middle .dt-tree .ant-spin-nested-loading{
+    .tree-title{
+        font-size: 13px;
+    }
+}
+
+.dt-theme-large .dt-tree .ant-spin-nested-loading{
+    .tree-title{
+        font-size: 14px;
+    }
+}
+
+
+.dt-context-menu{
+    width: 156px;
+    ul{
+        margin: 0;
+        list-style: none;
+        background-color: #fff;
+        border: 1px solid rgb(0 0 0 / 8%);
+        border-radius: 0.25rem;
+        box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+          0 1px 5px 0 rgb(0 0 0 / 6%) !important;
+        background-clip: padding-box;
+        user-select: none;
+    }
+
+
+    &__item {
+        margin: 0 !important;
+    }
+
+    li {
+        display: inline-block;
+        width: 100%;
+        height: 38px;
+        margin: 0 !important;
+        line-height: 38px;
+  
+        span {
+            line-height: 38px;
+            font-size: 13px;
+        }
+
+        i{
+            font-size: 18px;
+        }
+  
+        > div {
+            margin: 0 !important;
+        }
+  
+        &:not(.ant-menu-item-disabled):hover {
+            color: #333;
+            background-color: #f5f5f5;
+        }
+    }
+
+    .ant-divider {
+        margin: 0;
+    }
+  
+    &__popup {
+        .ant-divider {
+          margin: 0;
+        }
+    }
+  
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+        padding: 0 !important;
+    }
+}

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

@@ -0,0 +1,146 @@
+import { CSSProperties, PropType } from "vue";
+import { Recordable } from "@dt-frames/core";
+import { KeyType, CheckKeys, FieldNames, TreeActionItem, TreeItem } from './type/tree';
+import { Axis, ContextMenuItem } from "./type/menu";
+export declare const BasicProps: {
+    defaultExpandLevel: {
+        type: StringConstructor;
+    };
+    defaultExpandAll: {
+        type: BooleanConstructor;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkStrictly: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    expandedKeys: {
+        type: PropType<KeyType[]>;
+        default: () => any[];
+    };
+    selectedKeys: {
+        type: PropType<KeyType[]>;
+        default: () => any[];
+    };
+    checkedKeys: {
+        type: PropType<CheckKeys>;
+        default: () => any[];
+    };
+    fieldNames: {
+        type: PropType<FieldNames>;
+    };
+    beforeRightClick: {
+        type: PropType<(...arg: any) => ContextMenuItem[]>;
+        default: any;
+    };
+    rightMenuList: {
+        type: PropType<ContextMenuItem[]>;
+    };
+    renderIcon: {
+        type: PropType<(params: Recordable) => string>;
+    };
+    highlight: {
+        type: PropType<String | Boolean>;
+        default: boolean;
+    };
+    actionList: {
+        type: PropType<TreeActionItem[]>;
+        default: () => any[];
+    };
+    clickRowToExpand: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    filterFn: {
+        type: PropType<(searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean>;
+        default: any;
+    };
+    checkable: BooleanConstructor;
+    expandOnSearch: BooleanConstructor;
+    checkOnSearch: BooleanConstructor;
+    selectedOnSearch: BooleanConstructor;
+    treeData: {
+        type: PropType<import("ant-design-vue/lib/tree").DataNode[]>;
+    };
+    value: {
+        type: PropType<KeyType[] | CheckKeys>;
+    };
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbar: BooleanConstructor;
+    search: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};
+export declare const searchProps: {
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    search: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchText: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+    expandAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+};
+export declare const rightMenuProps: {
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    customEvent: {
+        type: PropType<Event>;
+        default: any;
+    };
+    styles: {
+        type: PropType<CSSProperties>;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    axis: {
+        type: PropType<Axis>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    items: {
+        type: PropType<ContextMenuItem[]>;
+        default: () => any[];
+    };
+};

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

@@ -0,0 +1,64 @@
+import { CSSProperties } from 'vue';
+import { ContextMenuItem } from '../type/menu';
+declare const _sfc_main: import("vue").DefineComponent<{
+    width: {
+        type: NumberConstructor;
+        default: number;
+    };
+    customEvent: {
+        type: import("vue").PropType<Event>;
+        default: any;
+    };
+    styles: {
+        type: import("vue").PropType<CSSProperties>;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    axis: {
+        type: import("vue").PropType<import("../type/menu").Axis>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    items: {
+        type: import("vue").PropType<ContextMenuItem[]>;
+        default: () => 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;
+        default: number;
+    };
+    customEvent: {
+        type: import("vue").PropType<Event>;
+        default: any;
+    };
+    styles: {
+        type: import("vue").PropType<CSSProperties>;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    axis: {
+        type: import("vue").PropType<import("../type/menu").Axis>;
+        default: () => {
+            x: number;
+            y: number;
+        };
+    };
+    items: {
+        type: import("vue").PropType<ContextMenuItem[]>;
+        default: () => any[];
+    };
+}>>, {
+    showIcon: boolean;
+    width: number;
+    customEvent: Event;
+    axis: import("../type/menu").Axis;
+    items: ContextMenuItem[];
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,98 @@
+import { ToolbarEnum } from '../enums';
+declare const _sfc_main: import("vue").DefineComponent<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    search: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchText: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+    expandAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+}, {
+    props: any;
+    slots: Readonly<{
+        [name: string]: import("vue").Slot;
+    }>;
+    emits: (event: "search", ...args: any[]) => void;
+    t: {
+        (key: string): string;
+        (key: string, locale: string): string;
+        (key: string, locale: string, list: unknown[]): string;
+        (key: string, locale: string, named: Record<string, unknown>): string;
+        (key: string, list: unknown[]): string;
+        (key: string, named: Record<string, unknown>): string;
+    };
+    searchValue: import("vue").Ref<string>;
+    emitChange: (value?: string) => void;
+    handleMenuClick: (e: any) => void;
+    toolbarList: import("vue").ComputedRef<({
+        label: string;
+        value: ToolbarEnum;
+        divider?: undefined;
+    } | {
+        label: string;
+        value: ToolbarEnum;
+        divider: true;
+    })[]>;
+    debounceEmitChange: (value?: string) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "search"[], "search", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    toolbar: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    checkable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    search: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchText: {
+        type: StringConstructor;
+        default: string;
+    };
+    checkAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+    expandAll: {
+        type: FunctionConstructor;
+        default: any;
+    };
+}>> & {
+    onSearch?: (...args: any[]) => any;
+}, {
+    search: boolean;
+    checkable: boolean;
+    title: string;
+    toolbar: boolean;
+    searchText: string;
+    checkAll: Function;
+    expandAll: Function;
+}>;
+export default _sfc_main;

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

@@ -0,0 +1,6 @@
+export declare enum ToolbarEnum {
+    SELECT_ALL = 0,
+    UN_SELECT_ALL = 1,
+    EXPAND_ALL = 2,
+    UN_EXPAND_ALL = 3
+}

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

@@ -0,0 +1,2 @@
+import { CreateContextOptions } from "../type/menu";
+export declare function useContextMenu(): (((options: CreateContextOptions) => Promise<unknown>) | (() => void))[];

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

@@ -0,0 +1,14 @@
+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>): {
+    getAllKeys: (list?: TreeDataItem[]) => KeyType[];
+    getEnabledKeys: (list?: TreeDataItem[]) => KeyType[];
+    getChildrenKeys: (nodeKey: string | number, list?: TreeDataItem[]) => KeyType[];
+    updateNodeByKey: (key: string, node: TreeDataItem, list?: TreeDataItem[]) => void;
+    filterByLevel: (level?: number, list?: TreeDataItem[], currentLevel?: number) => string[] | number[];
+    insertNodeByKey: ({ parentKey, node, push }: InsertNodeParams) => void;
+    insertNodesByKey: ({ parentKey, list, push }: InsertNodeParams) => void;
+    deleteNodeByKey: (key: string, list?: TreeDataItem[]) => void;
+    getSelectedNode: (key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) => TreeItem;
+};