@dt-frames/ui 2.0.24 → 3.0.1

package/es/components/tree/src/index.scss

@@ -0,0 +1,178 @@
+.dt-tree-search{
+    padding: 0 4px 0 10px;
+
+    & > i {
+        @apply w-6;
+    }
+
+    input.ant-input-sm{
+        font-size: 12px;
+        height: 24px;
+    }
+}
+
+.dt-tree-header{
+    border-bottom: 1px solid #e7e7e7;
+}
+
+.dt-tree {
+    @apply bg-white;
+
+    .ant-spin-nested-loading {
+        @apply flex-1 overflow-y-auto;
+        padding: 10px 0;
+    }
+
+    .ant-tree-switcher {
+        @apply flex items-center justify-center;
+    }
+
+    .ant-tree-treenode{
+        @apply p-0 items-center;
+    }
+
+    .ant-tree-switcher-icon{
+        @apply leading-7;
+    }
+
+    .ant-tree-checkbox {
+        @apply mt-0;
+    }
+
+    .tree-title {
+        @apply relative flex items-center w-full leading-7;
+
+        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: $treeHoverBg;
+        }
+    }
+
+    .anticon-file {
+        @apply opacity-60;
+        svg{
+            @apply w-3;
+        }
+    }
+
+    .toolbar{
+        transition: color 0.2s;
+        &:hover{
+            color: $colorPrimary;
+        }
+    }
+
+    .dragging::after {
+        bottom: 0 !important;
+    }
+
+    .tree-action{
+        @apply invisible absolute top-0 flex h-full;
+        right: 3px;
+
+        .i{
+            font-size: 16px;
+            width: 22px;
+            color: $colorPrimary;
+        }
+    }
+
+    .tree-active-node {
+        background-color: $treeHoverBg;
+        color: $colorPrimary;
+
+        svg {
+            fill: $colorPrimary;
+        }
+    }
+
+    .ant-spin-nested-loading{
+        .ant-tree-treenode{
+            .ant-tree-switcher-icon{
+                line-height: 32px;
+            }
+        }
+        .tree-title{
+            font-size: 13px;
+            line-height: 32px;
+        }
+    }
+
+    .ant-tree-node-content-wrapper:hover {
+        background-color: inherit;
+    }
+
+    .ant-tree-treenode-active .ant-tree-node-content-wrapper {
+        outline: none;
+    }
+}
+
+.dt-context-menu{
+    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: 34px;
+        margin: 0 !important;
+        line-height: 32px;
+        &.ant-menu-item{
+            height: 34px;
+        }
+  
+        span {
+            line-height: 34px;
+            font-size: 13px;
+        }
+
+        i{
+            font-size: 18px;
+        }
+  
+        > div {
+            margin: 0 !important;
+        }
+  
+        &:not(.ant-menu-item-disabled):hover {
+            color: #333;
+            background-color: #f5f5f5;
+        }
+    }
+
+    .ant-divider,
+    &__popup .ant-divider{
+        @apply m-0;
+    }
+
+  
+    .ant-menu-submenu-title,
+    .ant-menu-item {
+        padding: 0 !important;
+    }
+}

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

@@ -0,0 +1,64 @@
+import { Ref, ComputedRef } from 'vue';
+import { Recordable } from '@dt-frames/core';
+import { CheckKeys, FieldNames, InsertNodeParams, KeyType, TreeItem } from '../types/tree';
+import { ContextMenuItem } from './menu';
+import { AntTreeNodeDropEvent } from 'ant-design-vue/es/tree/Tree';
+export type TreeProps = {
+    checkable?: boolean;
+    expandLevel?: number;
+    defaultExpandAll?: boolean;
+    height?: number | string;
+    showIcon?: boolean;
+    blockNode?: boolean;
+    fieldNames?: FieldNames;
+    disabled?: boolean;
+    draggable?: boolean;
+    multiple?: boolean;
+    selectable?: boolean;
+    showLine?: boolean;
+    activeKey?: KeyType;
+    loading?: boolean;
+    checkStrictly?: boolean;
+    expandedKeys?: KeyType[];
+    selectedKeys?: KeyType[];
+    checkedKeys?: CheckKeys;
+    rightMenuList?: ContextMenuItem[];
+    highlight?: boolean | string;
+    clickRowToExpand?: boolean;
+    search?: boolean;
+    searchValue?: string;
+    expandOnSearch?: boolean;
+    treeData?: TreeItem[] | Ref<TreeItem[]> | ComputedRef<TreeItem[]>;
+    value?: KeyType[] | CheckKeys;
+    title?: string;
+    toolbar?: boolean;
+    filterFn?: (searchValue: any, node: TreeItem, fieldNames: FieldNames) => boolean;
+    beforeRightClick?: (...arg: any) => ContextMenuItem[];
+    renderIcon?: (params: Recordable) => string;
+    filterTreeNode?: (node: Recordable) => boolean;
+    action?: (record: Recordable) => any;
+    onDrop?: (data: {
+        data: TreeItem[];
+        info: AntTreeNodeDropEvent;
+    }) => void;
+};
+export type TreeMethods = {
+    setProps: (props: TreeProps) => void;
+    checkAll: (checkAll: boolean) => void;
+    expandAll: (expandAll: boolean) => void;
+    setExpandedKeys: (keys: KeyType[]) => void;
+    getExpandedKeys: () => KeyType[];
+    setSelectedKeys: (keys: KeyType[]) => void;
+    getSelectedKeys: () => KeyType[];
+    setCheckedKeys: (keys: CheckKeys) => void;
+    getCheckedKeys: () => CheckKeys;
+    insertNodeByKey: (opt: InsertNodeParams) => void;
+    insertNodesByKey: (opt: InsertNodeParams) => void;
+    deleteNodeByKey: (key: string) => void;
+    updateNodeByKey: (key: string, node: Omit<TreeItem, 'key'>) => void;
+    getSelectedNode: (key: KeyType, treeList?: TreeItem[], selectNode?: TreeItem | null) => TreeItem | null;
+    onStrictlyChange: (strictly: boolean) => void;
+    filterByLevel: (level: number) => void;
+    setSearchValue: (value: string) => void;
+    getSearchValue: () => string;
+};

package/es/components/tree/src/{type → types}/menu.d.ts

@@ -1,4 +1,4 @@
-import { Recordable } from "@dt-frames/core";
+import { Recordable } from '@dt-frames/core';
 export interface Axis {
     x: number;
     y: number;

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

@@ -0,0 +1,31 @@
+import { TreeDataItem } from 'ant-design-vue/lib/tree/Tree';
+export type KeyType = string | number;
+export type CheckKeys = KeyType[] | {
+    checked: string[] | number[];
+    halfChecked: string[] | number[];
+};
+export interface FieldNames {
+    children?: string;
+    title?: string;
+    key?: string;
+}
+export interface TreeItem extends TreeDataItem {
+    icon?: any;
+}
+export interface TreeState {
+    expandedKeys: KeyType[];
+    selectedKeys: KeyType[];
+    checkedKeys: CheckKeys;
+    checkStrictly: boolean;
+}
+export interface TreeHelperConfig {
+    id: string;
+    children: string;
+    pid: string;
+}
+export interface InsertNodeParams {
+    parentKey: string | null;
+    node: TreeDataItem;
+    list?: TreeDataItem[];
+    push?: 'push' | 'unshift';
+}

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

@@ -1,4 +1,4 @@
-import { TreeHelperConfig } from "../type/tree";
+import { TreeHelperConfig } from "../types/tree";
 export declare function eachTree(treeDatas: any[], callBack: Function, parentNode?: {}, config?: {
     children: string;
 }): void;

package/es/components/upload/index.d.ts

@@ -1,4 +1,4 @@
-import { default as DtUpload } from "./src/index";
+import DtUpload from "./src/index";
 import { UploadFile } from './src/type/file';
 export { DtUpload };
 export type { UploadFile };