minimal Material Todo List using Vue

minimal Material Todo List using Vue

In this post we will show you minimal Material Todo List using Vue, hear for minimal Material Todo List using Vue we will give you demo and example for implement.

Material Todo List using Vue

A minimal todo list app that lives in your local browser storage. Built using Materialize CSS and Vue.js.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oWNGyV” default_tab=”js,result” user=”23_jumi”]See the Pen Material Todo List with Vue by Margaret H (@23_jumi) on CodePen.[/codepen_embed]


<div id="app">
<app :stored-id="storedId" :stored-data="storedData"
@update-id="updateId" @update-list="updateList">
</app>
</div>

<a class="github-button" href="https://github.com/margaret2/vue-todo-list"
data-icon="octicon-star" data-style="mega" data-count-href="/margaret2/vue-todo-list/stargazers"
data-count-api="/repos/margaret2/vue-todo-list#stargazers_count" data-count-aria-label="# stargazers on GitHub"
aria-label="Star margaret2/vue-todo-list on GitHub">Star</a>






const STORED_LIST = 'vue-todo-list-fCb8AKPOwQ'
const STORED_ID = 'vue-todo-id-ZkPjMLQCI8'

let storedTodoList = JSON.parse(window.localStorage.getItem(STORED_LIST))
let storedId = window.localStorage.getItem(STORED_ID)

let startArray = [
{text: 'Add Todo Items with the + Button', color: 'ice',
checked: false, starred: false, id: 1},
{text: 'Star Items for Priority', color: 'jewel',
checked: true, starred: true, id: 2 },
{text: 'Filter Items by Color or Star', color: 'tang',
checked: false, starred: true, id: 3 },
{text: 'All Saved in Local Browser Storage', color: 'ice', checked: true, starred: false, id: 4}
]

let app = {
props: ['stored-id', 'stored-data'],
template: `
<div>
<tab-bar @filter="onFilter" :colors="colors"></tab-bar>
<ul>
<item v-for="item in todoList.filter((x) => filter === 'all' ? x : filter === 'starred' ? x.starred : filter === x.color)"
:key="item.id" :data="item" :colors="colors" :filter="filter"
@check="onCheck(item.id)" @color-change="onColorChange(item.id)" @new-color="onNewColor"
@star-change="onStarChange(item.id)" @remove="onRemove(item.id)"></item>
</ul>
<add-form @add-item="addItem"></add-form>
</div>`,
data: function(){
return {
colors: ['all', 'ice', 'tang', 'jewel', 'rose'],
newId: this.storedId || 5,
todoList: this.storedData || startArray,
filter: 'all',
recentColor: 'ice'
}
},
watch: {
todoList: {
handler: function(){ this.$emit('update-list', this.todoList)},
deep: true
}
},
methods: {
onFilter: function(filter){
this.filter = filter
if(filter !== 'all' && filter !== 'starred'){
this.recentColor = filter
}
},
onCheck: function(id){
let el = this.todoList.find((x) => x.id === id)
el.checked = !el.checked
},
onColorChange: function(id){
let el = this.todoList.find((x) => x.id === id)
el.color = this.recentColor
},
onNewColor: function(color){
this.recentColor = color
},
onStarChange: function(id){
let el = this.todoList.find((x) => x.id === id)
el.starred = !el.starred
},
onRemove: function(id){
let el = this.todoList.find((x) => x.id === id)
let idx = this.todoList.indexOf(el)
this.todoList.splice(idx, 1)
},
addItem: function(text){
this.todoList.push({
text: text,
color: this.recentColor,
checked: false,
starred: false,
id: this.newId
})
this.newId++
this.$emit('update-id', this.newId)
}
}
}

let tabBar = {
props: ['colors'],
template: `
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="col s1"></li>
<li v-for="(color, index) in colors"
:class="[tabClass, index === activeTab ? 'active' : '']"
:id="index" @click="activate(index)">
<p :class="'color ' + color"></p>
</li>
<li :class="[tabClass, 'star', 5 === activeTab ? 'active' : '']"
:id="5" @click="activate(5)">
<p id="star">
<span class="lg-i material-icons sun">grade</span>
</p>
</li>
<li class="col s1"></li>
</ul>
</div>
</div>`,
data: function(){
return {
activeTab: 0,
tabClass: 'tab col s1 ',
}
},
methods: {
activate: function(i){
this.activeTab = i;
let filter = i === 0 ? 'all'
: i === 5 ? 'starred'
: this.colors[i]
this.$emit('filter', filter)
}
}
}
let item = {
props: ['colors', 'data'],
template: `
<li style="position:relative;">
<div :class="['collapsible-header', this.data.color + '-bd']">
<span :class="['material-icons', 'check', this.data.color + '-txt']"
@click="onCheck">
{{ data.checked ? 'check_box' : 'check_box_outline_blank' }}
</span>
<p class="limit">
<span :class="['h-txt', this.data.color + '-txt']">
{{ data.text }}
</span>
</p>
<span class="material-icons right head-info dropdown-button"
:data-activates="menuId" @click="toggleActive">
more_vert
</span>
<span v-if="data.starred"
class="material-icons right sun-txt head-info">
grade
</span>
<item-menu :data-id="data.id" :active="active" :starred="data.starred" :colors="colors"
@mouseleave="onMouseLeave" @new-color="onNewColor"
@color-change="onColorChange" @star-change="onStarChange" @remove="onRemove">
</item-menu>
</div>
</li>`,
data: function(){
return {
active: false,
menuId: 'menu' + this.data.id
}
},
methods: {
onCheck: function(){
this.$emit('check')
},
onColorChange: function(){
this.$emit('color-change')
},
onMouseLeave: function(){
this.active = false
},
onNewColor: function(color){
this.$emit('new-color', color)
},
onStarChange: function(){
this.$emit('star-change')
},
onRemove: function(){
this.$emit('remove')
},
toggleActive: function(){
this.active = !this.active
}
}
}
let itemMenu = {
props: ['active', 'colors', 'data-id', 'starred'],
template: `
<ul class="dropdown-content" :id="'menu'+dataId" :style="active ? activeStyle : '' " @mouseleave="onMouseLeave">
<li>
<p v-for="color in colors.slice(1)"
:class="['color-sm', color]" :id="color"
@click="onColorChange"></p>
</li>
<li class="h-txt sun-txt star-btn"
@click="onStarChange">{{ starred ? 'unstar' : 'star'}}</li>
<li class="h-txt rose-txt remove-btn"
@click="onRemove">remove</li>
</ul>`,
data: function(){
return {
activeStyle: {
width: '26.25px',
position: 'absolute',
top: '0',
right: '3em',
opacity: 1,
display: 'block'
}
}
},
methods: {
emitColor: function(e){
this.$emit('new-color', e.target.id)
},
onColorChange: function(e){
this.emitColor(e)
this.$emit('color-change')
},
onStarChange: function(){
this.$emit('star-change')
},
onMouseLeave: function(){
this.$emit('mouseleave')
},
onRemove: function(){
this.$emit('remove')
}
}
}

let addForm = {
template: `
<p v-if="!showForm" class=" center new-todo limit">
<span class="material-icons" id="add"
@click="toggleForm">
add_circle_outline
</span>
</p>
<p v-else class="center new-todo limit">
<input type="text"  id="new-input" v-model="inputValue"
@keyup.esc="toggleForm" @keyup.enter="handleAdd">
<button type="submit" class="btn"
@click="handleAdd">Add</button>
</p>`,
data: function(){
return {
showForm: false,
inputValue: ''
}
},
methods: {
toggleForm: function(){
this.showForm = !this.showForm
},
handleAdd: function(){
this.$emit('add-item', this.inputValue)
this.inputValue = ''
this.toggleForm()
}
}
}

let main = {
el: '#app',
data: {
storedId: storedId,
storedData: storedTodoList
},
methods: {
updateId: function(id){
window.localStorage.setItem(STORED_ID, id)
},
updateList: function(list){
window.localStorage.setItem(STORED_LIST, JSON.stringify(list))
}
}
}
Vue.component('item-menu', itemMenu)
Vue.component('item', item)
Vue.component('tab-bar', tabBar)
Vue.component('add-form', addForm)
Vue.component('app', app)
new Vue(main)

Hope this code and post will helped you for implement minimal Material Todo List using Vue. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org




Leave a Comment

Your email address will not be published. Required fields are marked *

  +  18  =  25

We accept paid advance and paid guest Posting on our Site : Contact US