@truenewx/tnxvue3 3.0.0-alpha.26 → 3.0.0-alpha.28

package/package.json

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

package/src/element-plus/button/Button.vue

@@ -1,8 +1,8 @@
 <template>
     <el-tooltip :content="tooltipContent" :placement="tooltipPlacement" :disabled="disabled || !tooltipContent"
-                v-if="disabled === false || disabledTip !== false">
+        v-if="disabled === false || disabledTip !== false">
         <el-dropdown split-button :type="type" :class="className" :disabled="disabled" :title="title" :size="size"
-                     :style="$attrs.style" @click="clickButton" @command="clickItem" v-if="dropdownItems.length">
+            :style="$attrs.style" @click="clickButton" @command="clickItem" v-if="dropdownItems.length">
             <i :class="icon" style="margin-right: 0.5rem;" v-if="icon"></i>
             <template v-if="!hiddenCaption">
                 <slot v-if="$slots.default"></slot>
@@ -11,18 +11,18 @@
             <template #dropdown>
                 <el-dropdown-menu>
                     <el-dropdown-item v-for="dropdownItem of dropdownItems" :key="dropdownItem.path"
-                                      :icon="dropdownItem.icon" :disabled="dropdownItem.disabled"
-                                      :title="dropdownItem.title"
-                                      :command="dropdownItem">
+                        :icon="dropdownItem.icon" :disabled="dropdownItem.disabled"
+                        :title="dropdownItem.title"
+                        :command="dropdownItem">
                         {{ dropdownItem.caption || (dropdownItem.menuItem ? dropdownItem.menuItem.caption : '') }}
                     </el-dropdown-item>
                 </el-dropdown-menu>
             </template>
         </el-dropdown>
         <el-button :type="type" :class="className" :disabled="disabled" :title="title" @click="clickButton" :size="size"
-                   :loading="loading" :plain="plain" :link="link" :text="text" :bg="bg" :autofocus="autofocus"
-                   :round="round"
-                   :circle="circle" :style="$attrs.style" v-else>
+            :loading="loading" :plain="plain" :link="link" :bg="bg" :autofocus="autofocus"
+            :round="round"
+            :circle="circle" :style="$attrs.style" v-else>
             <tnxel-icon :value="icon" v-if="icon"/>
             <span v-if="!hiddenCaption && ($slots.default || menuItem)">
                 <slot>{{ menuItem ? menuItem.caption : '' }}</slot>
@@ -56,7 +56,6 @@ export default {
         loading: Boolean,
         plain: Boolean,
         link: Boolean,
-        text: Boolean,
         bg: Boolean,
         autofocus: Boolean,
         round: Boolean,

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

@@ -12,13 +12,13 @@
             <el-table-column label="排序" align="center" width="60px" v-if="sortable">
                 <template #default="scope">
                     <tnxel-button
-                        type="text"
+                        type="primary" link
                         icon="Top"
                         :class="{'text-transparent': scope.$index === 0}"
                         @click="sortUp(scope.$index)"
                     />
                     <tnxel-button
-                        type="text"
+                        type="primary" link
                         icon="Bottom"
                         class="ms-0"
                         :class="{'text-transparent': scope.$index === data.length - 1}"
@@ -29,7 +29,7 @@
             <el-table-column label="移除" align="center" width="60px" v-if="removable">
                 <template #default="scope">
                     <tnxel-button
-                        type="primary" text
+                        type="primary" link
                         icon="CircleClose"
                         :tooltip="scope.row.removeTip"
                         @click="toRemoveRow(scope.$index)"
@@ -37,22 +37,21 @@
                 </template>
             </el-table-column>
         </el-table>
-        <el-table class="tnxel-edit-table-footer" :data="[{}]" border :show-header="false" v-if="addable">
-            <el-table-column align="center">
-                <template #default>
-                    <tnxel-button type="text" icon="Plus" @click="toAddRow">{{ addText }}</tnxel-button>
-                </template>
-            </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>
+        </div>
+        <tnxel-icon class="d-none icon-warning" value="WarningFilled"/>
     </div>
 </template>
 
 <script>
 import Button from '../button/Button.vue';
+import Icon from '../icon/Icon.vue';
 
 export default {
     components: {
         'tnxel-button': Button,
+        'tnxel-icon': Icon,
     },
     name: 'TnxelEditTable',
     props: {
@@ -196,15 +195,7 @@ export default {
             });
         },
         bindRules() {
-            this.loopValidatableElements((fieldName, element) => {
-                element.addEventListener('blur', event => {
-                    let element = event.target;
-                    this.validateElement(fieldName, element);
-                });
-                element.addEventListener('focus', event => {
-                    this.removeErrorIcon(event.target);
-                });
-            });
+            this.bindElementRules();
             this.loopColumns((fieldName, columnName) => {
                 let rules = this.validationRules[fieldName];
                 if (rules) {
@@ -220,6 +211,20 @@ export default {
                 }
             });
         },
+        bindElementRules() {
+            this.loopValidatableElements((fieldName, element) => {
+                let blurEventHandler = event => {
+                    this.validateElement(fieldName, event.target);
+                };
+                element.removeEventListener('blur', blurEventHandler);
+                element.addEventListener('blur', blurEventHandler);
+                let focusEventHandler = event => {
+                    this.removeErrorIcon(event.target);
+                };
+                element.removeEventListener('focus', focusEventHandler);
+                element.addEventListener('focus', focusEventHandler);
+            });
+        },
         validateElement(fieldName, element) {
             this.removeErrorIcon(element);
             element.parentElement.classList.remove('is-error');
@@ -238,9 +243,13 @@ export default {
                     }
                     message = message.trim();
                     element.parentElement.classList.add('is-error');
-                    let icon = document.createElement('i');
+
+                    let container = document.getElementById(this.id);
+                    let icon = container.getElementsByClassName('icon-warning')[0];
+                    icon = icon.cloneNode(true);
+                    icon.classList.remove('d-none');
+                    icon.classList.remove('icon-warning');
                     icon.classList.add('error-icon');
-                    icon.classList.add('el-icon'); // TODO
                     icon.classList.add('text-danger');
                     icon.title = message;
                     icon.style.top = (element.parentElement.offsetHeight - 16) / 2 + 'px';
@@ -299,6 +308,7 @@ export default {
             let row = this.newRow();
             this.data.push(row);
             this.$nextTick(() => {
+                this.bindElementRules();
                 this.focusRowFirstInput(this.data.length - 1);
             });
         },
@@ -335,7 +345,8 @@ export default {
     padding: 0;
 }
 
-.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input__wrapper {
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input__wrapper,
+.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-select__wrapper {
     border-radius: 0;
     height: 32px;
 }
@@ -357,14 +368,8 @@ export default {
     text-align: left;
 }
 
-.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-input__inner:focus,
-.tnxel-edit-table-container .el-table.padding-none .el-table__body-wrapper .el-textarea__inner:focus {
-    border-color: var(--el-color-primary);
-}
-
-.tnxel-edit-table-container .el-table .is-error .el-input__inner,
-.tnxel-edit-table-container .el-table .is-error .el-textarea__inner {
-    border-color: var(--el-color-danger);
+.tnxel-edit-table-container .el-table .is-error {
+    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
 }
 
 .tnxel-edit-table-container .el-table th.is-required:not(.is-no-asterisk) .cell:after {
@@ -378,6 +383,7 @@ export default {
     top: 12px;
     right: 10px;
     font-size: 16px;
+    cursor: default;
 }
 
 .tnxel-edit-table-container .el-table .el-input__inner:focus + .error-icon,
@@ -394,11 +400,15 @@ export default {
 }
 
 .tnxel-edit-table-container .tnxel-edit-table-footer {
-    border-top: none;
+    border-left: 1px solid var(--el-border-color-lighter);
+    border-right: 1px solid var(--el-border-color-lighter);
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    height: 32px;
+    display: flex;
+    align-items: center;
 }
 
-.tnxel-edit-table-container .tnxel-edit-table-footer .el-table__cell {
-    padding-top: 4px;
-    padding-bottom: 3px;
+.tnxel-edit-table-container .tnxel-edit-table-footer .el-button {
+    width: 100%;
 }
 </style>

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

@@ -34,6 +34,7 @@
         <Memo v-else-if="value === 'Memo'"/>
         <Minus v-else-if="value === 'Minus'"/>
         <MoreFilled v-else-if="value === 'MoreFilled'"/>
+        <Notebook v-else-if="value === 'Notebook'"/>
         <OfficeBuilding v-else-if="value === 'OfficeBuilding'"/>
         <Picture v-else-if="value === 'Picture'"/>
         <PictureFilled v-else-if="value === 'PictureFilled'"/>
@@ -96,6 +97,7 @@ import {
     Memo,
     Minus,
     MoreFilled,
+    Notebook,
     OfficeBuilding,
     Picture,
     PictureFilled,
@@ -155,6 +157,7 @@ const components = {
     Memo,
     Minus,
     MoreFilled,
+    Notebook,
     Loading,
     OfficeBuilding,
     Picture,

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

@@ -142,8 +142,8 @@
             {{ emptyText }}
         </el-option>
         <template v-for="item in items">
-            <el-option :key="item[valueName]" :value="item[valueName]" :data-value="item[valueName]"
-                :disabled="item.disabled === true || typeof item.disabled === 'string'"
+            <el-option :key="item[valueName]" :value="item[valueName]" :label="item[textName]"
+                :data-value="item[valueName]" :disabled="item.disabled === true || typeof item.disabled === 'string'"
                 :title="typeof item.disabled === 'string' ? item.disabled : item.title"
                 v-if="!hiddenValues.contains(item[valueName])">
                 <slot name="option" :item="item" v-if="$slots.option"></slot>