toggle-components-library 1.33.0-beta.13 → 1.33.0-beta.14

package/src/components/tables/ToggleTable.vue

@@ -3,56 +3,29 @@
     <div>
 
     <table class="toggle-table">
-        <thead :class="{'toggle-table-any-search-active': anySearchActive}">
+        <thead :class="{'toggle-table-any-search-active': searchActive}">
             <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"
-                  :colspan="field.colspan"
+              <th 
+                  scope="col" 
+                  :class="['toggle-table-th', {'toggle-table-search-active': tableSearchActive(field), 'toggle-table-searchable':field.filterable}]"  
+                  v-for="(field, index) in headers" 
                   :key="index"
                   :style="'width:'+field.width"
                   @click="activateSearch(field)"
               >
-                  <div class="toggle-table-th-inner" @transitionend="handleTransitionEnd">
-
+                  <div class="toggle-table-th-inner">
                     <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)"/>
 
-                    <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()"
-                    />
+                    <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)" />
                   </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>
@@ -89,34 +62,20 @@ 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:{},
-                anySearchActive: false,
-                applyFocus: false,
-                searchTimeout: null
+                searchModels:{}
             };
         },
         computed: {
@@ -138,23 +97,36 @@ 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_range' ? 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]);
@@ -165,29 +137,20 @@ 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;
@@ -197,64 +160,36 @@ export default {
 
             tableSearchActive(field)
             {
-                if(field.type === 'date_range'){
-                    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_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.searchModels[field.key] = field.type == 'date' ? { start: false, end: false} : '' ;
                 this.searchChange();
             },
 
             searchChange(){
-                clearTimeout(this.searchTimeout);
-                this.searchTimeout = setTimeout(()=>{
-                    this.$emit('search', this.fieldsWithSearch);
-                },this.searchDebounce);
-
+                this.$emit('search', this.fieldsWithSearch);
             },
 
             /* 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 || field.readonly) return;
+                if(!field.filterable) return;
+                if(field.type === 'date'){
+                    this.datePickerOpen = true;
+                }
                 this.editingInput = field.key;
-                this.anySearchActive = true;
+                //this.$nextTick(() => this.$refs[this.editingInput + '-input'].focus())
             },
 
-
+            
 
         }
     }

package/src/components/tables/ToggleTableRow.vue

@@ -1,5 +1,23 @@
 <template>
-    <tr class="toggle-tablee-tr" @click="$emit('click')" >
+    <tr :class="['toggle-tablee-tr',{'tr-disabled':disabled }]" @click="handleClick" >
         <slot></slot>
     </tr>
-</template>
+</template>
+
+<script>
+export default {
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    handleClick() {
+      if(!this.disabled) {
+        this.$emit('click')
+      }
+    }
+  }
+}
+</script>

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";
@@ -104,14 +103,13 @@ const Components = {
     ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
-    ToggleDateRangePicker,
     ToggleInputSelect,
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
-    ToggleInputCheckbox, 
+    ToggleInputCheckbox,
     ToggleInputCheckboxInline,
     ToggleFillLoader,
     ToggleProgressLoader,

package/src/sass/includes/_as_boosters.scss

@@ -25,6 +25,10 @@
         background-color: $booster-tickets-colour-med;
     }
 
+    &.feedback{
+        background-color: $booster-feedback-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     }
@@ -72,6 +76,13 @@
         background-color: rgba($booster-tickets-colour-light, 0.8);
     }
 
+    &.feedback{
+        background-color: rgba($booster-feedback-colour-dark, 0.2);
+        &:hover{
+            background-color: rgba($booster-feedback-colour-dark, 0.25);
+        }
+    }
+
     &.test{
         background-color: rgba($booster-test-colour-med, 0.8);
         &:hover{
@@ -79,10 +90,12 @@
         }
     }
 
-    .plus{
-    margin: auto;
-    padding-right: 0.5rem;
-    padding-left: 0.6rem;
+    .plus {
+        margin: 0 0.2rem;
+        padding-left: 0.6rem;
+    }
+    .toggle-booster-button-button-text {
+        padding-left: 0.5rem;
     }
 }
 
@@ -165,6 +178,10 @@ margin:1rem
         background-color: $booster-tickets-colour-med;
     }
 
+    &.feedback{
+        background-color: $booster-feedback-colour-med;
+    }
+
     &.test{
         background-color: $booster-test-colour-light;
     } 
@@ -202,3 +219,37 @@ margin:1rem
   
   }
 
+.toggle-booster-button-disabled {
+    opacity: 0.3;
+}
+
+/* Tooltip container */
+.toggle-booster-button-tooltip-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+}
+
+/* Tooltip text */
+.toggle-booster-button-tooltip-container .toggle-booster-button-tooltip-text {
+    visibility: hidden;
+    width: 120px;
+    height: fit-content;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    padding: 5px;
+    border-radius: 6px;
+    position: absolute;
+    z-index: 999;
+    top: 100%;
+}
+
+.toggle-booster-button-tooltip-text {
+    font-family: $toggle-font-family;
+    padding: 10px;
+}
+
+.toggle-booster-button-tooltip-container:hover .toggle-booster-button-tooltip-text {
+    visibility: visible;
+}

package/src/sass/includes/_as_buttons.scss

@@ -427,3 +427,83 @@
         transition: all 0.2s ease-in-out;
     }
 }
+
+.toggle-button-booster-badge {
+    display: flex;
+    align-items: center;
+    padding: 0.2rem 0.2rem 0.2rem 1rem !important;
+}
+
+.shimmer {
+    color: grey;
+    display: inline-block;
+    mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/400% 100%;
+    background-repeat: no-repeat;
+    animation: shimmer 4s infinite;
+}
+
+.toggle-button-booster-image-badge {
+    width: 6rem;
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    margin: 0 0 0 20px;
+    padding: 0px 8px 0px 8px;
+    width: 6rem;
+    height: 1.8rem;
+    .toggle-button-booster-image {
+        width: 100%;
+        height: 100%;
+    }
+    &.toggle-button-loading {
+      opacity: 0
+    }
+    &.toggle-button-disabled {
+      opacity: 0.3;
+    }
+}
+
+/* Tooltip container */
+.toggle-button-tooltip-container {
+  position: relative;
+  justify-content: center;
+  display: flex;
+}
+
+/* Tooltip text */
+.toggle-button-tooltip-container .toggle-button-tooltip-text {
+  visibility: hidden;
+  width: 120px;
+  height: fit-content;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 999;
+  top: 100%;
+}
+
+.toggle-button-tooltip-text {
+  font-family: $toggle-font-family;
+}
+
+.toggle-button-tooltip-container:hover .toggle-button-tooltip-text {
+    visibility: visible;
+}
+
+// Shimmer animation for booster badge
+@keyframes shimmer {
+    0% {
+        mask-position: right;
+    }
+    30% {
+        mask-position: left;
+    }
+    100% {
+        mask-position: left;
+    }
+}