@tripup-company/element-ui-extended 0.0.80 → 0.0.83

package/package.json

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

package/src/components/CompositeTable/index.vue

@@ -2,7 +2,7 @@
   <div v-loading="loading" class="composite-table">
     <slot>
       <el-row :gutter="20">
-        <el-col :span="filters.length ? 18 : 24">
+        <el-col :span="filters.length && showRightFilter ? 18 : 24">
           <slot
             v-if="showTopFilter"
             v-bind="{ filters, search, handleApplyFilter, handleResetFilter }"
@@ -55,7 +55,7 @@
         </el-col>
         <el-col :span="filters.length ? 6 : 0">
           <slot
-            v-if="showLeftFilter"
+            v-if="showRightFilter"
             name="filter"
             v-bind="{ filters, search, handleApplyFilter, handleResetFilter }"
           >
@@ -96,7 +96,7 @@ export default {
       default: false,
       type: Boolean,
     },
-    showLeftFilter: {
+    showRightFilter: {
       default: true,
       type: Boolean,
     },
@@ -136,6 +136,10 @@ export default {
       default: "storage.key",
       type: String,
     },
+    filterConvertor: {
+      default: () => new FilterConverter(),
+      type: Object,
+    },
   },
   data: function () {
     const localStorage = new LocalStorageService(this.storageKey);
@@ -144,7 +148,6 @@ export default {
       localStorage
     );
     let listQueryObj = listQueryService.getListQuery();
-    const filterConvertor = new FilterConverter();
     let search = {};
     let topSearch = {};
     for (const column of this.filters) {
@@ -175,7 +178,6 @@ export default {
       data: [],
       search: search,
       topSearch: topSearch,
-      filterConvertor: filterConvertor,
       meta: listQueryService.getListQuery().meta,
       metaModel: new MetaModel(),
       listQueryService: listQueryService,

package/src/components/EditableField/index.vue

@@ -188,7 +188,7 @@ export default {
       default: "yyyy-MM-dd",
     },
   },
-  data: () => {
+  data() {
     return {
       isEditMode: false,
       model: "",

package/src/components/GenericFilters/FilterRow.vue

@@ -143,7 +143,8 @@ export default {
         case "string":
           operators = this.stringOperators;
           break;
-        case ("enum", "select"):
+        case "enum":
+        case "select":
           if (this.column.operator) {
             operators = [
               {
@@ -198,10 +199,7 @@ export default {
     searchLocal: {
       deep: true,
       handler() {
-        this.$emit("update:search", {
-          name: this.name,
-          value: this.searchLocal,
-        });
+        this.$emit("update:search", this.searchLocal);
         if (this.searchLocal.operator == "") {
           this.showFilter = false;
         }

package/src/components/GenericFilters/index.vue

@@ -5,8 +5,7 @@
       :key="column.name"
       :name="column.name"
       :column="column"
-      :search="search[column.name]"
-      @search:upate="filterRowUpdate"
+      :search.sync="localSearch[column.name]"
     />
     <el-button @click="applyFilter">Filter</el-button>
     <el-button @click="resetFilter">Reset filter</el-button>
@@ -37,6 +36,7 @@ export default {
   data() {
     const filterConvertor = new FilterConverter();
     return {
+      localSearch: this.search,
       filterConvertor: filterConvertor,
     };
   },
@@ -45,15 +45,11 @@ export default {
       return this.filterConvertor.applyFilter(this.search);
     },
     applyFilter() {
-      console.log(this.search);
-      this.$emit("apply:filter", this.search);
+      this.$emit('apply:filter', this.localSearch);
     },
     resetFilter() {
       this.$emit("reset:filter", {});
     },
-    filterRowUpdate(name, value) {
-      this.$set(this.search, name, value);
-    },
   },
 };
 </script>

package/src/components/GenericTable/index.vue

@@ -11,21 +11,16 @@
             :width="field.width ? field.width : null"
             :sortable="field.sortable ? field.sortable : null"
           >
+            <el-link v-if="field.href" :href="customHref(field, context)">
+              {{ customLinkLabel(field, context) }}
+            </el-link>
             <el-link
-                :href="
-                field.href
-                  ? typeof field.href === 'function'
-                    ? field.href(field.prop, context.$index, context.row)
-                    : field.href
-                  : '#'
+              v-else
+              @click.prevent="
+                field.callback(field.prop, context.$index, context.row)
               "
-              @click.prevent="field.callback(field.prop, context.$index, context.row)"
             >
-              {{
-                typeof field.formatter === "function"
-                  ? field.formatter(context.row)
-                  : context.row[field.prop]
-              }}
+              {{ customLinkLabel(field, context) }}
             </el-link>
           </el-table-column>
         </template>
@@ -66,10 +61,23 @@ export default {
       loading: false,
     };
   },
+  computed: {},
   methods: {
     sortChange(data) {
       this.$emit("sort:change", data);
     },
+    customHref(field, context) {
+      return field.href
+        ? typeof field.href === "function"
+          ? field.href(field.prop, context.$index, context.row)
+          : field.href
+        : "#";
+    },
+    customLinkLabel(field, context) {
+      return typeof field.formatter === "function"
+        ? field.formatter(context.row)
+        : context.row[field.prop];
+    },
   },
 };
 </script>