@dt-frames/ui 1.0.4 → 1.0.7

package/es/style/components/icons/index.less

@@ -9,6 +9,7 @@
 .dt-icon{
     display: inline-block;
     text-align: center;
+    vertical-align: middle;
     & > svg{
         vertical-align: middle;
     }
@@ -74,7 +75,7 @@
                 padding: 4px;
                 transform: all 0.2s;
                 border: 1px solid #fff;
-                &:hover{
+                &:hover, &.active-icon{
                     border: 1px solid @primary-color;
                     border-radius: 4px;
                     color: @primary-color;
@@ -93,4 +94,8 @@
         background: #fff !important;
         color: @icon-pick-hover-color ;
     }
+}
+
+.dt-icon-dialog > div{
+    top: 0 !important;
 }

package/es/style/components/modal/index.less

@@ -1,6 +1,3 @@
-
-// @import 'ant-design-vue/es/modal/style/index.less';
-
 .fullscreen-modal {
     overflow: hidden;
 

package/es/style/components/table/index.less

@@ -82,6 +82,11 @@
     }
 }
 
+.dt-table-action-dropdown{
+    vertical-align: middle;
+    cursor: pointer;
+}
+
 .ant-table-fixed-left table, .ant-table-fixed-right table{
     width: min-content;
 }
@@ -115,12 +120,13 @@
     .ant-dropdown-menu-title-content{
         display: flex;
         align-items: center;
+        font-size: 13px;
         svg{
             display: block;
         }
 
         .dt-icon{
-            padding: 0 8px;
+            padding-right: 8px;
         }
     }
 }
@@ -159,4 +165,9 @@
             margin-left: 0;
         }
     }
+
+    .ant-table-thead > tr > th{
+        font-weight: bolder;
+        color: #333;
+    }
 }

package/es/style/theme/header/index.less

@@ -121,10 +121,6 @@
                 color: #333;
             }
         }
-
-        .icon{
-            padding: 0 14px;
-        }
     }
 
     &--light{
@@ -209,6 +205,14 @@
         right: 4px;
         top: 10px;
     }
+
+    
+}
+
+.brand-logo{
+    width: 40px;
+    height: 60px;
+    margin-left: -7px;
 }
 
 .dt-multiple-header{

package/es/theme/header/components/logo.d.ts

@@ -25,6 +25,49 @@ declare const _sfc_main: import("vue").DefineComponent<{
     getLogoClass: import("vue").ComputedRef<(string | {
         'collapsed-show-title': boolean;
     })[]>;
+    DtIcon: import("vue").DefineComponent<{
+        iconClass: {
+            type: StringConstructor;
+            required: true;
+        };
+        className: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }, {
+        isSvgIcon: import("vue").ComputedRef<boolean>;
+        iconName: import("vue").ComputedRef<string>;
+        clsName: import("vue").ComputedRef<string>;
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        iconClass: {
+            type: StringConstructor;
+            required: true;
+        };
+        className: {
+            type: (StringConstructor | ArrayConstructor)[];
+            default: string;
+        };
+        color: {
+            type: StringConstructor;
+            default: string;
+        };
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+    }>>, {
+        className: string | unknown[];
+        color: string;
+        size: number;
+    }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     theme: {
         type: StringConstructor;

package/es/theme/sider/components/basic-menu/basic-menu.d.ts

@@ -125,7 +125,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
                 'onUpdate:openKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:selectedKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:activeKey': import("vue").PropType<(key: import("ant-design-vue/lib/_util/type").Key) => void>;
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "multiple" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -742,10 +742,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     type: string;
     mode: MenuMode;
-    inlineCollapsed: boolean;
     theme: import("@dt-frames/core").Theme;
-    inlineIndent: number;
     isHorizontal: boolean;
+    inlineCollapsed: boolean;
+    inlineIndent: number;
     collapsedShowTitle: boolean;
     mixSider: boolean;
 }>;

package/es/theme/tabs/components/TabContent.d.ts

@@ -64,7 +64,7 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {
                 'onUpdate:visible': {
                     type: import("vue").PropType<(val: boolean) => void>;
                 };
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "visible" | "overlayStyle" | "disabled" | "arrow" | "forceRender" | "minOverlayWidthMatchTrigger" | "destroyPopupOnHide">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "visible" | "overlayStyle" | "disabled" | "forceRender" | "arrow" | "minOverlayWidthMatchTrigger" | "destroyPopupOnHide">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -501,7 +501,7 @@ declare const _sfc_main: import("vue").DefineComponent<{}, {
                 'onUpdate:openKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:selectedKeys': import("vue").PropType<(keys: import("ant-design-vue/lib/_util/type").Key[]) => void>;
                 'onUpdate:activeKey': import("vue").PropType<(key: import("ant-design-vue/lib/_util/type").Key) => void>;
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "multiple" | "theme" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "disabled" | "mode" | "theme" | "multiple" | "inlineCollapsed" | "disabledOverflow" | "forceSubMenuRender" | "selectable" | "inlineIndent" | "subMenuOpenDelay" | "subMenuCloseDelay" | "triggerSubMenuAction">;
             $attrs: {
                 [x: string]: unknown;
             };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dt-frames/ui",
-	"version": "1.0.4",
+	"version": "1.0.7",
 	"keywords": [
 		"ui",
 		"dt-ui"
@@ -28,6 +28,7 @@
 	"types": "./es/index.d.ts",
 	"sideEffects": false,
 	"dependencies": {
+		"@iconify/iconify": "^2.1.2",
 		"@vueuse/core": "^7.5.2",
 		"lodash-es": "^4.17.21",
 		"sortablejs": "^1.15.0",
@@ -41,7 +42,9 @@
 	},
 	"devDependencies": {
 		"@iconify/json": "^1.1.460",
-		"@vitejs/plugin-vue": "^2.0.0",
-		"vite": "^2.7.2"
+		"@vitejs/plugin-vue": "^2.2.0",
+		"vite": "^2.8.0",
+		"vite-plugin-purge-icons": "^0.7.0",
+		"vite-plugin-theme": "^0.8.6"
 	}
 }

package/src/components/curd/src/components/dialog.vue

@@ -9,7 +9,7 @@
     import { isFunction, Recordable } from "@dt-frames/core";
     import { omit } from 'lodash-es'
     import { Ref, PropType, watch, toRaw, unref, watchEffect } from "vue";
-    import { useForm, DtForm } from "../../../forms";
+    import { useForm, DtForm, FormProps } from "../../../forms";
     import { DtModal, useModal } from "../../../modal"
     import { basicProps } from "./props";
     
@@ -18,28 +18,34 @@
         ...{ 
             onRegister: { type: Function },
             formProps: {
+                type: Object as PropType<Ref<Partial<FormProps>>>
+            },
+            formsVal: {
                 type: Object as PropType<Ref<Recordable>>
             }
         }
     } )
 
-    const [registerDialog, { }] = useModal({
+    const [registerDialog] = useModal({
         ...omit(toRaw(props), [
             'actions',
             'curd',
             'formProps',
+            'formsVal',
             'onRegister',
             'schemas'
-        ])
+        ]),
+        destroyOnClose: true
     })
 
     const [ registerForm, { getFormValues, setFormValues } ] = useForm({
+        ...( props.formProps.value || {} ),
         schemas: props.schemas,
         mode: 'dialog'
     })
 
     watch(
-        () => props.formProps.value,
+        () => props.formsVal.value,
         v => {
             if( v ) {
                 setFormValues( toRaw(v) )
@@ -53,7 +59,7 @@
 
             let obj = Object.assign(
                 {}, 
-                props.formProps.value || {},
+                props.formsVal.value || {},
                 getFormValues()
             )
             

package/src/components/curd/src/hooks/useCurd.tsx

@@ -1,21 +1,22 @@
-import { DtCreateDialog, error, isFunction, Recordable } from "@dt-frames/core";
-import { DtForm, useForm } from "../../../forms";
-import { h, ref, unref } from "vue"
-import { useModal, useModalOut } from "../../../modal"
+import { error, isFunction, Recordable, useMessage } from "@dt-frames/core";
+import { h, ref } from "vue"
+import { useModalOut } from "../../../modal"
 import DtModal from "../components/dialog.vue";
 import { CrudOptType } from "../types/curd.type";
 
 
 export function useCurd(curdOpt: CrudOptType) {
-    const formProps = ref<Recordable>()
+    const formsVal = ref<Recordable>()
     const [register, { closeModal, setModalProps, openModal }] = useModalOut()
+    const { confirm } = useMessage()
 
     const DtCurdModal = () => {
         return h(
                 <div class="curdModal">
                     <DtModal 
                         { ...curdOpt }
-                        formProps = { formProps }
+                        formsVal = { formsVal }
+                        formProps = { curdOpt.formProps }
                         onRegister = { register }
                     ></DtModal>
                 </div>
@@ -32,7 +33,14 @@ export function useCurd(curdOpt: CrudOptType) {
         const { primaryKey = 'id', curd } = curdOpt
         
         if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
-            curd.onDeletes( [row[ primaryKey ]] )
+            confirm({
+                title: '删除确认',
+                content: '确认要删除选中的数据？',
+                iconType: 'warning',
+                onOk() {
+                    curd.onDeletes( [row[ primaryKey ]] )
+                }
+            })
         } else {
             error(`缺少curd函数配置, 请将useSource中返回的curd参数传入useCurd配置项中!`)
         }
@@ -43,7 +51,7 @@ export function useCurd(curdOpt: CrudOptType) {
         const { primaryKey = 'id', curd } = curdOpt
 
         curd.onQueryById(row[primaryKey]).then( rsp => {
-            formProps.value = rsp
+            formsVal.value = rsp
         } )
 
         openModal()
@@ -55,7 +63,14 @@ export function useCurd(curdOpt: CrudOptType) {
         const { curd } = curdOpt
 
         if( curd && curd.onDeletes && isFunction( curd.onDeletes ) ) {
-            curd.onDeletes( ids )
+            confirm({
+                title: '批量删除确认',
+                content: '确认要批量删除选中的数据？',
+                iconType: 'warning',
+                onOk() {
+                    curd.onDeletes( ids )
+                }
+            })
         } else {
             error(`缺少curd函数配置, 请将useSource中返回的curd参数传入useCurd配置项中!`)
         }

package/src/components/curd/src/types/curd.type.ts

@@ -1,5 +1,5 @@
 import { Recordable } from "@dt-frames/core"
-import { FormSchema, ButtonProps } from "../../../forms/src/types/form.type"
+import { FormSchema, ButtonProps, FormProps } from "../../../forms/src/types/form.type"
 
 export type CrudOptType = {
     // 标题
@@ -16,6 +16,8 @@ export type CrudOptType = {
     showClose?: boolean
     // 物理主键
     primaryKey?: string
+    // 弹框中表格的属性
+    formProps?: Partial<FormProps>,
     // 增删改查接口
     curd?: {
         onAdd?: ( model: Recordable ) => void

package/src/components/dialog/index.ts

@@ -0,0 +1,5 @@
+import { useDialog } from './src/hooks/useDialog'
+
+export {
+    useDialog
+}

package/src/components/dialog/src/hooks/useDialog.ts

@@ -0,0 +1,85 @@
+import { ModalProps, Recordable } from "@dt-frames/core"
+import { VNode, h, createVNode, render as vueRender, Component } from "vue"
+
+export function useDialog() {
+    function createDialog( component: any, options: any ) {
+        return new Promise( resolve => {
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+    
+            const wrapper = () => {
+                return h(component, {
+                    params: {
+                        ...options,
+                        afterClose: ( data: any ) => destroy( data )
+                    }
+                    
+                })
+            };
+    
+            let dialogInstance = render();
+    
+            function render() {
+                const vm = createVNode(component.children[0]);
+                vueRender(vm, div);
+                return vm;
+            }
+    
+            function destroy( data: any ) {
+                if (dialogInstance && div.parentNode) {
+                    vueRender(null, div);
+                    dialogInstance.component.update();
+                    dialogInstance = null;
+                    div.parentNode.removeChild(div);
+                }
+    
+                resolve( data );
+            }
+        } )
+    }
+    // function createDialog(component: any, props?: ModalProps) {
+    //     const afterClose = (rsp: Recordable) => { }
+
+    //     const div = document.createElement('div')
+    //     document.body.appendChild(div)
+
+    //     const wrapper = () => {
+    //         return (
+    //             h(component, {
+    //                 params: {
+    //                     ...props,
+    //                     afterClose: ( data: Recordable ) => destroy( data )
+    //                 }
+    //             })
+    //         )
+    //     }
+
+    //     let dialogInstance = render()
+        
+    //     function render(){
+    //         const vm = createVNode(wrapper)
+    //         vueRender(vm, div)
+    //         return vm
+    //     }
+
+    //     const destroy = ( data: Recordable ) => {
+    //         if (dialogInstance && div.parentNode) {
+    //             vueRender(null, div)
+    //             dialogInstance.component.update()
+    //             dialogInstance = null
+    //             div.parentNode.removeChild(div)
+    //         }
+
+    //         afterClose( data )
+    //     }
+
+
+    //     return {
+    //         afterClose
+    //     }
+    // }
+
+    return {
+        createDialog
+    }
+}

package/src/components/forms/index.ts

@@ -1,12 +1,11 @@
 import DtForm from './src/index.vue'
 import { useForm } from './src/hooks/useForm'
-import { ButtonProps, FormSchema } from './src/types/form.type'
 import FormButtons from './src/components/formButton.vue'
 
+export * from './src/types/form.type'
+
 export {
     FormButtons,
     DtForm,
-    useForm,
-    FormSchema,
-    ButtonProps
+    useForm
 }

package/src/components/forms/src/components/formIcon.vue

@@ -31,7 +31,8 @@
         title: '选择字体图标',
         width: '70%',
         showSave: false,
-        centered: true
+        centered: true,
+        wrapClassName: 'dt-icon-dialog',
     })
 
     const props = defineProps({
@@ -44,7 +45,7 @@
     function chooseIcon(icon) {
         setState(icon)
 
-        closeModal()
+        closeModal(icon)
     }
 
 </script>

package/src/components/forms/src/index.vue

@@ -223,21 +223,25 @@
                 (schemas) => resetSchema(schemas ?? [])
             )
 
+            watch(
+                () => unref(getProps).onSearch,
+                () => {
+                    useTimeoutFn(() => {
+                        // 如果有onSearch默认查询
+                        const { onSearch, autoFetch } = unref(getProps)
+
+                        if( autoFetch && onSearch && isFunction(onSearch) ) {
+                            onSearch(toRaw(defaultValue.value))
+                        }  
+                    }, 1)
+                }
+            )
+
             onMounted(() => {
                 // 每次加载 进行重置
                 setFormValues( null )
                 emit('register', formActionMethods)
                 initDefault()
-
-                // 为了保证table的数据能够成功传入useSource中，这里需要延迟执行search
-                useTimeoutFn(() => {
-                    // 如果有onSearch默认查询
-                    const { onSearch, autoFetch } = unref(getProps)
-
-                    if( autoFetch && onSearch && isFunction(onSearch) ) {
-                        onSearch(toRaw(defaultValue.value))
-                    }  
-                }, 20)
             })
 
             const getActionsProps = computed((): Recordable => {

package/src/components/icons/index.less

@@ -9,6 +9,7 @@
 .dt-icon{
     display: inline-block;
     text-align: center;
+    vertical-align: middle;
     & > svg{
         vertical-align: middle;
     }
@@ -74,7 +75,7 @@
                 padding: 4px;
                 transform: all 0.2s;
                 border: 1px solid #fff;
-                &:hover{
+                &:hover, &.active-icon{
                     border: 1px solid @primary-color;
                     border-radius: 4px;
                     color: @primary-color;
@@ -93,4 +94,8 @@
         background: #fff !important;
         color: @icon-pick-hover-color ;
     }
+}
+
+.dt-icon-dialog > div{
+    top: 0 !important;
 }

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

@@ -23,7 +23,7 @@
                     ></InputSearch>
 
                     <template v-for="icon in currentIcons" :key="icon">
-                        <a @click="selectIcon(icon)">
+                        <a @click="selectIcon(icon)" :class="activeIcon === icon && 'active-icon'">
                             <Tooltip 
                                 placement="bottom"
                                 overlayClassName="dt-pick-icon-item">
@@ -56,6 +56,7 @@
     const activeIndex = ref(1)
     const filter = ref(null)
     const currentIcons = ref([])
+    const activeIcon = ref(null)
 
 
     const iconMenus = computed(() => {
@@ -110,6 +111,7 @@
     }
 
     function selectIcon(icon) {
+        activeIcon.value = icon
         emits('chooseIcon', icon)
     }
    

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

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

package/src/components/index.ts

@@ -8,6 +8,7 @@ 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 },
@@ -42,5 +43,6 @@ export {
     useCurd,
     useModal,
     useModalOut,
-    export2Excel
+    export2Excel,
+    useDialog
 }

package/src/components/modal/index.less

@@ -1,6 +1,3 @@
-
-// @import 'ant-design-vue/es/modal/style/index.less';
-
 .fullscreen-modal {
     overflow: hidden;
 

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

@@ -2,21 +2,20 @@
     <div :class="getClass">
         <template v-if="canFullscreen">
             <Tooltip title="退出全屏" placement="bottom" v-if="fullScreen">
-                <i v-icon="'ic:baseline-fullscreen-exit'" @click="handleFullScreen" />
+                <i class="i ic:baseline-fullscreen-exit" @click="handleFullScreen" />
             </Tooltip>
             <Tooltip title="全屏" placement="bottom" v-else>
-                <i v-icon="'ic:baseline-fullscreen'" @click="handleFullScreen" />
+                <i class="i ic:baseline-fullscreen" @click="handleFullScreen" />
             </Tooltip>
         </template>
 
-        <DtIcon icon-class="mdi:close" @click="handleCancel" />
+        <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 },