@truenewx/tnxvue3 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {
@@ -25,7 +25,7 @@
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.1",
+    "@truenewx/tnxcore": "3.0.3",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
     "mitt": "3.0.1"

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

@@ -1,7 +1,7 @@
 <template>
-    <div class="spinner-border" :class="extraClass" role="status">
+    <span class="spinner-border" :class="extraClass" role="status">
         <span class="visually-hidden">{{ text }}</span>
-    </div>
+    </span>
 </template>
 
 <script>

package/src/bootstrap-vue/{pagination/Pagination.vue → paged/Paged.vue}

@@ -1,16 +1,21 @@
 <template>
-    <div class="tnxbsv-pagination" :class="'justify-content-' + align" v-if="paged">
-        <div class="pagination-text">
-            <span>每页</span>
-            <Select v-model="pageSize" :items="pageSizeItems" v-if="pageSizeChangeable"/>
-            <span class="mx-1" v-else>{{ pageSize }}</span>
-            <span>条，共</span>
-            <span class="mx-1">{{ paged.total }}</span>
-            <span>条</span>
+    <div class="tnxbsv-paged" :class="'justify-content-' + align" v-if="value">
+        <div class="paged-text" v-if="showPageSize || showTotal">
+            <div class="page-size-wrapper" v-if="showPageSize">
+                <span>每页</span>
+                <Select v-model="pageSize" :items="pageSizeItems" v-if="pageSizeChangeable"/>
+                <span class="mx-1" v-else>{{ pageSize }}</span>
+                <span>条</span>
+            </div>
+            <div class="total-wrapper" v-if="showTotal">
+                <span>共</span>
+                <span class="mx-1">{{ value.total }}</span>
+                <span>条</span>
+            </div>
         </div>
         <BPagination v-model="pageNo"
-            :total-rows="paged.total"
-            :per-page="paged.pageSize"
+            :total-rows="value.total"
+            :per-page="value.pageSize"
             :aria-controls="ariaControls"
             :aria-label="ariaLabel"
         />
@@ -22,11 +27,19 @@ import {BPagination} from 'bootstrap-vue-next';
 import Select from '../select/Select.vue';
 
 export default {
-    name: 'TnxbsvPagination',
+    name: 'TnxbsvPaged',
     components: {BPagination, Select},
     props: {
-        paged: Object,
+        value: Object,
         pageSizeChangeable: Boolean,
+        showPageSize: {
+            type: Boolean,
+            default: true,
+        },
+        showTotal: {
+            type: Boolean,
+            default: true,
+        },
         align: {
             type: String,
             default: 'end', // start | center | end
@@ -37,8 +50,8 @@ export default {
     },
     data() {
         return {
-            pageSize: this.paged?.pageSize || 20,
-            pageNo: this.paged?.pageNo || 1,
+            pageSize: this.value?.pageSize || 20,
+            pageNo: this.value?.pageNo || 1,
         };
     },
     computed: {
@@ -77,26 +90,30 @@ export default {
 </script>
 
 <style>
-.tnxbsv-pagination {
+.tnxbsv-paged {
     width: 100%;
     display: flex;
     align-items: center;
 }
 
-.tnxbsv-pagination .pagination-text {
+.tnxbsv-paged .paged-text {
     display: flex;
     align-items: center;
     color: var(--bs-secondary-color);
-    margin: 0 0.5rem;
     white-space: nowrap;
 }
 
-.tnxbsv-pagination .form-select {
+.tnxbsv-paged .paged-text .page-size-wrapper,
+.tnxbsv-paged .paged-text .total-wrapper {
+    margin-right: 0.5rem;
+}
+
+.tnxbsv-paged .form-select {
     width: 4.5rem;
     margin: 0 0.5rem;
 }
 
-.tnxbsv-pagination ul {
+.tnxbsv-paged ul {
     margin-bottom: 0;
 }
 </style>

package/src/bootstrap-vue/query-table/QueryTable.vue

@@ -11,7 +11,7 @@
         <template #custom-foot>
             <tr>
                 <td colspan="100%">
-                    <Pagination :paged="result.paged"
+                    <Paged :value="result.paged"
                         :query="query"
                         :page-size-changeable="pageSizeChangeable"
                         :aria-controls="id"
@@ -24,11 +24,11 @@
 
 <script>
 import {BTable} from 'bootstrap-vue-next';
-import Pagination from '../pagination/Pagination.vue';
+import Paged from '../paged/Paged.vue';
 
 export default {
     name: 'TnxbsvQueryTable',
-    components: {BTable, Pagination},
+    components: {BTable, Paged},
     props: {
         id: {
             type: String,

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

@@ -20,7 +20,9 @@
                 </template>
             </BDropdownItem>
         </template>
-        <Loading v-else/>
+        <BDropdownItem v-else>
+            <Loading/>
+        </BDropdownItem>
     </BDropdown>
     <BFormSelect class="tnxbsv-select"
         v-model="model"
@@ -46,7 +48,9 @@
             </template>
         </template>
     </BFormSelect>
-    <Loading v-else/>
+    <div class="flex-v-center" v-else>
+        <Loading/>
+    </div>
 </template>
 
 <script>

package/src/bootstrap-vue/tnxbsv.js

@@ -8,7 +8,7 @@ import './tnxbsv.css';
 import Button from './button/Button.vue';
 import EnumSelect from './enum-select/EnumSelect.vue';
 import Loading from './loading/Loading.vue';
-import Pagination from './pagination/Pagination.vue';
+import Paged from './paged/Paged.vue';
 import QueryTable from './query-table/QueryTable.vue';
 import Select from './select/Select.vue';
 
@@ -16,7 +16,7 @@ export const build = tnxvue.build;
 
 export default build('tnxbsv', () => {
     const components = Object.assign({}, tnxvue.components, {
-        Button, EnumSelect, Loading, Pagination, QueryTable, Select,
+        Button, EnumSelect, Loading, Paged, QueryTable, Select,
     });
 
     const tnxbsv = Object.assign({}, tnxvue, {

package/src/element-plus/paged/Paged.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="tnxel-pagination-container"
+    <div class="tnxel-paged-wrapper"
         :class="{'justify-content-center': align === 'center', 'justify-content-end': align === 'right'}" v-if="model">
         <slot :paged="value" :change="change" :background="background">
             <el-pagination :layout="layout" :background="background"
@@ -79,16 +79,16 @@ export default {
 </script>
 
 <style>
-.tnxel-pagination-container {
+.tnxel-paged-wrapper {
     display: flex;
     padding: 0.5rem 0;
 }
 
-.tnxel-pagination-container .el-pagination {
+.tnxel-paged-wrapper .el-pagination {
     padding: 0;
 }
 
-.tnxel-pagination-container .el-pagination__page-size {
+.tnxel-paged-wrapper .el-pagination__page-size {
     color: var(--el-text-color-regular);
     margin-right: 1rem;
 }

package/src/tnxvue.js

@@ -3,6 +3,7 @@
  * 基于Vue 3的扩展支持
  */
 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';