@dt-frames/ui 1.0.0 → 1.0.1

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,65 +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 } 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

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

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

@@ -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.ts

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

package/src/components/forms/src/componentMap.ts

@@ -1,44 +0,0 @@
-// 根据组件类型 定义一个组件map 方便使用
-import { Component } from "vue"
-import { Input, Select, Radio, Checkbox, AutoComplete, Cascader, DatePicker, InputNumber, Switch, TimePicker, TreeSelect, Slider, Rate, Divider } from 'ant-design-vue'
-import RadioButtonGroup from './components/radioButton.vue'
-import FormIcon from './components/formIcon.vue'
-import { ComponentType } from "./types/form.type"
-
-const components = {
-    Input,
-    InputTextArea: Input.TextArea,
-    InputSearch: Input.Search,
-    InputGroup: Input.Group,
-    InputPassword: Input.Password,
-    Select,
-    TreeSelect,
-    Radio,
-    RadioGroup: Radio.Group,
-    RadioButtonGroup,
-    Checkbox,
-    CheckboxGroup: Checkbox.Group,
-    AutoComplete,
-    Cascader,
-    DatePicker,
-    MonthPicker: DatePicker.MonthPicker,
-    WeekPicker: DatePicker.WeekPicker,
-    RangePicker: DatePicker.RangePicker,
-    InputNumber,
-    Switch,
-    TimePicker,
-    Slider,
-    Rate,
-    Divider,
-    Icon: FormIcon
-}
-
-const componentMap = new Map<ComponentType, Component>()
-
-for( let item in components ) {
-    componentMap.set( item as ComponentType, components[item] )
-}
-
-export {
-    componentMap
-}