toggle-components-library 1.33.0-beta.2 → 1.33.0-beta.3

package/src/components/tables/ToggleTable.vue

@@ -3,29 +3,58 @@
     <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)"
+                        type="text"
+                        :ref="field.key+'-input'"
+                        v-model="searchModels[field.key]"
+                        @input="searchChange(field)"
+                        @bail="closeSearch(field)"
+                        :searchIsOpen="searchIsOpen"
+                    />
+                    <ToggleInputSelect
+                        style="margin-top:2px;"
+                        :size="'small'"
+                        v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key)"
+                        :searchIsOpen="searchIsOpen"
+                        :options="field.select_options"
+                        v-model="searchModels[field.key]"
+                        @input="val=>searchChange(val, field)"
+                    />
+                    <ToggleDatePicker
+                        v-if="field.type === 'date_range' && (searchModels[field.key].start || searchModels[field.key].end || editingInput === field.key)"
+                        name="date_range" size="small"
+                        :searchIsOpen="searchIsOpen"
+                        @input="val=>searchChange(val, field)" type="date" :range="true" label="Input label" v-model="searchModels[field.key]"
+                    />
                   </div>
               </th>
-              
+
             </tr>
         </thead>
+        <tr class="empty-table" v-if="(items && items.length === 0) && !loading">
+          <td colspan="5">
+            <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>
@@ -44,7 +73,7 @@
 
 import { mixins } from '../mixins/mixins';
 
-import ToggleDateRangePicker from '../forms/ToggleDateRangePicker.vue';
+import ToggleDatePicker from '../forms/ToggleDatePicker.vue';
 import ToggleInputText from '../forms/ToggleInputText.vue';
 import ToggleInputSelect from '../forms/ToggleInputSelect.vue';
 import ToggleTableRow from '../tables/ToggleTableRow.vue';
@@ -53,7 +82,7 @@ import TogglePagination from '../tables/TogglePagination.vue';
 
 export default {
         mixins:[mixins],
-        components:{ToggleDateRangePicker, ToggleInputText, ToggleInputSelect, ToggleTableColumn, ToggleTableRow, TogglePagination},
+        components:{ToggleDatePicker, ToggleInputText, ToggleInputSelect, ToggleTableColumn, ToggleTableRow, TogglePagination},
         props: {
             items: {
                 type: [Array]
@@ -62,20 +91,30 @@ 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."
             }
-        },  
+        },
         data : function(){
             return {
                 editingInput:false,
-                searchModels:{}
+                searchModels:{},
+                anySearchActive: false,
+                searchIsOpen: false,
+                searchDebounce: null
             };
         },
         computed: {
@@ -97,36 +136,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.searchIsOpen = 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 +163,29 @@ export default {
                     this.searchChange();
                 }
             }
-           
+
         },
 
         beforeDestroy: function () {
-        },
-        watch:{
-           
         },
         mounted : function ()
         {
 
         },
-        
+
         methods:{
+
+            handleTransitionEnd(event){
+              if(event.propertyName === 'height'){
+                  if(this.anySearchActive && !this.searchIsOpen){
+                      this.searchIsOpen = true;
+                  }
+                  if(!this.anySearchActive && this.searchIsOpen){
+                      this.searchIsOpen = false;
+                  }
+              }
+            },
+
             // set initial date
             setInitialDate(index){
                 let value = this.fields[index].value;
@@ -160,36 +195,68 @@ 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: null, end: null} : '' ;
+
+                // 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.searchDebounce);
+                this.searchDebounce = setTimeout(()=>{
+                    this.$emit('search', this.fieldsWithSearch);
+                },500);
+
             },
 
             /* 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'){
+                if(!field.filterable || field.readonly) return;
+                if(field.type === 'date_range'){
                     this.datePickerOpen = true;
                 }
                 this.editingInput = field.key;
+                this.anySearchActive = true;
                 //this.$nextTick(() => this.$refs[this.editingInput + '-input'].focus())
             },
 
-            
+
 
         }
     }

package/src/index.js

@@ -4,7 +4,6 @@ import ToggleInputText from "./components/forms/ToggleInputText.vue";
 import ToggleInputEditableText from "./components/forms/ToggleInputEditableText.vue";
 import ToggleInputWebsite from "./components/forms/ToggleInputWebsite.vue";
 import ToggleDatePicker from "./components/forms/ToggleDatePicker.vue";
-import ToggleDateRangePicker from "./components/forms/ToggleDateRangePicker.vue";
 import ToggleInputSelect from "./components/forms/ToggleInputSelect.vue";
 import ToggleInputPercentage from "./components/forms/ToggleInputPercentage.vue";
 import ToggleInputCurrency from "./components/forms/ToggleInputCurrency.vue";
@@ -106,14 +105,13 @@ const Components = {
     ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
-    ToggleDateRangePicker,
     ToggleInputSelect,
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
-    ToggleInputCheckbox, 
+    ToggleInputCheckbox,
     ToggleInputCheckboxInline,
     ToggleFillLoader,
     ToggleProgressLoader,

package/src/sass/includes/_as_inputs.scss

@@ -1,15 +1,15 @@
 
 .toggle-input,
 .toggle-input-label,
-.toggle-input-counter, 
+.toggle-input-counter,
 .toggle-input-label-error,
-.toggle-input-radio-label, 
+.toggle-input-radio-label,
 .toggle-input-checkbox-label,
 .toggle-input-search-options,
 .toggle-input-select,
 .toggle-contact-search-container{
     @include toggle-global-font-config;
-} 
+}
 
 .toggle-input-counter{
     font-size: $toggle-font-size-small;
@@ -110,7 +110,7 @@
 
         padding         : 0.8rem 1.2rem 1.4rem 1.2rem;
         background-color: $toggle-off-white;
-        border-radius   : 9px; 
+        border-radius   : 9px;
         box-sizing      : border-box;
         border          : 1px solid $toggle-off-white;
         position        : relative;
@@ -122,7 +122,7 @@
         &.margin-bottom-0{
             padding-bottom:0;
         }
-    
+
 }
 
 // When inputs are inside input groups or modals, they look a bit different
@@ -227,35 +227,36 @@
     }
 }
 
-.calendar-icon-disabled {
+.toggle-date-input-calendar-icon-disabled {
     cursor: default;
     opacity: 0.5;
 }
 
 .toggle-input-select-container{
     position:relative;
-    background-color: $toggle-dark-grey;
+    //background-color: $toggle-dark-grey;
     border-radius:5px;
     overflow: auto;
     float: left;
     clear: both;
     width: 100%;
-    &:after{
-        content: '';
-        width: 1.5rem;
-        height: 1.5rem;
-        background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
-        position: absolute;
-        right: 1rem;
-        top: 0.7rem;
-        pointer-events: none;
-    }
+    //&:after{
+    //    content: '';
+    //    width: 1.5rem;
+    //    height: 1.5rem;
+    //    background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+    //    position: absolute;
+    //    right: 1rem;
+    //    top: 0.7rem;
+    //    pointer-events: none;
+    //}
 }
 
- 
+
 .toggle-input-select{
 
-    padding           : 0.5rem 2.5rem 0.5rem 1rem;
+    //padding           : 0.5rem 2.5rem 0.5rem 1rem;
+    padding: 0.5rem;
     cursor            : pointer;
 
     -webkit-appearance: none;
@@ -334,7 +335,7 @@
     .toggle-input-radio{
         clear:both;
         float: left;
-        margin-left:2.2rem;         
+        margin-left:2.2rem;
     }
 
 }
@@ -368,8 +369,8 @@
         display  : flex;
         align-items: center;
     }
-  
-    
+
+
     input[type="radio"], input[type="checkbox"]{
         display: none;
     }
@@ -396,7 +397,7 @@
         }
     }
 
-    
+
 
     > input:disabled:checked + div{
         .toggle-input-radio-check-element {
@@ -490,7 +491,7 @@
 }
 
 .toggle-input-checkbox-check-element {
-    background: url('../assets/icons/checkbox_blank.svg') no-repeat; 
+    background: url('../assets/icons/checkbox_blank.svg') no-repeat;
 }
 
 // image input
@@ -517,8 +518,8 @@ $iconWidth:20px;
             .toggle-dark-grey {
                 border:7px solid inherit;
             }
-            .toggle-draggable-group-item { 
-                position: relative; 
+            .toggle-draggable-group-item {
+                position: relative;
                 list-style: none;
                 margin:5px 10px 5px 0px;
                 .toggle-item-img {
@@ -543,7 +544,7 @@ $iconWidth:20px;
                     background: url('../assets/icons/draggable.svg') no-repeat center center;
                     cursor: move;
                 }
-              
+
             }
             .toggle-button-container{
                 border:0px solid transparent!important;
@@ -552,7 +553,7 @@ $iconWidth:20px;
                     height:$iconWidth;
                 }
             }
-           
+
 
             li:first-child div:first-child{
                 border:4px solid #189ED1;
@@ -561,8 +562,8 @@ $iconWidth:20px;
         }
     }
 
-  
-    
+
+
 }
 
 .toggle-dropzone-container{
@@ -591,7 +592,7 @@ $iconWidth:20px;
             height:0.5vw;
         }
     }
-  
+
 
     .vue-dropzone {
         border: 0;
@@ -615,7 +616,7 @@ $iconWidth:20px;
                 background-color: $toggle-light-blue;
             }
         }
-       
+
     }
 
     .dropzone{
@@ -649,7 +650,7 @@ $iconWidth:20px;
     .dropzone > .dz-preview {
         width: 40%;
     }
-   
+
 }
 
 .toggle-dropzone-file-container {
@@ -674,7 +675,7 @@ $iconWidth:20px;
     cursor: pointer;
     float:left;
     height: 2rem;
-    width: 2rem;   
+    width: 2rem;
     border-radius: 0% 50% 50% 0%;
     margin-left: -5px;
 }
@@ -690,7 +691,7 @@ $iconWidth:20px;
 
 
 // input crud buttons
-// 
+//
 .toggle-input-crud-container{
     padding:1rem 3.5rem 1rem 1rem;;
     height:auto;
@@ -709,7 +710,7 @@ $iconWidth:20px;
         cursor: pointer;
     }
 
-    
+
 
     .toggle-input-crud-container-description{
         text-align: center;
@@ -849,24 +850,24 @@ $iconWidth:20px;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
       }
-    
+
     @mixin toggle-input-border-base {
         border: 1px solid #ccc;
     }
-    
+
     @mixin toggle-input-border {
         @include toggle-input-border-base;
         border-radius: 4px;
         box-sizing: border-box;
     }
-    
+
     @mixin toggle-input-border-country-left {
         @include toggle-input-border-base;
         border-top-left-radius: 4px;
         border-bottom-left-radius: 4px;
         border-right: none;
     }
-    
+
     @mixin toggle-input-border-country-right {
         @include toggle-input-border-base;
         border-top-right-radius: 4px;
@@ -883,7 +884,7 @@ $iconWidth:20px;
         width: 130px;
         margin: 5px 0px;
         @include toggle-input-border-country-left;
-    
+
         select{
             position: relative;
             opacity: 0;
@@ -892,32 +893,32 @@ $iconWidth:20px;
             cursor: pointer;
             height: 100%;
         }
-    
+
         .toggle-selected-wraper {
             top:20%;
             font-size: 0.9em;
             position: absolute;
             padding: 3px;
             left: 5px;
-    
+
             &:before{
                 float:left;
                 content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 317 275'><path id='Arrow_downw' data-name='Arrow_Down' d='M158.5,0,317,275H0Z' transform='translate(317 275) rotate(180)' fill='gray'/></svg>");
                 margin-top:1px;
                 margin-right: 2px;
             }
-    
+
             div {
                 float:left;
             }
-    
+
             .toggle-selected-country-emoji {
                 margin-left: 5px;
                 margin-top: 2px;
             }
         }
-    
-    
+
+
     }
 
     .toggle-input-label-error  {
@@ -928,16 +929,16 @@ $iconWidth:20px;
     .toggle-input-select-country {
         padding: 3px 10px 22px 10px;
         margin: 5px 0px 5px 0px;
-    
+
         &.toggle-number {
-            
+
             position: relative;
             font-size:0.9em;
             padding:10px;
             @include toggle-input-border-country-right;
             width: 80%;
         }
-        
+
     }
     .toggle-invalid-number {
         border:1px solid #ED7B7C !important;

package/src/sass/includes/_as_table.scss

@@ -41,7 +41,8 @@ table.toggle-table {
 
   thead {
     th.toggle-table-th {
-      padding: 0 10px 20px 0;
+      //padding: 0 10px 20px 0;
+      padding: 0;
       border: none;
       text-align: left;
      @include toggle-global-font-config;
@@ -54,7 +55,7 @@ table.toggle-table {
         }
       }
 
-      
+
     }
 
 
@@ -75,7 +76,7 @@ table.toggle-table {
       text-indent: 1px;
       text-overflow: '';
 
-      background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
+      //background: url(/img/icons/arrow-down-blue-tiny.svg) center right no-repeat;
       background-size: 15px;
       padding           : 0.5rem 0rem 0.5rem 1rem;
     }
@@ -98,7 +99,7 @@ table.toggle-table {
 
     td.toggle-tablee-td {
         @include toggle-global-font-config;
- 
+
         font-size: $toggle-font-size-small;
         padding: 1rem 0;
         padding-left:1rem;
@@ -146,19 +147,19 @@ table.toggle-table {
 
 
     }
-   
+
   }
 
   .toggle-date-input-calendar-icon{
     &:after{
         content: '';
-    } 
+    }
     .toggle-input{
         font-size: 12px;
         padding-right:0px !important;
     }
- }    
- 
+ }
+
 }
 
 
@@ -173,7 +174,7 @@ table.toggle-table {
     line-height: 1em;
     position: relative;
     display: block;
-    height: 20px;
+    height: 50px;
     margin: 0 4px 8px 4px;
     padding: 10px;
     border:1px solid transparent;
@@ -195,6 +196,7 @@ table.toggle-table {
         }
     }
     .toggle-table-searchable & {
+        cursor: pointer;
         .toggle-table-th-title {
             position: relative;
             display: inline-block;

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>toggle-components-library demo</title>
-<script src="./toggle-components-library.umd.js"></script>
-
-<link rel="stylesheet" href="./toggle-components-library.css">
-
-
-<script>
-console.log(toggle-components-library)
-</script>