@dt-frames/ui 1.0.0

package/src/components/modal/index.ts

@@ -0,0 +1,8 @@
+import { useModal, useModalOut } from './src/hooks/useModal'
+import DtModal from './src/index.vue'
+
+export {
+    DtModal,
+    useModal,
+    useModalOut
+}

package/src/components/modal/src/components/close-icon.vue

@@ -0,0 +1,47 @@
+<template>
+    <div :class="getClass">
+        <template v-if="canFullscreen">
+            <Tooltip title="退出全屏" placement="bottom" v-if="fullScreen">
+                <i v-icon="'ic:baseline-fullscreen-exit'" @click="handleFullScreen" />
+            </Tooltip>
+            <Tooltip title="全屏" placement="bottom" v-else>
+                <i v-icon="'ic:baseline-fullscreen'" @click="handleFullScreen" />
+            </Tooltip>
+        </template>
+
+        <DtIcon icon-class="mdi:close" @click="handleCancel" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { Tooltip } from 'ant-design-vue';
+import { DtIcon } from '../../../icons';
+
+const props = defineProps({
+    canFullscreen: { type: Boolean, default: true },
+    fullScreen: { type: Boolean }
+});
+
+const emit = defineEmits(['cancel', 'fullscreen']);
+
+const getClass = computed(() => {
+    return [
+        'dt-basic-modal-close',
+        `dt-basic-modal-close--custom`,
+        {
+            [`dt-basic-modal-close--can-full`]: props.canFullscreen,
+        }
+    ]
+});
+
+function handleCancel(e: Event) {
+    emit('cancel', e);
+}
+
+function handleFullScreen(e: Event) {
+    e?.stopPropagation();
+    e?.preventDefault();
+    emit('fullscreen');
+}
+</script>

package/src/components/modal/src/components/modal-wrap.vue

@@ -0,0 +1,118 @@
+<template>
+    <ScrollContainer ref="wrapperRef">
+        <div ref="spinRef" :style="spinStyle">
+            <slot></slot>
+        </div>
+    </ScrollContainer>
+</template>
+
+<script setup lang="ts">
+    import { ref, unref, computed, onMounted, watchEffect, watch, nextTick } from 'vue';
+    import { ScrollContainer } from '../../../container';
+    import { windowResizeFn } from '@dt-frames/core';
+
+    const wrapperRef = ref(null);
+    const spinRef = ref(null);
+    const realHeightRef = ref(0);
+    const minRealHeightRef = ref(0);
+    let realHeight = 0;
+
+    const props = defineProps({
+        loading             : { type: Boolean },
+        useWrapper          : { type: Boolean, default: true },
+        modalHeaderHeight   : { type: Number, default: 55 },
+        modalFooterHeight   : { type: Number, default: 58 },
+        minHeight           : { type: Number, default: 200 },
+        height              : { type: Number },
+        footerOffset        : { type: Number, default: 0 },
+        visible             : { type: Boolean },
+        fullScreen          : { type: Boolean },
+        loadingTip          : { type: String },
+    });
+
+    const emits = defineEmits(['ext-height', 'height-change']);
+
+    const spinStyle = computed(() => {
+        return {
+            minHeight: `${props.minHeight}px`,
+            [props.fullScreen ? 'height' : 'maxHeight']: `${unref(realHeightRef)}px`,
+        };
+    });
+
+    onMounted(() => {
+        const { modalHeaderHeight, modalFooterHeight } = props;
+        emits('ext-height', modalHeaderHeight + modalFooterHeight);
+    });
+
+    async function setModalHeight() {
+        if (!props.visible) return;
+        const wrapperRefDom = unref(wrapperRef);
+        if (!wrapperRefDom) return;
+
+        const bodyDom = wrapperRefDom.$el.parentElement;
+        if (!bodyDom) return;
+        bodyDom.style.padding = '0';
+        await nextTick();
+
+        try {
+          const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
+          if (!modalDom) return;
+
+          const modalRect = getComputedStyle(modalDom as Element).top;
+          const modalTop = Number.parseInt(modalRect);
+
+          let maxHeight =
+            window.innerHeight -
+            modalTop * 2 +
+            (props.footerOffset! || 0) -
+            props.modalFooterHeight -
+            props.modalHeaderHeight;
+
+          // 距离顶部过进会出现滚动条
+          if (modalTop < 40) {
+            maxHeight -= 26;
+          }
+          await nextTick();
+          const spinEl = unref(spinRef);
+
+          if (!spinEl) return;
+          await nextTick();
+          realHeight = spinEl.scrollHeight;
+
+          if (props.fullScreen) {
+              console.log(props.modalFooterHeight,props.modalHeaderHeight)
+            realHeightRef.value =
+              window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
+          } else {
+            realHeightRef.value = props.height
+              ? props.height
+              : realHeight > maxHeight
+              ? maxHeight
+              : realHeight;
+          }
+          emits('height-change', unref(realHeightRef));
+        } catch (error) {
+          console.log(error);
+        }
+
+    }
+
+    windowResizeFn(setModalHeight.bind(null, false));
+
+    watchEffect(() => {
+        props.useWrapper && setModalHeight();
+    });
+
+    watch(
+        () => props.fullScreen,
+        (v) => {
+            setModalHeight();
+            if (!v) {
+                realHeightRef.value = minRealHeightRef.value;
+            } else {
+                minRealHeightRef.value = realHeightRef.value;
+            }
+        },
+    );
+
+</script>

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

@@ -0,0 +1,30 @@
+import { defineComponent, Slots, 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 } as any;
+            return <Modal {...propsData}>{extendSlots(slots as any)}</Modal>;
+        };
+    }
+})

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

@@ -0,0 +1,38 @@
+<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', show: props.showSave },
+        { 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

@@ -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,177 @@
+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 { basicProps } from '../props'
+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.less

@@ -0,0 +1,60 @@
+.fullscreen-modal {
+    overflow: hidden;
+
+    .ant-modal {
+        top: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100%;
+        padding: 0;
+
+        &-content {
+            height: 100%;
+        }
+    }
+}
+
+.dt-basic-modal-close {
+    display: flex;
+    height: 95%;
+    align-items: center;
+    justify-content: space-around;
+
+    > span {
+        margin-left: 48px;
+        font-size: 16px;
+    }
+
+    &--can-full {
+        margin-right: 15px;
+        > i {
+            padding-right: 15px;
+            width: 40px;
+        }
+    }
+
+    &:not(&--can-full) {
+        > i:nth-child(1) {
+            &:hover {
+                font-weight: 700;
+            }
+        }
+
+        &>i:nth-child(1) {
+            display: inline-block;
+            padding: 10px;
+
+            &:hover {
+                color: @primary-color;
+            }
+        }
+
+        &>i:last-child {
+            &:hover {
+                color: @error-color;
+            }
+        }
+    }
+}