goodteditor-ui 1.0.100 → 1.0.102

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.100",
+    "version": "1.0.102",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/EditableText.vue

@@ -7,9 +7,7 @@
         @keydown.stop="onKeydown"
         @keyup.stop="onKeyup"
         @focus="onFocus"
-        @focusin.stop="onFocus"
         @blur="onBlur"
-        @focusout.stop="onBlur"
         @click.stop
         v-on="{
             [event]: onActivate
@@ -22,7 +20,6 @@
     </div>
 </template>
 <script>
-
 const Size = {
     SMALL: { name: 'small', class: ['text-small'] },
     NORMAL: { name: 'normal', class: [] },
@@ -105,6 +102,10 @@ export default {
                 classes.push('is-edited');
             }
 
+            if (this.isValid === false) {
+                classes.push('invalid');
+            }
+
             return classes;
         },
         isValid() {
@@ -168,11 +169,16 @@ export default {
         setValue(value) {
             this.$el.textContent = value;
             this.valueLast = value;
-            this.$emit('input', value);
-            this.$emit('change', value);
+            if (value !== this.valueLast) {
+                this.$emit('input', value);
+                this.$emit('change', value);
+            }
         },
         commitValue() {
-            this.setValue(this.isValid ? this.valueDirty : this.valueLast);
+            if (this.isValid === false) {
+                this.valueDirty = this.valueLast;
+            }
+            this.setValue(this.valueDirty);
             this.setIsEdited(false);
         },
         onFocus() {
@@ -216,7 +222,7 @@ export default {
     &:empty {
         border-bottom: 2px dotted var(--color-primary);
         &:before {
-            content: ' '
+            content: ' ';
         }
     }
 
@@ -236,6 +242,11 @@ export default {
 
     &.is-edited {
         white-space: pre-line;
+
+        &.invalid {
+            color: var(--color-red);
+            outline-color: var(--color-red);
+        }
     }
 }
 </style>