toggle-components-library 1.33.0-beta.1 → 1.33.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.1",
+    "version": "1.33.0-beta.2",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputCurrency.vue

@@ -12,11 +12,12 @@
     </label>
     <input
         :name="name ? name : 'ToggleInputCurrency' " 
-        :class="[ 'toggle-input', size]"
+        :class="[ 'toggle-input', {'toggle-input-is-readonly':readonly, size}]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
         :disabled="disabled"
+        :readonly="readonly"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -98,6 +99,11 @@ export default {
             required: false,
             default: false
         },
+        readonly: {
+            type: Boolean,
+            required: false,
+            default: false
+        },  
     },
 
     created : function(){
@@ -115,7 +121,7 @@ export default {
 
             get: function() {
 
-                if (this.isInputActive) {     
+                if (this.isInputActive && !this.readonly) {     
                     if((this.value === '' || this.value === null) && this.allowBlank)
                         return '';               
                     // Cursor is inside the input field. unformat display value for user

package/src/components/forms/ToggleInputPercentage.vue

@@ -10,13 +10,14 @@
     </label>
     <input
         :name="name ? name : 'ToggleInputPercentage' " 
-        :class="[ 'toggle-input', size]"
+        :class="[ 'toggle-input', {'toggle-input-is-readonly':readonly, size}]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
         v-model="inputVal"
         @blur="isInputActive = false" 
-        @focus="isInputActive = true" 
+        @focus="isInputActive = true"
+        :readonly="readonly"
     />
     <label
         class="toggle-input-label-error" 
@@ -77,7 +78,17 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
-        }
+        },
+        readonly: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
+        disabled: {
+          type: Boolean,
+          required: false,
+          default: false
+        },
     },
 
     created : function(){
@@ -100,7 +111,7 @@ export default {
         inputVal: {
 
              get: function() {
-                if (this.isInputActive) {
+                if (this.isInputActive && !this.readonly) {
                     // Cursor is inside the input field. unformat display value for user
                     return this.value.toString()
                 } else {

package/src/components/forms/ToggleInputText.vue

@@ -11,7 +11,7 @@
     <input
         :type="type"
         :name="name ? name : 'ToggleInputText' " 
-        :class="[ 'toggle-input', size]"
+        :class="['toggle-input', {'toggle-input-is-readonly':readonly, size}]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"

package/src/sass/includes/_as_inputs.scss

@@ -435,6 +435,10 @@
     }
 }
 
+.toggle-input-is-readonly:focus {
+    outline: none;
+}
+
 .toggle-input-radio-label, .toggle-input-checkbox-label{
     display  : inline-block;
     font-size: $toggle-font-size-large;