diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue')
-rw-r--r-- | third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue new file mode 100644 index 0000000000..4c20b4b3ae --- /dev/null +++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/vuejs-cli/src/components/Todos.vue @@ -0,0 +1,112 @@ +<template> + <section class="todoapp"> + <header class="header"> + <h1>Todos</h1> + <input type="text" class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo" /> + </header> + <section class="main" v-show="todos.length" v-cloak> + <input type="checkbox" class="toggle-all" v-model="allDone"> + <ul class="todo-list"> + <li class="todo" v-for="todo in filteredTodos" :class="{completed : todo.completed, editing : todo === editing }"> + <div class="view"> + <input type="checkbox" v-model="todo.completed" class="toggle"> + <label @dblclick="editTodo(todo)">{{ todo.title }}</label> + <button class="destroy" @click.prevent="deleteTodo(todo)"></button> + </div> + <input type="text" class="edit" v-model="todo.title" @keyup.enter="doneEdit" @blur="doneEdit" v-todoFocus="todo === editing"></input> + </li> + </ul> + </section> + <footer class="footer" v-show="todos.length > 0"> + <span class="todo-count"> + <strong>{{ remaining }}</strong> {{ remaining | pluralize }} left + </span> + <ul class="filters"> + <li><a href="#/all" :class="{selected: filter == 'all'}" @click="filter = 'all'">All</a></li> + <li><a href="#/active" :class="{selected: filter == 'active'}" @click="filter = 'active'">Active</a></li> + <li><a href="#/completed" :class="{selected: filter == 'completed'}" @click="filter = 'completed'">Completed</a></li> + </ul> + <button class="clear-completed" v-show="completed" @click.prevent="deleteCompleted">Clear Completed</button> + </footer> + </section> +</template> + +<script> +import Vue from 'vue' + +export default { + data () { + return { + todos: [], + newTodo: '', + filter: 'all', + allDone: false, + editing: null + } + }, + filters: { + pluralize: function (n) { + return n === 1 ? 'item' : 'items' + } + }, + directives: { + todoFocus (el, value) { + if (value) { + Vue.nextTick(_ => { + el.focus() + }) + } + } + }, + methods: { + addTodo () { + this.todos.push({ + completed: false, + title: this.newTodo + }) + this.newTodo = '' + }, + deleteTodo (todo) { + this.todos = this.todos.filter(t => t !== todo) + }, + deleteCompleted () { + this.todos = this.todos.filter(todo => !todo.completed) + }, + editTodo (todo) { + this.editing = todo + }, + doneEdit () { + this.editing = null + } + }, + computed: { + remaining () { + return this.todos.filter(todo => !todo.completed).length + }, + completed () { + return this.todos.filter(todo => todo.completed).length + }, + filteredTodos () { + if (this.filter === 'active') { + return this.todos.filter(todo => !todo.completed) + } else if (this.filter === 'completed') { + return this.todos.filter(todo => todo.completed) + } + + return this.todos + }, + allDone: { + get () { + return this.remaining === 0 + }, + set (value) { + this.todos.forEach(todo => { + todo.completed = value + }) + } + } + } +} +</script> + +<style src="./todo.css"></style> |