@truenewx/tnxvue3 3.4.3 → 3.4.5

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/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>

package/src/tdesign/mobile/dialog/Dialog.vue

@@ -0,0 +1,179 @@
+<template>
+    <t-dialog
+        class="tnxtdm-dialog"
+        v-model:visible="visible"
+        :title="title"
+        :width="width"
+        :close-on-overlay-click="options['close-on-overlay-click']"
+        :close-btn="!buttons?.length"
+        :destroy-on-close="true"
+        @closed="onClosed"
+    >
+        <template #default>
+            <div v-if="content" v-html="content"></div>
+            <tnxtdm-dialog-content ref="content" v-bind="contentProps" v-else/>
+        </template>
+        <template #actions v-if="buttons?.length">
+            <div class="tnxtdm-dialog-footer">
+                <t-button v-for="(button, index) in buttons" :key="index" :theme="button.type || 'primary'"
+                          :loading="buttonLoadings[index]" @click="btnClick(index)" block>
+                    {{ button.caption || button.text }}
+                </t-button>
+            </div>
+        </template>
+    </t-dialog>
+</template>
+
+<script>
+import DialogContent from './DialogContent.vue';
+
+export default {
+    name: 'TnxtdmDialog',
+    components: {
+        'tnxtdm-dialog-content': DialogContent,
+    },
+    props: {
+        id: {
+            type: String,
+            default: () => window.tnx.util.string.uuid32(),
+        },
+        modelValue: Boolean,
+        container: String,
+        title: String,
+        content: String,
+        contentProps: Object,
+        buttons: Array,
+        theme: String,
+        width: {
+            type: [Number, String],
+            default: '100%',
+        },
+    },
+    emits: ['update:modelValue', 'shown', 'closed'],
+    data() {
+        return {
+            visible: this.modelValue,
+            options: {
+                modal: true,
+                'close-on-overlay-click': true,
+                onShown: undefined,
+                onClosed: undefined,
+                beforeClose: undefined,
+            },
+            buttonLoadings: [],
+        };
+    },
+    watch: {
+        modelValue(val) {
+            this.visible = val;
+        },
+        visible(val) {
+            this.$emit('update:modelValue', val);
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            if (this.$refs.content && !this.$refs.content.close) {
+                this.$refs.content.close = () => {
+                    this.close();
+                }
+            }
+
+            if (typeof this.options.onShown === 'function') {
+                this.options.onShown.call(this);
+            } else {
+                this.$emit('shown');
+            }
+        });
+    },
+    methods: {
+        btnClick(index) {
+            const button = this.buttons[index];
+            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();
+        },
+        close() {
+            return new Promise((resolve) => {
+                this.beforeClose(() => {
+                    const originalOnClosed = this.options.onClosed;
+                    this.options.onClosed = window.tnx.util.function.around(originalOnClosed, function (onClosed) {
+                        if (onClosed) {
+                            onClosed();
+                        }
+                        resolve();
+                    });
+                    this.visible = false;
+                });
+            });
+        },
+        beforeClose(done) {
+            try {
+                if (typeof this.options.beforeClose === 'function') {
+                    if (this.options.beforeClose.call(this.$refs.content) === false) {
+                        return;
+                    }
+                }
+                done();
+            } catch (e) {
+                console.error(e);
+            }
+        },
+        onClosed() {
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed.call(this.$refs.content);
+            } else {
+                this.$emit('closed');
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.tnxtdm-dialog {
+
+    &.t-dialog__wrapper.t-popup--center {
+        width: calc(100% - 48px);
+        max-width: calc(var(--max-page-width) - 48px);
+    }
+
+    .t-dialog__content {
+        padding-top: 1rem;
+    }
+
+    .t-dialog__close-btn {
+        right: 12px;
+    }
+
+    .t-dialog__footer {
+        padding: 12px 24px;
+
+        .tnxtdm-dialog-footer {
+            padding: 12px 0;
+            width: 100%;
+        }
+    }
+
+}
+</style>

package/src/tdesign/mobile/dialog/DialogContent.vue

@@ -0,0 +1,13 @@
+<template>
+    <div></div>
+</template>
+
+<script>
+export default {
+    components: {},
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>