toggle-components-library 1.33.0-beta.4 → 1.33.0-beta.5

package/src/components/forms/ToggleInputPercentage.vue

@@ -10,14 +10,13 @@
     </label>
     <input
         :name="name ? name : 'ToggleInputPercentage' " 
-        :class="[ 'toggle-input', {'toggle-input-is-readonly':readonly, size}]"
+        :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
         v-model="inputVal"
         @blur="isInputActive = false" 
-        @focus="isInputActive = true"
-        :readonly="readonly"
+        @focus="isInputActive = true" 
     />
     <label
         class="toggle-input-label-error" 
@@ -78,17 +77,7 @@ export default {
         allowFloat: {
             type: Boolean,
             default: false
-        },
-        readonly: {
-          type: Boolean,
-          required: false,
-          default: false
-        },
-        disabled: {
-          type: Boolean,
-          required: false,
-          default: false
-        },
+        }
     },
 
     created : function(){
@@ -111,7 +100,7 @@ export default {
         inputVal: {
 
              get: function() {
-                if (this.isInputActive && !this.readonly) {
+                if (this.isInputActive) {
                     // Cursor is inside the input field. unformat display value for user
                     return this.value.toString()
                 } else {

package/src/components/forms/ToggleInputSelect.vue

@@ -1,18 +1,18 @@
 <template>
 
-<div v-if="show" class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
-    <label
+<div class="toggle-input-container" :class="{'toggle-input-is-invalid':isInvalid, 'toggle-input-is-disabled':disabled}"  v-on:click="focusClosestInput">
+    <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: {
@@ -88,19 +83,10 @@ export default {
           type: Boolean,
           required: false,
           default: false
-        },
-        // in toggle-table context, if search bar height expand transition has finished
-        searchIsOpen: {
-          type: Boolean,
-          required: false,
-          default: null
         }
     },
 
     created : function(){
-        if(this.searchIsOpen === null || this.searchIsOpen){
-           this.show = true;
-        }
     },
     computed: {
         inputVal: {
@@ -126,11 +112,6 @@ export default {
         options(options) {
             if (options.filter( option =>  option.value == this.inputVal).length == 0)
                 this.inputVal = "";
-        },
-        searchIsOpen(new_value){
-          if(new_value){
-              this.show = true;
-          }
         }
     }
 }

package/src/components/forms/ToggleInputText.vue

@@ -1,17 +1,17 @@
 <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' "
-        :class="['toggle-input', {'toggle-input-is-readonly':readonly, size}]"
+        :name="name ? name : 'ToggleInputText' " 
+        :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"
@@ -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' "
     >
@@ -102,26 +100,10 @@ export default {
           type: Boolean,
           required: false,
           default: false
-        },
-        // in toggle-table context, if search bar height expand transition has finished
-        searchIsOpen: {
-          type: Boolean,
-          required: false
         }
     },
 
-    created : function()
-    {
-      if(this.searchIsOpen){
-          this.$nextTick(() => this.$refs['input_ele'].focus());
-      }
-    },
-    watch: {
-        searchIsOpen(new_value){
-            if(new_value){
-                this.$nextTick(() => this.$refs['input_ele'].focus());
-            }
-        }
+    created : function(){
     },
     computed: {
         inputVal: {
@@ -136,11 +118,6 @@ export default {
     },
     methods: {
 
-        handleEscPress()
-        {
-            this.$emit('bail');
-        },
-
         /*
         * Concat message for count characters
         * @return string

package/src/components/statusbar/ToggleStatusBar.vue

@@ -1,9 +1,16 @@
 <template>
     <div :class="['toggle-status-bar-container', statusColours, statusSize]">
         <label class="toggle-status-bar-label">
-            <span class="toggle-status-bar-dot" v-if="showDot">&#9679;</span>
+            <span class="toggle-status-bar-dot blinking" v-if="showDot">&#9679;</span>
             {{ statusName }}
         </label>
+        
+        <div class="toggle-status-bar-tooltip-container" v-if="showToolTip && toolTipText.length">
+            <div class="toggle-status-bar-tooltip">
+                ?
+                <span class="toggle-status-bar-tooltip-text">{{ toolTipText }}</span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -15,7 +22,7 @@ export default {
             type: String,
             required: true,
             validator: function (value) {
-                return ['draft', 'processing', 'complete', 'inactive', 'active'].indexOf(value) !== -1;
+                return ['draft', 'processing', 'complete', 'inactive', 'active', 'submitted'].indexOf(value) !== -1;
             }
         },
         size: {
@@ -24,6 +31,10 @@ export default {
             validator: function (value) {
                 return ['small'].indexOf(value) !== -1;
             }
+        },
+        toolTipOptions: {
+            type: Object,
+            required: false
         }
     },
     computed: {
@@ -41,7 +52,21 @@ export default {
         },
         // Show the dot if the status is active or processing
         showDot() {
-            return this.status === 'active' || this.status === 'processing';
+            return this.status === 'active' || this.status === 'processing' || this.status === 'submitted';
+        },
+        showToolTip() {
+            return this.size !== 'small';
+        },
+        toolTipText() {
+            if (!this.toolTipOptions) {
+                return '';
+            }
+
+            if (this.toolTipOptions[this.status]) {
+                return this.toolTipOptions[this.status];
+            } else {
+                return '';
+            }
         }
     }
 }

package/src/components/tables/ToggleTable.vue

@@ -3,58 +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)"
-                        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]"
-                    />
+                    <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="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>
@@ -73,7 +44,7 @@
 
 import { mixins } from '../mixins/mixins';
 
-import ToggleDatePicker from '../forms/ToggleDatePicker.vue';
+import ToggleDateRangePicker from '../forms/ToggleDateRangePicker.vue';
 import ToggleInputText from '../forms/ToggleInputText.vue';
 import ToggleInputSelect from '../forms/ToggleInputSelect.vue';
 import ToggleTableRow from '../tables/ToggleTableRow.vue';
@@ -82,7 +53,7 @@ import TogglePagination from '../tables/TogglePagination.vue';
 
 export default {
         mixins:[mixins],
-        components:{ToggleDatePicker, ToggleInputText, ToggleInputSelect, ToggleTableColumn, ToggleTableRow, TogglePagination},
+        components:{ToggleDateRangePicker, ToggleInputText, ToggleInputSelect, ToggleTableColumn, ToggleTableRow, TogglePagination},
         props: {
             items: {
                 type: [Array]
@@ -91,30 +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."
             }
-        },
+        },  
         data : function(){
             return {
                 editingInput:false,
-                searchModels:{},
-                anySearchActive: false,
-                searchIsOpen: false,
-                searchDebounce: null
+                searchModels:{}
             };
         },
         computed: {
@@ -136,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.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]);
@@ -163,29 +137,20 @@ 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;
@@ -195,68 +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: 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.searchModels[field.key] = field.type == 'date' ? { start: false, end: false} : '' ;
                 this.searchChange();
             },
 
             searchChange(){
-                clearTimeout(this.searchDebounce);
-                this.searchDebounce = setTimeout(()=>{
-                    this.$emit('search', this.fieldsWithSearch);
-                },500);
-
+                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.type === 'date_range'){
+                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/index.js

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