toggle-components-library 1.14.0 → 1.14.4

package/package.json

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

package/src/components/elements/ToggleLineBreak.vue

@@ -1,9 +1,27 @@
 <template>
-  <hr class="toggle-line-break"/>
+  <hr :class="classes"/>
 </template>
 
 <script>
 export default {
-name: "LineBreak"
+name: "LineBreak",
+props: {
+    colour: {
+      type: String,
+      default: 'blue',
+      validator: (value) => [
+        'blue',
+        'grey'
+      ].includes(value.toLowerCase())
+    },
+  },
+computed: {
+  classes() {
+    return {
+      'toggle-line-break': this.colour == 'blue',
+      'toggle-line-break-grey': this.colour == 'grey'
+    };
+  },
+}
 }
 </script>

package/src/components/elements/ToggleSectionCollapse.vue

@@ -22,6 +22,10 @@ export default {
       type: String,
       default: "Expandable",
     },
+    startOpen: {
+      type: Boolean,
+      default: false
+    }
   },
   data: function() {
     return {
@@ -29,8 +33,13 @@ export default {
       updated: false,
     }
   },
+  mounted() {
+    if (this.startOpen) {
+      this.visible = true;
+    }
+  },
   beforeUpdate: function() {
-    this.updated = true
+    this.updated = true;
   }
 };
 </script>

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

@@ -0,0 +1,90 @@
+<template>
+  <div class="toggle-formbuilder-input-outer-container">
+    <div class="toggle-formbuilder-input-container">
+      <div class="toggle-formbuilder-input-label">
+        <p v-if="label" class="toggle-formbuilder-label-text">{{label}}</p>
+      </div>
+      <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>
+  </div>
+</template>
+
+<script>
+import ToggleInfoText from '../text/ToggleInfoText.vue';
+
+export default {
+  name: 'ToggleInputLabelLeft',
+  components: {
+    ToggleInfoText
+  },
+  props: {
+    label: {
+      type: String,
+      required: true,
+      default: 'Label'
+    },
+    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"
+    }
+  }
+
+}
+</script>
+
+<style>
+  .toggle-formbuilder-input-outer-container {
+    margin-bottom: 20px;
+    width: 100%;
+  }
+  .toggle-formbuilder-input-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .inner-input-container {
+    width: 100%;
+  }
+
+  .toggle-formbuilder-input-label {
+    display: flex;
+    flex-direction: column;
+    width: 20rem;
+    justify-content: center;
+    margin-bottom: 20px;
+  }
+
+  .toggle-formbuilder-label-text {
+    font-size: 16px;
+    color: #202C38;
+    font-family: "Lato", sans-serif;
+    font-weight: normal;
+  }
+
+  .info {
+    margin: 5px 0 0 0;
+  }
+
+  .multiple-inputs-container {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    column-gap: 0.875rem;
+  }
+</style>

package/src/index.js

@@ -52,6 +52,7 @@ import ToggleInfoText from "./components/text/ToggleInfoText.vue";
 import ToggleFontPicker from "./components/forms/ToggleFontPicker.vue";
 
 import ToggleInputNumberUnit from "./components/forms/ToggleInputNumberUnit.vue";
+import ToggleInputLabelLeft from "./components/forms/ToggleInputLabelLeft.vue";
 
 import './sass/main.scss';
 
@@ -98,7 +99,8 @@ const Components = {
     ToggleInfoText,
     ToggleInternationalPhoneInputSelect,
     ToggleFontPicker,
-    ToggleInputNumberUnit
+    ToggleInputNumberUnit,
+    ToggleInputLabelLeft
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_elements.scss

@@ -1,11 +1,15 @@
 .toggle-line-break {
   border-bottom: 1px solid $toggle-blue;
 }
+.toggle-line-break-grey {
+  border-bottom: 1px solid #D1D1D1;
+}
 .toggle-section-collapse {
   .toggle-section-collapse-header {
     width: 100%;
     min-height: 25px;
     padding: 1em 0; 
+    cursor: pointer;
   }
   .toggle-section-collapse-title {
     max-width: 80%;

package/src/sass/includes/_as_gridbuilder.scss

@@ -6,6 +6,7 @@
 	display: flex;
 	align-items: center;
 	position:relative;
+	overflow-y: hidden;
 }
 .toggle-grid-input-row-preview{
 	width: calc(100% - 8rem);

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

@@ -43,6 +43,7 @@
 	height:1.5rem;
 	right:1rem;
 	cursor: pointer;
+  z-index: 99;
     opacity   : 0.5;
     &:hover{
     	opacity: 1;
@@ -81,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);
     }
     
   }