@dt-frames/ui 1.0.12 → 1.0.16

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

@@ -1,239 +0,0 @@
-import { TreeDataItem } from "ant-design-vue/lib/tree"
-import { ComputedRef, Ref, unref } from "vue"
-import { cloneDeep } from 'lodash-es'
-import { FieldNames, InsertNodeParams, TreeItem, KeyType } from "../type/tree"
-import { forEach } from "../utils/tree"
-
-export function useTree(
-    treeDataRef: Ref<TreeDataItem[]>, 
-    getFieldNames: ComputedRef<FieldNames>
-) {
-
-    function getAllKeys(list?: TreeDataItem[]) {
-        const keys: string[] = []
-        const treeData = list || unref(treeDataRef)
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-
-        if (!childrenField || !keyField) return keys
-
-        for (let index = 0; index < treeData.length; index++) {
-            const node = treeData[index]
-            keys.push(node[keyField]!)
-
-            const children = node[childrenField]
-
-            if (children && children.length) {
-                keys.push(...(getAllKeys(children) as string[]))
-            }
-        }
-
-        return keys as KeyType[]
-    }
-
-    function getEnabledKeys(list?: TreeDataItem[]) {
-        const keys: string[] = []
-        const treeData = list || unref(treeDataRef)
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-
-        if (!childrenField || !keyField) return keys
-
-        for (let index = 0; index < treeData.length; index++) {
-            const node = treeData[index]
-            node.disabled !== true && node.selectable !== false && keys.push(node[keyField]!)
-
-            const children = node[childrenField]
-            if (children && children.length) {
-                keys.push(...(getEnabledKeys(children) as string[]))
-            }
-        }
-
-        return keys as KeyType[]
-    }
-
-    // 获取节点的keys
-    function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]) {
-        const keys: KeyType[] = []
-        const treeData = list || unref(treeDataRef)
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-
-        if (!childrenField || !keyField) return keys
-
-        for (let index = 0; index < treeData.length; index++) {
-            const node = treeData[index]
-            const children = node[childrenField]
-
-            if (nodeKey === node[keyField]) {
-                keys.push(node[keyField]!)
-
-                if (children && children.length) {
-                    keys.push(...(getAllKeys(children) as KeyType[]))
-                }
-            } else {
-                if (children && children.length) {
-                    keys.push(...getChildrenKeys(nodeKey, children))
-                }
-            }
-        }
-
-        return keys as KeyType[]
-    }
-
-
-    function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
-        if (!key) return
-
-        const treeData = list || unref(treeDataRef)
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-
-        if (!childrenField || !keyField) return
-
-        for (let index = 0; index < treeData.length; index++) {
-            const element: any = treeData[index]
-            const children = element[childrenField]
-
-            if (element[keyField] === key) {
-                treeData[index] = { ...treeData[index], ...node }
-                break
-            } else if (children && children.length) {
-                updateNodeByKey(key, node, element[childrenField])
-            }
-        }
-
-    }
-
-
-    function filterByLevel(level = 1, list?: TreeDataItem[], currentLevel = 1) {
-        if (!level) return [] 
-
-        const res: (string | number)[] = []
-        const data = list || unref(treeDataRef) || []
-
-        for (let index = 0; index < data.length; index++) {
-            const item = data[index]
-
-            const { key: keyField, children: childrenField } = unref(getFieldNames)
-            const key = keyField ? item[keyField] : ''
-            const children = childrenField ? item[childrenField] : []
-            res.push(key)
-
-            if (children && children.length && currentLevel < level) {
-                currentLevel += 1;
-                res.push(...filterByLevel(level, children, currentLevel));
-            }
-        }
-
-        return res as string[] | number[]
-    }
-
-    // 添加节点
-    function insertNodeByKey({ parentKey = null, node, push = 'push' }: InsertNodeParams) {
-        const treeData: any = cloneDeep(unref(treeDataRef))
-
-        if (!parentKey) {
-            treeData[push](node)
-            treeDataRef.value = treeData
-            return
-        }
-
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-        if (!childrenField || !keyField) return
-
-        forEach(treeData, (treeItem) => {
-            if (treeItem[keyField] === parentKey) {
-                treeItem[childrenField] = treeItem[childrenField] || []
-                treeItem[childrenField][push](node)
-                return true
-            }
-        })
-        treeDataRef.value = treeData
-    }
-
-    // 批量添加节点
-    function insertNodesByKey({ parentKey = null, list, push = 'push' }: InsertNodeParams) {
-        const treeData: any = cloneDeep(unref(treeDataRef))
-
-        if (!list || list.length < 1) return
-
-        if (!parentKey) {
-            for (let i = 0; i < list.length; i++) {
-                treeData[push](list[i]);
-            }
-        } else {
-            const { key: keyField, children: childrenField } = unref(getFieldNames)
-            if (!childrenField || !keyField) return
-
-            forEach(treeData, (treeItem) => {
-                if (treeItem[keyField] === parentKey) {
-                    treeItem[childrenField] = treeItem[childrenField] || []
-
-                    for (let i = 0; i < list.length; i++) {
-                        treeItem[childrenField][push](list[i])
-                    }
-
-                    treeDataRef.value = treeData
-
-                    return true
-                }
-            })
-        }
-    }
-
-    // 通过key 删除节点
-    function deleteNodeByKey(key: string, list?: TreeDataItem[]) {
-        if (!key) return
-
-        const treeData = list || unref(treeDataRef)
-        const { key: keyField, children: childrenField } = unref(getFieldNames)
-
-        if (!childrenField || !keyField) return
-
-        for (let index = 0; index < treeData.length; index++) {
-            const element: any = treeData[index]
-            const children = element[childrenField]
-      
-            if (element[keyField] === key) {
-
-                treeData.splice(index, 1)
-                break
-
-            } else if (children && children.length) {
-
-                deleteNodeByKey(key, element[childrenField])
-
-            }
-        }
-    }
-
-    function getSelectedNode(key: KeyType, list?: TreeItem[], selectedNode?: TreeItem | null) {
-        if (!key && key !== 0) return null
-
-        const treeData = list || unref(treeDataRef)
-
-        treeData.forEach(item => {
-            if (selectedNode?.key || selectedNode?.key === 0) return selectedNode
-
-            if (item.key === key) {
-                selectedNode = item
-                return
-            }
-
-            if (item.children && item.children.length) {
-                selectedNode = getSelectedNode(key, item.children, selectedNode)
-            }
-        })
-
-        return selectedNode || null
-    }
-
-    return {
-        getAllKeys,
-        getEnabledKeys,
-        getChildrenKeys,
-        updateNodeByKey,
-        filterByLevel,
-        insertNodeByKey,
-        insertNodesByKey,
-        deleteNodeByKey,
-        getSelectedNode
-    }
-}

package/src/components/tree/src/index.vue

@@ -1,392 +0,0 @@
-<template>
-    <div class="dt-tree">
-        <template v-if="showTitle">
-            <TreeHeader
-                :title="title"
-                :toolbar="toolbar"
-                :search="search"
-                :checkable="checkable"
-                :searchText="searchState.searchText"
-                :checkAll="checkAll"
-                :expandAll="expandAll"
-                @search="handleSearch"
-            >
-                {{ extendSlots(slots) }}
-            </TreeHeader>
-        </template>
-
-        <Spin :spinning="loading" tip="加载中...">
-            <div v-show="!getNotFound">
-                <Tree
-                    v-bind="getBindValues"
-                    :showIcon="false"
-                    :treeData="treeData"
-                ></Tree>
-            </div>
-            <Empty v-show="getNotFound"></Empty>
-        </Spin>
-    </div>
-</template>
-
-<script lang="tsx" setup>
-    import { computed, reactive, ref, toRaw, unref, useAttrs, useSlots as vueUseSlots, watch, watchEffect } from 'vue'
-    import { cloneDeep, omit, difference, get } from 'lodash-es'
-    import { Spin, Empty, Tree } from 'ant-design-vue'
-    import TreeHeader from './components/treeHeader.vue'
-    import { BasicProps } from './props'
-    import { CheckKeys, CreateContextOptions, FieldNames, TreeItem, TreeState, KeyType, TreeActionType } from './type/tree'
-    import { isArray, isBoolean, isFunction, Recordable, isEmpty, useSlots } from '@dt-frames/core'
-    import { eachTree, filter, treeToList } from './utils/tree'
-    import { useTree } from './hooks/useTree'
-
-    const props = defineProps( BasicProps )
-    const attrs = useAttrs()
-    const slots = vueUseSlots()
-
-    const { getSlot, extendSlots } = useSlots()
-
-    const emit = defineEmits([ 
-        'update:expandedKeys',
-        'update:selectedKeys',
-        'update:value',
-        'check',
-        'change',
-        'clickNode',
-        'update:searchValue'
-    ])
-
-
-    const state = reactive<TreeState>({
-        checkStrictly: props.checkStrictly,
-        expandedKeys: props.expandedKeys || [],
-        selectedKeys: props.selectedKeys || [],
-        checkedKeys: props.checkedKeys || [],
-    })
-
-    const searchState = reactive({
-        startSearch: false,
-        searchText: '',
-        searchData: [] as TreeItem[],
-    })
-
-    const treeDataRef = ref<TreeItem[]>([])
-
-    const getFieldNames = computed(() => {
-        const { fieldNames } = props
-        return {
-            children: 'children',
-            title: 'title',
-            key: 'key',
-            ...(fieldNames as FieldNames)
-        }
-    })
-
-    const getTreeData = computed((): TreeItem[] => {
-        return searchState.startSearch ? searchState.searchData : unref(treeDataRef)
-    })
-
-    const getNotFound = computed((): boolean => {
-        return !getTreeData.value || getTreeData.value.length === 0;
-    })
-
-    const getIcon = (params: Recordable, icon?: string) => {
-        if (!icon) {
-            if ( props.renderIcon && isFunction( props.renderIcon ) ) {
-                return props.renderIcon(params)
-            }
-        }
-
-        return icon
-    }
-
-    const treeData = computed(() => {
-        const data = cloneDeep(getTreeData.value)
-
-        eachTree(data, ( item, _parent ) => {
-            const searchText = searchState.searchText
-
-            const { highlight } = unref(props)
-            const { title: titleField, key: keyField, children: childrenField } = unref(getFieldNames)
-
-            const icon = getIcon(item, item.icon)
-            const title = get(item, titleField)
-
-            const searchIdx = searchText ? title.indexOf(searchText) : -1
-            const isHighlight = searchState.startSearch && !isEmpty(searchText) && highlight && searchIdx !== -1
-            const highlightStyle = `color: ${isBoolean(highlight) ? '#f50' : highlight}`
-            
-            const titleDom = isHighlight ? (
-                // 切割高亮的字
-                <span class="tree-content">
-                    <span>{title.substr(0, searchIdx)}</span>
-                    <span style={ highlightStyle }>{ searchText }</span>
-                    <span>{ title.substr(searchIdx + (searchText as string).length) }</span>
-                </span>
-            ) : (
-                title 
-            )
-
-            item[titleField] = (
-                <span 
-                    class="tree-title" 
-                    onClick={ handleClickNode.bind(null, item[keyField], item[childrenField], item) }
-                >
-                {slots?.title ? (
-                    getSlot(slots, 'title', item)
-                ) : (
-                    <>
-                    {icon && <i class={ `i ${icon}`} />}
-                    {titleDom}
-                    <span class='tree-action'>{renderAction(item)}</span>
-                    </>
-                )}
-                </span>
-            )
-
-        })
-
-        return data
-    })
-
-
-    const showTitle = computed(() => {
-        return true
-    })
-
-    const getBindValues = computed(() => {
-        let propsData = {
-            blockNode: true,
-            ...attrs,
-            ...props,
-            expandedKeys: state.expandedKeys,
-            selectedKeys: state.selectedKeys,
-            checkedKeys: state.checkedKeys,
-            checkStrictly: state.checkStrictly,
-            fieldNames: unref(getFieldNames),
-            'onUpdate:expandedKeys': (v: KeyType[]) => {
-                state.expandedKeys = v;
-                emit('update:expandedKeys', v);
-            },
-            'onUpdate:selectedKeys': (v: KeyType[]) => {
-                state.selectedKeys = v;
-                emit('update:selectedKeys', v);
-            },
-            onCheck: (v: CheckKeys, e) => {
-                let currentValue = toRaw( state.checkedKeys ) as KeyType[]
-
-                if ( isArray( currentValue ) && searchState.startSearch ) {
-                    const { key } = unref(getFieldNames)
-
-                    currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]))
-
-                    if (e.checked) {
-                        currentValue.push(e.node.$attrs.node[key]);
-                    }
-
-                    state.checkedKeys = currentValue
-                } else {
-                    state.checkedKeys = v;
-                }
-
-                const rawVal = toRaw(state.checkedKeys)
-
-                emit('update:value', rawVal)
-                emit('check', rawVal, e)
-            }
-        }
-
-        return omit(propsData, 'treeData', 'class')
-    })
-
-    // 设置节点点击事件
-    function handleClickNode(key: string, children: TreeItem[], node: TreeItem) {
-        emit('clickNode', node)
-        
-        if (!props.clickRowToExpand || !children || children.length === 0) return
-
-        if (!state.expandedKeys.includes(key)) {
-            setExpandedKeys([...state.expandedKeys, key])
-        } else {
-            const keys = [...state.expandedKeys]
-            const index = keys.findIndex((item) => item === key)
-            if (index !== -1) {
-                keys.splice(index, 1);
-            }
-
-            setExpandedKeys(keys)
-        }
-    }
-
-    // 渲染操作栏
-    function renderAction(node: TreeItem) {
-        const { actionList } = props
-        if (!actionList || actionList.length === 0) return
-
-        return actionList.map((item, index) => {
-            let nodeShow = true
-
-            if (isFunction(item.show)) {
-                nodeShow = item.show?.(node);
-            } else if (isBoolean(item.show)) {
-                nodeShow = item.show;
-            }
-
-            if (!nodeShow) return null
-
-            return (
-                <span key={index} class='tree-action'>
-                    { item.render(node) }
-                </span>
-            )
-        })
-
-    }
-
-    const { 
-        deleteNodeByKey,
-        insertNodeByKey,
-        insertNodesByKey,
-        filterByLevel,
-        updateNodeByKey,
-        getAllKeys,
-        getChildrenKeys,
-        getEnabledKeys,
-        getSelectedNode,
-    } = useTree( treeDataRef, getFieldNames )
-
-    // 设置实例暴露的方法
-    function setExpandedKeys(keys: KeyType[]) { state.expandedKeys = keys }
-    function getExpandedKeys() { return state.expandedKeys }
-
-    function setSelectedKeys( keys: KeyType[] ) { state.selectedKeys = keys }
-    function getSelectedKeys() { return state.selectedKeys }
-
-    function setCheckedKeys(keys: CheckKeys) { state.checkedKeys = keys }
-    function getCheckedKeys() { return state.checkedKeys }
-
-    function checkAll(checkAll: boolean) { state.checkedKeys = checkAll ? getEnabledKeys() : ([] as KeyType[]) }
-    function expandAll(expandAll: boolean) { state.expandedKeys = expandAll ? getAllKeys() : ([] as KeyType[]) }
-
-    function onStrictlyChange(strictly: boolean) { state.checkStrictly = strictly }
-
-    const instance: TreeActionType = {
-        setExpandedKeys,
-        getExpandedKeys,
-        setSelectedKeys,
-        getSelectedKeys,
-        setCheckedKeys,
-        getCheckedKeys,
-        insertNodeByKey,
-        insertNodesByKey,
-        deleteNodeByKey,
-        updateNodeByKey,
-        getSelectedNode,
-        checkAll,
-        expandAll,
-        onStrictlyChange,
-        filterByLevel: (level: number) => {
-            state.expandedKeys = filterByLevel(level);
-        },
-        setSearchValue: (value: string) => {
-            handleSearch(value);
-        },
-        getSearchValue: () => {
-            return searchState.searchText;
-        }
-    }
-
-    function handleSearch(searchValue: string) {
-        if (searchValue !== searchState.searchText) searchState.searchText = searchValue
-        emit('update:searchValue', searchValue)
-
-        if (!searchValue) {
-            searchState.startSearch = false
-            return
-        }
-
-        const { filterFn, checkable, expandOnSearch, checkOnSearch, selectedOnSearch } = unref(props)
-        const { title: titleField, key: keyField } = unref(getFieldNames)
-        const matchedKeys: string[] = []
-
-        searchState.startSearch = true
-
-        searchState.searchData = filter(
-            unref(treeDataRef),
-            (node) => {
-                const result = filterFn
-                    ? filterFn(searchValue, node, unref(getFieldNames))
-                    : node[titleField]?.includes(searchValue) ?? false
-
-                if (result) {
-                    matchedKeys.push(node[keyField]);
-                }
-
-                return result;
-            },
-            unref(getFieldNames),
-        )
-
-        if (expandOnSearch) {
-            const expandKeys = treeToList(searchState.searchData).map((val) => {
-                return val[keyField]
-            })
-
-            if (expandKeys && expandKeys.length) {
-                setExpandedKeys(expandKeys)
-            }
-        }
-
-        if (checkOnSearch && checkable && matchedKeys.length) {
-            setCheckedKeys(matchedKeys)
-        }
-
-        if (selectedOnSearch && matchedKeys.length) {
-            setSelectedKeys(matchedKeys)
-        }
-    }
-
-    watch(
-        () => props.searchValue,
-        (val) => {
-            if (val !== searchState.searchText) {
-                searchState.searchText = val
-            }
-        },
-        { immediate: true }
-    )
-
-    watch(
-        () => props.treeData,
-        (val) => {
-            if (val) {
-                handleSearch(searchState.searchText)
-            }
-        }
-    )
-
-    watch(
-        () => props.value,
-        () => {
-            state.checkedKeys = toRaw(props.value || [])
-        },
-        { immediate: true }
-    )
-
-    watch(
-        () => state.checkedKeys,
-        () => {
-          const v = toRaw(state.checkedKeys)
-          emit('update:value', v)
-          emit('change', v)
-        }
-    )
-
-    watchEffect(() => { treeDataRef.value = props.treeData as TreeItem[] })
-    watchEffect(() => { state.expandedKeys = props.expandedKeys })
-    watchEffect(() => { state.selectedKeys = props.selectedKeys })
-    watchEffect(() => { state.checkedKeys = props.checkedKeys })
-    watchEffect(() => { state.checkStrictly = props.checkStrictly })
-
-    defineExpose(instance)
-
-</script>