@truenewx/tnxvue3 3.0.13 → 3.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.13",
+  "version": "3.0.14",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "type": "module",
@@ -24,7 +24,7 @@
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.11",
+    "@truenewx/tnxcore": "3.0.12",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
     "mitt": "3.0.1"

package/src/bootstrap-vue/alert/Alert.vue

@@ -0,0 +1,79 @@
+<template>
+    <BAlert class="tnxbsv-alert" :model-value="modelValue" :variant="type">
+        <div class="d-flex">
+            <div class="tnxbsv-alert-icon">
+                <i :class="iconClass"/>
+            </div>
+            <div class="tnxbsv-alert-content">
+                <slot></slot>
+            </div>
+        </div>
+    </BAlert>
+</template>
+
+<script>
+import {BAlert} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvAlert',
+    components: {BAlert},
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: true,
+        },
+        type: {
+            type: String,
+            default: 'light',
+        },
+        icon: String,
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        iconClass() {
+            if (this.icon) {
+                return this.icon;
+            }
+            let iconClass = '';
+            switch (this.type) {
+                case 'success':
+                    iconClass += 'bi-check-circle-fill text-success';
+                    break;
+                case 'danger':
+                    iconClass += 'bi-x-circle-fill text-danger';
+                    break;
+                case 'warning':
+                    iconClass += 'bi-exclamation-circle-fill text-warning';
+                    break;
+                case 'light':
+                    iconClass += 'text-secondary';
+                    break;
+                default:
+                    iconClass += 'text-' + this.type;
+            }
+            if (!iconClass.startsWith('bi-')) {
+                iconClass = 'bi-info-circle-fill ' + iconClass;
+            }
+            iconClass = 'bi ' + iconClass;
+            return iconClass;
+        },
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbsv-alert-icon {
+    line-height: 1.3125rem;
+}
+
+.tnxbsv-alert-content {
+    margin-left: 0.5rem;
+    font-size: 0.875rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+</style>

package/src/bootstrap-vue/form/Form.vue

@@ -218,9 +218,9 @@ export default {
                 // 设置输入框为无效状态
                 let fieldElement = this.queryFieldElement(fieldGroupElement);
                 if (fieldElement) {
-                    // 如果字段元素或其上级元素中不包含.ignore-feedback样式，则加入.is-invalid样式
-                    if (!fieldElement.classList.contains('ignore-feedback')
-                        && !fieldElement.closest('.ignore-feedback')) {
+                    // 如果字段元素或其上级元素中不包含.ignore-input-feedback样式，则加入.is-invalid样式
+                    if (!fieldElement.classList.contains('ignore-input-feedback')
+                        && !fieldElement.closest('.ignore-input-feedback')) {
                         fieldElement.classList.add('is-invalid');
                     }
                 }
@@ -299,6 +299,13 @@ export default {
     display: block;
 }
 
+.tnxbsv-form .inline-feedback .invalid-feedback {
+    margin-top: 0;
+    margin-left: 0.5rem;
+    width: auto;
+    flex-grow: 1;
+}
+
 @media (max-width: var(--bs-breakpoint-md)) {
     .tnxbsv-form .b-form-group {
         flex-direction: column;

package/src/bootstrap-vue/form/FormGroup.vue

@@ -64,4 +64,10 @@ export default {
     flex-direction: column;
     justify-content: center;
 }
+
+.inline-feedback .tnxbsv-form-group__content-wrapper {
+    flex-direction: row;
+    align-items: center;
+    justify-content: unset;
+}
 </style>

package/src/bootstrap-vue/query-form/QueryForm.vue

@@ -6,6 +6,9 @@
                 <TnxbsvButton variant="outline-primary" icon="bi bi-search" @click="query" v-if="query">
                     {{ queryText }}
                 </TnxbsvButton>
+                <TnxbsvButton @click="toReset" v-if="reset">
+                    {{ resetText }}
+                </TnxbsvButton>
             </div>
         </slot>
     </TnxbsvForm>
@@ -28,14 +31,43 @@ export default {
             type: String,
             default: '查询',
         },
+        reset: [Boolean, Function],
+        resetText: {
+            type: String,
+            default: '重置',
+        },
     },
     data() {
         return {};
     },
-    methods: {}
+    methods: {
+        toReset() {
+            if (typeof this.reset === 'function') {
+                this.reset();
+            } else if (this.reset) {
+                let pageSize = this.params.pageSize;
+                let pageNo = this.params.pageNo;
+                for (let key in this.params) {
+                    delete this.params[key];
+                }
+                if (pageSize) {
+                    this.params.pageSize = pageSize;
+                }
+                if (pageNo) {
+                    this.params.pageNo = 1;
+                }
+                if (this.query) {
+                    this.query();
+                }
+            }
+        }
+    }
 }
 </script>
 
 <style>
-
+.tnxbsv-query-form-actions {
+    display: flex;
+    height: fit-content;
+}
 </style>

package/src/bootstrap-vue/select/Select.vue

@@ -120,7 +120,7 @@ export default {
     emits: ['update:modelValue', 'change'],
     data() {
         let model = this.getModel(this.items);
-        if (model !== this.modelValue) {
+        if (this.items && model !== this.modelValue) {
             this.$emit('update:modelValue', model);
         }
         return {

package/src/bootstrap-vue/tnxbsv.css

@@ -10,6 +10,10 @@
     color: var(--bs-tertiary-color) !important;
 }
 
+.text-placeholder {
+    color: var(--bs-tertiary-color);
+}
+
 .btn-light {
     border-color: var(--bs-border-color);
 }
@@ -70,11 +74,34 @@
     cursor: pointer;
 }
 
+.tnxbsv-dialog-alert,
+.tnxbsv-dialog-success,
+.tnxbsv-dialog-error,
 .tnxbsv-dialog-confirm {
     display: flex;
 }
 
+.tnxbsv-dialog-alert i,
+.tnxbsv-dialog-success i,
+.tnxbsv-dialog-error i,
 .tnxbsv-dialog-confirm i {
-    color: var(--bs-secondary-color);
+    font-size: 1.5rem;
+    line-height: 1;
     margin-right: 0.5rem;
 }
+
+.tnxbsv-dialog-alert i {
+    color: var(--bs-info);
+}
+
+.tnxbsv-dialog-success i {
+    color: var(--bs-success);
+}
+
+.tnxbsv-dialog-error i {
+    color: var(--bs-danger);
+}
+
+.tnxbsv-dialog-confirm i {
+    color: var(--bs-secondary-color);
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import './tnxbsv.css';
 
+import Alert from './alert/Alert.vue';
 import Button from './button/Button.vue';
 import Cascader from './cascader/Cascader.vue';
 import Dialog from './dialog/Dialog.vue';
@@ -28,6 +29,7 @@ export const build = tnxvue.build;
 
 export default build('tnxbsv', () => {
     const components = Object.assign({}, tnxvue.components, {
+        Alert,
         Button,
         Cascader,
         Dialog,
@@ -82,6 +84,29 @@ export default build('tnxbsv', () => {
             this.hideLoading();
             this.removeToast();
         },
+        alert(message, title, callback, options) {
+            if (typeof title === 'function') {
+                options = callback;
+                callback = title;
+                title = '提示';
+            }
+            let buttons = tnxvue.getDefaultDialogButtons('primary', callback);
+            message =
+                `<div class="tnxbsv-dialog-alert"><i class="bi bi-exclamation-circle-fill"></i><div>${message}</div></div>`;
+            return this.dialog(message, title, buttons, options);
+        },
+        success(message, callback, options) {
+            let buttons = tnxvue.getDefaultDialogButtons('primary', callback);
+            message =
+                `<div class="tnxbsv-dialog-success"><i class="bi bi-check-circle-fill"></i><div>${message}</div></div>`;
+            return this.dialog(message, '成功', buttons, options);
+        },
+        error(message, callback, options) {
+            let buttons = tnxvue.getDefaultDialogButtons('primary', callback);
+            message =
+                `<div class="tnxbsv-dialog-error"><i class="bi bi-x-circle-fill"></i><div>${message}</div></div>`;
+            return this.dialog(message, '错误', buttons, options);
+        },
         confirm(message, title, callback, options) {
             if (typeof title === 'function') {
                 options = callback;

package/src/element-plus/button/Button.vue

@@ -165,6 +165,8 @@ export default {
                     vm.finalDisabled = this.disabled || !vm.menu.isGranted(vm.path);
                     vm.buildDropdownItems();
                 });
+            } else {
+                this.finalDisabled = this.disabled;
             }
         },
         buildDropdownItems() {

package/src/element-plus/dialog/Dialog.vue

@@ -262,6 +262,7 @@ export default {
     padding: 1rem;
     display: flex;
     justify-content: flex-end;
+    border-top: 1px solid var(--el-border-color);
 }
 
 .tnxel-dialog .el-dialog__footer .el-button {

package/src/element-plus/select/Select.vue

@@ -231,7 +231,7 @@ export default {
     emits: ['update:modelValue', 'change'],
     data() {
         let model = this.getModel(this.items);
-        if (model !== this.modelValue) {
+        if (this.items && model !== this.modelValue) {
             this.$emit('update:modelValue', model);
         }
         return {

package/src/element-plus/tnxel.css

@@ -608,7 +608,7 @@ el-card {
 }
 
 .el-card__header {
-    padding: 1rem;
+    padding: 0.75rem 1rem;
 }
 
 .el-card__body {

package/src/element-plus/tnxel.js

@@ -276,6 +276,10 @@ export default build('tnxel', () => {
             ElMessageBox.alert(message, '错误', options).then(callback);
             this._handleZIndex('.el-message-box__wrapper:last');
             this.app.eventBus.emit('tnx.error', options);
+            // 打印TypeError对象，便于调试
+            if (typeof message === 'object' && message.name === 'TypeError') {
+                console.error(message);
+            }
         },
         confirm(message, title, callback, options) {
             if (typeof title === 'function') {
@@ -340,11 +344,16 @@ export default build('tnxel', () => {
             this._handleZIndex('.el-message:last');
             this.app.eventBus.emit('tnx.toast', options);
         },
-        showLoading(message, options) {
+        showLoading(message, callback, options) {
             if (typeof message !== 'string') {
-                options = message;
+                options = callback;
+                callback = message;
                 message = undefined;
             }
+            if (typeof callback !== 'function') {
+                options = callback;
+                callback = undefined;
+            }
             options = Object.assign({
                 dangerouslyUseHTMLString: true,
             }, options, {
@@ -355,6 +364,14 @@ export default build('tnxel', () => {
                 window.tnx.loadingInstance = ElLoading.service(options);
                 this._handleZIndex('.el-loading-mask');
                 window.tnx.app.eventBus.emit('tnx.showLoading', options);
+                if (callback) {
+                    let vm = window.tnx.loadingInstance.vm;
+                    if (vm) {
+                        this.nextTickTimeout(vm, callback, 500);
+                    } else {
+                        callback();
+                    }
+                }
             } catch (e) {
                 window.tnx.loadingInstance = null;
                 console.error(e);
@@ -400,7 +417,7 @@ export default build('tnxel', () => {
                 formRef.disable(false);
             }
             return result;
-        }
+        },
     });
 
     tnxel.libs.ElementPlus = ElementPlus;

package/src/tnxvue.js

@@ -108,6 +108,11 @@ export default build('tnxvue', () => {
                 vm.component(component.name, component);
             }
         },
+        nextTickTimeout(vm, handler, timeout) {
+            vm.$nextTick(() => {
+                setTimeout(handler, timeout);
+            });
+        },
         dialog(content, title, buttons, options, contentProps) {
             // 默认不实现，由UI框架扩展层实现
             throw new Error('Unsupported function');