toggle-components-library 1.13.1 → 1.14.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "toggle-components-library",
-  "version": "1.13.1",
+  "version": "1.14.3",
   "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/components/forms/ToggleInputNumberUnit.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }" @click="focusClosestInput">
+      <label v-if="label" :for="name ? name : 'ToggleInputNumberUnit' " class="toggle-input-label" > 
+        {{ label }} 
+      </label>
+      <input
+          :name="name ? name : 'ToggleInputNumberUnit' " 
+          :class="[ 'toggle-input', size]"
+          :placeholder="placeholder ? placeholder : '' "
+          :autocomplete="autocomplete ? 'on' : 'off' "
+          :required="required"
+          v-model="inputVal"
+          @blur="onBlur" 
+          @focus="onFocus"
+          @keyup="onKeyup"
+      />
+      <label class="toggle-input-label-error" v-if="isInvalid" :for="name ? name : 'ToggleInputNumberUnit' ">
+          {{ errorMessage }}
+      </label>
+  </div>
+</template>
+
+<script>
+
+import { mixins } from '../mixins/mixins'
+
+export default {
+    mixins:[mixins],
+    props: {
+        value: {
+            type: [Number, String]
+        },
+        allowBlank:{
+            type:Boolean,
+            default:false
+        },
+        name: {
+            type: String,
+            default: "ToggleInputNumberUnit"
+        },
+        label: {
+            type: String,
+            required: false
+        },
+        placeholder: {
+            type: String,
+            required: false
+        },
+        autocomplete: {
+            type: Boolean,
+            default: true
+        },
+        size: {
+            type: String,
+            validator: function (value) {
+                return ['extra-small', 'small', 'medium', 'large', 'full'].indexOf(value) !== -1
+            }
+        },
+        required: {
+            type: Boolean,
+            default: false
+        },
+        isInvalid: {
+            type: Boolean,
+            default: false
+        },
+        errorMessage: {
+            type: String,
+            required: false
+        },
+        appendString: {
+          type: String,
+          required: false
+        },
+        prependString: {
+          type: String,
+          required: false
+        }
+    },
+
+    data() {       
+        return {
+            inputActive: false 
+        };
+    },
+    computed: {
+        inputVal: {
+            get() {
+              if (this.inputActive) {
+                if((this.value === '' || this.value === null) && this.allowBlank)
+                        return '';
+                        
+                    return this.value;
+              } else {
+                  if(this.value === '' || this.value == null || this.value === 0)
+                      return '';
+
+                  return this.value;
+              }
+            },
+            set(modifiedValue) {
+                this.$emit('input', modifiedValue);
+            }
+        },
+        appendStringLength() {
+         return this.appendString.length ?? 0;
+        },
+        prependStringLength() {
+         return this.prependString.length ?? 0;
+        }
+    },
+    methods: {
+        onKeyup() {
+          // Remove any non-numbers from the input value
+          this.$emit('input', this.value.replace(/[^0-9]/g,''))
+        },
+
+        onFocus() {
+          this.inputActive = true;
+          // When the user clicks in the box, remove the append and/or prepend values
+          if ((this.value != 0) && (this.value != '')) {
+            let tempValue = this.value;
+            if (this.appendString) {
+              // First take off the appended string
+              tempValue = this.value.slice(0, -this.appendStringLength)
+            }
+            if (this.prependString) {
+              // Then take off the prepended string
+              tempValue = tempValue.slice(this.prependStringLength, this.value.length)
+            }
+            this.$emit('input', tempValue);
+          }
+        },
+
+        onBlur(){
+          this.inputActive = false;
+
+          // Don't add the unit if the value is left empty
+          if (this.value != '') {
+            // When the user clicks out of the box, add the prepend and/or append values
+            let tempValue = this.value;
+            if (this.appendString) {
+              // First add the append string
+              tempValue += this.appendString; 
+            }
+            if (this.prependString) {
+              // Then add the prepend string
+              tempValue = this.prependString + tempValue;
+            }
+            this.$emit('input', tempValue)
+          }
+        },
+    }
+}
+
+
+
+</script>

package/src/index.js

@@ -51,6 +51,9 @@ 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';
 
 const Components = {
@@ -95,7 +98,9 @@ const Components = {
     ToggleHelperTextSmall,
     ToggleInfoText,
     ToggleInternationalPhoneInputSelect,
-    ToggleFontPicker
+    ToggleFontPicker,
+    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_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);
     }
     
   }