@truenewx/tnxvue3 3.0.5 → 3.0.6

package/src/bootstrap-vue/region-cascader/RegionCascader.vue

@@ -0,0 +1,119 @@
+<template>
+    <TnxbsvCascader v-model="model"
+        :options="region.subs"
+        :props="{
+            value: 'code',
+            label: 'caption',
+            children: 'subs',
+        }"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :clearable="empty"
+        :parent-selectable="parentSelectable"
+    />
+</template>
+
+<script>
+import TnxbsvCascader from '../cascader/Cascader.vue';
+
+export default {
+    name: 'TnxbsvRegionCascader',
+    components: {TnxbsvCascader},
+    props: {
+        modelValue: String,
+        scope: {
+            type: String,
+            default: () => 'CN',
+        },
+        maxLevel: {
+            type: [Number, String],
+            default: 3,
+        },
+        minLevel: {
+            type: [Number, String],
+            default: 3,
+        },
+        empty: {
+            type: Boolean,
+            default: false,
+        },
+        placeholder: String,
+        disabled: Boolean,
+        change: Function, // 选中值变化后的事件处理函数，由于比element的change事件传递更多参数，所以以prop的形式指定，以尽量节省性能
+        app: {
+            type: String,
+            default: () => window.tnx.componentDefaultApp,
+        },
+        parentSelectable: Boolean,
+    },
+    data() {
+        return {
+            model: this.modelValue,
+            region: {},
+        };
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+            this.triggerChange(value);
+        },
+        modelValue() {
+            this.model = this.getModel();
+        }
+    },
+    mounted() {
+        window.tnx.app.rpc.loadRegion(this.scope, parseInt(this.maxLevel), region => {
+            this.region = region;
+            this.model = this.getModel();
+        }, {
+            app: this.app,
+        });
+    },
+    methods: {
+        triggerChange(value) {
+            if (this.change) {
+                let item = this.getItem(this.region.subs, value);
+                this.change(item);
+            }
+        },
+        getItem(items, value) {
+            if (items && value !== undefined) {
+                for (let item of items) {
+                    if (item.code === value) {
+                        return item;
+                    }
+                    let sub = this.getItem(item.subs, value);
+                    if (sub) {
+                        return sub;
+                    }
+                }
+            }
+            return undefined;
+        },
+        getModel() {
+            if (this.region) {
+                let items = this.region.subs;
+                if (items && items.length) {
+                    let item = this.getItem(items, this.modelValue);
+                    if (item) {
+                        return item.code;
+                    } else { // 如果当前值找不到匹配的选项，则需要考虑是设置为空还是默认选项
+                        if (!this.empty) { // 如果不能为空，则默认选中第一个叶子节点选项
+                            let firstItem = items[0];
+                            while (firstItem.subs && firstItem.subs.length) {
+                                firstItem = firstItem.subs[0];
+                            }
+                            return firstItem ? firstItem.code : null;
+                        }
+                    }
+                }
+            }
+            return null;
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -1,10 +1,18 @@
 <template>
+    <BFormRadioGroup class="tnxbsv-select tnxbsv-radio-group"
+        v-model="model"
+        :options="items"
+        :value-field="valueName"
+        :text-field="textName"
+        :buttons="selector === 'radio-button'"
+        button-variant="outline-primary"
+        v-if="items && (selector==='radio' || selector === 'radio-button')"/>
     <BDropdown class="tnxbsv-select tnxbsv-dropdown"
         :key="groupKey"
         :text="currentText"
         :variant="theme"
         :size="size"
-        v-if="selector==='dropdown'">
+        v-else-if="selector==='dropdown'">
         <BDropdownItem :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
             <span>{{ emptyText || '&nbsp;' }}</span>
         </BDropdownItem>
@@ -21,7 +29,7 @@
             </BDropdownItem>
         </template>
         <BDropdownItem v-else>
-            <Loading/>
+            <LoadingIcon/>
         </BDropdownItem>
     </BDropdown>
     <BFormSelect class="tnxbsv-select"
@@ -49,20 +57,20 @@
         </template>
     </BFormSelect>
     <div class="flex-v-center" v-else>
-        <Loading/>
+        <LoadingIcon/>
     </div>
 </template>
 
 <script>
-import {BDropdown, BDropdownItem, BFormSelect, BFormSelectOption} from 'bootstrap-vue-next';
-import Loading from '../loading/Loading.vue';
+import {BFormRadioGroup, BDropdown, BDropdownItem, BFormSelect, BFormSelectOption} from 'bootstrap-vue-next';
+import LoadingIcon from '../loading-icon/LoadingIcon.vue';
 
 export const isMultiSelector = function (selector) {
     return selector === 'checkbox' || selector === 'tags' || selector === 'multi-select' || selector === 'texts';
 }
 export default {
     name: 'TnxbsvSelect',
-    components: {BDropdown, BDropdownItem, BFormSelect, BFormSelectOption, Loading},
+    components: {BFormRadioGroup, BDropdown, BDropdownItem, BFormSelect, BFormSelectOption, LoadingIcon},
     props: {
         id: [Number, String],
         modelValue: {
@@ -349,4 +357,9 @@ export default {
 .tnxbsv-select[variant="danger"]:focus {
     box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
 }
+
+.tnxbsv-radio-group.btn-group > .btn {
+    flex: none;
+    --bs-btn-padding-x: 1rem;
+}
 </style>

package/src/bootstrap-vue/tags-input/TagsInput.vue

@@ -0,0 +1,64 @@
+<template>
+    <BFormTags class="tnxbsv-tags-input"
+        v-model="model"
+        :placeholder="placeholder"
+        :separator="separator"
+        :tag-variant="tagVariant || 'light'"
+        add-button-text="+"
+        :duplicate-tag-text="duplicateTagText"
+        remove-on-delete
+    />
+</template>
+
+<script>
+import {BFormTags} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvTagsInput',
+    components: {BFormTags},
+    props: {
+        modelValue: {
+            type: Array,
+            default: () => [],
+        },
+        placeholder: {
+            type: String,
+            default: '输入后回车以添加',
+        },
+        separator: {
+            type: String,
+            default: ','
+        },
+        tagVariant: String,
+        duplicateTagText: {
+            type: String,
+            default: '标签重复',
+        },
+    },
+    data() {
+        return {
+            model: this.modelValue,
+        };
+    },
+    watch: {
+        modelValue() {
+            this.model = this.modelValue;
+        },
+        model() {
+            this.$emit('update:modelValue', this.model);
+        },
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbsv-tags-input .b-form-tag + .b-from-tags-field > div {
+    padding-left: 0.25rem;
+}
+
+.tnxbsv-tags-input .btn.b-form-tags-button {
+    --bs-btn-padding-x: 0.5rem;
+    margin-left: 0.5rem;
+}
+</style>

package/src/bootstrap-vue/tnxbsv.css

@@ -1,3 +1,15 @@
+::placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
+::-webkit-input-placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
+::-moz-placeholder {
+    color: var(--bs-tertiary-color) !important;
+}
+
 .link {
     cursor: pointer;
     color: var(--bs-link-color);
@@ -34,3 +46,27 @@
 .accordion-body {
     padding: 1rem;
 }
+
+.toast {
+    width: fit-content;
+    min-width: 5rem;
+    text-align: center;
+}
+
+.toast::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.3);
+}
+
+.form-check {
+    margin-top: 0.125rem;
+}
+
+.form-check > * {
+    cursor: pointer;
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -7,21 +7,37 @@ import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import './tnxbsv.css';
 
 import Button from './button/Button.vue';
+import Cascader from './cascader/Cascader.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 LoadingIcon from './loading-icon/LoadingIcon.vue';
+import LoadingOverlay from './loading-overlay/LoadingOverlay.vue';
 import Paged from './paged/Paged.vue';
 import QueryTable from './query-table/QueryTable.vue';
+import RegionCascader from './region-cascader/RegionCascader.vue';
 import Select from './select/Select.vue';
 import SubmitForm from './submit-form/SubmitForm.vue';
+import TagsInput from './tags-input/TagsInput.vue';
 
 export const build = tnxvue.build;
 
 export default build('tnxbsv', () => {
     const components = Object.assign({}, tnxvue.components, {
-        Button, Dialog, EnumSelect, Form, FormGroup, Loading, Paged, QueryTable, Select, SubmitForm,
+        Button,
+        Cascader,
+        Dialog,
+        EnumSelect,
+        Form,
+        FormGroup,
+        LoadingIcon,
+        Paged,
+        QueryTable,
+        RegionCascader,
+        Select,
+        SubmitForm,
+        TagsInput,
     });
 
     const tnxbsv = Object.assign({}, tnxjq, tnxvue, {
@@ -55,6 +71,98 @@ export default build('tnxbsv', () => {
             this._dialogs.push(dialog);
             return dialogVm;
         },
+        _closeMessage() {
+            this.hideLoading();
+            this.removeToast();
+        },
+        toast(message, timeout, callback, options = {}) {
+            if (typeof timeout === 'function') {
+                options = callback || {};
+                callback = timeout;
+                timeout = undefined;
+            }
+
+            this._closeMessage();
+
+            const div = document.createElement('div');
+            document.body.appendChild(div);
+
+            const Vue = window.tnx.libs.Vue;
+            const ToastComponent = {
+                components: {
+                    BToast: BootstrapVue.BToast
+                },
+                setup() {
+                    const visible = Vue.ref(true);
+                    Vue.onMounted(() => {
+                        setTimeout(() => {
+                            visible.value = false;
+                            // 延迟移除组件，确保动画效果完成
+                            setTimeout(() => {
+                                window.tnx.toastInstance?.unmount();
+                                try {
+                                    document.body.removeChild(div);
+                                } catch (e) {
+                                    // 忽略异常
+                                }
+                            }, 500);
+                        }, timeout || 1500);
+                    });
+                    return {visible};
+                },
+                render() {
+                    return Vue.h(BootstrapVue.BToast, {
+                        modelValue: this.visible,
+                        variant: options.type || 'success',
+                        static: true,
+                        noCloseButton: true,
+                        class: 'position-fixed',
+                        style: {
+                            top: '50%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            zIndex: window.tnx.util.dom.minTopZIndex(),
+                        }
+                    }, () => message);
+                }
+            };
+
+            const instance = window.tnx.createVueInstance(ToastComponent);
+            instance.mount(div);
+            window.tnx.toastInstance = instance;
+        },
+        removeToast() {
+            if (window.tnx.toastInstance) {
+                window.tnx.toastInstance.unmount();
+                try {
+                    document.body.removeChild(window.tnx.toastInstance._container);
+                } catch (e) {
+                    // 忽略异常
+                }
+                window.tnx.toastInstance = null;
+            }
+        },
+        showLoading(message = '', options) {
+            this._closeMessage();
+
+            let div = document.createElement('div');
+            document.body.appendChild(div);
+            let instance = window.tnx.createVueInstance(LoadingOverlay, null, {message});
+            let component = instance.mount(div);
+            window.tnx.loadingInstance = instance;
+            window.tnx.app.eventBus.emit('tnx.showLoading', options);
+            return component;
+        },
+        hideLoading() {
+            if (window.tnx.loadingInstance) {
+                window.tnx.loadingInstance.unmount();
+                document.body.removeChild(window.tnx.loadingInstance._container);
+                window.tnx.loadingInstance = null;
+            }
+        },
+        closeLoading() {
+            this.hideLoading();
+        },
     });
 
     tnxbsv.install = tnxbsv.util.function.around(tnxbsv.install, function (install, vm) {

package/src/element-plus/tnxel.js

@@ -218,9 +218,8 @@ export default build('tnxel', () => {
             this.closeLoading();
         },
         _handleZIndex(selector) {
-            const util = this.util;
             setTimeout(function () {
-                const topZIndex = util.dom.minTopZIndex(2);
+                const topZIndex = window.tnx.util.dom.minTopZIndex(2);
                 if (selector.endsWith(':last')) {
                     selector = selector.substring(0, selector.length - ':last'.length);
                 }
@@ -355,7 +354,7 @@ export default build('tnxel', () => {
             try {
                 window.tnx.loadingInstance = ElLoading.service(options);
                 this._handleZIndex('.el-loading-mask');
-                this.app.eventBus.emit('tnx.showLoading', options);
+                window.tnx.app.eventBus.emit('tnx.showLoading', options);
             } catch (e) {
                 window.tnx.loadingInstance = null;
                 console.error(e);

package/src/tnxvue.js

@@ -2,8 +2,8 @@
 /**
  * 基于Vue 3的扩展支持
  */
-// import tnxcore from '@truenewx/tnxcore';
-import tnxcore from '../../core/src/tnxcore';
+import tnxcore from '@truenewx/tnxcore';
+// import tnxcore from '../../core/src/tnxcore';
 import validator from './tnxvue-validator';
 import createRouter from './tnxvue-router';
 import Text from './text/Text.vue';