@tripup-company/element-ui-extended 0.0.28 → 0.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.28",
+  "version": "0.0.32",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -14,6 +14,7 @@
     "clone-deep": "^4.0.1",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
+    "lodash": "^4.17.21",
     "npe": "^1.2.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

package/src/components/CompositeTable/index.vue

@@ -3,12 +3,7 @@
     <slot>
       <el-row :gutter="20">
         <el-col :span="filters.length ? 18 : 24">
-          <slot
-            name="quick-search-filter"
-            v-bind="{ topFilter, search }"
-            :handleApplyTopFilter="handleApplyTopFilter"
-            :handleResetTopFilter="handleResetTopFilter"
-          >
+          <slot name="quick-search-filter" v-bind="{ topFilter, search }">
             <quick-search-filter
               v-if="topFilter"
               :filter="topFilter"
@@ -17,11 +12,7 @@
               @reset:filter="handleResetTopFilter"
             />
           </slot>
-          <slot
-            name="table"
-            v-bind="{ fields, data }"
-            :handleChangeSort="handleChangeSort"
-          >
+          <slot name="table" v-bind="{ fields, data }">
             <generic-table
               :fields="fields"
               :data="data"
@@ -43,12 +34,7 @@
           </el-row>
         </el-col>
         <el-col :span="filters.length ? 6 : 0">
-          <slot
-            name="filter"
-            v-bind="{ filters, search }"
-            :handleApplyFilter="handleApplyFilter"
-            :handleResetFilter="handleResetFilter"
-          >
+          <slot name="filter" v-bind="{ filters, search }">
             <generic-filter
               v-if="filters.length"
               :filters="filters"
@@ -235,9 +221,8 @@ export default {
     handleFilterChange() {
       this.handleCurrentChange(1);
     },
-    handleApplyFilter(val) {
-      Vue.set(this, "search", val);
-      this.listQueryService.updateListQuery({ search: val });
+    handleApplyFilter() {
+      this.listQueryService.updateListQuery({ search: this.search });
       this.handleFilterChange();
     },
     handleResetFilter() {
@@ -250,9 +235,8 @@ export default {
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
-    handleApplyTopFilter(val) {
-      Vue.set(this, "topSearch", val);
-      this.listQueryService.updateListQuery({ topSearch: val });
+    handleApplyTopFilter() {
+      this.listQueryService.updateListQuery({ topSearch: this.topSearch });
       this.handleFilterChange();
     },
     handleResetTopFilter() {

package/src/components/EditableField/index.vue

@@ -19,6 +19,7 @@
             circle
             type="primary"
             size="mini"
+            plain
             @click="handleDoubleClick"
           />
         </el-col>
@@ -45,8 +46,8 @@
         class="editable-cell__input"
       />
       <el-button-group class="editable-cell__actions">
-        <el-button v-if="isEditMode" type="success" size="mini" icon="el-icon-check" @click="handleSave" />
-        <el-button v-if="isEditMode" type="warning" size="mini" 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>

package/src/components/GenericFilters/FilterRow.vue

@@ -8,7 +8,11 @@
       </el-col>
     </el-row>
     <el-row v-if="showFilter" class="m-t-5">
-      <el-col v-if="operators.length !== 1" :span="24" class="p-b-10">
+      <el-col
+        v-if="operators.length !== 1 && operators.length !== 0"
+        :span="24"
+        class="p-b-10"
+      >
         <el-select v-model="search.operator" placeholder="Select">
           <el-option
             v-for="operator in operators"
@@ -77,19 +81,24 @@ export default {
     },
   },
   data() {
+    const boolValues = [
+      { value: null, label: "empty" },
+      { value: true, label: "true" },
+      { value: false, label: "false" },
+    ];
     return {
       loading: false,
-      selectKey: this.column.selectKey ?? "key",
-      selectLabel: this.column.selectLabel ?? "label",
-      selectValue: this.column.selectValue ?? "key",
+      selectKey: this.column.selectKey ?? "value",
+      selectLabel: this.column.selectLabel ?? "name",
+      selectValue: this.column.selectValue ?? "value",
       filterable: this.column.filterable ?? false,
       remote: this.column.remote ?? false,
       remoteMethod: this.column.remoteMethod ?? null,
-      selectListLocal: this.search.selectList
-        ? this.search.selectList
+      selectListLocal: this.column.selectList
+        ? this.column.selectList
         : this.column.type === "enum"
         ? this.column.values
-        : this.boolValues,
+        : boolValues,
       showFilter: this.search.operator !== "",
       stringOperators: [
         { value: "equal", label: "is equal" },
@@ -105,11 +114,6 @@ export default {
       enumOperators: [{ value: "equal", label: "is" }],
       enumOperatorsMultiple: [{ value: "in", label: "in" }],
       dateOperators: [{ value: "between", label: "between" }],
-      boolValues: {
-        null: "empty",
-        true: "true",
-        false: "false",
-      },
     };
   },
   computed: {
@@ -120,7 +124,7 @@ export default {
           operators = this.stringOperators;
           break;
         case "enum":
-          if (this.column.is_multiple) {
+          if (this.column.selectMultiple) {
             operators = this.enumOperatorsMultiple;
           } else {
             operators = this.enumOperators;
@@ -133,7 +137,7 @@ export default {
       return operators;
     },
     isMultiple() {
-      return this.column.is_multiple ? this.column.is_multiple : false;
+      return this.column.selectMultiple ? this.column.selectMultiple : false;
     },
     remoteMethodHandler: {
       get() {
@@ -153,9 +157,12 @@ export default {
         this.search.operator = this.operators[0].value;
       }
     },
-    search() {
-      if (this.search.operator === "") {
-        this.showFilter = false;
+    search: {
+      deep: true,
+      handler() {
+        if (this.search.operator == '') {
+          this.showFilter = false;
+        }
       }
     },
   },

package/src/components/GenericFilters/QuickSearchFilter.vue

@@ -32,7 +32,7 @@ export default {
   },
   methods: {
     applyFilter() {
-      this.$emit("apply:filter", this.search);
+      this.$emit("apply:filter");
     },
     resetFilter() {
       this.$emit("reset:filter");

package/src/components/GenericFilters/index.vue

@@ -35,8 +35,11 @@ name: "GenericFilter",
     };
   },
   methods: {
+    getFilter() {
+      return this.filterConvertor.applyFilter(this.search);
+    },
     applyFilter() {
-      this.$emit('apply:filter', this.search);
+      this.$emit('apply:filter', this.filterConvertor.applyFilter(this.search) );
     },
     resetFilter() {
       this.$emit('reset:filter', {});

package/src/components/PartColumn/EditColumn.vue

@@ -13,6 +13,7 @@
         <el-form-item :prop="propPrefix + field.prop" :label="field.label" :error="errors[field.prop] ? errors[field.prop][0] : ''">
           <editable-field
             v-model="data[field.prop]"
+            :readonly="field.readonly"
             :type="field.selectList ? 'select' : (field.type? field.type :'input')"
             :select-list="field.selectList ? field.selectList : []"
             :select-multiple="field.selectMultiple"
@@ -67,7 +68,9 @@ export default {
     },
     data: {
       type: Object,
-      default: () => {},
+      default: () => {
+        return {};
+      },
     },
     errors: {
       type: Object,

package/src/services/list-query-service.ts

@@ -25,8 +25,7 @@ export default class ListQueryService {
       meta: {
         page: 1,
         limit: 10,
-      },
-      search: {},
+      }
     };
     listQuery = Object.assign(listQuery, this.storageService.get(this.key));
     return listQuery;