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

package/package.json

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

package/src/components/forms/ToggleDatePicker.vue

@@ -6,8 +6,8 @@
         <label class="toggle-input-label">{{label}}</label>
 
         <div class="toggle-date-input-container">
-            <div class="toggle-date-input-calendar-icon">
-                <input type="text" class="toggle-input"  :name="name" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()">
+            <div :class="['toggle-date-input-calendar-icon', {'calendar-icon-disabled' :disabled}]">
+                <input type="text" class="toggle-input"  :name="name" :disabled="disabled" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()" />
             </div>
             <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
         </div>
@@ -101,7 +101,11 @@ export default {
         maxLength:{
             type: Number,
             required:false
-        }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
     },
 
     created : function(){

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

@@ -227,6 +227,11 @@
     }
 }
 
+.calendar-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .toggle-input-select-container{
     position:relative;
     background-color: $toggle-dark-grey;
@@ -430,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;