@truenewx/tnxvue3 3.4.2 → 3.4.4

package/src/element-plus/upload/Upload.vue

@@ -1,69 +1,69 @@
 <template>
-    <el-upload ref="upload" name="file" class="tnxel-upload-container"
-            :class="{center: center, 'hide-file-list': !showFileList}"
-            :id="id"
-            :action="actionUrl"
-            :before-upload="_beforeUpload"
-            :on-progress="_onProgress"
-            :on-success="_onSuccess"
-            :on-error="_onError"
-            :with-credentials="true"
-            :list-type="listType"
-            :file-list="fileList"
-            :show-file-list="true"
-            :headers="uploadHeaders"
-            :multiple="uploadOptions && uploadOptions.number !== 1"
-            :accept="uploadAccept" :disabled="disabled" v-if="uploadOptions">
-        <template #file="{file}">
-            <div class="el-upload-list__panel" :data-file-id="getFileId(file)" :style="itemPanelStyle"
-                    v-if="showFileList">
-                <img class="el-upload-list__item-thumbnail" :src="file.url" v-if="imageable">
-                <div class="el-upload-list__item-name" v-else>
-                    <tnxel-icon :value="getFileIcon(file)"/>
-                    <span>{{ file.name }}</span>
-                </div>
-                <span class="el-upload-list__item-uploading" v-if="isUploading(file) && listType !== 'text'">
+<el-upload ref="upload" name="file" class="tnxel-upload-container"
+           :class="{center: center, 'hide-file-list': !showFileList}"
+           :id="id"
+           :action="actionUrl"
+           :before-upload="_beforeUpload"
+           :on-progress="_onProgress"
+           :on-success="_onSuccess"
+           :on-error="_onError"
+           :with-credentials="true"
+           :list-type="listType"
+           :file-list="fileList"
+           :show-file-list="true"
+           :headers="uploadHeaders"
+           :multiple="uploadOptions && uploadOptions.number !== 1"
+           :accept="uploadAccept" :disabled="disabled" v-if="uploadOptions">
+    <template #file="{file}">
+        <div class="el-upload-list__panel" :data-file-id="getFileId(file)" :style="itemPanelStyle"
+             v-if="showFileList">
+            <img class="el-upload-list__item-thumbnail" :src="file.url" v-if="imageable">
+            <div class="el-upload-list__item-name" v-else>
+                <tnxel-icon :value="getFileIcon(file)"/>
+                <span>{{ file.name }}</span>
+            </div>
+            <span class="el-upload-list__item-uploading" v-if="isUploading(file) && listType !== 'text'">
                     <tnxel-icon value="Loading"/>
                 </span>
-                <label class="el-upload-list__item-status-label">
-                    <el-progress type="circle" :percentage="file.percentage" :width="16" :stroke-width="3"
-                            :show-text="false" v-if="isUploading(file)"/>
-                    <tnxel-icon value="CircleCheck" class="text-success" v-else-if="listType === 'text'"/>
-                    <tnxel-icon value="Check" style="margin-top: 8px;" v-else/>
-                </label>
-                <div class="el-upload-list__item-actions">
-                    <tnxel-icon value="ZoomIn" @click="previewFile(file)" v-if="isPreviewable(file)"/>
-                    <tnxel-icon :value="listType === 'text' ? 'Close' : 'Delete'" @click="removeFile(file)"/>
-                </div>
+            <label class="el-upload-list__item-status-label">
+                <el-progress type="circle" :percentage="file.percentage" :width="16" :stroke-width="3"
+                             :show-text="false" v-if="isUploading(file)"/>
+                <tnxel-icon value="CircleCheck" class="text-success" v-else-if="listType === 'text'"/>
+                <tnxel-icon value="Check" style="margin-top: 8px;" v-else/>
+            </label>
+            <div class="el-upload-list__item-actions">
+                <tnxel-icon value="ZoomIn" @click="previewFile(file)" v-if="isPreviewable(file)"/>
+                <tnxel-icon :value="listType === 'text' ? 'Close' : 'Delete'" @click="removeFile(file)"/>
+            </div>
+        </div>
+    </template>
+    <template #trigger>
+        <el-tooltip :content="tipContent" placement="top" :disabled="tip !== 'tooltip'">
+            <div class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
+                 :class="{'text-placeholder': disabled}" v-if="$slots.trigger">
+                <slot name="trigger"></slot>
+            </div>
+            <el-button class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
+                       :disabled="disabled" v-else-if="listType === 'text'">
+                <tnxel-icon :value="triggerIcon" :size="uploadIconSize"/>
+                <div class="upload-trigger-text" v-if="triggerText">{{ triggerText }}</div>
+            </el-button>
+            <div class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
+                 :class="{'text-placeholder': disabled}" v-else>
+                <tnxel-icon :value="triggerIcon" :size="uploadIconSize"/>
+                <div class="upload-trigger-text" v-if="triggerText">{{ triggerText }}</div>
+            </div>
+        </el-tooltip>
+    </template>
+    <template #tip v-if="(tipContent && (typeof tip !== 'string')) || errors.length">
+        <tnxel-alert type="error" class="w-fit-content my-0" v-if="errors.length">
+            <div v-for="error of errors" :key="error.code">
+                {{ error.message }}
             </div>
-        </template>
-        <template #trigger>
-            <el-tooltip :content="tipContent" placement="top" :disabled="tip !== 'tooltip'">
-                <div class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
-                        :class="{'text-placeholder': disabled}" v-if="$slots.trigger">
-                    <slot name="trigger"></slot>
-                </div>
-                <el-button class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
-                        :disabled="disabled" v-else-if="listType === 'text'">
-                    <tnxel-icon :value="triggerIcon" :size="uploadIconSize"/>
-                    <div class="upload-trigger-text" v-if="triggerText">{{ triggerText }}</div>
-                </el-button>
-                <div class="upload-trigger" :title="tip === 'title' ? tipContent : undefined"
-                        :class="{'text-placeholder': disabled}" v-else>
-                    <tnxel-icon :value="triggerIcon" :size="uploadIconSize"/>
-                    <div class="upload-trigger-text" v-if="triggerText">{{ triggerText }}</div>
-                </div>
-            </el-tooltip>
-        </template>
-        <template #tip v-if="(tipContent && (typeof tip !== 'string')) || errors.length">
-            <tnxel-alert type="error" class="w-fit-content my-0" v-if="errors.length">
-                <div v-for="error of errors" :key="error.code">
-                    {{ error.message }}
-                </div>
-            </tnxel-alert>
-            <div class="el-upload__tip" v-text="tipContent" v-else></div>
-        </template>
-    </el-upload>
+        </tnxel-alert>
+        <div class="el-upload__tip" v-text="tipContent" v-else></div>
+    </template>
+</el-upload>
 </template>
 
 <script>
@@ -171,7 +171,7 @@ export default {
     computed: {
         actionUrl() {
             if (this.app) {
-                let baseUrl = this.tnx.app.rpc.getBaseUrl(this.app);
+                let baseUrl = this.tnx.api.getBaseUrl(this.app);
                 if (baseUrl) {
                     return baseUrl + this.action;
                 }
@@ -233,7 +233,7 @@ export default {
         },
         uploadAccept() {
             if (this.uploadOptions && !this.uploadOptions.extensionsRejected && this.uploadOptions.extensions
-                    && this.uploadOptions.extensions.length) {
+                && this.uploadOptions.extensions.length) {
                 let accept = '';
                 for (let extension of this.uploadOptions.extensions) {
                     accept += ',.' + extension;
@@ -342,7 +342,7 @@ export default {
                 } else {
                     // 没有URL的文件，通过文件类型+文件名+文件大小+最后修改时间，几乎可以唯一区分一个文件，重复的概率极低，即使重复也不破坏业务一致性和完整性
                     file.id = this.tnx.util.string.md5(
-                            file.type + '-' + file.name + '-' + file.size + '-' + file.lastModified);
+                        file.type + '-' + file.name + '-' + file.size + '-' + file.lastModified);
                 }
             }
             return file.id;
@@ -382,7 +382,7 @@ export default {
                 const capacity = this.tnx.util.string.getCapacityCaption(this.uploadOptions.capacity);
                 let message = this.tipMessages.capacity.format(capacity, 2);
                 message += '，文件"' + file.name + '"大小为' + this.tnx.util.string.getCapacityCaption(file.size, 2)
-                        + '，不符合要求，未加入上传队列';
+                    + '，不符合要求，未加入上传队列';
                 this.handleErrors([{
                     code: 'error.upload.capacity',
                     message: message,
@@ -429,7 +429,7 @@ export default {
             this.handleErrors([]); // 先清除可能存在的错误提示，以便于重新提示
 
             const vm = this;
-            const rpc = this.tnx.app.rpc;
+            const rpc = this.tnx.api;
             return new Promise((resolve, reject) => {
                 if (vm.validate(file)) {
                     let $upload = $('#' + vm.id + ' .el-upload');
@@ -532,9 +532,7 @@ export default {
                     if (this.onError) {
                         this.onError(file, message.message);
                     } else {
-                        this.tnx.app.rpc.handle500Error(message.message, {
-                            error: this.handleErrors
-                        });
+                        window.tnx.error(message.message);
                     }
                     return;
                 } else if (message.errors) {

package/src/tdesign/desktop/tnxtdd.ts

@@ -1,12 +1,12 @@
-import { App, Component } from 'vue';
-import { Router } from 'vue-router';
-import TnxTd from '../tnxtd';
+import {App, Component} from 'vue';
+import {Router} from 'vue-router';
+import TnxTd from '../tnxtd.ts';
 import TDesign from 'tdesign-vue-next';
 
 export default class TnxTdd extends TnxTd {
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
+    constructor(apiBaseUrl: string, id: string = 'tnxtdd') {
+        super(apiBaseUrl, id);
     }
 
     createVueApp(rootComponent: Component, router: Router, rootProps?: Record<string, any>): App {

package/src/tdesign/mobile/tnxtdm.ts

@@ -1,15 +1,16 @@
-import { App, Component } from 'vue';
-import { Router } from 'vue-router';
-import TnxTd from '../tnxtd';
+import {App, Component} from 'vue';
+import {Router} from 'vue-router';
+import TnxTd from '../tnxtd.ts';
 import TDesign from 'tdesign-mobile-vue';
+import './tnxtdm.css';
 
 export default class TnxTdm extends TnxTd {
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
+    constructor(apiBaseUrl: string, id: string = 'tnxtdm') {
+        super(apiBaseUrl, id);
     }
 
-    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);
     }
 

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,7 +25,7 @@ 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 = '';
         // 据目前观察，字段格式校验的错误消息均显示在字段旁，无需显示字段名称，未来如果出现不在字段旁显示的场景，再考虑扩展
@@ -325,7 +325,7 @@ export default class TnxTdValidator extends Validator {
                         fieldRules.push(rule);
                     }
                 });
-                // 将可能包含的引用字段路径中的.替换为__，以符合async-validator规则名称的规范
+                // 将可能包含的引用字段路径中的.替换为__，以符合规则名称规范
                 let ruleName = fieldName.replace('.', '__');
                 rules[ruleName] = fieldRules;
             }

package/src/tdesign/tnxtd.ts

@@ -1,17 +1,16 @@
-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';
 
 export {Validator};
 
 export default class TnxTd extends TnxVue {
 
-    static {
-        TnxTd.Foundations.Validator = Validator;
-    }
+    constructor(apiBaseUrl: string, id: string = 'tnxtd') {
+        super(apiBaseUrl, id);
+
+        this.foundations.Validator = Validator;
 
-    constructor(apiBaseUrl: string) {
-        super(apiBaseUrl);
         Object.assign(this.components, {
             Icon,
         });

package/src/tnxvue-router.ts

@@ -12,18 +12,12 @@ 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;
     icon?: string;
-    meta?: {
-        superiorPath?: string;
-        page?: string;
-        cache: Record<string, any>;
-        historyFrom?: any;
-        isHistory: () => boolean;
-    };
     page?: string;
     component?: () => Promise<any>;
     redirect?: never;
@@ -31,10 +25,10 @@ export type RouteItem = RouteRecordRaw & {
     subs?: 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 +40,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 +56,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) {
@@ -103,7 +97,7 @@ export type VueRouter = Router & {
     backTo: (path?: string) => void;
 }
 
-export default function (items: RouteItem[], fnImportPage: (page: string) => Promise<any>): VueRouter {
+export default function (items: RouteItem[], fnImportPage?: (page: string) => Promise<any>): VueRouter {
     const routes: RouteRecordRaw[] = [];
     applyItemsToRoutes('', items, routes, fnImportPage);
 

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 = {
@@ -37,35 +40,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 +76,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 +138,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> = {}) {
@@ -209,7 +221,12 @@ export default class TnxVue extends Tnx {
         return [];
     }
 
-    drawer(content: string | Vue.Component | Vue.DefineComponent,
+    closeDialog(all?: boolean): Promise<void> {
+        // 默认不实现，由UI框架扩展层实现
+        throw new Error('Unsupported function');
+    }
+
+    drawer(content: string | Vue.Component,
            title?: string,
            options: DrawerOptions = {},
            contentProps: Record<string, any> = {}) {
@@ -218,7 +235,26 @@ 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): Promise<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);
@@ -236,13 +272,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,34 @@
 {
-    "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",
+    "sample/**/*.ts",
+    "node_modules/tdesign-vue-next/global.d.ts"
+  ]
 }