goodteditor-ui 1.0.101 → 1.0.103

package/package.json

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

package/src/components/ui/EditableText.vue

@@ -102,6 +102,10 @@ export default {
                 classes.push('is-edited');
             }
 
+            if (this.isValid === false) {
+                classes.push('invalid');
+            }
+
             return classes;
         },
         isValid() {
@@ -163,16 +167,18 @@ export default {
          * @param {string} value
          */
         setValue(value) {
-            if (value === this.valueLast) {
-                return;
-            }
             this.$el.textContent = value;
-            this.valueLast = value;
-            this.$emit('input', value);
-            this.$emit('change', value);
+            if (value !== this.valueLast) {
+                this.valueLast = value;
+                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() {
@@ -195,7 +201,7 @@ export default {
          * @param {KeyboardEvent} event
          */
         onKeyup({ target }) {
-            this.valueDirty = target.textContent.trim();
+            this.valueDirty = target.textContent.replace(/\s+/g, ' ').trim();
         }
     }
 };
@@ -236,6 +242,11 @@ export default {
 
     &.is-edited {
         white-space: pre-line;
+
+        &.invalid {
+            color: var(--color-red);
+            outline-color: var(--color-red);
+        }
     }
 }
 </style>