@dt-frames/ui 1.0.12 → 1.0.16

package/src/components/container/index.ts

@@ -1,8 +0,0 @@
-import ScrollContainer from './src/scroll-container.vue';
-import LazyContainer from './src/lazy-container.vue';
-
-
-export {
-    ScrollContainer,
-    LazyContainer
-}

package/src/components/container/src/bar.ts

@@ -1,107 +0,0 @@
-import {
-	defineComponent,
-	h,
-	computed,
-	ref,
-	getCurrentInstance,
-	onUnmounted,
-	inject,
-	Ref,
-} from 'vue';
-import { off, on, renderThumbStyle, BAR_MAP, Nullable } from '@dt-frames/core';
-
-export default defineComponent({
-	name: 'Bar',
-
-	props: {
-		vertical: Boolean,
-		size: String,
-		move: Number,
-	},
-
-	setup(props) {
-		const instance = getCurrentInstance();
-		const thumb = ref();
-		const wrap = inject('scroll-bar-wrap', {} as Ref<Nullable<HTMLElement>>) as any;
-		const bar = computed(() => {
-			return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
-		});
-		const barStore = ref({} as any);
-		const cursorDown = ref();
-		const clickThumbHandler = (e: any) => {
-			if (e.ctrlKey || e.button === 2) {
-				return;
-			}
-			window.getSelection()?.removeAllRanges();
-			startDrag(e);
-			barStore.value[bar.value.axis] =
-				e.currentTarget[bar.value.offset] -
-				(e[bar.value.client] - e.currentTarget.getBoundingClientRect()[bar.value.direction]);
-		};
-
-		const clickTrackHandler = (e: any) => {
-			const offset = Math.abs(
-				e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client],
-			);
-			const thumbHalf = thumb.value[bar.value.offset] / 2;
-			const thumbPositionPercentage =
-				((offset - thumbHalf) * 100) / instance?.vnode.el?.[bar.value.offset];
-
-			wrap.value[bar.value.scroll] =
-				(thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
-		};
-		const startDrag = (e: any) => {
-			e.stopImmediatePropagation();
-			cursorDown.value = true;
-			on(document, 'mousemove', mouseMoveDocumentHandler);
-			on(document, 'mouseup', mouseUpDocumentHandler);
-			document.onselectstart = () => false;
-		};
-
-		const mouseMoveDocumentHandler = (e: any) => {
-			if (cursorDown.value === false) return;
-			const prevPage = barStore.value[bar.value.axis];
-
-			if (!prevPage) return;
-
-			const offset =
-				(instance?.vnode.el?.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) *
-				-1;
-			const thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
-			const thumbPositionPercentage =
-				((offset - thumbClickPosition) * 100) / instance?.vnode.el?.[bar.value.offset];
-			wrap.value[bar.value.scroll] =
-				(thumbPositionPercentage * wrap.value[bar.value.scrollSize]) / 100;
-		};
-
-		function mouseUpDocumentHandler() {
-			cursorDown.value = false;
-			barStore.value[bar.value.axis] = 0;
-			off(document, 'mousemove', mouseMoveDocumentHandler);
-			document.onselectstart = null;
-		}
-
-		onUnmounted(() => {
-			off(document, 'mouseup', mouseUpDocumentHandler);
-		});
-
-		return () =>
-			h(
-				'div',
-				{
-					class: ['scrollbar__bar', 'is-' + bar.value.key],
-					onMousedown: clickTrackHandler,
-				},
-				h('div', {
-					ref: thumb,
-					class: 'scrollbar__thumb',
-					onMousedown: clickThumbHandler,
-					style: renderThumbStyle({
-						size: props.size,
-						move: props.move,
-						bar: bar.value,
-					}),
-				}),
-			);
-	},
-});

package/src/components/container/src/lazy-container.vue

@@ -1,9 +0,0 @@
-<template>
-    <div>
-        这是一个测试
-    </div>
-</template>
-
-<script setup lang="ts">
-
-</script>

package/src/components/container/src/scroll-bar.vue

@@ -1,117 +0,0 @@
-<template>
-    <div class="scrollbar">
-        <div 
-            ref="wrap"
-            :class="[wrapClass, 'scrollbar__wrap', native ? '' : 'scrollbar__wrap--hidden-default' ]"
-            :style="style"
-            @scroll="handleScroll"
-        >
-            <component 
-                :is="tag" 
-                ref="resize" 
-                :class="['scrollbar__view', viewClass]" 
-                :style="viewStyle"
-            >
-                <slot></slot>
-            </component>
-        </div>
-
-        <template v-if="!native">
-            <bar :move="moveX" :size="sizeWidth" />
-            <bar vertical :move="moveY" :size="sizeHeight" />
-        </template>
-        
-    </div>
-</template>
-
-<script setup lang="ts">
-    import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, unref } from "vue";
-    import { addResizeListener, removeResizeListener, useAppStore } from "@dt-frames/core";
-    import Bar from './bar';
-
-    const { getScrollConf } = useAppStore()
-    const { native } = getScrollConf
-
-    const sizeWidth = ref('0');
-    const sizeHeight = ref('0');
-    const moveX = ref(0);
-    const moveY = ref(0);
-    const wrap = ref();
-    const resize = ref();
-
-    const props = defineProps({
-        wrapClass: {
-            type: [String, Array],
-            default: ''
-        },
-        wrapStyle: Array,
-        viewClass: {
-            type: [String, Array],
-            default: '',
-        },
-        viewStyle: {
-            type: [String, Array],
-            default: '',
-        },
-        noresize: Boolean,
-        tag: {
-            type: String,
-            default: 'div'
-        }
-    });
-
-    provide('scroll-bar-wrap', wrap);
-
-    // 设置容器style
-    const style = computed(() => {
-        let rsStyle = {};
-
-        if( Array.isArray(props.wrapStyle) ) {
-            props.wrapStyle.forEach( it => {
-                if( it ) rsStyle = Object.assign( {}, rsStyle, it );
-            } )
-        }
-
-        return rsStyle;
-    });
-
-
-    // 设置容器的滚动事件
-    const handleScroll = () => {
-        if (!native) {
-            moveY.value = ( unref(wrap).scrollTop * 100 ) / unref( wrap ).clientHeight;
-            moveX.value = ( unref(wrap).scrollLeft * 100 ) / unref( wrap ).clientWidth;
-        }
-    };
-
-    const update = () => {
-        if (!unref(wrap)) return;
-
-        const heightPercentage = (unref(wrap).clientHeight * 100) / unref(wrap).scrollHeight;
-        const widthPercentage = (unref(wrap).clientWidth * 100) / unref(wrap).scrollWidth;
-
-        sizeHeight.value = heightPercentage < 100 ? heightPercentage + '%' : '';
-        sizeWidth.value = widthPercentage < 100 ? widthPercentage + '%' : '';
-    };
-
-    onMounted(() => {
-        if ( native ) return;
-        nextTick(update);
-        
-        if (!props.noresize) {
-            addResizeListener(unref(resize), update);
-            addResizeListener(unref(wrap), update);
-            addEventListener('resize', update);
-        }
-    });
-
-    onBeforeUnmount(() => {
-        if (native) return;
-        if (!props.noresize) {
-            removeResizeListener(unref(resize), update);
-            removeResizeListener(unref(wrap), update);
-            removeEventListener('resize', update);
-        }
-    });
-
-</script>

package/src/components/container/src/scroll-container.vue

@@ -1,61 +0,0 @@
-<template>
-    <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
-        <slot></slot>
-    </Scrollbar>
-</template>
-
-<script setup lang="ts">
-
-    import { nextTick, ref, unref } from 'vue';
-    import { useScrollTo } from '@dt-frames/core';
-
-    import Scrollbar from './scroll-bar.vue';
-
-
-    const scrollbarRef = ref(null);
-
-    // 滚动到指定位置
-    function scrollTo( to: number, duration = 500 ) {
-        const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) return;
-        
-        nextTick(() => {
-            const wrap = unref(scrollbar.wrap);
-            if (!wrap) return;
-            
-            const { start } = useScrollTo({
-                el: wrap,
-                to,
-                duration,
-            });
-
-            start();
-        });
-    }
-
-
-    function getScrollWrap() {
-        const scrollbar = unref(scrollbarRef);
-        return !scrollbar ? null : scrollbar.wrap;
-    }
-
-
-    function scrollBottom() {
-        const scrollbar = unref(scrollbarRef);
-        if (!scrollbar) return;
-
-        nextTick(() => {
-            const wrap = unref(scrollbar.wrap) as any;
-            if (!wrap) return;
-            
-            const scrollHeight = wrap.scrollHeight as number;
-            const { start } = useScrollTo({
-                el: wrap,
-                to: scrollHeight,
-            });
-
-            start();
-        });
-    }
-
-</script>

package/src/components/curd/index.ts

@@ -1,5 +0,0 @@
-import { useCurd } from './src/hooks/useCurd'
-
-export {
-    useCurd
-}

package/src/components/curd/src/components/dialog.vue

@@ -1,74 +0,0 @@
-<template>
-    <!-- <a>打开弹框</a> -->
-    <DtModal @register="registerDialog" @save="handleSave">
-        <DtForm @register="registerForm" ></DtForm>
-    </DtModal>
-</template>
-
-<script lang="ts" setup>
-    import { isFunction, Recordable } from "@dt-frames/core";
-    import { omit } from 'lodash-es'
-    import { Ref, PropType, watch, toRaw, unref, watchEffect } from "vue";
-    import { useForm, DtForm, FormProps } from "../../../forms";
-    import { DtModal, useModal } from "../../../modal"
-    import { basicProps } from "./props";
-    
-    const props = defineProps( {
-        ...basicProps,
-        ...{ 
-            onRegister: { type: Function },
-            formProps: {
-                type: Object as PropType<Partial<FormProps>>,
-                default: () => ({})
-            },
-            formsVal: {
-                type: Object as PropType<Ref<Recordable>>
-            }
-        }
-    } )
-
-    const [registerDialog, { closeModal }] = useModal({
-        ...omit(toRaw(props), [
-            'actions',
-            'curd',
-            'formProps',
-            'formsVal',
-            'onRegister',
-            'schemas'
-        ]),
-        destroyOnClose: true
-    })
-
-    const [ registerForm, { getFormValues, setFormValues } ] = useForm({
-        ...( props.formProps || {} ),
-        schemas: props.schemas,
-        mode: 'dialog'
-    })
-
-    watch(
-        () => props.formsVal.value,
-        v => {
-            if( v ) {
-                setFormValues( toRaw(v) )
-            }
-        }
-    )
-
-
-    function handleSave() {
-        if( props.curd && isFunction( props.curd?.onAdd ) ) {
-
-            let obj = Object.assign(
-                {}, 
-                props.formsVal.value || {},
-                getFormValues()
-            )
-            
-            let pro = obj.id 
-                ? props.curd.onUpdate( obj )
-                : props.curd.onAdd( obj )
-
-            pro.then( rsp => closeModal() )
-        }
-    }
-</script>

package/src/components/curd/src/components/props.ts

@@ -1,32 +0,0 @@
-import { FormSchema, ButtonProps } from "../../../forms";
-import { PropType } from "vue";
-
-export const basicProps = {
-    title: {
-        type: String,
-        default: ''
-    },
-    width: {
-        type: String as PropType<number | string>,
-        default: '50%'
-    },
-    schemas: {
-        type: Array as PropType<FormSchema[]>,
-        default: []
-    },
-    actions: {
-        type: Array as PropType<ButtonProps[]>,
-        default: []
-    },
-    canFullscreen: {
-        type: Boolean,
-        default: true
-    },
-    closable: {
-        type: Boolean,
-        default: true
-    },
-    curd: {
-        type: Object as PropType<{[key: string]: Function}>
-    }
-}

package/src/components/curd/src/hooks/useCurd.tsx

@@ -1,87 +0,0 @@
-import { error, isFunction, Recordable, useMessage } from "@dt-frames/core";
-import { h, ref } from "vue"
-import { useModalOut } from "../../../modal"
-import DtModal from "../components/dialog.vue";
-import { CrudOptType } from "../types/curd.type";
-
-
-export function useCurd(curdOpt: CrudOptType) {
-    const formsVal = ref<Recordable>()
-    const [register, { closeModal, setModalProps, openModal }] = useModalOut()
-    const { confirm } = useMessage()
-
-    const DtCurdModal = () => {
-        return h(
-                <div class="curdModal">
-                    <DtModal 
-                        { ...curdOpt }
-                        formsVal = { formsVal }
-                        formProps = { curdOpt.formProps as any }
-                        onRegister = { register }
-                    ></DtModal>
-                </div>
-            )
-    }
-
-    // 新增弹框
-    function add() {
-        openModal()
-    }
-
-    // 删除
-    function del({ row }: Recordable) {
-        const { primaryKey = 'id', curd } = curdOpt
-        
-        if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
-            confirm({
-                title: '删除确认',
-                content: '确认要删除选中的数据？',
-                iconType: 'warning',
-                onOk() {
-                    curd.onDeletes( [row[ primaryKey ]] )
-                }
-            })
-        } else {
-            error(`缺少curd函数配置, 请将useSource中返回的curd参数传入useCurd配置项中!`)
-        }
-    }
-
-    // 编辑弹框
-    function update({ row }: Recordable) {
-        const { primaryKey = 'id', curd } = curdOpt
-
-        curd.onQueryById(row[primaryKey]).then( rsp => {
-            formsVal.value = rsp
-        } )
-
-        openModal()
-    }
-
-    
-    // 批量删除
-    function dels(ids: string[] = []) {
-        const { curd } = curdOpt
-
-        if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
-            confirm({
-                title: '批量删除确认',
-                content: '确认要批量删除选中的数据？',
-                iconType: 'warning',
-                onOk() {
-                    curd.onDeletes( ids )
-                }
-            })
-        } else {
-            error(`缺少curd函数配置, 请将useSource中返回的curd参数传入useCurd配置项中!`)
-        }
-    }
-
-    return {
-        DtCurdModal,
-        add,
-        del,
-        dels,
-        update
-    }
-
-}

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

@@ -1,31 +0,0 @@
-import { Recordable } from "@dt-frames/core"
-import { FormSchema, ButtonProps, FormProps } from "../../../forms/src/types/form.type"
-
-export type CrudOptType = {
-    // 标题
-    title?: string
-    // 弹框宽度
-    width?: string | number
-    // 条目
-    schemas: FormSchema[]
-    // 操作栏
-    actions?: ButtonProps[]
-    // 是否显示全屏
-    showFullscreen?: boolean
-    // 是否显示关闭按钮
-    showClose?: boolean
-    // 物理主键
-    primaryKey?: string
-    // 弹框中表格的属性
-    formProps?: Partial<FormProps>,
-    // 增删改查接口
-    curd?: {
-        onAdd?: ( model: Recordable ) => void
-        onUpdate?: ( model: Recordable ) => void
-        onDeletes?: ( keys: string[] ) => void
-        onExport?: () => void
-        onQueryById?: ( id: string ) => Promise<Recordable>
-        [key: string]: any
-    }
-
-}

package/src/components/excel/index.ts

@@ -1,6 +0,0 @@
-import { handleDownloadPage, export2Excel } from './src/export2Excel'
-
-export {
-    handleDownloadPage,
-    export2Excel
-}

package/src/components/excel/src/export2Excel.ts

@@ -1,44 +0,0 @@
-import * as xlsx from 'xlsx'
-import type { WorkBook } from 'xlsx'
-import { DownloadType } from "../../table/src/types/tableHeader.type";
-import { dateFormat } from '@dt-frames/core';
-
-export function handleDownloadPage({
-    columns = [],
-    rows = []
-}: DownloadType,
-    exportName: string = ''
-) {
-    const titles = columns.map( it => it.title )
-    
-    const content = rows.reduce( (total, it) => {
-        const rowData = columns.map( column => it[column.dataIndex.toString()] )
-
-        total.push( rowData )
-        return total
-    }, [] ) as string[][]
-
-    export2Excel(
-        [titles].concat(content) as string[][],
-        exportName
-    )
-}
-
-
-export function export2Excel(data: string[][] = [], exportName: string = '') {
-    const worksheet = xlsx.utils.aoa_to_sheet(data)
-    const fileName = exportName + '_' + dateFormat(new Date(), 'yyyyMMdd') + '.xlsx'
-
-    const workbook: WorkBook = {
-        SheetNames: [fileName],
-        Sheets: {
-            [fileName]: worksheet,
-        },
-      };
-
-    xlsx.writeFile(
-        workbook, 
-        fileName, 
-        { bookType: 'xlsx' }
-    )
-}

package/src/components/forms/index.less

@@ -1,107 +0,0 @@
-@import '../modal/index.less';
-
-.text-secondary{
-    color: #666;
-}
-
-.suffix-item .suffix {
-    display: inline-flex;
-    padding-left: 6px;
-    margin-top: 1px;
-    line-height: 1;
-    align-items: center;
-}
-
-.form-btns{
-    button{
-        margin-left: 12px;
-    }
-
-    .advanced{
-        margin-left: 8px;
-        .text{
-            margin-right: 5px;
-        }
-        .basic-arrow{
-            margin-left: -8px;
-        }
-    }
-}
-
-.basic-arrow{
-    display: inline-block;
-    cursor: pointer;
-    transform: rotate(0deg);
-    transition: all 0.3s ease 0.1s;
-    transform-origin: center center;
-
-    
-    .dt-icon{
-        vertical-align: middle;
-        color: @primary-color !important;
-    }
-
-    &--active{
-        transform: rotate(180deg);
-    }
-}
-
-.form-btns{
-    .ant-form-item-control-input-content{
-        display: flex;
-        .ant-btn{
-            display: flex;
-            align-items: center;
-        }
-        .ant-btn .dt-icon{
-            font-size: 20px;
-            height: 100%;
-
-            svg{
-                display: block;
-                height: 100%;
-                text-align: center;
-            }
-
-            .preIcon{
-                padding-right: 2px;
-            }
-        }
-
-        .ant-btn-primary .dt-icon svg{
-            color: #fff;
-        }
-    }
-}
-
-.basic-form--compact{
-    .ant-form-item {
-        margin-bottom: 14px !important;
-    }
-}
-
-.input-with-dialog{
-    position: relative;
-    span{
-        background: none;
-        cursor: pointer;
-    }
-
-    i{
-        position: absolute;
-        right: 15px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        line-height: 32px;
-        opacity: 0.3;
-        cursor: pointer;
-    }
-    
-    .ant-input{
-        color: #333;
-        cursor: pointer;
-    }
-}
-
-