toggle-components-library 1.15.0 → 1.16.0

package/package.json

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

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/ToggleColourPicker.vue

@@ -1,21 +1,23 @@
 <template>
     <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }">
 
-        <div  ref="colorpicker">
-            <label class="toggle-input-label">{{label}}</label>
-            <input :name="name" type="text" class="toggle-input-colour-picker toggle-input" v-model="colorValue" @input="updateFromInput" :style="'outline-color:'+borderColour"/>
-            <span class="toggle-color-picker-current-color" :style="'background-color: ' + borderColour" @click="togglePicker()"></span>
+        <div class="color-picker-container" ref="colorpicker">
+            <div>
+                <label class="toggle-input-label">{{label}}</label>
+                <input :name="name" type="text" class="toggle-input-colour-picker toggle-input" v-model="colorValue" @input="updateFromInput" :style="'outline-color:'+borderColour"/>
+                <span class="toggle-color-picker-current-color" :style="'background-color: ' + borderColour" @click="togglePicker()"></span>
+            </div>
+
+            <chrome-picker class="toggle-chrome-picker" :value="colors" v-if="displayPicker"  @input="updateFromPicker"/>
+
+            <label
+                class="toggle-input-label-error" 
+                v-if="isInvalid"
+                :for="name ? name : 'ToggleInputText' "
+            > 
+                {{ errorMessage }}
+            </label>
         </div>
-
-        <chrome-picker class="toggle-chrome-picker" :value="colors" v-if="displayPicker"  @input="updateFromPicker"/>
-
-        <label
-            class="toggle-input-label-error" 
-            v-if="isInvalid"
-            :for="name ? name : 'ToggleInputText' "
-        > 
-            {{ errorMessage }}
-        </label>
     </div>
 </template>
 
@@ -167,7 +169,6 @@ export default {
             },
 
             documentClick(e) {
-                console.log('fda');
                 var el = this.$refs.colorpicker,
                     target = e.target;
                 if(el !== target && !el.contains(target)) {

package/src/components/forms/ToggleFontPicker.vue

@@ -48,6 +48,7 @@ export default {
             'Bodoni Moda',
             'EB Garamond',
             'Fredoka One',
+            'Helvetica',
             'IBM Plex Mono',
             'Lato',
             'Libre Baskerville',

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

@@ -9,6 +9,7 @@
     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

@@ -634,6 +634,7 @@ $iconWidth:20px;
     height: 2rem;
     width: 2rem;   
     border-radius: 0% 50% 50% 0%;
+    margin-left: -5px;
 }
 .toggle-input-colour-picker {
     box-shadow: 0px 0px 1px $toggle-placeholder-grey;
@@ -698,7 +699,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);
     }
     
   }