@dt-frames/ui 1.0.3 → 1.0.6

package/es/style/components/forms/{src/index.less → index.less}

@@ -1,3 +1,5 @@
+@import '../modal/index.less';
+
 .text-secondary{
     color: #666;
 }

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;
     }

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

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

package/es/style/components/table/{src/index.less → 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/style/theme/theme.less

@@ -3,7 +3,8 @@
 @import './tabs/index.less';
 @import './footer/index.less';
 @import './transition.less';
-
+@import '../components/icons/index.less';
+@import '../components/container/index.less';
 
 @page-bg-color: #f0f2f5;
 

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/header/components/notify.d.ts

@@ -1,5 +1,4 @@
 declare const _sfc_main: import("vue").DefineComponent<{}, {
-    activeKey: import("vue").Ref<string>;
     getShowNotice: import("vue").ComputedRef<boolean | JSX.Element | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@dt-frames/ui",
-	"version": "1.0.3",
+	"version": "1.0.6",
 	"keywords": [
 		"ui",
 		"dt-ui"

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/{src/index.less → index.less}

@@ -1,3 +1,5 @@
+@import '../modal/index.less';
+
 .text-secondary{
     color: #666;
 }

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/formButton.vue

@@ -29,7 +29,7 @@
                 @click="toggleAdvanced">
                 <span class="text">{{ advancedRef ? '收起' : '展开' }}</span>
                 <span :class="getAdvanceClass">
-                    <DtIcon :icon-class="'ic:baseline-arrow-drop-down'" :size="22"></DtIcon>
+                    <DtIcon icon-class="ic:baseline-arrow-drop-down" :size="22"></DtIcon>
                 </span>
             </Button>
             

package/src/components/icons/{src/index.less → index.less}

@@ -9,6 +9,7 @@
 .dt-icon{
     display: inline-block;
     text-align: center;
+    vertical-align: middle;
     & > svg{
         vertical-align: middle;
     }

package/src/components/iframe/index.less

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

package/src/components/iframe/index.ts

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

package/src/components/index.ts

@@ -7,7 +7,8 @@ import { DtTable, useTable } from './table'
 import { useSource } from './source'
 import { useCurd } from './curd'
 import { export2Excel } from './excel'
-import { DtIFrame } from './iframe'
+import { DtIframe } from './iframe'
+import { useDialog } from './dialog';
 
 const dtComponents = [
     { name: 'dt-base-router', component: DtBaseRouter },
@@ -35,12 +36,13 @@ export {
     DtForm,
     DtTable,
     FormButtons,
-    DtIFrame,
+    DtIframe,
     useForm,
     useTable,
     useSource,
     useCurd,
     useModal,
     useModalOut,
-    export2Excel
+    export2Excel,
+    useDialog
 }

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 },

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

@@ -1,4 +1,4 @@
-import { defineComponent, Slots, toRefs, unref } from "vue";
+import { defineComponent, toRefs, unref } from "vue";
 import { Modal } from 'ant-design-vue';
 import { useAttrs, useSlots } from '@dt-frames/core';
 import { basicProps } from '../props';

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

@@ -23,7 +23,7 @@
     })
 
     const buttonActions: ButtonProps[] = [
-        { name: '保存', preIcon: 'mdi:content-save', type: 'primary', flag: 'OK', show: props.showSave },
+        { name: '保存', preIcon: 'mdi:content-save', type: 'primary', flag: 'OK' },
         { name: '关闭', preIcon: 'mdi:close', flag: 'CANCEL' },
     ]
 

package/src/components/modal/src/hooks/useModal.ts

@@ -2,7 +2,6 @@ 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";
 

package/src/components/source/src/hooks/useFetch.ts

@@ -48,13 +48,12 @@ export function useFetch(api: string | ApiType, baseUrl: string = '') {
                 ...header,
                 ...{ onlyData: false }
             }).then(
-                (data: JsonResult) => {
+                (data: JsonResult) => { 
                     if( afterFetch && isFunction(afterFetch) ) {
                         data = afterFetch( data )
                     }
-                    if( data.status ) {
-                        resolve( data.data )
-                    }
+                    
+                    resolve( data?.data )
                 },
                 (error) => {
                     reject( error )

package/src/components/source/src/hooks/useSource.ts

@@ -1,5 +1,5 @@
 import { computed, ref, reactive, toRaw, Ref } from 'vue'
-import { http, isFunction, isString, JsonResult, Recordable } from "@dt-frames/core"
+import { http, isArray, isFunction, isObject, isString, JsonResult, Recordable } from "@dt-frames/core"
 import { BaseDataType, SourceType } from "../types/source.type"
 import { useFetch } from './useFetch'
 import { TableParamsType } from '../types/table.type'
@@ -74,7 +74,8 @@ export function useSource(opt: SourceType) {
             pageSize: pagination.pageSize
         }
 
-        baseData.orderDTOs = sort
+        // baseData.orderDTOs = sort.length ?? null
+        baseData.orderDTOs = []
 
         if( needSearch ) search()
     }
@@ -90,7 +91,7 @@ export function useSource(opt: SourceType) {
         ).then( (rsp: any) => {
             const { records, pageDTO } = rsp
            
-            dataSource.value = records
+            dataSource.value.splice(0, dataSource.value.length, ...records)
 
             pagination.value = {
                 current: (pageDTO?.pageNo??0) + 1, 

package/src/components/source/src/types/table.type.ts

@@ -3,6 +3,6 @@ import { Recordable } from "@dt-frames/core";
 export type TableParamsType = {
     pagination: any,
     showBtnLoading: boolean,
-    sort: Recordable,
+    sort: Recordable[],
     filter: any
 }

package/src/components/table/{src/index.less → 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/src/components/table/index.ts

@@ -3,5 +3,5 @@ import DtTable from "./src/index.vue"
 
 export {
     DtTable, 
-    useTable 
+    useTable,
 }

package/src/components/table/src/components/TableActions.vue

@@ -13,7 +13,7 @@
             :getPopupContainer="getPopupContainer"
             :trigger="['click']"
         >
-            <DtIcon :icon-class="'mdi:cog-outline'"></DtIcon>
+            <DtIcon :icon-class="'ic:baseline-settings'" class-name="dt-table-action-dropdown"></DtIcon>
 
             <template #overlay>
                 <Menu class="dt-action-select">
@@ -22,7 +22,7 @@
                             v-if="item.ifShow"
                             @click="handleAction(item)"
                         >
-                            <DtIcon :icon-class="item.icon" :color="item.color"></DtIcon>
+                            <DtIcon :icon-class="item.icon" :color="item.color" :size="16"></DtIcon>
                             <span>{{ item.title }}</span>
                         </MenuItem>
                     </template>