@truenewx/tnxvue3 3.4.4 → 3.4.5

package/src/tdesign/mobile/tnxtdm.ts

@@ -1,17 +1,319 @@
 import {App, Component} from 'vue';
 import {Router} from 'vue-router';
 import TnxTd from '../tnxtd.ts';
-import TDesign from 'tdesign-mobile-vue';
+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, id: string = 'tnxtdm') {
         super(apiBaseUrl, id);
+        Object.assign(this.components, components);
     }
 
     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/tnxtd-validator.ts

@@ -32,6 +32,7 @@ export default class TnxTdValidator extends Validator {
         // 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'};
                             }

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,15 +1,19 @@
 import TnxVue from '../tnxvue.ts';
 import {Icon} from 'tdesign-icons-vue-next';
 import Validator from './tnxtd-validator.ts';
+import './tnxtd.css';
 
 export {Validator};
 
 export default class TnxTd extends TnxVue {
 
+    validator: Validator;
+
     constructor(apiBaseUrl: string, id: string = 'tnxtd') {
         super(apiBaseUrl, id);
 
         this.foundations.Validator = Validator;
+        this.validator = new Validator();
 
         Object.assign(this.components, {
             Icon,

package/src/tnxvue-router.ts

@@ -3,6 +3,7 @@
  */
 import {
     createRouter,
+    createWebHistory,
     createWebHashHistory,
     Router,
     RouteRecordRaw,
@@ -17,12 +18,14 @@ import * as NetUtil from '../../tnxcore/src/util/net.ts';
 export type RouteItem = {
     caption: string;
     path: string;
+    anonymous?: boolean; // 是否可以匿名访问
     icon?: string;
     page?: string;
     component?: () => Promise<any>;
     redirect?: never;
     alias?: string;
     subs?: RouteItem[];
+    parent?: RouteItem;
 }
 
 function addRoute(routes: RouteRecordRaw[], superiorPath: string, item: RouteItem, fnImportPage?: (page: string) => Promise<any>): void {
@@ -87,21 +90,51 @@ function getCurrentRoute(router: Router): RouteLocationNormalizedLoadedGeneric {
     return router.currentRoute.value;
 }
 
+function findItemByPath(parent: RouteItem, items: RouteItem[], path: string): RouteItem | null {
+    for (const item of items) {
+        if (item.path === path) {
+            item.parent = parent;
+            return item;
+        }
+        if (item.subs) {
+            const found = findItemByPath(item, item.subs, path);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+}
+
+export class RouteMenu {
+
+    items: RouteItem[];
+
+    constructor(items: RouteItem[]) {
+        this.items = items;
+    }
+
+    findItem(path: string): RouteItem | null {
+        return findItemByPath(null, this.items, path);
+    }
+
+}
+
 export type VueRouter = Router & {
     history: RouterHistory;
     prev?: RouteLocationNormalizedLoaded;
-    $beforeLeaveHandlers: Record<string, (to: RouteLocationNormalized) => boolean>;
+    $beforeLeaveHandlers: Record<string, (to: RouteLocationNormalized) => boolean | Promise<boolean>>;
     beforeLeave: (handler: (to: RouteLocationNormalized) => boolean) => void;
     pushState: (path: string) => boolean;
     replaceState: (path: string) => boolean;
     backTo: (path?: string) => void;
 }
 
-export default function (items: RouteItem[], fnImportPage?: (page: string) => Promise<any>): VueRouter {
+export default function (items: RouteItem[], useHashHistory = true, fnImportPage?: (page: string) => Promise<any>): VueRouter {
     const routes: RouteRecordRaw[] = [];
     applyItemsToRoutes('', items, routes, fnImportPage);
 
-    const routerHistory = createWebHashHistory();
+    const routerHistory = useHashHistory ? createWebHashHistory() : createWebHistory();
     const router: VueRouter = createRouter({
         history: routerHistory,
         routes,
@@ -121,7 +154,7 @@ export default function (items: RouteItem[], fnImportPage?: (page: string) => Pr
 
     // 注册离开页面前事件处理支持
     router.$beforeLeaveHandlers = {};
-    router.beforeLeave = function (handler: (to: RouteLocationNormalized) => boolean): void {
+    router.beforeLeave = function (handler: (to: RouteLocationNormalized) => boolean | Promise<boolean>): void {
         let $route = getCurrentRoute(router);
         let path = $route.path;
         router.$beforeLeaveHandlers[path] = handler;
@@ -130,8 +163,28 @@ export default function (items: RouteItem[], fnImportPage?: (page: string) => Pr
     router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalizedLoaded, next: NavigationGuardNext): void => {
         let allow = true;
         let beforeLeaveHandler = router.$beforeLeaveHandlers[from.path];
+        if (!beforeLeaveHandler) {
+            let toItem = findItemByPath(null, items, to.path);
+            if (toItem && !toItem.anonymous) {
+                beforeLeaveHandler = async (to: RouteLocationNormalized): Promise<boolean> => {
+                    let logined = await window.tnx.auth.isLogined();
+                    if (!logined) {
+                        window.tnx.api.toLogin(to.path);
+                    }
+                    return logined;
+                };
+            }
+        }
         if (beforeLeaveHandler) {
-            if (beforeLeaveHandler(to) === false) {
+            let result = beforeLeaveHandler(to);
+            if (result instanceof Promise) {
+                result.then((allowed: boolean): void => {
+                    if (allowed) {
+                        next();
+                    }
+                });
+                return;
+            } else if (result === false) {
                 allow = false;
             }
         }