chore: include todomvc examples (need tests!)
This commit is contained in:
Evan You
parent
6a92bbd9c0
commit
fd4845c52c
198
packages/vue/examples/todomvc-classic.html
Normal file
198
packages/vue/examples/todomvc-classic.html
Normal file
@ -0,0 +1,198 @@
|
||||
<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="newTodo"
|
||||
@keyup.enter="addTodo">
|
||||
</header>
|
||||
<section class="main" v-if="todos.length">
|
||||
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="allDone">
|
||||
<label for="toggle-all">Mark all as complete</label>
|
||||
<ul class="todo-list">
|
||||
<li v-for="todo in filteredTodos"
|
||||
class="todo"
|
||||
:key="todo.id"
|
||||
:class="{ completed: todo.completed, editing: todo === 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 === editedTodo"
|
||||
@blur="doneEdit(todo)"
|
||||
@keyup.enter="doneEdit(todo)"
|
||||
@keyup.escape="cancelEdit(todo)"
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer class="footer" v-if="todos.length">
|
||||
<span class="todo-count">
|
||||
<strong>{{ remaining }}</strong> <span>{{ pluralize(remaining) }} left</span>
|
||||
</span>
|
||||
<ul class="filters">
|
||||
<li><a href="#/all" :class="{ selected: visibility === 'all' }">All</a></li>
|
||||
<li><a href="#/active" :class="{ selected: visibility === 'active' }">Active</a></li>
|
||||
<li><a href="#/completed" :class="{ selected: visibility === 'completed' }">Completed</a></li>
|
||||
</ul>
|
||||
<button class="clear-completed" @click="removeCompleted" v-if="todos.length > remaining">
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
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
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const App = {
|
||||
// app initial state
|
||||
data: {
|
||||
todos: todoStorage.fetch(),
|
||||
newTodo: '',
|
||||
editedTodo: null,
|
||||
visibility: 'all'
|
||||
},
|
||||
|
||||
// watch todos change for localStorage persistence
|
||||
watch: {
|
||||
todos: {
|
||||
handler(todos) {
|
||||
todoStorage.save(todos)
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.addEventListener('hashchange', this.onHashChange)
|
||||
this.onHashChange()
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredTodos() {
|
||||
return filters[this.visibility](this.todos)
|
||||
},
|
||||
remaining() {
|
||||
return filters.active(this.todos).length
|
||||
},
|
||||
allDone: {
|
||||
get() {
|
||||
return this.remaining === 0
|
||||
},
|
||||
set(value) {
|
||||
this.todos.forEach(function (todo) {
|
||||
todo.completed = value
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// methods that implement data logic.
|
||||
// note there's no DOM manipulation here at all.
|
||||
methods: {
|
||||
addTodo() {
|
||||
var value = this.newTodo && this.newTodo.trim()
|
||||
if (!value) {
|
||||
return
|
||||
}
|
||||
this.todos.push({
|
||||
id: todoStorage.uid++,
|
||||
title: value,
|
||||
completed: false
|
||||
})
|
||||
this.newTodo = ''
|
||||
},
|
||||
|
||||
removeTodo(todo) {
|
||||
this.todos.splice(this.todos.indexOf(todo), 1)
|
||||
},
|
||||
|
||||
editTodo(todo) {
|
||||
this.beforeEditCache = todo.title
|
||||
this.editedTodo = todo
|
||||
},
|
||||
|
||||
doneEdit(todo) {
|
||||
if (!this.editedTodo) {
|
||||
return
|
||||
}
|
||||
this.editedTodo = null
|
||||
todo.title = todo.title.trim()
|
||||
if (!todo.title) {
|
||||
this.removeTodo(todo)
|
||||
}
|
||||
},
|
||||
|
||||
cancelEdit(todo) {
|
||||
this.editedTodo = null
|
||||
todo.title = this.beforeEditCache
|
||||
},
|
||||
|
||||
removeCompleted() {
|
||||
this.todos = filters.active(this.todos)
|
||||
},
|
||||
|
||||
onHashChange() {
|
||||
var visibility = window.location.hash.replace(/#\/?/, '')
|
||||
if (filters[visibility]) {
|
||||
this.visibility = visibility
|
||||
} else {
|
||||
window.location.hash = ''
|
||||
this.visibility = 'all'
|
||||
}
|
||||
},
|
||||
|
||||
pluralize (n) {
|
||||
return n === 1 ? 'item' : 'items'
|
||||
}
|
||||
},
|
||||
|
||||
directives: {
|
||||
'todo-focus'(el, binding) {
|
||||
if (binding.value) {
|
||||
el.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Vue.createApp().mount(App, '#app')
|
||||
</script>
|
||||
207
packages/vue/examples/todomvc-composition.html
Normal file
207
packages/vue/examples/todomvc-composition.html
Normal file
@ -0,0 +1,207 @@
|
||||
<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 > 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>
|
||||
Loading…
Reference in New Issue
Block a user