@tripup-company/element-ui-extended 0.0.13 → 0.0.17

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tripup-company/element-ui-extended",
-  "version": "0.0.13",
+  "version": "0.0.17",
   "main": "./dist/element-ui-extended.umd.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build-lib": "vue-cli-service build --target lib src/index.ts",
-    "test": "mochapack --webpack-config webpack.test.config.js  --require mock-local-storage --require ./src/test/setup.js ./src/test/unit/**/*.js"
+    "test": "mochapack --webpack-config webpack.test.config.js  --require mock-local-storage --require ./tests/setup.js ./tests/unit/**/*.js"
   },
   "dependencies": {
     "axios": "^0.24.0",

package/src/components/CompositeTable/index.vue

@@ -2,8 +2,13 @@
   <div v-loading="loading" class="composite-table">
     <slot>
       <el-row :gutter="20">
-        <el-col :span="18">
-          <slot name="quick-search-filter" v-bind="{ topFilter, search }">
+        <el-col :span="filters.length ? 18 : 24">
+          <slot
+            name="quick-search-filter"
+            v-bind="{ topFilter, search }"
+            :handleApplyTopFilter="handleApplyTopFilter"
+            :handleResetTopFilter="handleResetTopFilter"
+          >
             <quick-search-filter
               v-if="topFilter"
               :filter="topFilter"
@@ -12,7 +17,11 @@
               @reset:filter="handleResetTopFilter"
             />
           </slot>
-          <slot name="table" v-bind="{ fields, data }">
+          <slot
+            name="table"
+            v-bind="{ fields, data }"
+            :handleChangeSort="handleChangeSort"
+          >
             <generic-table
               :fields="fields"
               :data="data"
@@ -33,8 +42,13 @@
             </el-col>
           </el-row>
         </el-col>
-        <el-col :span="6">
-          <slot name="filter" v-bind="{ filters, search }">
+        <el-col :span="filters.length ? 6 : 0">
+          <slot
+            name="filter"
+            v-bind="{ filters, search }"
+            :handleApplyFilter="handleApplyFilter"
+            :handleResetFilter="handleResetFilter"
+          >
             <generic-filter
               v-if="filters.length"
               :filters="filters"
@@ -55,7 +69,7 @@ import GenericFilter from "../GenericFilters/index";
 import GenericPaginator from "../GenericPaginator";
 import GenericTable from "@/components/GenericTable";
 import ListQueryService from "@/services/list-query-service";
-import { LocalStorageService } from "@/services/local-storage-service";
+import LocalStorageService from "@/services/local-storage-service";
 import MetaModel from "@/models/meta-model";
 import QuickSearchFilter from "@/components/GenericFilters/QuickSearchFilter";
 import FilterConverter from "../GenericFilters/filter-convertor";
@@ -216,8 +230,8 @@ export default {
     handleFilterChange() {
       this.handleCurrentChange(1);
     },
-    handleApplyFilter() {
-      this.listQueryService.updateListQuery({ search: this.search });
+    handleApplyFilter(val) {
+      this.listQueryService.updateListQuery({ search: val });
       this.handleFilterChange();
     },
     handleResetFilter() {
@@ -230,8 +244,8 @@ export default {
       this.listQueryService.updateListQuery({ search: {} });
       this.handleFilterChange({});
     },
-    handleApplyTopFilter() {
-      this.listQueryService.updateListQuery({ topSearch: this.topSearch });
+    handleApplyTopFilter(val) {
+      this.listQueryService.updateListQuery({ topSearch: val });
       this.handleFilterChange();
     },
     handleResetTopFilter() {

package/src/components/GenericFilters/QuickSearchFilter.vue

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

package/src/components/GenericFilters/index.vue

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

package/src/components/GenericTable/index.vue

@@ -49,10 +49,6 @@ export default {
       },
       type: Array,
     },
-    title: {
-      default: "",
-      type: String,
-    },
     fields: {
       default: () => [],
       type: Array,

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

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

package/src/services/local-storage-service.ts

@@ -1,4 +1,4 @@
-export class LocalStorageService {
+export default class LocalStorageService {
   key: string | undefined;
   constructor(key = '') {
     this.key = key;

package/src/App.vue

@@ -1,64 +0,0 @@
-<template>
-  <div id="app">
-    <composite-table
-      :storageKey="'Project_name'"
-      :fields="fields"
-      :filters="filters"
-      :top-filter="topFilter"
-      :repository="repository"
-    ></composite-table>
-    <img alt="Vue logo" src="./assets/logo.png" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import CompositeTable from "@/components/CompositeTable/index.vue";
-import filters from "./filters";
-import topFilter from "./topFilter";
-import repository from "./repositories/contacts-repository";
-@Component({
-  components: { CompositeTable },
-  data: function () {
-    let repo = new repository("", "/test", null);
-    return {
-      filters: filters,
-      topFilter: topFilter,
-      repository: repo,
-      fields: [
-        {
-          prop: "full_name",
-          label: "Full Name",
-          formatter: (row) => {
-            return row.first_name + " " + row.last_name;
-          },
-        },
-        {
-          prop: "email",
-          label: "Email",
-        },
-        {
-          prop: "phone",
-          label: "Phone",
-        },
-        {
-          prop: "created_at",
-          label: "Created at",
-        },
-      ],
-    };
-  },
-})
-export default class App extends Vue {}
-</script>
-
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>

package/src/components/HelloWorld.vue

@@ -1,122 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
-          target="_blank"
-          rel="noopener"
-          >typescript</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-
-@Component
-export default class HelloWorld extends Vue {
-  @Prop() private msg!: string;
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

package/src/filters.js

@@ -1,64 +0,0 @@
-export default [
-  {
-    name: 'title',
-    label: 'Title',
-    type: 'string',
-  },
-  {
-    name: 'first_name',
-    label: 'First Name',
-    type: 'string',
-  },
-  {
-    name: 'last_name',
-    label: 'Last Name',
-    type: 'string',
-  },
-  {
-    name: 'email',
-    label: 'Email',
-    type: 'string',
-  },
-  {
-    name: 'phone',
-    label: 'Phone',
-    type: 'string',
-  },
-  {
-    name: 'mobile',
-    label: 'Mobile',
-    type: 'string',
-  },
-  {
-    name: 'position',
-    label: 'Position',
-    type: 'string',
-  },
-  {
-    name: 'street',
-    label: 'Street',
-    type: 'string',
-  },
-  {
-    name: 'zip_code',
-    label: 'Zip Code',
-    type: 'string',
-  },
-  {
-    name: 'city',
-    label: 'City',
-    type: 'string',
-  },
-  {
-    name: 'state',
-    label: 'State',
-    type: 'string',
-  },
-
-  {
-    name: 'created_at',
-    label: 'Created at',
-    type: 'date',
-    operator: 'between_date',
-  },
-];

package/src/models/contact-model.ts

@@ -1,23 +0,0 @@
-import { Icontact } from "../types/icontact";
-import { BaseModel } from "./base-model";
-
-export class ContactModel extends BaseModel implements Icontact {
-  id?: number;
-  title?: string;
-  first_name?: string;
-  last_name?: string;
-  email: string;
-  phone?: string;
-  mobile?: string;
-  position?: string;
-  comments_guid?: string;
-  city: string;
-  state?: string;
-  zip_code: string;
-  street?: string;
-  country?: string;
-
-  constructor(data = []) {
-    super(data);
-  }
-}

package/src/test/unit/components/TestComponent.vue

@@ -1,15 +0,0 @@
-<template>
-  <div>
-    Hello world!
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TestComponent',
-};
-</script>
-
-<style scoped>
-
-</style>

package/src/types/article.js

@@ -1,6 +0,0 @@
-export class Article {
-    constructor() {
-        this.name = "article";
-    }
-}
-//# sourceMappingURL=article.js.map

package/src/types/article.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"article.js","sourceRoot":"","sources":["article.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,OAAO;IAApB;QACS,SAAI,GAAG,SAAS,CAAC;IAC1B,CAAC;CAAA"}

package/src/types/icontact.ts

@@ -1,17 +0,0 @@
-export interface Icontact {
-    id?: number;
-    title?: string;
-    first_name?: string;
-    last_name?: string;
-    email: string;
-    phone?: string;
-    mobile?: string;
-    position?: string;
-    comments_guid?: string;
-    city: string;
-    state?: string;
-    zip_code: string;
-    street?: string;
-    country?: string;
-
-}