@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/table/src/hooks/useRowSelection.ts

@@ -1,146 +0,0 @@
-/**
- * 处理表格选中事件
- */
-
-import { isFunction, Recordable } from "@dt-frames/core";
-import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
-import { computed, ComputedRef, ref, Ref, toRaw, unref, watch, nextTick } from "vue";
-import { BasicTableProps } from "../types/table.type";
-import { omit } from 'lodash-es'
-
-interface TreeHelperConfig {
-    id: string;
-    children: string;
-    pid: string;
-}
-
-const DEFAULT_CONFIG: TreeHelperConfig = {
-    id: 'id',
-    children: 'children',
-    pid: 'pid',
-}
-
-export function useRowSelection(
-    propsRef: ComputedRef<BasicTableProps>,
-    emit
-) {
-    // 选中的节点 不包含子节点
-    const selectedRowKeysRef = ref<string[]>([])
-    // 选中的节点 包含子节点
-    const selectedRowRef = ref<Recordable[]>([])
-
-    // 获取选中的行数据
-    const getRowSelectionRef = computed((): TableRowSelection | null => {
-        const { rowSelection } = unref(propsRef)
-
-        if (!rowSelection) {
-            return null;
-        }
-
-        return {
-            ...rowSelection,
-            selectedRowKeys: toRaw(unref(selectedRowKeysRef)),
-            onChange: (selectedRowKeys: string[]) => {
-                setSelectedRowKeys(selectedRowKeys)
-            },
-        }
-    })
-
-    watch(
-        () => unref(propsRef).rowSelection?.selectedRowKeys,
-        (v: string[]) => {
-            setSelectedRowKeys(v);
-        },
-    )
-
-    watch(
-        () => unref(selectedRowKeysRef),
-        () => {
-            nextTick(() => {
-                const { rowSelection } = unref(propsRef)
-
-                if (rowSelection){
-                    const { onChange } = rowSelection
-                    if (onChange && isFunction(onChange)) onChange(getSelectRowKeys(), getSelectRows())
-                }
-
-                emit('selection-change', {
-                    keys: getSelectRowKeys(),
-                    rows: getSelectRows(),
-                })
-            })
-        },
-        { deep: true }
-    )
-
-    // 设置树节点的选中
-    function findeNodeAll(
-        tree: any,
-        func: Function,
-        config: Partial<TreeHelperConfig> = {}
-    ) {
-        config = Object.assign({}, DEFAULT_CONFIG, config)
-        const { children } = config
-
-        const result: any[] = []
-        const list = [...tree]
-
-        for (const node of list) {
-            func(node) && result.push(node);
-            node.children && list.push(...node.children);
-        }
-
-        return result
-    }
-
-    // 设置选中的key
-    function setSelectedRowKeys( rowKeys: string[] ) {
-        selectedRowKeysRef.value = rowKeys
-
-        const allSelectedRows = findeNodeAll(
-            toRaw(unref(propsRef).dataSource).concat(toRaw(unref(selectedRowRef))),
-            (item) => rowKeys.includes(item[ unref( propsRef ).rowKey]),
-            {
-                children: propsRef.value.childrenColumnName ?? 'children',
-            },
-        )
-
-        const trueSelectedRows: any[] = []
-
-        rowKeys.forEach( (key: string) => {
-            const found = allSelectedRows.find((item) => item[ unref( propsRef ).rowKey] === key)
-            found && trueSelectedRows.push(found)
-        } )
-
-        selectedRowRef.value = trueSelectedRows
-    }
-    
-
-    // 清除所有的选中数据
-    function clearSelectedRowKeys() {
-        selectedRowKeysRef.value = []
-        selectedRowRef.value = []
-    }
-
-    // 获取选中的行数据
-    function getRowSelection() {
-        return unref( getRowSelectionRef )
-    }
-
-    function getSelectRowKeys() {
-        return unref(selectedRowKeysRef);
-    }
-
-    function getSelectRows() {
-        return unref(selectedRowRef)
-    }
-
-    return {
-        getRowSelectionRef,
-        clearSelectedRowKeys,
-        getRowSelection,
-        getSelectRowKeys,
-        getSelectRows,
-        setSelectedRowKeys
-    }
-}

package/src/components/table/src/hooks/useRows.ts

@@ -1,30 +0,0 @@
-import { isFunction } from "@dt-frames/core";
-import { ComputedRef, unref } from "vue";
-import { BasicTableProps } from "../types/table.type";
-
-
-export function useRows(propsRef: ComputedRef<BasicTableProps>) {
-    /**
-     * 获取行的class
-    */
-    function getRowClassName(record: any, index: number) {
-
-        const { striped, rowClassName } = unref(propsRef)
-        const classNames: string[] = []
-
-        if( striped ) {
-            classNames.push( index % 2 === 1 ? 'table-striped' : '' )
-        }
-
-        if( rowClassName && isFunction(rowClassName) ) {
-            classNames.push( rowClassName( record, index ) )
-        }
-
-        return classNames.join(' ')
-    }
-
-    return {
-        getRowClassName
-    }
-
-}

package/src/components/table/src/hooks/useTable.ts

@@ -1,77 +0,0 @@
-import { DynamicProps, Nullable, getDynamicProps, error } from '@dt-frames/core'
-import { onUnmounted, ref, toRaw, unref, watch } from 'vue'
-import { BasicColumn, BasicTableProps, TableActionType } from '../types/table.type'
-
-
-type Props = Partial<DynamicProps<BasicTableProps>>
-
-export function useTable(tableProps?: Props) {
-    const tableRef = ref<Nullable<TableActionType>>(null)
-    const loadedRef = ref<Nullable<boolean>>(false)
-
-    function registerTable( instance: TableActionType ) {
-        onUnmounted(() => {
-            tableRef.value = null;
-            loadedRef.value = null;
-        })
-
-        if( unref(loadedRef) && instance === unref(tableRef) ) return
-
-        tableRef.value = instance
-        tableProps && instance.setProps(getDynamicProps(tableProps))
-
-        watch(
-            () => tableProps,
-            () => {
-                tableProps && instance.setProps(getDynamicProps(tableProps));
-            },
-            {
-                immediate: true,
-                deep: true,
-            },
-        )
-        
-    }
-
-    function getTableInstance(): TableActionType {
-        const table = unref(tableRef);
-        if (!table) {
-            error('没有table表单实例');
-        }
-
-        return table as TableActionType;
-    }
-
-    const methods: TableActionType = {
-        setProps: (props: Partial<BasicTableProps>) => {
-            getTableInstance().setProps(props);
-        },
-        setLoading: (loading: boolean) => {
-            getTableInstance().setLoading( loading )
-        },
-        getColumns: ({ ignoreIndex = false }: { ignoreIndex?: boolean } = {}) => {
-            const columns = getTableInstance().getColumns({ ignoreIndex }) || []
-            return toRaw(columns);
-        },
-        setColumns: (columns: BasicColumn[]) => {
-            getTableInstance().setColumns(columns)
-        },
-        getRowSelection: () => {
-            return toRaw(getTableInstance().getRowSelection())
-        },
-        getCacheColumns: () => {
-            return toRaw(getTableInstance().getCacheColumns())
-        },
-        getSize: () => {
-            return toRaw(getTableInstance().getSize())
-        },
-        getSelectRowKeys: () => {
-            return getTableInstance().getSelectRowKeys()
-        },
-        getSelectRows: () => {
-            return getTableInstance().getSelectRows()
-        }
-    }
-
-    return [registerTable as any, methods]
-}

package/src/components/table/src/hooks/useTableHeader.ts

@@ -1,48 +0,0 @@
-import { Recordable, useSlots } from "@dt-frames/core"
-import { computed, ComputedRef, h, Slots, unref } from "vue"
-import TableHeader from '../components/TableHeader.vue'
-import { BasicTableProps, ColumnChangeParam } from "../types/table.type";
-
-export function useTableHeader(
-    propsRef: ComputedRef<BasicTableProps>,
-    slots: Slots,
-    handlers: { onColumnsChange: (data: ColumnChangeParam[]) => void }
-) {
-    const getHeaderProps = computed((): Recordable => {
-        const { tableSetting, toolbar } = unref(propsRef)
-
-        const { getSlot } = useSlots()
-        const hideTitle = !slots.toolbar && !slots.headerTop && (!tableSetting || !tableSetting.length)
-
-        return {
-            title: hideTitle 
-                ? null
-                : () => 
-                h(
-                    TableHeader,
-                    {
-                        tableSetting,
-                        toolbar,
-                        onColumnsChange: handlers.onColumnsChange
-                    } as Recordable,
-                    {
-                    ...(slots.toolbar
-                        ? {
-                            toolbar: () => getSlot(slots, 'toolbar'),
-                        }
-                        : {}),
-                    ...(slots.headerTop
-                        ? {
-                            headerTop: () => getSlot(slots, 'headerTop'),
-                        }
-                        : {}),
-                    },
-                )
-        }
-
-    })
-
-    return {
-        getHeaderProps
-    }
-}

package/src/components/table/src/hooks/useTableInstance.ts

@@ -1,29 +0,0 @@
-/** ======================================
- *  保存table实例对象
- *  ======================================*/
-
-import { Nullable, Recordable } from "@dt-frames/core"
-import { ComputedRef, inject, provide, Ref } from "vue"
-import { BasicTableProps, TableActionType } from "../types/table.type"
-
-
-const tableKey = Symbol('dt-page')
-
-type Instance = TableActionType & {
-    tableElRef: Ref<Nullable<HTMLElement>>
-    getBind: ComputedRef<Recordable>
-}
-
-type RetInstance = Omit<Instance, 'getBind'> & {
-    getBind: ComputedRef<BasicTableProps>
-}
-
-// 创建table实例
-export function createTableInstance(instance: Instance) {
-    provide(tableKey, instance)
-}
-
-// 获取table实例
-export function getTableInstance(): RetInstance {
-    return inject(tableKey) as RetInstance
-}

package/src/components/table/src/hooks/useTableScroll.ts

@@ -1,227 +0,0 @@
-import { isBoolean, windowResizeFn } from "@dt-frames/core"
-import { useDebounceFn } from "@vueuse/core"
-import { ComputedRef, ref, Ref, nextTick, watch, computed, unref, onMounted, h } from "vue"
-import { TABLE_SIZE_HEIGHT } from "../const"
-import { BasicColumn, BasicTableProps, TableRowSelection } from "../types/table.type"
-
-/**
- * 计算table横向和纵向的滚动条
- */
-export function useTableScroll(
-    propsRef: ComputedRef<BasicTableProps>,
-    tableElRef: Ref<HTMLDivElement & {$el: any} | null>,
-    columnsRef: ComputedRef<BasicColumn[]>,
-    rowSelectionRef: ComputedRef<TableRowSelection | null>
-) {
-    // 默认表格的高度
-    const tableHeightRef = ref(0)
-    const filterSource = ref([])
-
-    const debounceRedoHeight = useDebounceFn( redoHeight, 100 )
-
-    watch(
-        () => unref(propsRef)?.dataSource?.length,
-        () => {
-            debounceRedoHeight()
-        },
-        {
-            flush: 'post'   // 在dom渲染之后监听
-        }
-    )
-
-    windowResizeFn(calcTableHeight, 280)
-
-    function redoHeight() {
-        nextTick(() => {
-            calcTableHeight()
-        })
-    }
-
-    let footerEl: HTMLElement | null
-    let bodyEl: HTMLElement | null
-
-    function setHeight(height: number) {
-        tableHeightRef.value = height
-    }
-
-    async function calcTableHeight() {
-        const { pagination, virtual } = unref(propsRef)
-
-        const table = unref(tableElRef)
-
-        if( !table ) return
-
-        const tableEl = table?.$el
-
-        if( !bodyEl ) {
-            bodyEl = tableEl.querySelector('.ant-table-body')
-            if( !bodyEl ) return
-        }
-
-        const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight
-        const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth
-
-        if( hasScrollBarY ) {
-            tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.remove('hide-scrollbar-y')
-        } else {
-            !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y')
-        }
-
-        if (hasScrollBarX) {
-            tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.remove('hide-scrollbar-x')
-        } else {
-            !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x')
-        }
-
-        bodyEl!.style.height = 'unset'
-        if( unref(propsRef).dataSource.length === 0 ) return
-
-        await nextTick()
-
-        let 
-            headerHeight = 0, 
-            paginationHeight = 2, 
-            footerHeight = 0, 
-            titleHeight = (tableEl.querySelector('.ant-table-title') as HTMLElement)?.offsetHeight ?? 0,
-            marginHeight = 15
-
-        const headEl = tableEl.querySelector('.ant-table-thead ')
-        if( headEl ) {
-            headerHeight = (headEl as HTMLElement).offsetHeight
-        }
-
-        if( !isBoolean(pagination) ) {
-            let paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement
-
-            if( paginationEl ) {
-                const offsetHeight = paginationEl.offsetHeight
-                paginationHeight += offsetHeight || 0
-            } else {
-                paginationHeight += 24
-            }
-
-            if( !footerEl ) {
-                footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement
-            } else {
-                const offsetHeight = footerEl.offsetHeight
-                footerHeight += offsetHeight || 0
-            }
-
-        } else {
-            paginationHeight = -8
-        }
-
-        const tableHeight = table?.$el?.offsetHeight ?? 0
-
-        let height = tableHeight - paginationHeight - footerHeight - headerHeight - titleHeight - marginHeight
-        height = Math.max(height, 167)
-
-        setHeight(height)
-        
-        bodyEl!.style.height = `${height}px`
-
-        // 表格虚拟滚动
-        virtual ? calcTableScroll( ) : filterSource.value = unref(propsRef)?.dataSource
-    }
-
-    onMounted(() => {
-        calcTableHeight();
-        nextTick(() => {
-            debounceRedoHeight();
-        });
-    });
-
-    const getScrollX = computed(() => {
-        let width = 0
-
-        // 如果有复选框或者单选框
-        if( unref(rowSelectionRef) ) {
-            width += 32
-        }
-
-        const NORMAL_WIDTH = 120
-
-        const columns = unref(columnsRef).filter((item) => !item.defaultHidden)
-
-        columns.forEach( item => {
-            width += Number.parseInt(item.width as string) || NORMAL_WIDTH
-        } )
-
-        const table = unref(tableElRef)
-        const tableWidth = table?.$el?.offsetWidth ?? 0
-
-        return tableWidth > width ? '100%' : width
-    })
-
-    const getScrollRef = computed(() => {
-        const tableHeight = unref(tableHeightRef)
-        const { scroll } = unref(propsRef)
-
-        return {
-            x: unref(getScrollX),
-            y: tableHeight,
-            scrollToFirstRowOnChange: false,
-            ...scroll,
-        };
-    })
-
-    // 创建滚动元素
-    function createScrollWrap(el: Element) {
-        let data = unref(propsRef)?.dataSource?.length
-        const { size } = unref(propsRef)
-        const rowHeight = TABLE_SIZE_HEIGHT[size]
-
-        let scrollWrap = el.querySelector('.tableScrollWrap')
-        let wrapHeight = data * rowHeight + 'px'
-
-        if( scrollWrap ) {
-            (scrollWrap as any).style.height = wrapHeight
-        } else {
-            let div = document.createElement('div')
-            div.className = 'tableScrollWrap'
-            div.style.height = wrapHeight
-            el.insertBefore(div, el.querySelector('table')[0])
-        }
-    }
-
-    async function calcTableScroll() {
-        const tableEl = unref(tableElRef)?.$el
-        bodyEl = tableEl.querySelector('.ant-table-body')
-
-        // 添加一个滚动div元素
-        createScrollWrap(bodyEl)
-
-        calcScroll(bodyEl)
-
-        bodyEl.addEventListener('scroll', (e) => {
-            calcScroll(bodyEl)
-        })
-    }
-
-    async function calcScroll(el: Element) {
-        const { size } = unref(propsRef)
-        const rowHeight = TABLE_SIZE_HEIGHT[size]
-        const scrollTop = el.scrollTop
-
-        // 留闲高度，默认留3个表格高度
-        const remainCount = 3
-        const remainH = remainCount * rowHeight
-
-        // 最小高度
-        const minItemHeight = scrollTop > remainH ? Math.floor((scrollTop - remainH) / rowHeight) * rowHeight : 0
-
-        // 最小索引
-        const minIndex = minItemHeight / rowHeight
-        // 最大索引
-        const maxIndex = minIndex + Math.ceil(tableHeightRef.value / rowHeight) + (minItemHeight && remainCount) + remainCount * 2
-
-        bodyEl.querySelector('table').style.transform = `translateY(${minItemHeight}px)`
-
-        filterSource.value = unref(propsRef)?.dataSource.slice(minIndex, maxIndex)
-    }
-
-    return {
-        getScrollRef,
-        filterSource
-    }
-}