test: e2e test for composition API examples

Author: yyx990803

examples/classic/markdown/index.html

@@ -24,7 +24,7 @@
         },
         computed: {
           compiledMarkdown: function () {
-            return marked(this.input, { sanitize: true })
+            return marked.marked(this.input)
           }
         },
         methods: {

examples/classic/svg/svg.js

@@ -1,5 +1,5 @@
 // The raw data to observe
-var stats = [
+var globalStats = [
   { label: 'A', value: 100 },
   { label: 'B', value: 100 },
   { label: 'C', value: 100 },
@@ -16,10 +16,12 @@ Vue.component('polygraph', {
     // a computed property for the polygon's points
     points: function () {
       var total = this.stats.length
-      return this.stats.map(function (stat, i) {
-        var point = valueToPoint(stat.value, i, total)
-        return point.x + ',' + point.y
-      }).join(' ')
+      return this.stats
+        .map(function (stat, i) {
+          var point = valueToPoint(stat.value, i, total)
+          return point.x + ',' + point.y
+        })
+        .join(' ')
     }
   },
   components: {
@@ -33,26 +35,22 @@ Vue.component('polygraph', {
       template: '#axis-label-template',
       computed: {
         point: function () {
-          return valueToPoint(
-            +this.stat.value + 10,
-            this.index,
-            this.total
-          )
+          return valueToPoint(+this.stat.value + 10, this.index, this.total)
         }
       }
     }
   }
 })
 
 // math helper...
-function valueToPoint (value, index, total) {
-  var x     = 0
-  var y     = -value * 0.8
-  var angle = Math.PI * 2 / total * index
-  var cos   = Math.cos(angle)
-  var sin   = Math.sin(angle)
-  var tx    = x * cos - y * sin + 100
-  var ty    = x * sin + y * cos + 100
+function valueToPoint(value, index, total) {
+  var x = 0
+  var y = -value * 0.8
+  var angle = ((Math.PI * 2) / total) * index
+  var cos = Math.cos(angle)
+  var sin = Math.sin(angle)
+  var tx = x * cos - y * sin + 100
+  var ty = x * sin + y * cos + 100
   return {
     x: tx,
     y: ty
@@ -64,7 +62,7 @@ new Vue({
   el: '#demo',
   data: {
     newLabel: '',
-    stats: stats
+    stats: globalStats
   },
   methods: {
     add: function (e) {
@@ -80,7 +78,7 @@ new Vue({
       if (this.stats.length > 3) {
         this.stats.splice(this.stats.indexOf(stat), 1)
       } else {
-        alert('Can\'t delete more!')
+        alert("Can't delete more!")
       }
     }
   }

examples/composition/commits.html

@@ -0,0 +1,75 @@
+<script src="../../dist/vue.min.js"></script>
+
+<div id="demo">
+  <h1>Latest Vue.js Commits</h1>
+  <template v-for="branch in branches">
+    <input type="radio"
+      :id="branch"
+      :value="branch"
+      name="branch"
+      v-model="currentBranch">
+    <label :for="branch">{{ branch }}</label>
+  </template>
+  <p>vuejs/vue@{{ currentBranch }}</p>
+  <ul>
+    <li v-for="{ html_url, sha, author, commit } in commits">
+      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
+      - <span class="message">{{ truncate(commit.message) }}</span><br>
+      by <span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
+      at <span class="date">{{ formatDate(commit.author.date) }}</span>
+    </li>
+  </ul>
+</div>
+
+<script>
+const { ref, watchEffect } = Vue
+const API_URL = `https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=`
+
+const truncate = v => {
+  const newline = v.indexOf('\n')
+  return newline > 0 ? v.slice(0, newline) : v
+}
+
+const formatDate = v => v.replace(/T|Z/g, ' ')
+
+new Vue({
+  setup() {
+    const currentBranch = ref('main')
+    const commits = ref(null)
+
+    watchEffect(() => {
+      fetch(`${API_URL}${currentBranch.value}`)
+        .then(res => res.json())
+        .then(data => {
+          console.log(data)
+          commits.value = data
+        })
+    })
+
+    return {
+      branches: ['main', 'dev'],
+      currentBranch,
+      commits,
+      truncate,
+      formatDate
+    }
+  }
+}).$mount('#demo')
+</script>
+
+<style>
+  #demo {
+    font-family: 'Helvetica', Arial, sans-serif;
+  }
+  a {
+    text-decoration: none;
+    color: #f66;
+  }
+  li {
+    line-height: 1.5em;
+    margin-bottom: 20px;
+  }
+  .author, .date {
+    font-weight: bold;
+  }
+</style>

examples/composition/grid.html

@@ -0,0 +1,173 @@
+<script src="../../dist/vue.min.js"></script>
+
+<!-- DemoGrid component template -->
+<script type="text/x-template" id="grid-template">
+  <table v-if="filteredData.length">
+    <thead>
+      <tr>
+        <th v-for="key in columns"
+          @click="sortBy(key)"
+          :class="{ active: state.sortKey == key }">
+          {{ capitalize(key) }}
+          <span class="arrow" :class="state.sortOrders[key] > 0 ? 'asc' : 'dsc'">
+          </span>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="entry in filteredData">
+        <td v-for="key in columns">
+          {{entry[key]}}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <p v-else>No matches found.</p>
+</script>
+<!-- DemoGrid component script -->
+<script>
+const { reactive, computed } = Vue
+
+const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
+
+const DemoGrid = {
+  template: '#grid-template',
+  props: {
+    data: Array,
+    columns: Array,
+    filterKey: String
+  },
+  setup(props) {
+    const state = reactive({
+      sortKey: '',
+      sortOrders: props.columns.reduce((o, key) => (o[key] = 1, o), {})
+    })
+
+    const filteredData = computed(() => {
+      let { data, filterKey } = props
+      if (filterKey) {
+        filterKey = filterKey.toLowerCase()
+        data = data.filter(row => {
+          return Object.keys(row).some(key => {
+            return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+          })
+        })
+      }
+      const { sortKey } = state
+      if (sortKey) {
+        const order = state.sortOrders[sortKey]
+        data = data.slice().sort((a, b) => {
+          a = a[sortKey]
+          b = b[sortKey]
+          return (a === b ? 0 : a > b ? 1 : -1) * order
+        })
+      }
+      return data
+    })
+
+    function sortBy(key) {
+      state.sortKey = key
+      state.sortOrders[key] *= -1
+    }
+
+    return {
+      state,
+      filteredData,
+      sortBy,
+      capitalize
+    }
+  }
+}
+</script>
+
+<!-- App template (in DOM) -->
+<div id="demo">
+  <form id="search">
+    Search <input name="query" v-model="searchQuery">
+  </form>
+  <demo-grid
+    :data="gridData"
+    :columns="gridColumns"
+    :filter-key="searchQuery">
+  </demo-grid>
+</div>
+<!-- App script -->
+<script>
+new Vue({
+  components: {
+    DemoGrid
+  },
+  data: () => ({
+    searchQuery: '',
+    gridColumns: ['name', 'power'],
+    gridData: [
+      { name: 'Chuck Norris', power: Infinity },
+      { name: 'Bruce Lee', power: 9000 },
+      { name: 'Jackie Chan', power: 7000 },
+      { name: 'Jet Li', power: 8000 }
+    ]
+  })
+}).$mount('#demo')
+</script>
+
+<style>
+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;
+  -ms-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;
+}
+</style>