once upon a time...

.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

.gitignore

@@ -0,0 +1,14 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+yarn.lock
+package-lock.json
+
+coverage
+node_modules
+
+dist
+

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - 6
+  - 7
+  - 8
+  - 9
+  - node
+install:
+  - npm install -g codecov
+script:
+  - npm run coverage -- --ci --maxWorkers=4 --no-cache
+  - codecov
+

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.11.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "teible",
+  "description": "Monorepo for teible",
+  "version": "0.1.0",
+  "author": "Hien Dao <hien.dv.neo@gmail.com>",
+  "babel": {
+    "presets": [
+      "env"
+    ]
+  },
+  "bugs": {
+    "url": "https://github.com/hiendv/teible/issues"
+  },
+  "devDependencies": {
+    "@hiendv/bem-sass": "^0.1.0",
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.5",
+    "@vue/cli-service": "^3.0.0-rc.5",
+    "@vue/eslint-config-standard": "^3.0.0-rc.5",
+    "@vue/test-utils": "^1.0.0-beta.20",
+    "babel-jest": "^23.4.0",
+    "babel-preset-env": "^1.7.0",
+    "concurrently": "^3.6.0",
+    "jest": "^23.4.1",
+    "jest-serializer-vue": "^2.0.2",
+    "lerna": "^2.11.0",
+    "node-sass": "^4.9.2",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.0.3",
+    "vue": "^2.5.16",
+    "vue-jest": "^2.6.0"
+  },
+  "homepage": "https://github.com/hiendv/teible",
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest",
+      "^.+\\.(vue)$": "vue-jest"
+    },
+    "snapshotSerializers": [
+      "jest-serializer-vue"
+    ],
+    "collectCoverageFrom": [
+      "packages/*/src/**/*.{js,vue}",
+      "!packages/*example/**/*"
+    ],
+    "roots": [
+      "packages/"
+    ]
+  },
+  "license": "MIT",
+  "private": true,
+  "scripts": {
+    "build": "lerna run --sort build",
+    "clean": "rimraf packages/**/dist",
+    "coverage": "npm test -- --coverage",
+    "prebuild": "npm run clean",
+    "prepublish": "npm run build",
+    "pretest": "lerna run --parallel lint",
+    "prewatch": "lerna run --parallel lint",
+    "serve": "lerna run --parallel serve",
+    "setup": "lerna clean --yes && lerna bootstrap --hoist",
+    "start": "concurrently \"npm:watch\" \"npm:serve\"",
+    "test": "jest",
+    "test-ci": "npm run setup && npm run build && npm run coverage",
+    "watch": "lerna run --parallel watch"
+  }
+}

packages/vue-teible-example/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

packages/vue-teible-example/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "vue-teible-example",
+  "description": "Example for vue-teible",
+  "version": "0.1.0",
+  "author": "Hien Dao <hien.dv.neo@gmail.com>",
+  "bugs": {
+    "url": "https://github.com/hiendv/teible/issues"
+  },
+  "dependencies": {
+    "vue-teible": "^0.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-eslint": "^3.0.0-rc.5"
+  },
+  "homepage": "https://github.com/hiendv/teible",
+  "keywords": [
+    "datatable",
+    "teible",
+    "vue",
+    "vue-teible"
+  ],
+  "license": "MIT",
+  "main": "dist/index.html",
+  "peerDependencies": {
+    "vue": "^2.5.16"
+  },
+  "repository": "https://github.com/hiendv/teible/tree/master/packages/vue-teible-example",
+  "scripts": {
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve"
+  }
+}

packages/vue-teible-example/src/App.vue

@@ -0,0 +1,100 @@
+<template>
+  <div id="app">
+    <div class="info">
+      <p>Items: {{ items.length }}</p>
+      <p>Items per page: <input v-model="perPage" type="range" min="1" max="10" step="1"> {{ perPage }}</p>
+      <p>Filter: <input v-model="filter" type="text"></p>
+      <p>Sort By: {{ sortBy }}</p>
+      <p>Descending: {{ sortDesc }}</p>
+      <p>Selected: {{ checked }}</p>
+    </div>
+    <hr>
+    <data-table
+      :items="items"
+      :per-page="perPage"
+      :sort-desc.sync="sortDesc"
+      :sort-by.sync="sortBy"
+      :filter.sync="filter"
+      @loaded="loaded"
+    >
+      <data-column field="id" label="ID" width="10%"/>
+      <data-column field="name" label="Name" width="50%"/>
+      <data-column :sortable="false" label="Action">
+        <template slot-scope="props">
+          <button @click.prevent="action(props, 1)">Yo</button>
+          <button @click.prevent="action(props, 10)">Yo x10</button>
+          <button @click.prevent="destroy(props.item)">Delete</button>
+        </template>
+      </data-column>
+      <data-column :sortable="false" label="Text">Hello</data-column>
+      <data-column :sortable="false" label="Select">
+        <template slot-scope="props" slot="header">
+          <input v-model="checkedAll" type="checkbox">
+        </template>
+        <template slot-scope="props">
+          <input v-model="checked" :value="props.item.name" type="checkbox">
+        </template>
+      </data-column>
+    </data-table>
+  </div>
+</template>
+<style src="vue-teible/dist/vueteible.css"></style>
+<style lang="scss">
+html {
+  font-size: 15px;
+}
+</style>
+<script>
+import { DataTable, DataColumn } from 'vue-teible'
+export default {
+  components: { DataTable, DataColumn },
+  data () {
+    return {
+      sortBy: '',
+      sortDesc: false,
+      perPage: 4,
+      filter: '',
+      checked: [],
+      items: JSON.parse(`[{"id":1,"name":"Leanne Graham","username":"Bret","email":"Sincere@april.biz","address":{"street":"Kulas Light","suite":"Apt. 556","city":"Gwenborough","zipcode":"92998-3874","geo":{"lat":"-37.3159","lng":"81.1496"}},"phone":"1-770-736-8031 x56442","website":"hildegard.org","company":{"name":"Romaguera-Crona","catchPhrase":"Multi-layered client-server neural-net","bs":"harness real-time e-markets"}},{"id":2,"name":"Ervin Howell","username":"Antonette","email":"Shanna@melissa.tv","address":{"street":"Victor Plains","suite":"Suite 879","city":"Wisokyburgh","zipcode":"90566-7771","geo":{"lat":"-43.9509","lng":"-34.4618"}},"phone":"010-692-6593 x09125","website":"anastasia.net","company":{"name":"Deckow-Crist","catchPhrase":"Proactive didactic contingency","bs":"synergize scalable supply-chains"}},{"id":3,"name":"Clementine Bauch","username":"Samantha","email":"Nathan@yesenia.net","address":{"street":"Douglas Extension","suite":"Suite 847","city":"McKenziehaven","zipcode":"59590-4157","geo":{"lat":"-68.6102","lng":"-47.0653"}},"phone":"1-463-123-4447","website":"ramiro.info","company":{"name":"Romaguera-Jacobson","catchPhrase":"Face to face bifurcated interface","bs":"e-enable strategic applications"}},{"id":4,"name":"Patricia Lebsack","username":"Karianne","email":"Julianne.OConner@kory.org","address":{"street":"Hoeger Mall","suite":"Apt. 692","city":"South Elvis","zipcode":"53919-4257","geo":{"lat":"29.4572","lng":"-164.2990"}},"phone":"493-170-9623 x156","website":"kale.biz","company":{"name":"Robel-Corkery","catchPhrase":"Multi-tiered zero tolerance productivity","bs":"transition cutting-edge web services"}},{"id":5,"name":"Chelsey Dietrich","username":"Kamren","email":"Lucio_Hettinger@annie.ca","address":{"street":"Skiles Walks","suite":"Suite 351","city":"Roscoeview","zipcode":"33263","geo":{"lat":"-31.8129","lng":"62.5342"}},"phone":"(254)954-1289","website":"demarco.info","company":{"name":"Keebler LLC","catchPhrase":"User-centric fault-tolerant solution","bs":"revolutionize end-to-end systems"}},{"id":6,"name":"Mrs. Dennis Schulist","username":"Leopoldo_Corkery","email":"Karley_Dach@jasper.info","address":{"street":"Norberto Crossing","suite":"Apt. 950","city":"South Christy","zipcode":"23505-1337","geo":{"lat":"-71.4197","lng":"71.7478"}},"phone":"1-477-935-8478 x6430","website":"ola.org","company":{"name":"Considine-Lockman","catchPhrase":"Synchronised bottom-line interface","bs":"e-enable innovative applications"}},{"id":7,"name":"Kurtis Weissnat","username":"Elwyn.Skiles","email":"Telly.Hoeger@billy.biz","address":{"street":"Rex Trail","suite":"Suite 280","city":"Howemouth","zipcode":"58804-1099","geo":{"lat":"24.8918","lng":"21.8984"}},"phone":"210.067.6132","website":"elvis.io","company":{"name":"Johns Group","catchPhrase":"Configurable multimedia task-force","bs":"generate enterprise e-tailers"}},{"id":8,"name":"Nicholas Runolfsdottir V","username":"Maxime_Nienow","email":"Sherwood@rosamond.me","address":{"street":"Ellsworth Summit","suite":"Suite 729","city":"Aliyaview","zipcode":"45169","geo":{"lat":"-14.3990","lng":"-120.7677"}},"phone":"586.493.6943 x140","website":"jacynthe.com","company":{"name":"Abernathy Group","catchPhrase":"Implemented secondary concept","bs":"e-enable extensible e-tailers"}},{"id":9,"name":"Glenna Reichert","username":"Delphine","email":"Chaim_McDermott@dana.io","address":{"street":"Dayna Park","suite":"Suite 449","city":"Bartholomebury","zipcode":"76495-3109","geo":{"lat":"24.6463","lng":"-168.8889"}},"phone":"(775)976-6794 x41206","website":"conrad.com","company":{"name":"Yost and Sons","catchPhrase":"Switchable contextually-based project","bs":"aggregate real-time technologies"}},{"id":10,"name":"Clementina DuBuque","username":"Moriah.Stanton","email":"Rey.Padberg@karina.biz","address":{"street":"Kattie Turnpike","suite":"Suite 198","city":"Lebsackbury","zipcode":"31428-2261","geo":{"lat":"-38.2386","lng":"57.2232"}},"phone":"024-648-3804","website":"ambrose.net","company":{"name":"Hoeger LLC","catchPhrase":"Centralized empowering task-force","bs":"target end-to-end models"}}]`),
+      loadedItems: []
+    }
+  },
+  computed: {
+    checkedAll: {
+      get () {
+        if (!this.checked.length) {
+          return false
+        }
+
+        if (this.checked.length === this.loadedItems.length) {
+          return true
+        }
+      },
+      set (val) {
+        if (!val) {
+          this.checked = []
+          return
+        }
+
+        this.checked = this.loadedItems.map(i => i.name)
+      }
+    }
+  },
+  methods: {
+    action (props, times) {
+      for (let i = 0; i < times; i++) {
+        props.item.name += ' Yo'
+      }
+    },
+    destroy (x) {
+      this.items = this.items.filter(item => {
+        return item.id !== x.id
+      })
+    },
+    loaded (data) {
+      console.log('loaded', data)
+      this.loadedItems = data.items
+    }
+  }
+}
+</script>

packages/vue-teible-example/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

packages/vue-teible/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}