2.0.0

.babelrc

@@ -1,5 +1,14 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false
-}
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime", "transform-vue-jsx"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.eslintrc.js

@@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}

.gitignore

@@ -1,4 +1,8 @@
 .DS_Store
 node_modules/
-npm-debug.log
-.idea
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/unit/coverage
+test/e2e/reports
+selenium-debug.log

.postcssrc.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}

CHANGELOG.md

@@ -0,0 +1,57 @@
+
+# 2.0.0
+### New Features
+- Now the limits are dynamics and a propertie.
+- The translations are dynamic and it is no longer necessary to add translations.
+- The entire project has been migrated to JSX.
+- Added ESLint standard.
+- Added support to define conditions in actions with the current selected row.
+- Added spinner.
+- Changed props and data.
+
+### Bugfixes
+- And more minor fixes. LOL =).
+
+# 1.0.9
+### New
+- Added support for HTML tags.
+
+# 1.0.8
+### New
+- Added Catalan language.
+
+# 1.0.6
+### New
+- Added chinese (simplified) translation.
+
+# 1.0.5
+### New 
+- PR #7 Added support to french language.
+- New release.
+
+# 1.0.4
+### New
+- PR #5 Added change page with keyboard.
+
+# 1.0.3
+- Minor fixes.
+
+# 1.0.2
+### Bugfixes
+- PR #2: Selected row isn't reset.
+
+# 1.0.1
+### New
+- Added more docs.
+
+# 1.0.0
+### New
+- Added full docs.
+- First version release.
+
+### Features
+- Render functions.
+- Actions.
+- Dynamic columns.
+- Pagination.
+- Limits.

README.md

@@ -6,7 +6,7 @@
 </p>
 
 <p align="center">
-    A Vue.js server side component to create dynamic tables. Compatible with Vue 2.x and Laravel.
+    A Vue.js component to create dynamic tables. Compatible with Vue 2.x and Laravel.
 </p>
 
 <p align="center">
@@ -19,10 +19,6 @@
 ---
 
 ### Demo
-
-[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)
-[![forthebadge](http://forthebadge.com/images/badges/built-by-developers.svg)](http://forthebadge.com)
-
 !['Screenshot'](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/screenshot.png)
 
 Live: https://young-falls-97690.herokuapp.com/
@@ -35,65 +31,60 @@ $ npm install vue-datasource
 
 ```html
 <div id="#app">
-    <datasource
-        language="en"
-        :table-data="information.data"
+    <server-datasource
+        source="api_url"
         :columns="columns"
-        :pagination="information.pagination"
-        :actions="actions"
-        v-on:change="changePage"
-        v-on:searching="onSearch"></datasource>
+        :actions="actions"></server-datasource>
 </div>
 ```
 
 ```javascript
-import Datasource from 'vue-datasource'
+import { ServerDatasource } from 'vue-datasource'
 
 new Vue({
     el: '#app',
     components: {
-        Datasource
+        ServerDatasource
     },
     data() {
         return {
-            information: {
-                pagination: {...},
-                data: [...]
-            },
             columns: [...],
             actions: [...]
         }
-    },
-    methods: {
-        changePage(values) {...},
-        onSearch(searchQuery) {...}
     }
 });
 ```
 
+Client Side component is comming soon..
+
 ### Available Props
-| Prop        | Type    | Default | Description                                                 |
-|-------------|---------|---------|-------------------------------------------------------------|
-| table-data  | Array   |         | Table information                                           |
-| language    | String  | es      | Defines the table labels language                           |
-| columns     | Array   |         | Columns to display                                          |
-| pagination  | Object  |         | Pagination information about the table data ([structure] (#pagination-structure))   |
-| actions     | Array   |         | Action buttons ([structure] (#action-event-sctructure))                   |
+| Prop        | Type    | Default        | Description                                                 |
+|-------------|---------|----------------|-------------------------------------------------------------|
+| source      | String  |                | API Url to get data                                         |
+| translation | Object  | [Object]       | Defines the table labels language ([structure](#translation-structure))            |
+| limits      | Array   | [1,5,10,15,20] | Defines the limits to display                               |
+| columns     | Array   |                | Columns to display                                          |
+| actions     | Array   |                | Action buttons ([structure](#action-event-sctructure))      |
 
 ### Available Events
 | Event       | Description                                                                                         |
 |-------------|-----------------------------------------------------------------------------------------------------|
 | change      | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|
 | searching   | Handles search input. Gets string as parameter                                                      |
 
-### Available Languages
-| Language    | Abbr  |
-|-------------|-------|
-| Spanish     | es    |
-| English     | en    |
-| French      | fr    |
-| Chinese (Simplified)     | zh-CN |
-| Catalan     | ca |
+### Data API Example
+```javascript
+{
+    "pagination": {
+        "total": 0,
+        "to": 0,
+        "from": 0,
+        "per_page": 10,
+        "current_page": 1
+    },
+    "data": [...items]
+}
+```
 
 ### Columns
 Each column object needs a `name` and `key` attributes.
@@ -156,17 +147,18 @@ This callback will modify the data for various operations. Such as applying a sp
 }
 ```
 
-### Pagination Structure
+### Translation Structure
 ```javascript
 {
-    ...,
+    limit: 'Limit',
+    search: 'Search',
+    placeholder_search: 'Type to search..',
+    records_not_found: 'No records found',
     pagination: {
-        total: 25, // Number of total rows (default 0)
-        per_page: 15, // Number of rows to show (default 15)
-        current_page: 1, // Actual page
-        last_page: 2, // Last page
-        from: 1, // Beginning of visible rows
-        to: 15 // End of visible rows
+        show: 'Showing',
+        to: 'to',
+        of: 'of',
+        entries: 'entries'
     }
 }
 ```
@@ -180,6 +172,9 @@ This callback will modify the data for various operations. Such as applying a sp
             text: 'Click me', // Button label
             icon: 'glyphicon glyphicon-check', // Button icon
             class: 'btn-primary', // Button class (background color)
+            show(selectedRow) { // Event to define a condition to display the button with the selected row
+                return true
+            },
             event(e, row) { // Event handler callback. Gets event instace and selected row
                 console.log('Click row: ', row); // If no row is selected, row will be NULL
             }
@@ -188,14 +183,48 @@ This callback will modify the data for various operations. Such as applying a sp
 }
 ```
 
+## Buy me a coffee
+<a href="https://paypal.me/coderdiaz">
+    <img src="src/assets/donate.jpg" width="220">
+</a>
+
+### Development
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+
+# run unit tests
+npm run unit
+
+# run e2e tests
+npm run e2e
+
+# run all tests
+npm test
+```
+
+For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
 ### Implementation examples
 - Using Laravel 5.3 and pagination: [laravel-datasource-example](https://github.com/coderdiaz/laravel-datasource-example).
 
-
 ### Contributions
 All contributions are welcome send your PR and Issues.
 
+### Greatings
+[Vue Spinner by Greyby](https://github.com/greyby/vue-spinner)
+
 ### License
-Vue Datasource is open-sourced software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE)
+This is a open-source software licensed under the [MIT license](https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE)
 
-##### Created by Javier Diaz. Translation enhancement by [itsuwaribito] (https://github.com/itsuwaribito)
+##### Created by Javier Diaz. Translation by [itsuwaribito](https://github.com/itsuwaribito)

build/build.js

@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})