├── .babelrc
├── .gitignore
├── .watchmanconfig
├── App.vue
├── LICENSE
├── README.md
├── app.json
├── assets
    ├── .DS_Store
    ├── check_icon.png
    ├── cross_icon.png
    └── edit_icon.png
├── gif
    ├── .DS_Store
    └── vueTodoGif.gif
├── package.json
├── rn-cli.config.js
├── src
    ├── AddTodo.vue
    └── TodoItem.vue
├── vueTransformerPlugin.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["babel-preset-expo"],
3 |   "env": {
4 |     "development": {
5 |       "plugins": ["transform-react-jsx-source"]
6 |     }
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # expo
 4 | .expo/
 5 | 
 6 | # dependencies
 7 | /node_modules
 8 | 
 9 | # misc
10 | .env.local
11 | .env.development.local
12 | .env.test.local
13 | .env.production.local
14 | 
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | 


--------------------------------------------------------------------------------
/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
2 | 


--------------------------------------------------------------------------------
/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="container">
 3 |     <add-todo
 4 |       :on-add='addTodo'
 5 |     />
 6 |     <scroll-view>
 7 |       <view class='todo-wrapper' v-for='(todo, index) in todos' :key='index'>
 8 |         <todo-item
 9 |           :todo='todo'
10 |           :selected-index='index'
11 |           :edit-pressed='onEditPressed'
12 |           :edit-todo='editTodo'
13 |           :delete-todo='deleteTodo'
14 |           :cancel-edit='cancelEdit'
15 |           :toggle-task-status='toggleTaskStatus'
16 |         />
17 |       </view>
18 |     </scroll-view>
19 |   </view>
20 | </template>
21 | 
22 | <script>
23 | import AddTodo from './src/AddTodo'
24 | import TodoItem from './src/TodoItem'
25 | 
26 | export default {
27 |   data: function() {
28 |     return {
29 |       newTodo: '',
30 |       todos: []
31 |     };
32 |   },
33 |   components: {
34 |     AddTodo,
35 |     TodoItem
36 |   },
37 |   methods: {
38 |     addTodo: function(todo) {
39 |       this.todos.push(todo)
40 |     },
41 |     onEditPressed: function(index) {
42 |       this.todos[index].edited = true
43 |     },
44 |     editTodo: function(index, editedTask) {
45 |       this.todos[index].task = editedTask
46 |       this.todos[index].edited = false
47 |     },
48 |     cancelEdit: function(index) {
49 |       this.todos[index].edited = false
50 |     },
51 |     toggleTaskStatus: function(index) {
52 |       this.todos[index].isCompleted = !this.todos[index].isCompleted
53 |     },
54 |     deleteTodo: function(index) {
55 |       this.todos.splice(index, 1)
56 |     },
57 |   }
58 | }
59 | </script>
60 | >
61 |  
62 | <style>
63 | .container {
64 |   background-color:white;
65 |   flex: 1;
66 |   padding-top: 40;
67 | }
68 | .todo-wrapper {
69 |   margin-horizontal: 15;
70 |   background-color: beige;
71 |   justify-content: space-between;
72 |   align-items: center;
73 |   flex-direction: row;
74 |   margin-vertical: 2.5;
75 |   padding: 10;
76 |   border-radius: 5;
77 | }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 GeekyAnts
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Simple todo app in vue-native
 2 | 
 3 | <img alt="Todo app in vue-native" src="gif/vueTodoGif.gif" width="260" height="400" />
 4 | 
 5 | ### Installation step
 6 | • ```git clone git@github.com:ankitsinghania94/vue-native-todo-app.git```.<br />
 7 | • Navigate to project directory and do ```npm install```.<br />
 8 | • ```npm start``` to run the project.<br />
 9 | Similiarly you can do ```npm run ios``` for building in simulator.
10 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 |   "expo": {
3 |     "sdkVersion": "27.0.0"
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/assets/.DS_Store


--------------------------------------------------------------------------------
/assets/check_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/assets/check_icon.png


--------------------------------------------------------------------------------
/assets/cross_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/assets/cross_icon.png


--------------------------------------------------------------------------------
/assets/edit_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/assets/edit_icon.png


--------------------------------------------------------------------------------
/gif/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/gif/.DS_Store


--------------------------------------------------------------------------------
/gif/vueTodoGif.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ankitsinghania94/vue-native-todo-app/2dcfb0f34a7a2ac960054fc8d9cce7a3711521de/gif/vueTodoGif.gif


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vueTodoApp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "devDependencies": {
 6 |     "jest-expo": "~27.0.0",
 7 |     "react-native-scripts": "1.14.0",
 8 |     "react-test-renderer": "16.3.1",
 9 |     "vue-native-scripts": "0.0.8"
10 |   },
11 |   "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
12 |   "scripts": {
13 |     "start": "react-native-scripts start",
14 |     "eject": "react-native-scripts eject",
15 |     "android": "react-native-scripts android",
16 |     "ios": "react-native-scripts ios",
17 |     "test": "jest"
18 |   },
19 |   "jest": {
20 |     "preset": "jest-expo"
21 |   },
22 |   "dependencies": {
23 |     "expo": "^27.0.1",
24 |     "react": "16.3.1",
25 |     "react-native": "~0.55.2",
26 |     "vue-native-core": "0.0.5",
27 |     "vue-native-helper": "0.0.8"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/rn-cli.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   getTransformModulePath() {
3 |     return require.resolve("./vueTransformerPlugin.js");
4 |   },
5 |   getSourceExts() {
6 |     return ["vue"];
7 |   }
8 | };
9 | 


--------------------------------------------------------------------------------
/src/AddTodo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view class="text-input-container">
 3 |     <view class="text-input-wrapper">
 4 |       <text-input placeholder="Enter new todo" v-model="newTodo"/>
 5 |     </view>
 6 |     <touchable-opacity class="add-button" title="Button" :on-press="addTodo" :disabled="(newTodo === '')">
 7 |       <text class="text-color-primary">ADD</text>
 8 |     </touchable-opacity>
 9 |   </view>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data: function() {
15 |     return {
16 |       newTodo: ''
17 |     };
18 |   },
19 |   props: {
20 |     onAdd: Function
21 |   },
22 |   methods: {
23 |     addTodo: function() {
24 |       let todo = {
25 |         task: this.newTodo,
26 |         isCompleted: false,
27 |         edited: false
28 |       }
29 |       this.onAdd(todo)
30 |       this.newTodo = ''
31 |     },
32 |   }
33 | }
34 | </script>
35 |  
36 | <style>
37 | .text-color-primary {
38 |   color: rgba(0, 0, 0, 0.767);
39 | }
40 | .text-input-wrapper {
41 |   flex: 1;
42 |   border-width: 1;
43 |   border-color: rgb(112, 84, 46);
44 |   justify-content: center;
45 |   padding: 10
46 | }
47 | .add-button {
48 |   background-color: rgba(201, 29, 29, 0.534);
49 |   padding-horizontal: 10;
50 |   justify-content: center;
51 | }
52 | .text-input-container {
53 |   margin-horizontal: 15;
54 |   flex-direction: row;
55 |   padding-bottom: 20
56 | }
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/TodoItem.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <view class='todo-wrapper'>
  3 |     <touchable-opacity :on-press='handleTaskPressed' v-if="!todo.edited">
  4 |       <text v-bind:class="[todo.isCompleted ? 'text-task-completed' : 'text-todo-task']">
  5 |         • {{todo.task}}
  6 |       </text>
  7 |     </touchable-opacity>
  8 |     <view class="task-input-wrapper" v-if="todo.edited">
  9 |       <text-input placeholder='Enter Task' v-model='editedTask'/>
 10 |     </view>
 11 |     <view class='todo-button-wrapper' v-if="todo.edited">
 12 |       <touchable-opacity :on-press="checkIconPress" class='done-button'>
 13 |         <image :source='checkIcon' class='image-style'/>
 14 |       </touchable-opacity>
 15 |       <touchable-opacity v-bind:on-press="cancelIconPress" class='done-button'>
 16 |         <image :source='crossIcon' class='image-style'/>
 17 |       </touchable-opacity>
 18 |     </view>
 19 |     <view class='todo-button-wrapper' v-if="!todo.edited">
 20 |       <touchable-opacity :on-press="editIconPress" class='edit-button'>
 21 |         <image :source='editIcon' class='image-style'/>
 22 |       </touchable-opacity>
 23 |       <touchable-opacity :on-press="deleteIconPress">
 24 |         <image :source='crossIcon' class='image-style'/>
 25 |       </touchable-opacity>
 26 |     </view>
 27 |   </view>
 28 | </template>
 29 | 
 30 | <script>
 31 | 
 32 | import editIcon from '../assets/edit_icon.png';
 33 | import crossIcon from '../assets/cross_icon.png';
 34 | import checkIcon from '../assets/check_icon.png';
 35 | 
 36 | export default {
 37 |   data: function() {
 38 |     return {
 39 |       editedTask: this.todo.task,
 40 |       editIcon,
 41 |       crossIcon,
 42 |       checkIcon
 43 |     };
 44 |   },
 45 |   props: {
 46 |     todo: Object,
 47 |     selectedIndex: Number,
 48 |     editTodo: Function,
 49 |     deleteTodo: Function,
 50 |     cancelEdit: Function,
 51 |     toggleTaskStatus: Function,
 52 |     editPressed: Function
 53 |   },
 54 |   methods: {
 55 |     editIconPress: function() {
 56 |       this.editPressed(this.selectedIndex)
 57 |     },
 58 |     checkIconPress: function() {
 59 |       if (this.editedTask !== '')
 60 |         this.editTodo(this.selectedIndex, this.editedTask)
 61 |       else {
 62 |         this.editedTask = this.todo.task
 63 |         this.cancelEdit(this.selectedIndex)
 64 |       }
 65 |     },
 66 |     cancelIconPress: function() {
 67 |       this.cancelEdit(this.selectedIndex)
 68 |     },
 69 |     handleTaskPressed: function() {
 70 |       this.toggleTaskStatus(this.selectedIndex)
 71 |     },
 72 |     deleteIconPress: function(index) {
 73 |       this.deleteTodo(this.selectedIndex)
 74 |     },
 75 |   }
 76 | }
 77 | </script>
 78 | >
 79 |  
 80 | <style>
 81 | .todo-button-wrapper {
 82 |   flex-direction: row
 83 | }
 84 | .done-button {
 85 |   margin-left: 20
 86 | }
 87 | .image-style {
 88 |   height: 20;
 89 |   width: 20;
 90 | }
 91 | .edit-button {
 92 |   padding-right: 20
 93 | }
 94 | .text-todo-task {
 95 |   color:grey;
 96 | }
 97 | .text-task-completed {
 98 |   color: rgba(201, 29, 29, 0.534);
 99 |   text-decoration-line: line-through;
100 | }
101 | .task-input-wrapper {
102 |   flex: 1;
103 |   border-width: 1;
104 |   border-color: rgba(201, 29, 29, 0.534);
105 |   justify-content: center;
106 |   padding: 10
107 | }
108 | .todo-wrapper {
109 |   justify-content: space-between;
110 |   align-items: center;
111 |   flex-direction: row;
112 |   flex: 1;
113 | }
114 | </style>
115 | 


--------------------------------------------------------------------------------
/vueTransformerPlugin.js:
--------------------------------------------------------------------------------
 1 | // For React Native version 0.52 or later
 2 | var upstreamTransformer = require("metro/src/transformer");
 3 | 
 4 | // For React Native version 0.47-0.51
 5 | // var upstreamTransformer = require("metro-bundler/src/transformer");
 6 | 
 7 | // For React Native version 0.46
 8 | // var upstreamTransformer = require("metro-bundler/build/transformer");
 9 | 
10 | var vueNaiveScripts = require("vue-native-scripts");
11 | var vueExtensions = ["vue"]; // <-- Add other extensions if needed.
12 | 
13 | module.exports.transform = function({ src, filename, options }) {
14 |   if (vueExtensions.some(ext => filename.endsWith("." + ext))) {
15 |     return vueNaiveScripts.transform({ src, filename, options });
16 |   }
17 |   return upstreamTransformer.transform({ src, filename, options });
18 | };
19 | 


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