toggle-components-library 1.36.1-beta.8 → 1.36.1-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.36.1-beta.8",
+    "version": "1.36.1-beta.9",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/forms/ToggleDatePicker.vue

@@ -6,8 +6,8 @@
         <label class="toggle-input-label">{{label}}</label>
 
         <div class="toggle-date-input-container">
-            <div class="toggle-date-input-calendar-icon">
-                <input type="text" class="toggle-input"  :name="name" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()">
+            <div :class="['toggle-date-input-calendar-icon', {'calendar-icon-disabled' :disabled}]">
+                <input type="text" class="toggle-input"  :name="name" :disabled="disabled" ref="date-input" :id="'toggle-date-input'+_uid" :value="date"  v-on:keypress="$event.preventDefault()" />
             </div>
             <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
         </div>
@@ -101,7 +101,11 @@ export default {
         maxLength:{
             type: Number,
             required:false
-        }
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputCurrency.vue

@@ -3,7 +3,8 @@
 
 
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
+
     <label 
         v-if="label"
         :for="name ? name : 'InputText' " 
@@ -16,6 +17,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -91,8 +93,13 @@ export default {
         currencyDenomination: {
             type: Number,
             default: 100
-        }
-       
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
+
+        },
     },
 
     created : function(){

package/src/components/forms/ToggleInputPercentage.vue

@@ -1,6 +1,6 @@
 <template>
 
-<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid }"  v-on:click="focusClosestInput">
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled }"  v-on:click="focusClosestInput">
 
     <label 
         v-if="label"
@@ -14,6 +14,7 @@
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
+        :disabled="disabled"
         v-model="inputVal"
         @blur="isInputActive = false" 
         @focus="isInputActive = true" 
@@ -77,6 +78,11 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
+        },
+        disabled: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     },
 

package/src/components/forms/ToggleInputText.vue

@@ -105,10 +105,10 @@ export default {
         }
     },
 
-    created : function()
-    {
-        this.$nextTick(() => this.$refs['input_ele'].focus());
-    },
+    // created : function()
+    // {
+    //     this.$nextTick(() => this.$refs['input_ele'].focus());
+    // },
     computed: {
         inputVal: {
             get: function (){

package/src/components/statusbar/ToggleStatusBar.vue

@@ -0,0 +1,74 @@
+<template>
+    <div :class="['toggle-status-bar-container', statusColours, statusSize]">
+        <span class="toggle-status-bar-dot blinking toggle-status-bar-label" v-if="showDot">&#9679;</span>
+        <label class="toggle-status-bar-label">
+            {{ statusName }}
+        </label>
+        
+        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
+            <div class="toggle-status-bar-tooltip">
+                ?
+                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'StatusBar',
+    props: {
+        status: {
+            type: String,
+            required: true,
+            validator: function (value) {
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted', 'failed'].indexOf(value) !== -1;
+            }
+        },
+        size: {
+            type: String,
+            required: false,
+            default: 'regular',
+            validator: function (value) {
+                return ['small', 'regular'].indexOf(value) !== -1;
+            }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        // Capitalise the first letter of the status
+        statusName() {
+            return this.status.charAt(0).toUpperCase() + this.status.slice(1);
+        },
+        // Add the status to the class name
+        statusColours() {
+            return 'toggle-status-bar-' + this.status;
+        },
+        // Add the size to the class name
+        statusSize() {
+            return 'toggle-status-bar-' + this.size;
+        },
+        // Show the dot if the status is active or processing
+        showDot() {
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size == 'regular';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
+        }
+    }
+}
+</script>

package/src/components/tables/ToggleTable.vue

@@ -36,8 +36,8 @@
                         @input="searchChange()"
                     />
                     <ToggleDateRangePicker
-                        v-if="field.type === 'date' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
-                        name="date"
+                        v-if="field.type === 'date_range' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
+                        name="date_range"
                         v-model="searchModels[field.key]"
                         @input="searchChange()"
                     />
@@ -149,7 +149,7 @@ export default {
             if(this.fields){
 
                 for (let i = 0; i < this.fields.length; i++) {
-                    let value = this.fields[i].type == 'date' ? this.setInitialDate(i) : (this.fields[i].value ?? '');
+                    let value = this.fields[i].type == 'date_range' ? this.setInitialDate(i) : (this.fields[i].value ?? '');
 
                     let field_name = this.fields[i].key;
                     this.$set( this.searchModels, field_name, value )
@@ -197,7 +197,7 @@ export default {
 
             tableSearchActive(field)
             {
-                if(field.type === 'date'){
+                if(field.type === 'date_range'){
                     return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput === field.key);
                 }
                 return (this.searchModels[field.key] || this.editingInput === field.key);
@@ -217,13 +217,13 @@ export default {
             closeSearch(field){
 
                 this.editingInput = false;
-                this.searchModels[field.key] = field.type === 'date' ? { start: false, end: false} : '' ;
+                this.searchModels[field.key] = field.type === 'date_range' ? { start: false, end: false} : '' ;
 
                 // check if any search is active; if not, close/shrink header
                 let is_active = false;
                 for(const key in this.searchModels){
 
-                    if(this.getSearchModelTypeFromKey(key) === 'date'){
+                    if(this.getSearchModelTypeFromKey(key) === 'date_range'){
                       if (this.searchModels[key].start || this.searchModels[key].end){
                         is_active = true;
                         break;

package/src/index.js

@@ -83,6 +83,8 @@ import ToggleMetricFunnelChart from "./components/metrics/ToggleMetricFunnelChar
 import ToggleThreeDots from "./components/threedots/ToggleThreeDots.vue";
 import ToggleThreeDotsButton from "./components/threedots/ToggleThreeDotsButton.vue";
 
+import ToggleStatusBar from "./components/statusbar/ToggleStatusBar.vue";
+
 import ToggleCarousel from "./components/carousel/ToggleCarousel.vue";
 import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
@@ -158,6 +160,7 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
+    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,

package/src/sass/includes/_as_inputs.scss

@@ -227,6 +227,11 @@
   }
 }
 
+.calendar-icon-disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
 .calendar-icon-disabled {
   cursor: default;
   opacity: 0.5;

package/src/sass/includes/_as_statusbar.scss

@@ -0,0 +1,179 @@
+.toggle-status-bar-container {
+    font-family: $toggle-font-family;
+    font-size: 16px !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    width: 100%;
+    min-width: 94px;
+    border-radius: 7px;
+}
+
+.toggle-status-bar-small {
+    height: 35px;
+}
+
+// Tooltip
+.toggle-status-bar-tooltip-container{
+    position: absolute;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+    right: 32px;
+    cursor: default;
+
+    .toggle-status-bar-tooltip {
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        text-align: center;
+        border: 1px solid hotpink;
+        border-radius: 50px;
+    }
+    
+    // Tooltip text
+    .toggle-status-bar-tooltip .toggle-status-bar-tooltip-text {
+        visibility: hidden;
+        width: 200px;
+        background-color: rgba(0, 0, 0, .8);
+        color: #fff;
+        text-align: center;
+        padding: 10px;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+        top: -5px;
+        right: 105%;
+    }
+    
+    .toggle-status-bar-tooltip:hover .toggle-status-bar-tooltip-text {
+        visibility: visible;
+    }
+}
+
+
+// Draft colours
+.toggle-status-bar-draft {
+    background-color: #FFB88D;
+
+    .toggle-status-bar-label {
+        color: #A34308;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #A34308;
+        border: 1px solid #A34308;
+    }
+}
+
+// Processing colours
+.toggle-status-bar-processing {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Complete colours
+.toggle-status-bar-complete {
+    background-color: #B3E49F;
+
+    .toggle-status-bar-label {
+        color: #3BB40B;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #3BB40B;
+        border: 1px solid #3BB40B;
+    }
+}
+
+// Inactive colours
+.toggle-status-bar-inactive {
+    background-color: #D7E9F2;
+
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+}
+
+// Active colours
+.toggle-status-bar-active {
+    background-color: #D7E9F2;
+    border: 1px solid #FF4848;
+
+    .toggle-status-bar-label {
+        color: #FF4848;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #FF4848;
+        border: 1px solid #FF4848;
+    }
+}
+
+// Submitted colours
+.toggle-status-bar-submitted {
+    background-color: #D7E9F2;
+    
+    .toggle-status-bar-label {
+        color: #269BE3;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #269BE3;
+        border: 1px solid #269BE3;
+    }
+
+}
+
+// Failed colours
+.toggle-status-bar-failed {
+    background-color: #F2E3E3;
+    border: 1px solid #ED7B7C;
+    
+    .toggle-status-bar-label {
+        color: #ED7B7C;
+    }
+
+    .toggle-status-bar-tooltip {
+        color: #ED7B7C;
+        border: 1px solid #ED7B7C;
+    }
+}
+
+.toggle-status-bar-dot {
+    font-size: 20px;
+    margin: 0 3px 2px 0;
+    float: none !important;
+    padding: 0 !important;
+}
+
+// Dot blinking animation
+.blinking {
+    animation: 2s blink ease infinite;
+}
+
+@keyframes blink {
+
+    from,
+    to {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+}

package/src/sass/main.scss

@@ -21,5 +21,6 @@
 @import "./includes/_as_metrics.scss";
 @import "./includes/_as_threedots.scss";
 @import "./includes/_as_boosters.scss";
+@import "./includes/_as_statusbar.scss";
 @import "./includes/_as_cards.scss";
 @import "./includes/_as_carousels.scss";