toggle-components-library 1.27.1 → 1.27.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.27.1",
+  "version": "1.27.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/forms/ToggleDateRangePicker.vue

@@ -144,6 +144,7 @@ export default {
             },
             set: function(modifiedValue) {
                 if(modifiedValue.start) {
+
                     //if modifiedValue.start is present, set selectedDateToEmit.start to it. If there is already an end date stored, 
                     // set selectedDateToEmit.end to it, otherwise use the start date.
                     let isoDate = new Date(new Date(modifiedValue.start+' 00:00:00').toISOString())
@@ -166,9 +167,9 @@ export default {
 
     methods: {
         
-        clearDate()
-        {
-            this.displayValue = {start:'',end:''};
+        clearDate() {
+            let blankDate = {start: '', end: ''};
+            this.$emit('input', blankDate);
         },
 
         toggleDatePickerState(state,emit){

package/src/components/forms/ToggleInputCheckbox.vue

@@ -2,12 +2,12 @@
 
         <label class="toggle-input-checkbox" >
             <input type="checkbox" :name="name ? name : 'ToggleInputCheckbox' "  v-model="inputVal" :value="option" :disabled="disabled"/>
-            
+            <div>
                 <span class="toggle-input-checkbox-check-element "></span>
                 <span  :class="[ 'toggle-input-checkbox-label', label_style ]" >{{label}}</span>
                
-                <img v-if="iconUrl" v-bind:src="iconUrl" :alt="iconAlt" class="toggle-input-checkbox-icon"/>
-               
+            </div> 
+            <img v-if="iconUrl" v-bind:src="iconUrl" :alt="iconAlt" class="toggle-input-checkbox-icon"/>
             
         </label>
 

package/src/components/forms/ToggleInputLabelLeft.vue

@@ -1,13 +1,23 @@
 <template>
   <div class="toggle-formbuilder-input-outer-container">
     <div class="toggle-formbuilder-input-container">
-      <div class="toggle-formbuilder-input-label">
+      <div class="toggle-formbuilder-input-label" :class="labelClasses">
         <p v-if="label" class="toggle-formbuilder-label-text">{{label}}</p>
       </div>
+
+      <!-- 'Normal' input with label and single input -->
       <div v-if="!multipleInputs" class="inner-input-container">
         <slot ></slot>
         <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
       </div>
+
+      <!-- Label with multiple inputs, with the inputs aligned vertically eg. multiple email addresses -->
+      <div v-else-if="multipleInputs && vertical" class="multiple-inputs-vertical-container">
+        <slot ></slot>
+        <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
+      </div>
+
+      <!-- Label with multiple inputs, with the inputs aligned horizontally eg. redirect url which needs two inputs -->
       <div v-else class="inner-input-container">
         <div class="multiple-inputs-container">
           <slot></slot>
@@ -41,6 +51,19 @@ export default {
       default: false,
       required: false,
       description: "Set to true if more than one input is required per line. Inputs will be rendered horizontally"
+    },
+    vertical: {
+      type: Boolean,
+      default: false,
+      required: false,
+      description: "When passed with multipleInputs set to true, stacks multiple inputs vertically instead of horizontally"
+    }
+  },
+  computed: {
+    labelClasses() {
+      return {
+        'toggle-formbuilder-input-label-align-top': this.multipleInputs && this.vertical
+      }
     }
   }
 
@@ -70,6 +93,10 @@ export default {
     margin-bottom: 20px;
   }
 
+  .toggle-formbuilder-input-label-align-top {
+    justify-content: flex-start;
+  }
+
   .toggle-formbuilder-label-text {
     font-size: 16px;
     color: #202C38;
@@ -87,4 +114,10 @@ export default {
     flex-direction: row;
     column-gap: 0.875rem;
   }
+
+  .multiple-inputs-vertical-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
 </style>

package/src/components/forms/ToggleInputPercentage.vue

@@ -73,6 +73,10 @@ export default {
         errorMessage: {
             type: String,
             required: false
+        },
+        allowFloat: {
+            type: Boolean,
+            default: false
         }
     },
 
@@ -108,7 +112,11 @@ export default {
                 // Recalculate value after ignoring "%" and "," in user input
                 let newValue = parseFloat(modifiedValue.replace(/[^\d.]/g, ""));
                 if(newValue)
-                    newValue = parseInt(newValue);
+                    if(this.allowFloat){
+                        newValue = parseFloat(newValue);
+                    } else {
+                        newValue = parseInt(newValue);
+                    }
                 else
                     newValue = 0;
                 

package/src/components/modals/ToggleModal.vue

@@ -1,6 +1,6 @@
 <template>
         <transition name="toggle-modal">
-            <div class="toggle-modal-mask toggle-modal-close" v-if="showModal" @click="backgroundClick">
+            <div class="toggle-modal-mask toggle-modal-close" v-if="showModal" @mousedown="backgroundClick">
               <div class="toggle-modal-wrapper toggle-modal-close" >
                 <div class="toggle-modal-container" :style="{'max-width':maxwidth}" >
 

package/src/sass/includes/_as_inputs.scss

@@ -302,7 +302,7 @@
         margin-left: 1rem;
     }
     .toggle-input-checkbox-icon {
-        height: 2rem;
+        height: 2.5rem;
         margin-left: auto ;
     }
 
@@ -420,6 +420,11 @@
     .toggle-input-label, .toggle-input{
         opacity: 0.5;
     }
+    .toggle-input-select-container{
+        &:after{
+            opacity: 0.3;
+        }
+    }
 }
 
 .toggle-input-radio-label, .toggle-input-checkbox-label{

package/src/sass/includes/_as_threedots.scss

@@ -91,7 +91,7 @@
                 height: 1px;
                 margin: 10px;
             }
-            &:nth-of-type(2){
+            &:nth-of-type(1){
                 hr{
                     display: none;
                 }