chore: add a few 2.x examples
This commit is contained in:
Evan You
74
packages/vue/examples/composition/commits.html
Normal file
74
packages/vue/examples/composition/commits.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<script src="../../dist/vue.global.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 { createApp, ref, watch } = Vue
|
||||
const API_URL = `https://api.github.com/repos/vuejs/vue-next/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, ' ')
|
||||
|
||||
const App = {
|
||||
setup() {
|
||||
const currentBranch = ref('master')
|
||||
const commits = ref(null)
|
||||
|
||||
watch(() => {
|
||||
fetch(`${API_URL}${currentBranch.value}`)
|
||||
.then(res => res.json())
|
||||
.then(data => { commits.value = data })
|
||||
})
|
||||
|
||||
return {
|
||||
branches: ['master', 'sync'],
|
||||
currentBranch,
|
||||
commits,
|
||||
truncate,
|
||||
formatDate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createApp().mount(App, '#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>
|
||||
175
packages/vue/examples/composition/grid.html
Normal file
175
packages/vue/examples/composition/grid.html
Normal file
@@ -0,0 +1,175 @@
|
||||
<script src="../../dist/vue.global.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: sortKey == key }">
|
||||
{{ capitalize(key) }}
|
||||
<span class="arrow" :class="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>
|
||||
const App = {
|
||||
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 }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#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>
|
||||
170
packages/vue/examples/composition/svg.html
Normal file
170
packages/vue/examples/composition/svg.html
Normal file
@@ -0,0 +1,170 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<script>
|
||||
// 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
|
||||
return {
|
||||
x: tx,
|
||||
y: ty
|
||||
}
|
||||
}
|
||||
|
||||
const AxisLabel = {
|
||||
template: '<text :x="point.x" :y="point.y">{{stat.label}}</text>',
|
||||
props: {
|
||||
stat: Object,
|
||||
index: Number,
|
||||
total: Number
|
||||
},
|
||||
setup(props) {
|
||||
return {
|
||||
point: Vue.computed(() => valueToPoint(
|
||||
+props.stat.value + 10,
|
||||
props.index,
|
||||
props.total
|
||||
))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- template for the polygraph component. -->
|
||||
<script type="text/x-template" id="polygraph-template">
|
||||
<g>
|
||||
<polygon :points="points"></polygon>
|
||||
<circle cx="100" cy="100" r="80"></circle>
|
||||
<axis-label
|
||||
v-for="(stat, index) in stats"
|
||||
:stat="stat"
|
||||
:index="index"
|
||||
:total="stats.length">
|
||||
</axis-label>
|
||||
</g>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const Polygraph = {
|
||||
props: ['stats'],
|
||||
template: '#polygraph-template',
|
||||
setup(props) {
|
||||
return {
|
||||
points: Vue.computed(() => {
|
||||
const total = props.stats.length
|
||||
return props.stats.map((stat, i) => {
|
||||
const point = valueToPoint(stat.value, i, total)
|
||||
return point.x + ',' + point.y
|
||||
}).join(' ')
|
||||
})
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AxisLabel
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- demo root element -->
|
||||
<div id="demo">
|
||||
<!-- Use the polygraph component -->
|
||||
<svg width="200" height="200">
|
||||
<polygraph :stats="stats"></polygraph>
|
||||
</svg>
|
||||
<!-- controls -->
|
||||
<div v-for="stat in stats">
|
||||
<label>{{stat.label}}</label>
|
||||
<input type="range" v-model="stat.value" min="0" max="100">
|
||||
<span>{{stat.value}}</span>
|
||||
<button @click="remove(stat)" class="remove">X</button>
|
||||
</div>
|
||||
<form id="add">
|
||||
<input name="newlabel" v-model="newLabel">
|
||||
<button @click="add">Add a Stat</button>
|
||||
</form>
|
||||
<pre id="raw">{{ stats }}</pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const App = {
|
||||
components: {
|
||||
Polygraph
|
||||
},
|
||||
setup() {
|
||||
const newLabel = Vue.ref('')
|
||||
const stats = Vue.reactive([
|
||||
{ label: 'A', value: 100 },
|
||||
{ label: 'B', value: 100 },
|
||||
{ label: 'C', value: 100 },
|
||||
{ label: 'D', value: 100 },
|
||||
{ label: 'E', value: 100 },
|
||||
{ label: 'F', value: 100 }
|
||||
])
|
||||
|
||||
function add(e) {
|
||||
e.preventDefault()
|
||||
if (!newLabel.value) return
|
||||
stats.push({
|
||||
label: newLabel.value,
|
||||
value: 100
|
||||
})
|
||||
newLabel.value = ''
|
||||
}
|
||||
|
||||
function remove(stat) {
|
||||
if (stats.length > 3) {
|
||||
stats.splice(stats.indexOf(stat), 1)
|
||||
} else {
|
||||
alert('Can\'t delete more!')
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
newLabel,
|
||||
stats,
|
||||
add,
|
||||
remove
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#demo')
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Helvetica Neue, Arial, sans-serif;
|
||||
}
|
||||
|
||||
polygon {
|
||||
fill: #42b983;
|
||||
opacity: .75;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: transparent;
|
||||
stroke: #999;
|
||||
}
|
||||
|
||||
text {
|
||||
font-family: Helvetica Neue, Arial, sans-serif;
|
||||
font-size: 10px;
|
||||
fill: #666;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
#raw {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 300px;
|
||||
}
|
||||
</style>
|
||||
208
packages/vue/examples/composition/todomvc.html
Normal file
208
packages/vue/examples/composition/todomvc.html
Normal file
@@ -0,0 +1,208 @@
|
||||
<script src="../../dist/vue.global.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/todomvc-app-css/index.css">
|
||||
|
||||
<div id="app">
|
||||
<section class="todoapp">
|
||||
<header class="header">
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo"
|
||||
autofocus autocomplete="off"
|
||||
placeholder="What needs to be done?"
|
||||
v-model="state.newTodo"
|
||||
@keyup.enter="addTodo">
|
||||
</header>
|
||||
<section class="main" v-if="state.todos.length">
|
||||
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="state.allDone">
|
||||
<label for="toggle-all">Mark all as complete</label>
|
||||
<ul class="todo-list">
|
||||
<li v-for="todo in state.filteredTodos"
|
||||
class="todo"
|
||||
:key="todo.id"
|
||||
:class="{ completed: todo.completed, editing: todo === state.editedTodo }">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox" v-model="todo.completed">
|
||||
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
|
||||
<button class="destroy" @click="removeTodo(todo)"></button>
|
||||
</div>
|
||||
<input class="edit" type="text"
|
||||
v-model="todo.title"
|
||||
v-todo-focus="todo === state.editedTodo"
|
||||
@blur="doneEdit(todo)"
|
||||
@keyup.enter="doneEdit(todo)"
|
||||
@keyup.escape="cancelEdit(todo)"
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" v-if="state.todos.length">
|
||||
<span class="todo-count">
|
||||
<strong>{{ state.remaining }}</strong>
|
||||
<span>{{ state.remainingText }}</span>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li><a href="#/all" :class="{ selected: state.visibility === 'all' }">All</a></li>
|
||||
<li><a href="#/active" :class="{ selected: state.visibility === 'active' }">Active</a></li>
|
||||
<li><a href="#/completed" :class="{ selected: state.visibility === 'completed' }">Completed</a></li>
|
||||
</ul>
|
||||
|
||||
<button class="clear-completed" @click="removeCompleted" v-if="state.todos.length > state.remaining">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const { createApp, reactive, computed, watch, onMounted, onUnmounted } = Vue
|
||||
|
||||
const STORAGE_KEY = 'todos-vuejs-3.x'
|
||||
const todoStorage = {
|
||||
fetch () {
|
||||
const todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
|
||||
todos.forEach((todo, index) => {
|
||||
todo.id = index
|
||||
})
|
||||
todoStorage.uid = todos.length
|
||||
return todos
|
||||
},
|
||||
save (todos) {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
|
||||
}
|
||||
}
|
||||
|
||||
const filters = {
|
||||
all (todos) {
|
||||
return todos
|
||||
},
|
||||
active (todos) {
|
||||
return todos.filter((todo) => {
|
||||
return !todo.completed
|
||||
})
|
||||
},
|
||||
completed (todos) {
|
||||
return todos.filter(function (todo) {
|
||||
return todo.completed
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function pluralize (n) {
|
||||
return n === 1 ? 'item' : 'items'
|
||||
}
|
||||
|
||||
const App = {
|
||||
setup () {
|
||||
const state = reactive({
|
||||
todos: todoStorage.fetch(),
|
||||
editedTodo: null,
|
||||
newTodo: '',
|
||||
beforeEditCache: '',
|
||||
visibility: 'all',
|
||||
remaining: computed(() => {
|
||||
return filters.active(state.todos).length
|
||||
}),
|
||||
remainingText: computed(() => {
|
||||
return ` ${pluralize(state.remaining)} left`
|
||||
}),
|
||||
filteredTodos: computed(() => {
|
||||
return filters[state.visibility](state.todos)
|
||||
}),
|
||||
allDone: computed({
|
||||
get: function () {
|
||||
return state.remaining === 0
|
||||
},
|
||||
set: function (value) {
|
||||
state.todos.forEach((todo) => {
|
||||
todo.completed = value
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
watch(() => {
|
||||
todoStorage.save(state.todos)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('hashchange', onHashChange)
|
||||
onHashChange()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('hashchange', onHashChange)
|
||||
})
|
||||
|
||||
function onHashChange () {
|
||||
const visibility = window.location.hash.replace(/#\/?/, '')
|
||||
if (filters[visibility]) {
|
||||
state.visibility = visibility
|
||||
} else {
|
||||
window.location.hash = ''
|
||||
state.visibility = 'all'
|
||||
}
|
||||
}
|
||||
|
||||
function addTodo () {
|
||||
const value = state.newTodo && state.newTodo.trim()
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
state.todos.push({
|
||||
id: todoStorage.uid++,
|
||||
title: value,
|
||||
completed: false
|
||||
})
|
||||
state.newTodo = ''
|
||||
}
|
||||
|
||||
function removeTodo (todo) {
|
||||
state.todos.splice(state.todos.indexOf(todo), 1)
|
||||
}
|
||||
|
||||
function editTodo (todo) {
|
||||
state.beforeEditCache = todo.title
|
||||
state.editedTodo = todo
|
||||
}
|
||||
|
||||
function doneEdit (todo) {
|
||||
if (!state.editedTodo) {
|
||||
return
|
||||
}
|
||||
state.editedTodo = null
|
||||
todo.title = todo.title.trim()
|
||||
if (!todo.title) {
|
||||
removeTodo(todo)
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit (todo) {
|
||||
state.editedTodo = null
|
||||
todo.title = state.beforeEditCache
|
||||
}
|
||||
|
||||
function removeCompleted () {
|
||||
state.todos = filters.active(state.todos)
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
addTodo,
|
||||
removeTodo,
|
||||
editTodo,
|
||||
doneEdit,
|
||||
cancelEdit,
|
||||
removeCompleted
|
||||
}
|
||||
},
|
||||
|
||||
directives: {
|
||||
'todo-focus': (el, { value }) => {
|
||||
if (value) {
|
||||
el.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
createApp().mount(App, '#app')
|
||||
</script>
|
||||
Reference in New Issue
Block a user