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

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_range' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
+                        name="date_range"
+                        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_range' ? 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_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);
+                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_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_range'){
+                      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

@@ -83,12 +83,13 @@ 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";
 
 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';
@@ -159,11 +160,11 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
+    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,
-    ToggleRewardsCard,
-    ToggleCommentCard
+    ToggleRewardsCard
 }
 
 Object.keys(Components).forEach(name => {

package/src/sass/includes/_as_buttons.scss

@@ -395,7 +395,7 @@
         }
         
         &:hover .contacts-icon {
-            background-color: white;
+            background-image: url("../assets/icons/contacts-white.svg");
         }
     }
     //icons
@@ -418,11 +418,9 @@
     }
     
     .contacts-icon {
-        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.9em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z'/%3E%3C/svg%3E");
-        background-color: #6d90b4;
-        -webkit-mask: var(--svg);
-        mask: var(--svg);
-        mask-repeat: no-repeat;
+        background-image: url("../assets/icons/contacts-greyblue.svg");
+        background-repeat:no-repeat;
+        background-size:contain;
         margin-right: 6px;
         width: 14px;
         height: 14px;
@@ -430,47 +428,6 @@
     }
 }
 
-.toggle-metrics-button-small {
-    padding: 0px 13px;
-    font-size: 12px;
-    &.mini-contacts {
-        font-size: 0.65rem;
-        padding: 5px 12px;
-    }
-    .heatmap-icon {
-        width: 21px;
-        height: 21px;
-    }
-    .email-icon {
-        width: 25px;
-        height: 25px;
-    }
-    .contacts-icon {
-        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='.8em' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --%3E%3Cstyle%3Esvg%7Bfill:%23fff%7D%3C/style%3E%3Cpath d='M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464H398.7c-8.9-63.3-63.3-112-129-112H178.3c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3z'/%3E%3C/svg%3E");
-        -webkit-mask: var(--svg);
-        mask: var(--svg);
-        mask-repeat: no-repeat;
-    }
-}
-
-.toggle-metrics-button-large {
-    padding: 23px 27px;
-    font-size: 17px;
-    &.mini-contacts {
-        font-size: .92rem;
-        padding: 10px 25px;
-    }
-}
-
-.toggle-metrics-button-disabled {
-    opacity: 0.3;
-    cursor: default;
-
-    .heatmap-icon, .email-icon, .contacts-icon {
-        transform: none !important;
-    }
-}
-
 .toggle-button-booster-badge {
     display: flex;
     align-items: center;

package/src/sass/includes/_as_cards.scss

@@ -164,36 +164,3 @@
 
 }
 
-.toggle-comment-card {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 250px;
-    border-radius: 18px;
-    font-size: $toggle-font-size-regular;
-    font-family: $toggle-font-family;
-}
-
-.toggle-comment-card-info {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding: 30px 30px 20px 30px;
-    color: white;
-    border-radius: 30px;
-    width: 100%;
-
-    .toggle-comment-card-text {
-        text-align: justify;
-        line-height: 1.5rem;
-        text-overflow: ellipsis;
-        -webkit-line-clamp: 6;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        display: -webkit-box;
-
-        p {
-            margin: 0
-        }
-    }
-}

package/src/sass/includes/_as_carousels.scss

@@ -28,10 +28,6 @@
             max-width: 100%;
         }
     }
-}
-.toggle-carousel-wrapper {
-    position: relative;
-
     .toggle-carousel-button{
         width: 50px;
         height: 50px;
@@ -106,14 +102,6 @@
                 }
             }
         }
-        &--comments-left-arrow{
-            left: -24px;
-            opacity: 0.8;
-        }
-        &--comments-right-arrow{
-            right: -24px !important;
-            opacity: 0.8;
-        }
         &--next{
             right: 20px;
             @media only screen and (max-width:768px){