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

package/package.json

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

package/src/components/buttons/ToggleMetricsButton.vue

@@ -1,6 +1,6 @@
 <template>
-    <button :class="['toggle-metrics-button', buttonStyle, 'toggle-metrics-button-' + size, {'toggle-metrics-button-disabled': disabled }]" :style="styles" @click="click" :disabled="disabled">
-        <div :class="icon" :style="styles ? 'background-color:' + styles.color : ''"></div>
+    <button :class="['toggle-metrics-button', buttonStyle]" @click="click">
+        <div :class="icon"></div>
         <slot>{{buttonText}}</slot>
     </button>
 </template>
@@ -19,27 +19,8 @@
         },
         icon: {
           type: String,
-          required: false,
-          validator: function(value) {
-            return ["heatmap-icon", "email-icon", "contacts-icon"].indexOf(value) !== -1;
-          }
+          required: true,
         },
-        size: {
-          type: String,
-          default: "medium",
-          required: false,
-          validator: function(value) {
-            return ["small", "medium", "large"].indexOf(value) !== -1;
-          }
-        },
-        styles: {
-          type: Object,
-          required: false,
-        },
-        disabled: {
-          type: Boolean,
-          default: false
-        }
       },
       methods: {
         click() {

package/src/components/carousel/ToggleCarousel.vue

@@ -1,34 +1,28 @@
 <template>
-    <div class="toggle-carousel-wrapper">
-        <swiper
-            ref="swiper"
-            class="swiper toggle-carousel"
-            :class="[
-                carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
-                carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
-            ]"
-            :options="carouselOptions"
-            @slideChangeTransitionStart="onSlideTransition"
-        >
-            <slot></slot>
-        </swiper>
-        <div v-if="carouselPrev && shouldShowArrows"
+    <swiper
+        ref="swiper"
+        class="swiper toggle-carousel"
+        :class="[
+            carouselStyle == 'voucher' && slidesLength > 1 ? 'toggle-carousel--voucher' : '', 
+            carouselStyle == 'voucher' && isEnd && slidesLength > 1 ? 'toggle-carousel--voucher-end' : ''
+        ]"
+        :options="carouselOptions"
+        @slideChangeTransitionStart="onSlideTransition"
+    >
+        <slot></slot>
+        <div v-if="carouselPrev && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--prev"
-            :class="['toggle-carousel-button--' + carouselNavPosition,
-            {'toggle-carousel-button--disabled': prevDisabled},
-            {'toggle-carousel-button--comments-left-arrow': carouselStyle == 'comments'}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': prevDisabled}]"
             @click="slidePrev"  
             slot="button-prev"
         ></div>
-        <div v-if="carouselNext && shouldShowArrows"
+        <div v-if="carouselNext && slidesLength > 1" 
             class="toggle-carousel-button toggle-carousel-button--next"
-            :class="['toggle-carousel-button--' + carouselNavPosition,
-            {'toggle-carousel-button--disabled': nextDisabled},
-            {'toggle-carousel-button--comments-right-arrow': carouselStyle == 'comments'}]"
+            :class="['toggle-carousel-button--' + carouselNavPosition, {'toggle-carousel-button--disabled': nextDisabled}]"
             @click="$refs.swiper.swiperInstance.slideNext()"  
             slot="button-next"
         ></div>
-    </div>
+    </swiper>
 </template>
 
 <script>
@@ -44,7 +38,6 @@ export default {
             prevDisabled: false,
             nextDisabled: false,
             slidesLength: 0,
-            slidesShownPerView: 0,
             isEnd: false
         };
     },
@@ -105,7 +98,6 @@ export default {
         },
         refreshCarousel(){
             this.slidesLength = this.$refs.swiper.swiperInstance.slides.length;
-            this.slidesShownPerView = this.$refs.swiper.swiperInstance.slidesPerViewDynamic()
             this.onSlideTransition();
         },
         onSlideTransition(){
@@ -129,11 +121,6 @@ export default {
                 this.nextDisabled = false;
             }
         }
-    },
-    computed: {
-      shouldShowArrows() {
-        return this.slidesLength > this.slidesShownPerView
-      }
     }
 }
 </script>

package/src/components/carousel/ToggleCarouselSlide.vue

@@ -1,5 +1,5 @@
 <template>
-    <swiper-slide class="toggle-carousel-slide">
+    <swiper-slide class="toggle-carousel-slide" :style="'width:' + slideWidth + '; height:' + slideHeight">
         <slot></slot>
     </swiper-slide>
 </template>

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,6 +39,11 @@ import { mixins } from '../mixins/mixins'
 
 export default {
     mixins:[mixins],
+    data() {
+        return {
+          show: false
+        }
+    },
     props: {
         value: {},
         name: {
@@ -87,6 +92,7 @@ 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,9 +19,11 @@
         :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' "
     >
@@ -103,7 +105,9 @@ export default {
         }
     },
 
-    created : function(){
+    created : function()
+    {
+        this.$nextTick(() => this.$refs['input_ele'].focus());
     },
     computed: {
         inputVal: {
@@ -118,6 +122,11 @@ export default {
     },
     methods: {
 
+        handleEscPress()
+        {
+            this.$emit('bail');
+        },
+
         /*
         * Concat message for count characters
         * @return string

package/src/components/metrics/ToggleMetricSingleMetric.vue

@@ -2,9 +2,7 @@
     <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}}
-            <span v-if="score && value.maxScore" class="toggle-metric-score-rating">/{{value.maxScore}}</span>
-        </h1>
+        <h1 class="toggle-metric metric-value" v-else>{{metricValue}}</h1>
     </div>
 </template>
 
@@ -23,20 +21,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', 'score'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
         /**
         * Component's value
         */
         value: {
-            type: [String, Number, Object],
+            type: [String, Number],
             required: true
         },
         /**
@@ -89,17 +87,14 @@ export default {
                 case 'currency':
                     return (this.value/this.currencyDenomination).toLocaleString(this.currencyLocale, {style: 'currency', currency: this.currencyCode});
                 case'percentage':
-                    return `${this.value} %`;
-                case 'score':
-                    return this.value.score;
+                    return `${this.value} %`
                 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', 'score'].indexOf(value) !== -1
+                return ['text', 'number', 'percentage', 'currency'].indexOf(value) !== -1
             }
         },
         /**
         * single metric component value
         */
         singleMetricVal: {
-            type: [String, Number, Object],
+            type: [String, Number],
             required: true
         },
         /**
@@ -112,10 +112,6 @@ export default {
         inverse_trend_impact: {
             type: Boolean,
             default: false
-        },
-        showTrendForAllZeros: {
-          type: Boolean,
-          default: false
         }
     },
 
@@ -199,7 +195,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, this.showTrendForAllZeros);
+                let result = this.calcTrendImpact(trendImpactVals, this.trend_impact_base);
 
                 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, show_trend_for_all_zeros){
+        calcTrendImpact(values, trend_impact_base){
 
             // If all values in the values array are 0 return 0;
-            if (!show_trend_for_all_zeros && values.every((val) => val === 0)){
+            if (values.every((val) => val === 0)){
                return false;
             }
 

package/src/components/tables/ToggleTable.vue

@@ -3,29 +3,56 @@
     <div>
 
     <table class="toggle-table">
-        <thead :class="{'toggle-table-any-search-active': searchActive}">
+        <thead :class="{'toggle-table-any-search-active': anySearchActive}">
             <tr class="toggle-tablee-tr">
-              <th 
-                  scope="col" 
-                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"  
-                  v-for="(field, index) in headers" 
+              <th
+                  scope="col"
+                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"
+                  v-for="(field, index) in headers"
+                  :colspan="field.colspan"
                   :key="index"
                   :style="'width:'+field.width"
                   @click="activateSearch(field)"
               >
-                  <div class="toggle-table-th-inner">
+                  <div class="toggle-table-th-inner" @transitionend="handleTransitionEnd">
+
                     <span class="toggle-table-th-title">{{field.label}}</span>
                     <span class="toggle-table-close-search" v-on:click.stop @click="closeSearch(field)"></span>
-                    <ToggleInputText type="text" :ref="field.key+'-input'" v-model="searchModels[field.key]" @input="searchChange(field)" 
-                    v-if="field.type == 'text' && (searchModels[field.key] || editingInput == field.key)" />
-                    <ToggleInputSelect style="margin-top:2px;" size="small" v-if="field.type == 'select'  && (searchModels[field.key] || editingInput == field.key)"  :options="field.select_options" v-model="searchModels[field.key]" @input="val=>searchChange(val, field)"/>
 
-                    <ToggleDateRangePicker v-if="field.type == 'date' && (searchModels[field.key].start || searchModels[field.key].end || editingInput == field.key)" name="date" v-model="searchModels[field.key]"  @input="val=>searchChange(val, field)" />
+                    <ToggleInputText
+                        v-if="field.type === 'text' && (searchModels[field.key] || editingInput === field.key) && applyFocus"
+                        type="text"
+                        :ref="field.key+'-input'"
+                        v-model="searchModels[field.key]"
+                        @input="searchChange()"
+                        @bail="closeSearch(field)"
+                    />
+                    <ToggleInputSelect
+                        style="margin-top:2px;"
+                        :size="'small'"
+                        v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key) && applyFocus"
+                        :options="field.select_options"
+                        v-model="searchModels[field.key]"
+                        @input="searchChange()"
+                    />
+                    <ToggleDateRangePicker
+                        v-if="field.type === 'date' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
+                        name="date"
+                        v-model="searchModels[field.key]"
+                        @input="searchChange()"
+                    />
                   </div>
               </th>
-              
+
             </tr>
         </thead>
+        <tr class="empty-table" v-if="(items && items.length === 0) && !loading">
+          <td :colspan="headers.length">
+            <div class="full">
+              <div class="empty-area"><p>{{ emptyTableMessage }}</p></div>
+            </div>
+          </td>
+        </tr>
         <tbody v-if="!$slots.default || !$slots.default.length">
             <ToggleTableRow v-for="(item, index) in items" :key="index" >
                 <ToggleTableColumn v-for="(column, column_index) in item" :key="column_index">{{column}}</ToggleTableColumn>
@@ -62,20 +89,34 @@ export default {
                 type: [Array]
             },
             total:{
-                type: [Number] 
+                type: [Number]
             },
             per_page:{
-                type: [Number] 
+                type: [Number]
             },
             page:{
                 type: [Number],
                 default:1
+            },
+            loading: {
+                type: Boolean
+            },
+            emptyTableMessage: {
+                type: String,
+                default: "No rows returned."
+            },
+            searchDebounce: {
+                type: [Number],
+                default: 500
             }
-        },  
+        },
         data : function(){
             return {
                 editingInput:false,
-                searchModels:{}
+                searchModels:{},
+                anySearchActive: false,
+                applyFocus: false,
+                searchTimeout: null
             };
         },
         computed: {
@@ -97,36 +138,23 @@ export default {
 
             headers() {
                 if(!this.fields){
-                    return Object.keys(this.items[0]);                 
+                    return Object.keys(this.items[0]);
                 }
                 return this.fields;
             },
 
-            searchActive() { 
-                if(this.editingInput) {
-                    return true;
-                }
-                for(let col in this.searchModels){
-                    if(!this.searchModels[col])
-                        return false;
-                    if (this.searchModels[col].start !== undefined) {
-                        return true;
-                    }
-                    else if(this.searchModels[col]) return true;
-                }
-                return false;
-            },
-
-            
         },
         created : function(){
 
             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' ? this.setInitialDate(i) : (this.fields[i].value ?? '');
+
                     let field_name = this.fields[i].key;
                     this.$set( this.searchModels, field_name, value )
                     if(value){
+                        this.applyFocus = true;
                         // if date has an initial value set, show it.
                         if(typeof value.start !== 'undefined'){
                             if(value.start.length) this.activateSearch(this.fields[i]);
@@ -137,20 +165,29 @@ export default {
                     this.searchChange();
                 }
             }
-           
+
         },
 
         beforeDestroy: function () {
-        },
-        watch:{
-           
         },
         mounted : function ()
         {
 
         },
-        
+
         methods:{
+
+            handleTransitionEnd(event){
+              if(event.propertyName === 'height'){
+                  if(this.anySearchActive && !this.applyFocus){
+                      this.applyFocus = true;
+                  }
+                  if(!this.anySearchActive && this.applyFocus){
+                      this.applyFocus = false;
+                  }
+              }
+            },
+
             // set initial date
             setInitialDate(index){
                 let value = this.fields[index].value;
@@ -160,36 +197,64 @@ export default {
 
             tableSearchActive(field)
             {
-                if(field.type == 'date'){
-                    return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput == field.key);
+                if(field.type === 'date'){
+                    return (this.searchModels[field.key].start || this.searchModels[field.key].end || this.editingInput === field.key);
                 }
-                return (this.searchModels[field.key] || this.editingInput == field.key);
+                return (this.searchModels[field.key] || this.editingInput === field.key);
 
             },
 
+
+            getSearchModelTypeFromKey(key){
+              for(let i=0; i<this.fields.length; i++){
+                if(this.fields[i].key === key){
+                  return this.fields[i].type;
+                }
+              }
+              return null;
+            },
+
             closeSearch(field){
+
                 this.editingInput = false;
-                this.searchModels[field.key] = field.type == 'date' ? { start: false, end: false} : '' ;
+                this.searchModels[field.key] = field.type === 'date' ? { 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.searchModels[key].start || this.searchModels[key].end){
+                        is_active = true;
+                        break;
+                      }
+                    }else if(this.searchModels[key] && this.searchModels[key] !== ''){
+                        is_active = true;
+                        break;
+                    }
+                }
+                this.anySearchActive = is_active;
                 this.searchChange();
             },
 
             searchChange(){
-                this.$emit('search', this.fieldsWithSearch);
+                clearTimeout(this.searchTimeout);
+                this.searchTimeout = setTimeout(()=>{
+                    this.$emit('search', this.fieldsWithSearch);
+                },this.searchDebounce);
+
             },
 
             /* activateSearch
              * When a user clicks a searchable column name, show it as active, and focus the child input field (unless it's already active)
             */
             activateSearch(field){
-                if(!field.filterable) return;
-                if(field.type === 'date'){
-                    this.datePickerOpen = true;
-                }
+                if(!field.filterable || field.readonly) return;
                 this.editingInput = field.key;
-                //this.$nextTick(() => this.$refs[this.editingInput + '-input'].focus())
+                this.anySearchActive = true;
             },
 
-            
+
 
         }
     }

package/src/index.js

@@ -88,7 +88,6 @@ import ToggleCarouselSlide from "./components/carousel/ToggleCarouselSlide.vue";
 
 import ToggleEmailCard from "./components/cards/ToggleEmailCard.vue";
 import ToggleRewardsCard from "./components/cards/ToggleRewardsCard.vue";
-import ToggleCommentCard from "./components/cards/ToggleCommentCard.vue";
 
 
 import './sass/main.scss';
@@ -162,8 +161,7 @@ const Components = {
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard,
-    ToggleCommentCard
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {