toggle-components-library 1.14.1 → 1.14.2

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.14.1",
+  "version": "1.14.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {

package/package.json

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

package/src/components/forms/ToggleInputCrudField.vue

@@ -4,7 +4,7 @@
     <label 
         v-if="label && !empty"
         class="toggle-input-crud-container-label"
-    > {{ label }} 
+    > {{ computedLabel }} 
     </label>
     <button 
         v-if="label && empty"
@@ -23,11 +23,6 @@
             buttonStyle="mini_edit" 
             @click="$emit('edit')" 
         />
-        <ToggleButton 
-            v-if="!empty"
-            buttonStyle="mini_delete" 
-            @click="$emit('delete')" 
-        />
     </div>
     
     <label
@@ -76,7 +71,10 @@ export default {
     created : function(){
     },
     computed: {
-        
+        computedLabel() {
+            let labelLength = this.label.split('').length;
+            return labelLength <= 15 ? this.label : this.label.slice(0,15) + '...'
+        }
     },
     methods: {
 

package/src/components/forms/ToggleInputGrid.vue

@@ -16,7 +16,7 @@
         <div class="toggle-grid-input-row-remove">
             <ToggleButton  
                 buttonStyle="mini_delete" 
-                @click="removeRow(rowindex)" 
+                @click="deleteCurrentRow(rowindex)" 
             />
         </div>
             
@@ -32,9 +32,6 @@
             </label>
         </div>
 
-       
-
-
     </div>
     <div class="toggle-grid-input-add-row" >
         <button 
@@ -44,6 +41,18 @@
         />
     </div>
 
+    <ToggleModal name="confirm_delete_row" maxwidth="500px">
+        <ToggleHeaderTextLarge class="text-center">Are you sure you want to delete this row?</ToggleHeaderTextLarge>
+        <div class="text-center toggle-copy-text">
+            You will lose all the fields in this row.
+        </div>
+        
+        <div class="toggle-grid-modal-button-container">
+            <ToggleButton buttonStyle="abort" buttonText="Delete this row" @click="removeRow(editingGridRow)" />
+            <ToggleButton class="mr-3" buttonStyle="neutral" buttonText="Keep this row" @click="$toggle_event.$emit('modal_hide', 'confirm_delete_row')" />
+        </div>
+    </ToggleModal>
+
 </div>
 </template>
 
@@ -51,11 +60,13 @@
 
 import { mixins } from '../mixins/mixins'
 import ToggleButton from '../buttons/ToggleButton.vue';
+import ToggleModal from '../modals/ToggleModal.vue';
+import ToggleHeaderTextLarge from '../text/ToggleHeaderTextLarge.vue';
 
 
 export default {
     mixins:[mixins],
-    components:{ToggleButton},
+    components:{ToggleButton, ToggleModal, ToggleHeaderTextLarge},
     props: {
         value: {
             type: [Array]
@@ -132,6 +143,7 @@ export default {
                     layout:[3,9]
                 },
             ],
+            editingGridRow: null,
             
         };
     },
@@ -236,6 +248,12 @@ export default {
         */
         removeRow(row_index){
             this.$delete( this.inputVal, row_index);
+            this.$toggle_event.$emit('modal_hide', 'confirm_delete_row');
+        },
+
+        deleteCurrentRow(rowindex) {
+            this.editingGridRow = rowindex;
+            this.$toggle_event.$emit('modal_show', 'confirm_delete_row')
         },
 
         /*

package/src/components/forms/ToggleInputLabelLeft.vue

@@ -4,9 +4,17 @@
       <div class="toggle-formbuilder-input-label">
         <p v-if="label" class="toggle-formbuilder-label-text">{{label}}</p>
       </div>
-      <slot></slot>
+      <div v-if="!multipleInputs" class="inner-input-container">
+        <slot ></slot>
+        <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
+      </div>
+      <div v-else class="inner-input-container">
+        <div class="multiple-inputs-container">
+          <slot></slot>
+        </div>
+        <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
+      </div>
     </div>
-    <ToggleInfoText v-if="infoText" class="info">{{infoText}}</ToggleInfoText>
   </div>
 </template>
 
@@ -27,6 +35,12 @@ export default {
     infoText: {
       type: String,
       required: false
+    },
+    multipleInputs: {
+      type: Boolean,
+      default: false,
+      required: false,
+      description: "Set to true if more than one input is required per line. Inputs will be rendered horizontally"
     }
   }
 
@@ -44,11 +58,16 @@ export default {
     width: 100%;
   }
 
+  .inner-input-container {
+    width: 100%;
+  }
+
   .toggle-formbuilder-input-label {
     display: flex;
     flex-direction: column;
-    width: 300px;
+    width: 20rem;
     justify-content: center;
+    margin-bottom: 20px;
   }
 
   .toggle-formbuilder-label-text {
@@ -59,7 +78,14 @@ export default {
   }
 
   .info {
-    width: 230px;
-    margin: 0 !important;
+    margin: 5px 0 0 0;
+  }
+
+  .multiple-inputs-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    column-gap: 0.875rem;
   }
 </style>

package/src/sass/includes/_as_inputs.scss

@@ -698,7 +698,7 @@ $iconWidth:20px;
     height:100%;
     box-sizing:border-box;
     padding:1rem 0;
-    top:0;
+    top: 0.8rem;
     position: absolute;
     width:2rem;
 }

package/src/sass/includes/_as_modals.scss

@@ -82,3 +82,10 @@
 {
     -webkit-transform: scale(0.8);
 }
+
+.toggle-grid-modal-button-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 20px;
+}

package/src/sass/includes/_as_text.scss

@@ -51,7 +51,7 @@ a {
 }
 
 .toggle-info-text{
-  font-size: 0.85rem;
+  font-size: 0.7rem;
   font-family: "Lato", sans-serif;
 
   color:$toggle-dark-blue;
@@ -60,14 +60,15 @@ a {
   padding-left: 1.25rem;
   margin-top: 5px;
   font-weight: normal;
-  line-height: 1.5;
+  line-height: 1;
 
   &::before{
       content: url('../assets/icons/info.svg');
       width: 1rem;
       position: absolute;
       margin-left:-1.25rem;
-      margin-top: 2px;
+      margin-top: -0.15rem;
+      transform: scale(0.85);
     }
     
   }