├── .babelrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── LICENSE ├── README.md ├── build ├── webpack.base.js └── webpack.config.js ├── config ├── dev.env.js ├── index.js ├── prod.env.js └── test.env.js ├── docs ├── App.vue ├── assets │ ├── avatar.png │ ├── chart.png │ ├── footer.png │ ├── icon-green.png │ ├── image.png │ ├── intro.png │ ├── nav.png │ └── text.png ├── dev │ └── index.html ├── index.html ├── index.js └── webpack.config.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── components │ ├── Avatar.vue │ ├── Cell.vue │ ├── Chart.vue │ ├── Footer.vue │ ├── Grid.vue │ ├── Image.vue │ ├── Intro.vue │ ├── Nav.vue │ ├── Text.vue │ └── index.js └── index.js ├── static ├── .gitkeep └── images │ ├── icon-green.png │ └── logo.png ├── test └── unit │ ├── .eslintrc │ ├── jest.conf.js │ ├── setup.js │ └── specs │ ├── Avatar.spec.js │ ├── Cell.spec.js │ ├── Footer.spec.js │ ├── Grid.spec.js │ ├── Image.spec.js │ ├── Intro.spec.js │ ├── Nav.spec.js │ └── Text.spec.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | "eslint:recommended", 4 | "plugin:vue/recommended" // or 'plugin:vue/base' 5 | ], 6 | rules: { 7 | // override/add rules' settings here 8 | "vue/valid-v-if": "error", 9 | "no-console": ["warn", { allow: ["warn", "error"] }] 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint", 13 | ecmaVersion: 2017, 14 | sourceType: "module" 15 | }, 16 | env: { 17 | amd: true 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | /test/unit/coverage/ 8 | 9 | # Editor directories and files 10 | .idea 11 | .vscode 12 | *.suo 13 | *.ntvs* 14 | *.njsproj 15 | *.sln 16 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Dane Lyons 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 | # Protovue 2 | 3 | > A prototyping component library build for Vue.js 4 | 5 |

6 | Protovue 7 |

8 | 9 | ## Getting Started 10 | 11 | - [Hacker Noon Tutorial](https://hackernoon.com/hello-protovue-prototyping-component-framework-for-vue-js-8d33351e59c0) 12 | - [Protovue Examples](https://github.com/v1Labs/protovue-examples) 13 | 14 | ## Components 15 | 16 | ### Grid 17 | 18 | ```javascript 19 | 20 | // Default: 12x10 21 | // Default: 10 22 | // Shows guides to help build cells 23 | // Makes all cells flat (no background) 24 | ``` 25 | 26 | ### Cell 27 | 28 | ```javascript 29 | 30 | // WxH: size="2,4" and size="2 4" also work 31 | // Default: 0 32 | // Default: 0 33 | // Removes background color 34 | // Vertically aligns content in middle 35 | // Vertically aligns content in bottom 36 | // Adds border to all sides of cell 37 | // Adds border to top of cell 38 | // Adds border to right of cell 39 | // Adds border to bottom of cell 40 | // Adds border to left of cell 41 | ``` 42 | 43 | ### Text 44 | 45 | ```javascript 46 | 47 | // Default: 3 48 | // Centers rows 49 | // Makes rows full width 50 | ``` 51 | Text 52 | 53 | ### Image 54 | 55 | ```javascript 56 | 57 | // Default: 100% 58 | // Default: 200px 59 | // Makes circle if width equals height 60 | // Centers horizontally 61 | ``` 62 | Image 63 | 64 | ### Avatar 65 | 66 | ```javascript 67 | 68 | // Default: 1 69 | ``` 70 | Avatar 71 | 72 | ### Nav 73 | 74 | > Works best in a vertically narrow cell 75 | 76 | ```javascript 77 | 78 | // Default: 4 79 | ``` 80 | Nav 81 | 82 | ### Footer 83 | 84 | > Works best in a vertically narrow cell 85 | 86 | ```javascript 87 | 88 | // Default: 4 89 | ``` 90 | Footer 91 | 92 | ### Chart 93 | 94 | > Shows a filled line chart. 95 | 96 | ```javascript 97 | 98 | // Default: 200 99 | // Horizontal margin, Default: 50 100 | ``` 101 | Chart 102 | 103 | ### Intro 104 | 105 | > Shows a model explaining the prototype. Helps your users get into the right mind set. 106 | 107 | > Works best if you include it before ``. 108 | 109 | ```javascript 110 | 111 |

Imagine your job title is {A} while working for company {B}. This prototype explores a solution for problem {C}.

112 |

Please take it for a test run. Then we'd like to know if you\'re excited about this direction and if you've got any feedback or ideas.

113 |

Thanks for your input!

114 | 115 | 116 | ``` 117 | Intro 118 | 119 | ## License 120 | [MIT](https://github.com/v1Labs/protovue/blob/master/LICENSE) 121 | -------------------------------------------------------------------------------- /build/webpack.base.js: -------------------------------------------------------------------------------- 1 | const eslintFriendlyFormatter = require("eslint-friendly-formatter"); 2 | 3 | module.exports = { 4 | module: { 5 | rules: [ 6 | { 7 | test: /\.js$/, 8 | exclude: /node_modules/, 9 | test: /\.(js|vue)$/, 10 | loader: "eslint-loader", 11 | enforce: "pre", 12 | options: {} 13 | }, 14 | { 15 | test: /\.js/, 16 | loaders: ["babel-loader"], 17 | exclude: /node_modules/ 18 | }, 19 | { 20 | test: /\.vue$/, 21 | loaders: ["vue-loader"], 22 | exclude: /node_modules/ 23 | } 24 | ] 25 | }, 26 | 27 | resolve: { 28 | extensions: [".js", ".vue"] 29 | } 30 | }; 31 | -------------------------------------------------------------------------------- /build/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const webpack = require("webpack"); 3 | const merge = require("webpack-merge"); 4 | 5 | module.exports = merge(require("./webpack.base"), { 6 | context: __dirname, 7 | 8 | entry: { 9 | index: "../src/index.js", 10 | "index.min": "../src/index.js" 11 | }, 12 | output: { 13 | path: path.resolve(__dirname, "../dist"), 14 | filename: "[name].js", 15 | library: "ProtoVue", 16 | libraryTarget: "umd" 17 | }, 18 | 19 | externals: ["vue"], 20 | 21 | plugins: [ 22 | new webpack.optimize.UglifyJsPlugin({ 23 | include: /\.min\.js$/, 24 | minimize: true 25 | }), 26 | new webpack.optimize.ModuleConcatenationPlugin() 27 | ] 28 | }); 29 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.3.1 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: {}, 14 | 15 | // Various Dev Server settings 16 | host: 'localhost', // can be overwritten by process.env.HOST 17 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 18 | autoOpenBrowser: false, 19 | errorOverlay: true, 20 | notifyOnErrors: true, 21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 22 | 23 | 24 | /** 25 | * Source Maps 26 | */ 27 | 28 | // https://webpack.js.org/configuration/devtool/#development 29 | devtool: 'cheap-module-eval-source-map', 30 | 31 | // If you have problems debugging vue-files in devtools, 32 | // set this to false - it *may* help 33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 34 | cacheBusting: true, 35 | 36 | cssSourceMap: true 37 | }, 38 | 39 | build: { 40 | // Template for index.html 41 | index: path.resolve(__dirname, '../dist/index.html'), 42 | 43 | // Paths 44 | assetsRoot: path.resolve(__dirname, '../dist'), 45 | assetsSubDirectory: 'static', 46 | assetsPublicPath: '/', 47 | 48 | /** 49 | * Source Maps 50 | */ 51 | 52 | productionSourceMap: true, 53 | // https://webpack.js.org/configuration/devtool/#production 54 | devtool: '#source-map', 55 | 56 | // Gzip off by default as many popular static hosts such as 57 | // Surge or Netlify already gzip all static assets for you. 58 | // Before setting to `true`, make sure to: 59 | // npm install --save-dev compression-webpack-plugin 60 | productionGzip: false, 61 | productionGzipExtensions: ['js', 'css'], 62 | 63 | // Run the build command with an extra argument to 64 | // View the bundle analyzer report after build finishes: 65 | // `npm run build --report` 66 | // Set to `true` or `false` to always turn it on or off 67 | bundleAnalyzerReport: process.env.npm_config_report 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /config/test.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const devEnv = require('./dev.env') 4 | 5 | module.exports = merge(devEnv, { 6 | NODE_ENV: '"testing"' 7 | }) 8 | -------------------------------------------------------------------------------- /docs/App.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 34 | 35 | 42 | -------------------------------------------------------------------------------- /docs/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/avatar.png -------------------------------------------------------------------------------- /docs/assets/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/chart.png -------------------------------------------------------------------------------- /docs/assets/footer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/footer.png -------------------------------------------------------------------------------- /docs/assets/icon-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/icon-green.png -------------------------------------------------------------------------------- /docs/assets/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/image.png -------------------------------------------------------------------------------- /docs/assets/intro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/intro.png -------------------------------------------------------------------------------- /docs/assets/nav.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/nav.png -------------------------------------------------------------------------------- /docs/assets/text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/docs/assets/text.png -------------------------------------------------------------------------------- /docs/dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Protovue 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Protovue 8 | 9 | 10 | 11 |

Protovue

12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from './App.vue'; 3 | import Protovue from '../src/index.js'; 4 | 5 | Vue.use(Protovue, {}); 6 | 7 | new Vue({ 8 | el: "#app", 9 | components: { 10 | App 11 | }, 12 | template: "" 13 | }); 14 | -------------------------------------------------------------------------------- /docs/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const merge = require("webpack-merge"); 3 | 4 | module.exports = merge(require("../build/webpack.base"), { 5 | context: __dirname, 6 | 7 | entry: "./index.js", 8 | 9 | output: { 10 | path: path.resolve(__dirname, "build"), 11 | filename: "app.js", 12 | publicPath: "/build/" 13 | }, 14 | 15 | resolve: { 16 | alias: { 17 | vue: "vue/dist/vue.js" 18 | } 19 | }, 20 | 21 | devServer: { 22 | contentBase: __dirname, 23 | port: 2000 24 | } 25 | }); 26 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | protovue 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "v1labs-protovue", 3 | "version": "0.0.8", 4 | "description": "A prototyping component library for Vue.js", 5 | "author": "Dane Lyons", 6 | "main": "dist/index.js", 7 | "license": "MIT", 8 | "scripts": { 9 | "start": "webpack-dev-server --config docs/webpack.config.js", 10 | "build": "rm -rf dist && NODE_ENV=production webpack --config build/webpack.config.js", 11 | "test": "yarn jest" 12 | }, 13 | "dependencies": { 14 | "npm": "^6.0.1", 15 | "vue": "^2.5.2" 16 | }, 17 | "devDependencies": { 18 | "@vue/test-utils": "^1.0.0-beta.11", 19 | "autoprefixer": "^7.1.2", 20 | "babel-core": "^6.22.1", 21 | "babel-eslint": "^8.0.2", 22 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 23 | "babel-jest": "^21.0.2", 24 | "babel-loader": "^7.1.1", 25 | "babel-plugin-dynamic-import-node": "^1.2.0", 26 | "babel-plugin-syntax-jsx": "^6.18.0", 27 | "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", 28 | "babel-plugin-transform-runtime": "^6.22.0", 29 | "babel-plugin-transform-vue-jsx": "^3.5.0", 30 | "babel-preset-env": "^1.3.2", 31 | "babel-preset-stage-2": "^6.22.0", 32 | "chalk": "^2.0.1", 33 | "copy-webpack-plugin": "^4.0.1", 34 | "css-loader": "^0.28.0", 35 | "eslint": "^4.11.0", 36 | "eslint-friendly-formatter": "^3.0.0", 37 | "eslint-loader": "^1.9.0", 38 | "eslint-plugin-vue": "^3.14.0", 39 | "extract-text-webpack-plugin": "^3.0.0", 40 | "file-loader": "^1.1.4", 41 | "friendly-errors-webpack-plugin": "^1.6.1", 42 | "html-webpack-plugin": "^2.30.1", 43 | "jest": "^22.0.4", 44 | "jest-serializer-vue": "^0.3.0", 45 | "node-notifier": "^5.1.2", 46 | "optimize-css-assets-webpack-plugin": "^3.2.0", 47 | "ora": "^1.2.0", 48 | "portfinder": "^1.0.13", 49 | "postcss-import": "^11.0.0", 50 | "postcss-loader": "^2.0.8", 51 | "postcss-url": "^7.2.1", 52 | "rimraf": "^2.6.0", 53 | "semver": "^5.3.0", 54 | "shelljs": "^0.7.6", 55 | "uglifyjs-webpack-plugin": "^1.1.1", 56 | "url-loader": "^0.5.8", 57 | "vue-jest": "^1.0.2", 58 | "vue-loader": "^13.3.0", 59 | "vue-style-loader": "^3.0.1", 60 | "vue-template-compiler": "^2.5.2", 61 | "webpack": "^3.6.0", 62 | "webpack-bundle-analyzer": "^2.9.0", 63 | "webpack-dev-server": "^2.9.1", 64 | "webpack-merge": "^4.1.0" 65 | }, 66 | "jest": { 67 | "moduleFileExtensions": [ 68 | "js", 69 | "vue" 70 | ], 71 | "moduleNameMapper": { 72 | "^@/(.*)$": "/src/$1" 73 | }, 74 | "transform": { 75 | "^.+\\.js$": "/node_modules/babel-jest", 76 | ".*\\.(vue)$": "/node_modules/vue-jest" 77 | }, 78 | "snapshotSerializers": [ 79 | "/node_modules/jest-serializer-vue" 80 | ], 81 | "setupFiles": ["/test/unit/setup"] 82 | }, 83 | "engines": { 84 | "node": ">= 6.0.0", 85 | "npm": ">= 3.0.0" 86 | }, 87 | "browserslist": [ 88 | "> 1%", 89 | "last 2 versions", 90 | "not ie <= 8" 91 | ] 92 | } 93 | -------------------------------------------------------------------------------- /src/components/Avatar.vue: -------------------------------------------------------------------------------- 1 | 47 | 48 | 80 | 81 | 131 | -------------------------------------------------------------------------------- /src/components/Cell.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 80 | 81 | 123 | -------------------------------------------------------------------------------- /src/components/Chart.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 95 | 96 | 109 | -------------------------------------------------------------------------------- /src/components/Footer.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 40 | 41 | 64 | -------------------------------------------------------------------------------- /src/components/Grid.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 72 | 73 | 105 | -------------------------------------------------------------------------------- /src/components/Image.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 43 | 44 | 53 | -------------------------------------------------------------------------------- /src/components/Intro.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 76 | 77 | 160 | -------------------------------------------------------------------------------- /src/components/Nav.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 53 | 54 | 100 | -------------------------------------------------------------------------------- /src/components/Text.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 49 | 50 | 62 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import Cell from './Cell'; 2 | import Grid from './Grid'; 3 | import Nav from './Nav'; 4 | import Text from './Text'; 5 | 6 | export default { 7 | 'v1-cell': Cell, 8 | 'v1-grid': Grid, 9 | 'v1-nav': Nav, 10 | 'v1-text': Text 11 | }; 12 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Avatar from './components/Avatar'; 2 | import Cell from './components/Cell'; 3 | import Chart from './components/Chart'; 4 | import Footer from './components/Footer'; 5 | import Grid from './components/Grid'; 6 | import Image from './components/Image'; 7 | import Intro from './components/Intro'; 8 | import Nav from './components/Nav'; 9 | import Text from './components/Text'; 10 | 11 | const Protovue = { 12 | install(Vue, opt={}) { 13 | const color = opt.color || '#dce3e4'; 14 | const background = opt.background || '#ffffff'; 15 | Vue.component("v1-avatar", Avatar); 16 | Vue.component("v1-cell", Cell); 17 | Vue.component("v1-chart", Chart); 18 | Vue.component("v1-footer", Footer); 19 | Vue.component("v1-grid", Grid); 20 | Vue.component("v1-image", Image); 21 | Vue.component("v1-intro", Intro); 22 | Vue.component("v1-nav", Nav); 23 | Vue.component("v1-text", Text); 24 | 25 | Vue.mixin({ 26 | created: function () { 27 | this.dark = lightenColor(color, -20); 28 | this.light = lightenColor(color, 20); //'rgba(50,50,50,.03)'; 29 | this.color = color; 30 | this.gridBackground = background; 31 | } 32 | }); 33 | } 34 | }; 35 | 36 | // This function needs a different home 37 | function lightenColor(col, amt) { 38 | let usePound = false; 39 | if (col[0] == "#") { 40 | col = col.slice(1); 41 | if (col.length == 2) { 42 | col = String(col) + String(col) + String(col); 43 | } 44 | if (col.length == 3) { 45 | col = String(col) + String(col); 46 | } 47 | usePound = true; 48 | } 49 | 50 | let num = parseInt(col,16); 51 | let r = (num >> 16) + amt; 52 | if (r > 255) { 53 | r = 255; 54 | } else if (r < 0) { 55 | r = 0; 56 | } 57 | 58 | let b = ((num >> 8) & 0x00FF) + amt; 59 | if (b > 255) { 60 | b = 255; 61 | } else if (b < 0) { 62 | b = 0; 63 | } 64 | 65 | let g = (num & 0x0000FF) + amt; 66 | if (g > 255) { 67 | g = 255; 68 | } else if (g < 0) { 69 | g = 0; 70 | } 71 | 72 | return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16); 73 | } 74 | 75 | export default Protovue; 76 | if (typeof window !== "undefined" && window.Vue) { 77 | window.Vue.use(Protovue); 78 | } 79 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/static/.gitkeep -------------------------------------------------------------------------------- /static/images/icon-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/static/images/icon-green.png -------------------------------------------------------------------------------- /static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/v1Labs/protovue/37df9ae912efc5c42cd691916024863c0f425f0a/static/images/logo.png -------------------------------------------------------------------------------- /test/unit/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /test/unit/jest.conf.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | rootDir: path.resolve(__dirname, '../../'), 5 | moduleFileExtensions: [ 6 | 'js', 7 | 'json', 8 | 'vue' 9 | ], 10 | moduleNameMapper: { 11 | '^@/(.*)$': '/src/$1' 12 | }, 13 | transform: { 14 | '^.+\\.js$': '/node_modules/babel-jest', 15 | '.*\\.(vue)$': '/node_modules/vue-jest' 16 | }, 17 | snapshotSerializers: ['/node_modules/jest-serializer-vue'], 18 | setupFiles: ['/test/unit/setup'], 19 | mapCoverage: true, 20 | coverageDirectory: '/test/unit/coverage', 21 | collectCoverageFrom: [ 22 | 'src/**/*.{js,vue}', 23 | '!src/main.js', 24 | '!**/node_modules/**' 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /test/unit/setup.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Protovue from '@/index.js'; 3 | 4 | Vue.use(Protovue); 5 | Vue.config.productionTip = false; 6 | -------------------------------------------------------------------------------- /test/unit/specs/Avatar.spec.js: -------------------------------------------------------------------------------- 1 | //import Vue from 'vue'; 2 | import { shallowMount } from '@vue/test-utils'; 3 | import Avatar from '@/components/Avatar'; 4 | 5 | describe('Avatar.vue', () => { 6 | it('should render 1 avatar element', () => { 7 | const wrapper = shallowMount(Avatar, { 8 | propsData: {} 9 | }); 10 | expect(wrapper.findAll('.avatar')).toHaveLength(1); 11 | }); 12 | 13 | it('should render 5 avatar elements', () => { 14 | const wrapper = shallowMount(Avatar, { 15 | propsData: { 16 | count: 5 17 | } 18 | }); 19 | expect(wrapper.findAll('.avatar')).toHaveLength(5); 20 | }) 21 | }) 22 | -------------------------------------------------------------------------------- /test/unit/specs/Cell.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Cell from '@/components/Cell'; 3 | 4 | describe('Cell.vue', () => { 5 | it('should render h1 element', () => { 6 | const wrapper = shallowMount(Cell, { 7 | propsData: {}, 8 | slots: { 9 | default: '

' 10 | } 11 | }); 12 | expect(wrapper.findAll('h1')).toHaveLength(1); 13 | }); 14 | }) 15 | -------------------------------------------------------------------------------- /test/unit/specs/Footer.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Footer from '@/components/Footer'; 3 | 4 | describe('Footer.vue', () => { 5 | it('should render 4 link element', () => { 6 | const wrapper = shallowMount(Footer, { 7 | propsData: { 8 | links: 4 9 | } 10 | }); 11 | expect(wrapper.findAll('.link')).toHaveLength(4); 12 | }); 13 | }) 14 | -------------------------------------------------------------------------------- /test/unit/specs/Grid.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Grid from '@/components/Grid'; 3 | 4 | describe('Grid.vue', () => { 5 | it('should render 2 columns and 4 rows', () => { 6 | const wrapper = shallowMount(Grid, { 7 | propsData: { 8 | guides: true, 9 | size: '2x4' 10 | } 11 | }); 12 | expect(wrapper.findAll('.guide-x')).toHaveLength(3); // 1 fewer guide 13 | expect(wrapper.findAll('.guide-y')).toHaveLength(1); 14 | }); 15 | 16 | it('shouldnt show guides', () => { 17 | const wrapper = shallowMount(Grid, { 18 | propsData: { 19 | guides: false 20 | } 21 | }); 22 | expect(wrapper.findAll('.guide-x')).toHaveLength(0); 23 | expect(wrapper.findAll('.guide-y')).toHaveLength(0); 24 | }); 25 | }) 26 | -------------------------------------------------------------------------------- /test/unit/specs/Image.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Image from '@/components/Image'; 3 | 4 | describe('Image.vue', () => { 5 | it('should be 100x100', () => { 6 | const wrapper = shallowMount(Image, { 7 | propsData: { 8 | width: '100px', 9 | height: '100px' 10 | } 11 | }); 12 | const img = wrapper.find('.img'); 13 | expect(img.attributes().style).toContain('width: 100px'); 14 | expect(img.attributes().style).toContain('height: 100px'); 15 | }); 16 | 17 | it('should be round', () => { 18 | const wrapper = shallowMount(Image, { 19 | propsData: { 20 | round: true 21 | } 22 | }); 23 | const img = wrapper.find('.img'); 24 | expect(img.attributes().style).toContain('border-radius: 100%'); 25 | }); 26 | }) 27 | -------------------------------------------------------------------------------- /test/unit/specs/Intro.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Intro from '@/components/Intro'; 3 | 4 | describe('Intro.vue', () => { 5 | it('should set title prop', () => { 6 | const wrapper = shallowMount(Intro, { 7 | propsData: { 8 | title: 'test title' 9 | } 10 | }); 11 | expect(wrapper.props().title).toBe('test title'); 12 | }); 13 | 14 | it('should set version prop', () => { 15 | const wrapper = shallowMount(Intro, { 16 | propsData: { 17 | version: 'v2' 18 | } 19 | }); 20 | expect(wrapper.props().version).toBe('v2'); 21 | }); 22 | }) 23 | -------------------------------------------------------------------------------- /test/unit/specs/Nav.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Nav from '@/components/Nav'; 3 | 4 | describe('Nav.vue', () => { 5 | it('should set links prop', () => { 6 | const wrapper = shallowMount(Nav, { 7 | propsData: { 8 | links: 5 9 | } 10 | }); 11 | expect(wrapper.props().links).toBe(5); 12 | }); 13 | }) 14 | -------------------------------------------------------------------------------- /test/unit/specs/Text.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import Text from '@/components/Text'; 3 | 4 | describe('Text.vue', () => { 5 | it('should set rows prop', () => { 6 | const wrapper = shallowMount(Text, { 7 | propsData: { 8 | rows: 7 9 | } 10 | }); 11 | expect(wrapper.props().rows).toBe(7); 12 | }); 13 | }) 14 | --------------------------------------------------------------------------------