@dt-frames/ui 1.0.1 → 1.0.4

package/src/components/container/index.ts

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+<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 } from "../../../forms";
+    import { DtModal, useModal } from "../../../modal"
+    import { basicProps } from "./props";
+    
+    const props = defineProps( {
+        ...basicProps,
+        ...{ 
+            onRegister: { type: Function },
+            formProps: {
+                type: Object as PropType<Ref<Recordable>>
+            }
+        }
+    } )
+
+    const [registerDialog, { }] = useModal({
+        ...omit(toRaw(props), [
+            'actions',
+            'curd',
+            'formProps',
+            'onRegister',
+            'schemas'
+        ])
+    })
+
+    const [ registerForm, { getFormValues, setFormValues } ] = useForm({
+        schemas: props.schemas,
+        mode: 'dialog'
+    })
+
+    watch(
+        () => props.formProps.value,
+        v => {
+            if( v ) {
+                setFormValues( toRaw(v) )
+            }
+        }
+    )
+
+
+    function handleSave() {
+        if( props.curd && isFunction( props.curd?.onAdd ) ) {
+
+            let obj = Object.assign(
+                {}, 
+                props.formProps.value || {},
+                getFormValues()
+            )
+            
+            obj.id 
+                ? props.curd.onUpdate( obj )
+                : props.curd.onAdd( obj )
+        }
+    }
+</script>

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

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

@@ -0,0 +1,72 @@
+import { DtCreateDialog, error, isFunction, Recordable } from "@dt-frames/core";
+import { DtForm, useForm } from "../../../forms";
+import { h, ref, unref } from "vue"
+import { useModal, useModalOut } from "../../../modal"
+import DtModal from "../components/dialog.vue";
+import { CrudOptType } from "../types/curd.type";
+
+
+export function useCurd(curdOpt: CrudOptType) {
+    const formProps = ref<Recordable>()
+    const [register, { closeModal, setModalProps, openModal }] = useModalOut()
+
+    const DtCurdModal = () => {
+        return h(
+                <div class="curdModal">
+                    <DtModal 
+                        { ...curdOpt }
+                        formProps = { formProps }
+                        onRegister = { register }
+                    ></DtModal>
+                </div>
+            )
+    }
+
+    // 新增弹框
+    function add() {
+        openModal()
+    }
+
+    // 删除
+    function del({ row }: Recordable) {
+        const { primaryKey = 'id', curd } = curdOpt
+        
+        if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
+            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 => {
+            formProps.value = rsp
+        } )
+
+        openModal()
+    }
+
+    
+    // 批量删除
+    function dels(ids: string[] = []) {
+        const { curd } = curdOpt
+
+        if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
+            curd.onDeletes( ids )
+        } else {
+            error(`缺少curd函数配置, 请将useSource中返回的curd参数传入useCurd配置项中!`)
+        }
+    }
+
+    return {
+        DtCurdModal,
+        add,
+        del,
+        dels,
+        update
+    }
+
+}

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

@@ -0,0 +1,29 @@
+import { Recordable } from "@dt-frames/core"
+import { FormSchema, ButtonProps } from "../../../forms/src/types/form.type"
+
+export type CrudOptType = {
+    // 标题
+    title?: string
+    // 弹框宽度
+    width?: string | number
+    // 条目
+    schemas: FormSchema[]
+    // 操作栏
+    actions?: ButtonProps[]
+    // 是否显示全屏
+    showFullscreen?: boolean
+    // 是否显示关闭按钮
+    showClose?: boolean
+    // 物理主键
+    primaryKey?: string
+    // 增删改查接口
+    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

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

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

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

@@ -0,0 +1,84 @@
+@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;
+    }
+}
+
+
+

package/src/components/forms/index.ts

@@ -0,0 +1,12 @@
+import DtForm from './src/index.vue'
+import { useForm } from './src/hooks/useForm'
+import { ButtonProps, FormSchema } from './src/types/form.type'
+import FormButtons from './src/components/formButton.vue'
+
+export {
+    FormButtons,
+    DtForm,
+    useForm,
+    FormSchema,
+    ButtonProps
+}