@truenewx/tnxvue3 3.0.5 → 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 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;
-}
-
-.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>
@@ -28,6 +28,7 @@ export default {
     },
     data() {
         return {
+            initializing: true,
             fieldEventListeners: {},
         };
     },
@@ -46,6 +47,7 @@ export default {
                 this.initRules();
                 this.updateLabelWidth();
                 this.updateElementsDisabled();
+                this.initializing = false;
             });
         });
     },
@@ -57,11 +59,9 @@ export default {
         getFieldGroupElements() {
             let elements = {};
             let groups = this.$el.querySelectorAll('.b-form-group[prop]');
-            groups.forEach(label => {
-                let fieldName = label.getAttribute('prop');
-                if (fieldName) {
-                    elements[fieldName] = label;
-                }
+            groups.forEach(group => {
+                let fieldName = group.getAttribute('prop');
+                elements[fieldName] = group;
             });
             return elements;
         },
@@ -133,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;
                     }
                 }
             }
@@ -152,7 +149,6 @@ export default {
         },
         validate() {
             this.clearValidate(); // 清除之前的反馈信息
-            this.$el.classList.remove('was-validated'); // 移除已验证样式
 
             return new Promise((resolve, reject) => {
                 let errors = {};
@@ -164,18 +160,20 @@ export default {
                     }
                 }
                 if (Object.keys(errors).length) {
-                    this.$el.classList.add('was-validated'); // 添加已验证样式
                     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(`.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];
@@ -202,38 +200,40 @@ export default {
             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'));
 
@@ -241,9 +241,14 @@ export default {
             invalidFeedbackElements.forEach(el => el.remove());
         },
         scrollToField(fieldName) {
-            let fieldElement = this.getFieldElement(fieldName);
-            if (fieldElement) {
-                fieldElement.scrollIntoView({behavior: 'smooth', block: 'center'});
+            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() {
@@ -257,6 +262,10 @@ export default {
 </script>
 
 <style>
+.tnxbsv-form.initializing .form-label {
+    visibility: hidden;
+}
+
 .tnxbsv-form .b-form-group {
     display: flex;
 }
@@ -280,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,

package/src/bootstrap-vue/loading-overlay/LoadingOverlay.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="loading-overlay">
+        <LoadingIcon theme="primary" :small="false" :text="message"/>
+        <span class="loading-message text-primary" v-if="message">{{ message }}</span>
+    </div>
+</template>
+
+<script>
+import LoadingIcon from "../loading-icon/LoadingIcon.vue";
+
+export default {
+    name: 'TnxbsvLoadingMask',
+    components: {LoadingIcon},
+    props: {
+        message: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {};
+    },
+    mounted() {
+        document.body.classList.add('no-scroll')
+    },
+    beforeUnmount() {
+        document.body.classList.remove('no-scroll');
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.no-scroll {
+    overflow: hidden !important;
+}
+
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(var(--bs-white-rgb), 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    z-index: 2147483647; /* 浏览器支持的最大值 */
+}
+
+.loading-overlay .spinner-border {
+    opacity: 0.7;
+}
+
+.loading-overlay .loading-message {
+    margin-top: 0.25rem;
+    opacity: 0.7;
+}
+</style>