@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/table/src/components/TableActions.vue

@@ -1,108 +0,0 @@
-<template>
-    <template v-if="props.expand">
-        <span v-for="item in props.btns" class="dt-table-action-btn">
-            <Tooltip placement="bottom" v-if="item.ifShow">
-                <template #title>{{ item.title }}</template>
-                <span v-icon="item.icon" :color="item.color" @click="handleAction(item)"></span>
-            </Tooltip>
-        </span>
-    </template>
-
-    <template v-else>
-        <Dropdown 
-            :getPopupContainer="getPopupContainer"
-            :trigger="['click']"
-        >
-            <DtIcon :icon-class="'mdi:cog-outline'"></DtIcon>
-
-            <template #overlay>
-                <Menu class="dt-action-select">
-                    <template v-for="item in props.btns">
-                        <MenuItem
-                            v-if="item.ifShow"
-                            @click="handleAction(item)"
-                        >
-                            <DtIcon :icon-class="item.icon" :color="item.color"></DtIcon>
-                            <span>{{ item.title }}</span>
-                        </MenuItem>
-                    </template>
-                    
-                </Menu>
-            </template>
-
-        </Dropdown>
-
-    </template>
-
-</template>
-
-<script lang="ts" setup>
-    import { PropType, watch, useAttrs } from 'vue';
-    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
-    import { BtnsType } from '../types/table.type';
-    import { DtIcon } from '../../../icons/index'
-    import { isBoolean, isFunction, getPopupContainer as getParentContainer } from '@dt-frames/core';
-
-    const props = defineProps({
-        fixed: {
-            type: String as PropType<boolean | 'left' | 'right' | undefined>,
-            default: 'right'
-        },
-        title: {
-            type: String
-        },
-        expand: {
-            type: Boolean,
-            default: false
-        },
-        width: {
-            type: String,
-            default: '70px'
-        },
-        btns: {
-            type: Array as PropType<BtnsType[]>,
-            default: []
-        },
-        flag: {
-            type: String as PropType<'ACTION'>
-        },
-        record: {
-            default: { }
-        },
-        index: {
-            type: Number
-        }
-    })
-
-    watch(
-        () => props.btns,
-        (btns) => {
-            btns.map( it => {
-                it.ifShow = isBoolean( it.ifShow )
-                    ? it.ifShow
-                    : isFunction( it.ifShow )
-                    ? it.ifShow( props.record )
-                    : true
-            } )
-        },{
-            immediate: true
-        }
-    )
-
-    function handleAction(it: BtnsType) {
-        if( isFunction( it.action ) ) {
-            it.action({
-                row: props.record,
-                index: props.index
-            })
-        }
-    }
-
-    const attrs = useAttrs()
-    function getPopupContainer() {
-        return isFunction(attrs.getPopupContainer)
-          ? attrs.getPopupContainer()
-          : getParentContainer();
-    }
-
-</script>

package/src/components/table/src/components/TableHeader.vue

@@ -1,77 +0,0 @@
-<template>
-    <div class="dt-table-header">
-        <div class="dt-table-header-actions">
-            <div class="dt-table-header-actions__left">
-                <FormButtons 
-                    v-bind="getActionsProps"
-                    @handle-method="handleMethod"
-                ></FormButtons>
-                <slot name="toolbar"></slot>
-            </div>
-
-            <div class="dt-table-header-actions__right">
-                <TableSettinCom
-                    @columns-change="handleColumnChange"
-                ></TableSettinCom>
-            </div>
-        </div>
-
-        <div v-if="$slots.headerTop" style="margin: 5px">
-            <slot name="headerTop"></slot>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-    import { defineComponent, PropType } from "vue"
-    import { Button } from 'ant-design-vue'
-    import type { BtnsType, ColumnChangeParam, TableSetting } from "../types/table.type"
-    import TableSettinCom from './setting/index.vue'    
-    import { DtIcon } from '../../../icons/index'
-    import { FormButtons } from "../../../forms"
-    import { isFunction } from "@dt-frames/core"
-
-    export default defineComponent({
-        name: 'table-header',
-        components: {
-            TableSettinCom,
-            Button,
-            DtIcon,
-            FormButtons
-        },
-        props: {
-            tableTools: {
-                type: Object as PropType<TableSetting>
-            },
-            toolbar: {
-                type: Array as PropType<BtnsType[]>,
-                default: []
-            }
-        },
-        emits: ['columns-change'],
-        setup(props, { emit }) {
-            function handleColumnChange(data: ColumnChangeParam[]) {
-                emit('columns-change', data);
-            }
-
-            function handleMethod( e ) {
-                if( isFunction(e.onClick) ) {
-                    e.onClick()
-                }
-            }
-
-            const getActionsProps = {
-                mode: null,
-                showAdvancedButton: false,
-                show: true,
-                buttonList: props.toolbar
-            } as any
-
-            return {
-                getActionsProps,
-                handleColumnChange,
-                handleMethod
-            }
-        }
-    })
-</script>

package/src/components/table/src/components/TableRender.vue

@@ -1,76 +0,0 @@
-<script lang="tsx">
-    import { getDictValueByCode, isFunction, isObject, Recordable, formatNumber, isVnode } from '@dt-frames/core'
-    import dayjs from 'dayjs'
-    import { defineComponent, PropType, unref, ref, h, toRaw, render as render1, resolveComponent, resolveDynamicComponent, createVNode } from 'vue'
-    import { BasicColumn } from '../types/table.type'
-
-    export default defineComponent({
-        name: 'TableFormat',
-        props: {
-            column: {
-                type: Object as PropType<BasicColumn>
-            },
-            record: {
-                type: Object as PropType<Recordable>
-            },
-            index: {
-                type: Number
-            }
-        },
-        setup(props: {
-            column: BasicColumn,
-            record: Recordable,
-            index: number
-        }) {
-            let renderText = ref()
-
-            function renderCell() {
-                const { column, record, index } = props
-                const { render, dataIndex } = column
-                const text = record[dataIndex.toString()]
-                
-                if( isFunction(render) ) {
-                    renderText.value = render(text, record, index)
-                }
-
-                if( isObject(render) ) {
-                    const { dict, date, number, percent } = render as Recordable
-                     
-                    if( dict ) {
-                        renderText = getDictValueByCode(text, dict)
-                    }
-
-                    if( date ) {
-                        renderText.value = dayjs(text).format(date || 'YYYY-MM-DD')
-                    }
-
-                    if( number ) {
-                        renderText.value = formatNumber(text, number)
-                    }
-
-                    if( percent ) {
-                        renderText.value = formatNumber((text || 0) * 100, percent) + '%'
-                    }
-
-                    if( isVnode(render) ) {
-                        renderText.value = render
-                    }
-
-                    if( render['setup'] ) {
-                        renderText.value = createVNode(render as any, { text })
-                    }
-
-                    
-                } else {
-                    console.log(text)
-                    renderText.value = text
-                }
-            }
-
-            renderCell()
-
-            return () => <span>{unref(renderText)}</span>
-        }
-    })
-
-</script>

package/src/components/table/src/components/setting/Column.vue

@@ -1,355 +0,0 @@
-<template>
-    <Tooltip placement="top">
-        <template #title>
-            <span>列控制</span>
-        </template>
-
-        <Popover
-            placement="bottomLeft"
-            trigger="click"
-            :overlayClassName="`${prefixCls}__cloumn-list`"
-            @visibleChange="handleVisibleChange"
-            :getPopupContainer="getPopupContainer"
-        >
-
-            <template #title>
-                <div :class="`${ prefixCls }__popover-title`">
-                    <Checkbox
-                        :indeterminate="indeterminate"
-                        v-model:checked="state.checkAll"
-                        @change="onCheckAllChange"
-                    >
-                        列展示
-                    </Checkbox>
-
-                    <Checkbox v-model:checked="checkIndex" @change="handleIndexCheckChange">
-                        序列号
-                    </Checkbox>
-
-                    <Checkbox v-model:checked="checkSelect" @change="handleSelectCheckChange" :disabled="!defaultRowSelection">
-                        复选框
-                    </Checkbox>
-
-                    <Button size="small" type="link" @click="reset">重置</Button>
-                </div>
-            </template>
-
-            <template #content>
-                    <CheckboxGroup v-model:value="state.checkedList" @change="onChange" ref="columnListRef">
-                        <template v-for="item in plainOptions" :key="item.value">
-                         <!-- v-if="!!(item as any).ifShow" -->
-                            <div :class="`${ prefixCls }__check-item`">
-                                <span v-icon="'ant-design:drag-outlined'" :size="16" :className="'drag-icon'"></span>
-
-                                <Checkbox :value="item.value">
-                                    {{ item.label }}
-                                </Checkbox>
-
-                                <Tooltip
-                                    placement="bottomLeft"
-                                    :mouseLeaveDelay="0.4"
-                                    :getPopupContainer="getPopupContainer"
-                                >
-                                    <template #title>固定到左侧</template>
-                                    <span :class="{
-                                        disabled: !state.checkedList.includes(item.value),
-                                        active: item.fixed === 'left'
-                                    }">
-                                        <DtIcon 
-                                            :icon-class="'mdi:arrow-collapse-left'" 
-                                            :className="`${ prefixCls }__fixed-left`" 
-                                            @click="handleColumnFixed(item, 'left')"
-                                            :size="16"
-                                        ></DtIcon>
-                                    </span>
-                                </Tooltip>
-
-                                <Divider type="vertical" />
-
-                                <Tooltip
-                                    placement="bottomLeft"
-                                    :mouseLeaveDelay="0.4"
-                                    :getPopupContainer="getPopupContainer"
-                                >
-                                    <template #title>固定到右侧</template>
-                                    <span :class="{
-                                        disabled: !state.checkedList.includes(item.value),
-                                        active: item.fixed === 'right',
-                                    }">
-                                        <DtIcon 
-                                            :icon-class="'mdi:arrow-collapse-right'" 
-                                            :className="`${prefixCls}__fixed-right`" 
-                                            @click="handleColumnFixed(item, 'right')"
-                                            :size="16"
-                                        ></DtIcon>
-                                    </span>
-                                    
-                                </Tooltip>
-                            </div>
-                        </template>
-                    </CheckboxGroup>
-            </template>
-
-            <span v-icon="'ant-design:setting-outlined'"></span>
-        </Popover>
-    </Tooltip>
-</template>
-
-<script lang="ts" setup>
-    import { Tooltip, Popover, Checkbox, Button, CheckboxGroup, Divider } from 'ant-design-vue'
-    import { getPopupContainer as getParentContainer, isNullAndUnDef } from '@dt-frames/core'
-    import { DtIcon } from '../../../../icons/index'
-    import { computed, reactive, ref, unref, watchEffect, useAttrs } from 'vue'
-    import type { ColumnStateType, ColumnOptionsType } from '../../types/tableHeader.type'
-    import { getTableInstance } from '../../hooks/useTableInstance'
-    import { BasicColumn } from '../../types/table.type'
-    import { nextTick } from 'process'
-    import { isFunction } from '@vueuse/core'
-    import { cloneDeep, omit } from 'lodash-es'
-
-    import Sortablejs from 'sortablejs'
-    import type Sortable from 'sortablejs'
-    import { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
-
-
-    const emits = defineEmits([
-        'columns-change'
-    ])
-
-    const attrs = useAttrs()
-
-    const prefixCls = 'column-setting'
-
-    const table = getTableInstance()
-    const defaultRowSelection = omit(table.getRowSelection(), 'selectedRowKeys')
-
-    let inited = false
-
-    const cachePlainOptions = ref<ColumnOptionsType[]>([])
-    const plainOptions = ref<ColumnOptionsType[]>([])
-    const plainSortOptions = ref<ColumnOptionsType[]>([])
-
-    // 列表实例
-    const columnListRef = ref(null)
-
-    // 是否显示序列号
-    const checkIndex = ref(false)
-    // 是否显示复选框
-    const checkSelect = ref(false)
-
-    const getValues = computed(() => {
-        return unref(table?.getBind);
-    })
-    
-    let sortable: Sortable
-    let sortableOrder: string[] = []
-
-    const state = reactive<ColumnStateType>({
-        checkAll: true,
-        checkedList: [],
-        defaultCheckList: []
-    })
-
-    // 列展示半选状态
-    const indeterminate = computed(() => {
-        let len = plainOptions.value.length
-        let checkedLen = state.checkedList.length
-
-        unref(checkIndex) && checkedLen--
-
-        return checkedLen > 0 && checkedLen < len
-    })
-
-    watchEffect(() => {
-        const columns = table.getColumns()
-        
-        if( columns && columns.length ) {
-            init()
-        }
-    })
-
-    watchEffect(() => {
-        const values = unref(getValues)
-
-        checkIndex.value = !!values.showIndexColumn
-        checkSelect.value = !!values.rowSelection
-    })
-
-
-    function handleVisibleChange() {
-        if( inited ) return
-
-        nextTick(() => {
-            const columnListEl = unref( columnListRef )
-            if( !columnListEl ) return 
-
-            const el = columnListEl.$el as any
-            if( !el ) return
-
-            sortable = Sortablejs.create(unref(el), {
-                animation: 500,
-                delay: 400,
-                delayOnTouchOnly: true,
-                handle: '.drag-icon ',
-                onEnd: (evt) => {
-                    const { oldIndex, newIndex } = evt
-
-                    if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
-                        return;
-                    }
-
-                    const columns = cloneDeep(plainSortOptions.value)
-
-                    if (oldIndex > newIndex) {
-                        columns.splice(newIndex, 0, columns[oldIndex]);
-                        columns.splice(oldIndex + 1, 1)
-                    } else {
-                        columns.splice(newIndex + 1, 0, columns[oldIndex]);
-                        columns.splice(oldIndex, 1)
-                    }
-
-                    plainSortOptions.value = columns
-                    setColumns(columns)
-                }
-            })
-
-            sortableOrder = sortable.toArray()
-            inited = true
-        })
-    }
-
-    // 全选复选框改变
-    function onCheckAllChange(e: CheckboxChangeEvent) {
-        const checkList = plainOptions.value.map((item) => item.value)
-
-        if( e.target.checked ) {
-            state.checkedList = checkList
-            setColumns(checkList)
-        }else {
-          state.checkedList = []
-          setColumns([])
-        }
-    }
-
-    // 显示序列号
-    function handleIndexCheckChange(e: CheckboxChangeEvent) {
-        table.setProps({
-            showIndexColumn: e.target.checked,
-        })
-    }
-
-    // table上是否显示复选框
-    function handleSelectCheckChange(e: CheckboxChangeEvent) {
-        table.setProps({
-            rowSelection: e.target.checked ? defaultRowSelection : null,
-        })
-    }
-
-    // 复选框选择
-    function onChange(checkedList: string[]) {
-        const len = plainSortOptions.value.length
-        state.checkAll = checkedList.length === len
-
-        const sortList = unref(plainSortOptions).map((item) => item.value)
-        checkedList.sort((prev, next) => {
-            return sortList.indexOf(prev) - sortList.indexOf(next);
-        })
-
-        setColumns(checkedList)
-    }
-
-    // 重置所有选项
-    function reset() {
-        state.checkedList = [...state.defaultCheckList]
-        state.checkAll = true
-
-        plainOptions.value = unref(cachePlainOptions)
-        plainSortOptions.value = unref(cachePlainOptions)
-        setColumns(table.getCacheColumns())
-        sortable.sort(sortableOrder)
-    }
-
-    function getColumns() {
-        return table.getColumns({ 
-            ignoreIndex: true, 
-            ignoreAction: true 
-        }).reduce( (ret, it) => {
-            ret.push({
-                label: it.title,
-                value: it.dataIndex || it.title,
-                ...it
-            })
-
-            return ret
-        }, [] )
-    }
-
-    function handleColumnFixed(item: BasicColumn, fixed?: 'left' | 'right') {
-        if (!state.checkedList.includes(item.dataIndex as string)) return
-
-        const columns = getColumns() as BasicColumn[]
-        const isFixed = item.fixed === fixed ? false : fixed
-        const index = columns.findIndex( col => col.dataIndex === item.dataIndex )
-
-        if( index !== -1 ) {
-            columns[index].fixed = isFixed
-        }
-
-        item.fixed = isFixed
-
-        if (isFixed && !item.width) {
-            item.width = 100;
-        }
-
-        table.setCacheColumnsByField?.(item.dataIndex as string, { fixed: isFixed })
-        setColumns(columns)
-    }
-
-    function setColumns(columns: BasicColumn[] | string[]) {
-        table.setColumns(columns)
-
-        const data = unref(plainSortOptions).map( col => {
-            const visable = columns.findIndex(
-                (c: BasicColumn | string) => c === col.value || (typeof c !== 'string' && c.dataIndex === col.value)
-            ) !== -1
-
-            return { dataIndex: col.value, fixed: col.fixed, visable }
-        } )
-
-        emits('columns-change', data)
-    }
-
-    function init() {
-        const columns = getColumns()
-
-        const checkList = table
-            .getColumns({ ignoreAction: true })
-            .map( it => it.defaultHidden ? '' : (it.dataIndex || it.title) )
-            .filter( Boolean ) as string[]
-
-        if(!plainOptions.value.length) {
-
-            plainOptions.value = columns
-            plainSortOptions.value = columns
-            cachePlainOptions.value = cloneDeep(columns)
-            state.defaultCheckList = checkList
-
-        } else {
-            unref( plainOptions )
-                .forEach( 
-                    (it: BasicColumn) => 
-                    it.fixed === columns.find(col => col.dataIndex === it.dataIndex)?.fixed 
-                )
-        }
-
-        state.isInit = true
-        state.checkedList = checkList
-    }
-
-
-    function getPopupContainer() {
-        return isFunction(attrs.getPopupContainer)
-          ? attrs.getPopupContainer()
-          : getParentContainer();
-    }
-</script>

package/src/components/table/src/components/setting/Download.vue

@@ -1,55 +0,0 @@
-<template>
-<!--  -->
-    <Tooltip placement="top">
-        <template #title>
-            <span>导出</span>
-        </template>
-
-         <Dropdown 
-            placement="bottom" 
-            :trigger="['click']" 
-            :getPopupContainer="getPopupContainer"
-        >
-            <span v-icon="'ic:baseline-file-download'"></span>
-
-            <template #overlay>
-                <Menu 
-                    @click="handleTitleClick"
-                >
-                    <MenuItem key="current"> <span>导出当前页</span> </MenuItem>
-                    <MenuItem key="select"> <span>导出选中列</span> </MenuItem>
-                    <MenuItem key="all"> <span>导出所有列</span> </MenuItem>
-                </Menu>
-            </template>
-        </Dropdown>
-    </Tooltip>
-</template>
-
-<script lang="ts" setup>
-    import { getPopupContainer } from '@dt-frames/core';
-    import { unref } from 'vue'
-    import { Tooltip, Dropdown, Menu, MenuItem } from 'ant-design-vue'
-    import { DtIcon } from '../../../../icons/index'
-    import { getTableInstance } from '../../hooks/useTableInstance';
-
-    const table = getTableInstance()
-    
-
-
-    function handleTitleClick({ key }) {
-        const { onDownload, columns: allColumns, dataSource, rowSelection } = unref(table.getBind)
-
-        const excludesFlag = [ 'ACTION', 'CHECKBOX', 'RADIO' ]
-        const columns = allColumns.filter( it => !excludesFlag.includes(it.flag) )
-
-        onDownload( {
-            type: key,
-            columns, 
-            rows: key === 'select' 
-                ? table.getSelectRows()
-                : key === 'current' 
-                    ? dataSource
-                    : []
-        } )
-    }
-</script>