@tripup-company/element-ui-extended 0.0.10 → 0.0.14

package/README.md

@@ -1,34 +1,114 @@
-# element-ui-extended
-
-## Project setup
-```
-npm install
-```
+# Element-ui-extended
+
+## Table of Contents
+
+- [Install](#install)
+- [Features](#features)
+- [Usage](#usage)
+  * [CompositeTable](#compositeTable)
+  * [EditableField](#editableField)
+  * [GenericFilter](#genericFilter)
+
+## Install
+
+```sh
+# using in your project
+npm i @tripup-company/element-ui-extended
+```
+
+## Features
+
+- Create the table with filters and pagination (CompositeTable)
+- Use directly components:
+  - CompositeTable
+  - EditableField
+  - GenericFilter
+  - GenericTable
+  - GeneticPaginator
+  - NewField
+  - PartColumnEdit
+  - PartColumnNew
+  - PartForm
+  - QuickSearchFilter
+___
+## Usage
+
+### CompositeTable
+CompositeTable is component that combine such components GenericTable, GenericFilters, GenericTopFilters
 
-### Compiles and hot-reloads for development
+![CompositeTable diagram](https://github.com/tripup-company/element-ui-extended/blob/added_documentation/docs/diagram.jpg?raw=true)
+
+[CompositeTable docs](/docs/index.html#/components/CompositeTable)
+```vue
+<composite-table :storage-key="key" :fields="fields" :top-filter="topFilter" :filters="filters" :repository="$api.countries()" />
+```
+
+```js
+import config from '../settings/config';
+import { CompositeTable } from '@tripup-company/element-ui-extended';
+export default {
+  components: { CompositeTable },
+  data () {
+    return {
+      fields: config.tableFields(this.$router),
+      filters: config.filters,
+      key: 'storage.key',
+      topFilter: {
+        name: 'first_name,last_name,email,phone,mobile,position,street,city,state,second_email,department',
+        label: 'Search',
+        type: 'string',
+        operator: 'like_fields',
+      }
+    };
+  }
+}
 ```
-npm run serve
+config.js
+```json config.js
+export default {
+  tableFields: ($router) => 
+  [
+    {
+      prop: 'id',
+      label: '#',
+      width: 70,
+      callback: (field, index, row) => {
+        $router.push('/cruises/edit/' + row.id);
+      },
+    },
+    {
+      prop: 'ship.data.ship', label: 'Ship', callback: (field, index, row) => {
+        $router.push('/cruises/edit/' + row.id);
+      },
+      formatter: row => {
+        return row.ship.data.ship;
+      },
+    },
+  ],
+  filters: [
+    {
+      name: 'created_at',
+      label: 'Created at',
+      type: 'date',
+      operator: 'between_date',
+    },
+    {
+      name: 'country',
+      label: 'Country',
+      type: 'string',
+    },
+  ]
+}
 ```
+___
 
-### Compiles and minifies for production
-```
-npm run build
-```
+### EditableField 
+NewField, EditableField- components that combine such components of element io: el-checkbox, el-input-number, el-select, el-date-picker, el-input
 
-### Lints and fixes files
-```
-npm run lint
-```
+These components are quickly configurable through the config and are needed to shorten the code, we can render elements use loop
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+[EditableField docs](/docs/index.html#/components/EditableField)
 
-NewField, EditableField are powerful components that combine such components of element io: el-checkbox, el-input-number, el-select, el-date-picker, el-input
-====
-These components are quickly configurable through the config and are needed to shorten the code, we can render elements use loop
----
-Works with Vue 2.*, example:
----
 ```
 <editable-field
     v-model="data[prop]"
@@ -44,21 +124,22 @@ Works with Vue 2.*, example:
     @editable:save="updateValue"
 />
 ```
-Attributes
----
-|Attribute name|Description|Type|Accepted values|Default|
-| --- | --- | --- | --- | --- |
-|field|field key in model|String|—|''|
-|value|field value - binding value|String, Boolean, Date, Number, Array|—|''|
-|type|type element from Accepted values|String|checkbox select date-picker number textarea input|input|
-|placeholder|placeholder for this field|String|—|''|
-|select-key|selectKey in select-list|String|—|''|
-|select-label|selectLabel  in select-list|String|—|''|
-|remote-method|remote method for select search|Object|—|null|
-|step|incremental step|Number|—|1|
-|precision|precision of input value|Number|—|0|
-|select-multiple|is select Multiple|Boolean|—|false|
-|select-list|list for select|Array|—|[]|
+___
+### GenericFilter
+
+GenericFilter - component for work with filter ( template with checkbox for use selected filters)
+
+[GenericFilter docs](/docs/index.html#/components/GenericFilter)
+
+```vue
+<generic-filter
+  v-if="filters.length"
+  :filters="filters"
+  :search="search"
+  @apply:filter="handleApplyFilter"
+  @reset:filter="handleResetFilter"
+/>
+```
 
 PartColumn is component that show part of form with it title and configured column resolution
 ====
@@ -85,14 +166,13 @@ Attributes
 |data|data biding values for fields|Object|—|{}|
 |errors|errors for fields|Object|—|{}|
 
-GenericFilters - component for work with filter ( template with checkbox for use selected filters) 
-===
+
 Attributes
 ---
-|Attribute name|Description|Type|Accepted values|Default|
-| --- | --- | --- | --- | --- |
-|filters| all filters for show| Array | [] | []|
-|search| selected filters | Array | [] | [] |
+|Attribute name|Description|Type|Default|
+| --- | --- | --- | --- |
+|filters| all filters for show| Array | [] |
+|search| selected filters | Array | [] |
 
 Example filters:
 ```
@@ -120,7 +200,6 @@ Example search:
     },
     first_name,last_name,email,phone,mobile,position,street,city,state,second_email,department: {
         operator: "like_fields"
-        position: "top"
         value: ""
     }
 }
@@ -132,11 +211,6 @@ Events
 
 @reset:filter
 
-GenericTopFilters - component for work with filter (template without checkbox)
-===
-Attributes and events such as GenericFilter component
----
-
 
 GenericTable - component for show table
 ===
@@ -168,7 +242,7 @@ Events
 
 @page:change
 
-CompositeTable is component that combine such components GenericTable, GenericFilters, GenericTopFilters
 ====
 
 
+