Skip to content

Commit f417449

Browse files
committed
add examples
1 parent 1d6295e commit f417449

File tree

14 files changed

+623
-11
lines changed

14 files changed

+623
-11
lines changed

examples/commits.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<script type="module">
2+
import { createApp, reactive } from '../src'
3+
4+
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`
5+
6+
createApp({
7+
branches: ['master', 'v2-compat'],
8+
currentBranch: 'master',
9+
commits: null,
10+
11+
truncate(v) {
12+
const newline = v.indexOf('\n')
13+
return newline > 0 ? v.slice(0, newline) : v
14+
},
15+
16+
formatDate(v) {
17+
return v.replace(/T|Z/g, ' ')
18+
},
19+
20+
fetchData() {
21+
fetch(`${API_URL}${this.currentBranch}`)
22+
.then((res) => res.json())
23+
.then((data) => {
24+
this.commits = data
25+
})
26+
}
27+
}).mount()
28+
</script>
29+
30+
<div v-scope v-effect="fetchData()">
31+
<h1>Latest Vue.js Commits</h1>
32+
<template v-for="branch in branches">
33+
<input
34+
type="radio"
35+
:id="branch"
36+
:value="branch"
37+
name="branch"
38+
v-model="currentBranch"
39+
/>
40+
<label :for="branch">{{ branch }}</label>
41+
</template>
42+
<p>vuejs/vue@{{ currentBranch }}</p>
43+
<ul>
44+
<li v-for="{ html_url, sha, author, commit } in commits">
45+
<a :href="html_url" target="_blank" class="commit"
46+
>{{ sha.slice(0, 7) }}</a
47+
>
48+
- <span class="message">{{ truncate(commit.message) }}</span><br />
49+
by
50+
<span class="author"
51+
><a :href="author.html_url" target="_blank"
52+
>{{ commit.author.name }}</a
53+
></span
54+
>
55+
at <span class="date">{{ formatDate(commit.author.date) }}</span>
56+
</li>
57+
</ul>
58+
</div>
59+
60+
<style>
61+
body {
62+
font-family: 'Helvetica', Arial, sans-serif;
63+
}
64+
a {
65+
text-decoration: none;
66+
color: #f66;
67+
}
68+
li {
69+
line-height: 1.5em;
70+
margin-bottom: 20px;
71+
}
72+
.author, .date {
73+
font-weight: bold;
74+
}
75+
</style>

examples/grid.html

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<script type="module">
2+
import { createApp } from '../src'
3+
4+
const columns = ['name', 'power']
5+
const data = [
6+
{ name: 'Chuck Norris', power: Infinity },
7+
{ name: 'Bruce Lee', power: 9000 },
8+
{ name: 'Jackie Chan', power: 7000 },
9+
{ name: 'Jet Li', power: 8000 }
10+
]
11+
12+
createApp({
13+
query: '',
14+
columns,
15+
data,
16+
sortKey: '',
17+
sortOrders: columns.reduce((o, key) => ((o[key] = 1), o), {}),
18+
19+
get filteredData() {
20+
const sortKey = this.sortKey
21+
const filterKey = this.query && this.query.toLowerCase()
22+
const order = this.sortOrders[sortKey] || 1
23+
let data = this.data
24+
if (filterKey) {
25+
data = data.filter((row) => {
26+
return Object.keys(row).some((key) => {
27+
return String(row[key]).toLowerCase().indexOf(filterKey) > -1
28+
})
29+
})
30+
}
31+
if (sortKey) {
32+
data = data.slice().sort((a, b) => {
33+
a = a[sortKey]
34+
b = b[sortKey]
35+
return (a === b ? 0 : a > b ? 1 : -1) * order
36+
})
37+
}
38+
return data
39+
},
40+
41+
sortBy(key) {
42+
this.sortKey = key
43+
this.sortOrders[key] = this.sortOrders[key] * -1
44+
},
45+
46+
capitalize(str) {
47+
return str.charAt(0).toUpperCase() + str.slice(1)
48+
}
49+
}).mount()
50+
</script>
51+
52+
<div v-scope>
53+
<form id="search">Search <input name="query" v-model="query" /></form>
54+
<table v-if="filteredData.length">
55+
<thead>
56+
<tr>
57+
<th
58+
v-for="key in columns"
59+
@click="sortBy(key)"
60+
:class="{ active: sortKey == key }"
61+
>
62+
{{ capitalize(key) }}
63+
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
64+
</span>
65+
</th>
66+
</tr>
67+
</thead>
68+
<tbody>
69+
<tr v-for="entry in filteredData">
70+
<td v-for="key in columns">{{entry[key]}}</td>
71+
</tr>
72+
</tbody>
73+
</table>
74+
<p v-else>No matches found.</p>
75+
</div>
76+
77+
<style>
78+
body {
79+
font-family: Helvetica Neue, Arial, sans-serif;
80+
font-size: 14px;
81+
color: #444;
82+
}
83+
84+
table {
85+
border: 2px solid #42b983;
86+
border-radius: 3px;
87+
background-color: #fff;
88+
}
89+
90+
th {
91+
background-color: #42b983;
92+
color: rgba(255, 255, 255, 0.66);
93+
cursor: pointer;
94+
-webkit-user-select: none;
95+
-moz-user-select: none;
96+
-ms-user-select: none;
97+
user-select: none;
98+
}
99+
100+
td {
101+
background-color: #f9f9f9;
102+
}
103+
104+
th,
105+
td {
106+
min-width: 120px;
107+
padding: 10px 20px;
108+
}
109+
110+
th.active {
111+
color: #fff;
112+
}
113+
114+
th.active .arrow {
115+
opacity: 1;
116+
}
117+
118+
.arrow {
119+
display: inline-block;
120+
vertical-align: middle;
121+
width: 0;
122+
height: 0;
123+
margin-left: 5px;
124+
opacity: 0.66;
125+
}
126+
127+
.arrow.asc {
128+
border-left: 4px solid transparent;
129+
border-right: 4px solid transparent;
130+
border-bottom: 4px solid #fff;
131+
}
132+
133+
.arrow.dsc {
134+
border-left: 4px solid transparent;
135+
border-right: 4px solid transparent;
136+
border-top: 4px solid #fff;
137+
}
138+
</style>

examples/markdown.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<script src="https://unpkg.com/marked"></script>
2+
<script src="https://unpkg.com/lodash"></script>
3+
<script type="module">
4+
import { createApp } from '../src'
5+
6+
createApp({
7+
input: '# hello',
8+
get compiledMarkdown() {
9+
return marked(this.input)
10+
},
11+
update: _.debounce(function (e) {
12+
this.input = e.target.value
13+
}, 100)
14+
}).mount('#editor')
15+
</script>
16+
17+
<div id="editor">
18+
<textarea class="input" :value="input" @input="update"></textarea>
19+
<div class="output" v-html="compiledMarkdown"></div>
20+
</div>
21+
22+
<style>
23+
html,
24+
body,
25+
#editor {
26+
margin: 0;
27+
height: 100%;
28+
font-family: 'Helvetica Neue', Arial, sans-serif;
29+
color: #333;
30+
}
31+
32+
#editor {
33+
display: flex;
34+
}
35+
36+
.input,
37+
.output {
38+
width: 50%;
39+
box-sizing: border-box;
40+
}
41+
42+
.input {
43+
border: none;
44+
border-right: 1px solid #ccc;
45+
resize: none;
46+
outline: none;
47+
background-color: #f6f6f6;
48+
font-size: 14px;
49+
font-family: 'Monaco', courier, monospace;
50+
padding: 20px;
51+
}
52+
53+
.output {
54+
padding: 0 20px;
55+
}
56+
57+
code {
58+
color: #f66;
59+
}
60+
</style>

examples/svg.html

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<script type="module">
2+
import { createApp } from '../src'
3+
4+
function valueToPoint(value, index, total) {
5+
var x = 0
6+
var y = -value * 0.8
7+
var angle = ((Math.PI * 2) / total) * index
8+
var cos = Math.cos(angle)
9+
var sin = Math.sin(angle)
10+
var tx = x * cos - y * sin + 100
11+
var ty = x * sin + y * cos + 100
12+
return {
13+
x: tx,
14+
y: ty
15+
}
16+
}
17+
18+
createApp({
19+
newLabel: '',
20+
stats: [
21+
{ label: 'A', value: 100 },
22+
{ label: 'B', value: 100 },
23+
{ label: 'C', value: 100 },
24+
{ label: 'D', value: 100 },
25+
{ label: 'E', value: 100 },
26+
{ label: 'F', value: 100 }
27+
],
28+
29+
get points() {
30+
const total = this.stats.length
31+
return this.stats.map((stat, i) => valueToPoint(stat.value, i, total))
32+
},
33+
34+
get pointsString() {
35+
return this.points.map(({ x, y }) => `${x},${y}`).join(' ')
36+
},
37+
38+
add(e) {
39+
e.preventDefault()
40+
if (!this.newLabel) return
41+
this.stats.push({
42+
label: this.newLabel,
43+
value: 100
44+
})
45+
this.newLabel = ''
46+
},
47+
48+
remove(stat) {
49+
if (this.stats.length > 3) {
50+
this.stats.splice(this.stats.indexOf(stat), 1)
51+
} else {
52+
alert("Can't delete more!")
53+
}
54+
}
55+
}).mount()
56+
</script>
57+
58+
<div v-scope>
59+
<svg width="200" height="200">
60+
<g>
61+
<polygon :points="pointsString"></polygon>
62+
<circle cx="100" cy="100" r="80"></circle>
63+
<text v-for="{ x, y, label } in points" :x="x" :y="y">{{ label }}</text>
64+
</g>
65+
</svg>
66+
<!-- controls -->
67+
<div v-for="stat in stats">
68+
<label>{{stat.label}}</label>
69+
<input type="range" v-model="stat.value" min="0" max="100" />
70+
<span>{{stat.value}}</span>
71+
<button @click="remove(stat)" class="remove">X</button>
72+
</div>
73+
<form id="add">
74+
<input name="newlabel" v-model="newLabel" />
75+
<button @click="add">Add a Stat</button>
76+
</form>
77+
<pre id="raw">{{ stats }}</pre>
78+
</div>
79+
80+
<style>
81+
body {
82+
font-family: Helvetica Neue, Arial, sans-serif;
83+
}
84+
85+
polygon {
86+
fill: #42b983;
87+
opacity: 0.75;
88+
}
89+
90+
circle {
91+
fill: transparent;
92+
stroke: #999;
93+
}
94+
95+
text {
96+
font-family: Helvetica Neue, Arial, sans-serif;
97+
font-size: 10px;
98+
fill: #666;
99+
}
100+
101+
label {
102+
display: inline-block;
103+
margin-left: 10px;
104+
width: 20px;
105+
}
106+
107+
#raw {
108+
position: absolute;
109+
top: 0;
110+
left: 300px;
111+
}
112+
</style>

0 commit comments

Comments
 (0)