├── .eslintrc.json
├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── preview.gif
├── sign
    └── debug
    │   ├── certificate.pem
    │   └── private.pem
└── src
    ├── app.vue
    ├── common
        ├── css
        │   └── common.css
        └── logo.png
    ├── components
        ├── app-header.vue
        ├── list-info.vue
        ├── page-list-item.vue
        ├── page-list.vue
        └── select-box.vue
    ├── index
        ├── index.vue
        └── service.js
    └── manifest.json


/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "commonjs": true
 4 |   },
 5 |   "extends": "eslint:recommended",
 6 |   "parser": "babel-eslint",
 7 |   "parserOptions": {
 8 |     "sourceType": "module",
 9 |     "ecmaFeatures": {
10 |       "experimentalObjectRestSpread": true,
11 |       "jsx": true
12 |     }
13 |   },
14 |   "globals": {
15 |     "loadData": false,
16 |     "saveData": false,
17 |     "history": false,
18 |     "console": false,
19 |     "setTimeout": false,
20 |     "clearTimeout": false,
21 |     "setInterval": false,
22 |     "clearInterval": false
23 |   },
24 |   "plugins": [
25 |     "hybrid"
26 |   ],
27 |   "rules": {
28 |     "indent": [
29 |       "warn",
30 |       2
31 |     ],
32 |     "no-console": [
33 |       "warn",
34 |       {
35 |         "allow": [
36 |           "info",
37 |           "warn",
38 |           "error"
39 |         ]
40 |       }
41 |     ],
42 |     "no-unused-vars": [
43 |       "warn",
44 |       {
45 |         "varsIgnorePattern": "prompt"
46 |       }
47 |     ],
48 |     "quotes": [
49 |       "warn",
50 |       "single",
51 |       {
52 |         "avoidEscape": true,
53 |         "allowTemplateLiterals": true
54 |       }
55 |     ],
56 |     "linebreak-style": [
57 |       "warn",
58 |       "unix"
59 |     ],
60 |     "semi": [
61 |       "warn",
62 |       "never"
63 |     ]
64 |   }
65 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | dist
4 | package-lock.json


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # TodoMVC • Vue
 2 | 
 3 | ### 简介
 4 | 
 5 | 快应用是基于手机硬件平台的新型应用形态，具备传统APP完整的应用体验，无需安装、即点即用
 6 | 
 7 | 该项目是一个快应用版本的TodoMVC应用示例，与[同组织下的todos项目](https://github.com/quickappcn/todos)的区别在于：
 8 | 
 9 | 本项目使用了**Vue2开源框架（vue作为文件后缀名）**进行开发，后者使用的是快应用**原有标准语法（ux作为文件后缀名）**开发的；
10 | 
11 | 项目中开发者开发方式与网页Vue项目开发一致，可以使用同样的Vue语法；
12 | 
13 | ### 原理
14 | 
15 | 快应用在运行时会将Vue框架注入，以Vue全局变量的形式暴露出来；
16 | 
17 | 开发者在项目开发时，与网页Vue项目开发一致，可以使用Vue本身的各种DSL语法特性；
18 | 
19 | DOM渲染层面与浏览器相似，且实现不同，所以请不要使用DOM本身的API能力（如：addEventListener），这块能力暂未开放规范；
20 | 
21 | ### 注意事项
22 | 
23 | - 使用Vue开发并查看效果，需要配合使用1050版本的预览版APK，以达到运行时支持；
24 | 
25 | - 快应用1050版本开始邀请开发者参与内测；
26 | 
27 | - 项目接下来可能会有较大的变动，运行时仅支持该项目最新版本，请及时更新；
28 | 
29 | ### 效果预览
30 | 
31 | ![效果预览](./preview.gif)
32 | 
33 | ### 相关链接
34 | 
35 | [快应用官网](https://www.quickapp.cn/)
36 | 
37 | [快应用官网开发文档](https://doc.quickapp.cn/)


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | module.exports = function(api) {
 3 |   api.cache(true);
 4 |   return {
 5 |     "presets":["@babel/preset-env"],
 6 |     "ignore": [/@babel[\/\\]runtime/],
 7 |     "plugins":["@babel/plugin-transform-runtime", "@babel/plugin-transform-modules-commonjs"],
 8 |     "babelrcRoots": [".", "node_modules"]
 9 |   };
10 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hap-vue-todomvc",
 3 |   "version": "1.0.0",
 4 |   "subversion": {
 5 |     "toolkit": "0.3.0-beta.1"
 6 |   },
 7 |   "description": "",
 8 |   "scripts": {
 9 |     "build": "hap build",
10 |     "release": "hap release",
11 |     "server": "hap server",
12 |     "watch": "hap watch"
13 |   },
14 |   "devDependencies": {
15 |     "@babel/plugin-transform-runtime": "^7.3.4",
16 |     "hap-toolkit": "^0.4.1",
17 |     "quickapp-dsls": "^0.1.1"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quickappcn/todomvc-vue/65d185457cbd2c20eba4ed8c09c90a8e3bda84cf/preview.gif


--------------------------------------------------------------------------------
/sign/debug/certificate.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN CERTIFICATE-----
 2 | MIIDMTCCAhmgAwIBAgIJAMKpjyszxkDpMA0GCSqGSIb3DQEBCwUAMC4xCzAJBgNV
 3 | BAYTAkNOMQwwCgYDVQQKDANSUEsxETAPBgNVBAMMCFJQS0RlYnVnMCAXDTE3MDQx
 4 | OTAyMzE0OVoYDzIxMTYwMzI2MDIzMTQ5WjAuMQswCQYDVQQGEwJDTjEMMAoGA1UE
 5 | CgwDUlBLMREwDwYDVQQDDAhSUEtEZWJ1ZzCCASIwDQYJKoZIhvcNAQEBBQADggEP
 6 | ADCCAQoCggEBAK3kPd9jzvTctTIA3XNZVv9cHHDbAc6nTBfdZp9mtPOTkXFpvyCb
 7 | kL0QjOog0+1pv8D7dFeP4ptWXU5CT3ImvaPR+16dAtMRcsxEr5q4zieJzx3O6huL
 8 | UBa1k+xrzjXpRzkcOysmc8fTxt0tAwbDgJ2AA5TlXLTcVyb7GmJ+hl5CjnhoG5NN
 9 | LrkqI7S29c1U3uokj8Q7hzaj0TURu/uB5ZIMCLZY9KFDugqaEcvmUyJiD0fuV6sA
10 | O/4kpiZUOnhV8/xWpRbMI4WFQsfgLOCV+X9uzUa29D677y//46t/EDSuQTHyBZbl
11 | AcNMENkpMWZsH7J/+F19+U0/Hd5bJgneVRkCAwEAAaNQME4wHQYDVR0OBBYEFKDN
12 | SZtt47ttOBDQzIchFYyxsg3mMB8GA1UdIwQYMBaAFKDNSZtt47ttOBDQzIchFYyx
13 | sg3mMAwGA1UdEwQFMAMBAf8wDQYJKoZIhvcNAQELBQADggEBABaZctNrn4gLmNf/
14 | eNJ3x5CJIPjPwm6j9nwKhtadJ6BF+TIzSkJuHSgxULjW436F37otv94NPzT5PCBF
15 | WxgXoqgLqnWwvsaqC4LUEjsZviWW4CB824YDUquEUVGFLE/U5KTZ7Kh1ceyUk4N8
16 | +mtkXkanWoBBk0OF24lNrAsNLB63yTLr9HxEe75+kmvxf1qVJUGtaOEWIhiFMiAB
17 | 5D4w/j2EFWktumjuy5TTwU0zhl52bc8V9SNixM1IaqzNrVPrdjv8viUX548pU3WT
18 | xZ5ylDsxhMC1q4BXQVeIY8C0cMEX+WHOmOCvWrkxCkP91pKsSPkuVrWlzrkn8Ojo
19 | swP6sBw=
20 | -----END CERTIFICATE-----
21 | 


--------------------------------------------------------------------------------
/sign/debug/private.pem:
--------------------------------------------------------------------------------
 1 | -----BEGIN PRIVATE KEY-----
 2 | MIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQCt5D3fY8703LUy
 3 | AN1zWVb/XBxw2wHOp0wX3WafZrTzk5Fxab8gm5C9EIzqINPtab/A+3RXj+KbVl1O
 4 | Qk9yJr2j0ftenQLTEXLMRK+auM4nic8dzuobi1AWtZPsa8416Uc5HDsrJnPH08bd
 5 | LQMGw4CdgAOU5Vy03Fcm+xpifoZeQo54aBuTTS65KiO0tvXNVN7qJI/EO4c2o9E1
 6 | Ebv7geWSDAi2WPShQ7oKmhHL5lMiYg9H7lerADv+JKYmVDp4VfP8VqUWzCOFhULH
 7 | 4Czglfl/bs1GtvQ+u+8v/+OrfxA0rkEx8gWW5QHDTBDZKTFmbB+yf/hdfflNPx3e
 8 | WyYJ3lUZAgMBAAECggEBAJTnCBBdUB+fSs1prjeS/gsmnfgJoY+K9H7PCIxgj3yw
 9 | FXAvZAmRDKzJGlF2EOOQlTG0YNiGDj6EAtv7rjoKcINyULSg8IU6wLmn61MrAuUa
10 | fa+Bujgh4E/B5swhOHAztNhzkzsM70Hi17wXSislh+HWd7qteOgqcbqgdOR4gaj+
11 | HUqtcxG3H3hCL3dWugnjLZMtestLKGHSSZvbQNjYM3kKy2LvO8NpxmDE4a+TXygK
12 | qhaZjmS/dc/nJBJzOfkzby58RvGbzlJflfW/Uu3/gizj13GFQKWonq1xh630RAhv
13 | xX5ySok2aAx/+/SiJSpNXvM09grQuoORSr7D1tm+5rECgYEA3vf0hRfua0XAOu6f
14 | pyzNvLRRJ/pEew7XpNPCyS2TuMTd1yvXjGVxQfP46N6x1IM3SRU0zE+LSk80EF7l
15 | u1Or7GyCEhabYNe/7P2F8ENP73Do0HwvcI1jGrgr6r9oK0J27Xei+f6Q0bgJOPI2
16 | qaLj+V37cOjkNSM1mhTjtDwK8k0CgYEAx6cMrkjHl1+lDIIOc3qAEL3jb3xQveYk
17 | WrMF/B+j048k6boU4VvFJAIyQxOxMNxLjw3/9+zXCFJT4WaZK3TMXlg614ASGx3H
18 | tKjJM9O07ywwMq1gbutFS4nHCg3L3Os6esL0SPwMdATR3Yh22n5OGI9o+/aURulL
19 | GPEXef1Z2/0CgYEAgmwp5LxV4vu+8Pnp+4DSq4ISQr861XyeGTUhKEp3sUm+tgFY
20 | KTChakHKpHS3Mqa6bQ5xft08je/8dWL9IHFWDIqAHxKIOsKY6oh1k0/cbyPtmx45
21 | Ja4efV+jmMHzrfJH3KnxdCg7D+GFy4CrBtlYXuJhlO81pft9fC6h7yh8ArUCgYBq
22 | gvkl5Zftbs4rnRq+iqTVyagTKvwcQzIz3PwdZHfO/rfPpUFMdNv4eN99n3zRN0Vs
23 | HSjoiEazntA3GLgwUdBRqLpDi4SdSMbo337vkksdqbJQ5uPiaMuAIBG6kF+pDSkW
24 | ovkWErlGD+gySoI10FozihaVDRhPuFgjB0PiBcIxtQKBgGNSzX+Bx5+ux1Qny0Sn
25 | SUcBtepLnO8M8wafoGNyehbMnLzfuMbaDiJOdozGlBNHZTtPB3r4AYb8WnltdKW0
26 | 7i3fk26YZGiMVeUJvewA6/LOBEaqMdwoNwnoptvbR6ehHeE/PPtRtge2cD3bPIM7
27 | U9VlWgfgj9Dxfwhslqb9hmyp
28 | -----END PRIVATE KEY-----
29 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   /**
 3 |    * 应用级别的配置，供所有页面公用
 4 |    */
 5 |   export default {
 6 |     onCreate () {
 7 |       console.log(`app created`)
 8 |     },
 9 |     onDestroy () {
10 |       console.log(`app destroyed`)
11 |     }
12 |   }
13 | </script>


--------------------------------------------------------------------------------
/src/common/css/common.css:
--------------------------------------------------------------------------------
 1 | .common-h1 {
 2 |   line-height: 200px;
 3 |   font-size: 100px;
 4 |   text-align: center;
 5 | }
 6 | 
 7 | .common-h2 {
 8 |   line-height: 100px;
 9 |   font-size: 40px;
10 |   text-align: center;
11 | }


--------------------------------------------------------------------------------
/src/common/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/quickappcn/todomvc-vue/65d185457cbd2c20eba4ed8c09c90a8e3bda84cf/src/common/logo.png


--------------------------------------------------------------------------------
/src/components/app-header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="app-header">
  3 |     <text class="common-h1">todos</text>
  4 |     <div class="new-todo" :class="dynamicClass">
  5 |       <input type="checkbox" :checked="allDone" @change="changeAll($event)">
  6 |       <input
  7 |         placeholder="What needs to be done?"
  8 |         v-model="newTodo"
  9 |         type="text"
 10 |         @focus="updateClass('input-focus')"
 11 |         @blur="updateClass('')"
 12 |         class="input-text"
 13 |         ref="input"
 14 |       >
 15 |       <input class="btn-add" type="button" :disabled="disabled" value="ADD" @click="addTodo"/>
 16 |     </div>
 17 |   </div>
 18 | </template>
 19 | 
 20 | <script>
 21 | export default {
 22 |   data() {
 23 |     return {
 24 |       newTodo: '',
 25 |       dynamicClass: '',
 26 |       disabled: true
 27 |     }
 28 |   },
 29 |   props: ['todos', 'all-done'],
 30 |   mounted() {
 31 |     this.inputDom = this.$refs.input
 32 |   },
 33 |   watch: {
 34 |     newTodo(n) {
 35 |       // 监听v-model内newTodo变化的值，然后进行更新操作
 36 |       this.updateValue(n)
 37 |     }
 38 |   },
 39 |   methods: {
 40 |     /**
 41 |      * 触发事件：添加一个todo
 42 |      */
 43 |     addTodo() {
 44 |       var value = this.newTodo && this.newTodo.trim()
 45 |       if (!value) {
 46 |         return
 47 |       }
 48 |       this.$emit('add-todo', { value })
 49 |       this.newTodo = ''
 50 |     },
 51 |     /**
 52 |      * 更新value操作
 53 |      */
 54 |     updateValue(n) {
 55 |       if (!n) {
 56 |         this.disabled = true
 57 |       } else {
 58 |         this.disabled = false
 59 |       }
 60 |     },
 61 |     /**
 62 |      * 更新class
 63 |      */
 64 |     updateClass(v) {
 65 |       this.dynamicClass = v
 66 |     },
 67 |     /**
 68 |      * 触发事件：全选操作
 69 |      */
 70 |     changeAll(e) {
 71 |       this.$emit('all-done-change', { checked: e.target.checked })
 72 |     }
 73 |   }
 74 | }
 75 | </script>
 76 | 
 77 | <style>
 78 |   @import '../common/css/common.css';
 79 | 
 80 |   .app-header {
 81 |     display: flex;
 82 |     flex-direction: column;
 83 |   }
 84 | 
 85 |   .app-header > text {
 86 |     color: #ead7d7;
 87 |   }
 88 | 
 89 |   .app-header .new-todo {
 90 |     height: 100px;
 91 |     border: 2px solid #ededed;
 92 |     background-color: #ffffff;
 93 |   }
 94 | 
 95 |   .app-header .new-todo .input-text {
 96 |     flex-grow: 1;
 97 |     padding: 0 30px; 
 98 |   }
 99 | 
100 |   .app-header .new-todo .btn-add {
101 |     flex-shrink: 0;
102 |     width: 150px;
103 |     font-weight: normal;
104 |     color: #FFFFFF;
105 |     background-color: #f78f8f;
106 |   }
107 | 
108 |   .app-header .new-todo .btn-add:disabled {
109 |     background-color: #ead7d7;
110 |   }
111 | 
112 |   .app-header .input-focus {
113 |     border-color: #ead7d7;
114 |   }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/components/list-info.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="list-info" v-if="todos.length">
 3 |     <text class="li-todo-count common-h2">
 4 |       <span>left {{ remaining }} {{ remaining | pluralize }} </span>
 5 |     </text>
 6 |     <input type="button"
 7 |       class="li-clear-completed"
 8 |       @click="removeCompleted"
 9 |       v-if="todos.length > remaining"
10 |       value="Clear completed"
11 |     >
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   filters: {
17 |     pluralize(n) {
18 |       return n === 1 ? 'todo' : 'todos'
19 |     }
20 |   },
21 |   props: ['todos', 'remaining'],
22 |   methods: {
23 |     removeCompleted() {
24 |       this.$emit('remove-completed')
25 |     }
26 |   }
27 | }
28 | </script>
29 | <style>
30 |   @import '../common/css/common.css';
31 |   .list-info {
32 |     flex-direction: column;
33 |   }
34 |   .li-clear-completed {
35 |     background-color: bisque;
36 |   }
37 |   .li-todo-count {
38 |     text-align: left;
39 |     padding-left: 15px;
40 |     border: 1px solid #666;
41 |   }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/components/page-list-item.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page-list-item">
  3 |     <input type="checkbox" class="pli-checkbox" :checked="item.completed" @change="modifyStatus($event)">
  4 | 
  5 |     <text v-show="!editable" class="pli-txt" :class="item.completed ? 'pli-cross-line' : ''">{{item.title}}</text>
  6 |     <input ref="input" v-show="editable" class="pli-edit" type="text" :value="item.title" @change="modifyTitle($event)">
  7 | 
  8 |     <text v-show="!editable" class="pli-btn-common pli-btn-mod" @click="modifyItem">MOD</text>
  9 |     <text v-show="!editable" class="pli-btn-common pli-btn-del" @click="showHint('Lone press \'DEL\' to delete it')" @longpress="deleteItem($event)">DEL</text>
 10 | 
 11 |     <text v-if="editable" class="pli-btn-common pli-btn-cxl" @click="cancle">CXL</text>
 12 |     <text v-if="editable" class="pli-btn-common pli-btn-cfm" @click="confirm">CFM</text>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | 
 18 | import prompt from '@system.prompt'
 19 | 
 20 | export default {
 21 |   props: ['item'],
 22 |   data() {
 23 |     return {
 24 |       editable: false
 25 |     }
 26 |   },
 27 |   mounted() {
 28 |     this.inputDom = this.$refs.input
 29 |   },
 30 |   methods: {
 31 |     showHint (msg) {
 32 |       prompt.showToast({ message: msg })
 33 |     },
 34 |     deleteItem (e) {
 35 |       this.$emit('delete-todo', { idx: this.item.id })
 36 |     },
 37 |     modifyStatus (e) {
 38 |       this.$emit('modify-status', { idx: this.item.id, checked: e.target.checked })
 39 |     },
 40 |     modifyTitle (e) {
 41 |       this.tempString = e.target.value
 42 |     },
 43 |     modifyItem() {
 44 |       this.originTitle = this.item.title
 45 |       this.editable = !this.editable
 46 |       this.$nextTick(() => {
 47 |         this.inputDom.focus({
 48 |           focus: true
 49 |         })
 50 |       })
 51 |     },
 52 |     confirm() {
 53 |       this.editable = !this.editable
 54 |       this.$emit('modify-finish', { idx: this.item.id, value: this.tempString })
 55 |       this.inputDom.focus({
 56 |         focus: false
 57 |       })
 58 |     },
 59 |     cancle() {
 60 |       this.item.title = this.originTitle
 61 |       this.editable = !this.editable
 62 |       this.inputDom.focus({
 63 |         focus: false
 64 |       })
 65 |     }
 66 |   }
 67 | }
 68 | </script>
 69 | 
 70 | <style>
 71 | 
 72 |   .page-list-item {
 73 |     height: 100px;
 74 |     border-bottom-width: 1px;
 75 |     border-bottom-color: #ededed;
 76 |   }
 77 | 
 78 |   .pli-checkbox {
 79 |     flex-shrink: 0;
 80 |     width: 80px;
 81 |   }
 82 | 
 83 |   .pli-btn-common {
 84 |     flex-shrink: 0;
 85 |     flex-grow: 0;
 86 |     margin: 10px 5px 10px 5px;
 87 |     height: 80px;
 88 |     line-height: 80px;
 89 |     width: 95px;
 90 |     /* padding: 0 10px; */
 91 |     border-radius: 10px;
 92 |     font-size: 30px;
 93 |     color: #666666;
 94 |     text-align: center;
 95 |   }
 96 | 
 97 |   .pli-btn-del {
 98 |     color: #e24e42;
 99 |     background-color: #f5f5f5;
100 |   }
101 |   .pli-btn-mod {
102 |     color: #008f95;
103 |     background-color: #f5f5f5;
104 |   }
105 |   .pli-btn-cxl {
106 |     color: #008f95;
107 |     background-color: #f5f5f5;
108 |   }
109 |   .pli-btn-cfm {
110 |     color: #30d607;
111 |     background-color: #f5f5f5;
112 |   }
113 | 
114 |   .pli-edit {
115 |     flex-grow: 1;
116 |     font-size: 30px;
117 |     color: #f00;
118 |   }
119 |   .pli-txt {
120 |     flex-grow: 1;
121 |     font-size: 30px;
122 |     color: #4d4d4d;
123 |   }
124 | 
125 |   .pli-cross-line {
126 |     text-decoration:line-through;
127 |     color: #d9d9d9;
128 |   }
129 | 
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/page-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page-list">
 3 |     <page-list-item 
 4 |     @delete-todo="deleteTodo($event)"
 5 |     @modify-status="modifyStatus($event)"
 6 |     @modify-finish="modifyFinish($event)"
 7 |      v-for="(todo, index) in list" :key="todo.id" :idx="index" :item="todo"></page-list-item>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import pageListItem from './page-list-item'
13 | export default {
14 |   components: {
15 |     pageListItem
16 |   },
17 |   props: ['list'],
18 |   methods: {
19 |     deleteTodo($event) {
20 |       this.$emit('delete-todo', $event)
21 |     },
22 |     modifyStatus($event) {
23 |       this.$emit('modify-status', $event)
24 |     },
25 |     modifyFinish($event) {
26 |       this.$emit('modify-finish', $event)
27 |     }
28 |   }
29 | }
30 | </script>
31 | 
32 | <style>
33 |   .page-list {
34 |     flex-direction: column;
35 |   }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/components/select-box.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="select-box">
 3 |     <div class="sb-radio-item" v-for="(item, index) in cate" :key="index">
 4 |       <input type="radio" :id="item" :value="item" :checked="init === item" @change="changeRadio($event)">
 5 |       <label :target="item" class="sb-radio-label">{{item}}</label>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   props: ['cate'],
13 |   data() {
14 |     return {
15 |       init: this.cate && this.cate[0] || 'all'
16 |     }
17 |   },
18 |   methods: {
19 |     changeRadio($event) {
20 |       this.$emit('change-radio', {
21 |         value: $event.target.value
22 |       })
23 |     }
24 |   }
25 | }
26 | </script>
27 | 
28 | <style>
29 |   .sb-radio-item {
30 |     flex: 1;
31 |     flex-grow: 1;
32 |   }
33 | 
34 |   .sb-radio-label {
35 |     flex-grow: 1;
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="todoapp">
  3 |       <app-header
  4 |         @add-todo="addTodo($event)"
  5 |         :todos="todos"
  6 |         :all-done="allDone"
  7 |         @all-done-change="changeAllDone($event)">
  8 |       </app-header>
  9 |       <select-box
 10 |         @change-radio="changeRadio($event)"
 11 |         :cate="cateList">
 12 |       </select-box>
 13 |       <list-info
 14 |         :todos="todos"
 15 |         :remaining="remaining"
 16 |         @remove-completed="removeCompleted($event)"
 17 |       ></list-info>
 18 |       <page-list
 19 |         :list="filteredTodos"
 20 |         @delete-todo="removeTodo($event)"
 21 |         @modify-finish="editTodo($event)"
 22 |         @modify-status="changeTodoStatus($event)">
 23 |       </page-list>
 24 |     </div>
 25 | </template>
 26 | <style>
 27 |   @import '../common/css/common.css';
 28 | 
 29 |   .todoapp {
 30 |     width: 100%;
 31 |     flex-direction: column;
 32 |   }
 33 | 
 34 | </style>
 35 | 
 36 | <script>
 37 | import { storageService, filters } from './service'
 38 | import pageList from '../components/page-list'
 39 | import appHeader from '../components/app-header'
 40 | import selectBox from '../components/select-box'
 41 | import listInfo from '../components/list-info'
 42 | 
 43 | export default {
 44 |   components: {
 45 |     pageList,
 46 |     appHeader,
 47 |     selectBox,
 48 |     listInfo
 49 |   },
 50 |   async created() {
 51 |     // 从快应用storage模块中获取数据
 52 |     this.todos = await storageService.fetch()
 53 |   },
 54 |   mounted() {
 55 |     this.$page.setTitleBar({
 56 |       text: 'todomvc'
 57 |     })
 58 |   },
 59 |   data() {
 60 |     return {
 61 |       todos: [],
 62 |       visibility: 'all',
 63 |       cateList: ['all', 'active', 'completed']
 64 |     }
 65 |   },
 66 |   onBackPress() {
 67 |     // 若为true，取消默认返回行为
 68 |     return false
 69 |   },
 70 |   watch: {
 71 |     todos: {
 72 |       handler(todos) {
 73 |         // 存储todos
 74 |         storageService.save(todos)
 75 |       },
 76 |       deep: true
 77 |     }
 78 |   },
 79 |   computed: {
 80 |     filteredTodos() {
 81 |       return filters[this.visibility](this.todos)
 82 |     },
 83 |     remaining() {
 84 |       return filters.active(this.todos).length
 85 |     },
 86 |     completed() {
 87 |       return filters.completed(this.todos).length
 88 |     },
 89 |     allDone: {
 90 |       get() {
 91 |         return this.remaining === 0 && this.completed > 0
 92 |       },
 93 |       set(value) {
 94 |         const cl = this.todos.filter(item => item.completed).length
 95 |         if (cl === this.todos.length - 1 && !value) return
 96 |         this.todos.forEach(function(todo) {
 97 |           todo.completed = value
 98 |         });
 99 |       }
100 |     }
101 |   },
102 |   methods: {
103 |     changeRadio($event) {
104 |       this.visibility = $event.value
105 |     },
106 |     /**
107 |      * 添加一个todo
108 |      */
109 |     addTodo($event) {
110 |       const { value } = $event
111 |       this.todos.unshift({
112 |         id: storageService.uid++,
113 |         title: value,
114 |         completed: false
115 |       })
116 |     },
117 |     /**
118 |      * 移除掉一个todo
119 |      */
120 |     removeTodo($event) {
121 |       const { idx } = $event
122 |       const index = this.todos.findIndex(item => item.id === idx)
123 |       this.todos.splice(index, 1)
124 |     },
125 |     /**
126 |      * 修改当前todo的状态，是否是已完成
127 |      */
128 |     changeTodoStatus($event) {
129 |       const { idx, checked } = $event
130 |       const index = this.todos.findIndex(item => item.id === idx)
131 |       this.todos[index].completed = checked
132 |     },
133 |     /**
134 |      * 编辑当前todo
135 |      */
136 |     editTodo($event) {
137 |       const { idx, value } = $event
138 |       const index = this.todos.findIndex(item => item.id === idx)
139 |       this.todos[index].title = value
140 |     },
141 |     /**
142 |      * todo全选
143 |      */
144 |     changeAllDone($event) {
145 |       this.allDone = $event.checked
146 |     },
147 |     /**
148 |      * 删除已经完成的todos
149 |      */
150 |     removeCompleted() {
151 |       this.todos = filters.active(this.todos)
152 |     }
153 |   }
154 | }
155 | </script>
156 | 
157 | 


--------------------------------------------------------------------------------
/src/index/service.js:
--------------------------------------------------------------------------------
 1 | import storage from '@system.storage'
 2 | 
 3 | const STORAGE_KEY = 'todos-vuejs-2.0'
 4 | const todoList = [{
 5 |   id: 0,
 6 |   title: 'react',
 7 |   completed: false
 8 | },
 9 | {
10 |   id: 1,
11 |   title: 'vue',
12 |   completed: false
13 | }]
14 | 
15 | export const storageService = {
16 |   fetch() {
17 |     return new Promise((resolve, reject) => {
18 |       storage.get({
19 |         key: STORAGE_KEY,
20 |         success(data) {
21 |           const todos = data && JSON.parse(data) || todoList
22 |           todos.forEach((todo, index) => {
23 |             todo.id = index
24 |           })
25 |           storageService.uid = todos.length
26 |           resolve(todos)
27 |         },
28 |         fail() {
29 |           console.info('read fail')
30 |         },
31 |         complete() {
32 |           console.info('read complete')
33 |         }
34 |       })
35 |     })
36 |   },
37 |   save(todos) {
38 |     return new Promise((resolve, reject) => {
39 |       storage.set({
40 |         key: STORAGE_KEY,
41 |         value: JSON.stringify(todos),
42 |         success() {
43 |           resolve()
44 |           console.log('save success')
45 |         },
46 |         fail() {
47 |           reject()
48 |           console.log('save fail')
49 |         }
50 |       })
51 |     })
52 |   }
53 | }
54 | 
55 | export const filters = {
56 |   all(todos) {
57 |     return todos
58 |   },
59 |   active(todos) {
60 |     return todos.filter(todo => {
61 |       return !todo.completed
62 |     })
63 |   },
64 |   completed(todos) {
65 |     return todos.filter(todo => {
66 |       return todo.completed
67 |     })
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "package": "com.application.demo",
 3 |   "name": "todomvc",
 4 |   "versionName": "1.0.0",
 5 |   "versionCode": "1",
 6 |   "minPlatformVersion": "101",
 7 |   "icon": "/common/logo.png",
 8 |   "features": [
 9 |     { "name": "system.prompt" },
10 |     { "name": "system.router" },
11 |     { "name": "system.shortcut" },
12 |     { "name": "system.storage" }
13 |   ],
14 |   "permissions": [
15 |     { "origin": "*" }
16 |   ],
17 |   "config": {
18 |     "logLevel": "log",
19 |     "dsl": {
20 |       "name": "vue"
21 |     }
22 |   },
23 |   "router": {
24 |     "entry": "index",
25 |     "pages": {
26 |       "index": {
27 |         "component": "index"
28 |       }
29 |     }
30 |   },
31 |   "display": {
32 |     "titleBarBackgroundColor": "#f2f2f2",
33 |     "titleBarTextColor": "#414141",
34 |     "menu": true
35 |   }
36 | }


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