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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "toggle-components-library",
-    "version": "1.33.0-beta.11",
+    "version": "1.33.0-beta.13",
     "private": false,
     "scripts": {
         "serve": "vue-cli-service serve",

package/src/components/forms/ToggleInputSelect.vue

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

package/src/components/forms/ToggleInputText.vue

@@ -102,26 +102,12 @@ export default {
           type: Boolean,
           required: false,
           default: false
-        },
-        // in toggle-table context, if search bar height expand transition has finished
-        applyFocus: {
-          type: Boolean,
-          required: false
         }
     },
 
     created : function()
     {
-      if(this.applyFocus){
-          this.$nextTick(() => this.$refs['input_ele'].focus());
-      }
-    },
-    watch: {
-        applyFocus(new_value){
-            if(new_value){
-                this.$nextTick(() => this.$refs['input_ele'].focus());
-            }
-        }
+        this.$nextTick(() => this.$refs['input_ele'].focus());
     },
     computed: {
         inputVal: {

package/src/components/tables/ToggleTable.vue

@@ -20,28 +20,26 @@
                     <span class="toggle-table-close-search" v-on:click.stop @click="closeSearch(field)"></span>
 
                     <ToggleInputText
-                        v-if="field.type === 'text' && (searchModels[field.key] || editingInput === field.key)"
+                        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(field)"
+                        @input="searchChange()"
                         @bail="closeSearch(field)"
-                        :applyFocus="applyFocus"
                     />
                     <ToggleInputSelect
                         style="margin-top:2px;"
                         :size="'small'"
-                        v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key)"
-                        :applyFocus="applyFocus"
+                        v-if="field.type === 'select' && (searchModels[field.key] || editingInput === field.key) && applyFocus"
                         :options="field.select_options"
                         v-model="searchModels[field.key]"
-                        @input="val=>searchChange(val, field)"
+                        @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="val=>searchChange(val, field)"
+                        @input="searchChange()"
                     />
                   </div>
               </th>

package/src/sass/includes/_as_inputs.scss

@@ -227,7 +227,6 @@
   }
 }
 
-
 .calendar-icon-disabled {
   cursor: default;
   opacity: 0.5;
@@ -235,24 +234,28 @@
 
 .toggle-input-select-container {
   position:relative;
+  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;
+  container-type: inline-size;
+  @container (inline-size > 140px){
+    &:after{
+      content: '';
+      width: 1.5rem;
+      height: 1.5rem;
+      background: transparent url("../assets/icons/arrow_down.svg") no-repeat 100% 50%;
+      position: absolute;
+      z-index: 1;
+      right: 1rem;
+      top: 0.7rem;
+      pointer-events: none;
+    }
   }
 }
 
-
 .toggle-input-select{
 
   //padding           : 0.5rem 2.5rem 0.5rem 1rem;