@dt-frames/ui 1.0.0 → 1.0.1

package/src/components/modal/index.ts

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

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

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

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

@@ -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', 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

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

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

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