1.lib/ optimize code style 2.examples/ eliminate locales of moment.js

Ken Berkeley · Ken Berkeley · commit a62069caa10c · 2017-08-10T14:27:36.000+08:00
diff --git a/examples/dist/client.04139e5e.css b/examples/dist/client.04139e5e.css
diff --git a/examples/dist/client.3cc4bf6b.css b/examples/dist/client.3cc4bf6b.css
diff --git a/examples/dist/client.59a562c9.js b/examples/dist/client.59a562c9.js
diff --git a/examples/dist/client.6eae235d.js b/examples/dist/client.6eae235d.js
diff --git a/examples/dist/index.html b/examples/dist/index.html
@@ -5,12 +5,12 @@
   <title>Vue 2 Datatable Examples</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
   <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
-<link href="client.3cc4bf6b.css" rel="stylesheet"></head>
+<link href="client.04139e5e.css" rel="stylesheet"></head>
 <body>
   
   <div id="app"></div>
 
   <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="client.6eae235d.js"></script></body>
+<script type="text/javascript" src="client.59a562c9.js"></script></body>
 </html>
diff --git a/examples/src/Advanced/comps/th-Filter.vue b/examples/src/Advanced/comps/th-Filter.vue
@@ -4,7 +4,7 @@
     <a href="javascript:;" data-toggle="dropdown">
       <i class="fa fa-filter" :class="{ 'text-muted': !keyword }"></i>
     </a>
-    <ul class="dropdown-menu p-3">
+    <ul class="dropdown-menu" style="padding: 3px">
       <div class="input-group input-group-sm">
         <input type="search" class="form-control" ref="input"
           v-model="keyword" @keydown.enter="search" :placeholder="`Search ${field}...`">
@@ -46,7 +46,4 @@ input[type=search]::-webkit-search-cancel-button {
   -webkit-appearance: searchfield-cancel-button;
   cursor: pointer;
 }
-.p-3 {
-  padding: 3px;
-}
 </style>
diff --git a/examples/src/App.vue b/examples/src/App.vue
@@ -38,7 +38,7 @@
           <a href="#advanced">Advanced</a>
         </li>
       </ul>
-      <div class="tab-content m-t-10">
+      <div class="tab-content" style="margin-top: 10px">
         <div class="tab-pane" :class="{ active: showTab === 'basic' }">
           <basic v-if="showTab === 'basic'" />
         </div>
@@ -86,7 +86,4 @@ footer {
   text-align: center;
   color: #afafaf;
 }
-.m-t-10 {
-  margin-top: 10px;
-}
 </style>
diff --git a/examples/src/_mockData/dataSource.js b/examples/src/_mockData/dataSource.js
@@ -1,34 +1,31 @@
-const Random = require('mockjs').Random
 import uniq from 'lodash/uniq'
 import without from 'lodash/without'
+const Random = require('mockjs').Random
 
 const total = 120 // how many rows to generate
 const getRandomUid = () => Random.integer(1, total)
 
-const users = []
-for (let i = 1; i <= total; i++) {
-  users.push({
-    uid: i,
-    name: Random.name(),
-    age: Random.integer(0, 100),
-    email: Random.email(),
-    friends: without(
-      uniq(Array(getRandomUid()).fill().map(() => getRandomUid())),
-      i // exclude `myself`
-    ),
-    country: Random.pick(
-      ['US', 'UK', 'China', 'Russia', 'Germany', 'France', 'Japan']
-    ),
-    lang: Random.pick(
-      ['English', 'Chinese', 'Russian', 'German', 'French', 'Japanese']
-    ),
-    programLang: Random.pick(
-      ['C', 'C++', 'Java', 'C#', 'Python', 'Ruby', 'PHP', 'JavaScript', 'Go']
-    ),
-    ip: Random.ip(),
-    color: Random.color(),
-    createTime: +new Date(Random.datetime('yyyy/MM/dd HH:mm:ss')) // to timestamp
-  })
-}
+const users = Array(total).fill().map((item, idx) => ({
+  uid: idx,
+  name: Random.name(),
+  age: Random.integer(0, 100),
+  email: Random.email(),
+  friends: without(
+    uniq(Array(getRandomUid()).fill().map(() => getRandomUid())),
+    idx // exclude `myself`
+  ),
+  country: Random.pick(
+    ['US', 'UK', 'China', 'Russia', 'Germany', 'France', 'Japan']
+  ),
+  lang: Random.pick(
+    ['English', 'Chinese', 'Russian', 'German', 'French', 'Japanese']
+  ),
+  programLang: Random.pick(
+    ['C', 'C++', 'Java', 'C#', 'Python', 'Ruby', 'PHP', 'JavaScript', 'Go']
+  ),
+  ip: Random.ip(),
+  color: Random.color(),
+  createTime: +new Date(Random.datetime('yyyy/MM/dd HH:mm:ss')) // to timestamp
+}))
 
 export default users
diff --git a/examples/src/_mockData/index.js b/examples/src/_mockData/index.js
@@ -30,7 +30,9 @@ export default function mockData(query) {
     }
   })
 
-  if (sort) rows = orderBy(rows, sort, order)
+  if (sort) {
+    rows = orderBy(rows, sort, order)
+  }
 
   const res = {
     rows: rows.slice(offset, offset + limit),
@@ -42,7 +44,7 @@ export default function mockData(query) {
   }
 
   const consoleGroupName = 'Mock data - ' + moment().format('YYYY-MM-DD HH:mm:ss')
-  setTimeout(() => { // avoid blocking the main thread
+  setTimeout(() => {
     console.group(consoleGroupName)
     console.info('Receive:', query)
     console.info('Respond:', res)
diff --git a/lib/HeadSort.vue b/lib/HeadSort.vue
@@ -12,7 +12,9 @@ export default {
     field: { type: String, required: true },
     query: { type: Object, required: true }
   },
-  data: () => ({ order: '' }),
+  data: () => ({
+    order: ''
+  }),
   computed: {
     cls () {
       return `fa-sort-${this.order}`.replace(/-$/, '')
diff --git a/lib/HeaderSettings/ColumnGroup.vue b/lib/HeaderSettings/ColumnGroup.vue
@@ -3,17 +3,17 @@
     <label class="-col-group-title">
       {{ colGroup.groupName }}
     </label>
-    <li v-for="(col, idx) in columns">
+    <li v-for="(col, idx) in options">
       <input
         :type="inputType"
-        :id="col.fieldId"
+        :id="col._uuid"
         :name="fieldName"
         :checked="'' + col.visible === 'true'"
         :disabled="typeof col.visible === 'string'"
         @change="handleChange(idx, $event.target.checked)">
-      <label :for="col.fieldId">
+      <label :for="col._uuid">
         {{ col.label || col.title }}
-        <i v-if="col.explain" class="fa fa-info-circle cursor-help" :title="col.explain"></i>
+        <i v-if="col.explain" class="fa fa-info-circle" style="cursor: help" :title="col.explain"></i>
       </label>
     </li>
   </ul>
@@ -33,12 +33,12 @@ export default {
       return this.colGroup.type || 'checkbox'
     },
     fieldName () {
-      // P.S. $vm._uid is a private property of the instance
+      // P.S. $vm._uid is a private property of a Vue instance which ensures uniqueness
       return this.inputType === 'radio' && this.colGroup.groupName + this._uid
     },
-    columns () {
-      // fieldId is used for <label for="fieldId">XXX</label>
-      return this.colGroup.columns.map((col, i) => (col.fieldId = `-col-${this._uid}-${col.field || i}`, col))
+    options () {
+      // _uuid is used for <label for="_uuid">XXX</label>
+      return this.colGroup.columns.map((col, i) => ({ ...col, _uuid: `-col-${this._uid}-${col.field || i}` }))
     }
   },
   methods: {
@@ -57,7 +57,7 @@ export default {
           this.$set(columns, idx, { ...columns[idx], visible: isChecked })
         })
       }
-      this.changes = [] // don't forget to clear the stack
+      replaceWith(changes, []) // don't forget to clear the stack
     }
   }
 }
@@ -74,7 +74,7 @@ export default {
   margin: 5px;
   padding: 5px;
   border-bottom: 1px solid #ddd;
-  font-size: 1.5em;
+  font-size: 18px;
 }
 .-col-group > li {
   margin-bottom: 2px;
diff --git a/lib/HeaderSettings/index.vue b/lib/HeaderSettings/index.vue
@@ -58,15 +58,6 @@ export default {
     colGroups: { type: Array, required: true },
     supportBackup: { type: Boolean, required: true }
   },
-  created () {
-    const { localKey: key } = this
-    if (!key) return // no need to support backup
-
-    const backup = getFromLS(key)
-    if (!backup) return
-    replaceWith(this.colGroups, backup)
-    this.usingBak = true
-  },
   data () {
     const origSettings = stringify(this.colGroups)
     return {
@@ -76,6 +67,16 @@ export default {
       localKey: this.supportBackup && hash(origSettings) // key for local backup
     }
   },
+  created () {
+    const { localKey: key } = this
+    if (!key) return // no need to support backup
+
+    const backup = getFromLS(key)
+    if (!backup) return
+
+    replaceWith(this.colGroups, backup)
+    this.usingBak = true
+  },
   computed: {
     drpMenuStyle () {
       const w = this.colGroups.length * 150
diff --git a/lib/MultiSelect.vue b/lib/MultiSelect.vue
@@ -9,8 +9,8 @@ import replaceWith from 'replace-with'
 export default {
   props: {
     selection: { type: Array, required: true },
-    row: Object, // for tbody checkbox
-    rows: Array // for thead checkbox
+    row: Object, // available for tbody checkbox
+    rows: Array // available for thead checkbox
   },
   data: () => ({
     status: false
@@ -25,7 +25,10 @@ export default {
   methods: {
     toggle () {
       const { selection, row, rows, status, pos } = this
-      if (rows) return replaceWith(selection, status ? rows : [])
+      if (rows) {
+        replaceWith(selection, status ? rows : [])
+        return
+      }
       if (row) {
         if (status && pos === -1) selection.push(row)
         if (!status && pos >= 0) selection.splice(pos, 1)
diff --git a/lib/index.vue b/lib/index.vue
@@ -134,9 +134,8 @@ export default {
     supportNested: [Boolean, String] // support nested components (String is only for 'accordion')
   },
   created () { // init query
-    const { query } = this
-    const q = { limit: 10, offset: 0, sort: '', order: '', ...query }
-    Object.keys(q).forEach(key => this.$set(query, key, q[key]))
+    const q = { limit: 10, offset: 0, sort: '', order: '', ...this.query }
+    Object.keys(q).forEach(key => this.$set(this.query, key, q[key]))
   },
   computed: {
     comp () {
@@ -147,15 +146,18 @@ export default {
     },
     columns$ () {
       const { columns } = this
-      if (!columns[0].groupName) replaceWith(columns, [{ groupName: 'Columns', columns: [...columns] }])
-
+      if (!columns[0].groupName) {
+        replaceWith(columns, [{ groupName: 'Columns', columns: [...columns] }])
+      }
       let columns$ = []
       // collect visible columns
-      columns.forEach(colGroup => columns$.push(
-        ...colGroup.columns
-          .map(col => (col.visible = typeof col.visible === 'undefined' ? true : col.visible, col))
-          .filter(col => '' + col.visible === 'true'))
-      )
+      columns.forEach(colGroup => {
+        columns$.push(
+          ...colGroup.columns
+            .map(col => (col.visible = typeof col.visible === 'undefined' ? true : col.visible, col))
+            .filter(col => '' + col.visible === 'true')
+        )
+      })
       // sort by columns$[i].weight in descending order
       return _orderBy(columns$.map(col => ((col.weight = col.weight || 0), col)), 'weight', 'desc')
       
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "vue2-datatable-component",
   "description": "The Best Datatable for Vue.js 2.x which never sucks",
   "author": "Ken Berkeley <kenberkeley@foxmail.com>",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "scripts": {
     "start": "vue build examples/src/app.js --config vue-build.config.js",
     "build": "vue build examples/src/app.js --config vue-build.config.js --prod",
diff --git a/vue-build.config.js b/vue-build.config.js
@@ -1,4 +1,5 @@
 var path = require('path'),
+  webpack = require('webpack'),
   CleanWebpackPlugin = require('clean-webpack-plugin'),
   examplesDist = path.join(__dirname, 'examples/dist');
 
@@ -12,8 +13,15 @@ module.exports = {
       path: examplesDist,
       publicPath: ''
     },
-    plugins: process.env.NODE_ENV === 'production' ? [
-      new CleanWebpackPlugin([examplesDist])
-    ] : []
+    plugins: (function () {
+      var plugins = [
+        // https://webpack.js.org/plugins/ignore-plugin/
+        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
+      ];
+      if (process.env.NODE_ENV === 'production') {
+        plugins.push(new CleanWebpackPlugin([examplesDist]));
+      }
+      return plugins;
+    })()
   }
 };
