@dt-frames/ui 1.0.11 → 1.0.15

package/src/components/modal/src/components/modal.tsx

@@ -1,30 +0,0 @@
-import { defineComponent, toRefs, unref } from "vue";
-import { Modal } from 'ant-design-vue';
-import { useAttrs, useSlots } from '@dt-frames/core';
-import { basicProps } from '../props';
-import { useDragMove } from "../hooks/useDrag";
-
-
-export default defineComponent({
-    name: 'Modal',
-    inheritAttrs: false,
-    props: basicProps,
-    emits: ['cancel'],
-    setup( props, { slots } ){
-        const { visible, draggable, destroyOnClose } = toRefs(props);
-        const attrs = useAttrs();
-
-        useDragMove({
-            visible,
-            destroyOnClose,
-            draggable,
-        })
-
-        const { extendSlots } = useSlots();
-
-        return () => {
-            const propsData = { ...unref(attrs), ...props, destroyOnClose: true } as any;
-            return <Modal {...propsData}>{extendSlots(slots as any)}</Modal>;
-        };
-    }
-})

package/src/components/modal/src/components/modalFooter.vue

@@ -1,38 +0,0 @@
-<template>
-    <slot name="appendFooter"></slot>
-    <FormButtons
-        :mode="'dialog'"
-        :buttonList="buttonActions"
-        @handle-method="handleMethod($event)"
-    ></FormButtons>
-</template>
-
-<script lang="ts" setup>
-    import { FormButtons, ButtonProps } from '../../../forms';
-
-    const emits = defineEmits([
-        'handleSave',
-        'handleCancel'
-    ])
-
-    const props = defineProps({
-        showSave: {
-            type: Boolean,
-            default: true
-        }
-    })
-
-    const buttonActions: ButtonProps[] = [
-        { name: '保存', preIcon: 'mdi:content-save', type: 'primary', flag: 'OK' },
-        { name: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
-    ]
-
-    // 处理按钮点击事件
-    function handleMethod(item: ButtonProps) {
-        switch( item.flag ) {
-            case 'OK': emits('handleSave'); break
-            case 'CANCEL': emits('handleCancel'); break
-        }
-    }
-
-</script>

package/src/components/modal/src/hooks/useDrag.ts

@@ -1,107 +0,0 @@
-import { Ref, unref, watchEffect } from 'vue';
-import { useTimeoutFn } from '@dt-frames/core';
-
-export interface UseModalDragMoveContext {
-	draggable: Ref<boolean>;
-	destroyOnClose: Ref<boolean | undefined> | undefined;
-	visible: Ref<boolean>;
-}
-
-export function useDragMove(context: UseModalDragMoveContext) {
-	const getStyle = (dom: any, attr: any) => {
-		return getComputedStyle(dom)[attr];
-	};
-	const drag = (wrap: any) => {
-		if (!wrap) return;
-		wrap.setAttribute('data-drag', unref(context.draggable));
-		const dialogHeaderEl = wrap.querySelector('.ant-modal-header');
-		const dragDom = wrap.querySelector('.ant-modal');
-
-		if (!dialogHeaderEl || !dragDom || !unref(context.draggable)) return;
-
-		dialogHeaderEl.style.cursor = 'move';
-
-		dialogHeaderEl.onmousedown = (e: any) => {
-			if (!e) return;
-			// 鼠标按下，计算当前元素距离可视区的距离
-			const disX = e.clientX;
-			const disY = e.clientY;
-			const screenWidth = document.body.clientWidth; // body当前宽度
-			const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)
-
-			const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
-			const dragDomheight = dragDom.offsetHeight; // 对话框高度
-
-			const minDragDomLeft = dragDom.offsetLeft;
-
-			const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth;
-			const minDragDomTop = dragDom.offsetTop;
-			const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight;
-			// 获取到的值带px 正则匹配替换
-			const domLeft = getStyle(dragDom, 'left');
-			const domTop = getStyle(dragDom, 'top');
-			let styL = +domLeft;
-			let styT = +domTop;
-
-			// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
-			if (domLeft.includes('%')) {
-				styL = +document.body.clientWidth * (+domLeft.replace(/%/g, '') / 100);
-				styT = +document.body.clientHeight * (+domTop.replace(/%/g, '') / 100);
-			} else {
-				styL = +domLeft.replace(/px/g, '');
-				styT = +domTop.replace(/px/g, '');
-			}
-
-			document.onmousemove = function (e) {
-				// 通过事件委托，计算移动的距离
-				let left = e.clientX - disX;
-				let top = e.clientY - disY;
-
-				// 边界处理
-				if (-left > minDragDomLeft) {
-					left = -minDragDomLeft;
-				} else if (left > maxDragDomLeft) {
-					left = maxDragDomLeft;
-				}
-
-				if (-top > minDragDomTop) {
-					top = -minDragDomTop;
-				} else if (top > maxDragDomTop) {
-					top = maxDragDomTop;
-				}
-
-				// 移动当前元素
-				dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;
-			};
-
-			document.onmouseup = () => {
-				document.onmousemove = null;
-				document.onmouseup = null;
-			};
-		};
-	};
-
-	const handleDrag = () => {
-		const dragWraps = document.querySelectorAll('.ant-modal-wrap');
-		for (const wrap of Array.from(dragWraps)) {
-			if (!wrap) continue;
-			const display = getStyle(wrap, 'display');
-			const draggable = wrap.getAttribute('data-drag');
-			if (display !== 'none') {
-				// 拖拽位置
-				if (draggable === null || unref(context.destroyOnClose)) {
-					drag(wrap);
-				}
-			}
-		}
-	};
-
-	watchEffect(() => {
-		if (!unref(context.visible) || !unref(context.draggable)) {
-			return;
-		}
-		useTimeoutFn(() => {
-			handleDrag();
-		}, 30);
-	});
-}

package/src/components/modal/src/hooks/useFullScreen.ts

@@ -1,29 +0,0 @@
-import { ref, Ref, unref, computed } from "vue"
-import { dispatchResize } from '@dt-frames/core'
-
-interface FullScreenOptions{
-    wrapClassName: Ref<string | undefined>;
-    modalWrapperRef: Ref<any>;
-    extHeightRef: Ref<number>;
-}
-
-export function useFullScreen(options: FullScreenOptions) {
-    const fullScreenRef = ref(false);
-
-    const getWrapClassName = computed(() => {
-        const clsName = unref(options.wrapClassName) || '';
-        return unref(fullScreenRef) ? `fullscreen-modal ${clsName} ` : unref(clsName);
-    });
-
-    function toggleFullScreen(e: Event) {
-        e && e.stopPropagation();
-        fullScreenRef.value = !unref(fullScreenRef);
-        dispatchResize()
-    }
-
-    return {
-        fullScreenRef,
-        getWrapClassName,
-        toggleFullScreen
-    }
-}

package/src/components/modal/src/hooks/useModal.ts

@@ -1,194 +0,0 @@
-import { error, isFunction, Nullable, Recordable } from "@dt-frames/core";
-import { ModalProps } from "@dt-frames/core"
-import { isEqual } from 'lodash-es'
-import { tryOnUnmounted } from '@vueuse/core'
-import { ModalMethods, ReturnInnerMethods, ReturnMethods, UseModalInnerReturnType, UseModalReturnType } from '../types/modal.type';
-import { computed, getCurrentInstance, nextTick, onUnmounted, reactive, ref, toRaw, unref, watch, watchEffect } from "vue";
-
-const dataTransfer = reactive<any>({})
-const cbTransfer = reactive<any>({})
-const visibleData = reactive<{ [key: number]: boolean }>({})
-
-export function useModalOut(): UseModalReturnType{
-    const modal = ref<Nullable<ModalMethods>>(null)
-    const loaded = ref<Nullable<boolean>>(true)
-    const uid = ref<string>('')
-
-    function register(modalMethod: ModalMethods, uuid: string) {
-        if( !getCurrentInstance() ) {
-            throw new Error('useModal只能在setup()或者函数中使用')
-        }
-
-        uid.value = uuid
-
-        onUnmounted(() => {
-            modal.value = null
-            loaded.value = false
-            dataTransfer[unref(uid)] = null
-            cbTransfer[unref(uid)] = (rsp?: Recordable) => { }
-        })
-
-        if( unref(loaded) && modalMethod === unref(modal) ) return 
-
-        modal.value = modalMethod
-        loaded.value = true
-        modalMethod.emitVisible = (visible: boolean, uid: number) => {
-            visibleData[uid] = visible
-        }  
-    }
-
-    const getInstance = () => {
-        const instance = unref( modal )
-
-        if( !instance ) {
-            error('useModalOut 实例未定义')
-        }
-
-        return instance
-    }
-
-    const methods: ReturnMethods = {
-        // 设置弹框属性
-        setModalProps: ( props: Partial<ModalProps> ) => {
-            getInstance()?.setModalProps(props)
-        },
-
-        getVisible: computed(() => {
-            return visibleData[~~unref(uid)]
-        }),
-
-        redoModalHeight: () => {
-            getInstance()?.redoModalHeight?.()
-        },
-
-        openModal: (params?: Recordable, openOnSet = true) => {
-            getInstance()?.setModalProps({
-                visible: true
-            })
-
-            const { data, afterClose } = params || {}
-
-            const id = unref(uid)
-
-            // 设置回调
-            cbTransfer[unref(uid)] = (rsp?: Recordable) => {
-                if( afterClose && isFunction(afterClose)) {
-                    afterClose(rsp)
-                }
-            }
-
-            if( !data ) return
-
-            if( openOnSet ) {
-                dataTransfer[id] = toRaw(data);
-
-                return
-            }
-
-            const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data))
-            if (!equal) {
-                dataTransfer[id] = toRaw(data);
-            }
-        },
-
-        closeModal: () => {
-            getInstance()?.setModalProps({ visible: false })
-        }
-    }
-
-    return [register, methods]
-}
-
-
-export function useModal(props?: Partial<ModalProps>,callbackFn?: Function): UseModalInnerReturnType {
-    const modalInstanceRef = ref<Nullable<ModalMethods>>(null)
-    const currentInstance = getCurrentInstance()
-    const uidRef = ref<string>('')
-
-    const getInstance = () => {
-        const instance = unref(modalInstanceRef)
-        if( !instance ) {
-            error('useModal 实例未定义')
-        }
-
-        return instance
-    }
-
-    const register = ( modalInstance: ModalMethods, uuid: string) => {
-        tryOnUnmounted(() => {
-            modalInstanceRef.value = null;
-        })
-
-        uidRef.value = uuid
-        modalInstanceRef.value = modalInstance
-
-        /**
-         * 深度监听props的变化,首次监听
-         * 动态更改表单实例
-        */
-        watch(
-            () => props,
-            () => props && modalInstance.setModalProps(props),
-            {
-                immediate: true,
-                deep: true
-            }
-        )
-
-        currentInstance?.emit('register', modalInstance, uuid)
-    }
-
-    watchEffect(() => {
-        const data = dataTransfer[unref(uidRef)]
-        if (!data) return
-        if (!callbackFn || !isFunction(callbackFn)) return
-        nextTick(() => {
-            callbackFn(data);
-        })
-    })
-
-    const methods: ReturnInnerMethods = {
-        changeLoading: (loading = true) => {
-            getInstance()?.setModalProps({ loading })
-        },
-
-        getVisible: computed(() => visibleData[~~unref(uidRef)]),
-
-        // 关闭弹框进行回调
-        closeModal: (rsp?: Recordable) => {
-            if(cbTransfer[unref(uidRef)]) cbTransfer[unref(uidRef)](rsp)
-            getInstance()?.setModalProps({ visible: false })
-        },
-
-        openModal: <T = any>(visable = true, data?: T, openOnSet = true) => {
-            getInstance()?.setModalProps({
-                visible: visable
-            })
-
-            if( !data ) return
-
-            const id = unref(uidRef)
-
-            if( openOnSet ) {
-                dataTransfer[id] = toRaw(data);
-                return;
-            }
-
-            const equal = isEqual(toRaw(dataTransfer[id]), toRaw(data))
-            if (!equal) {
-                dataTransfer[id] = toRaw(data);
-            }
-        },
-        
-        setModalProps: (props: Partial<ModalProps>) => {
-            getInstance()?.setModalProps(props);
-        },
-    
-        redoModalHeight: () => {
-            const callRedo = getInstance()?.redoModalHeight;
-            callRedo && callRedo();
-        },
-    }
-
-    return [register, methods]
-}

package/src/components/modal/src/index.vue

@@ -1,173 +0,0 @@
-<template>
-    <Modal v-bind="getBindValue" @cancel="handleCancel">
-        <template #closeIcon v-if="!$slots.closeIcon">
-            <CloseIcon 
-                :canFullscreen="getBindValue.canFullscreen"
-                :fullScreen="fullScreenRef"
-                @cancel="handleCancel"
-                @fullscreen="toggleFullScreen"
-            />
-        </template>
-
-        <template #title v-if="!$slots.title">
-            {{ getMergeProps.title }}
-        </template>
-
-        <template #footer v-if="!$slots.footer">
-            <!-- 默认的footer内容 -->
-            <ModalFooter :showSave="getBindValue.showSave" @handle-save="handleSave" @handle-cancel="handleCancel">
-                <template #[item]="data" v-for="item in Object.keys($slots)">
-                    <slot :name="item" v-bind="data || {}"></slot>
-                </template>
-            </ModalFooter>
-        </template>
-
-        <ModalWrapper
-            :useWrapper="getBindValue.useWrapper"
-            :footerOffset="wrapperFooterOffset"
-            :fullScreen="fullScreenRef"
-            ref="modalWrapperRef"
-            :loading="getBindValue.loading"
-            :loading-tip="getBindValue.loadingTip"
-            :minHeight="getBindValue.minHeight"
-            :height="getWrapperHeight"
-            :visible="visibleRef"
-            :modalFooterHeight="footer !== undefined && !footer ? 0 : undefined"
-            v-bind="omit(getBindValue.wrapperProps, 'visible', 'height', 'modalFooterHeight')"
-            @ext-height="handleExtHeight"
-            @height-change="handleHeightChange"
-        >
-            <slot></slot>
-        </ModalWrapper>
-
-        <template #[item]="data" v-for="item in Object.keys(omit($slots, 'default'))">
-            <slot :name="item" v-bind="data || {}"></slot>
-        </template>
-    </Modal>
-</template>
-
-<script lang="ts" setup>
-    import { computed, unref, ref, watch, getCurrentInstance, nextTick } from 'vue';
-    import Modal from './components/modal';
-    import { omit } from 'lodash-es';
-    import { useFullScreen } from './hooks/useFullScreen';
-    import { basicProps } from './props';
-    import ModalWrapper from './components/modal-wrap.vue';
-    import ModalFooter from './components/modalFooter.vue'
-
-    import CloseIcon from './components/close-icon.vue';
-    import { isFunction, deepMerge, ModalProps, ModalMethods } from '@dt-frames/core';
-    
-    const visibleRef = ref(false);
-    const propsRef = ref<Partial<ModalProps>>();
-    const modalWrapperRef = ref(null);
-    const extHeightRef = ref(0);
-
-    const props = defineProps( basicProps );
-    const emits = defineEmits(['visible-change', 'height-change', 'cancel', 'save', 'register', 'update:visible'])
-
-
-    const modalMethods: ModalMethods = {
-        setModalProps,
-        emitVisible: undefined,
-        redoModalHeight: () => {
-          nextTick(() => {
-            if (unref(modalWrapperRef)) {
-              (unref(modalWrapperRef) as any).setModalHeight();
-            }
-          });
-        },
-    }
-
-    const { getWrapClassName, toggleFullScreen, fullScreenRef } = useFullScreen({
-        wrapClassName: computed(() => (unref(propsRef) as any)?.wrapClassName),
-        extHeightRef,
-        modalWrapperRef
-    });
-
-    const getMergeProps = computed(() => {
-        return {
-            ...props,
-            ...(unref(propsRef) as any)
-        }
-    })
-
-    const getBindValue = computed(() => {
-        const bindValue = {
-            ...unref(getMergeProps),
-            ...(unref(propsRef) as any),
-            visible: unref(visibleRef),
-            wrapClassName: unref(getWrapClassName),
-        }
-        
-        return omit(bindValue, unref(fullScreenRef) ? ['height', 'title'] : 'title');
-    });
-
-    const getWrapperHeight = computed(() => {
-        if (unref(fullScreenRef)) return undefined;
-        return unref(getBindValue).height;
-    });
-
-    const instance = getCurrentInstance();
-    if (instance) { emits('register', modalMethods, instance.uid); }
-
-    watch(() => unref(visibleRef), (v) => {
-        emits('visible-change', v);
-        emits('update:visible', v);
-        instance && modalMethods.emitVisible?.(v, instance.uid);
-        nextTick(() => {
-            if (props.scrollTop && v && unref(modalWrapperRef)) {
-                (unref(modalWrapperRef).$el as any).scrollTop = 0;
-            }
-        });
-    },{
-        immediate: false,
-    })
-
-    function handleHeightChange(height: string) {
-        emits('height-change', height);
-    }
-
-    function handleExtHeight(height: number) {
-        extHeightRef.value = height;
-    }
-
-
-    function setModalProps(props: Partial<ModalProps>) {
-
-        propsRef.value = deepMerge(unref(propsRef) || ({} as any), props);
-
-        if (Reflect.has(props, 'visible')) {
-            visibleRef.value = !!props.visible;
-        }
-        if (Reflect.has(props, 'defaultFullscreen')) {
-            fullScreenRef.value = !!props.defaultFullscreen;
-        }
-    }
-
-    // 弹框保存
-    function handleSave() {
-        emits('save')
-        // handleCancel()
-    }
-
-    // 弹框关闭
-    async function handleCancel(e: Event = null) {
-        if( e ) {
-            e?.stopPropagation();
-
-            // 过滤自定义关闭按钮的空白区域
-            if ((e.target as HTMLElement)?.classList?.contains('dt-basic-modal-close--custom')) return;
-
-            if (props.closeFunc && isFunction(props.closeFunc)) {
-                const isClose: boolean = await props.closeFunc();
-                visibleRef.value = !isClose;
-                return;
-            }
-        }
-
-        visibleRef.value = false;
-
-        emits('cancel', e)
-    }
-</script>

package/src/components/modal/src/props.ts

@@ -1,43 +0,0 @@
-import { CSSProperties, PropType, VNodeChild } from "vue";
-
-// 支持设置的属性
-const modalProps = {
-    visible     : { type: Boolean },
-    scrollTop   : { type: Boolean, default: true },
-    height      : { type: Number },
-    minHeight   : { type: Number },
-    draggable   : { type: Boolean, default: true },
-    closeFunc   : Function
-};
-
-export const basicProps = Object.assign({}, modalProps, {
-    defaultFullscreen   : { type: Boolean },
-    canFullscreen       : { type: Boolean, default: true },
-    wrapperFooterOffset : { type: Number, default: 0 },
-    useWrapper          : { type: Boolean, default: true },
-    loading             : { type: Boolean },
-    loadingTip          : { type: String },
-    closable            : { type: Boolean, default: true },
-    destroyOnClose      : { type: Boolean },
-    title               : { type: String },
-    visible             : { type: Boolean },
-    width               : { type: String as PropType<Number | String> },
-    wrapClassName       : { type: String },
-    zIndex              : { type: Number },
-    centered            : { type: Boolean },
-    showSave            : { type: Boolean },
-
-    // 掩膜
-    mask                : { type: Boolean, default: true },
-    maskClosable        : { type: Boolean, default: true },
-    keyboard            : { type: Boolean, default: true },
-    maskStyle           : Object as PropType<CSSProperties>,
-
-    footer              : Object as PropType<VNodeChild | JSX.Element>,
-    
-    bodyStyle           : Object as PropType<CSSProperties>,
-
-    wrapperProps        : Object,
-    afterClose          : Function,
-    getContainer        : Function as PropType<() => any>
-})

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

@@ -1,27 +0,0 @@
-import { ModalProps, Recordable } from "@dt-frames/core"
-import { ComputedRef } from "vue"
-
-export type ModalMethods = {
-    setModalProps: ( props: Partial<ModalProps> ) => void
-    emitVisible?: ( visable: boolean, uid: number ) => void
-    redoModalHeight?: () => void
-}
-
-export interface ReturnMethods extends ModalMethods{
-    openModal: <T = any>(data?: T, openOnSet?: boolean) => void
-    closeModal: () => void
-    getVisible?: ComputedRef<boolean>
-}
-
-export interface ReturnInnerMethods extends ModalMethods {
-    openModal: <T = any>(props?: boolean, data?: T, openOnSet?: boolean) => void
-    closeModal: (rsp?: Recordable) => void
-    changeLoading: (loading: boolean) => void
-    getVisible?: ComputedRef<boolean>
-    redoModalHeight: () => void
-}
-
-export type RegisterFn = (modalMethods: ModalMethods, uuid?: string) => void
-
-export type UseModalReturnType = [RegisterFn, ReturnMethods]
-export type UseModalInnerReturnType = [RegisterFn, ReturnInnerMethods];

package/src/components/router/base-router.vue

@@ -1,11 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
-
-<script lang="ts">
-    import { defineComponent } from 'vue'
-
-    export default defineComponent({
-        name: 'dt-base-router'
-    })
-</script>

package/src/components/router/index.ts

@@ -1,3 +0,0 @@
-import DtBaseRouter from './base-router.vue'
-
-export { DtBaseRouter }

package/src/components/source/index.ts

@@ -1 +0,0 @@
-export * from './src/index'