@truenewx/tnxvue3 3.4.4 → 3.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.4.4",
+  "version": "3.4.5",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "type": "module",
@@ -31,7 +31,7 @@
     "vue-router": "~4.6.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.4.3",
+    "@truenewx/tnxcore": "3.4.4",
     "bootstrap": "5.3.8",
     "cash-dom": "8.1.5",
     "mitt": "3.0.1"

package/src/bootstrap-vue/dialog/Dialog.vue

@@ -20,9 +20,9 @@
         <component ref="content" :is="content" v-bind="contentProps" v-else></component>
         <template #footer>
             <TnxbsvButton v-for="(button, index) in buttons" :key="index"
-                :type="button.type || 'light'"
-                :loading="buttonLoadings[index]"
-                @click="btnClick(index)"
+                          :type="button.type || 'light'"
+                          :loading="buttonLoadings[index]"
+                          @click="btnClick(index)"
             >
                 {{ button.caption || button.text }}
             </TnxbsvButton>
@@ -113,14 +113,26 @@ export default {
         },
         btnClick(index) {
             const button = this.buttons[index];
-            if (button && typeof button.click === 'function') {
-                let result = button.click.call(this.$refs.content, this.close);
-                if (result === 'loading') {
-                    this.buttonLoadings[index] = true;
-                    return;
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
                 }
-                if (result === false) {
-                    return;
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
                 }
             }
             this.close();

package/src/element-plus/dialog/Dialog.vue

@@ -170,14 +170,26 @@ export default {
         },
         btnClick(index) {
             const button = this.buttons[index];
-            if (button && typeof button.click === 'function') {
-                let result = button.click.call(this.$refs.content, this.close);
-                if (result === 'loading') {
-                    this.buttonLoadings[index] = true;
-                    return;
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
                 }
-                if (result === false) {
-                    return;
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
                 }
             }
             this.close();

package/src/element-plus/drawer/Drawer.vue

@@ -87,9 +87,26 @@ export default {
     methods: {
         btnClick(index) {
             const button = this.buttons[index];
-            if (button && typeof button.click === 'function') {
-                if (button.click.call(this.$refs.content, this.close) === false) {
-                    return;
+            if (button) {
+                let click = button.click;
+                if (typeof click === 'string') {
+                    if (typeof this.$refs.content[click] === 'function') {
+                        click = this.$refs.content[click];
+                    } else {
+                        console.error(`Method '${click}' not found in component:`, this.$refs.content);
+                        click = null;
+                    }
+                }
+
+                if (typeof click === 'function') {
+                    let result = click.call(this.$refs.content, this.close);
+                    if (result === 'loading') {
+                        this.buttonLoadings[index] = true;
+                        return;
+                    }
+                    if (result === false) {
+                        return;
+                    }
                 }
             }
             this.close();

package/src/element-plus/fss-upload/FssUpload.vue

@@ -275,7 +275,7 @@ export default {
             if (typeof reject === 'function') {
                 reject(file);
             } else {
-                this.tnx.alert('文件"' + file.name + '"还未上传完毕，请稍候').then(() => {
+                this.tnx.alert('文件"' + file.name + '"还未上传完毕，请稍候', {title: '提示'}).then(() => {
                     if (reject && typeof reject.disable === 'function') {
                         reject.disable(false);
                     }

package/src/element-plus/icon/Icon.vue

@@ -69,6 +69,7 @@
         <Switch v-else-if="value === 'Switch'"/>
         <Tools v-else-if="value === 'Tools'"/>
         <Top v-else-if="value === 'Top'"/>
+        <Upload v-else-if="value === 'Upload'"/>
         <User v-else-if="value === 'User'"/>
         <UserFilled v-else-if="value === 'UserFilled'"/>
         <View v-else-if="value === 'View'"/>
@@ -148,6 +149,7 @@ import {
     Switch,
     Tools,
     Top,
+    Upload,
     User,
     UserFilled,
     View,
@@ -225,6 +227,7 @@ const components = {
     Switch,
     Tools,
     Top,
+    Upload,
     User,
     UserFilled,
     View,

package/src/element-plus/tnxel.css

@@ -10,14 +10,6 @@
     background-color: var(--el-color-info-light-8) !important;
 }
 
-.text-white {
-    color: white !important;
-}
-
-.bg-white {
-    background-color: white !important;
-}
-
 .text-regular {
     color: var(--el-text-color-regular) !important;
 }

package/src/element-plus/tnxel.ts

@@ -8,6 +8,7 @@ import ElementPlus, {
     ElMessageBox,
     ElMessageBoxOptions,
     MessageParams,
+    MessageType,
     LoadingOptions,
     LoadingInstance,
 } from 'element-plus';
@@ -69,7 +70,8 @@ type VueComponent = Vue.Component & {
 
 type ModalComponentInstance = Vue.ComponentPublicInstance & {
     id: string;
-    close: () => Promise<void>;
+    close: () => void;
+    options: Record<string, any>;
 }
 
 export default class TnxEl extends TnxVue {
@@ -175,8 +177,8 @@ export default class TnxEl extends TnxVue {
             theme: options.theme,
         });
         const dialog = dialogVm.mount(containerSelector) as ModalComponentInstance;
-        dialog.$options = Object.assign(dialog.$options || {}, options);
-        dialog.$options.onClosed = this.util.function.around(dialog.$options.onClosed, (onClosed: () => void): void => {
+        dialog.options = Object.assign(dialog.options || {}, options);
+        dialog.options.onClosed = this.util.function.around(dialog.options.onClosed, (onClosed: () => void): void => {
             dialogVm.unmount();
             this.dialogInstances.remove(dialog);
 
@@ -197,26 +199,18 @@ export default class TnxEl extends TnxVue {
         return dialog;
     }
 
-    closeDialog(all?: boolean): Promise<void> {
-        return new Promise<void>((resolve) => {
-            if (this.dialogInstances.length) {
-                let dialog = this.dialogInstances.pop();
-                let promises = [];
-                while (dialog) {
-                    promises.push(dialog.close());
-                    if (all) {
-                        dialog = this.dialogInstances.pop();
-                    } else {
-                        break;
-                    }
+    closeDialog(all?: boolean): void {
+        if (this.dialogInstances.length) {
+            let dialog = this.dialogInstances.pop();
+            while (dialog) {
+                dialog.close();
+                if (all) {
+                    dialog = this.dialogInstances.pop();
+                } else {
+                    break;
                 }
-                Promise.all(promises).then(() => {
-                    resolve();
-                });
-            } else {
-                resolve();
             }
-        });
+        }
     }
 
     private drawerInstances: ModalComponentInstance[] = []; // 抽屉实例堆栈
@@ -251,8 +245,8 @@ export default class TnxEl extends TnxVue {
             theme: options.theme,
         });
         const drawer = drawerVm.mount(containerSelector) as ModalComponentInstance;
-        drawer.$options = Object.assign(drawer.$options || {}, options);
-        drawer.$options.onClosed = this.util.function.around(drawer.$options.onClosed, (onClosed: () => void): void => {
+        drawer.options = Object.assign(drawer.options || {}, options);
+        drawer.options.onClosed = this.util.function.around(drawer.options.onClosed, (onClosed: () => void): void => {
             drawerVm.unmount();
             this.drawerInstances.remove(drawer);
 
@@ -273,26 +267,18 @@ export default class TnxEl extends TnxVue {
         return drawer;
     }
 
-    closeDrawer(all?: boolean): Promise<void> {
-        return new Promise<void>((resolve) => {
-            if (this.drawerInstances.length) {
-                let drawer = this.drawerInstances.pop();
-                let promises = [];
-                while (drawer) {
-                    promises.push(drawer.close());
-                    if (all) {
-                        drawer = this.drawerInstances.pop();
-                    } else {
-                        break;
-                    }
+    closeDrawer(all?: boolean): void {
+        if (this.drawerInstances.length) {
+            let drawer = this.drawerInstances.pop();
+            while (drawer) {
+                drawer.close();
+                if (all) {
+                    drawer = this.drawerInstances.pop();
+                } else {
+                    break;
                 }
-                Promise.all(promises).then(() => {
-                    resolve();
-                });
-            } else {
-                resolve();
             }
-        });
+        }
     }
 
     private closeMessage() {
@@ -322,73 +308,73 @@ export default class TnxEl extends TnxVue {
         });
     }
 
-    toast(message: string, timeout?: number): Promise<void> {
+    toast(message: string, theme?: string, options?: { duration?: number }): Promise<void> {
         this.closeMessage();
         return new Promise<void>((resolve) => {
-            let options: MessageParams = {
-                type: 'success', // 默认为成功主题，可更改为其它主题
+            let msgParams: MessageParams = {
+                type: (theme || 'success') as MessageType, // 默认为成功主题，可更改为其它主题
                 offset: this.util.dom.getDocHeight() * 0.4,
                 dangerouslyUseHTMLString: true,
                 showClose: false,
                 message: message,
-                duration: timeout || 2000,
+                duration: options?.duration || 2000,
                 customClass: 'tnxel-toast',
                 onClose: () => {
                     resolve();
                 }
             };
-            ElMessage(options);
+            ElMessage(msgParams);
             this.handleZIndex('.el-message:last');
-            this.eventBus.emit('tnx.toast', options);
+            this.eventBus.emit('tnx.toast', msgParams);
         });
     }
 
-    async alert(message: string, title: string = '提示'): Promise<void> {
-        let options: ElMessageBoxOptions = {
-            title: title,
+    async alert(message: string, options?: { title?: string, confirmButtonText?: string }): Promise<void> {
+        let msgOptions: ElMessageBoxOptions = {
+            title: options?.title || '提示',
             dangerouslyUseHTMLString: true,
             type: 'warning',
-            confirmButtonText: '确定',
+            confirmButtonText: options?.confirmButtonText || '确定',
         };
         this.closeMessage();
-        await ElMessageBox.alert(message, options);
+        await ElMessageBox.alert(message, msgOptions);
         this.handleZIndex('.el-message-box__wrapper:last');
-        this.eventBus.emit('tnx.alert', Object.assign({}, options, {message}));
+        this.eventBus.emit('tnx.alert', Object.assign({}, msgOptions, {message}));
     }
 
-    async success(message: string): Promise<void> {
-        let options: ElMessageBoxOptions = {
-            title: '成功',
+    async success(message: string, options?: { title?: string, confirmButtonText?: string }): Promise<void> {
+        let msgOptions: ElMessageBoxOptions = {
+            title: options?.title || '成功',
             dangerouslyUseHTMLString: true,
             type: 'success',
-            confirmButtonText: '确定',
+            confirmButtonText: options?.confirmButtonText || '确定',
         };
         this.closeMessage();
-        await ElMessageBox.alert(message, options);
+        await ElMessageBox.alert(message, msgOptions);
         this.handleZIndex('.el-message-box__wrapper:last');
-        this.eventBus.emit('tnx.success', Object.assign({}, options, {message}));
+        this.eventBus.emit('tnx.success', Object.assign({}, msgOptions, {message}));
     }
 
-    async error(message: string): Promise<void> {
-        let options: ElMessageBoxOptions = {
-            title: '错误',
+    async error(message: string, options?: { title?: string, confirmButtonText?: string }): Promise<void> {
+        let msgOptions: ElMessageBoxOptions = {
+            title: options?.title || '错误',
             dangerouslyUseHTMLString: true,
             type: 'error',
-            confirmButtonText: '确定',
+            confirmButtonText: options?.confirmButtonText || '确定',
         };
         this.closeMessage();
-        await ElMessageBox.alert(message, options);
+        await ElMessageBox.alert(message, msgOptions);
         this.handleZIndex('.el-message-box__wrapper:last');
-        this.eventBus.emit('tnx.error', Object.assign({}, options, {message}));
+        this.eventBus.emit('tnx.error', Object.assign({}, msgOptions, {message}));
     }
 
-    confirm(message: string, title = '确认') {
-        let options: ElMessageBoxOptions = {
-            title: title,
+    confirm(message: string, options?: { title?: string, confirmButtonText?: string, cancelButtonText?: string }) {
+        let msgOptions: ElMessageBoxOptions = {
+            title: options?.title || '确认',
             type: 'info',
             icon: Vue.markRaw(Icon.components.QuestionFilled),
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
+            confirmButtonText: options?.confirmButtonText || '确定',
+            cancelButtonText: options?.cancelButtonText || '取消',
             dangerouslyUseHTMLString: true,
             distinguishCancelAndClose: true,
         };
@@ -401,13 +387,13 @@ export default class TnxEl extends TnxVue {
 
         this.closeMessage();
         return new Promise<boolean>(resolve => {
-            ElMessageBox.confirm(message, options).then(() => {
+            ElMessageBox.confirm(message, msgOptions).then(() => {
                 resolve(true);
             }).catch(() => {
                 resolve(false);
             });
             this.handleZIndex('.el-message-box__wrapper:last');
-            this.eventBus.emit('tnx.confirm', Object.assign({}, options, {message}));
+            this.eventBus.emit('tnx.confirm', Object.assign({}, msgOptions, {message}));
         })
     }
 

package/src/tdesign/mobile/calendar/Calendar.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="tnxtdm-calendar">
+        <div class="tnxtdm-calendar__value">{{ modelValue }}</div>
+        <div class="tnxtdm-calendar__icon" :style="{color: iconColor}" @click="visible = true">
+            <t-icon name="calendar-1"/>
+        </div>
+        <t-calendar
+            v-model:visible="visible"
+            :value="calendarValue"
+            type="single"
+            switch-mode="year-month"
+            :min-date="finalMinDate"
+            :max-date="finalMaxDate"
+            :title="title"
+            @confirm="confirm"
+        />
+    </div>
+</template>
+
+<script>
+const pattern = 'yyyy-MM-dd';
+
+function parseDate(val) {
+    if (!val) {
+        return undefined;
+    }
+    if (val instanceof Date) {
+        return val;
+    }
+    if (typeof val === 'number') {
+        return new Date(val);
+    }
+    if (typeof val === 'string') {
+        val = val.replace(/-/g, '/');
+    }
+    const d = new Date(val);
+    if (!isNaN(d.getTime())) {
+        return d;
+    }
+    return undefined;
+}
+
+export default {
+    name: 'TnxtdmCalendar',
+    props: {
+        modelValue: String,
+        title: String,
+        defaultValue: {
+            type: String,
+            default: () => {
+                return new Date().format(pattern);
+            },
+        },
+        minDate: {
+            type: [String, Number, Date],
+            default: '1900-01-01',
+        },
+        maxDate: {
+            type: [String, Number, Date],
+            default: '2099-12-31',
+        },
+        iconColor: String,
+    },
+    data() {
+        return {
+            visible: false,
+            calendarValue: parseDate(this.modelValue || this.defaultValue),
+        };
+    },
+    computed: {
+        finalMinDate() {
+            return parseDate(this.minDate);
+        },
+        finalMaxDate() {
+            return parseDate(this.maxDate);
+        },
+    },
+    emits: ['update:modelValue'],
+    watch: {
+        modelValue() {
+            this.init();
+        },
+        visible(val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            let value = this.modelValue || this.defaultValue;
+            this.calendarValue = parseDate(value);
+        },
+        confirm(val) {
+            let result = new Date(val).format(pattern);
+            this.$emit('update:modelValue', result);
+            this.visible = false;
+        },
+    },
+};
+</script>
+
+<style>
+.tnxtdm-calendar {
+    display: flex;
+    align-items: center;
+
+    .tnxtdm-calendar__value {
+        min-width: 95px;
+    }
+
+    .tnxtdm-calendar__icon {
+        display: flex;
+        align-items: center;
+        color: var(--td-text-color-primary);
+    }
+}
+</style>

package/src/tdesign/mobile/date-time-picker/DateTimePicker.vue

@@ -0,0 +1,147 @@
+<template>
+    <div class="tnxtdm-date-time-picker">
+        <div class="tnxtdm-date-time-picker__value" :data-mode="mode">{{ model }}</div>
+        <div class="tnxtdm-date-time-picker__icon" :style="{color: iconColor}" @click="visible = true">
+            <t-icon name="calendar-1"/>
+        </div>
+        <t-popup v-model="visible" placement="bottom">
+            <t-date-time-picker
+                v-model="pickerValue"
+                :format="format"
+                :mode="mode"
+                :title="title"
+                :start="getDateValue(start)"
+                :end="getDateValue(end)"
+                @confirm="confirm"
+                @cancel="visible = false"
+                v-if="visible"/>
+        </t-popup>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxtdmDateTimePicker',
+    props: {
+        modelValue: String,
+        title: String,
+        defaultValue: {
+            type: [String, Number],
+            default: () => {
+                return new Date().getTime();
+            },
+        },
+        mode: {
+            type: String,
+            default: 'date',
+        },
+        showCellTitle: Boolean,
+        start: {
+            type: [String, Number],
+            default: '1000-01-01 00:00:00',
+        },
+        end: {
+            type: [String, Number],
+            default: '9999-12-31 23:59:59',
+        },
+        iconColor: String,
+    },
+    data() {
+        return {
+            visible: false,
+            model: this.modelValue || '',
+            pickerValue: '',
+        };
+    },
+    computed: {
+        format() {
+            switch (this.mode) {
+                case 'year':
+                    return 'YYYY';
+                case 'month':
+                    return 'YYYY-MM';
+                case 'date':
+                    return 'YYYY-MM-DD';
+                case 'hour':
+                    return 'YYYY-MM-DD HH';
+                case 'minute':
+                    return 'YYYY-MM-DD HH:mm';
+                case 'second':
+                    return 'YYYY-MM-DD HH:mm:ss';
+            }
+            return undefined;
+        },
+        pattern() {
+            return this.format.replace('YYYY', 'yyyy').replace('DD', 'dd');
+        },
+    },
+    emits: ['update:modelValue'],
+    watch: {
+        modelValue(val) {
+            this.model = val;
+        },
+        model(val) {
+            this.$emit('update:modelValue', val);
+        },
+        visible(val) {
+            if (val) {
+                this.pickerValue = this.model || this.getDateValue(this.defaultValue);
+            }
+        }
+    },
+    methods: {
+        getDateValue(date) {
+            if (date) {
+                return new Date(date).format(this.pattern);
+            }
+            return undefined;
+        },
+        confirm(value) {
+            this.model = String(value);
+            this.visible = false;
+        },
+    }
+}
+</script>
+
+<style>
+.tnxtdm-date-time-picker {
+    display: flex;
+    align-items: center;
+
+    .tnxtdm-date-time-picker__value {
+        display: flex;
+        align-items: center;
+
+        &[data-mode="year"] {
+            min-width: 44px;
+        }
+
+        &[data-mode="month"] {
+            min-width: 70px;
+        }
+
+        &[data-mode="date"] {
+            min-width: 95px;
+        }
+
+        &[data-mode="hour"] {
+            min-width: 119px;
+        }
+
+        &[data-mode="minute"] {
+            min-width: 141px;
+        }
+
+        &[data-mode="second"] {
+            min-width: 164px;
+        }
+    }
+
+    .tnxtdm-date-time-picker__icon {
+        display: flex;
+        align-items: center;
+        color: var(--td-text-color-primary);
+    }
+}
+</style>