├── .browserslistrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── jest.config.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   ├── logo.png
    │   └── logo.svg
    ├── components
    │   ├── ActivitiesList.vue
    │   ├── Activity.vue
    │   └── AddActivityField.vue
    ├── main.js
    ├── plugins
    │   ├── vee-validate.js
    │   └── vuetify.js
    └── store.js
├── tests
    └── unit
    │   └── .eslintrc.js
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   'extends': [
 7 |     'plugin:vue/essential',
 8 |     '@vue/standard'
 9 |   ],
10 |   rules: {
11 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
12 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
13 |   },
14 |   parserOptions: {
15 |     parser: 'babel-eslint'
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | package-lock.json
12 | yarn.lock
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue ToDo List
 2 | 
 3 | A sample app to demonstrate Vue + Vuex + Vuetify + Vee-Validate features.
 4 | See [demo](https://alexander-elgin.github.io/vue-todo-list/)
 5 | 
 6 | ## Project setup
 7 | ```
 8 | yarn install
 9 | ```
10 | 
11 | ### Compiles and hot-reloads for development
12 | ```
13 | yarn run serve
14 | ```
15 | 
16 | ### Compiles and minifies for production
17 | ```
18 | yarn run build
19 | ```
20 | 
21 | ### Run your tests
22 | ```
23 | yarn run test
24 | ```
25 | 
26 | ### Lints and fixes files
27 | ```
28 | yarn run lint
29 | ```
30 | 
31 | ### Run your unit tests
32 | ```
33 | yarn run test:unit
34 | ```
35 | 
36 | ### Customize configuration
37 | See [Configuration Reference](https://cli.vuejs.org/config/).
38 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   moduleFileExtensions: [
 3 |     'js',
 4 |     'jsx',
 5 |     'json',
 6 |     'vue'
 7 |   ],
 8 |   transform: {
 9 |     '^.+\\.vue$': 'vue-jest',
10 |     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
11 |     '^.+\\.jsx?$': 'babel-jest'
12 |   },
13 |   moduleNameMapper: {
14 |     '^@/(.*)$': '<rootDir>/src/$1'
15 |   },
16 |   snapshotSerializers: [
17 |     'jest-serializer-vue'
18 |   ],
19 |   testMatch: [
20 |     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
21 |   ],
22 |   testURL: 'http://localhost/'
23 | }
24 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-final",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint",
 9 |     "test:unit": "vue-cli-service test:unit"
10 |   },
11 |   "dependencies": {
12 |     "vee-validate": "^2.1.4",
13 |     "vue": "^2.5.17",
14 |     "vuetify": "^1.3.0",
15 |     "vuex": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "^3.2.0",
19 |     "@vue/cli-plugin-eslint": "^3.2.0",
20 |     "@vue/cli-plugin-unit-jest": "^3.2.0",
21 |     "@vue/cli-service": "^3.2.0",
22 |     "@vue/eslint-config-standard": "^4.0.0",
23 |     "@vue/test-utils": "^1.0.0-beta.20",
24 |     "babel-core": "7.0.0-bridge.0",
25 |     "babel-eslint": "^10.0.1",
26 |     "babel-jest": "^23.6.0",
27 |     "eslint": "^5.8.0",
28 |     "eslint-plugin-vue": "^5.0.0-0",
29 |     "stylus": "^0.54.5",
30 |     "stylus-loader": "^3.0.2",
31 |     "vue-cli-plugin-vuetify": "^0.4.6",
32 |     "vue-template-compiler": "^2.5.17",
33 |     "vuetify-loader": "^1.0.5"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexander-elgin/vue-todo-list/030c2c09ff6e9d6ef444a815be25c352b431290f/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Todo List</title>
 9 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
10 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
11 |   </head>
12 |   <body>
13 |     <noscript>
14 |       <strong>We're sorry but vue-final doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
15 |     </noscript>
16 |     <div id="app"></div>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-app>
 3 |     <ActivitiesList />
 4 |   </v-app>
 5 | </template>
 6 | 
 7 | <script>
 8 | import ActivitiesList from './components/ActivitiesList'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     ActivitiesList
14 |   },
15 |   data () {
16 |     return {
17 |     }
18 |   },
19 |   computed: {
20 |   },
21 |   methods: {
22 |   }
23 | }
24 | </script>
25 | 
26 | <style>
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/alexander-elgin/vue-todo-list/030c2c09ff6e9d6ef444a815be25c352b431290f/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/ActivitiesList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-flex xs12 sm6 offset-sm3>
 3 |     <v-card>
 4 |       <v-toolbar color="cyan">
 5 |         <v-toolbar-title>Todo List</v-toolbar-title>
 6 |       </v-toolbar>
 7 |       <v-card-text>
 8 |         <AddActivityField ref="inputFeild" />
 9 |         <v-list subheader>
10 |           <Activity v-for="(activity, index) in activities" :key="index" :activity="activity" />
11 |         </v-list>
12 |       </v-card-text>
13 |     </v-card>
14 |   </v-flex>
15 | </template>
16 | 
17 | <script>
18 | import Activity from './Activity'
19 | import AddActivityField from './AddActivityField'
20 | 
21 | export default {
22 |   name: 'ActivitiesList',
23 |   components: {
24 |     Activity,
25 |     AddActivityField
26 |   },
27 |   data () {
28 |     return {
29 |     }
30 |   },
31 |   computed: {
32 |     activities () {
33 |       return this.$store.state.activities
34 |     }
35 |   },
36 |   methods: {
37 |     add () {
38 |       this.$refs.inputFeild.add()
39 |     }
40 |   }
41 | }
42 | </script>
43 | 
44 | <style>
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/Activity.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-list-tile avatar>
 3 |     <v-list-tile-avatar>
 4 |       <v-checkbox color="cyan" v-model="activity.done">
 5 |       </v-checkbox>
 6 |     </v-list-tile-avatar>
 7 | 
 8 |     <v-list-tile-content>
 9 |       <v-list-tile-title v-html="activity.title" v-bind:class = "[activity.done ? 'done' : '']"></v-list-tile-title>
10 |     </v-list-tile-content>
11 | 
12 |     <v-list-tile-action>
13 |       <v-icon color="cyan" @click="dialog = true">delete</v-icon>
14 |     </v-list-tile-action>
15 | 
16 |     <v-dialog v-model="dialog" max-width="240">
17 |       <v-card>
18 |         <v-card-title>Confirm Removal</v-card-title>
19 | 
20 |         <v-card-text>Remove?</v-card-text>
21 | 
22 |         <v-card-actions>
23 |           <v-spacer></v-spacer>
24 | 
25 |           <v-btn
26 |             color="cyan"
27 |             flat="flat"
28 |             @click="dialog = false"
29 |           >
30 |             Cancel
31 |           </v-btn>
32 | 
33 |           <v-btn
34 |             color="cyan"
35 |             flat="flat"
36 |             @click="remove(activity); dialog = false"
37 |           >
38 |             OK
39 |           </v-btn>
40 |         </v-card-actions>
41 |       </v-card>
42 |     </v-dialog>
43 |   </v-list-tile>
44 | </template>
45 | 
46 | <script>
47 | import { mapActions } from 'vuex'
48 | 
49 | export default {
50 |   name: 'Activity',
51 |   props: ['activity'],
52 |   data () {
53 |     return {
54 |       dialog: false
55 |     }
56 |   },
57 |   computed: {
58 |     title () {
59 |       return this.activity.title
60 |     }
61 |   },
62 |   methods: {
63 |     ...mapActions([
64 |       'toggle',
65 |       'remove'
66 |     ])
67 |   }
68 | }
69 | </script>
70 | 
71 | <style>
72 | .done {
73 |   text-decoration: line-through;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/components/AddActivityField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-form ref="form">
 3 |     <v-text-field
 4 |                   v-model="newActivityTitle"
 5 |                   v-validate="'alpha_spaces|min:3|required'"
 6 |                   :error-messages="errors.collect('newActivityTitle')"
 7 |                   name="newActivityTitle"
 8 |                   data-vv-as="Activity"
 9 |                   color="cyan"
10 |                   label="What to do?"
11 |                   @keydown.enter.prevent="add"
12 |                   :rules="[rules.unique]"
13 |                   ref="field"
14 |                   append-outer-icon="send"
15 |                   @click:append-outer="add"
16 |     />
17 |   </v-form>
18 | </template>
19 | 
20 | <script>
21 | 
22 | export default {
23 |   name: 'AddActivityField',
24 |   data () {
25 |     return {
26 |       newActivityTitle: '',
27 |       isValid: {
28 |         unique: value => this.$store.state.activities.filter(activity => activity.title === value).length === 0
29 |       },
30 |       rules: {
31 |         unique: value => this.isValid.unique((value || '').trim()) || `The activity is already in the list`
32 |       }
33 |     }
34 |   },
35 |   methods: {
36 |     add () {
37 |       this.$validator.validateAll()
38 | 
39 |       if (this.isVeeValidationPassed() && this.isValid.unique(this.newActivityTitle)) {
40 |         this.$store.dispatch('add', this.newActivityTitle.trim())
41 |         this.newActivityTitle = ''
42 |         this.$refs.field.blur()
43 |         this.$validator.reset()
44 |         this.$refs.form.reset()
45 |       }
46 |     },
47 |     isVeeValidationPassed () {
48 |       return Object.values(this.fields).reduce((valid, field) => valid && field.valid, true)
49 |     }
50 |   }
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import './plugins/vee-validate'
 3 | import './plugins/vuetify'
 4 | import App from './App.vue'
 5 | import store from './store'
 6 | 
 7 | Vue.config.productionTip = false
 8 | 
 9 | new Vue({
10 |   store,
11 |   render: h => h(App)
12 | }).$mount('#app')
13 | 


--------------------------------------------------------------------------------
/src/plugins/vee-validate.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VeeValidate from 'vee-validate'
3 | 
4 | Vue.use(VeeValidate)
5 | 


--------------------------------------------------------------------------------
/src/plugins/vuetify.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | import 'vuetify/src/stylus/app.styl'
4 | 
5 | Vue.use(Vuetify, {
6 |   iconfont: 'md'
7 | })
8 | 


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | 
 4 | Vue.use(Vuex)
 5 | 
 6 | const STORAGE_KEY = 'activities'
 7 | 
 8 | export default new Vuex.Store({
 9 |   state: {
10 |     activities: JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
11 |   },
12 |   actions: {
13 |     add ({ commit }, title) {
14 |       commit('add', {
15 |         title,
16 |         done: false
17 |       })
18 |     },
19 |     remove ({ commit }, activity) {
20 |       commit('remove', {
21 |         activity
22 |       })
23 |     },
24 |     toggle ({ commit }, activity) {
25 |       commit('toggle', {
26 |         activity,
27 |         done: !activity.done
28 |       })
29 |     }
30 |   },
31 |   mutations: {
32 |     add (state, activity) {
33 |       state.activities.push(activity)
34 |     },
35 |     remove (state, { activity }) {
36 |       state.activities.splice(state.activities.indexOf(activity), 1)
37 |     },
38 |     toggle (state, { activity, done }) {
39 |       activity.done = done
40 |     }
41 |   },
42 |   plugins: [
43 |     store => {
44 |       store.subscribe((mutation, { activities }) => {
45 |         window.localStorage.setItem(STORAGE_KEY, JSON.stringify(activities))
46 |       })
47 |     }
48 |   ]
49 | })
50 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: './'
3 | };
4 | 


--------------------------------------------------------------------------------