@dt-frames/ui 1.0.2 → 1.0.5

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

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

@@ -0,0 +1,27 @@
+import { ref, Ref, unref, computed } from "vue";
+
+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);
+    }
+
+    return {
+        fullScreenRef,
+        getWrapClassName,
+        toggleFullScreen
+    }
+}

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

@@ -0,0 +1,176 @@
+import { error, isFunction, Nullable } 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, ExtractPropTypes, getCurrentInstance, nextTick, onUnmounted, reactive, ref, toRaw, unref, watch, watchEffect } from "vue";
+
+const dataTransfer = 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
+        })
+
+        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: <T = any>(visable = true, data?: T, openOnSet = true) => {
+            getInstance()?.setModalProps({
+                visible: visable
+            })
+
+            if( !data ) return
+
+            const id = unref(uid)
+
+            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: () => {
+            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

@@ -0,0 +1,173 @@
+<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(() => props.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

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

@@ -0,0 +1,27 @@
+import { ModalProps } 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>(props?: boolean, 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: () => 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

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

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

package/src/components/source/index.ts

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

package/src/components/source/src/hooks/useFetch.ts

@@ -0,0 +1,69 @@
+import { ApiType } from "../types/source.type";
+import { message } from 'ant-design-vue'
+import { http, isBoolean, isFunction, isString, JsonResult, Recordable } from "@dt-frames/core";
+
+export function useFetch(api: string | ApiType, baseUrl: string = '') {
+    
+    const getApiObj= () => {
+        if( isString(api) ) {
+            return { api }
+        }
+
+        return { ...api }
+    }
+
+    /**
+     * 是否可以向服务器发送请求
+     * 如果beforeFetch返回的是false, 则停止请求
+     * */ 
+    const getParams = (params: Recordable = { }) => {
+        const { model, beforeFetch } = getApiObj()
+
+        if( !api ) {
+            message.error('请求的url不能为空')
+            return false
+        }
+
+        return beforeFetch && isFunction( beforeFetch ) 
+            ? beforeFetch( Object.assign({}, model, params) )
+            : params
+    }
+
+
+
+    /**
+     * 发送请求
+     * handleParams 记录返回的值
+     */
+    function fetch(params: Recordable = { }) {
+        const handleParams = getParams( params )
+
+        if( isBoolean( handleParams ) && handleParams === false)
+            return Promise.resolve()
+
+        const { api: _api, type = 'post', header = { }, afterFetch } = getApiObj()
+
+        return new Promise(( resolve, reject ) => {
+            http[type]( `${ baseUrl }${_api}`, handleParams, {
+                ...header,
+                ...{ onlyData: false }
+            }).then(
+                (data: JsonResult) => { 
+                    if( afterFetch && isFunction(afterFetch) ) {
+                        data = afterFetch( data )
+                    }
+                    
+                    resolve( data?.data )
+                },
+                (error) => {
+                    reject( error )
+                }
+            )
+        })
+    }
+
+    return {
+        fetch
+    }
+
+}

package/src/components/source/src/hooks/usePage.ts

@@ -0,0 +1,3 @@
+export function usePage() {
+    
+}