@dt-frames/ui 1.0.11 → 1.0.15

package/src/components/icons/index.less

@@ -1,101 +0,0 @@
-@primary-color: #269ac1;
-@icon-pick-hover-color: #269ac1;
-
-.svg-icon {
-    fill: currentColor;
-    vertical-align: middle;
-}
-
-.dt-icon{
-    display: inline-block;
-    text-align: center;
-    vertical-align: middle;
-    & > svg{
-        vertical-align: middle;
-    }
-}
-
-.dt-pick-icon {
-    display: flex;
-    flex-direction: row;
-    height: 600px;
-
-    &__menus{
-        height: 100%;
-        overflow-y: auto;
-        width: 140px;
-        border-right: 1px solid #e7e7e7;
-        border-top: 1px solid #e7e7e7;
-        background: #fff;
-        .menu{
-            border-bottom: 1px solid #e7e7e7;
-            padding: 8px;
-            text-align: center;
-            cursor: pointer;
-            transform: all 0.25s;
-            p{
-                font-size: 14px;
-                line-height: 24x;
-                span{
-                    opacity: 0.7;
-                    font-size: 12px;
-                    padding-left: 6px;
-                }
-            }
-            &.active, &:hover{
-                background: @primary-color;
-                color: #fff;
-            }
-        }
-    }
-
-    &__content{
-        height: 100%;
-        overflow-y: auto;
-        flex: 1;
-        background: #fff;
-
-        .ant-input-search{
-            width: 50%;
-            margin: 0 25% 40px 25%;
-        }
-
-        &_item{
-            display: flex;
-            flex-direction: row;
-            flex-wrap: wrap;
-            padding: 20px;
-            a {
-                margin: 6px;
-                line-height: 22px;
-                height: 30px;
-                width: 30px;
-                text-align: center;
-                cursor: pointer;
-                padding: 4px;
-                transform: all 0.2s;
-                border: 1px solid #fff;
-                &:hover, &.active-icon{
-                    border: 1px solid @primary-color;
-                    border-radius: 4px;
-                    color: @primary-color;
-                }
-            }
-        }
-
-        i{
-            font-size: 22px;
-        }
-    }
-}
-
-.dt-pick-icon-item{
-    .ant-tooltip-inner, .ant-tooltip-arrow-content {
-        background: #fff !important;
-        color: @icon-pick-hover-color ;
-    }
-}
-
-.dt-icon-dialog > div{
-    top: 0 !important;
-}

package/src/components/icons/index.ts

@@ -1,7 +0,0 @@
-import DtIcon from './src/svg-icon.vue'
-import DtPickIcon from './src/pick-icon.vue'
-
-export { 
-    DtIcon,
-    DtPickIcon
-}

package/src/components/icons/src/pick-icon.vue

@@ -1,119 +0,0 @@
-<template>
-    <div :class="clsPrefix">
-        <div :class="`${clsPrefix}__menus`">
-            <div 
-                v-for="(menu, index) in iconMenus" 
-                :key="menu.type"
-                class="menu"
-                @click="activeIndex = index"
-                :class="{'active': activeIndex === index}"
-            >
-                <p>{{ menu.type }}<span>({{ menu.total }})</span></p>
-            </div>
-        </div>
-
-        <div :class="`${clsPrefix}__content`">
-            <keep-alive>
-                <div :class="`${clsPrefix}__content_item`">
-                    <InputSearch
-                        v-model:value="filter"
-                        enter-button
-                        placeholder="请输入过滤条件"
-                        @search="onFilter"
-                    ></InputSearch>
-
-                    <template v-for="icon in currentIcons" :key="icon">
-                        <a @click="selectIcon(icon)" :class="activeIcon === icon && 'active-icon'">
-                            <Tooltip 
-                                placement="bottom"
-                                overlayClassName="dt-pick-icon-item">
-                                <template #title>
-                                    {{ icon }}
-                                </template>
-                                <i class="i" :class="icon"></i>
-                            </Tooltip>
-                        </a>
-                    </template>
-                </div>
-            </keep-alive>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref, computed, unref, watch } from 'vue'
-    import { Tooltip, InputSearch } from 'ant-design-vue'
-    import { Icons } from '../../../assets/data/icons'
-
-    const emits = defineEmits(['chooseIcon'])
-
-    type IconMenu = {
-        type: string,
-        total: number
-    }
-
-    const clsPrefix = 'dt-pick-icon'
-    const activeIndex = ref(1)
-    const filter = ref(null)
-    const currentIcons = ref([])
-    const activeIcon = ref(null)
-
-
-    const iconMenus = computed(() => {
-        let total: number = 0
-        let menus: IconMenu[] = []
-
-        Icons.forEach( it => {
-            let cLen = it.children?.length || 0
-            total += cLen
-
-            menus.push({
-                type: it.type,
-                total: cLen
-            })
-        } )
-
-        menus.unshift({
-            type: '所有',
-            total
-        })
-
-        return menus
-    })
-
-    function getIcons(): string[] {
-        
-        if( unref(activeIndex) ) {
-            currentIcons.value = Icons[activeIndex.value - 1].children
-        } else {
-            currentIcons.value = Icons.reduce( (icons, it) => {
-                icons = icons.concat( it.children )
-                return icons
-            }, [] )
-        }
-
-        return unref(currentIcons)
-    }
-
-    watch(
-        () => activeIndex.value,
-        v => {
-            getIcons()
-        },
-        {
-            immediate: true
-        }
-    )
-
-    // 过滤
-    function onFilter(e) {
-        currentIcons.value = getIcons().filter( it => it.indexOf(unref(filter)) !== -1 )
-    }
-
-    function selectIcon(icon) {
-        activeIcon.value = icon
-        emits('chooseIcon', icon)
-    }
-   
-
-</script>

package/src/components/icons/src/svg-icon.vue

@@ -1,117 +0,0 @@
-<template>
-	<svg 
-		v-if="isSvgIcon"
-		:class="clsName" 
-		aria-hidden="true" 
-		:style="{ 
-			fontSize: size + 'px',
-			width: size + 'px',
-			height: size + 'px'
-		}">
-		<use :xlink:href="iconName" :fill="color" />
-	</svg>
-	
-	<i 
-		v-else
-		class="dt-icon i"
-		:style="{
-			color,
-			fontSize: size + 'px'
-		}"
-		:class="[iconName, clsName]"
-	></i>
-</template>
-
-<script lang="ts">
-	import { isArray, isFunction, isObject, isString, Recordable } from '@dt-frames/core';
-	import {computed, defineComponent, unref} from 'vue';
-
-
-	export default defineComponent({
-		props: {
-			iconClass: {
-				type: String,
-				required: true,
-			},
-			className: {
-				type: [String, Array],
-				default: '',
-			},
-			color: {
-				type: String,
-				default: '#555',
-			},
-			size: {
-				type: Number,
-				default: 18,
-			},
-		},
-		
-		setup(props) {
-			// 判断是否为svg图标
-			const isSvgIcon = computed(() => props.iconClass.indexOf(':') === -1)
-
-			// 图标名称
-			const iconName = computed(() => {
-				return unref(isSvgIcon) ? `#icon-${props.iconClass}` : `${props.iconClass}`
-			})
-
-
-			// 定义新的class名称
-			const clsName = computed(() => {
-				if( unref(isSvgIcon)) {
-					return `svg-icon ${ getCls( props.className ) }`
-				} else {
-					return `${ getCls( props.className ) }`
-				}
-			})
-
-
-			function getCls(className: String | Array<any>): String {
-				if( isString( className ) ) {
-					return className
-				}
-
-				if( isArray( className ) ) {
-					const arrClsToStr = ( cls ) => {
-						let classNames = []
-
-						cls
-							.forEach( it => {
-								if( isString( it ) ) {
-									classNames.push( it )
-								} else if( isObject( it )){
-									classNames.push(...objClsToStr( it ))
-								} else if( isFunction( it ) ) {
-									classNames.push( it() )
-								}
-							} )
-
-						return classNames
-					}
-
-					const objClsToStr = ( objCls: Recordable ) => {
-						let clsArr = []
-						for( let key in objCls ) {
-							if( objCls[ key ] ) clsArr.push( key )
-						}
-
-						return clsArr
-					}
-
-					return arrClsToStr( className )
-						.filter( Boolean )
-						.join(' ')
-				}
-
-				return ''
-			}
-
-			return {
-				isSvgIcon,
-				iconName,
-				clsName,
-			}
-		},
-	})
-</script>

package/src/components/iframe/index.less

@@ -1,3 +0,0 @@
-.iframe-page{
-    height: 100%;
-}

package/src/components/iframe/index.ts

@@ -1,5 +0,0 @@
-import DtIframe from './src/index.vue' 
-
-export {
-    DtIframe
-}

package/src/components/iframe/src/index.less

@@ -1,3 +0,0 @@
-.iframe-page{
-    height: 100%;
-}

package/src/components/iframe/src/index.vue

@@ -1,38 +0,0 @@
-<template>
-    <div class="iframe-page">
-        <Spin :spinning="loading" size="large">
-            <iframe
-                :src="src"
-                class="iframe-page__main"
-                ref="frameRef"
-                @load="afterLoaded()"
-            ></iframe>
-        </Spin>
-    </div>
-</template>
-
-<script lang="ts" setup>
-    import { ref } from 'vue'
-    import { Spin } from 'ant-design-vue'
-
-    const props = defineProps({
-        showLoading: {
-            type: Boolean,
-            default: true
-        },
-        src: {
-            type: String
-        },
-        postMsg: null
-    })
-
-    const loading = ref<boolean>(false)
-    const frameRef = ref()
-
-    function afterLoaded() {
-        loading.value = false
-
-        let iframeWin = frameRef.value.contentWindow
-        iframeWin.postMessage(props.postMsg, props.src)
-    }
-</script>

package/src/components/index.ts

@@ -1,54 +0,0 @@
-import { App } from 'vue';
-import { DtBaseRouter } from './router'
-import { DtIcon, DtPickIcon } from './icons'
-import { DtModal, useModal, useModalOut } from './modal'
-import { DtForm, useForm, FormButtons } from './forms'
-import { DtTable, useTable } from './table'
-import { useSource } from './source'
-import { useCurd } from './curd'
-import { export2Excel } from './excel'
-import { DtIframe } from './iframe'
-import { DtUpload, DtUploadModal } from './upload'
-import { DtTree } from './tree'
-
-const dtComponents = [
-    { name: 'dt-base-router', component: DtBaseRouter },
-    { name: 'dt-icon', component: DtIcon },
-    { name: 'dt-pick-icon', component: DtPickIcon },
-    { name: 'dt-modal', component: DtModal },
-    { name: 'dt-form', component: DtForm },
-    { name: 'dt-upload', component: DtUpload },
-    { name: 'dt-upload-modal', component: DtUploadModal },
-    { name: 'dt-tree', component: DtTree },
-];
-
-
-// 初始化所有组件
-export function initComponents() {
-    return {
-        install(app: App) {
-            dtComponents.forEach( comp => app.component(comp.name, comp));
-        }
-    }
-}
-
-export {
-    DtBaseRouter,
-    DtIcon,
-    DtPickIcon,
-    DtModal,
-    DtForm,
-    DtTable,
-    FormButtons,
-    DtIframe,
-    DtUpload,
-    DtUploadModal,
-    DtTree,
-    useForm,
-    useTable,
-    useSource,
-    useCurd,
-    useModal,
-    useModalOut,
-    export2Excel
-}

package/src/components/modal/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;
-            }
-        }
-    }
-}

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,46 +0,0 @@
-<template>
-    <div :class="getClass">
-        <template v-if="canFullscreen">
-            <Tooltip title="退出全屏" placement="bottom" v-if="fullScreen">
-                <i class="i ic:baseline-fullscreen-exit" @click="handleFullScreen" />
-            </Tooltip>
-            <Tooltip title="全屏" placement="bottom" v-else>
-                <i class="i ic:baseline-fullscreen" @click="handleFullScreen" />
-            </Tooltip>
-        </template>
-
-        <i class="i mdi:close" @click="handleCancel" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { Tooltip } from 'ant-design-vue';
-
-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,128 +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 getModalDom() {
-        const wrapperRefDom = unref(wrapperRef);
-        if (!wrapperRefDom) return;
-
-        const bodyDom = wrapperRefDom.$el.parentElement;
-        if (!bodyDom) return;
-        bodyDom.style.padding = '0';
-        await nextTick();
-
-        const modalDom = bodyDom.parentElement && bodyDom.parentElement.parentElement;
-
-        return modalDom
-    }
-
-    async function setModalHeight() {
-        if (!props.visible) return;
-
-        try {
-            const modalDom = await getModalDom()
-            if (!modalDom) return;
-
-            const modalRect = getComputedStyle(modalDom as Element).top;
-            const modalTop = Number.parseInt(modalRect);
-
-            let maxHeight =
-                window.innerHeight -
-                (props.footerOffset! || 0) -
-                props.modalFooterHeight -
-                props.modalHeaderHeight
-                - 100;
-
-            // 距离顶部过进会出现滚动条
-            if (modalTop < 40) {
-                maxHeight -= 26;
-            }
-            await nextTick();
-            const spinEl = unref(spinRef);
-
-            if (!spinEl) return;
-            await nextTick();
-            realHeight = spinEl.scrollHeight;
-
-            if (props.fullScreen) {
-                realHeightRef.value =
-                window.innerHeight - props.modalFooterHeight - props.modalHeaderHeight;
-            } else {
-                realHeightRef.value = props.height
-                ? props.height
-                : realHeight > maxHeight
-                ? maxHeight
-                : realHeight;
-            }
-            emits('height-change', unref(realHeightRef));
-
-            const _modalDom = await getModalDom()
-            _modalDom.style.top = (window.innerHeight - _modalDom.offsetHeight) / 2 + 'px'
-
-        } 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>