@dt-frames/ui 1.0.1 → 1.0.4

package/src/components/table/index.less

@@ -0,0 +1,162 @@
+.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/index.ts

@@ -0,0 +1,7 @@
+import { useTable } from './src/hooks/useTable';
+import DtTable from "./src/index.vue"
+
+export {
+    DtTable, 
+    useTable 
+}

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

@@ -0,0 +1,108 @@
+<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

@@ -0,0 +1,77 @@
+<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

@@ -0,0 +1,76 @@
+<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>