@truenewx/tnxvue3 3.0.6 → 3.0.7

package/package.json

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

package/src/bootstrap-vue/cascader/Cascader.vue

@@ -113,7 +113,7 @@ export default {
     data() {
         return {
             visible: false,
-            selections: [],
+            selections: this.initSelections(),
             optionsArray: [this.options],
             inputValue: '',
             filtering: false,
@@ -140,6 +140,12 @@ export default {
                 this.inputValue = this.displayValue;
             }
         },
+        modelValue(newValue) {
+            const currentValue = this.selections.length > 0 ? this.selections[this.selections.length - 1][this.props.value] : '';
+            if (newValue !== currentValue) {
+                this.selections = this.initSelections();
+            }
+        },
         options: {
             deep: true,
             handler(newOptions) {
@@ -165,6 +171,40 @@ export default {
         document.removeEventListener('click', this.handleClickOutside);
     },
     methods: {
+        initSelections() {
+            if (!this.modelValue || !this.options) {
+                return [];
+            }
+            const path = this.findPathByValue(this.options, this.modelValue);
+            if (path) {
+                // 初始化 optionsArray
+                path.forEach((option, index) => {
+                    if (index < path.length - 1) {
+                        const children = option[this.props.children];
+                        if (children) {
+                            this.optionsArray[index + 1] = children;
+                        }
+                    }
+                });
+                return path;
+            }
+            return [];
+        },
+        findPathByValue(options, value, path = []) {
+            for (const option of options) {
+                const currentPath = [...path, option];
+                if (option[this.props.value] === value) {
+                    return currentPath;
+                }
+                if (option[this.props.children]) {
+                    const foundPath = this.findPathByValue(option[this.props.children], value, currentPath);
+                    if (foundPath) {
+                        return foundPath;
+                    }
+                }
+            }
+            return null;
+        },
         clearValue(e) {
             e.stopPropagation();
             this.selections = [];

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

@@ -142,6 +142,7 @@ export default {
 .tnxbsv-dialog {
     height: fit-content;
     margin-bottom: 0;
+    max-width: 100%;
 }
 
 .tnxbsv-dialog.modal-dialog-scrollable .modal-content {

package/src/bootstrap-vue/enum-select/EnumSelect.vue

@@ -7,7 +7,6 @@
         :default-value="defaultValue"
         :empty="empty"
         :empty-value="emptyValue"
-        :placeholder="placeholder"
         :disabled="disabled"
         :filterable="filterable"
         :theme="theme"
@@ -39,9 +38,8 @@ export default {
         },
         emptyValue: {
             type: [String, Number, Boolean, Array],
-            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+            default: null,
         },
-        placeholder: String,
         disabled: Boolean,
         tagClick: Function,
         change: Function,

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

@@ -1,5 +1,5 @@
 <template>
-    <BForm :id="id" class="tnxbsv-form" :class="{initializing: initializing}">
+    <BForm :id="id" class="tnxbsv-form" :class="{initializing: initializing, 'form-inline': inline}">
         <slot></slot>
     </BForm>
 </template>
@@ -132,6 +132,9 @@ export default {
             }
         },
         updateLabelWidth() {
+            if (this.inline) {
+                return;
+            }
             let maxWidth = 0;
             let groupElements = this.$el.querySelectorAll('.b-form-group');
             for (let groupElement of groupElements) {

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

@@ -2,7 +2,7 @@
     <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>
+                <label class="form-label" :style="labelStyle">{{ label }}</label>
             </slot>
         </div>
         <div class="tnxbsv-form-group__content-wrapper">
@@ -16,6 +16,7 @@ export default {
     name: 'TnxbsvFormGroup',
     props: {
         label: String,
+        labelWidth: [String, Number],
         prop: String,
     },
     data() {
@@ -23,6 +24,26 @@ export default {
             model: {},
         };
     },
+    computed: {
+        labelStyle() {
+            let style = {};
+            if (this.labelWidth) {
+                let width;
+                if (typeof this.labelWidth === 'string') {
+                    // 如果是纯数字内容，则附加px单位
+                    if (/^\d+$/.test(this.labelWidth)) {
+                        width = this.labelWidth + 'px';
+                    } else {
+                        width = this.labelWidth;
+                    }
+                } else {
+                    width = this.labelWidth + 'px';
+                }
+                style.width = width;
+            }
+            return style;
+        },
+    },
     methods: {}
 }
 </script>

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

@@ -0,0 +1,41 @@
+<template>
+    <TnxbsvForm class="tnxbsv-query-form" :model="params" inline>
+        <slot></slot>
+        <slot name="actions">
+            <div class="tnxbsv-query-form-actions">
+                <TnxbsvButton variant="outline-primary" icon="bi bi-search" @click="query" v-if="query">
+                    {{ queryText }}
+                </TnxbsvButton>
+            </div>
+        </slot>
+    </TnxbsvForm>
+</template>
+
+<script>
+import TnxbsvForm from '../form/Form.vue';
+import TnxbsvButton from '../button/Button.vue';
+
+export default {
+    name: 'TnxbsvQueryForm',
+    components: {TnxbsvForm, TnxbsvButton},
+    props: {
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
+        query: Function,
+        queryText: {
+            type: String,
+            default: '查询',
+        },
+    },
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -13,7 +13,7 @@
         :variant="theme"
         :size="size"
         v-else-if="selector==='dropdown'">
-        <BDropdownItem :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
+        <BDropdownItem class="empty-item" :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
             <span>{{ emptyText || '&nbsp;' }}</span>
         </BDropdownItem>
         <template v-if="items">
@@ -33,6 +33,7 @@
         </BDropdownItem>
     </BDropdown>
     <BFormSelect class="tnxbsv-select"
+        :class="{'is-empty': model === emptyValue}"
         v-model="model"
         :key="groupKey"
         :variant="theme"
@@ -40,13 +41,9 @@
         :value-field="valueName"
         :text-field="textName"
         :size="size"
-        :required="!empty"
         v-else-if="items">
-        <template #default>
-            {{ currentText || placeholder }}
-        </template>
         <template #first v-if="empty">
-            <BFormSelectOption :value="emptyValue">{{ emptyText || '&nbsp;' }}</BFormSelectOption>
+            <BFormSelectOption class="empty-item" :value="emptyValue">{{ emptyText || '&nbsp;' }}</BFormSelectOption>
         </template>
         <template #option="{value, text}">
             <slot name="option" :item="getItem(value)" v-if="$slots.option"></slot>
@@ -105,10 +102,9 @@ export default {
         },
         emptyValue: {
             type: [String, Number, Boolean, Array],
-            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+            default: null,
         },
         emptyClass: String,
-        placeholder: String,
         disabled: Boolean,
         tagClick: Function, // 点击一个标签选项时调用，如果返回false，则选项不会被选中
         change: Function, // 选中值变化后的事件处理函数，比change事件传递更多参数数据
@@ -358,6 +354,15 @@ export default {
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
 
+select.tnxbsv-select.is-empty,
+.tnxbsv-select .empty-item {
+    color: var(--bs-tertiary-color);
+}
+
+select.tnxbsv-select.is-empty option:not(.empty-item) {
+    color: var(--bs-body-color);
+}
+
 .tnxbsv-radio-group.btn-group > .btn {
     flex: none;
     --bs-btn-padding-x: 1rem;

package/src/bootstrap-vue/tnxbsv.css

@@ -18,22 +18,17 @@
 .form-inline {
     display: flex;
     flex-wrap: wrap;
-    align-items: center;
 }
 
-.form-inline-group {
+.form-inline .b-form-group {
     display: flex;
     flex-wrap: nowrap;
     height: fit-content;
+    margin-right: 1.5rem;
     margin-bottom: 1rem;
     width: fit-content;
 }
 
-.form-inline-group .col-form-label {
-    white-space: nowrap;
-    margin-right: 1rem;
-}
-
 .badge {
     border: 1px solid transparent;
 }
@@ -70,3 +65,12 @@
 .form-check > * {
     cursor: pointer;
 }
+
+.tnxbsv-dialog-confirm {
+    display: flex;
+}
+
+.tnxbsv-dialog-confirm i {
+    color: var(--bs-secondary-color);
+    margin-right: 0.5rem;
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -15,6 +15,7 @@ import FormGroup from './form/FormGroup.vue';
 import LoadingIcon from './loading-icon/LoadingIcon.vue';
 import LoadingOverlay from './loading-overlay/LoadingOverlay.vue';
 import Paged from './paged/Paged.vue';
+import QueryForm from './query-form/QueryForm.vue';
 import QueryTable from './query-table/QueryTable.vue';
 import RegionCascader from './region-cascader/RegionCascader.vue';
 import Select from './select/Select.vue';
@@ -33,6 +34,7 @@ export default build('tnxbsv', () => {
         FormGroup,
         LoadingIcon,
         Paged,
+        QueryForm,
         QueryTable,
         RegionCascader,
         Select,
@@ -75,6 +77,17 @@ export default build('tnxbsv', () => {
             this.hideLoading();
             this.removeToast();
         },
+        confirm(message, title, callback, options) {
+            if (typeof title === 'function') {
+                options = callback;
+                callback = title;
+                title = '确认';
+            }
+            let buttons = tnxvue.getDefaultDialogButtons('confirm', callback);
+            message =
+                `<div class="tnxbsv-dialog-confirm"><i class="bi bi-question-circle-fill"></i><div>${message}</div></div>`;
+            return this.dialog(message, title, buttons, options);
+        },
         toast(message, timeout, callback, options = {}) {
             if (typeof timeout === 'function') {
                 options = callback || {};