@truenewx/tnxvue3 3.0.0-alpha.40 → 3.0.0-alpha.42

package/package.json

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

package/src/element-plus/edit-table/EditTable.vue

@@ -40,7 +40,9 @@
             </el-table-column>
         </el-table>
         <div class="tnxel-edit-table-footer" v-if="addable">
-            <tnxel-button type="primary" link icon="Plus" @click="toAddRow">{{ addText }}</tnxel-button>
+            <tnxel-button type="primary" class="w-fit-content" link icon="Plus" @click="toAddRow">
+                {{ addText }}
+            </tnxel-button>
         </div>
         <tnxel-icon class="d-none icon-warning" value="WarningFilled"/>
     </div>
@@ -455,6 +457,10 @@ export default {
 </script>
 
 <style>
+.tnxel-edit-table-container .el-table .el-table__row {
+    height: 33px;
+}
+
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-table__cell,
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper td .cell,
 .tnxel-edit-table-container .el-table--border.padding-none .el-table__body-wrapper td.el-table__cell:first-child .cell {
@@ -470,7 +476,7 @@ export default {
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input-group__append,
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input-group__prepend {
     border-radius: 0;
-    padding: 0 16px;
+    padding: 0 10px;
 }
 
 .tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-button {
@@ -580,6 +586,7 @@ export default {
     height: 32px;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .tnxel-edit-table-container .tnxel-edit-table-footer .el-button {

package/src/element-plus/enum-select/EnumSelect.vue

@@ -1,17 +1,33 @@
 <template>
-    <tnxel-fetch-cascader v-model="model" url="/api/meta/enums" value-name="key" text-name="caption"
-        index-name="searchIndex" :disabled="disabled" :empty="empty" :filterable="filterable"
+    <tnxel-fetch-cascader v-model="model"
+        url="/api/meta/enums" value-name="key" text-name="caption" index-name="searchIndex"
+        :disabled="disabled"
+        :empty="empty"
+        :filterable="filterable"
         :theme="theme"
         :params="{
             type: type,
             subtype:subtype,
             grouped: true,
-        }" v-if="grouped"/>
-    <tnxel-select ref="select" v-model="model" :id="id" :selector="selector" :items="items"
+        }"
+        v-if="grouped"/>
+    <tnxel-select ref="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" v-else>
+        :default-value="defaultValue"
+        :empty="empty"
+        :empty-value="emptyValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :filterable="filterable"
+        :theme="theme"
+        :size="size"
+        :tag-click="tagClick"
+        :change="change"
+        v-else>
         <template #option="{item}" v-if="$slots.option">
             <slot name="option" :item="item"></slot>
         </template>
@@ -43,8 +59,8 @@ export default {
             default: false,
         },
         emptyValue: {
-            type: [String, Boolean, Number],
-            default: () => null,
+            type: [String, Number, Boolean, Array],
+            default: '', // 设为null会告警，暂时先设为空字符，在非字符串类型的情况下是否有问题，有待检验
         },
         placeholder: String,
         disabled: Boolean,

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

@@ -0,0 +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>

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

@@ -204,13 +204,13 @@ export default {
         placeholder: String,
         disabled: Boolean,
         tagClick: Function, // 点击一个标签选项时调用，如果返回false，则选项不会被选中
-        change: Function, // 选中值变化后的事件处理函数，由于比element的change事件传递更多参数，所以以prop的形式指定，以尽量节省性能
+        change: Function, // 选中值变化后的事件处理函数，比change事件传递更多参数数据
         filterable: Boolean,
         theme: String,
         size: String,
         border: Boolean,
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'change'],
     data() {
         let model = this.getModel(this.items);
         if (model !== this.modelValue) {
@@ -286,6 +286,8 @@ export default {
                     item = this.getItem(value);
                 }
                 this.change(item, this.id);
+            } else {
+                this.$emit('change', value);
             }
         },
         getItem(value) {

package/src/element-plus/submit-form/SubmitForm.vue

@@ -125,7 +125,22 @@ export default {
                         vm.fieldNames = Object.keys(meta);
                     }, this.rulesApp);
                 } else {
-                    this.validationRules = this.rules;
+                    this.validationRules = {};
+                    Object.keys(this.rules).forEach(fieldName => {
+                        let fieldRules = this.rules[fieldName];
+                        if (fieldRules && Array.isArray(fieldRules)) {
+                            this.validationRules[fieldName] = fieldRules.filter((rule, index) => {
+                                let valid = rule !== undefined && rule !== null;
+                                if (!valid) {
+                                    console.error(
+                                        'invalid rules[' + index + '] for field "' + fieldName + '": ' + rule);
+                                }
+                                return valid;
+                            });
+                        } else {
+                            console.error('invalid rules for field "' + fieldName + '": ' + fieldRules);
+                        }
+                    });
                 }
             } else {
                 this.validationRules = {};
@@ -215,6 +230,7 @@ export default {
         /**
          * 执行所有的校验规则，以自定义方式处理错误
          * @param callback 校验后的回调函数，首个参数为错误消息字符串数组，没有错误时为null
+         * @param fieldLabels 字段标签，可以是一个函数，也可以是一个对象，用于自定义错误消息中的字段标签
          */
         validateRules(callback, fieldLabels) {
             let validator = new AsyncValidator(this.validationRules);

package/src/element-plus/tnxel.css

@@ -436,6 +436,7 @@
     position: absolute;
     top: 100%;
     margin: 2px 0;
+    white-space: nowrap;
 }
 
 .form-item-tip {

package/src/element-plus/tnxel.js

@@ -29,6 +29,7 @@ import FetchTags from './fetch-tags/FetchTags.vue';
 import FssUpload from './fss-upload/FssUpload.vue';
 import FssView from './fss-view/FssView.vue';
 import Icon from './icon/Icon.vue';
+import InputDropdown from './input-dropdown/InputDropdown.vue';
 import InputNumber from './input-number/InputNumber.vue';
 import Paged from './paged/Paged.vue';
 import PermissionTree from './permission-tree/PermissionTree.vue';
@@ -74,6 +75,7 @@ export default build('tnxel', () => {
         FssUpload,
         FssView,
         Icon,
+        InputDropdown,
         InputNumber,
         Paged,
         PermissionTree,
@@ -402,13 +404,14 @@ export default build('tnxel', () => {
         }
     });
 
+    tnxel.libs.ElementPlus = ElementPlus;
+
     tnxel.install = tnxel.util.function.around(tnxel.install, function (install, vm) {
         install.call(tnxel, vm);
         // 始终安装ElementPlus，以避免对于不同Vue实例未安装的问题
         vm.use(ElementPlus, {
             locale: ElementPlus_zh_CN,
         });
-        tnxel.libs = Object.assign({}, tnxel.libs, {ElementPlus});
     });
 
     tnxel.router.beforeLeave =

package/src/tnxvue.js

@@ -107,7 +107,6 @@ export default build('tnxvue', () => {
                 const component = this.components[key];
                 vm.component(component.name, component);
             }
-            this.libs.Vue = Vue;
         },
         dialog(content, title, buttons, options, contentProps) {
             // 默认不实现，由UI框架扩展层实现
@@ -199,6 +198,8 @@ export default build('tnxvue', () => {
         },
     });
 
+    tnxvue.libs.Vue = Vue;
+
     Object.assign(tnxvue.util, {
         /**
          * 判断指定对象是否组件实例