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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truenewx/tnxvue3",
-  "version": "3.0.0-alpha.27",
+  "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.15",
+    "@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/edit-table/EditTable.vue

@@ -40,15 +40,18 @@
         <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: {
@@ -192,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) {
@@ -216,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');
@@ -234,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';
@@ -295,6 +308,7 @@ export default {
             let row = this.newRow();
             this.data.push(row);
             this.$nextTick(() => {
+                this.bindElementRules();
                 this.focusRowFirstInput(this.data.length - 1);
             });
         },
@@ -354,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 {
@@ -375,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,
@@ -391,9 +400,9 @@ export default {
 }
 
 .tnxel-edit-table-container .tnxel-edit-table-footer {
-    border-left: 1px solid var(--el-border-color);
-    border-right: 1px solid var(--el-border-color);
-    border-bottom: 1px solid var(--el-border-color);
+    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;

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>