├── .gitignore ├── README.md ├── babel.config.js ├── design └── Velocity Studio │ ├── Fonts │ ├── OFL.txt │ ├── Rubik-Black.ttf │ ├── Rubik-BlackItalic.ttf │ ├── Rubik-Bold.ttf │ ├── Rubik-BoldItalic.ttf │ ├── Rubik-Italic.ttf │ ├── Rubik-Light.ttf │ ├── Rubik-LightItalic.ttf │ ├── Rubik-Medium.ttf │ ├── Rubik-MediumItalic.ttf │ └── Rubik-Regular.ttf │ ├── InVision Free Design Resources Licensing Agreement.pdf │ └── Velocity – Free Dashboard UI Kit.studio ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── css │ │ ├── components │ │ │ └── checkboxes.css │ │ └── tailwind.css │ ├── img │ │ ├── avatar.png │ │ ├── home │ │ │ ├── Map.png │ │ │ └── operating-score.png │ │ ├── icons │ │ │ ├── directions_car.svg │ │ │ ├── grid_view.svg │ │ │ ├── icons.svg │ │ │ ├── mail_outline.svg │ │ │ ├── map.svg │ │ │ ├── notes.svg │ │ │ ├── perm_data_setting.svg │ │ │ ├── settings.svg │ │ │ └── stacked_bar_chart.svg │ │ ├── sidebar │ │ │ └── sun.png │ │ └── vehicles │ │ │ ├── 42w.png │ │ │ ├── bebop.png │ │ │ ├── bliss.png │ │ │ ├── eagle.png │ │ │ ├── expedition.png │ │ │ ├── resolve.png │ │ │ ├── scorpion.png │ │ │ └── vigor.png │ ├── logo-icon.svg │ └── logo.png ├── components │ ├── Alert.vue │ ├── Avatar.vue │ ├── BarChart.vue │ ├── Button.vue │ ├── Card.vue │ ├── DoughnutChart.vue │ ├── Icon.vue │ ├── LineChart.vue │ ├── MultipleFilter.vue │ ├── Nav.vue │ ├── Notification.vue │ ├── SideBar.vue │ ├── Slider.vue │ ├── Table.vue │ ├── TaskCard.vue │ ├── TaskLane.vue │ └── TodoList.vue ├── layouts │ └── default.vue ├── main.js ├── pages │ ├── Analytics.vue │ ├── Error404.vue │ ├── Home.vue │ ├── ServiceReminders.vue │ └── Vehicles.vue ├── router.js └── store.js ├── tailwind.js └── yarn.lock /.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 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ======= 2 | # vue-velocity 3 | Components library based on velocity UI kit by InVision : https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/ 4 | 5 | This project is made with Vuejs, Vue-cli and TailwindCss 6 | other packages used : 7 | - postcss, postcss-import, purgecss(only for production, usefull to reduce tailwindcss css file size); 8 | - vue-router ; 9 | - vuex ; 10 | - vue-chartjs (and chartjs ofc) ; 11 | - vue2-leaflet (and leaflet ofc); 12 | - vuedraggrable. 13 | 14 | You can see a little demo here : https://vue-velocity.netlify.app 15 | 16 | You can find the .studio file based on /design/Velocity Studio 17 | 18 | 19 | Be indulgent it's a WIP :). 20 | 21 | ## Project setup 22 | ``` 23 | yarn install 24 | ``` 25 | 26 | ### Compiles and hot-reloads for development 27 | ``` 28 | yarn serve 29 | ``` 30 | 31 | ### Compiles and minifies for production 32 | ``` 33 | yarn build 34 | ``` 35 | 36 | ### Lints and fixes files 37 | ``` 38 | yarn lint 39 | ``` 40 | 41 | ### Customize configuration 42 | See [Configuration Reference](https://cli.vuejs.org/config/). 43 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2015 The Rubik Project Authors, 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Black.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-BlackItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-BlackItalic.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Bold.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-BoldItalic.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Italic.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Light.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-LightItalic.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Medium.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-MediumItalic.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/Fonts/Rubik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Fonts/Rubik-Regular.ttf -------------------------------------------------------------------------------- /design/Velocity Studio/InVision Free Design Resources Licensing Agreement.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/InVision Free Design Resources Licensing Agreement.pdf -------------------------------------------------------------------------------- /design/Velocity Studio/Velocity – Free Dashboard UI Kit.studio: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/design/Velocity Studio/Velocity – Free Dashboard UI Kit.studio -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-velocity-lib", 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 | "chart.js": "^2.9.2", 12 | "core-js": "^3.1.2", 13 | "leaflet": "^1.5.1", 14 | "postcss-import": "^12.0.1", 15 | "vue": "^2.6.10", 16 | "vue-chartjs": "^3.5.0", 17 | "vue-multiselect": "^2.1.6", 18 | "vue2-leaflet": "^2.2.1", 19 | "vuedraggable": "^2.23.2", 20 | "vuex": "^3.1.2" 21 | }, 22 | "devDependencies": { 23 | "@fullhuman/postcss-purgecss": "^1.3.0", 24 | "@vue/cli-plugin-babel": "^4.0.0", 25 | "@vue/cli-plugin-eslint": "^4.0.0", 26 | "@vue/cli-plugin-router": "^4.0.5", 27 | "@vue/cli-service": "^4.0.0", 28 | "babel-eslint": "^10.0.1", 29 | "eslint": "^5.16.0", 30 | "eslint-plugin-vue": "^5.0.0", 31 | "tailwindcss": "^1.1.2", 32 | "vue-router": "^3.1.3", 33 | "vue-template-compiler": "^2.6.10", 34 | "webpack": "^4.1.0 || ^5.0.0-0" 35 | }, 36 | "eslintConfig": { 37 | "root": true, 38 | "env": { 39 | "node": true 40 | }, 41 | "extends": [ 42 | "plugin:vue/essential", 43 | "eslint:recommended" 44 | ], 45 | "rules": {}, 46 | "parserOptions": { 47 | "parser": "babel-eslint" 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | const purgecss = require('@fullhuman/postcss-purgecss')({ 3 | 4 | // Specify the paths to all of the template files in your project 5 | content: [ 6 | './public/**/*.html', 7 | './src/**/*.vue', 8 | './src/**/*.jsx', 9 | // etc. 10 | ], 11 | whitelistPatterns: [/^multiselect|leaflet/], 12 | 13 | // Include any special characters you're using in this regular expression 14 | defaultExtractor: content => content.match(/[\w-/:]+(? 2 | 3 | 4 | 5 | 6 | 7 | 8 | vue-velocity-lib 9 | 10 | 11 | 78 | 81 |
82 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 129 | 130 | 164 | -------------------------------------------------------------------------------- /src/assets/css/components/checkboxes.css: -------------------------------------------------------------------------------- 1 | /* Cachons la case à cocher */ 2 | form p { 3 | position: relative; /* permet de positionner la checkbox cachée */ 4 | } 5 | 6 | [type="checkbox"]:not(:checked), 7 | [type="checkbox"]:checked { 8 | /* Cache la checkbox sans 9 | la désactiver pour les 10 | lecteurs d'écran */ 11 | position: absolute; 12 | left: 0; 13 | opacity: 0.01; 14 | } 15 | 16 | /* on prépare le label */ 17 | [type="checkbox"]:not(:checked) + label, 18 | [type="checkbox"]:checked + label { 19 | position: relative; /* permet de positionner les pseudo-éléments */ 20 | padding-left: 2.3em; /* fait un peu d'espace pour notre case à venir */ 21 | font-size: 1.05em; /* Label un peu plus gros */ 22 | line-height: 1.7; 23 | cursor: pointer; /* affiche un curseur adapté */ 24 | } 25 | 26 | /* Aspect de la case */ 27 | [type="checkbox"]:not(:checked) + label:before, 28 | [type="checkbox"]:checked + label:before { 29 | content: ''; 30 | @apply absolute left-0 top-0 w-5 h-5 border border-solid border-black-3 bg-white rounded; 31 | box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(46,91,255,0.2); 32 | transition: all .275s; 33 | } 34 | 35 | /* Aspect de la coche */ 36 | [type="checkbox"]:not(:checked) + label:after, 37 | [type="checkbox"]:checked + label:after { 38 | content: '✔'; 39 | @apply absolute text-2xl text-primary-normal; 40 | top: .28em; 41 | left: .08em; 42 | line-height: 0; 43 | transition: all .2s; 44 | } 45 | 46 | /* Aspect non cochée */ 47 | [type="checkbox"]:not(:checked) + label:after { 48 | opacity: 0; 49 | transform: scale(0); 50 | } 51 | 52 | /* Aspect cochée */ 53 | [type="checkbox"]:checked + label:after { 54 | opacity: 1; 55 | transform: scale(1); 56 | } 57 | 58 | /* Disabled checkbox */ 59 | [type="checkbox"]:disabled:not(:checked) + label:before, 60 | [type="checkbox"]:disabled:checked + label:before { 61 | box-shadow: none; 62 | border-color: #bbb; 63 | background-color: #e9e9e9; 64 | } 65 | 66 | /* Disabled checked */ 67 | [type="checkbox"]:disabled:checked + label:after { 68 | color: #777; 69 | } 70 | 71 | [type="checkbox"]:disabled + label { 72 | color: #aaa; 73 | } 74 | 75 | /* Accessibility focus */ 76 | [type="checkbox"]:checked:focus + label:before, 77 | [type="checkbox"]:not(:checked):focus + label:before { 78 | box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(46,91,255,0.2); 79 | } -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; -------------------------------------------------------------------------------- /src/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/avatar.png -------------------------------------------------------------------------------- /src/assets/img/home/Map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/home/Map.png -------------------------------------------------------------------------------- /src/assets/img/home/operating-score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/home/operating-score.png -------------------------------------------------------------------------------- /src/assets/img/icons/directions_car.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | directions_car 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/grid_view.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | grid_view 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/icons.svg: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/assets/img/icons/mail_outline.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | mail_outline 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/map.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | map 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/notes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | notes 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/perm_data_setting.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | perm_data_setting 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | settings 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/icons/stacked_bar_chart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | stacked_bar_chart 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/assets/img/sidebar/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/sidebar/sun.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/42w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/42w.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/bebop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/bebop.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/bliss.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/bliss.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/eagle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/eagle.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/expedition.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/expedition.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/resolve.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/resolve.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/scorpion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/scorpion.png -------------------------------------------------------------------------------- /src/assets/img/vehicles/vigor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/img/vehicles/vigor.png -------------------------------------------------------------------------------- /src/assets/logo-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atcha/vue-velocity/90e7aaa467c4d2164709f4b0996733dd02f05204/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/Alert.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 31 | 32 | -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 79 | 80 | -------------------------------------------------------------------------------- /src/components/BarChart.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Button.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 35 | 36 | -------------------------------------------------------------------------------- /src/components/Card.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 30 | 31 | -------------------------------------------------------------------------------- /src/components/DoughnutChart.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Icon.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/LineChart.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/MultipleFilter.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 58 | 59 | -------------------------------------------------------------------------------- /src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 61 | 62 | -------------------------------------------------------------------------------- /src/components/Notification.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/SideBar.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 76 | 77 | -------------------------------------------------------------------------------- /src/components/Slider.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 21 | 22 | -------------------------------------------------------------------------------- /src/components/Table.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 164 | 165 | -------------------------------------------------------------------------------- /src/components/TaskCard.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/TaskLane.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 63 | 64 | -------------------------------------------------------------------------------- /src/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 38 | 39 | -------------------------------------------------------------------------------- /src/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue'; 3 | import { Icon } from 'leaflet'; 4 | import '@/assets/css/tailwind.css'; 5 | import 'leaflet/dist/leaflet.css'; 6 | 7 | import router from './router'; 8 | import store from './store'; 9 | 10 | Vue.config.productionTip = false 11 | 12 | 13 | // this part resolve an issue where the markers would not appear 14 | delete Icon.Default.prototype._getIconUrl; 15 | 16 | Icon.Default.mergeOptions({ 17 | iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'), 18 | iconUrl: require('leaflet/dist/images/marker-icon.png'), 19 | shadowUrl: require('leaflet/dist/images/marker-shadow.png') 20 | }); 21 | 22 | new Vue({ 23 | router, 24 | store, 25 | render: h => h(App) 26 | }).$mount('#app') 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/pages/Analytics.vue: -------------------------------------------------------------------------------- 1 | 87 | 88 | 455 | 456 | -------------------------------------------------------------------------------- /src/pages/Error404.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | 11 | -------------------------------------------------------------------------------- /src/pages/Home.vue: -------------------------------------------------------------------------------- 1 | 122 | 123 | 455 | 456 | 458 | -------------------------------------------------------------------------------- /src/pages/ServiceReminders.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 298 | 299 | -------------------------------------------------------------------------------- /src/pages/Vehicles.vue: -------------------------------------------------------------------------------- 1 | 39 | 40 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | Vue.use(Router); 5 | 6 | const router = new Router({ 7 | mode: 'history', 8 | base: process.env.BASE_URL, 9 | linkExactActiveClass: 'is-active', 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'home', 14 | component: () => import('./pages/Home.vue') 15 | }, 16 | { 17 | path: '/analytics', 18 | name: 'analytics', 19 | component: () => import('./pages/Analytics.vue') 20 | }, 21 | { 22 | path: '/vehicles', 23 | name: 'vehicles', 24 | component: () => import('./pages/Vehicles.vue') 25 | }, 26 | { 27 | path: '/service-reminders', 28 | name: 'serviceReminders', 29 | component: () => import('./pages/ServiceReminders.vue') 30 | } 31 | ] 32 | }); 33 | 34 | export default router; -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | /* eslint-disable no-param-reassign */ 7 | export default new Vuex.Store({ 8 | state: { 9 | items: { 10 | needed: [ 11 | { 12 | id: 0, 13 | name: "Spire", 14 | price: 233, 15 | info: "Tire replacement", 16 | date: "June 12" 17 | }, 18 | { 19 | id: 1, 20 | name: "Eos", 21 | price: 120, 22 | info: "Engine Check-up", 23 | date: "May 2" 24 | }, 25 | { 26 | id: 5, 27 | name: "Eagle", 28 | price: 180, 29 | info: "Tire replacement", 30 | date: "June 6" 31 | }, 32 | { 33 | id: 6, 34 | name: "Bebop", 35 | price: 1400, 36 | info: "Monthly service", 37 | date: "June 12" 38 | } 39 | ], 40 | waiting: [ 41 | { 42 | id: 2, 43 | name: "Expedition", 44 | price: 766, 45 | info: "Tire replacement", 46 | date: "June 3" 47 | } 48 | ], 49 | service: [ 50 | { 51 | id: 3, 52 | name: "Scorpion", 53 | price: 430, 54 | info: "Monthly service", 55 | date: "June 4" 56 | } 57 | ], 58 | serviced: [ 59 | { 60 | id: 4, 61 | name: "Empire", 62 | price: 542, 63 | info: "Engine check-up", 64 | date: "June 24" 65 | } 66 | ] 67 | }, 68 | nextId: 1 69 | }, 70 | mutations: { 71 | addItem(state, item) { 72 | state.items.todo.push(Object.assign(item, { id: state.nextId })); 73 | state.nextId += 1; 74 | }, 75 | updateItems(state, { items, id }) { 76 | state.items[id] = items; 77 | } 78 | } 79 | }); -------------------------------------------------------------------------------- /tailwind.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | colors: { 4 | transparent: 'transparent', 5 | primary: { 6 | normal: '#2E5BFF', 7 | light: 'rgba(46,91,255,0.2)' 8 | }, 9 | green: { 10 | normal: '#33AC2E', 11 | light: 'rgba(51, 172, 46, 0.2)' 12 | }, 13 | red: { 14 | normal: '#D63649', 15 | light: 'rgba(214, 54, 73, 0.2)' 16 | }, 17 | yellow: { 18 | normal: '#F7C137', 19 | light: 'rgba(247,193,55, 0.2)' 20 | }, 21 | blue: { 22 | normal: '#00C1D4', 23 | light: 'rgba(0,193,212,0.15)' 24 | }, 25 | purple: { 26 | normal: '#8C54FF', 27 | light: 'rgba(140,84,255,0.2)' 28 | }, 29 | gray: { 30 | '0': '#C8C8C8', 31 | '1': '#BFC5D2', 32 | '2': '#F4F6FC', 33 | '3': '#EEF3F5' 34 | }, 35 | white: '#FFFFFF', 36 | black: { 37 | '1': '#2E384D', 38 | '2': '#69707F', 39 | '3': '#8798AD', 40 | '4': '#808080' 41 | } 42 | }, 43 | borderWidth: { 44 | default: '1px', 45 | '0': '0', 46 | '2': '2px', 47 | '3': '3px', 48 | '4': '4px', 49 | '6': '6px', 50 | '8': '8px' 51 | }, 52 | inset: { 53 | '0': 0, 54 | '1': '1px', 55 | '2': '2px', 56 | '3': '3px', 57 | '4': '4px', 58 | '5': '5px', 59 | '8': '8px', 60 | '80': '80px', 61 | auto: 'auto' 62 | }, 63 | boxShadow: { 64 | default: '0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06)', 65 | md: ' 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)', 66 | lg: ' 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)', 67 | xl: ' 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)', 68 | '2l': '0 2px 4px 0 rgba(0, 0, 0, .05)', 69 | inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', 70 | outline: '0 0 0 3px rgba(66,153,225,0.5)', 71 | focus: '0 0 0 3px rgba(66,153,225,0.5)', 72 | 'none': 'none' 73 | }, 74 | extend: { 75 | spacing: { 76 | '72': '18rem', 77 | '84': '21rem', 78 | '96': '24rem' 79 | } 80 | } 81 | }, 82 | variants: { 83 | backgroundColor: ['responsive', 'hover', 'focus', 'active'], 84 | borderColor: ['responsive', 'hover', 'focus', 'active'], 85 | borderStyle: ['responsive', 'hover', 'focus'], 86 | borderWidth: ['responsive', 'hover', 'focus'] 87 | }, 88 | plugins: [] 89 | } 90 | --------------------------------------------------------------------------------