@truenewx/tnxvue3 3.0.4 → 3.0.6

package/src/bootstrap-vue/dialog/Dialog.vue

@@ -1,158 +1,163 @@
-<template>
-    <BModal
-        dialog-class="tnxbsv-dialog"
-        header-class="tnxbsv-dialog-header"
-        title-class="tnxbsv-dialog-title"
-        body-class="tnxbsv-dialog-body"
-        :footer-class="buttons?.length ? 'tnxbsv-dialog-footer' : 'd-none'"
-        :data-v-id="id"
-        v-model="visible"
-        scrollable
-        no-close-on-backdrop
-        no-close-on-esc
-        :teleport-to="container"
-        @hidden="onHidden"
-    >
-        <template #title>
-            <div v-html="title" v-if="title"></div>
-        </template>
-        <div v-html="content" v-if="typeof content === 'string'"></div>
-        <component :is="content" v-bind="contentProps" v-else></component>
-        <template #footer>
-            <TnxbsvButton v-for="(button, index) in buttons" :key="index"
-                :variant="button.type || 'outline-secondary'"
-                :loading="buttonLoadings[index]"
-                @click="btnClick(index)"
-            >
-                {{ button.caption || button.text }}
-            </TnxbsvButton>
-        </template>
-    </BModal>
-</template>
-
-<script>
-import {BModal} from 'bootstrap-vue-next';
-import TnxbsvButton from '../button/Button.vue'
-
-export default {
-    name: 'TnxbsvDialog',
-    components: {BModal, TnxbsvButton,},
-    props: {
-        id: {
-            type: [String, Number],
-            default: () => window.tnx.util.string.uuid32(),
-        },
-        modelValue: {
-            type: Boolean,
-            default: false,
-        },
-        container: String,
-        title: String,
-        content: [String, Object],
-        contentProps: {
-            type: Object,
-            default: () => ({}),
-        },
-        buttons: Array,
-        theme: String,
-        width: {
-            type: [Number, String],
-            default: 512,
-        },
-    },
-    emits: ['update:modelValue', 'close'],
-    data() {
-        return {
-            visible: this.modelValue,
-            buttonLoadings: [],
-            heightChangeObserver: null,
-        };
-    },
-    watch: {
-        modelValue(newValue, oldValue) {
-            this.visible = this.modelValue;
-            if (newValue && !oldValue) { // 从隐藏到显示
-                this.$nextTick(() => {
-                    this.locate(true);
-                });
-            }
-        },
-        visible() {
-            this.$emit('update:modelValue', this.visible);
-        },
-    },
-    mounted() {
-        window.tnx.app.eventBus.once('tnx.error', options => {
-            this.buttonLoadings = [];
-        });
-        this.$nextTick(() => {
-            if (this.visible) {
-                this.locate(true);
-            }
-        });
-    },
-    beforeUnmount() {
-        window.tnx.app.eventBus.off('tnx.error');
-    },
-    methods: {
-        locate(observe) {
-            const $ = window.tnx.libs.$;
-            let $dialog = $(`${this.container} .tnxbsv-dialog`);
-            if ($dialog.length) {
-                let top = window.tnx.util.dom.getTopVerticallyCenteredOnPage($dialog[0]);
-                let width = typeof this.width === 'number' ? this.width + 'px' : this.width;
-                $dialog.css({
-                    'margin-top': top + 'px',
-                    'width': width,
-                });
-
-                if (observe) {
-                    this.heightChangeObserver = window.tnx.util.dom.observeHeightChange($dialog[0], this.locate);
-                }
-            }
-        },
-        btnClick(index) {
-            const button = this.buttons[index];
-            if (button && typeof button.click === 'function') {
-                let result = button.click.call(this.$refs.content, this.close);
-                if (result === 'loading') {
-                    this.buttonLoadings[index] = true;
-                    return;
-                }
-                if (result === false) {
-                    return;
-                }
-            }
-            this.close();
-        },
-        open() {
-            this.visible = true;
-        },
-        close() {
-            this.visible = false;
-        },
-        onHidden() {
-            this.$emit('close');
-        },
-    }
-}
-</script>
-
-<style>
-.tnxbsv-dialog {
-    height: fit-content;
-}
-
-.tnxbsv-dialog .modal-header {
-    padding: 0.75rem 1rem;
-}
-
-.tnxbsv-dialog .modal-header .tnxbsv-dialog-title {
-    font-size: 1.1rem;
-}
-
-.tnxbsv-dialog .modal-header .btn-close {
-    --bs-btn-close-opacity: 0.25;
-    --bs-btn-close-hover-opacity: 0.5;
-}
-</style>
+<template>
+    <BModal
+        dialog-class="tnxbsv-dialog"
+        header-class="tnxbsv-dialog-header"
+        title-class="tnxbsv-dialog-title"
+        body-class="tnxbsv-dialog-body"
+        :footer-class="buttons?.length ? 'tnxbsv-dialog-footer' : 'd-none'"
+        :data-v-id="id"
+        v-model="visible"
+        scrollable
+        no-close-on-backdrop
+        no-close-on-esc
+        :teleport-to="container"
+        @hidden="onHidden"
+    >
+        <template #title>
+            <div v-html="title" v-if="title"></div>
+        </template>
+        <div ref="content" v-html="content" v-if="typeof content === 'string'"></div>
+        <component ref="content" :is="content" v-bind="contentProps" v-else></component>
+        <template #footer>
+            <TnxbsvButton v-for="(button, index) in buttons" :key="index"
+                :type="button.type"
+                :loading="buttonLoadings[index]"
+                @click="btnClick(index)"
+            >
+                {{ button.caption || button.text }}
+            </TnxbsvButton>
+        </template>
+    </BModal>
+</template>
+
+<script>
+import {BModal} from 'bootstrap-vue-next';
+import TnxbsvButton from '../button/Button.vue'
+
+export default {
+    name: 'TnxbsvDialog',
+    components: {BModal, TnxbsvButton,},
+    props: {
+        id: {
+            type: [String, Number],
+            default: () => window.tnx.util.string.uuid32(),
+        },
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        container: String,
+        title: String,
+        content: [String, Object],
+        contentProps: {
+            type: Object,
+            default: () => ({}),
+        },
+        buttons: Array,
+        theme: String,
+        width: {
+            type: [Number, String],
+            default: 512,
+        },
+    },
+    emits: ['update:modelValue', 'close'],
+    data() {
+        return {
+            visible: this.modelValue,
+            buttonLoadings: [],
+            heightChangeObserver: null,
+        };
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            this.visible = this.modelValue;
+            if (newValue && !oldValue) { // 从隐藏到显示
+                this.$nextTick(() => {
+                    this.locate(true);
+                });
+            }
+        },
+        visible() {
+            this.$emit('update:modelValue', this.visible);
+        },
+    },
+    mounted() {
+        window.tnx.app.eventBus.once('tnx.error', options => {
+            this.buttonLoadings = [];
+        });
+        this.$nextTick(() => {
+            if (this.visible) {
+                this.locate(true);
+            }
+        });
+    },
+    beforeUnmount() {
+        window.tnx.app.eventBus.off('tnx.error');
+    },
+    methods: {
+        locate(observe) {
+            const $ = window.tnx.libs.$;
+            let $dialog = $(`${this.container} .tnxbsv-dialog`);
+            if ($dialog.length) {
+                let top = window.tnx.util.dom.getTopVerticallyCenteredOnPage($dialog[0]);
+                let width = typeof this.width === 'number' ? this.width + 'px' : this.width;
+                $dialog.css({
+                    'margin-top': top + 'px',
+                    'width': width,
+                });
+
+                if (observe) {
+                    this.heightChangeObserver = window.tnx.util.dom.observeHeightChange($dialog[0], this.locate);
+                }
+            }
+        },
+        btnClick(index) {
+            const button = this.buttons[index];
+            if (button && typeof button.click === 'function') {
+                let result = button.click.call(this.$refs.content, this.close);
+                if (result === 'loading') {
+                    this.buttonLoadings[index] = true;
+                    return;
+                }
+                if (result === false) {
+                    return;
+                }
+            }
+            this.close();
+        },
+        open() {
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+        },
+        onHidden() {
+            this.$emit('close');
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-dialog {
+    height: fit-content;
+    margin-bottom: 0;
+}
+
+.tnxbsv-dialog.modal-dialog-scrollable .modal-content {
+    max-height: calc(100vh - 1rem);
+}
+
+.tnxbsv-dialog .modal-header {
+    padding: 0.75rem 1rem;
+}
+
+.tnxbsv-dialog .modal-header .tnxbsv-dialog-title {
+    font-size: 1.1rem;
+}
+
+.tnxbsv-dialog .modal-header .btn-close {
+    --bs-btn-close-opacity: 0.25;
+    --bs-btn-close-hover-opacity: 0.5;
+}
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-    <BForm :id="id" class="tnxbsv-form">
+    <BForm :id="id" class="tnxbsv-form" :class="{initializing: initializing}">
         <slot></slot>
     </BForm>
 </template>
@@ -24,9 +24,21 @@ export default {
             type: Object, // key: 字段名，value: 验证规则数组
             default: () => ({}),
         },
+        disabled: Boolean,
     },
     data() {
-        return {};
+        return {
+            initializing: true,
+            fieldEventListeners: {},
+        };
+    },
+    watch: {
+        rules() {
+            this.initRules();
+        },
+        disabled() {
+            this.updateElementsDisabled();
+        },
     },
     mounted() {
         window.addEventListener('resize', this.updateLabelWidth);
@@ -34,21 +46,22 @@ export default {
             setTimeout(() => {
                 this.initRules();
                 this.updateLabelWidth();
+                this.updateElementsDisabled();
+                this.initializing = false;
             });
         });
     },
     beforeUnmount() {
         window.removeEventListener('resize', this.updateLabelWidth);
+        this.clearEventListeners();
     },
     methods: {
         getFieldGroupElements() {
             let elements = {};
-            let groups = this.$el.querySelectorAll(`#${this.id} .b-form-group[prop]`);
-            groups.forEach(label => {
-                let fieldName = label.getAttribute('prop');
-                if (fieldName) {
-                    elements[fieldName] = label;
-                }
+            let groups = this.$el.querySelectorAll('.b-form-group[prop]');
+            groups.forEach(group => {
+                let fieldName = group.getAttribute('prop');
+                elements[fieldName] = group;
             });
             return elements;
         },
@@ -59,7 +72,34 @@ export default {
             }
             return fieldRules;
         },
+        addFieldEventListener(fieldName, element, eventType, handler) {
+            if (!this.fieldEventListeners[fieldName]) {
+                this.fieldEventListeners[fieldName] = {};
+            }
+            if (!this.fieldEventListeners[fieldName][eventType]) {
+                this.fieldEventListeners[fieldName][eventType] = [];
+            }
+            element.addEventListener(eventType, handler);
+            this.fieldEventListeners[fieldName][eventType].push(handler);
+        },
+        clearEventListeners() {
+            for (let fieldName in this.fieldEventListeners) {
+                let listeners = this.fieldEventListeners[fieldName];
+                for (let eventType in listeners) {
+                    let handlers = listeners[eventType];
+                    let fieldElement = this.getFieldElement(fieldName);
+                    if (fieldElement) {
+                        handlers.forEach(handler => {
+                            fieldElement.removeEventListener(eventType, handler);
+                        });
+                    }
+                }
+            }
+            this.fieldEventListeners = {}; // 清空映射表
+        },
         initRules() {
+            this.clearEventListeners();
+
             let fieldGroupElements = this.getFieldGroupElements();
             for (let fieldName in fieldGroupElements) {
                 let fieldGroupElement = fieldGroupElements[fieldName];
@@ -77,12 +117,12 @@ export default {
                         let fieldElement = fieldGroupElement.querySelector('input, select, textarea');
                         if (fieldElement) {
                             if (existsChangeValidator) {
-                                fieldElement.addEventListener('change', () => {
+                                this.addFieldEventListener(fieldName, fieldElement, 'change', () => {
                                     this.validateField(fieldName, 'change');
                                 });
                             }
                             if (existsBlurValidator) {
-                                fieldElement.addEventListener('blur', () => {
+                                this.addFieldEventListener(fieldName, fieldElement, 'blur', () => {
                                     this.validateField(fieldName, 'blur');
                                 });
                             }
@@ -93,16 +133,13 @@ export default {
         },
         updateLabelWidth() {
             let maxWidth = 0;
-            let fieldGroupElements = this.getFieldGroupElements();
-            for (let fieldName in fieldGroupElements) {
-                let fieldGroupElement = fieldGroupElements[fieldName];
-                if (fieldGroupElement) {
-                    let label = fieldGroupElement.querySelector('.form-label');
-                    if (label) {
-                        let width = label.offsetWidth;
-                        if (width > maxWidth) {
-                            maxWidth = width;
-                        }
+            let groupElements = this.$el.querySelectorAll('.b-form-group');
+            for (let groupElement of groupElements) {
+                let label = groupElement.querySelector('.form-label');
+                if (label) {
+                    let width = label.offsetWidth;
+                    if (width > maxWidth) {
+                        maxWidth = width;
                     }
                 }
             }
@@ -112,98 +149,123 @@ export default {
         },
         validate() {
             this.clearValidate(); // 清除之前的反馈信息
-            this.$el.classList.remove('was-validated'); // 移除已验证样式
 
-            let valid = true;
-            let fieldGroupElements = this.getFieldGroupElements();
-            for (let fieldName in fieldGroupElements) {
-                if (!this.validateField(fieldName)) {
-                    valid = false;
+            return new Promise((resolve, reject) => {
+                let errors = {};
+                let fieldGroupElements = this.getFieldGroupElements();
+                for (let fieldName in fieldGroupElements) {
+                    let fieldErrorMessages = this.validateField(fieldName);
+                    if (fieldErrorMessages.length) {
+                        errors[fieldName] = fieldErrorMessages;
+                    }
                 }
-            }
-
-            if (!valid) {
-                this.$el.classList.add('was-validated'); // 添加已验证样式
-            }
-
-            return valid;
+                if (Object.keys(errors).length) {
+                    reject(errors);
+                }
+                resolve();
+            });
+        },
+        getFieldGroupElement(fieldName) {
+            return this.$el.querySelector(`.b-form-group[prop="${fieldName}"]`);
+        },
+        queryFieldElement(fieldGroupElement) {
+            return fieldGroupElement ? fieldGroupElement.querySelector('input, textarea, select') : null;
         },
         getFieldElement(fieldName) {
-            let groupElement = this.$el.querySelector(`#${this.id} .b-form-group[prop="${fieldName}"]`);
-            if (groupElement) {
-                return groupElement.querySelector('input, textarea, select');
-            }
-            return undefined;
+            let fieldGroupElement = this.getFieldGroupElement(fieldName);
+            return this.queryFieldElement(fieldGroupElement);
         },
         validateField(fieldName, trigger) {
             const fieldValue = this.model[fieldName];
             const fieldRules = this.getFieldRules(fieldName);
-            const fieldErrors = [];
+            const fieldErrorMessages = [];
 
             fieldRules.forEach(fieldRule => {
                 if (typeof fieldRule.validator === 'function' && (!trigger || trigger === fieldRule.trigger)) {
                     fieldRule.validator(fieldRule, fieldValue, (error) => {
                         if (error) {
-                            fieldErrors.push(error.message);
+                            fieldErrorMessages.push(error.message);
                         }
                     });
                 }
                 // 没有validator()方法，则不进行校验
             });
 
-            if (fieldErrors.length > 0) {
-                this.setFieldInvalidFeedback(fieldName, fieldErrors);
-                return false;
+            if (fieldErrorMessages.length) {
+                this.setFieldInvalidFeedback(fieldName, fieldErrorMessages);
             } else {
                 // 清除错误状态
                 this.removeFieldInvalidFeedback(fieldName);
-                return true;
             }
+            return fieldErrorMessages;
         },
         setFieldInvalidFeedback(fieldName, messages) {
-            let fieldElement = this.getFieldElement(fieldName);
-            if (fieldElement) {
-                // 查找已有的 .invalid-feedback 元素
-                let feedbackDiv = fieldElement.nextElementSibling;
-                // 如果下一个兄弟元素不是 .invalid-feedback，则创建一个新的
-                if (!feedbackDiv || !feedbackDiv.classList.contains('invalid-feedback')) {
+            let fieldGroupElement = this.getFieldGroupElement(fieldName);
+            if (fieldGroupElement) {
+                let feedbackDiv = fieldGroupElement.querySelector('.invalid-feedback');
+                if (!feedbackDiv) {
                     feedbackDiv = document.createElement('div');
                     feedbackDiv.className = 'invalid-feedback';
-                    fieldElement.parentNode.insertBefore(feedbackDiv, fieldElement.nextSibling);
+                    let contentWrapper = fieldGroupElement.querySelector('.tnxbsv-form-group__content-wrapper');
+                    // 有分组元素的情况下，一定有contentWrapper
+                    contentWrapper.appendChild(feedbackDiv);
                 }
                 // 更新 .invalid-feedback 的内容
                 feedbackDiv.textContent = messages.join('; ');
                 // 设置输入框为无效状态
-                fieldElement.classList.add('is-invalid');
+                let fieldElement = this.queryFieldElement(fieldGroupElement);
+                if (fieldElement) {
+                    fieldElement.classList.add('is-invalid');
+                }
             }
         },
         removeFieldInvalidFeedback(fieldName) {
-            let fieldElement = this.getFieldElement(fieldName);
-            if (fieldElement) {
-                // 查找已有的 .invalid-feedback 元素
-                let feedbackDiv = fieldElement.nextElementSibling;
-                // 如果存在 .invalid-feedback 元素，则移除它
-                if (feedbackDiv && feedbackDiv.classList.contains('invalid-feedback')) {
+            let fieldGroupElement = this.getFieldGroupElement(fieldName);
+            if (fieldGroupElement) {
+                let feedbackDiv = fieldGroupElement.querySelector('.invalid-feedback');
+                if (feedbackDiv) {
                     feedbackDiv.remove();
                 }
                 // 移除无效状态
-                fieldElement.classList.remove('is-invalid');
+                let fieldElement = this.queryFieldElement(fieldGroupElement);
+                if (fieldElement) {
+                    fieldElement.classList.remove('is-invalid');
+                }
             }
         },
         clearValidate() {
-            this.$el.classList.remove('was-validated'); // 移除已验证样式
-
             const invalidElements = this.$el.querySelectorAll('.is-invalid');
             invalidElements.forEach(el => el.classList.remove('is-invalid'));
 
             const invalidFeedbackElements = this.$el.querySelectorAll('.invalid-feedback');
             invalidFeedbackElements.forEach(el => el.remove());
         },
+        scrollToField(fieldName) {
+            let fieldGroupElement = this.getFieldGroupElement(fieldName);
+            if (fieldGroupElement) {
+                let fieldElement = this.queryFieldElement(fieldGroupElement);
+                if (fieldElement) {
+                    fieldElement.scrollIntoView({behavior: 'smooth', block: 'center'});
+                } else {
+                    fieldGroupElement.scrollIntoView({behavior: 'smooth', block: 'center'});
+                }
+            }
+        },
+        updateElementsDisabled() {
+            let elements = this.$el.querySelectorAll('input, textarea, select, button');
+            elements.forEach(element => {
+                element.disabled = this.disabled;
+            });
+        },
     }
 }
 </script>
 
 <style>
+.tnxbsv-form.initializing .form-label {
+    visibility: hidden;
+}
+
 .tnxbsv-form .b-form-group {
     display: flex;
 }
@@ -227,6 +289,7 @@ export default {
 }
 
 .tnxbsv-form .b-form-group .invalid-feedback {
+    display: block;
 }
 
 @media (max-width: var(--bs-breakpoint-md)) {

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

@@ -38,5 +38,9 @@ export default {
 
 .tnxbsv-form-group__content-wrapper {
     flex-grow: 1;
+    min-height: 2.375rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 </style>

package/src/bootstrap-vue/{loading/Loading.vue → loading-icon/LoadingIcon.vue}

@@ -1,5 +1,5 @@
 <template>
-    <span class="spinner-border" :class="extraClass" role="status">
+    <span class="tnxbsv-loading-icon spinner-border" :class="extraClass" role="status">
         <span class="visually-hidden">{{ text }}</span>
     </span>
 </template>
@@ -7,7 +7,7 @@
 <script>
 
 export default {
-    name: 'TnxbsvLoading',
+    name: 'TnxbsvLoadingIcon',
     props: {
         small: {
             type: Boolean,