@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/table/src/index.less

@@ -1,162 +0,0 @@
-.table-striped td {
-    background-color: #fafafa;
-}
-
-.dt-table-header{
-    .dt-table-header-actions{
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-    }
-
-    .dt-table-header-actions__right{
-        display: flex;
-        .dt-icon{
-            margin: 0 5px;
-            cursor: pointer;
-        }
-    }
-}
-
-.column-setting{
-    &__check-item{
-        display: flex;
-        align-items: center;
-        min-width: 100%;
-        padding: 4px 16px 8px 0;
-    }
-    &__popover-title {
-        display: flex;
-    }
-}
-
-.column-setting__cloumn-list {
-    .ant-popover-inner-content{
-        padding: 12px 0 0 0;
-    }
-    .ant-checkbox-group {
-        width: 100%;
-        min-width: 260px;
-    }
-
-    .drag-icon{
-        margin: 0 5px;
-        cursor: move;
-    }
-
-    .ant-checkbox-wrapper{
-        flex: 1;
-    }
-
-    .dt-icon{
-        cursor: pointer;
-        display: flex;
-    }
-
-    .disabled{
-        .dt-icon{
-            cursor: not-allowed;
-            opacity: 0.5;
-        }
-    }
-
-    .active{
-        .dt-icon{
-            color: @primary-color !important;
-        }
-    }
-
-    .ant-popover-inner-content {
-        max-height: 400px;
-        overflow-y: auto;
-    }
-}
-
-.dt-table-action-btn{
-    width: 24px;
-    display: inline-block;
-    vertical-align: middle;
-    cursor: pointer;
-    svg{
-        display: flex;
-    }
-}
-
-.ant-table-fixed-left table, .ant-table-fixed-right table{
-    width: min-content;
-}
-
-.ant-table-cell {
-    height: 44px !important;
-    line-height: 24px !important;
-    font-size: 14px !important;
-    padding: 4px 8px !important;
-} 
-
-.ant-table-small{
-    .ant-table-cell {
-        height: 32px !important;
-        line-height: 16px !important;
-        font-size: 12px !important;
-        padding: 2px 8px !important;
-    }
-}
-
-.ant-table-middle{
-    .ant-table-cell {
-        height: 38px !important;
-        line-height: 20px !important;
-        font-size: 13px !important;
-        padding: 4px 8px !important;
-    }  
-}
-
-.dt-action-select{
-    .ant-dropdown-menu-title-content{
-        display: flex;
-        align-items: center;
-        svg{
-            display: block;
-        }
-
-        .dt-icon{
-            padding: 0 8px;
-        }
-    }
-}
-
-
-.dt-table{
-    .ant-table-pagination{
-        margin: 0 !important;
-        padding: 10px 0;
-        border: 1px solid #f0f0f0;
-    }
-    
-    .ant-table-title{
-        padding: 8px 0 !important;
-        border: none !important;
-    }
-
-    .ant-table-resize-handle{
-        right: -7px;
-        .ant-table-resize-handle-line{
-            width: 2px;
-        }
-    }
-
-    .ant-table-body {
-        position: relative;
-        table{
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    }
-
-    .form-btns{
-        button:first-of-type {
-            margin-left: 0;
-        }
-    }
-}

package/src/components/table/src/index.vue

@@ -1,198 +0,0 @@
-
-
-<template>
-    <Table
-        ref="tableElRef"
-        class="dt-table"
-        v-bind="getBind"
-        :rowClassName="getRowClassName"
-        @change="handleTableChange"
-        @resizeColumn="handleResizeColumn"
-    >
-        <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
-            <slot :name="item" v-bind="data || {}"></slot>
-        </template>
-
-        <template #bodyCell="{ column, record, index }">
-            <template v-if="column.render">
-                <TableRender :column="column" :record="record" :index="index"></TableRender>
-            </template>
-        </template>
-    </Table>
-</template>
-
-<script lang="ts">
-    import { defineComponent, ref, unref, computed, ExtractPropTypes, toRaw } from "vue"
-    import { Table } from 'ant-design-vue'
-    import { TableProps } from './props'
-    import { BasicTableProps, SizeType, TableActionType } from "./types/table.type"
-    import { useRows } from './hooks/useRows'
-    import { Recordable } from "@dt-frames/core"
-    import { useLoading } from "./hooks/useLoading"
-    import { usePagination } from "./hooks/usePagination"
-    import { useDataSource } from "./hooks/useDataSource"
-    import { useRowSelection } from "./hooks/useRowSelection"
-    import TableHeader from './components/TableHeader.vue'
-    import TableRender from './components/TableRender.vue'
-    import { createTableInstance } from "./hooks/useTableInstance"
-    import { useColumns } from "./hooks/useColumns"
-    import { useTableHeader } from "./hooks/useTableHeader"
-    import { useTableScroll } from "./hooks/useTableScroll"
-
-
-    export default defineComponent({
-        name: 'dt-table',
-        props: TableProps,
-        components: {
-            Table,
-            TableHeader,
-            TableRender
-        },
-        emits: [
-            'register',
-            'columns-change',
-            'selection-change'
-        ],
-        setup(props, { emit, attrs, slots }) {
-            // table实例
-            const tableElRef = ref(null)
-            const tableData = ref<Recordable[]>([])
-
-            // 修改后的props属性
-            const innerPropsRef = ref<BasicTableProps>()
-
-            const getProps = computed(() => {
-                return { ...props, ...unref(innerPropsRef) } as BasicTableProps
-            })
-
-           
-            /**
-             * 重构loading状态
-            */
-            const { getLoading, setLoading } = useLoading( getProps )
-
-
-            /**
-             * 重构分页数据
-             */
-            const { getPaginationInfo, setPagination, getPagination, getShowPagination, setShowPagination } = usePagination( getProps )
-
-            // 关于列的控制
-            const {
-                getViewColumns,
-                getColumnsRef,
-                getColumns,
-                setColumns,
-                setCacheColumnsByField,
-                getCacheColumns
-            } = useColumns(getProps, getPaginationInfo)
-
-            const { 
-                getRowSelectionRef,
-                clearSelectedRowKeys,
-                getRowSelection,
-                getSelectRows,
-                getSelectRowKeys,
-
-            } = useRowSelection(getProps, emit)
-
-            // 关于滚动条的设置
-            const { getScrollRef, filterSource } = useTableScroll(
-                getProps,
-                tableElRef,
-                getColumnsRef,
-                getRowSelectionRef,
-            )
-
-            function setProps(props: Partial<BasicTableProps>) {
-                innerPropsRef.value = { ...unref(innerPropsRef), ...props };
-            }
-
-            const tableAction: TableActionType = {
-                setProps,
-                setLoading,
-                getColumns,
-                setColumns,
-                getRowSelection,
-                setCacheColumnsByField,
-                getCacheColumns,
-                getSelectRows,
-                getSelectRowKeys,
-                getSize: () => {
-                    return unref(getBind).size as SizeType;
-                }
-            }
-
-            const {
-                getRowClassName
-            } = useRows( getProps )
-
-
-            const getBind = computed(() => {
-                return {
-                    ...attrs,
-                    ...unref(getProps),
-                    ...unref(getHeaderProps),
-                    scroll: unref(getScrollRef),
-                    loading: unref( getLoading ),
-                    dataSource: toRaw(unref(filterSource)),
-                    pagination: toRaw(unref(getPaginationInfo)),
-                    rowSelection: unref(getRowSelectionRef),
-                    rowKey: unref(getProps).rowKey,
-                    columns: toRaw(unref(getViewColumns)),
-                    tableLayout: 'fixed'
-                }
-            })
-
-            // 创建实例
-            createTableInstance({ ...tableAction, tableElRef, getBind })
-
-            /**
-             * 处理表格头部内容
-            */
-            const handlers = {
-                onColumnsChange: (data: {
-                    dataIndex: string
-                    fixed: boolean | 'left' | 'right' | undefined
-                    visible: boolean
-                }[]) => {
-                    emit('columns-change', data)
-
-                    unref(getProps).onColumnsChange?.(data)
-                }
-            }
-            const { getHeaderProps } = useTableHeader(getProps, slots, handlers)
-            
-
-            /**
-             * 表格改变
-             */
-            const { 
-                handleTableChange
-            } = useDataSource(
-                getProps,
-                {
-                    getPaginationInfo,
-                    setPagination,
-                    clearSelectedRowKeys
-                },
-                emit
-            )
-
-            emit('register', tableAction)
-
-            return {
-                tableElRef,
-                getBind,
-                getRowClassName,
-                handleTableChange,
-                getSelectRows,
-                handleResizeColumn: (w, col) => {
-                    col.width = w;
-                    setCacheColumnsByField(col.dataIndex, col)
-                }
-            }
-        }
-    })
-</script>
-

package/src/components/table/src/props.ts

@@ -1,152 +0,0 @@
-import { Recordable } from '@dt-frames/core'
-import { PropType } from 'vue'
-import { DEFAULT_SORT_FN } from './const'
-import type { PaginationProps } from 'ant-design-vue/lib/pagination'
-import type { TableRowSelection } from 'ant-design-vue/lib/table/interface'
-import { ActionType, BasicColumn, BtnsType, SizeType } from './types/table.type'
-import { ButtonProps } from '../../forms'
-import { DownloadType } from './types/tableHeader.type'
-
-export const TableProps = {
-    // 点击行是否选中数据
-    clickRowSelect: { type: Boolean, default: false },
-
-    // 表格设置
-    tableSetting: {type: Array, default: ['redo', 'size', 'setting', 'fullscreen']},
-
-    // 是否显示斑马条纹
-    striped: { type: Boolean, default: true },
-
-    // 是否支持拖拽排序
-    canColDrag: { type: Boolean, default: true },
-
-    // 是否支持拖拽改变列宽
-    resizable: { type: Boolean, default: true },
-    // 最小拖拽宽度
-    minWidth: { type: Number },
-    // 最大拖拽宽度
-    maxWidth: { type: Number },
-
-    // 是否需要虚拟滚动
-    virtual: { type: Boolean, default: true },
-
-    // 排序
-    sortFn: { type: Function, default: DEFAULT_SORT_FN },
-
-    // 过滤
-    filterFn: {
-        type: Function as PropType<(data: Partial<Recordable<string[]>>) => any>,
-        default: (data: Partial<Recordable<string[]>>) => {
-            return data;
-        }
-    },
-
-    // 数据的key值
-    rowKey: {
-        type: String,
-        default: 'id'
-    },
-
-    // 默认的排序
-    defSort: { type: Object as PropType<Recordable>, default: null },
-
-    // 列 
-    columns: { type: [Array] as PropType<BasicColumn[]>, default: () => [] },
-
-    // 超出部分是否已省略号显示
-    ellipsis: { type: Boolean, default: true },
-
-    // 需要渲染的数据
-    dataSource: { type: Array as PropType<Recordable[]>, default: null },
-
-    // 表格是否需要边框
-    bordered: { type: Boolean, default: true },
-
-    // 分页数据
-    pagination: {
-        type: [Object, Boolean] as PropType<PaginationProps | boolean>,
-        default: {}
-    },
-
-    // 是否处于加载中
-    loading: { type: Boolean, default: false },
-
-    // 动态定义行class
-    rowClassName: { type: Function as PropType<(record: any, index: number) => string> },
-
-    // 定义何时出现滚动条
-    scroll: {
-        type: Object as PropType<{ x?: number | true; y?: number }>,
-        default: {},
-    },
-
-    size: {
-        type: String as PropType<SizeType>,
-        default: 'default',
-    },
-
-    // 分页、排序、筛选变化时触发
-    onTableChange: {
-        type: Function,
-        default: () => {}
-    },
-
-    // 下载
-    onDownload: {
-        type: Function,
-        default: (excelData: DownloadType) => {}
-    },
-
-    // 选中的行数据
-    rowSelection: {
-        type: Object as PropType<TableRowSelection | null>,
-        default: null,
-    },
-
-    /**
-     * 设置行属性
-     * 用法: 
-     * ( record ) => { 
-            onClick: (event) => {},
-            onDblclick: (event) => {},
-            onContextmenu: (event) => {},
-            onMouseenter: (event) => {},  // 鼠标移入行
-            onMouseleave: (event) => {}
-     * }
-    */
-    customRow: {
-        type: Function as PropType<( record, index ) => void>,
-        default: () => {}
-    },
-
-    childrenColumnName: {
-        type: String,
-        default: 'children'
-    },
-
-    showIndexColumn: {
-        type: Boolean,
-        default: false
-    },
-
-    indexColumnProps: {
-        type: [Array] as PropType<BasicColumn[]>, 
-        default: () => [],
-    },
-
-    isTreeTable: {
-        type: Boolean,
-        default: false
-    },
-
-    // 操作栏
-    operations: {
-        type: Object as PropType<ActionType | BtnsType[]>,
-    },
-
-    // 工具栏按钮
-    toolbar: {
-        type: Array as PropType<ButtonProps[]>
-    }
-
-}

package/src/components/table/src/types/table.type.ts

@@ -1,133 +0,0 @@
-import { DictType, Recordable } from '@dt-frames/core'
-import type { ColumnProps } from 'ant-design-vue/lib/table'
-import type { TableRowSelection as ITableRowSelection } from 'ant-design-vue/lib/table/interface'
-import { ExtractPropTypes, VNode, DefineComponent } from 'vue'
-import { TableProps } from '../props'
-import { SetColumnsParams } from './tableHeader.type'
-
-export interface TableRowSelection<T = any> extends ITableRowSelection {
-    // table选择发生改变
-    onChange?: (selectedRowKeys: string[] | number[], selectedRows: T[]) => any
-
-    // 触发一行选择
-    onSelect?: (record: T, selected: boolean, selectedRows: Object[], nativeEvent: Event) => any
-
-    // 全选
-    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => any
-
-    // 反选
-    onSelectInvert?: (selectedRows: string[] | number[]) => any
-}
-
-export type TableSetting = {
-    // 表格刷新
-    redo?: boolean
-    // 表格的尺寸
-    size?: boolean
-    // 是否显示列控制
-    setting?: boolean
-    // 全屏按钮
-    fullscreen?: boolean
-}
-
-export type ColumnChangeParam = {
-    dataIndex: string
-    fixed: boolean | 'left' | 'right' | undefined
-    visible: boolean
-}
-
-export type BasicTableProps = ExtractPropTypes<typeof TableProps> & {
-    onColumnsChange?: (data: ColumnChangeParam[]) => void
-}
-
-export type SizeType = 'default' | 'middle' | 'small'
-
-export type SorterResult = {
-    column: ColumnProps
-    order: 'ascend' | 'descend'
-    field: string
-    columnKey: string
-}
-
-export type CellFormat =
-  | ((text: string, record: Recordable, index: number) => any)
-  | { dict: DictType }
-  | { number: string }
-  | { date: string }
-  | { percent: string }
-  | { [key: string]: Recordable }
-  | VNode 
-  | JSX.Element
-
-export type BtnsType = {
-    title?: string
-    icon?: string
-    auth?: string
-    color?: string
-    type?: 'primary' | 'ghost' | 'dashed' | 'link' | 'text' | 'default'
-    size?: 'large' | 'middle' | 'small'
-    loading?: boolean
-    disabled?: boolean
-    ifShow?: boolean | ((column: BasicColumn) => boolean)
-    action?: (data: { 
-        row: Recordable,
-        index: number
-    }) => void
-}
-
-
-export type ActionType = {
-    title?: string
-    // 操作栏宽度
-    width?: number | string
-    // 图标是否展开
-    expand?: boolean
-    // 操作栏固定位置
-    fixed?: 'left' | 'right' | 'auto'
-    // 按钮设置
-    btns?: BtnsType[]
-}
-
-
-export interface BasicColumn extends ColumnProps {
-    // 子元素
-    children?: BasicColumn[]
-    
-    // 默认是否显示
-    defaultHidden?: boolean;
-
-    // 业务控制是否显示
-    ifShow?: boolean | ((row: Recordable) => boolean)
-
-    // 列标识
-    flag?: 'INDEX' | 'DEFAULT' | 'CHECKBOX' | 'RADIO' | 'ACTION'
-
-    // 过滤器转换
-    render?: CellFormat
-
-    edit?: boolean
-    editRow?: boolean
-    // editable?: boolean
-
-    // 是否显示序号列
-    showIndexColumn?: boolean
-
-    // 是否展开按钮组 只针对ACTION
-    expand?: boolean
-
-}
-
-
-// table相关的操作
-export type TableActionType = {
-    setProps: (props: Partial<BasicTableProps>) => void
-    setLoading: ( loading: boolean ) => void
-    getColumns: (opt?: SetColumnsParams) => BasicColumn[]
-    setColumns: (columns: BasicColumn[] | string[]) => void
-    getSize: () => SizeType
-    getRowSelection: () => TableRowSelection<Recordable>
-    getCacheColumns: () => BasicColumn[]
-    setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void
-    getSelectRows: ( ) => void
-    getSelectRowKeys: ( ) => void
-}

package/src/components/table/src/types/tableHeader.type.ts

@@ -1,27 +0,0 @@
-import { Recordable } from "@dt-frames/core"
-import { BasicColumn } from "./table.type"
-
-export type ColumnStateType = {
-    checkAll: boolean
-    isInit?: boolean
-    checkedList: string[]
-    defaultCheckList: string[]
-}
-
-export type ColumnOptionsType = {
-    label: string
-    value: string
-    fixed?: boolean | 'left' | 'right'
-}
-
-export type SetColumnsParams = {
-    ignoreIndex?: boolean
-    ignoreAction?: boolean
-    sort?: boolean
-}
-
-export type DownloadType = {
-    type: 'current' | 'select' | 'all',
-    columns?: BasicColumn[],
-    rows?: Recordable<any>[]
-}

package/src/directives/icon.ts

@@ -1,36 +0,0 @@
-/**
- * 字体图标指令，目前支持awesome、ant-design以及assets/icons/下的svg图标
- * 使用方法: <span v-icon="'fa fa-user'" :color="'red'" :fontSize="12"></span>
- * 
- * 动态设置ant-design 图标
- * https://blog.csdn.net/weixin_45803990/article/details/116270387
- */
-import { DirectiveBinding, h, render, VNode } from "vue";
-import { Nullable } from '@dt-frames/core'
-import { DtIcon } from "../components";
-
-
-function setIconHTML( el: Element, binding: any, props: any ) {
-    const value = binding.value;
-    if (!value) return;
-
-    let vm: Nullable<VNode> = null;
-
-    vm = h(DtIcon, {
-        iconClass: value,
-        size: props?.size,
-        color: props?.color || null,
-        style: {
-            display: 'block'
-        }
-    });
-
-    if( vm ) {
-        render(vm, document.createElement('div'));
-        el.appendChild(vm.el as HTMLElement);
-    }
- }
- 
-export const iconMounted = (el: Element, binding: DirectiveBinding<any>, props: any) => {
-    setIconHTML(el, binding, props.props);
-};