@truenewx/tnxvue3 3.4.0 → 3.4.2

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

@@ -1,73 +1,73 @@
-<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" :style="labelStyle">{{ label }}</label>
-            </slot>
-        </div>
-        <div class="tnxbsv-form-group__content-wrapper">
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'TnxbsvFormGroup',
-    props: {
-        label: String,
-        labelWidth: [String, Number],
-        prop: String,
-    },
-    data() {
-        return {
-            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>
-
-<style>
-.tnxbsv-form-group {
-    display: flex;
-}
-
-.tnxbsv-form-group__label-wrapper {
-    padding-top: 0.375rem;
-}
-
-.tnxbsv-form-group__content-wrapper {
-    flex-grow: 1;
-    min-height: 2.375rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.inline-feedback .tnxbsv-form-group__content-wrapper {
-    flex-direction: row;
-    align-items: center;
-    justify-content: unset;
-}
-</style>
+<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" :style="labelStyle">{{ label }}</label>
+            </slot>
+        </div>
+        <div class="tnxbsv-form-group__content-wrapper">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TnxbsvFormGroup',
+    props: {
+        label: String,
+        labelWidth: [String, Number],
+        prop: String,
+    },
+    data() {
+        return {
+            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>
+
+<style>
+.tnxbsv-form-group {
+    display: flex;
+}
+
+.tnxbsv-form-group__label-wrapper {
+    padding-top: 0.375rem;
+}
+
+.tnxbsv-form-group__content-wrapper {
+    flex-grow: 1;
+    min-height: 2.375rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.inline-feedback .tnxbsv-form-group__content-wrapper {
+    flex-direction: row;
+    align-items: center;
+    justify-content: unset;
+}
+</style>

package/src/bootstrap-vue/loading-icon/LoadingIcon.vue

@@ -1,46 +1,46 @@
-<template>
-    <span class="tnxbsv-loading-icon spinner-border" :class="extraClass" role="status">
-        <span class="visually-hidden">{{ text }}</span>
-    </span>
-</template>
-
-<script>
-
-export default {
-    name: 'TnxbsvLoadingIcon',
-    props: {
-        small: {
-            type: Boolean,
-            default: true,
-        },
-        theme: {
-            type: String,
-            default: 'secondary',
-        },
-        text: {
-            type: String,
-            default: '加载中...',
-        }
-    },
-    data() {
-        return {};
-    },
-    computed: {
-        extraClass() {
-            let extraClass = '';
-            if (this.theme && this.theme !== 'inherit') {
-                extraClass += ' text-' + this.theme;
-            }
-            if (this.small) {
-                extraClass += ' spinner-border-sm';
-            }
-            return extraClass.trim();
-        },
-    },
-    methods: {}
-}
-</script>
-
-<style>
-
-</style>
+<template>
+    <span class="tnxbsv-loading-icon spinner-border" :class="extraClass" role="status">
+        <span class="visually-hidden">{{ text }}</span>
+    </span>
+</template>
+
+<script>
+
+export default {
+    name: 'TnxbsvLoadingIcon',
+    props: {
+        small: {
+            type: Boolean,
+            default: true,
+        },
+        theme: {
+            type: String,
+            default: 'secondary',
+        },
+        text: {
+            type: String,
+            default: '加载中...',
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        extraClass() {
+            let extraClass = '';
+            if (this.theme && this.theme !== 'inherit') {
+                extraClass += ' text-' + this.theme;
+            }
+            if (this.small) {
+                extraClass += ' spinner-border-sm';
+            }
+            return extraClass.trim();
+        },
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

package/src/bootstrap-vue/paged/Paged.vue

@@ -1,119 +1,119 @@
-<template>
-    <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="value.total"
-            :per-page="value.pageSize"
-            :aria-controls="ariaControls"
-            :aria-label="ariaLabel"
-        />
-    </div>
-</template>
-
-<script>
-import {BPagination} from 'bootstrap-vue-next';
-import Select from '../select/Select.vue';
-
-export default {
-    name: 'TnxbsvPaged',
-    components: {BPagination, Select},
-    props: {
-        value: Object,
-        pageSizeChangeable: Boolean,
-        showPageSize: {
-            type: Boolean,
-            default: true,
-        },
-        showTotal: {
-            type: Boolean,
-            default: true,
-        },
-        align: {
-            type: String,
-            default: 'end', // start | center | end
-        },
-        ariaControls: String,
-        ariaLabel: String,
-        query: Function,
-    },
-    data() {
-        return {
-            pageSize: this.value?.pageSize || 20,
-            pageNo: this.value?.pageNo || 1,
-        };
-    },
-    computed: {
-        pageSizeItems() {
-            return [{
-                value: 10,
-                text: '10',
-            }, {
-                value: 20,
-                text: '20',
-            }, {
-                value: 50,
-                text: '50',
-            }];
-        },
-    },
-    watch: {
-        pageNo() {
-            this.toQuery();
-        },
-        pageSize() {
-            this.toQuery();
-        },
-    },
-    methods: {
-        toQuery() {
-            if (this.query) {
-                this.query({
-                    pageSize: this.pageSize,
-                    pageNo: this.pageNo,
-                });
-            }
-        },
-    }
-}
-</script>
-
-<style>
-.tnxbsv-paged {
-    width: 100%;
-    display: flex;
-    align-items: center;
-}
-
-.tnxbsv-paged .paged-text {
-    display: flex;
-    align-items: center;
-    color: var(--bs-secondary-color);
-    white-space: nowrap;
-}
-
-.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-paged ul {
-    margin-bottom: 0;
-}
-</style>
+<template>
+    <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="value.total"
+            :per-page="value.pageSize"
+            :aria-controls="ariaControls"
+            :aria-label="ariaLabel"
+        />
+    </div>
+</template>
+
+<script>
+import {BPagination} from 'bootstrap-vue-next';
+import Select from '../select/Select.vue';
+
+export default {
+    name: 'TnxbsvPaged',
+    components: {BPagination, Select},
+    props: {
+        value: Object,
+        pageSizeChangeable: Boolean,
+        showPageSize: {
+            type: Boolean,
+            default: true,
+        },
+        showTotal: {
+            type: Boolean,
+            default: true,
+        },
+        align: {
+            type: String,
+            default: 'end', // start | center | end
+        },
+        ariaControls: String,
+        ariaLabel: String,
+        query: Function,
+    },
+    data() {
+        return {
+            pageSize: this.value?.pageSize || 20,
+            pageNo: this.value?.pageNo || 1,
+        };
+    },
+    computed: {
+        pageSizeItems() {
+            return [{
+                value: 10,
+                text: '10',
+            }, {
+                value: 20,
+                text: '20',
+            }, {
+                value: 50,
+                text: '50',
+            }];
+        },
+    },
+    watch: {
+        pageNo() {
+            this.toQuery();
+        },
+        pageSize() {
+            this.toQuery();
+        },
+    },
+    methods: {
+        toQuery() {
+            if (this.query) {
+                this.query({
+                    pageSize: this.pageSize,
+                    pageNo: this.pageNo,
+                });
+            }
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-paged {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.tnxbsv-paged .paged-text {
+    display: flex;
+    align-items: center;
+    color: var(--bs-secondary-color);
+    white-space: nowrap;
+}
+
+.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-paged ul {
+    margin-bottom: 0;
+}
+</style>

package/src/bootstrap-vue/progress/Progress.vue

@@ -1,58 +1,58 @@
-<template>
-    <div class="tnxbs-progress">
-        <BProgress :variant="type" :key="type" :value="value" :max="max" :show-value="showValue">
-            <div class="progress-bar" :style="{width: percent}">
-                {{ showProgress ? percent : '' }}
-            </div>
-        </BProgress>
-        <span class="tnxbs-progress-value" v-if="showValue">{{ value }}/{{ max }}</span>
-    </div>
-</template>
-
-<script>
-import {BProgress} from 'bootstrap-vue-next';
-
-export default {
-    name: 'TnxbsvProgress',
-    components: {BProgress},
-    props: {
-        type: String,
-        value: {
-            type: Number,
-            default: 0
-        },
-        max: Number,
-        precision: {
-            type: Number,
-            default: 0,
-        },
-        showValue: Boolean,
-        showProgress: Boolean,
-    },
-    data() {
-        return {};
-    },
-    computed: {
-        percent() {
-            return (this.value / this.max).toPercent(this.precision);
-        }
-    },
-    methods: {}
-}
-</script>
-
-<style>
-.tnxbs-progress {
-    display: flex;
-    align-items: center;
-}
-
-.tnxbs-progress .progress {
-    flex-grow: 1;
-}
-
-.tnxbs-progress .tnxbs-progress-value {
-    margin-left: 0.5rem;
-    color: var(--bs-body-color);
-}
-</style>
+<template>
+    <div class="tnxbs-progress">
+        <BProgress :variant="type" :key="type" :value="value" :max="max" :show-value="showValue">
+            <div class="progress-bar" :style="{width: percent}">
+                {{ showProgress ? percent : '' }}
+            </div>
+        </BProgress>
+        <span class="tnxbs-progress-value" v-if="showValue">{{ value }}/{{ max }}</span>
+    </div>
+</template>
+
+<script>
+import {BProgress} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvProgress',
+    components: {BProgress},
+    props: {
+        type: String,
+        value: {
+            type: Number,
+            default: 0
+        },
+        max: Number,
+        precision: {
+            type: Number,
+            default: 0,
+        },
+        showValue: Boolean,
+        showProgress: Boolean,
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        percent() {
+            return (this.value / this.max).toPercent(this.precision);
+        }
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxbs-progress {
+    display: flex;
+    align-items: center;
+}
+
+.tnxbs-progress .progress {
+    flex-grow: 1;
+}
+
+.tnxbs-progress .tnxbs-progress-value {
+    margin-left: 0.5rem;
+    color: var(--bs-body-color);
+}
+</style>