toggle-components-library 1.36.1 → 1.36.3

package/src/components/forms/ToggleDatePicker.vue

@@ -1,167 +1,258 @@
 <template>
 
-<div class="toggle-date-container" :class="['datepicker-trigger',{'toggle-input-is-invalid':isInvalid }]">
-
-
-        <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>
-            <button type="button" class="toggle-clear" v-on:click="clearDate" v-if="displayValue"></button>
-        </div>
-
-        <AirbnbStyleDatepicker
-            :trigger-element-id="'toggle-date-input'+_uid"
-            :trigger="datePickerOpen"
-            :mode="'single'"
-            :date-one="displayValue"
-            @date-one-selected="val => { displayValue = val}"
-            @closed="toggleDatePickerState(false)"
-            @cancelled="toggleDatePickerState(false)"
-            :monthsToShow="1"
-            :showShortcutsMenuTrigger="false"
-        />
-        <label
-            class="toggle-input-label-error" 
-            v-if="isInvalid"
-            :for="name ? name : 'ToggleInputText' "
-        >
-            {{ errorMessage }}
-        </label>
+  <div class="toggle-date-container" :class="[{'visible': show}, 'datepicker-trigger',{'toggle-input-is-invalid':isInvalid }, { 'toggle-input-is-disabled': disabled }]">
 
+    <label class="toggle-input-label">{{label}}</label>
+
+    <div :class="['toggle-date-input-container', 'toggle-date-input-container-' + size, {'toggle-date-input-disabled': disabled} ]">
+      <date-picker v-model="inputVal" prefix-class="toggle-mxdatepicker" :formatter="momentFormat" :range="range" :type="type" :disabled="disabled">
+      </date-picker>
     </div>
+
+    <label
+        class="toggle-input-label-error"
+        v-if="isInvalid"
+        :for="name ? name : 'ToggleInputText' "
+    >
+      {{ errorMessage }}
+    </label>
+
+  </div>
 </template>
 
 <script>
 
-    import Vue from "vue";
-    import { mixins } from '../mixins/mixins'
-    import 'vue-airbnb-style-datepicker/dist/vue-airbnb-style-datepicker.min.css'
-    import AirbnbStyleDatepicker from 'vue-airbnb-style-datepicker';
-    import variables from '../../sass/includes/_as_variables.scss';
-  
-    Vue.use(AirbnbStyleDatepicker, {
-        colors: {
-            selected     : variables.toggleblue,
-            inRange      : variables.togglelightblue,
-            selectedText : variables.togglewhite,
-            text         : variables.toggleinputcolour,
-            inRangeBorder: variables.togglewhite,
-            disabled     : variables.togglewhite,
-        },
-        texts: {
-            apply: 'Done'
-        },
-    });
+import { mixins } from '../mixins/mixins'
+import moment from 'moment';
+import DatePicker from 'vue2-datepicker';
 
 export default {
-    mixins:[mixins],
-    components:{},
-    props: {
-        value: {
-            type: [Boolean,Date]
-        },
-        
-        name: {
-            type: String,
-            default: "ToggleInputText"
-        },
-        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
-        },
-        maxLength:{
-            type: Number,
-            required:false
-        }
+  mixins:[mixins],
+  components:{
+    DatePicker
+  },
+  props: {
+    set_value: {
+      type: [Boolean,Date,Object]
     },
-
-    created : function(){
+    value: {},
+    // datepicker mode, see: https://www.npmjs.com/package/vue2-datepicker#props
+    type: {
+      type: String,
+      validator: function (value) {
+        return ['date', 'datetime', 'year', 'month', 'time', 'week'].indexOf(value) !== -1
+      },
+      default: "date"
     },
-    data : function(){
-        return {
-            datePickerOpen: false,
-        };
+    // singular date or range between 2 dates
+    range: {
+      type: Boolean,
+      default: false
     },
-    watch :{
-
-        datePickerOpen(newVal){
-            let state = newVal ? 'open' : 'closed';
-            this.$emit('state', state);
-        }
-       
+    name: {
+      type: String,
+      default: "ToggleInputText"
     },
-    computed: {
-        date() {
-            return this.dateRangeView(this.displayValue)
-        },
-
-        // plugin only accepts MM/DD/YYYY, so change this so that it excepts and outputs JS dates
-        displayValue: {
-            get: function() {
-                return this.formatDate(this.value)
-            },
-            set: function(modifiedValue) {
-                if(modifiedValue){
-                    modifiedValue = new Date(new Date(modifiedValue+' 00:00:00').toISOString());
-                }
-                else modifiedValue = false;
-                this.$emit('input', modifiedValue);
-            }
-        }
+    label: {
+      type: String,
+      required: false
     },
-    methods: {
-        
-        clearDate()
-        {
-            this.displayValue = '';
-        },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    autocomplete: {
+      type: Boolean,
+      default: true
+    },
+    size: {
+      type: String,
+      validator: function (value) {
+        return ['small', 'medium'].indexOf(value) !== -1
+      },
+      default: 'medium'
+    },
+    displayFormat: {
+        type: String,
+        default: 'DD/MM/Y'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    isInvalid: {
+      type: Boolean,
+      default: false
+    },
+    errorMessage: {
+      type: String,
+      required: false
+    },
+    maxLength:{
+      type: Number,
+      required:false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // in toggle-table context, if search bar height expand transition has finished
+    searchIsOpen: {
+      type: Boolean,
+      required: false,
+      default: null
+    }
+  },
+  data : function(){
+    return {
+      show: false,
 
-        toggleDatePickerState(state){
-            this.$nextTick( () => {
-                if(typeof state === 'boolean')
-                    this.datePickerOpen = state;
-                else this.datePickerOpen = !this.datePickerOpen;
-            });
+      momentFormat: {
+        //[optional] Date to String
+        stringify: (date) => {
+          return date ? moment(date).format(this.displayFormat) : ''
         },
+        //[optional]  String to Date
+        parse: (value) => {
+          return value ? moment(value, this.displayFormat).toDate() : null
+        }
+      }
+    };
+  },
+  created : function(){
+    // in table mode, has search bar expand transition finished?
+    if(this.searchIsOpen === null || this.searchIsOpen){
+      this.show = true;
+    }
+
+  },
+  watch :{
+    // search bar expand transition / if in table context
+    searchIsOpen(new_value){
+      if(new_value){
+        this.show = true;
+      }
     }
+  },
+  computed: {
+
+    inputVal: {
+      get: function (){
+        return this.convertRangeObject(this.value);
+      },
+      set: function (value){
+        this.$emit('input', this.convertRangeObject(value));
+      }
+    },
+
+  },
+  methods: {
+    // convert singular date to range. Plugin uses array with 2 values / parents in Toggle dash expect object with start & end keys
+    convertRangeObject(input)
+    {
+      if(!this.range){
+        return input
+      }
+      return Array.isArray(input) ? {
+        start: input[0],
+        end: input[1]
+      } : [
+        input.start,
+        input.end
+      ];
+    },
+  }
 }
 
 
 </script>
 
+<style scoped>
+.toggle-date-container {
+  display: none;
+  &.visible {
+    display: block;
+  }
+}
+</style>
+
 <style lang="scss">
+$namespace: 'toggle-mxdatepicker';
+
+@import '~vue2-datepicker/scss/index.scss';
 
-   
 
+.toggle-mxdatepicker-datepicker, .toggle-mxdatepicker-datepicker-range {
+  width: 100%;
+}
+.toggle-mxdatepicker-input {
+  padding: 0.5rem 3.5rem 0.5rem 1rem;
+  background-color: #F4F6F7 !important;
+  height: 2.8rem;
+  width: 100%;
+  box-shadow: none;
+  border: 0;
+  color: #354b64 !important;
+  font-weight: bold !important;
+  font-size: 1.2rem !important;
+}
+
+i.toggle-mxdatepicker-icon-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url('../../assets/icons/delete.svg');
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+i.toggle-mxdatepicker-icon-calendar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  &:after{
+    cursor: pointer;
+    content: url("../../assets/icons/calendar.svg");
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    pointer-events: none;
+    z-index: 2;
+  }
+}
+
+.toggle-date-input-container-small {
+  .toggle-mxdatepicker-input {
+    background-color: transparent;
+    margin-top: 11px;
+    padding: 1px 1.65rem 1px 3px;
+    font-size: 0.9rem !important;
+    height: 1.5rem;
+  }
+  i.toggle-mxdatepicker-icon-calendar, i.toggle-mxdatepicker-icon-clear {
+    margin-top: 6px;
+    width: 1em;
+    height: 1em;
+    &:after{
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.toggle-mxdatepicker-calendar-content {
+  height: auto;
+}
 </style>
 
 

package/src/components/forms/ToggleInputSelect.vue

@@ -1,18 +1,18 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'ToggleInputSelect' "
+        :for="name ? name : 'ToggleInputSelect' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
 
     <div class="toggle-input-select-container">
-        <select
-            :name="name ? name : 'ToggleInputSelect' "
+        <select 
+            :name="name ? name : 'ToggleInputSelect' " 
             :class="[ 'toggle-input-select', size]"
-            v-model="inputVal"
+            v-model="inputVal" 
             :autocomplete="autocomplete ? 'on' : 'off' "
             :required="required"
             :disabled="disabled"
@@ -24,7 +24,7 @@
     </div>
 
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -39,11 +39,6 @@ import { mixins } from '../mixins/mixins'
 
 export default {
     mixins:[mixins],
-    data() {
-        return {
-          show: false
-        }
-    },
     props: {
         value: {},
         name: {
@@ -92,7 +87,6 @@ export default {
     },
 
     created : function(){
-
     },
     computed: {
         inputVal: {

package/src/components/forms/ToggleInputText.vue

@@ -1,16 +1,16 @@
 <template>
 
 <div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+    <label 
         v-if="label"
-        :for="name ? name : 'InputText' "
+        :for="name ? name : 'InputText' " 
         class="toggle-input-label"
-    > {{ label }}
+    > {{ label }} 
     </label>
     <span class="toggle-input-counter" v-if="maxLength">{{messageLength(inputVal, maxLength)}}</span>
     <input
         :type="type"
-        :name="name ? name : 'ToggleInputText' "
+        :name="name ? name : 'ToggleInputText' " 
         :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
@@ -19,11 +19,9 @@
         :maxlength="maxLength"
         :disabled="disabled"
         :readonly="readonly"
-        :ref="'input_ele'"
-        @keyup.esc="handleEscPress"
     />
     <label
-        class="toggle-input-label-error"
+        class="toggle-input-label-error" 
         v-if="isInvalid"
         :for="name ? name : 'ToggleInputText' "
     >
@@ -105,9 +103,7 @@ export default {
         }
     },
 
-    created : function()
-    {
-        this.$nextTick(() => this.$refs['input_ele'].focus());
+    created : function(){
     },
     computed: {
         inputVal: {
@@ -122,11 +118,6 @@ export default {
     },
     methods: {
 
-        handleEscPress()
-        {
-            this.$emit('bail');
-        },
-
         /*
         * Concat message for count characters
         * @return string

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,7 +2,9 @@
     <div>
         <h3 class="toggle-metric metric-label">{{label}}</h3>
         <div class="single-metric-icon" v-if="metricPending && label.length == 0"></div>
-        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}
+            <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
+        </h1>
     </div>
 </template>
 
@@ -21,20 +23,20 @@ export default {
             type: String,
             default: "ToggleMetricSingleMetric"
         },
-                /**
+        /**
         * Type of the value, this will affect on the format shown
         */
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * Component's value
         */
         value: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**
@@ -87,14 +89,17 @@ export default {
                 case 'currency':
                     return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
                 case'percentage':
-                    return `${this.value} %`
+                    return `${this.value} %`;
+                case 'score':
+                    return this.value.score;
                 default:
                     return this.value.toLocaleString();
 
             }
+        },
+        score() {
+            return this.type === 'score';
         }
-
-       
     }
 }
 

package/src/components/metrics/ToggleMetricSparkLine.vue

@@ -54,14 +54,14 @@ export default {
         type : {
             type: String,
             validator: function (value) {
-                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency', 'score'].indexOf(value) !== -1
             }
         },
         /**
         * single metric component value
         */
         singleMetricVal: {
-            type: [String, Number],
+            type: [String, Number, Object],
             required: true
         },
         /**
@@ -112,6 +112,10 @@ export default {
         inverse_trend_impact: {
             type: Boolean,
             default: false
+        },
+        showTrendForAllZeros: {
+          type: Boolean,
+          default: false
         }
     },
 
@@ -195,7 +199,7 @@ export default {
 
                 const trendImpactVals = this.sparkLineVal[0].data[0].y  || this.sparkLineVal[0].data[0].y === 0 ? this.sparkLineVal[0].data.map(data => data.y) : this.sparkLineVal[0].data;
 
-                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base);
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base, this.showTrendForAllZeros);
 
                 if (this.inverse_trend_impact === true && result != false)
                     return result *-1;

package/src/components/mixins/mixins.js

@@ -139,10 +139,10 @@ export const charts = {
         *
         * @return { {Integer} 1, 0,-1 }
         */
-        calcTrendImpact(values, trend_impact_base){
+        calcTrendImpact(values, trend_impact_base, show_trend_for_all_zeros){
 
             // If all values in the values array are 0 return 0;
-            if (values.every((val) => val === 0)){
+            if (!show_trend_for_all_zeros && values.every((val) => val === 0)){
                return false;
             }