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

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

@@ -15,6 +15,7 @@ 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;gBAEL,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;IACjB,WAAW,CAAC,EAAE,GAAG,CAAC;gBAEN,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;;;;CAgBnB"}
+{"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"}

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

@@ -12,10 +12,12 @@ 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";
 import { GroupByFilter } from "./filters/group-by-filter";
+import { BoolFilter } from "./filters/bool-filter";
 export default class FilterFactory {
     static getRegisteredFilters(): {
         equal: (field: any, value: any) => EqualFilter;
@@ -34,6 +36,8 @@ 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;
+        bool: (field: any, value: any) => BoolFilter;
     };
     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,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"}
+{"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;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,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;sBACjC,GAAG,SAAS,GAAG;;IAG1B,YAAY,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,GAAG,UAAU;CAQlE"}

package/dist/src/components/GenericFilters/filters/bool-filter.d.ts

@@ -0,0 +1,7 @@
+import { BaseFilter } from "./base-filter";
+import { FilterResponse } from "./interfaces/filter-response";
+export declare class BoolFilter extends BaseFilter {
+    protected operator: string;
+    applyFilter(): FilterResponse;
+}
+//# sourceMappingURL=bool-filter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bool-filter.d.ts","sourceRoot":"","sources":["../../../../../src/components/GenericFilters/filters/bool-filter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,qBAAa,UAAW,SAAQ,UAAU;IACxC,SAAS,CAAC,QAAQ,SAAU;IACrB,WAAW,IAAI,cAAc;CAMrC"}

package/dist/src/components/GenericFilters/filters/in-array-of-object.d.ts

@@ -0,0 +1,7 @@
+import { BaseFilter } from "./base-filter";
+import { FilterResponse } from "./interfaces/filter-response";
+export declare class InArrayOfObject extends BaseFilter {
+    protected operator: string;
+    applyFilter(): FilterResponse;
+}
+//# sourceMappingURL=in-array-of-object.d.ts.map

package/dist/src/components/GenericFilters/filters/in-array-of-object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"in-array-of-object.d.ts","sourceRoot":"","sources":["../../../../../src/components/GenericFilters/filters/in-array-of-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAC;AACzC,OAAO,EAAC,cAAc,EAAC,MAAM,8BAA8B,CAAC;AAE5D,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,SAAS,CAAC,QAAQ,SAAwB;IACnC,WAAW,IAAI,cAAc;CAMrC"}

package/package.json

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

package/src/components/CompositeTable/index.vue

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

package/src/components/EditableField/index.vue

@@ -1,19 +1,28 @@
 <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" />
+          <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" />
+          <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-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
@@ -30,16 +39,42 @@
     </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" :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"
+        :value-key="objectValueKey"
+        :multiple="selectMultiple"
+        class="w-100"
+      >
         <el-option
           v-for="item in selectListLocal"
           :key="item[selectKey]"
           :label="item[selectLabel]"
-          :value="item[selectValue]"
+          :value="selectJson ? item : item[selectValue]"
         />
       </el-select>
-      <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-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-input
         v-else
         v-model="model"
@@ -49,29 +84,44 @@
         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,
@@ -79,11 +129,11 @@ export default {
     },
     type: {
       type: String,
-      default: 'input',
+      default: "input",
     },
     placeholder: {
       type: String,
-      default: '',
+      default: "",
     },
     selectList: {
       type: Array,
@@ -93,17 +143,25 @@ export default {
       type: Boolean,
       default: false,
     },
+    objectValueKey: {
+      type: String,
+      default: "value",
+    },
+    selectJson: {
+      type: Boolean,
+      default: false,
+    },
     selectKey: {
       type: String,
-      default: '',
+      default: "value",
     },
     selectLabel: {
       type: String,
-      default: '',
+      default: "name",
     },
     selectValue: {
       type: String,
-      default: '',
+      default: "",
     },
     precision: {
       type: Number,
@@ -121,18 +179,26 @@ 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: {
@@ -154,43 +220,55 @@ export default {
   },
   methods: {
     createList() {
-      let label = '';
+      let label = "";
       if (this.selectMultiple) {
         if (this.value.length) {
-          this.value.forEach(element => {
-            label = label + ' ' + this.selectList.find(({ value }) => value === element).name;
+          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("; ");
           });
         } 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="search.operator" placeholder="Select">
+        <el-select v-model="searchLocal.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(search.operator)"
-          v-model="search.value"
+          v-show="!isDisableInput(searchLocal.operator)"
+          v-model="searchLocal.value"
         />
         <el-date-picker
           v-else-if="column.type === 'date'"
-          v-model="search.value"
+          v-model="searchLocal.value"
           class="w-100"
           end-placeholder="To"
           format="dd.MM.yy"
@@ -44,13 +44,14 @@
         <el-select
           refs="select"
           v-else
-          v-model="search.value"
+          v-model="searchLocal.value"
           :multiple="isMultiple"
           placeholder="Select"
           :filterable="filterable"
           :remote="remote"
           :remote-method="remoteMethodHandler"
           :loading="loading"
+          :value-key="objectValueKey"
           clearable
           @change="updateSearch"
         >
@@ -66,8 +67,8 @@
   </el-row>
 </template>
 <script>
-import { upperFirst } from 'lodash'
-
+import { upperFirst } from "lodash";
+import Vue from "vue";
 export default {
   props: {
     column: {
@@ -82,6 +83,10 @@ export default {
         return {};
       },
     },
+    name: {
+      type: String,
+      default: "",
+    },
   },
   data() {
     const boolValues = [
@@ -89,19 +94,27 @@ 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" },
@@ -118,7 +131,9 @@ export default {
       enumOperatorsMultiple: [{ value: "in", label: "in" }],
       enumOperatorsInObject: [{ value: "in_object", label: "in_object" }],
       dateOperators: [{ value: "between", label: "between" }],
-      boolOperators: [{ value: "equal", label: "is" }],
+      boolOperators: [{ value: "bool", label: "is" }],
+      selectListLocal: selectValues,
+
     };
   },
   computed: {
@@ -130,7 +145,12 @@ 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 {
@@ -161,26 +181,38 @@ export default {
   watch: {
     showFilter() {
       if (this.showFilter === false) {
-        this.search.operator = "";
-        this.search.value = "";
-      } else if (this.search.operator === "" && this.operators.length === 1) {
-        this.search.operator = this.operators[0].value;
+        this.searchLocal.operator = "";
+        this.searchLocal.value = "";
+      } else if (
+        this.searchLocal.operator === "" &&
+        this.operators.length === 1
+      ) {
+        this.searchLocal.operator = this.operators[0].value;
       }
     },
-    search: {
+    search(newValue) {
+      if (newValue !== this.search) {
+        this.searchLocal = Object.assign({}, this.search);
+      }
+    },
+    searchLocal: {
       deep: true,
       handler() {
-        if (this.search.operator == '') {
+        this.$emit("update:search", {
+          name: this.name,
+          value: this.searchLocal,
+        });
+        if (this.searchLocal.operator == "") {
           this.showFilter = false;
         }
-      }
+      },
     },
   },
   methods: {
     isDisableInput(operator) {
       const disable = this.disabledInputOperations.includes(operator);
       if (disable) {
-        this.search.value = "";
+        this.searchLocal.value = "";
       }
       return disable;
     },
@@ -191,7 +223,7 @@ export default {
         searchFields: this.selectLabel + ":like",
       });
       this.selectListLocal = response.data;
-      this.search["selectList"] = response.data;
+      this.searchLocal["selectList"] = response.data;
       this.loading = false;
     },
     updateSearch(key) {
@@ -200,7 +232,7 @@ export default {
         for (const item of this.selectListLocal) {
           if (item[this.selectKey] === key) {
             obj[this.selectLabel] = item[this.selectLabel];
-            this.search.selectList = [obj];
+            this.searchLocal.selectList = [obj];
           }
         }
       }

package/src/components/GenericFilters/index.vue

@@ -1,10 +1,12 @@
 <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>
@@ -16,15 +18,19 @@ 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 },
@@ -39,15 +45,17 @@ name: "GenericFilter",
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
+      console.log(this.search);
+      this.$emit("apply:filter", 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>