@truenewx/tnxvue3 3.4.3 → 3.4.5

package/src/tnxvue-router.ts

@@ -3,6 +3,7 @@
  */
 import {
     createRouter,
+    createWebHistory,
     createWebHashHistory,
     Router,
     RouteRecordRaw,
@@ -12,29 +13,25 @@ import {
     RouteLocationNormalizedLoadedGeneric,
     NavigationGuardNext,
 } from 'vue-router';
-import NetUtil from '../../tnxcore/src/util/net';
+import * as NetUtil from '../../tnxcore/src/util/net.ts';
 
-export type RouteItem = RouteRecordRaw & {
+export type RouteItem = {
+    caption: string;
     path: string;
+    anonymous?: boolean; // 是否可以匿名访问
     icon?: string;
-    meta?: {
-        superiorPath?: string;
-        page?: string;
-        cache: Record<string, any>;
-        historyFrom?: any;
-        isHistory: () => boolean;
-    };
     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 {
+function addRoute(routes: RouteRecordRaw[], superiorPath: string, item: RouteItem, fnImportPage?: (page: string) => Promise<any>): void {
     if (item && item.path) {
         let page = item.page || item.path.replace(/\/:[a-zA-Z0-9_]+/g, '');
-        let route: RouteItem = {
+        let route: RouteRecordRaw = {
             path: item.path,
             meta: {
                 superiorPath: superiorPath,
@@ -46,7 +43,7 @@ function addRoute(routes: RouteRecordRaw[], superiorPath: string, item: RouteIte
             },
             component: item.component,
         };
-        if (!route.component) {
+        if (!route.component && fnImportPage) {
             route.component = () => {
                 return fnImportPage(page);
             };
@@ -62,7 +59,7 @@ function addRoute(routes: RouteRecordRaw[], superiorPath: string, item: RouteIte
     }
 }
 
-function applyItemsToRoutes(superiorPath: string, items: RouteItem[], routes: RouteRecordRaw[], fnImportPage: (page: string) => Promise<any>): void {
+function applyItemsToRoutes(superiorPath: string, items: RouteItem[], routes: RouteRecordRaw[], fnImportPage?: (page: string) => Promise<any>): void {
     if (items && items.length) {
         items.forEach(item => {
             if (item) {
@@ -93,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,
@@ -127,7 +154,7 @@ export default function (items: RouteItem[], fnImportPage: (page: string) => Pro
 
     // 注册离开页面前事件处理支持
     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;
@@ -136,8 +163,28 @@ export default function (items: RouteItem[], fnImportPage: (page: string) => Pro
     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;
             }
         }

package/src/tnxvue.ts

@@ -1,15 +1,18 @@
 /**
  * 基于Vue 3的扩展支持
  */
-import Tnx from '../../tnxcore/src/tnxcore';
+import Tnx, {util} from '../../tnxcore/src/tnxcore.ts';
 import Text from './text/Text.vue';
 import Percent from './percent/Percent.vue';
 import * as Vue from 'vue';
 import mitt, {Emitter, EventType} from 'mitt';
 import {Router} from 'vue-router';
+import {VueRouter} from './tnxvue-router.ts';
+
+export {util};
 
 export type EventBus = Emitter<Record<EventType, unknown>> & {
-    once(name: EventType, handler: (arg: unknown) => void): void;
+    once(name: EventType, handler: (event: unknown) => void): void;
 };
 
 export type ButtonOptions = {
@@ -24,6 +27,7 @@ export type DialogOptions = {
     click?: boolean | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined);
     buttonText?: string | string[];
     buttons?: ButtonOptions[];
+    width?: number | string;
 }
 
 export type OpenType = 'alert' | 'confirm' | 'close' | 'none';
@@ -37,35 +41,35 @@ export type OpenOptions = DialogOptions & {
 
 export default class TnxVue extends Tnx {
 
-    router: Router;
+    router: VueRouter;
     eventBus: EventBus;
 
-    static {
-        TnxVue.Libs.Vue = Vue;
-    }
-
-    components: Record<string, Vue.Component | Vue.DefineComponent> = {
+    /**
+     * 需要注册到Vue中的组件清单
+     */
+    components: Record<string, Vue.Component> = {
         Text,
         Percent,
     };
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
+    constructor(apiBaseUrl: string, id: string = 'tnxvue') {
+        super(apiBaseUrl, id);
+        this.libs.Vue = Vue;
     }
 
-    install(app: Vue.App) {
+    install(app: Vue.App): void {
         for (let key of Object.keys(this.components)) {
             const component = this.components[key];
             app.component(component.name, component);
         }
     }
 
-    createVueApp(rootComponent: Vue.Component, router: Router, rootProps?: Record<string, any>): Vue.App {
+    createVueApp(rootComponent: Vue.Component, router?: Router, rootProps?: Record<string, any>): Vue.App {
         let app = Vue.createApp(rootComponent, rootProps);
         app.use(this);
         if (router) {
             app.use(router);
-            this.router = app.config.globalProperties.$router;
+            this.router = app.config.globalProperties.$router as VueRouter;
         } else if (this.router) {
             app.config.globalProperties.$router = this.router;
         }
@@ -73,7 +77,7 @@ export default class TnxVue extends Tnx {
         if (!this.eventBus) {
             this.eventBus = mitt() as EventBus;
         }
-        this.eventBus.once = (name: EventType, handler: (arg: unknown) => void) => {
+        this.eventBus.once = (name: EventType, handler: (event: unknown) => void) => {
             this.eventBus.all.set(name, [handler]);
         }
 
@@ -135,7 +139,16 @@ export default class TnxVue extends Tnx {
         });
     }
 
-    dialog(content: string | Vue.Component | Vue.DefineComponent,
+    /**
+     * 判断指定对象是否组件实例
+     * @param obj 对象
+     * @returns {boolean} 是否组件实例
+     */
+    isComponent(obj: any): boolean {
+        return (typeof obj === 'object') && (typeof obj.render === 'function');
+    }
+
+    dialog(content: string | Vue.Component,
            title?: string,
            options: DialogOptions = {},
            contentProps: Record<string, any> = {}) {
@@ -162,7 +175,7 @@ export default class TnxVue extends Tnx {
 
     protected getDefaultDialogButtons(
         type: OpenType,
-        click: boolean | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined),
+        click: boolean | string | ((yes: boolean, close: () => void) => boolean | undefined) | ((close: () => void) => boolean | undefined),
         theme?: string): ButtonOptions[] {
         if (click !== false) {
             if (type === 'none') {
@@ -172,6 +185,9 @@ export default class TnxVue extends Tnx {
                     text: '确定',
                     type: theme || 'primary',
                     click(close: () => void) {
+                        if (typeof click === 'string') {
+                            click = this[click];
+                        }
                         if (typeof click === 'function') {
                             return click.call(this, true, close);
                         }
@@ -179,6 +195,9 @@ export default class TnxVue extends Tnx {
                 }, {
                     text: '取消',
                     click(close: () => void) {
+                        if (typeof click === 'string') {
+                            click = this[click];
+                        }
                         if (typeof click === 'function') {
                             return click.call(this, false, close);
                         }
@@ -189,6 +208,9 @@ export default class TnxVue extends Tnx {
                     text: '关闭',
                     type: theme,
                     click(close: () => void) {
+                        if (typeof click === 'string') {
+                            click = this[click];
+                        }
                         if (typeof click === 'function') {
                             return click.call(this, close);
                         }
@@ -199,6 +221,9 @@ export default class TnxVue extends Tnx {
                     text: '确定',
                     type: theme || 'primary',
                     click(close: () => void) {
+                        if (typeof click === 'string') {
+                            click = this[click];
+                        }
                         if (typeof click === 'function') {
                             return click.call(this, close);
                         }
@@ -209,7 +234,12 @@ export default class TnxVue extends Tnx {
         return [];
     }
 
-    drawer(content: string | Vue.Component | Vue.DefineComponent,
+    closeDialog(all?: boolean): void {
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    drawer(content: string | Vue.Component,
            title?: string,
            options: DrawerOptions = {},
            contentProps: Record<string, any> = {}) {
@@ -218,12 +248,31 @@ export default class TnxVue extends Tnx {
         throw new Error('Unsupported function');
     }
 
-    open(component: Vue.Component | Vue.DefineComponent, props?: Record<string, any>, options: OpenOptions = {}) {
+    closeDrawer(all?: boolean): void {
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    showLoading(message?: string): Promise<void> {
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    closeLoading(): void {
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    hideLoading(): void {
+        this.closeLoading();
+    }
+
+    open(component: Vue.Component, props?: Record<string, any>, options: OpenOptions = {}) {
         const c = component as any;
-        if (typeof c.open === 'function') {
-            options = Object.assign({}, c.open(props), options);
-        } else if (c.methods && typeof c.methods.open === 'function') {
-            options = Object.assign({}, c.methods.open(props), options);
+        if (typeof c.openOptions === 'function') {
+            options = Object.assign({}, c.openOptions(props), options);
+        } else if (c.openOptions) {
+            options = Object.assign({}, c.openOptions, options);
         }
 
         let mode = options.mode;
@@ -236,13 +285,4 @@ export default class TnxVue extends Tnx {
         return this.dialog(component, title, options, props);
     }
 
-    /**
-     * 判断指定对象是否组件实例
-     * @param obj 对象
-     * @returns {boolean} 是否组件实例
-     */
-    isComponent(obj: any): boolean {
-        return (typeof obj === 'object') && (typeof obj.render === 'function');
-    }
-
 }

package/tsconfig.json

@@ -1,21 +1,35 @@
 {
-    "compilerOptions": {
-        "target": "ES2020",
-        "module": "ESNext",
-        "moduleResolution": "Bundler",
-        "strict": false,
-        "noImplicitAny": false,
-        "allowJs": false,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "lib": [
-            "ES2020",
-            "DOM"
-        ],
-        "types": []
-    },
-    "include": [
-        "src/**/*"
-    ]
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "types",
+    "allowImportingTsExtensions": true,
+    "strict": false,
+    "noImplicitAny": false,
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ES2020",
+      "DOM"
+    ],
+    "types": [],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "sample/**/*.ts",
+    "node_modules/tdesign-vue-next/global.d.ts"
+  ]
 }