@tripup-company/element-ui-extended 0.0.71 → 0.0.74

package/dist/examples/models/contact-model.d.ts

@@ -15,7 +15,6 @@ export declare class ContactModel extends BaseModel implements Icontact {
     zip_code: string;
     street?: string;
     country?: string;
-    destination?: any;
     constructor(data?: any[]);
 }
 //# sourceMappingURL=contact-model.d.ts.map

package/dist/examples/models/contact-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contact-model.d.ts","sourceRoot":"","sources":["../../../examples/models/contact-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,qBAAa,YAAa,SAAQ,SAAU,YAAW,QAAQ;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;gBAEN,IAAI,QAAK;CAGtB"}
+{"version":3,"file":"contact-model.d.ts","sourceRoot":"","sources":["../../../examples/models/contact-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAEpD,qBAAa,YAAa,SAAQ,SAAU,YAAW,QAAQ;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBAEL,IAAI,QAAK;CAGtB"}

package/dist/src/components/GenericFilters/filter-convertor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-convertor.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-convertor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,eAAe;IAGlC,WAAW,CAAC,MAAM,KAAA;;;;CAiBnB"}
+{"version":3,"file":"filter-convertor.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-convertor.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,OAAO,eAAe;IAGlC,WAAW,CAAC,MAAM,KAAA;;;;CAgBnB"}

package/dist/src/components/GenericFilters/filter-factory.d.ts

@@ -12,7 +12,6 @@ import { IsNotNullFilter } from "./filters/is-not-null-filter";
 import { BetweenFilter } from "./filters/between-filter";
 import { InFilter } from "./filters/in-filter";
 import { InObject } from "./filters/in-object";
-import { InArrayOfObject } from "./filters/in-array-of-object";
 import { InArray } from "./filters/in-array";
 import { WeekDayFilter } from "./filters/week-day-filter";
 import { YoungerWeekFilter } from "./filters/younger-week-filter";
@@ -35,7 +34,6 @@ export default class FilterFactory {
         group_by_fields: (field: string, value: string) => GroupByFilter;
         in_object: (field: string, value: string) => InObject;
         in_array: (field: string, value: string) => InArray;
-        in_array_of_object: (field: string, value: string) => InArrayOfObject;
     };
     createFilter(field: any, condition: Condition): BaseFilter;
 }

package/dist/src/components/GenericFilters/filter-factory.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filter-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,aAAa;WAClB,oBAAoB;uBAEf,GAAG,SAAS,GAAG;2BACX,GAAG,SAAS,GAAG;0BAChB,GAAG,SAAS,GAAG;8BACX,GAAG,SAAS,GAAG;yBAEpB,GAAG,SAAS,GAAG;6BACX,GAAG,SAAS,GAAG;4BAEhB,GAAG,SAAS,GAAG;0BACjB,GAAG,SAAS,GAAG;6BACZ,GAAG,SAAS,GAAG;yBAEnB,MAAM,SAAS,MAAM;oBAE3B,MAAM,SAAQ,MAAM;yBACf,MAAM,SAAQ,MAAM;+BACd,MAAM,SAAQ,MAAM;iCAClB,MAAM,SAAQ,MAAM;2BAC1B,MAAM,SAAQ,MAAM;0BACrB,MAAM,SAAQ,MAAM;oCACV,MAAM,SAAQ,MAAM;;IAG5C,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,GAAG,UAAU;CAQlE"}
+{"version":3,"file":"filter-factory.d.ts","sourceRoot":"","sources":["../../../../src/components/GenericFilters/filter-factory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,6BAA6B,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,aAAa;WAClB,oBAAoB;uBAEf,GAAG,SAAS,GAAG;2BACX,GAAG,SAAS,GAAG;0BAChB,GAAG,SAAS,GAAG;8BACX,GAAG,SAAS,GAAG;yBAEpB,GAAG,SAAS,GAAG;6BACX,GAAG,SAAS,GAAG;4BAEhB,GAAG,SAAS,GAAG;0BACjB,GAAG,SAAS,GAAG;6BACZ,GAAG,SAAS,GAAG;yBAEnB,MAAM,SAAS,MAAM;oBAE3B,MAAM,SAAQ,MAAM;yBACf,MAAM,SAAQ,MAAM;+BACd,MAAM,SAAQ,MAAM;iCAClB,MAAM,SAAQ,MAAM;2BAC1B,MAAM,SAAQ,MAAM;0BACrB,MAAM,SAAQ,MAAM;;IAGlC,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,GAAG,UAAU;CAQlE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.71",
+  "version": "0.0.74",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve && tsc --emitDeclarationOnly",

package/src/components/CompositeTable/index.vue

@@ -244,8 +244,7 @@ export default {
     handleFilterChange() {
       this.handleCurrentChange(1);
     },
-    handleApplyFilter(search) {
-      this.search = search;
+    handleApplyFilter() {
       this.listQueryService.updateListQuery({ search: this.search });
       this.handleFilterChange();
     },
@@ -259,8 +258,7 @@ export default {
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
-    handleApplyTopFilter(topSearch) {
-      this.topSearch = topSearch;
+    handleApplyTopFilter() {
       this.listQueryService.updateListQuery({ topSearch: this.topSearch });
       this.handleFilterChange();
     },

package/src/components/EditableField/index.vue

@@ -1,29 +1,19 @@
 <template>
   <div class="editable-cell">
-    <div v-if="!isEditMode" class="editable-cell__text">
+    <div
+      v-if="!isEditMode"
+      class="editable-cell__text"
+    >
       <slot class="editable-cell__text__slot">
         <el-col :span="23">
-          <div
-            v-if="value && ['input', 'textarea', 'number'].includes(type)"
-            v-html="value"
-          />
-          <el-checkbox
-            v-else-if="type === 'checkbox'"
-            v-model="value"
-            disabled
-          />
-          <el-date-picker
-            v-else-if="type === 'date-picker'"
-            v-model="value"
-            type="date"
-            :format="format"
-            :value-format="valueFormat"
-            disabled
-            placeholder="Pick a day"
-            class="w-100 el-date-transparent"
-          />
+          <div v-if="value && ['input', 'textarea', 'number'].includes(type)" v-html="value" />
+          <div v-else-if="type === 'checkbox'">
+            <i v-if="value === true" class="el-icon-check"></i>
+            <div v-else> {{ placeholder ? placeholder : '-' }}</div>
+          </div>
+          <el-date-picker v-else-if="type === 'date-picker'" v-model="value" type="date" format="dd.MM.yyyy" value-format="yyyy-MM-dd" disabled placeholder="Pick a day" class="w-100 el-date-transparent" />
           <div v-else-if="isSelectValue" v-html="createList()" />
-          <div v-else>{{ placeholder ? placeholder : "-" }}</div>
+          <div v-else> {{ placeholder ? placeholder : '-' }}</div>
         </el-col>
         <el-col v-if="!readonly" :span="1">
           <el-button
@@ -40,42 +30,16 @@
     </div>
     <div v-if="isEditMode" class="editable-cell__editor">
       <el-checkbox v-if="type === 'checkbox'" v-model="model" />
-      <el-input-number
-        v-else-if="type === 'number'"
-        :controls="false"
-        v-model="model"
-        :precision="precision"
-        class="w-100"
-      />
-      <el-select
-        v-else-if="type === 'select'"
-        v-model="model"
-        :span="24"
-        clearable
-        :filterable="filterable"
-        :remote="remote"
-        :remote-method="remoteMethodHandler"
-        placeholder="Select"
-        :value-key="objectValueKey"
-        :multiple="selectMultiple"
-        class="w-100"
-      >
+      <el-input-number v-else-if="type === 'number'" :controls="false" v-model="model" :precision="precision" class="w-100" />
+      <el-select v-else-if="type === 'select'" v-model="model" :span="24" clearable :filterable="filterable" :remote="remote" :remote-method="remoteMethodHandler" placeholder="Select" :multiple="selectMultiple" class="w-100">
         <el-option
           v-for="item in selectListLocal"
           :key="item[selectKey]"
           :label="item[selectLabel]"
-          :value="selectJson ? item : item[selectValue]"
+          :value="item[selectValue]"
         />
       </el-select>
-      <el-date-picker
-        v-else-if="type === 'date-picker'"
-        v-model="model"
-        :format="format"
-        :value-format="valueFormat"
-        type="date"
-        placeholder="Pick a day"
-        class="w-100"
-      />
+      <el-date-picker v-else-if="type === 'date-picker'" v-model="model" format="dd.MM.yyyy" value-format="yyyy-MM-dd" type="date" placeholder="Pick a day" class="w-100" />
       <el-input
         v-else
         v-model="model"
@@ -85,44 +49,29 @@
         class="editable-cell__input"
       />
       <el-button-group class="editable-cell__actions">
-        <el-button
-          v-if="isEditMode"
-          type="success"
-          size="mini"
-          circle
-          plain
-          icon="el-icon-check"
-          @click="handleSave"
-        />
-        <el-button
-          v-if="isEditMode"
-          type="warning"
-          size="mini"
-          circle
-          plain
-          icon="el-icon-close"
-          @click="handleClose"
-        />
+        <el-button v-if="isEditMode" type="success" size="mini" circle plain icon="el-icon-check" @click="handleSave" />
+        <el-button v-if="isEditMode" type="warning" size="mini" circle plain icon="el-icon-close" @click="handleClose" />
       </el-button-group>
     </div>
   </div>
 </template>
 
 <script>
+
 export default {
-  name: "EditableField",
+  name: 'EditableField',
   model: {
-    props: "value",
-    event: "input",
+    props: 'value',
+    event: 'input',
   },
   props: {
     field: {
       type: [String, Boolean],
-      default: "",
+      default: '',
     },
     value: {
       type: [String, Boolean, Date, Number, Array],
-      default: "",
+      default: '',
     },
     filterable: {
       type: Boolean,
@@ -130,11 +79,11 @@ export default {
     },
     type: {
       type: String,
-      default: "input",
+      default: 'input',
     },
     placeholder: {
       type: String,
-      default: "",
+      default: '',
     },
     selectList: {
       type: Array,
@@ -144,25 +93,17 @@ export default {
       type: Boolean,
       default: false,
     },
-    objectValueKey: {
-      type: String,
-      default: "value",
-    },
-    selectJson: {
-      type: Boolean,
-      default: false,
-    },
     selectKey: {
       type: String,
-      default: "value",
+      default: '',
     },
     selectLabel: {
       type: String,
-      default: "name",
+      default: '',
     },
     selectValue: {
       type: String,
-      default: "",
+      default: '',
     },
     precision: {
       type: Number,
@@ -180,26 +121,18 @@ export default {
       type: Boolean,
       default: false,
     },
-    format: {
-      type: String,
-      default: "dd.MM.yyyy",
-    },
-    valueFormat: {
-      type: String,
-      default: "yyyy-MM-dd",
-    },
   },
   data: () => {
     return {
       isEditMode: false,
-      model: "",
+      model: '',
       selectListLocal: [],
     };
   },
   computed: {
     isSelectValue: {
       get() {
-        return (this.value || this.value === false) && this.type === "select";
+        return (this.value || this.value === false) && this.type === 'select';
       },
     },
     remote: {
@@ -221,55 +154,43 @@ export default {
   },
   methods: {
     createList() {
-      let label = "";
+      let label = '';
       if (this.selectMultiple) {
         if (this.value.length) {
-          let values = [];
-          this.value.forEach((element) => {
-            const compareValue = this.selectJson ? element[this.selectKey] : element;
-            const labArray = this.selectList.find(
-              x => x[this.selectKey] === compareValue
-            );
-            if (labArray && labArray[this.selectLabel]) {
-              values.push(labArray[this.selectLabel]);
-            }
-            label = values.join("; ");
+          this.value.forEach(element => {
+            label = label + ' ' + this.selectList.find(({ value }) => value === element).name;
           });
         } else {
-          label = "-";
+          label = '-';
         }
       } else if (this.selectList.length) {
-        label = this.selectList.find((x) => x[this.selectKey] === this.value)[
-          this.selectLabel
-        ];
+        label = this.selectList.find(x =>
+          x[this.selectKey] === this.value)[this.selectLabel];
       } else {
         label = this.value;
       }
       return label;
     },
     handleDoubleClick() {
-      this.$emit("editable:open");
+      this.$emit('editable:open');
       this.isEditMode = true;
       this.model = this.value;
     },
     handleClose() {
       this.isEditMode = false;
-      this.$emit("editable:close");
+      this.$emit('editable:close');
     },
     async remoteCall(query) {
       this.loading = true;
-      const response = await this.remoteMethod.all({
-        search: this.selectLabel + ":" + query,
-        searchFields: this.selectLabel + ":like",
-      });
+      const response = await this.remoteMethod.all({ search: this.selectLabel  + ':' + query, searchFields: this.selectLabel + ':like' });
       this.selectListLocal = response.data;
       this.loading = false;
     },
     async handleSave() {
       this.isEditMode = false;
-      this.$emit("editable:close");
-      this.$emit("editable:save", { field: this.field, value: this.model });
-      this.$emit("update:value", { field: this.field, value: this.model });
+      this.$emit('editable:close');
+      this.$emit('editable:save', { 'field': this.field, 'value': this.model });
+      this.$emit('update:value', { 'field': this.field, 'value': this.model });
     },
   },
 };

package/src/components/GenericFilters/FilterRow.vue

@@ -13,7 +13,7 @@
         :span="24"
         class="p-b-10"
       >
-        <el-select v-model="searchLocal.operator" placeholder="Select">
+        <el-select v-model="search.operator" placeholder="Select">
           <el-option
             v-for="operator in operators"
             :key="operator.value"
@@ -25,12 +25,12 @@
       <el-col :span="24">
         <el-input
           v-if="column.type === 'string'"
-          v-show="!isDisableInput(searchLocal.operator)"
-          v-model="searchLocal.value"
+          v-show="!isDisableInput(search.operator)"
+          v-model="search.value"
         />
         <el-date-picker
           v-else-if="column.type === 'date'"
-          v-model="searchLocal.value"
+          v-model="search.value"
           class="w-100"
           end-placeholder="To"
           format="dd.MM.yy"
@@ -44,14 +44,13 @@
         <el-select
           refs="select"
           v-else
-          v-model="searchLocal.value"
+          v-model="search.value"
           :multiple="isMultiple"
           placeholder="Select"
           :filterable="filterable"
           :remote="remote"
           :remote-method="remoteMethodHandler"
           :loading="loading"
-          :value-key="objectValueKey"
           clearable
           @change="updateSearch"
         >
@@ -67,8 +66,8 @@
   </el-row>
 </template>
 <script>
-import { upperFirst } from "lodash";
-import Vue from "vue";
+import { upperFirst } from 'lodash'
+
 export default {
   props: {
     column: {
@@ -83,10 +82,6 @@ export default {
         return {};
       },
     },
-    name: {
-      type: String,
-      default: "",
-    },
   },
   data() {
     const boolValues = [
@@ -94,27 +89,19 @@ export default {
       { value: true, name: "true" },
       { value: false, name: "false" },
     ];
-    let selectValues = [];
-    if (this.column.selectList && this.column.selectList.length) {
-      selectValues = this.column.selectList;
-    } else if (this.search.selectList && this.search.selectList.length) {
-      selectValues = this.search.selectList;
-    } else if (this.column.type === "enum") {
-      selectValues = this.column.values;
-    } else {
-      selectValues = boolValues;
-    }
     return {
-      searchLocal: this.search,
       loading: false,
       selectKey: this.column.selectKey ?? "value",
       selectLabel: this.column.selectLabel ?? "name",
       selectValue: this.column.selectValue ?? "value",
       filterable: this.column.filterable ?? false,
-      objectValueKey: this.column.objectValueKey ?? "value",
-      selectJson: this.column.selectJson ?? false,
       remote: this.column.remote ?? false,
       remoteMethod: this.column.remoteMethod ?? null,
+      selectListLocal: this.column.selectList
+        ? this.column.selectList
+        : this.column.type === "enum"
+        ? this.column.values
+        : boolValues,
       showFilter: this.search.operator !== "",
       stringOperators: [
         { value: "equal", label: "is equal" },
@@ -132,8 +119,6 @@ export default {
       enumOperatorsInObject: [{ value: "in_object", label: "in_object" }],
       dateOperators: [{ value: "between", label: "between" }],
       boolOperators: [{ value: "equal", label: "is" }],
-      selectListLocal: selectValues,
-
     };
   },
   computed: {
@@ -145,12 +130,7 @@ export default {
           break;
         case ("enum", "select"):
           if (this.column.operator) {
-            operators = [
-              {
-                value: this.column.operator,
-                label: upperFirst(this.column.operator.replace("_", " ")),
-              },
-            ];
+            operators = [{ value: this.column.operator, label: upperFirst(this.column.operator.replace('_', ' ')) }];
           } else if (this.column.selectMultiple) {
             operators = this.enumOperatorsMultiple;
           } else {
@@ -181,43 +161,26 @@ export default {
   watch: {
     showFilter() {
       if (this.showFilter === false) {
-        this.searchLocal.operator = "";
-        this.searchLocal.value = "";
-      } else if (
-        this.searchLocal.operator === "" &&
-        this.operators.length === 1
-      ) {
-        this.searchLocal.operator = this.operators[0].value;
+        this.search.operator = "";
+        this.search.value = "";
+      } else if (this.search.operator === "" && this.operators.length === 1) {
+        this.search.operator = this.operators[0].value;
       }
     },
-    search(newValue) {
-      console.log("seach updated");
-      if (newValue !== this.search) {
-        this.searchLocal = Object.assign({}, this.search);
-      }
-
-      console.log(this.searchLocal);
-    },
-    searchLocal: {
+    search: {
       deep: true,
       handler() {
-        console.log("searchLocal updated");
-        this.$emit("update:search", {
-          name: this.name,
-          value: this.searchLocal,
-        });
-        console.log(this.searchLocal);
-        if (this.searchLocal.operator == "") {
+        if (this.search.operator == '') {
           this.showFilter = false;
         }
-      },
+      }
     },
   },
   methods: {
     isDisableInput(operator) {
       const disable = this.disabledInputOperations.includes(operator);
       if (disable) {
-        this.searchLocal.value = "";
+        this.search.value = "";
       }
       return disable;
     },
@@ -228,7 +191,7 @@ export default {
         searchFields: this.selectLabel + ":like",
       });
       this.selectListLocal = response.data;
-      this.searchLocal["selectList"] = response.data;
+      this.search["selectList"] = response.data;
       this.loading = false;
     },
     updateSearch(key) {
@@ -237,7 +200,7 @@ export default {
         for (const item of this.selectListLocal) {
           if (item[this.selectKey] === key) {
             obj[this.selectLabel] = item[this.selectLabel];
-            this.searchLocal.selectList = [obj];
+            this.search.selectList = [obj];
           }
         }
       }

package/src/components/GenericFilters/index.vue

@@ -1,12 +1,10 @@
 <template>
   <el-card>
     <filter-row
-      v-for="column in filters"
+      v-for="(column) in filters"
       :key="column.name"
-      :name="column.name"
       :column="column"
       :search="search[column.name]"
-      @search:upate="filterRowUpdate"
     />
     <el-button @click="applyFilter">Filter</el-button>
     <el-button @click="resetFilter">Reset filter</el-button>
@@ -18,19 +16,15 @@ import FilterRow from "./FilterRow";
 import FilterConverter from "./filter-convertor";
 
 export default {
-  name: "GenericFilter",
+name: "GenericFilter",
   props: {
     filters: {
       type: Array,
-      default: () => {
-        return {};
-      },
+      default: () => { return {}}
     },
     search: {
       type: Object,
-      default: () => {
-        return {};
-      },
+      default: () => { return {}}
     },
   },
   components: { FilterRow },
@@ -45,17 +39,15 @@ export default {
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      console.log(this.search);
-      this.$emit("apply:filter", this.search);
+      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
     },
     resetFilter() {
-      this.$emit("reset:filter", {});
+      this.$emit('reset:filter', {});
     },
-    filterRowUpdate(name, value) {
-      this.$set(this.search, name, value);
-    },
-  },
-};
+  }
+}
 </script>
 
-<style scoped></style>
+<style scoped>
+
+</style>