11 jaren geleden · 046e322803
--- a/examples/grid/grid.js
+++ b/examples/grid/grid.js
@@ -0,0 +1,42 @@
 
				+// register the grid component
			
 
				+Vue.component('demo-grid', {
			
 
				+  template: '#grid-template',
			
 
				+  replace: true,
			
 
				+  data: function () {
			
 
				+    return {
			
 
				+      columns: null,
			
 
				+      sortKey: '',
			
 
				+      filterKey: '',
			
 
				+      reversed: {}
			
 
				+    }
			
 
				+  },
			
 
				+  ready: function () {
			
 
				+    // assuming all data entries have the same keys
			
 
				+    // extract the column headers
			
 
				+    this.columns = Object.keys(this.data[0])
			
 
				+    // initialize column reverse state
			
 
				+    this.columns.forEach(function (key) {
			
 
				+      this.reversed.$add(key, false)
			
 
				+    }.bind(this))
			
 
				+  },
			
 
				+  methods: {
			
 
				+    sortBy: function (key) {
			
 
				+      this.sortKey = key
			
 
				+      this.reversed[key] = !this.reversed[key]
			
 
				+    }
			
 
				+  }
			
 
				+})
			
 
				+
			
 
				+// bootstrap the demo
			
 
				+var demo = new Vue({
			
 
				+  el: '#demo',
			
 
				+  data: {
			
 
				+    search: '',
			
 
				+    gridData: [
			
 
				+      { name: 'Chuck Norris', power: Infinity },
			
 
				+      { name: 'Bruce Lee', power: 9000 },
			
 
				+      { name: 'Jacky Chang', power: 7000 },
			
 
				+      { name: 'Jet Li', power: 8000 }
			
 
				+    ]
			
 
				+  }
			
 
				+})
			
--- a/examples/grid/index.html
+++ b/examples/grid/index.html
@@ -0,0 +1,48 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <title>Vue.js grid component example</title>
			
 
				+    <link rel="stylesheet" href="style.css">
			
 
				+    <script src="../../dist/vue.js"></script>
			
 
				+    </head>
			
 
				+  <body>
			
 
				+
			
 
				+    <!-- component template -->
			
 
				+    <script type="text/x-template" id="grid-template">
			
 
				+      <table>
			
 
				+        <thead>
			
 
				+          <tr>
			
 
				+            <th v-repeat="key: columns"
			
 
				+              v-on="click:sortBy(key)"
			
 
				+              v-class="active: sortKey == key">
			
 
				+              {{key | capitalize}}
			
 
				+              <span class="arrow"
			
 
				+                v-class="reversed[key] ? 'dsc' : 'asc'">
			
 
				+              </span>
			
 
				+            </th>
			
 
				+          </tr>
			
 
				+        </thead>
			
 
				+        <tbody>
			
 
				+          <tr v-repeat="
			
 
				+            entry: data
			
 
				+            | filterBy filterKey
			
 
				+            | orderBy sortKey reversed[sortKey]">
			
 
				+            <td v-repeat="key: columns">
			
 
				+              {{entry[key]}}
			
 
				+            </td>
			
 
				+          </tr>
			
 
				+        </tbody>
			
 
				+      </table>
			
 
				+    </script>
			
 
				+
			
 
				+    <!-- demo root element -->
			
 
				+    <div id="demo">
			
 
				+      Search <input v-model="search">
			
 
				+      <demo-grid v-with="data:gridData, filterKey:search"></demo-grid>
			
 
				+    </div>
			
 
				+
			
 
				+    <script src="grid.js"></script>
			
 
				+
			
 
				+  </body>
			
 
				+</html>
			
--- a/examples/grid/style.css
+++ b/examples/grid/style.css
@@ -0,0 +1,58 @@
 
				+body {
			
 
				+  font-family: Helvetica Neue, Arial, sans-serif;
			
 
				+  font-size: 14px;
			
 
				+  color: #444;
			
 
				+}
			
 
				+
			
 
				+table {
			
 
				+  border: 2px solid #42b983;
			
 
				+  border-radius: 3px;
			
 
				+  background-color: #fff;
			
 
				+}
			
 
				+
			
 
				+th {
			
 
				+  background-color: #42b983;
			
 
				+  color: rgba(255,255,255,0.66);
			
 
				+  cursor: pointer;
			
 
				+  -webkit-user-select: none;
			
 
				+  -moz-user-select: none;
			
 
				+  -user-select: none;
			
 
				+}
			
 
				+
			
 
				+td {
			
 
				+  background-color: #f9f9f9;
			
 
				+}
			
 
				+
			
 
				+th, td {
			
 
				+  min-width: 120px;
			
 
				+  padding: 10px 20px;
			
 
				+}
			
 
				+
			
 
				+th.active {
			
 
				+  color: #fff;
			
 
				+}
			
 
				+
			
 
				+th.active .arrow {
			
 
				+  opacity: 1;
			
 
				+}
			
 
				+
			
 
				+.arrow {
			
 
				+  display: inline-block;
			
 
				+  vertical-align: middle;
			
 
				+  width: 0;
			
 
				+  height: 0;
			
 
				+  margin-left: 5px;
			
 
				+  opacity: 0.66;
			
 
				+}
			
 
				+
			
 
				+.arrow.asc {
			
 
				+  border-left: 4px solid transparent;
			
 
				+  border-right: 4px solid transparent;
			
 
				+  border-bottom: 4px solid #fff;
			
 
				+}
			
 
				+
			
 
				+.arrow.dsc {
			
 
				+  border-left: 4px solid transparent;
			
 
				+  border-right: 4px solid transparent;
			
 
				+  border-top: 4px solid #fff;
			
 
				+}