@dt-frames/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,117 @@
+<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)">
+                            <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 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) {
+        emits('chooseIcon', icon)
+    }
+   
+
+</script>

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

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

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

package/src/components/iframe/index.ts

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

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

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

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

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

@@ -0,0 +1,48 @@
+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 { useDialog } from './dialog';
+
+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 },
+];
+
+
+// 初始化所有组件
+export function initComponents() {
+    return {
+        install(app: App) {
+            dtComponents.forEach( comp => app.component(comp.name, comp));
+        }
+    }
+}
+
+export {
+    DtBaseRouter,
+    DtIcon,
+    DtPickIcon,
+    DtModal,
+    DtForm,
+    DtTable,
+    FormButtons,
+    DtIframe,
+    useForm,
+    useTable,
+    useSource,
+    useCurd,
+    useModal,
+    useModalOut,
+    export2Excel,
+    useDialog
+}

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

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 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';
+// 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, 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' },
+        { name: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
+    ]
+
+    // 处理按钮点击事件
+    function handleMethod(item: ButtonProps) {
+        switch( item.flag ) {
+            case 'OK': emits('handleSave'); break
+            case 'CANCEL': emits('handleCancel'); break
+        }
+    }
+
+</script>