@truenewx/tnxvue3 3.0.0 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "互联网技术解决方案：Vue3扩展支持",
   "private": false,
   "publishConfig": {
@@ -20,11 +20,12 @@
   },
   "peerDependencies": {
     "element-plus": "~2.8.0",
+    "bootstrap-vue-next": "~0.26.0",
     "vue": "~3.5.0",
     "vue-router": "~4.4.0"
   },
   "dependencies": {
-    "@truenewx/tnxcore": "3.0.0",
+    "@truenewx/tnxcore": "3.0.2",
     "@element-plus/icons-vue": "2.3.1",
     "async-validator": "4.2.5",
     "mitt": "3.0.1"

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

@@ -0,0 +1,26 @@
+<template>
+    <BButton>
+        <i :class="icon" v-if="icon"></i>
+        <span><slot></slot></span>
+    </BButton>
+</template>
+
+<script>
+import {BButton} from 'bootstrap-vue-next';
+
+export default {
+    name: 'TnxbsvButton',
+    components: {BButton},
+    props: {
+        icon: String,
+    },
+    data() {
+        return {};
+    },
+    methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,133 @@
+<template>
+    <Select v-model="model"
+        :id="id"
+        :selector="selector"
+        :items="items"
+        value-name="key" text-name="caption" index-name="searchIndex"
+        :default-value="defaultValue"
+        :empty="empty"
+        :empty-value="emptyValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :filterable="filterable"
+        :theme="theme"
+        :size="size"
+        :tag-click="tagClick"
+        :change="change"
+    />
+</template>
+
+<script>
+import Select, {isMultiSelector} from '../select/Select.vue';
+
+export default {
+    name: 'TnxbsvEnumSelect',
+    components: {Select},
+    props: {
+        id: [Number, String],
+        modelValue: [String, Number, Boolean, Array],
+        selector: String,
+        type: {
+            type: String,
+            required: true,
+        },
+        subtype: String,
+        defaultValue: String,
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Number, Boolean, Array],
+            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+        },
+        placeholder: String,
+        disabled: Boolean,
+        tagClick: Function,
+        change: Function,
+        grouped: {
+            type: Boolean,
+            default: false,
+        },
+        filterable: Boolean,
+        theme: String,
+        size: String,
+        app: {
+            type: String,
+            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
+        },
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            model: this.modelValue,
+            items: null,
+        };
+    },
+    watch: {
+        model(value) {
+            this.$emit('update:modelValue', value);
+        },
+        modelValue() {
+            this.initModel();
+        },
+        type() {
+            this.init();
+        },
+        subtype() {
+            this.init();
+        }
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            if (typeof this.type === 'string') {
+                if (this.type.toLowerCase() === 'boolean') {
+                    this.items = [{
+                        key: true,
+                        caption: true.toText(),
+                    }, {
+                        key: false,
+                        caption: false.toText(),
+                    }];
+                    this.initModel();
+                } else {
+                    let vm = this;
+                    window.tnx.app.rpc.loadEnumItems(this.type, this.subtype, function (items) {
+                        vm.items = items;
+                        vm.initModel();
+                    }, {
+                        app: this.app,
+                    });
+                }
+            }
+        },
+        initModel() {
+            let oldModel = this.model;
+            this.model = this.modelValue;
+            if (isMultiSelector(this.selector)) {
+                return;
+            }
+            if ((this.model === undefined || this.model === null) && !this.empty && this.items && this.items.length) {
+                let item = this.items[0];
+                this.model = item.key;
+                if (this.model !== oldModel && this.change) {
+                    this.change(item);
+                }
+            }
+        },
+        getText(value) {
+            // 暂不支持分组枚举类型
+            if (this.$refs.select) {
+                return this.$refs.select.getText(value);
+            }
+            return undefined;
+        },
+        disableItem(itemKey, disabled, reverseOther) {
+            this.$refs.select.disableItem(itemKey, disabled, reverseOther);
+        },
+    }
+}
+</script>

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

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

package/src/bootstrap-vue/pagination/Pagination.vue

@@ -0,0 +1,102 @@
+<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>
+        <BPagination v-model="pageNo"
+            :total-rows="paged.total"
+            :per-page="paged.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: 'TnxbsvPagination',
+    components: {BPagination, Select},
+    props: {
+        paged: Object,
+        pageSizeChangeable: Boolean,
+        align: {
+            type: String,
+            default: 'end', // start | center | end
+        },
+        ariaControls: String,
+        ariaLabel: String,
+        query: Function,
+    },
+    data() {
+        return {
+            pageSize: this.paged?.pageSize || 20,
+            pageNo: this.paged?.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-pagination {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.tnxbsv-pagination .pagination-text {
+    display: flex;
+    align-items: center;
+    color: var(--bs-secondary-color);
+    margin: 0 0.5rem;
+    white-space: nowrap;
+}
+
+.tnxbsv-pagination .form-select {
+    width: 4.5rem;
+    margin: 0 0.5rem;
+}
+
+.tnxbsv-pagination ul {
+    margin-bottom: 0;
+}
+</style>

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

@@ -0,0 +1,84 @@
+<template>
+    <BTable class="tnxbsv-query-table"
+        :id="id"
+        :items="result.records || []"
+        :fields="fields"
+        :busy="result.records === null"
+    >
+        <template v-for="(_, slot) of $slots" v-slot:[slot]="scope">
+            <slot :name="slot" v-bind="scope"></slot>
+        </template>
+        <template #custom-foot>
+            <tr>
+                <td colspan="100%">
+                    <Pagination :paged="result.paged"
+                        :query="query"
+                        :page-size-changeable="pageSizeChangeable"
+                        :aria-controls="id"
+                    />
+                </td>
+            </tr>
+        </template>
+    </BTable>
+</template>
+
+<script>
+import {BTable} from 'bootstrap-vue-next';
+import Pagination from '../pagination/Pagination.vue';
+
+export default {
+    name: 'TnxbsvQueryTable',
+    components: {BTable, Pagination},
+    props: {
+        id: {
+            type: String,
+            default: () => {
+                return 'query-table-' + window.tnx.util.string.uuid32();
+            },
+        },
+        url: {
+            type: String,
+            required: true,
+        },
+        params: {
+            type: Object,
+            required: true,
+        },
+        fields: {
+            type: Array,
+            required: true,
+        },
+        init: Boolean,
+        pageSizeChangeable: Boolean,
+    },
+    data() {
+        return {
+            result: {
+                records: null,
+                paged: null,
+            },
+        };
+    },
+    mounted() {
+        if (this.init) {
+            this.query();
+        }
+    },
+    methods: {
+        query(paging) {
+            let params = Object.assign({}, this.params, paging);
+            this.result.records = null;
+            window.tnx.app.rpc.get(this.url, params, result => {
+                this.result = result;
+            });
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-query-table th,
+.tnxbsv-query-table td {
+    vertical-align: middle;
+}
+</style>

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

@@ -0,0 +1,352 @@
+<template>
+    <BDropdown class="tnxbsv-select tnxbsv-dropdown"
+        :key="groupKey"
+        :text="currentText"
+        :variant="theme"
+        :size="size"
+        v-if="selector==='dropdown'">
+        <BDropdownItem :active="isSelected(emptyValue)" @click="select(emptyValue)" v-if="empty">
+            <span>{{ emptyText || '&nbsp;' }}</span>
+        </BDropdownItem>
+        <template v-if="items">
+            <BDropdownItem v-for="(item, index) of items" :key="index"
+                :active="isSelected(item[valueName])"
+                @click="select(item[valueName])"
+            >
+                <slot name="option" :item="item" v-if="$slots.option"></slot>
+                <template v-else>
+                    <i :class="item[iconName]" v-if="item[iconName]"></i>
+                    <span>{{ item[textName] }}</span>
+                </template>
+            </BDropdownItem>
+        </template>
+        <BDropdownItem v-else>
+            <Loading/>
+        </BDropdownItem>
+    </BDropdown>
+    <BFormSelect class="tnxbsv-select"
+        v-model="model"
+        :key="groupKey"
+        :variant="theme"
+        :options="items"
+        :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>
+        </template>
+        <template #option="{value, text}">
+            <slot name="option" :item="getItem(value)" v-if="$slots.option"></slot>
+            <template v-else>
+                <i :class="getItem(value)[iconName]" v-if="getItem(value)[iconName]"></i>
+                <span>{{ text }}</span>
+            </template>
+        </template>
+    </BFormSelect>
+    <div class="flex-v-center" v-else>
+        <Loading/>
+    </div>
+</template>
+
+<script>
+import {BDropdown, BDropdownItem, BFormSelect, BFormSelectOption} from 'bootstrap-vue-next';
+import Loading from '../loading/Loading.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},
+    props: {
+        id: [Number, String],
+        modelValue: {
+            type: [String, Number, Boolean, Array],
+            default: null,
+        },
+        selector: String,
+        items: Array,
+        valueName: {
+            type: String,
+            default: 'value',
+        },
+        textName: {
+            type: String,
+            default: 'text',
+        },
+        indexName: {
+            type: String,
+            default: 'index',
+        },
+        iconName: {
+            type: String,
+            default: 'icon',
+        },
+        defaultValue: {
+            type: [String, Number, Boolean, Array],
+            default: null,
+        },
+        empty: {
+            type: [Boolean, String],
+            default: false,
+        },
+        emptyValue: {
+            type: [String, Number, Boolean, Array],
+            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
+        },
+        emptyClass: String,
+        placeholder: String,
+        disabled: Boolean,
+        tagClick: Function, // 点击一个标签选项时调用，如果返回false，则选项不会被选中
+        change: Function, // 选中值变化后的事件处理函数，比change事件传递更多参数数据
+        filterable: Boolean,
+        theme: {
+            type: String,
+            default: 'primary',
+        },
+        size: String,
+        border: Boolean,
+    },
+    emits: ['update:modelValue', 'change'],
+    data() {
+        let model = this.getModel(this.items);
+        if (model !== this.modelValue) {
+            this.$emit('update:modelValue', model);
+        }
+        return {
+            groupKey: new Date().getTime(),
+            model: model,
+            hiddenValues: [],
+        };
+    },
+    computed: {
+        emptyText() {
+            return typeof this.empty === 'string' ? this.empty : '';
+        },
+        currentText() {
+            let item = this.getItem(this.model);
+            return item ? item[this.textName] : this.emptyText;
+        },
+        modelEqualsModelValue() {
+            if (Array.isArray(this.model) && Array.isArray(this.modelValue)) {
+                return this.model.equals(this.modelValue);
+            } else {
+                return this.model === this.modelValue;
+            }
+        },
+        firstEnabledItem() {
+            for (let item of this.items) {
+                if (!item.disabled) {
+                    return item;
+                }
+            }
+            return undefined;
+        },
+    },
+    watch: {
+        model(newValue, oldValue) {
+            if (!this.modelEqualsModelValue) {
+                this.$emit('update:modelValue', newValue);
+                // 新旧值不同时为空才触发变更事件
+                const util = window.tnx.util;
+                if (util.object.isNotEmpty(newValue) || util.object.isNotEmpty(oldValue)) {
+                    let vm = this;
+                    // 确保变更事件在值变更应用后再触发
+                    this.$nextTick(function () {
+                        vm.triggerChange(newValue);
+                    });
+                }
+            }
+        },
+        modelValue() {
+            this.model = this.getModel(this.items);
+        },
+        items(items) {
+            this.model = this.getModel(items);
+        },
+    },
+    methods: {
+        isMulti() {
+            return isMultiSelector(this.selector);
+        },
+        triggerChange(value) {
+            if (this.change) {
+                let item = undefined;
+                if (this.isMulti()) {
+                    item = [];
+                    if (Array.isArray(value)) {
+                        for (let v of value) {
+                            item.push(this.getItem(v));
+                        }
+                    }
+                } else {
+                    item = this.getItem(value);
+                }
+                this.change(item, this.id);
+            } else {
+                this.$emit('change', value);
+            }
+        },
+        getItem(value) {
+            if (this.empty && value === this.emptyValue) {
+                let item = {};
+                item[this.valueName] = this.emptyValue;
+                item[this.textName] = this.emptyText;
+                return item;
+            }
+            if (value !== undefined && value !== null && this.items) {
+                for (let item of this.items) {
+                    if ((item[this.valueName] + '') === (value + '')) {
+                        return item;
+                    }
+                }
+            }
+            return undefined;
+        },
+        getText(value) {
+            let item = this.getItem(value);
+            return item ? item[this.textName] : undefined;
+        },
+        getModel(items) {
+            const util = window.tnx.util;
+            let model = this.modelValue;
+            if (util.object.isNull(model)) {
+                model = this.defaultValue;
+            }
+            if (this.isMulti()) { // 多选时需确保值为数组
+                if (util.object.isNull(model)) {
+                    return [];
+                }
+                if (!Array.isArray(model)) {
+                    model = [model];
+                }
+                if (items && items.length) {
+                    // 多选时，如果model中有值不在items中，则去掉
+                    for (let i = model.length - 1; i >= 0; i--) {
+                        let item = this.getItem(model[i]);
+                        if (!item) {
+                            model.splice(i, 1);
+                        }
+                    }
+                } else {
+                    model = [];
+                }
+                return model;
+            }
+            if (util.object.isNull(model)) {
+                return null;
+            }
+            if (items && items.length) {
+                let item = this.getItem(model);
+                if (item) {
+                    return item[this.valueName];
+                } else { // 如果当前值找不到匹配的选项，则需要考虑是设置为空还是默认选项
+                    if (!this.empty) { // 如果不能为空，则默认选中第一个可用选项
+                        let firstItem = this.firstEnabledItem;
+                        if (firstItem && firstItem[this.valueName]) {
+                            return firstItem[this.valueName];
+                        }
+                    }
+                }
+            }
+            return model;
+        },
+        filter(keyword) {
+            for (let item of this.items) {
+                let itemValue = item[this.valueName];
+                let hiddenIndex = this.hiddenValues.indexOf(itemValue);
+                if (this.matchesItem(item, keyword)) {
+                    if (hiddenIndex >= 0) { // 匹配且原本已隐藏的，则取消隐藏
+                        this.hiddenValues.splice(hiddenIndex, 1);
+                    }
+                } else {
+                    if (hiddenIndex < 0) { // 不匹配且原本未隐藏的，则进行隐藏
+                        this.hiddenValues.push(itemValue);
+                    }
+                }
+            }
+        },
+        matchesItem(item, keyword) {
+            return !keyword || window.tnx.util.string.matchesForEach(item[this.valueName], keyword)
+                || window.tnx.util.string.matchesForEach(item[this.textName], keyword)
+                || window.tnx.util.string.matchesForEach(item[this.indexName], keyword)
+        },
+        isSelected(value) {
+            if (Array.isArray(this.model)) {
+                return this.model.contains(value);
+            } else {
+                return this.model === value;
+            }
+        },
+        select(value, event) {
+            if (this.tagClick) {
+                let item = this.getItem(value);
+                if (item) {
+                    if (this.tagClick(item) === false) {
+                        return;
+                    }
+                }
+            }
+            if (this.isMulti()) {
+                let index = this.model.indexOf(value);
+                if (index >= 0) {
+                    this.model = this.model.filter(function (e, i) {
+                        return i !== index;
+                    });
+                } else {
+                    this.model = this.model.concat([value]);
+                }
+            } else {
+                this.model = value;
+            }
+            if (event) {
+                event.currentTarget.blur();
+            }
+        },
+        clear() {
+            if (this.isMulti()) {
+                this.model = [];
+            } else {
+                this.model = null;
+            }
+        },
+        disableItem(itemValue, disabled, reverseOther) {
+            let values = Array.isArray(itemValue) ? itemValue : [itemValue];
+            for (let item of this.items) {
+                if (values.contains(item[this.valueName])) {
+                    item.disabled = disabled;
+                    // 如果禁用的选项已被选择，则需从已选择值中移除该选项的值
+                    if (this.isMulti()) {
+                        if (this.model.includes(itemValue)) {
+                            this.model.remove(itemValue);
+                        }
+                    } else {
+                        if (this.model === itemValue) {
+                            this.model = undefined;
+                        }
+                    }
+                } else if (reverseOther) {
+                    item.disabled = !disabled;
+                }
+            }
+            this.groupKey = new Date().getTime();
+        },
+    }
+}
+</script>
+
+<style>
+.tnxbsv-select[variant="danger"] {
+    border-color: var(--bs-danger-border-subtle);
+    color: var(--bs-danger);
+}
+
+.tnxbsv-select[variant="danger"]:focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+</style>

package/src/bootstrap-vue/tnxbsv.css

@@ -0,0 +1,31 @@
+.link {
+    cursor: pointer;
+    color: var(--bs-link-color);
+}
+
+.form-inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.form-inline-group {
+    display: flex;
+    flex-wrap: nowrap;
+    height: fit-content;
+    margin-bottom: 1rem;
+    width: fit-content;
+}
+
+.form-inline-group .col-form-label {
+    white-space: nowrap;
+    margin-right: 1rem;
+}
+
+.badge {
+    border: 1px solid transparent;
+}
+
+.badge.text-bg-light {
+    border-color: var(--bs-border-color);
+}

package/src/bootstrap-vue/tnxbsv.js

@@ -0,0 +1,42 @@
+// tnxbsv.js
+import tnxvue from '../tnxvue.js';
+import * as BootstrapVue from 'bootstrap-vue-next';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
+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 QueryTable from './query-table/QueryTable.vue';
+import Select from './select/Select.vue';
+
+export const build = tnxvue.build;
+
+export default build('tnxbsv', () => {
+    const components = Object.assign({}, tnxvue.components, {
+        Button, EnumSelect, Loading, Pagination, QueryTable, Select,
+    });
+
+    const tnxbsv = Object.assign({}, tnxvue, {
+        components,
+        componentDefaultApp: undefined, // 组件的默认app，从服务端获取数据的组件以此为远程请求的默认app
+        _dialogs: [], // 对话框堆栈
+        dialog(content, title, buttons, options, contentProps) {
+
+        },
+    });
+
+    tnxbsv.libs.BootstrapVue = BootstrapVue;
+
+    tnxbsv.install = tnxbsv.util.function.around(tnxbsv.install, function (install, vm) {
+        install.call(tnxbsv, vm);
+        vm.use(BootstrapVue.createBootstrap());
+    });
+
+    return tnxbsv;
+});
+
+
+

package/src/element-plus/enum-view/EnumView.vue

@@ -1,41 +1,41 @@
-<template>
-    <span v-if="item">{{ item.caption }}</span>
-</template>
-
-<script>
-export default {
-    name: 'TnxelEnumView',
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        subtype: String,
-        itemKey: {
-            type: String,
-            required: true,
-        },
-        app: {
-            type: String,
-            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
-        },
-    },
-    data() {
-        return {
-            item: null,
-        };
-    },
-    mounted() {
-        window.tnx.app.rpc.loadEnumType(this.type, this.subtype, enumType => {
-            this.item = enumType.items.find(item => item.key === this.itemKey);
-        }, {
-            app: this.app,
-        });
-    },
-    methods: {}
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+    <span v-if="item">{{ item.caption }}</span>
+</template>
+
+<script>
+export default {
+    name: 'TnxelEnumView',
+    props: {
+        type: {
+            type: String,
+            required: true,
+        },
+        subtype: String,
+        itemKey: {
+            type: String,
+            required: true,
+        },
+        app: {
+            type: String,
+            default: () => window.tnx.componentDefaultApp, // 设置为方法以延时加载，确保更改的值生效
+        },
+    },
+    data() {
+        return {
+            item: null,
+        };
+    },
+    mounted() {
+        window.tnx.app.rpc.loadEnumType(this.type, this.subtype, enumType => {
+            this.item = enumType.items.find(item => item.key === this.itemKey);
+        }, {
+            app: this.app,
+        });
+    },
+    methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/element-plus/icon/Icon.vue

@@ -26,6 +26,7 @@
         <DocumentCopy v-else-if="value === 'DocumentCopy'"/>
         <Download v-else-if="value === 'Download'"/>
         <Edit v-else-if="value === 'Edit'"/>
+        <EditPen v-else-if="value === 'EditPen'"/>
         <Files v-else-if="value === 'Files'"/>
         <Finished v-else-if="value === 'Finished'"/>
         <Folder v-else-if="value === 'Folder'"/>
@@ -98,6 +99,7 @@ import {
     DocumentCopy,
     Download,
     Edit,
+    EditPen,
     Files,
     Finished,
     Folder,
@@ -169,6 +171,7 @@ const components = {
     DocumentCopy,
     Download,
     Edit,
+    EditPen,
     Files,
     Finished,
     Folder,

package/src/element-plus/input-dropdown/InputDropdown.vue

@@ -1,74 +1,74 @@
-<template>
-    <el-input class="tnxel-input-dropdown"
-        v-model="model"
-        :disabled="disabled"
-    >
-        <template #append v-if="items?.length">
-            <el-dropdown :trigger="trigger" @command="selectItem">
-                <span class="el-dropdown-link">
-                    <Icon value="ArrowDown"/>
-                </span>
-                <template #dropdown>
-                    <el-dropdown-menu>
-                        <template v-for="(item, index) of items" :key="index">
-                            <el-dropdown-item
-                                :command="item[valueName]"
-                                :title="item[titleName]"
-                            >
-                                {{ item[textName] }}
-                            </el-dropdown-item>
-                        </template>
-                    </el-dropdown-menu>
-                </template>
-            </el-dropdown>
-        </template>
-    </el-input>
-</template>
-
-<script>
-import Icon from '../icon/Icon.vue';
-
-export default {
-    name: 'TnxelInputDropdown',
-    components: {Icon},
-    props: {
-        modelValue: String,
-        items: Array,
-        valueName: {
-            type: String,
-            default: 'value',
-        },
-        textName: {
-            type: String,
-            default: 'text',
-        },
-        titleName: {
-            type: String,
-            default: 'title',
-        },
-        trigger: String,
-        disabled: Boolean,
-    },
-    data() {
-        return {
-            model: this.modelValue,
-        };
-    },
-    watch: {
-        model() {
-            this.$emit('update:modelValue', this.model);
-        },
-        modelValue() {
-            this.model = this.modelValue;
-        },
-    },
-    methods: {
-        selectItem(value) {
-            this.model = value;
-        },
-    }
-}
-</script>
-
-<style>
-</style>
+<template>
+    <el-input class="tnxel-input-dropdown"
+        v-model="model"
+        :disabled="disabled"
+    >
+        <template #append v-if="items?.length">
+            <el-dropdown :trigger="trigger" @command="selectItem">
+                <span class="el-dropdown-link">
+                    <Icon value="ArrowDown"/>
+                </span>
+                <template #dropdown>
+                    <el-dropdown-menu>
+                        <template v-for="(item, index) of items" :key="index">
+                            <el-dropdown-item
+                                :command="item[valueName]"
+                                :title="item[titleName]"
+                            >
+                                {{ item[textName] }}
+                            </el-dropdown-item>
+                        </template>
+                    </el-dropdown-menu>
+                </template>
+            </el-dropdown>
+        </template>
+    </el-input>
+</template>
+
+<script>
+import Icon from '../icon/Icon.vue';
+
+export default {
+    name: 'TnxelInputDropdown',
+    components: {Icon},
+    props: {
+        modelValue: String,
+        items: Array,
+        valueName: {
+            type: String,
+            default: 'value',
+        },
+        textName: {
+            type: String,
+            default: 'text',
+        },
+        titleName: {
+            type: String,
+            default: 'title',
+        },
+        trigger: String,
+        disabled: Boolean,
+    },
+    data() {
+        return {
+            model: this.modelValue,
+        };
+    },
+    watch: {
+        model() {
+            this.$emit('update:modelValue', this.model);
+        },
+        modelValue() {
+            this.model = this.modelValue;
+        },
+    },
+    methods: {
+        selectItem(value) {
+            this.model = value;
+        },
+    }
+}
+</script>
+
+<style>
+</style>

package/src/element-plus/select/Select.vue

@@ -246,7 +246,7 @@ export default {
         },
         currentText() {
             let item = this.getItem(this.model);
-            return item ? item[this.textName] : undefined;
+            return item ? item[this.textName] : this.emptyText;
         },
         modelEqualsModelValue() {
             if (Array.isArray(this.model) && Array.isArray(this.modelValue)) {

package/src/element-plus/toolbar/ToolBarItem.js

@@ -1,15 +1,15 @@
-/**
- * 工具栏项
- */
-export default class ToolBarItem {
-
-    icon = '';
-    caption = '';
-    disabled = false;
-    click = null;
-
-    static from(object) {
-        return Object.assign(new ToolBarItem(), object);
-    }
-
-}
+/**
+ * 工具栏项
+ */
+export default class ToolBarItem {
+
+    icon = '';
+    caption = '';
+    disabled = false;
+    click = null;
+
+    static from(object) {
+        return Object.assign(new ToolBarItem(), object);
+    }
+
+}

package/src/element-plus/toolbar/Toolbar.vue

@@ -1,56 +1,56 @@
-<template>
-    <div class="tnxel-toolbar">
-        <div class="flex-v-center">
-            <template v-for="(item, index) of leftItems" :key="index">
-                <el-divider direction="vertical" v-if="item === '|'"/>
-                <ToolBarItem
-                    :item="Item.from(item)"
-                    :size="size"
-                    v-else-if="typeof item ==='object'"/>
-            </template>
-        </div>
-        <div class="flex-v-center">
-            <ToolBarItem v-for="(item, index) of rightItems" :key="index"
-                :item="Item.from(item)"
-                :size="size"/>
-        </div>
-    </div>
-</template>
-
-<script>
-import ToolBarItem from './ToolBarItem.vue';
-import Item from './ToolBarItem.js';
-
-export default {
-    name: 'TnxelToolbar',
-    components: {ToolBarItem},
-    props: {
-        leftItems: Array,
-        rightItems: Array,
-        size: {
-            type: String,
-            validator: value => {
-                return ['small', 'default', 'large'].includes(value);
-            },
-            default: 'default',
-        },
-    },
-    data() {
-        return {
-            Item,
-            model: {},
-        };
-    },
-    methods: {}
-}
-</script>
-
-<style>
-.tnxel-toolbar {
-    height: 32px;
-    padding: 0 8px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-</style>
+<template>
+    <div class="tnxel-toolbar">
+        <div class="flex-v-center">
+            <template v-for="(item, index) of leftItems" :key="index">
+                <el-divider direction="vertical" v-if="item === '|'"/>
+                <ToolBarItem
+                    :item="Item.from(item)"
+                    :size="size"
+                    v-else-if="typeof item ==='object'"/>
+            </template>
+        </div>
+        <div class="flex-v-center">
+            <ToolBarItem v-for="(item, index) of rightItems" :key="index"
+                :item="Item.from(item)"
+                :size="size"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import ToolBarItem from './ToolBarItem.vue';
+import Item from './ToolBarItem.js';
+
+export default {
+    name: 'TnxelToolbar',
+    components: {ToolBarItem},
+    props: {
+        leftItems: Array,
+        rightItems: Array,
+        size: {
+            type: String,
+            validator: value => {
+                return ['small', 'default', 'large'].includes(value);
+            },
+            default: 'default',
+        },
+    },
+    data() {
+        return {
+            Item,
+            model: {},
+        };
+    },
+    methods: {}
+}
+</script>
+
+<style>
+.tnxel-toolbar {
+    height: 32px;
+    padding: 0 8px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+</style>

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';