@dualbox/editor 1.0.71 → 1.0.73

package/js/src/v/templates/editValue.vue

@@ -1,55 +1,62 @@
 <style scoped>
-    .template-value-container, .field-editor {
-        margin-bottom: 10px;
-    }
+.template-value-container,
+.field-editor {
+    margin-bottom: 10px;
+}
 
-    .template-value-message {
-        text-align: center;
-        margin-top: 30px;
-        margin-bottom: 30px;
-        width: 100%;
-        opacity: 0.5;
-    }
+.template-value-message {
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    width: 100%;
+    opacity: 0.5;
+}
 </style>
 
 <template>
     <div class="w-100">
         <p style="display: none;">{{cIndex}}</p>
         <template v-if="isBasicDataType()">
-            <template v-if="dataType === 'string'">
-                <input class="edit-value-input" type="text" @keyup.enter="setStringValue" @keyup.esc="setStringValue" :value="v" @focus="$event.target.select()"></input>
-            </template>
-            <template v-else-if="dataType === 'boolean'">
-                <select class="edit-value-input" @change="setBoolValue">
-                    <option value="true" :selected="v == true">True</option>
-                    <option value="false" :selected="v == false">False</option>
-                </select>
-            </template>
-            <template v-else-if="dataType === 'number'">
-                <input class="edit-value-input" type="number" @keyup.enter="setNumberValue" @blur="setNumberValue" :value="v" @focus="$event.target.select()" style="width: 40px;"></input>
-            </template>
+                <template v-if="dataType === 'string'">
+                    <input class="edit-value-input" type="text" @keyup.enter="setStringValue" @keyup.esc="setStringValue" :value="v" @focus="$event.target.select()"></input>
+</template>
+
+<template v-else-if="dataType === 'boolean'">
+    <select class="edit-value-input" @change="setBoolValue">
+                        <option value="true" :selected="v == true">True</option>
+                        <option value="false" :selected="v == false">False</option>
+                    </select>
+</template>
+
+<template v-else-if="dataType === 'number'">
+    <input class="edit-value-input" type="number" @keyup.enter="setNumberValue" @blur="setNumberValue" :value="v" @focus="$event.target.select()" style="width: 40px;">
+    </input>
+</template>
         </template>
-        <template v-else>
-            <!-- we already are in a modal, don't instanciate another one -->
-            <template v-if="isTemplateType()">
-                <div class="container template-value-container" style="border: 1px solid rgba(0, 0, 0, 0.125);">
-                    <div v-if="isArrayType()" class="row" style="background-color: rgba(0,0,0,.125);">Array Editor</div>
-                    <div v-else-if="isMapType()" class="row" style="background-color: rgba(0,0,0,.125);">Map Editor</div>
-                    <div class="row" style="1px solid rgba(0,0,0,.125);">
-                        <div class="col list-group-flush" :class="{ 'col-1' : isArrayType(), 'col-2' : isMapType()}" style="padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125);">
-                            <button v-for="index in deserializedValue.keys()" :key="index" :data-key="index" type="button" class="list-group-item list-group-item-action" :class="{ active: isSelectedIndex(index) }" style="text-align: center;" @click="selectIndex(index)">{{index}}</button>
-                            <button type="button" @click="addItem" class="list-group-item list-group-item-action add-item" style="text-align: center;"><i class="fas fa-plus-circle"></i></button>
-                        </div>
-                        <div class="col" style="padding: 10px">
-                            <edit-value v-if="selectedIndex !== undefined && selectedIndex !== null" :cIndex="selectedIndex" :type="embeddedType" :v="getElement(selectedIndex)" @edited="onSubValueEdited(selectedIndex, $event)"></edit-value>
-                            <p v-else class="template-value-message">Select an element to edit.</p>
+
+<template v-else>
+    <!-- we already are in a modal, don't instanciate another one -->
+    <template v-if="isTemplateType()">
+                    <div class="container template-value-container" style="border: 1px solid rgba(0, 0, 0, 0.125);">
+                        <div v-if="isArrayType()" class="row" style="background-color: rgba(0,0,0,.125);">Array Editor</div>
+                        <div v-else-if="isMapType()" class="row" style="background-color: rgba(0,0,0,.125);">Map Editor</div>
+                        <div class="row" style="1px solid rgba(0,0,0,.125);">
+                            <div class="col list-group-flush" :class="{ 'col-1' : isArrayType(), 'col-2' : isMapType()}" style="padding: 0; background-color: white; overflow-y: auto; border-right: 1px solid rgba(0, 0, 0, 0.125);">
+                                <button v-for="index in deserializedValue.keys()" :key="index" :data-key="index" type="button" class="list-group-item list-group-item-action" :class="{ active: isSelectedIndex(index) }" style="text-align: center;" @click="selectIndex(index)">{{index}}</button>
+                                <button type="button" @click="addItem" class="list-group-item list-group-item-action add-item" style="text-align: center;"><i class="fas fa-plus-circle"></i></button>
+                            </div>
+                            <div class="col" style="padding: 10px">
+                                <edit-value v-if="selectedIndex !== undefined && selectedIndex !== null" :cIndex="selectedIndex" :type="embeddedType" :v="getElement(selectedIndex)" @edited="onSubValueEdited(selectedIndex, $event)"></edit-value>
+                                <p v-else class="template-value-message">Select an element to edit.</p>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </template>
-            <template v-else>
-                <div class="field-editor" :data-value="hash()"></div>
-            </template>
+</template>
+
+<template v-else>
+    <div class="field-editor" :data-value="hash()">
+    </div>
+</template>
         </template>
 
         <!-- set null and delete buttons -->
@@ -67,34 +74,35 @@ import swal from 'sweetalert2';
 import JSONEditor from '@dualbox/dualbox-lib-jsoneditor';
 
 String.prototype.hashCode = function() {
-    var hash = 0, i, chr;
+    var hash = 0,
+        i, chr;
     if (this.length === 0) return hash;
     for (i = 0; i < this.length; i++) {
-        chr   = this.charCodeAt(i);
-        hash  = ((hash << 5) - hash) + chr;
+        chr = this.charCodeAt(i);
+        hash = ((hash << 5) - hash) + chr;
         hash |= 0; // Convert to 32bit integer
     }
     return hash;
 };
 
 export default {
-    name : "edit-value",
+    name: "edit-value",
     props: [
         // required
-        "v",     // the value
-        "type",  // the dualbox type of the value
+        "v", // the value
+        "type", // the dualbox type of the value
 
         // specific properties (for recursivity)
-        "cIndex"  // index for reference when in an array
+        "cIndex" // index for reference when in an array
     ],
-    data: function () {
+    data: function() {
         return {
-            "dataType": null,                    // the real javascript dataType of this.v
+            "dataType": null, // the real javascript dataType of this.v
             "deserializedValue": null,
 
             // if type is a collection (dataType=="map" or dataType=="array")
-            "embeddedType": null,    // the embedded type of this templated collection
-            "selectedIndex": null,   // the current index of the element we are editing
+            "embeddedType": null, // the embedded type of this templated collection
+            "selectedIndex": null, // the current index of the element we are editing
         };
     },
     created: function() {
@@ -114,23 +122,21 @@ export default {
         this.updateData();
     },
     updated: function() {
-        if( this.autochange ) {
+        if (this.autochange) {
             // change triggered by ourself, skip
             this.autochange = false;
-        }
-        else {
+        } else {
             this.updateEditor();
         }
     },
     beforeDestroy: function() {
         // make sure the value was set
-        if( !this.emitted ) {
-            if( this.isBasicDataType()) {
+        if (!this.emitted) {
+            if (this.isBasicDataType()) {
                 var elt = $(this.$el).find('.edit-value-input');
                 var val = elt.val();
                 this.$emit("edited", val);
-            }
-            else {
+            } else {
                 this.saveChanges();
             }
         }
@@ -138,28 +144,27 @@ export default {
     methods: {
         hash: function() {
             var str = new String(this.v).toString();
-            return str.split('').reduce((prevHash, currVal) => (((prevHash << 5) - prevHash) + currVal.charCodeAt(0))|0, 0);
+            return str.split('').reduce((prevHash, currVal) => (((prevHash << 5) - prevHash) + currVal.charCodeAt(0)) | 0, 0);
         },
 
         updateEditor: function() {
-            if( this.dataType === "object" ) {
-                if( !this.editor && $(this.$el).find('.field-editor')[0] !== undefined ) {
+            if (this.dataType === "object") {
+                if (!this.editor && $(this.$el).find('.field-editor')[0] !== undefined) {
                     // bind the json editor
                     this.editor = new JSONEditor(
                         $(this.$el).find('.field-editor')[0], {
-                            modes: ['tree', 'code', 'text' ],
+                            modes: ['tree', 'code', 'text'],
                             onChange: () => {
                                 try {
                                     var json = this.editor.get();
                                     this.autochange = true;
                                     this.$emit('edited', json);
-                                }
-                                catch(e) {}
+                                } catch (e) {}
                             }
                         });
                 }
 
-                if( this.editor ) {
+                if (this.editor) {
                     this.editor.set(this.v || {});
                 }
             }
@@ -169,42 +174,40 @@ export default {
             var resolvedType = this.type ? this.type.toLowerCase() : typeof this.v;
 
             // If "*", resolve the type by detecting it dynamically from value
-            if( resolvedType.indexOf("*") !== -1 ) {
+            if (resolvedType.indexOf("*") !== -1) {
                 resolvedType = window.DualBox.Type.detectType(this.v).toLowerCase();
             }
 
             // Check if we have a template type. If so, determine current index and embedded type
             var templateType = null;
-            if( resolvedType.startsWith("array") ) {
+            if (resolvedType.startsWith("array")) {
                 templateType = "array";
                 this.deserializedValue = this.v || [];
-            }
-            else if( resolvedType.startsWith("map") ) {
+            } else if (resolvedType.startsWith("map")) {
                 templateType = "map";
                 this.deserializedValue = window.DualBox.Type.deserialize(this.v || {
-                    "metadata":{
-                        "type":"Map<String,"+ this.firstLetterUppercase( this.getEmbeddedType(resolvedType) )+">"
+                    "metadata": {
+                        "type": "Map<String," + this.firstLetterUppercase(this.getEmbeddedType(resolvedType)) + ">"
                     },
                     "data": {}
                 });
             }
 
-            if( templateType ) {
+            if (templateType) {
                 this.dataType = templateType;
                 this.embeddedType = this.getEmbeddedType(resolvedType);
-                if( this.selectedIndex == null ) {
+                if (this.selectedIndex == null) {
                     var firstKey = this.deserializedValue.keys().next();
-                    if( firstKey && firstKey.value ) {
+                    if (firstKey && firstKey.value) {
                         this.selectedIndex = firstKey.value;
                     }
                 }
-            }
-            else {
+            } else {
                 this.dataType = resolvedType;
             }
 
             // Finally, transform to object if not a basic value
-            if( ["string", "number", "boolean", "array", "map"].indexOf(this.dataType) == -1 ) {
+            if (["string", "number", "boolean", "array", "map"].indexOf(this.dataType) == -1) {
                 this.dataType = "object";
             }
             //console.log(`Type: ${this.type}, Datatype: ${this.dataType}, embeddedType: ${this.embeddedType}`);
@@ -220,22 +223,20 @@ export default {
             this.resolveDatatype();
         },
 
-        isBasicDataType()  {
+        isBasicDataType() {
             return this.dataType == "string" ||
                 this.dataType == "number" ||
                 this.dataType == "boolean";
         },
 
-        serialize( value ) {
-            if( this.isTemplateType() ) {
-                if( this.isArrayType() ) {
+        serialize(value) {
+            if (this.isTemplateType()) {
+                if (this.isArrayType()) {
                     return value; // we store arrays as is
-                }
-                else if( this.isMapType() ) {
+                } else if (this.isMapType()) {
                     return window.DualBox.Type.serialize(value);
                 }
-            }
-            else {
+            } else {
                 return value;
             }
         },
@@ -243,11 +244,10 @@ export default {
         saveChanges: function() {
             this.$forceUpdate();
 
-            if( this.isTemplateType() ) {
+            if (this.isTemplateType()) {
                 this.$emit("edited", this.serialize(this.deserializedValue));
                 this.emitted = true;
-            }
-            else if( this.isObjectType() ) {
+            } else if (this.isObjectType()) {
                 // emit the result to the parent Vue
                 this.$emit("edited", this.editor.get());
                 this.emitted = true;
@@ -268,8 +268,13 @@ export default {
 
         setNumberValue: function(e) {
             var val = parseFloat($(e.target).val());
-            this.$emit("edited", val);
-            this.emitted = true;
+            if (isNaN(val)) {
+                this.deleteValue(e);
+            }
+            else {
+                this.$emit("edited", val);
+                this.emitted = true;
+            }
         },
 
         setNullValue: function() {
@@ -280,10 +285,9 @@ export default {
         },
 
         selectNextIndex: function() {
-            if( this.isArrayType() ) {
+            if (this.isArrayType()) {
                 this.selectedIndex = this.deserializedValue.length > 0 ? 0 : null;
-            }
-            else if( this.isMapType() ) {
+            } else if (this.isMapType()) {
                 var keys = this.deserializedValue.keys();
                 var next = keys.next();
                 this.selectedIndex = next ? next.value : null;
@@ -316,22 +320,21 @@ export default {
 
         getEmbeddedType: function(type) {
             var start = type.indexOf('<') + 1;
-            var end   = type.lastIndexOf('>');
-            if( type.toLowerCase().startsWith('array') ) {
+            var end = type.lastIndexOf('>');
+            if (type.toLowerCase().startsWith('array')) {
                 return type.substr(start, end - start).trim().toLowerCase();
-            }
-            else if( type.toLowerCase().startsWith('map') ) {
+            } else if (type.toLowerCase().startsWith('map')) {
                 var sub = type.substr(start, end - start);
                 return sub.substr(sub.indexOf(',') + 1).trim().toLowerCase();
             }
         },
 
-        firstLetterUppercase: function(s)  {
+        firstLetterUppercase: function(s) {
             return s.charAt(0).toUpperCase() + s.slice(1)
         },
 
         selectIndex: function(index) {
-            if( this.selectedIndex !== index ) {
+            if (this.selectedIndex !== index) {
                 this.selectedIndex = index;
                 this.$forceUpdate();
             }
@@ -342,30 +345,26 @@ export default {
         },
 
         getElement: function(i) {
-            if( Array.isArray(this.v) ) {
+            if (Array.isArray(this.v)) {
                 return this.deserializedValue[i];
-            }
-            else {
+            } else {
                 return this.deserializedValue.get(i);
             }
         },
 
         onSubValueEdited: function(index, newValue) {
             console.log(`Edited at index ${index}: ${JSON.stringify(newValue)}`);
-            if( this.isArrayType() ) {
-                if( newValue === undefined ) {
+            if (this.isArrayType()) {
+                if (newValue === undefined) {
                     // we just remove this value
                     this.deserializedValue.splice(index, 1);
-                }
-                else {
+                } else {
                     this.deserializedValue[index] = newValue;
                 }
-            }
-            else if ( this.isMapType() ) {
-                if( newValue === undefined ) {
+            } else if (this.isMapType()) {
+                if (newValue === undefined) {
                     this.deserializedValue.delete(index);
-                }
-                else {
+                } else {
                     this.deserializedValue.set(index, newValue);
                 }
             }
@@ -374,20 +373,19 @@ export default {
         },
 
         addItem: function() {
-            if( this.isArrayType() ) {
-                this.deserializedValue[ this.deserializedValue.length ] = null;
+            if (this.isArrayType()) {
+                this.deserializedValue[this.deserializedValue.length] = null;
                 this.selectedIndex = this.deserializedValue.length - 1;
                 this.saveChanges();
                 this.$forceUpdate();
-            }
-            else if( this.isMapType() ) {
+            } else if (this.isMapType()) {
                 this.swalFixBootstrapModal();
                 swal({
                     input: 'text',
                     title: 'Enter map key',
                 }).then((result) => {
                     this.swalRestoreBootstrapModal();
-                    if( result && result.value ) {
+                    if (result && result.value) {
                         this.selectedIndex = result.value;
                         this.deserializedValue.set(result.value, null);
                         this.saveChanges();
@@ -399,18 +397,18 @@ export default {
 
         // call this before showing SweetAlert:
         swalFixBootstrapModal() {
-          var modal = $("body").find('.modal[tabindex="-1"]');
-          if (!modal) return;
-          modal.removeAttr('tabindex');
-          modal.addClass('js-swal-fixed');
+            var modal = $("body").find('.modal[tabindex="-1"]');
+            if (!modal) return;
+            modal.removeAttr('tabindex');
+            modal.addClass('js-swal-fixed');
         },
 
         // call this before hiding SweetAlert (inside done callback):
         swalRestoreBootstrapModal() {
-          var modal = $("body").find('.modal.js-swal-fixed');
-          if (!modal) return;
-          modal.attr('tabindex', '-1');
-          modal.removeClass('js-swal-fixed');
+            var modal = $("body").find('.modal.js-swal-fixed');
+            if (!modal) return;
+            modal.attr('tabindex', '-1');
+            modal.removeClass('js-swal-fixed');
         }
     }
 }