toggle-components-library 1.33.0-beta.8 → 1.33.0-beta.9

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

@@ -90,7 +90,7 @@ export default {
           default: false
         },
         // in toggle-table context, if search bar height expand transition has finished
-        searchIsOpen: {
+        applyFocus: {
           type: Boolean,
           required: false,
           default: null
@@ -98,7 +98,7 @@ export default {
     },
 
     created : function(){
-        if(this.searchIsOpen === null || this.searchIsOpen){
+        if(this.applyFocus === null || this.applyFocus){
            this.show = true;
         }
     },
@@ -127,7 +127,7 @@ export default {
             if (options.filter( option =>  option.value == this.inputVal).length == 0)
                 this.inputVal = "";
         },
-        searchIsOpen(new_value){
+        applyFocus(new_value){
           if(new_value){
               this.show = true;
           }

package/src/components/forms/ToggleInputText.vue

@@ -11,7 +11,7 @@
     <input
         :type="type"
         :name="name ? name : 'ToggleInputText' "
-        :class="['toggle-input', {'toggle-input-is-readonly':readonly, size}]"
+        :class="[ 'toggle-input', size]"
         :placeholder="placeholder ? placeholder : '' "
         :autocomplete="autocomplete ? 'on' : 'off' "
         :required="required"

package/src/components/tables/ToggleTable.vue

@@ -24,24 +24,24 @@
                         type="text"
                         :ref="field.key+'-input'"
                         v-model="searchModels[field.key]"
-                        @input="searchChange()"
+                        @input="searchChange(field)"
                         @bail="closeSearch(field)"
-                        :searchIsOpen="searchIsOpen"
+                        :applyFocus="applyFocus"
                     />
                     <ToggleInputSelect
                         style="margin-top:2px;"
                         :size="'small'"
                         v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key)"
-                        :searchIsOpen="searchIsOpen"
+                        :applyFocus="applyFocus"
                         :options="field.select_options"
                         v-model="searchModels[field.key]"
-                        @input="val=>searchChange()"
+                        @input="val=>searchChange(val, field)"
                     />
-                    <ToggleDatePicker
+                    <ToggleDateRangePicker
                         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()" type="date" :range="true" label="Input label" v-model="searchModels[field.key]"
+                        name="date_range"
+                        v-model="searchModels[field.key]"
+                        @input="val=>searchChange(val, field)"
                     />
                   </div>
               </th>
@@ -73,7 +73,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 +82,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]
@@ -106,6 +106,10 @@ export default {
             emptyTableMessage: {
                 type: String,
                 default: "No rows returned."
+            },
+            searchDebounce: {
+                type: [Number],
+                default: 500
             }
         },
         data : function(){
@@ -113,8 +117,8 @@ export default {
                 editingInput:false,
                 searchModels:{},
                 anySearchActive: false,
-                searchIsOpen: false,
-                searchDebounce: null
+                applyFocus: false,
+                searchTimeout: null
             };
         },
         computed: {
@@ -152,7 +156,7 @@ export default {
                     let field_name = this.fields[i].key;
                     this.$set( this.searchModels, field_name, value )
                     if(value){
-                        this.searchIsOpen = true;
+                        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]);
@@ -160,9 +164,7 @@ export default {
                         // show the other fields with initial values set.
                         else this.activateSearch(this.fields[i]);
                     }
-                }
-                if(this.anySearchActive){
-                    this.searchChange(true);
+                    this.searchChange();
                 }
             }
 
@@ -179,11 +181,11 @@ export default {
 
             handleTransitionEnd(event){
               if(event.propertyName === 'height'){
-                  if(this.anySearchActive && !this.searchIsOpen){
-                      this.searchIsOpen = true;
+                  if(this.anySearchActive && !this.applyFocus){
+                      this.applyFocus = true;
                   }
-                  if(!this.anySearchActive && this.searchIsOpen){
-                      this.searchIsOpen = false;
+                  if(!this.anySearchActive && this.applyFocus){
+                      this.applyFocus = false;
                   }
               }
             },
@@ -217,7 +219,7 @@ export default {
             closeSearch(field){
 
                 this.editingInput = false;
-                this.searchModels[field.key] = field.type === 'date_range' ? { start: null, end: null} : '' ;
+                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;
@@ -237,14 +239,11 @@ export default {
                 this.searchChange();
             },
 
-            searchChange(immediate = false)
-            {
-                const delay = immediate ? 0 : 500;
-
-                clearTimeout(this.searchDebounce);
-                this.searchDebounce = setTimeout(()=>{
+            searchChange(){
+                clearTimeout(this.searchTimeout);
+                this.searchTimeout = setTimeout(()=>{
                     this.$emit('search', this.fieldsWithSearch);
-                },delay);
+                },this.searchDebounce);
 
             },
 
@@ -253,12 +252,8 @@ export default {
             */
             activateSearch(field){
                 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,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";
@@ -82,8 +83,6 @@ 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";
 
@@ -105,13 +104,14 @@ const Components = {
     ToggleInputEditableText,
     ToggleInputWebsite,
     ToggleDatePicker,
+    ToggleDateRangePicker,
     ToggleInputSelect,
     ToggleInputPercentage,
     ToggleInputCurrency,
     ToggleInputRadioButtons,
     ToggleInputTextArea,
     ToggleInputCheckboxContainer,
-    ToggleInputCheckbox,
+    ToggleInputCheckbox, 
     ToggleInputCheckboxInline,
     ToggleFillLoader,
     ToggleProgressLoader,
@@ -158,7 +158,6 @@ const Components = {
     ToggleBoosterBasicButton,
     ToggleBoosterModal,
     ToggleContactSearch,
-    ToggleStatusBar,
     ToggleCarousel,
     ToggleCarouselSlide,
     ToggleEmailCard,