@truenewx/tnxvue3 3.4.3 → 3.4.5

package/src/tdesign/mobile/tnxtdm.ts

@@ -1,16 +1,319 @@
-import { App, Component } from 'vue';
-import { Router } from 'vue-router';
-import TnxTd from '../tnxtd';
-import TDesign from 'tdesign-mobile-vue';
+import {App, Component} from 'vue';
+import {Router} from 'vue-router';
+import TnxTd from '../tnxtd.ts';
+import TDesign, {Dialog as TDialogPlugin, Toast} from 'tdesign-mobile-vue/esm';
+import 'tdesign-mobile-vue/esm/style/index.js'
+import './tnxtdm.css';
+import * as Vue from "vue";
+import {type DialogOptions, type DrawerOptions, type OpenOptions} from '../../tnxvue.ts';
+import Calendar from './calendar/Calendar.vue';
+import DateTimePicker from './date-time-picker/DateTimePicker.vue';
+import Dialog from './dialog/Dialog.vue';
+import Drawer from './drawer/Drawer.vue';
+import EnumSelect from './enum-select/EnumSelect.vue';
+import Popup from './popup/Popup.vue';
+import RegionPicker from './region-picker/RegionPicker.vue';
+import Select from './select/Select.vue';
+import SlideRadioGroup from './slide-radio-group/SlideRadioGroup.vue';
+
+export type {OpenOptions};
+
+const components = {
+    Calendar,
+    DateTimePicker,
+    Dialog,
+    Drawer,
+    EnumSelect,
+    Popup,
+    RegionPicker,
+    Select,
+    SlideRadioGroup,
+};
+
+const dialogContainerClass = 'tnxtdm-dialog-container';
+const drawerContainerClass = 'tnxtdm-drawer-container';
+
+type VueComponent = Vue.Component & {
+    components?: Record<string, Vue.Component>;
+};
+
+type ModalComponentInstance = Vue.ComponentPublicInstance & {
+    id: string;
+    close: () => Promise<void>;
+    options: Record<string, any>;
+}
+
+type ToastTheme = 'success' | 'warning' | 'error' | 'loading';
 
 export default class TnxTdm extends TnxTd {
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
+    constructor(apiBaseUrl: string, id: string = 'tnxtdm') {
+        super(apiBaseUrl, id);
+        Object.assign(this.components, components);
     }
 
-    createVueApp(rootComponent: Component, router: Router, rootProps?: Record<string, any>): App {
+    createVueApp(rootComponent: Component, router?: Router, rootProps?: Record<string, any>): App {
         return super.createVueApp(rootComponent, router, rootProps).use(TDesign);
     }
 
+    private closeMessage() {
+        Toast.clear();
+    }
+
+    toast(message: string, theme?: string, options?: { duration?: number }): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.closeMessage();
+            Toast({
+                direction: 'column',
+                duration: options?.duration || 2000,
+                theme: theme as ToastTheme,
+                placement: 'middle',
+                message: message,
+                onClose: () => resolve(),
+            });
+        });
+    }
+
+    private dialogInstances: ModalComponentInstance[] = []; // 对话框实例堆栈
+    private drawerInstances: ModalComponentInstance[] = []; // 抽屉实例堆栈
+
+    dialog(content: string | Vue.Component,
+           title?: string,
+           options: DialogOptions = {},
+           contentProps: Record<string, any> = {}): ModalComponentInstance {
+        this.closeMessage();
+
+        let componentDefinition: VueComponent = Object.assign({}, Dialog);
+        if (this.isComponent(content)) {
+            const components = Object.assign({}, Dialog.components || {});
+            components['tnxtdm-dialog-content'] = content;
+            componentDefinition.components = components;
+            content = null;
+        }
+
+        const dialogId = 'dialog-' + (new Date().getTime());
+        const container = document.createElement('div');
+        container.className = dialogContainerClass;
+        container.id = dialogId;
+        document.body.appendChild(container);
+
+        const buttons = this.getOptionsButtons(options);
+        const containerSelector = '.' + dialogContainerClass + '#' + dialogId;
+        let dialogVm = this.createVueApp(componentDefinition, null, {
+            modelValue: true,
+            container: containerSelector,
+            title: title,
+            content: content,
+            contentProps: contentProps,
+            buttons: buttons,
+            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 => {
+            dialogVm.unmount();
+            this.dialogInstances.remove(dialog);
+
+            const containerElement = document.querySelector(containerSelector) as HTMLElement | null;
+            if (containerElement) {
+                containerElement.remove();
+            }
+
+            if (onClosed) {
+                onClosed.call(dialog);
+            }
+        });
+        this.dialogInstances.push(dialog);
+        return dialog;
+    }
+
+    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;
+                }
+            }
+        }
+    }
+
+    drawer(content: string | Vue.Component,
+           title?: string,
+           options: DrawerOptions = {},
+           contentProps: Record<string, any> = {}): ModalComponentInstance {
+        this.closeMessage();
+
+        let componentDefinition: VueComponent = Object.assign({}, Drawer);
+        if (this.isComponent(content)) {
+            const components = Object.assign({}, Drawer.components || {});
+            components['tnxtdm-drawer-content'] = content;
+            componentDefinition.components = components;
+            content = null;
+        }
+
+        const drawerId = 'drawer-' + (new Date().getTime());
+        const container = document.createElement('div');
+        container.className = drawerContainerClass;
+        container.id = drawerId;
+        document.body.appendChild(container);
+
+        const buttons = this.getOptionsButtons(options);
+        const containerSelector = '.' + drawerContainerClass + '#' + drawerId;
+        let drawerVm = this.createVueApp(componentDefinition, null, {
+            modelValue: true,
+            container: containerSelector,
+            title: title,
+            content: content,
+            contentProps: contentProps,
+            buttons: buttons,
+            theme: options.theme,
+            placement: (options as any).placement,
+        });
+        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 => {
+            drawerVm.unmount();
+            this.drawerInstances.remove(drawer);
+
+            const containerElement = document.querySelector(containerSelector) as HTMLElement | null;
+            if (containerElement) {
+                containerElement.remove();
+            }
+
+            if (onClosed) {
+                onClosed.call(drawer);
+            }
+        });
+        this.drawerInstances.push(drawer);
+        return drawer;
+    }
+
+    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;
+                }
+            }
+        }
+    }
+
+    alert(message: string, options?: { title?: string, theme?: string, confirmButtonText?: string }): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.closeMessage();
+            let title = options?.title || '提示';
+            let theme = options?.theme || 'warning';
+            let iconName = 'info-circle';
+            let iconColor = 'var(--td-brand-color)';
+            let confirmBtn: any = {
+                content: options?.confirmButtonText || '确定',
+                theme: 'primary'
+            };
+
+            if (theme === 'success') {
+                iconName = 'check-circle';
+                iconColor = 'var(--td-success-color)';
+                confirmBtn.theme = 'success';
+            } else if (theme === 'error') {
+                iconName = 'close-circle';
+                iconColor = 'var(--td-error-color)';
+                confirmBtn.theme = 'danger';
+            } else if (theme === 'warning') {
+                iconName = 'error-circle';
+                iconColor = 'var(--td-warning-color)';
+                confirmBtn.theme = 'warning';
+            } else if (theme === 'info') {
+                iconName = 'info-circle';
+                iconColor = 'var(--td-info-color)';
+                confirmBtn.theme = 'info';
+            }
+
+            let maxZIndex = 0;
+            const allElements = document.getElementsByTagName('*');
+            for (let i = 0; i < allElements.length; i++) {
+                const zIndex = parseInt(window.getComputedStyle(allElements[i]).zIndex);
+                if (!isNaN(zIndex) && zIndex > maxZIndex) {
+                    maxZIndex = zIndex;
+                }
+            }
+
+            TDialogPlugin.alert({
+                title: (h) => {
+                    return h('div', {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center'
+                        }
+                    }, [
+                        h(this.components.Icon, {
+                            name: iconName,
+                            style: {marginRight: '6px', color: iconColor, fontSize: '20px'}
+                        }),
+                        h('span', title)
+                    ]);
+                },
+                content: message,
+                confirmBtn: confirmBtn,
+                zIndex: maxZIndex + 2,
+                showOverlay: true,
+                overlayProps: {
+                    zIndex: maxZIndex + 1
+                },
+                destroyOnClose: true,
+                onConfirm: () => {
+                    resolve();
+                },
+                onClose: () => {
+                    resolve();
+                }
+            });
+        });
+    }
+
+    success(message: string, options?: { title?: string, confirmButtonText?: string }): Promise<void> {
+        return this.alert(message, Object.assign({title: '成功', theme: 'success'}, options));
+    }
+
+    error(message: string, options?: { title?: string, confirmButtonText?: string }): Promise<void> {
+        return this.alert(message, Object.assign({title: '错误', theme: 'error'}, options));
+    }
+
+    confirm(message: string, options?: { title?: string }): Promise<boolean> {
+        return new Promise<boolean>((resolve) => {
+            this.closeMessage();
+            TDialogPlugin.confirm({
+                title: options?.title || '确认',
+                content: message,
+                confirmBtn: '确定',
+                cancelBtn: '取消',
+                onConfirm: () => {
+                    resolve(true);
+                },
+                onCancel: () => {
+                    resolve(false);
+                },
+                onClose: () => {
+                    resolve(false);
+                }
+            });
+        });
+    }
+
+    showLoading(message?: string): Promise<void> {
+        return this.toast(message, 'loading', {duration: 0});
+    }
+
+    closeLoading(): void {
+        Toast.clear();
+    }
+
 }

package/src/tdesign/{foundation/validator.ts → tnxtd-validator.ts}

@@ -3,8 +3,8 @@
  * validator组件详见：https://github.com/validatorjs/validator.js
  */
 import validator from 'validator';
-import {Validator} from '../../../../tnxcore/src/tnxcore';
-import {ApiModelPropertyMeta, ApiModelMeta} from '../../../../tnxcore/src/api/meta';
+import {Validator} from '../../../tnxcore/src/tnxcore.ts';
+import {ApiModelPropertyMeta, ApiModelMeta} from '../../../tnxcore/src/api/meta.ts';
 
 export type ValidateResultType = 'error' | 'warning' | 'success';
 
@@ -25,13 +25,14 @@ export type ValidatorRule = {
 
 export default class TnxTdValidator extends Validator {
 
-    getRule(validationName: string, validationValue: any, fieldMeta: ApiModelPropertyMeta): ValidatorRule | undefined {
+    getRule(validationName: string, validationValue: any, fieldMeta?: ApiModelPropertyMeta): ValidatorRule | undefined {
         let rule: ValidatorRule;
         let fieldCaption = '';
         // 据目前观察，字段格式校验的错误消息均显示在字段旁，无需显示字段名称，未来如果出现不在字段旁显示的场景，再考虑扩展
         // if (fieldMeta && fieldMeta.caption) {
         //     fieldCaption = fieldMeta.caption;
         // }
+        let _this = this;
         switch (validationName) {
             case 'required':
             case 'notNull':
@@ -47,7 +48,7 @@ export default class TnxTdValidator extends Validator {
                                     blank = fieldValue.trim().length === 0;
                                 }
                                 if (blank) {
-                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    let message = _this.getErrorMessage(validationName, fieldCaption);
                                     return {result: false, message, type: 'error'};
                                 }
                             }
@@ -63,7 +64,7 @@ export default class TnxTdValidator extends Validator {
                             let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : (fieldValue.match(/\n/g) as any).length;
                             let fieldLength = fieldValue.length + enterLength;
                             if (fieldLength < validationValue) {
-                                let message = this.getErrorMessage(validationName, fieldCaption,
+                                let message = _this.getErrorMessage(validationName, fieldCaption,
                                     validationValue, validationValue - fieldLength);
                                 return {result: false, message, type: 'error'};
                             }
@@ -79,7 +80,7 @@ export default class TnxTdValidator extends Validator {
                             let enterLength = fieldValue.indexOf('\n') < 0 ? 0 : (fieldValue.match(/\n/g) as any).length;
                             let fieldLength = fieldValue.length + enterLength;
                             if (fieldLength > validationValue) {
-                                let message = this.getErrorMessage(validationName, fieldCaption,
+                                let message = _this.getErrorMessage(validationName, fieldCaption,
                                     validationValue, fieldLength - validationValue);
                                 return {result: false, message, type: 'error'};
                             }
@@ -94,7 +95,7 @@ export default class TnxTdValidator extends Validator {
                         validator(fieldValue: string): ValidateResult {
                             if (fieldValue && typeof fieldValue === 'string') {
                                 if (!validator.isNumeric(fieldValue, {no_symbols: true})) {
-                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    let message = _this.getErrorMessage(validationName, fieldCaption);
                                     return {result: false, message, type: 'error'};
                                 }
                             }
@@ -112,7 +113,7 @@ export default class TnxTdValidator extends Validator {
                                 for (let i = 0; i < limitedValues.length; i++) {
                                     if (fieldValue.indexOf(limitedValues[i]) >= 0) {
                                         let s = limitedValues.join(' ');
-                                        let message = this.getErrorMessage('notContains', fieldCaption, s);
+                                        let message = _this.getErrorMessage('notContains', fieldCaption, s);
                                         return {result: false, message, type: 'error'};
                                     }
                                 }
@@ -131,7 +132,7 @@ export default class TnxTdValidator extends Validator {
                                 for (let i = 0; i < limitedValues.length; i++) {
                                     if (fieldValue.indexOf(limitedValues[i]) >= 0) {
                                         let s = limitedValues.join(' ');
-                                        let message = this.getErrorMessage('notContains', fieldCaption, s);
+                                        let message = _this.getErrorMessage('notContains', fieldCaption, s);
                                         return {result: false, message, type: 'error'};
                                     }
                                 }
@@ -149,7 +150,7 @@ export default class TnxTdValidator extends Validator {
                                 let limitedValues = (validationValue as string).split(' ');
                                 for (let i = 0; i < limitedValues.length; i++) {
                                     if (validator.contains(fieldValue, limitedValues[i])) {
-                                        let message = this.getErrorMessage('notContains', fieldCaption,
+                                        let message = _this.getErrorMessage('notContains', fieldCaption,
                                             validationValue);
                                         return {result: false, message, type: 'error'};
                                     }
@@ -166,7 +167,7 @@ export default class TnxTdValidator extends Validator {
                         validator(fieldValue: string): ValidateResult {
                             if (fieldValue) {
                                 if (/<[a-z]+[ ]*[/]?[ ]*>/gi.test(fieldValue)) {
-                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    let message = _this.getErrorMessage(validationName, fieldCaption);
                                     return {result: false, message, type: 'error'};
                                 }
                             }
@@ -193,7 +194,7 @@ export default class TnxTdValidator extends Validator {
                                             tag = tag.substring(1);
                                         }
                                         if (!tags.contains(tag.toLowerCase())) {
-                                            let message = this.getErrorMessage(validationName, fieldCaption,
+                                            let message = _this.getErrorMessage(validationName, fieldCaption,
                                                 tags.join(', '));
                                             return {result: false, message, type: 'error'};
                                         }
@@ -217,7 +218,7 @@ export default class TnxTdValidator extends Validator {
                                     let value = fieldValue.toLowerCase();
                                     for (let tag of tags) {
                                         if (value.includes('<' + tag + '>') || value.includes('<' + tag + ' ')) {
-                                            let message = this.getErrorMessage(validationName, fieldCaption,
+                                            let message = _this.getErrorMessage(validationName, fieldCaption,
                                                 tags.join(', '));
                                             return {result: false, message, type: 'error'};
                                         }
@@ -235,7 +236,7 @@ export default class TnxTdValidator extends Validator {
                         validator(fieldValue: string): ValidateResult {
                             if (typeof fieldValue === 'string' && fieldValue) {
                                 if (!validator.isEmail(fieldValue)) {
-                                    let message = this.getErrorMessage(validationName, fieldCaption);
+                                    let message = _this.getErrorMessage(validationName, fieldCaption);
                                     return {result: false, message, type: 'error'};
                                 }
                             }
@@ -251,7 +252,7 @@ export default class TnxTdValidator extends Validator {
                 rule = {
                     validator(fieldValue: string): ValidateResult {
                         if (validationValue) {
-                            let message = this.validateRegExp(validationName, fieldValue, fieldCaption);
+                            let message = _this.validateRegExp(validationName, fieldValue, fieldCaption);
                             if (message) {
                                 return {result: false, message, type: 'error'};
                             }
@@ -277,7 +278,7 @@ export default class TnxTdValidator extends Validator {
                                 if (message) {
                                     message = fieldCaption + message;
                                 } else {
-                                    message = this.getErrorMessage('regex', fieldCaption, '');
+                                    message = _this.getErrorMessage('regex', fieldCaption, '');
                                 }
                                 return {result: false, message, type: 'error'};
                             }
@@ -325,7 +326,7 @@ export default class TnxTdValidator extends Validator {
                         fieldRules.push(rule);
                     }
                 });
-                // 将可能包含的引用字段路径中的.替换为__，以符合async-validator规则名称的规范
+                // 将可能包含的引用字段路径中的.替换为__，以符合规则名称规范
                 let ruleName = fieldName.replace('.', '__');
                 rules[ruleName] = fieldRules;
             }

package/src/tdesign/tnxtd.css

@@ -0,0 +1,66 @@
+/**
+ * tnxtd.css
+ */
+:root {
+    --border: 1px solid var(--td-component-border);
+}
+
+body {
+    color: var(--td-text-color-primary);
+}
+
+.border {
+    border: var(--border);
+}
+
+.bg-page {
+    background-color: var(--td-bg-color-page);
+}
+
+.bg-container {
+    background-color: var(--td-bg-color-container);
+}
+
+.bg-component {
+    background-color: var(--td-bg-color-component);
+}
+
+.text-brand,
+.color-brand {
+    color: var(--td-text-color-brand);
+}
+
+.text-primary,
+.color-primary {
+    color: var(--td-text-color-primary);
+}
+
+.text-secondary,
+.color-secondary {
+    color: var(--td-text-color-secondary);
+}
+
+.text-placeholder,
+.color-placeholder {
+    color: var(--td-text-color-placeholder);
+}
+
+.text-disabled,
+.color-disabled {
+    color: var(--td-text-color-disabled);
+}
+
+.t-icon[theme="success"] {
+    color: var(--td-success-color);
+}
+
+.t-button--size-large .t-icon + .t-button__content:not(:empty) {
+    margin-left: 0.5rem;
+}
+
+.t-form__item--left .t-form__label,
+.t-form__item--right .t-form__label {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}

package/src/tdesign/tnxtd.ts

@@ -1,17 +1,20 @@
-import TnxVue from '../tnxvue';
+import TnxVue from '../tnxvue.ts';
 import {Icon} from 'tdesign-icons-vue-next';
-import Validator from './foundation/validator';
+import Validator from './tnxtd-validator.ts';
+import './tnxtd.css';
 
 export {Validator};
 
 export default class TnxTd extends TnxVue {
 
-    static {
-        TnxTd.Foundations.Validator = Validator;
-    }
+    validator: Validator;
+
+    constructor(apiBaseUrl: string, id: string = 'tnxtd') {
+        super(apiBaseUrl, id);
+
+        this.foundations.Validator = Validator;
+        this.validator = new Validator();
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
         Object.assign(this.components, {
             Icon,
         });