My first Vue App KaiOS

├── babel.config.js ├── docs ├── to-do.png ├── to-do-on-input.png ├── to-do-portrait.gif └── to-do-landscape.gif ├── public ├── assets │ └── icons │ │ ├── kaios_112.png │ │ └── kaios_56.png ├── index.html └── manifest.webapp ├── vue.config.js ├── src ├── main.js ├── components │ ├── Header.vue │ ├── Todos.vue │ ├── Softkey.vue │ └── Input.vue ├── Navigation.js └── App.vue ├── .gitignore ├── README.md └── package.json /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/to-do.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/docs/to-do.png -------------------------------------------------------------------------------- /docs/to-do-on-input.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/docs/to-do-on-input.png -------------------------------------------------------------------------------- /docs/to-do-portrait.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/docs/to-do-portrait.gif -------------------------------------------------------------------------------- /docs/to-do-landscape.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/docs/to-do-landscape.gif -------------------------------------------------------------------------------- /public/assets/icons/kaios_112.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/public/assets/icons/kaios_112.png -------------------------------------------------------------------------------- /public/assets/icons/kaios_56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaiostech/sample-vue/HEAD/public/assets/icons/kaios_56.png -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | outputDir: path.resolve(__dirname, "./build"), 5 | assetsDir: "./build" 6 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /build 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw? 23 | 24 | .idea 25 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My first Vue App KaiOS 9 | 10 | 11 | 12 |

13 | 14 | 15 | -------------------------------------------------------------------------------- /public/manifest.webapp: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "name": "My first Vue App for KaiOS", 4 | "description": "Simple example of a to-do list", 5 | "type": "web", 6 | "launch_path": "/index.html", 7 | "icons": { 8 | "56": "/assets/icons/kaios_56.png", 9 | "112": "/assets/icons/kaios_112.png" 10 | }, 11 | "developer": { 12 | "name": "KaiOS Team", 13 | "url": "https://www.kaiostech.com" 14 | }, 15 | "locales": { 16 | "en-US": { 17 | "name": "My first Vue App for KaiOS", 18 | "subtitle": "Simple example of a to-do list", 19 | "description": "Simple example of a to-do list" 20 | } 21 | }, 22 | "default_locale": "en-US" 23 | } -------------------------------------------------------------------------------- /src/components/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sample Vue app for KaiOS 2 | 3 | Simple example of a to-do list, for more information see [KaiOS Developer Portal](https://developer.kaiostech.com/getting-started/build-your-first-app/sample-code#vue) 4 | 5 | ![](./docs/to-do-on-input.png) 6 | ![](./docs/to-do.png) 7 | 8 | In portrait devices 9 | 10 | ![](./docs/to-do-portrait.gif) 11 | 12 | In landscape devices 13 | 14 | ![](./docs/to-do-landscape.gif) 15 | 16 | ## Start 17 | 18 | ```console 19 | npm run serve 20 | # or 21 | yarn serve 22 | ``` 23 | 24 | ## Build app 25 | 26 | ```console 27 | npm run build 28 | # or 29 | yarn build 30 | ``` 31 | 32 | ## Send the app to a KaiOS device 33 | 34 | follow [os-env-setup](https://developer.kaiostech.com/getting-started/env-setup/os-env-setup) and [test-your-apps](https://developer.kaiostech.com/getting-started/build-your-first-package-app/test-your-apps) 35 | install to your device. 36 | -------------------------------------------------------------------------------- /src/components/Todos.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 23 | 24 | 52 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-first-vue-app-kaios", 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 | }, 10 | "dependencies": { 11 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.9.0", 16 | "@vue/cli-plugin-eslint": "^3.9.0", 17 | "@vue/cli-service": "^3.9.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.6.10" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions" 45 | ] 46 | } 47 | -------------------------------------------------------------------------------- /src/components/Softkey.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 75 | -------------------------------------------------------------------------------- /src/Navigation.js: -------------------------------------------------------------------------------- 1 | const init = () => { 2 | const firstElement = getAllElements()[0]; 3 | firstElement.setAttribute("nav-selected", "true"); 4 | firstElement.setAttribute("nav-index", "0"); 5 | firstElement.focus(); 6 | }; 7 | 8 | const getAllElements = () => document.querySelectorAll('[nav-selectable]'); 9 | 10 | const getCurrentElement = () => document.querySelector('[nav-selected=true]'); 11 | 12 | const getTheIndexOfTheSelectedElement = current => { 13 | const currentElement = current || getCurrentElement(); 14 | return currentElement ? parseInt(currentElement.getAttribute('nav-index')) : 0; 15 | } 16 | 17 | const getCurrentItem = () => { 18 | const item = getCurrentElement(); 19 | const index = getTheIndexOfTheSelectedElement(item); 20 | return [item, index]; 21 | } 22 | 23 | const selectElement = selectElement => { 24 | [].forEach.call(getAllElements(), (element, index) => { 25 | const selectThisElement = element === selectElement; 26 | element.setAttribute("nav-selected", selectThisElement); 27 | element.setAttribute("nav-index", index); 28 | if (element.nodeName === 'INPUT') { 29 | selectThisElement ? element.focus() : element.blur(); 30 | } 31 | }); 32 | } 33 | 34 | const Down = () => { 35 | const allElements = getAllElements(); 36 | const currentIndex = getTheIndexOfTheSelectedElement(); 37 | const goToFirstElement = currentIndex + 1 > allElements.length - 1; 38 | const setIndex = goToFirstElement ? 0 : currentIndex + 1; 39 | selectElement(allElements[setIndex] || allElements[0]); 40 | }; 41 | 42 | const Up = () => { 43 | const allElements = getAllElements(); 44 | const currentIndex = getTheIndexOfTheSelectedElement(); 45 | const goToLastElement = currentIndex === 0; 46 | const setIndex = goToLastElement ? allElements.length - 1 : currentIndex - 1; 47 | selectElement(allElements[setIndex] || allElements[0]); 48 | }; 49 | 50 | export default { init, Up, Down, getCurrentItem }; 51 | -------------------------------------------------------------------------------- /src/components/Input.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 34 | 35 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 94 | 95 | 111 | --------------------------------------------------------------------------------