@truenewx/tnxvue3 3.0.3 → 3.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {

package/src/bootstrap-vue/button/Button.vue

@@ -1,18 +1,28 @@
 <template>
-    <BButton>
-        <i :class="icon" v-if="icon"></i>
-        <span><slot></slot></span>
+    <BButton class="tnxbsv-button" :loading="loading" :disabled="loading">
+        <i class="me-1" :class="icon" v-if="icon"></i>
+        <div>
+            <slot></slot>
+        </div>
+        <template #loading>
+            <Loading class="me-1" theme="inherit"/>
+            <div>
+                <slot></slot>
+            </div>
+        </template>
     </BButton>
 </template>
 
 <script>
 import {BButton} from 'bootstrap-vue-next';
+import Loading from '../loading/Loading.vue';
 
 export default {
     name: 'TnxbsvButton',
-    components: {BButton},
+    components: {BButton, Loading},
     props: {
         icon: String,
+        loading: Boolean,
     },
     data() {
         return {};
@@ -22,5 +32,8 @@ export default {
 </script>
 
 <style>
-
+.tnxbsv-button {
+    display: flex;
+    align-items: center;
+}
 </style>

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

@@ -0,0 +1,158 @@
+<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>

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

@@ -0,0 +1,243 @@
+<template>
+    <BForm :id="id" class="tnxbsv-form">
+        <slot></slot>
+    </BForm>
+</template>
+
+<script>
+import {BForm} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvForm',
+    components: {BForm},
+    props: {
+        id: {
+            type: String,
+            default: () => 'tnxbsv-form-' + new Date().getTime(),
+        },
+        model: {
+            type: Object,
+            default: () => ({}),
+        },
+        inline: Boolean,
+        rules: {
+            type: Object, // key: 字段名，value: 验证规则数组
+            default: () => ({}),
+        },
+    },
+    data() {
+        return {};
+    },
+    mounted() {
+        window.addEventListener('resize', this.updateLabelWidth);
+        this.$nextTick(() => {
+            setTimeout(() => {
+                this.initRules();
+                this.updateLabelWidth();
+            });
+        });
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.updateLabelWidth);
+    },
+    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;
+                }
+            });
+            return elements;
+        },
+        getFieldRules(fieldName) {
+            let fieldRules = this.rules[fieldName] || [];
+            if (!Array.isArray(fieldRules)) {
+                fieldRules = [fieldRules];
+            }
+            return fieldRules;
+        },
+        initRules() {
+            let fieldGroupElements = this.getFieldGroupElements();
+            for (let fieldName in fieldGroupElements) {
+                let fieldGroupElement = fieldGroupElements[fieldName];
+                if (fieldGroupElement) {
+                    let fieldRules = this.getFieldRules(fieldName);
+                    if (fieldRules.some(rule => rule.required)) {
+                        let label = fieldGroupElement.querySelector('.form-label');
+                        if (label) {
+                            label.classList.add('is-required');
+                        }
+                    }
+                    let existsChangeValidator = fieldRules.some(fieldRule => fieldRule.trigger === 'change');
+                    let existsBlurValidator = fieldRules.some(fieldRule => fieldRule.trigger !== 'change');
+                    if (existsChangeValidator || existsBlurValidator) {
+                        let fieldElement = fieldGroupElement.querySelector('input, select, textarea');
+                        if (fieldElement) {
+                            if (existsChangeValidator) {
+                                fieldElement.addEventListener('change', () => {
+                                    this.validateField(fieldName, 'change');
+                                });
+                            }
+                            if (existsBlurValidator) {
+                                fieldElement.addEventListener('blur', () => {
+                                    this.validateField(fieldName, 'blur');
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        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;
+                        }
+                    }
+                }
+            }
+            if (maxWidth) {
+                this.$el.style.setProperty('--label-width', `${maxWidth}px`);
+            }
+        },
+        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;
+                }
+            }
+
+            if (!valid) {
+                this.$el.classList.add('was-validated'); // 添加已验证样式
+            }
+
+            return valid;
+        },
+        getFieldElement(fieldName) {
+            let groupElement = this.$el.querySelector(`#${this.id} .b-form-group[prop="${fieldName}"]`);
+            if (groupElement) {
+                return groupElement.querySelector('input, textarea, select');
+            }
+            return undefined;
+        },
+        validateField(fieldName, trigger) {
+            const fieldValue = this.model[fieldName];
+            const fieldRules = this.getFieldRules(fieldName);
+            const fieldErrors = [];
+
+            fieldRules.forEach(fieldRule => {
+                if (typeof fieldRule.validator === 'function' && (!trigger || trigger === fieldRule.trigger)) {
+                    fieldRule.validator(fieldRule, fieldValue, (error) => {
+                        if (error) {
+                            fieldErrors.push(error.message);
+                        }
+                    });
+                }
+                // 没有validator()方法，则不进行校验
+            });
+
+            if (fieldErrors.length > 0) {
+                this.setFieldInvalidFeedback(fieldName, fieldErrors);
+                return false;
+            } else {
+                // 清除错误状态
+                this.removeFieldInvalidFeedback(fieldName);
+                return true;
+            }
+        },
+        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')) {
+                    feedbackDiv = document.createElement('div');
+                    feedbackDiv.className = 'invalid-feedback';
+                    fieldElement.parentNode.insertBefore(feedbackDiv, fieldElement.nextSibling);
+                }
+                // 更新 .invalid-feedback 的内容
+                feedbackDiv.textContent = messages.join('; ');
+                // 设置输入框为无效状态
+                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')) {
+                    feedbackDiv.remove();
+                }
+                // 移除无效状态
+                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());
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-form .b-form-group {
+    display: flex;
+}
+
+.tnxbsv-form .b-form-group:not(:last-child) {
+    margin-bottom: 1rem;
+}
+
+.tnxbsv-form .b-form-group .form-label {
+    white-space: nowrap;
+    min-width: var(--label-width);
+    text-align: right;
+    margin-right: 0.75rem;
+    margin-bottom: 0;
+}
+
+.tnxbsv-form .b-form-group .form-label.is-required::before {
+    content: '*';
+    color: var(--bs-danger);
+    margin-right: 0.25rem;
+}
+
+.tnxbsv-form .b-form-group .invalid-feedback {
+}
+
+@media (max-width: var(--bs-breakpoint-md)) {
+    .tnxbsv-form .b-form-group {
+        flex-direction: column;
+    }
+
+    .tnxbsv-form .b-form-group .form-label {
+        text-align: left;
+        margin-bottom: 0.5rem;
+        min-width: auto;
+    }
+}
+</style>

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

@@ -0,0 +1,42 @@
+<template>
+    <div class="tnxbsv-form-group b-form-group" :prop="prop">
+        <div class="tnxbsv-form-group__label-wrapper">
+            <slot name="label">
+                <label class="form-label">{{ label }}</label>
+            </slot>
+        </div>
+        <div class="tnxbsv-form-group__content-wrapper">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxbsvFormGroup',
+    props: {
+        label: String,
+        prop: String,
+    },
+    data() {
+        return {
+            model: {},
+        };
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbsv-form-group {
+    display: flex;
+}
+
+.tnxbsv-form-group__label-wrapper {
+    padding-top: 0.375rem;
+}
+
+.tnxbsv-form-group__content-wrapper {
+    flex-grow: 1;
+}
+</style>

package/src/bootstrap-vue/loading/Loading.vue

@@ -27,11 +27,14 @@ export default {
     },
     computed: {
         extraClass() {
-            let extraClass = 'text-' + this.theme;
+            let extraClass = '';
+            if (this.theme && this.theme !== 'inherit') {
+                extraClass += ' text-' + this.theme;
+            }
             if (this.small) {
                 extraClass += ' spinner-border-sm';
             }
-            return extraClass;
+            return extraClass.trim();
         },
     },
     methods: {}

package/src/bootstrap-vue/tnxbsv.css

@@ -29,3 +29,8 @@
 .badge.text-bg-light {
     border-color: var(--bs-border-color);
 }
+
+.accordion-button,
+.accordion-body {
+    padding: 1rem;
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -1,4 +1,5 @@
 // tnxbsv.js
+import tnxjq from '@truenewx/tnxcore/src/tnxjq';
 import tnxvue from '../tnxvue.js';
 import * as BootstrapVue from 'bootstrap-vue-next';
 import 'bootstrap/dist/css/bootstrap.css';
@@ -6,7 +7,10 @@ import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import './tnxbsv.css';
 
 import Button from './button/Button.vue';
+import Dialog from './dialog/Dialog.vue';
 import EnumSelect from './enum-select/EnumSelect.vue';
+import Form from './form/Form.vue';
+import FormGroup from './form/FormGroup.vue';
 import Loading from './loading/Loading.vue';
 import Paged from './paged/Paged.vue';
 import QueryTable from './query-table/QueryTable.vue';
@@ -16,20 +20,42 @@ export const build = tnxvue.build;
 
 export default build('tnxbsv', () => {
     const components = Object.assign({}, tnxvue.components, {
-        Button, EnumSelect, Loading, Paged, QueryTable, Select,
+        Button, Dialog, EnumSelect, Form, FormGroup, Loading, Paged, QueryTable, Select,
     });
 
-    const tnxbsv = Object.assign({}, tnxvue, {
+    const tnxbsv = Object.assign({}, tnxjq, tnxvue, {
+        libs: Object.assign({}, tnxjq.libs, tnxvue.libs, {BootstrapVue}),
         components,
         componentDefaultApp: undefined, // 组件的默认app，从服务端获取数据的组件以此为远程请求的默认app
         _dialogs: [], // 对话框堆栈
         dialog(content, title, buttons, options, contentProps) {
-
+            let id = new Date().getTime();
+            let containerId = 'dialog-container-' + id;
+            let componentDefinition = Object.assign({}, Dialog,);
+            let dialogVm = window.tnx.createVueInstance(componentDefinition, null, {
+                modelValue: true,
+                id: id,
+                container: '#' + containerId,
+                title,
+                content,
+                contentProps,
+                buttons,
+            });
+            const dialogContainer = document.createElement('div');
+            dialogContainer.className = 'tnxbsv-dialog-container';
+            dialogContainer.id = containerId;
+            document.body.appendChild(dialogContainer);
+            let dialog = dialogVm.mount(dialogContainer);
+            dialog.onHidden = this.util.function.after(dialog.onHidden, () => {
+                dialogVm.unmount();
+                this._dialogs.remove(dialog);
+                document.body.removeChild(dialogContainer);
+            });
+            this._dialogs.push(dialog);
+            return dialogVm;
         },
     });
 
-    tnxbsv.libs.BootstrapVue = BootstrapVue;
-
     tnxbsv.install = tnxbsv.util.function.around(tnxbsv.install, function (install, vm) {
         install.call(tnxbsv, vm);
         vm.use(BootstrapVue.createBootstrap());

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

@@ -1,6 +1,6 @@
 <template>
-    <el-dialog :data-v-id="id"
-        class="tnxel-dialog"
+    <el-dialog class="tnxel-dialog"
+        :data-v-id="id"
         v-model="visible"
         destroy-on-close
         append-to-body
@@ -34,8 +34,6 @@
 import $ from 'cash-dom';
 import DialogContent from './DialogContent.vue';
 
-const util = window.tnx.util;
-
 export default {
     name: 'TnxelDialog',
     components: {
@@ -168,7 +166,7 @@ export default {
                 });
 
                 if (observe) {
-                    this.heightChangeObserver = util.dom.observeHeightChange($dialog[0], this.locate);
+                    this.heightChangeObserver = window.tnx.util.dom.observeHeightChange($dialog[0], this.locate);
                 }
             }
         },
@@ -190,7 +188,7 @@ export default {
             const vm = this;
             this.beforeClose(function () {
                 if (typeof callback === 'function') {
-                    vm.options.onClosed = util.function.around(vm.options.onClosed, function (onClosed) {
+                    vm.options.onClosed = window.tnx.util.function.around(vm.options.onClosed, function (onClosed) {
                         if (onClosed) {
                             onClosed();
                         }

package/src/tnxvue.js

@@ -96,7 +96,6 @@ export default build('tnxvue', () => {
             } else if (window.tnx.router.instance) {
                 vm.config.globalProperties.$router = window.tnx.router.instance;
             }
-            // vm.config.unwrapInjectedRef = true;
             window.tnx.app.eventBus = window.tnx.app.eventBus || mitt();
             window.tnx.app.eventBus.once = function (name, handler) {
                 this.all.set(name, [handler]);