├── .DS_Store ├── .babelrc ├── .commitlintrc.json ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .storybook ├── config.js └── webpack.config.js ├── LICENSE.md ├── README.md ├── package.json ├── rollup.config.js ├── src ├── components │ ├── Box.vue │ ├── Flex.vue │ └── styles │ │ └── index.js ├── index.js └── index.umd.js ├── stories ├── grid.vue └── index.stories.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattrothenberg/vue-grid-styled/b6399bfe65cd6eddb6a53676b6a740c5d5f056ef/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["vue-app", { 4 | "modules": false 5 | }] 6 | ], 7 | "plugins": [ 8 | ["module-resolver", { 9 | "extensions": [".js", ".vue", ".json"] 10 | }] 11 | ], 12 | "env": { 13 | "test": { 14 | "plugins": ["dynamic-import-node"] 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /.commitlintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@commitlint/config-conventional" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .github/ 2 | _book/ 3 | docs/ 4 | coverage/ 5 | dist/ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // https://eslint.org/docs/user-guide/configuring 2 | 3 | module.exports = { 4 | root: true, 5 | parserOptions: { 6 | parser: 'babel-eslint', 7 | ecmaVersion: 2017, 8 | sourceType: 'module' 9 | }, 10 | plugins: ['html', 'vue'], 11 | extends: [ 12 | 'eslint:recommended', 13 | 'plugin:prettier/recommended', 14 | 'plugin:vue/recommended', 15 | 'plugin:import/errors', 16 | 'plugin:import/warnings' 17 | ], 18 | env: { 19 | browser: true, 20 | node: true, 21 | commonjs: true, 22 | es6: true, 23 | jest: true 24 | }, 25 | rules: { 26 | // allow async-await 27 | 'generator-star-spacing': 'off', 28 | // don't require .vue extension when importing 29 | 'import/extensions': ['error', 'always', { 30 | 'js': 'never', 31 | 'vue': 'never' 32 | }], 33 | // disallow reassignment of function parameters 34 | // disallow parameter object manipulation except for specific exclusions 35 | 'no-param-reassign': ['error', { 36 | props: true, 37 | ignorePropertyModificationsFor: [ 38 | 'state', // for vuex state 39 | 'acc', // for reduce accumulators 40 | 'e' // for e.returnvalue 41 | ] 42 | }], 43 | // allow optionalDependencies 44 | 'import/no-extraneous-dependencies': ['error', { 45 | optionalDependencies: ['test/index.js'] 46 | }], 47 | // allow debugger during development 48 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 49 | }, 50 | "settings": { 51 | // resolve using plugin babel module resolver 52 | "import/resolver": { 53 | "babel-module": {} 54 | } 55 | } 56 | } -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Usage 4 | 5 | ```bash 6 | # Install dependencies 7 | npm install 8 | 9 | # Build 10 | npm run build 11 | 12 | # Run development server with storybook 13 | npm run storybook 14 | 15 | # Run linter 16 | npm run lint 17 | 18 | # Run linter with auto fix 19 | npm run lint:fix 20 | 21 | # Commit files with commitizen (use this instead of git commit) 22 | npm run cz 23 | ``` 24 | 25 | ## Workflow 26 | 27 | * Create a component in the src/components folder 28 | * Add tests in the src/components/\_\_tests\_\_ folder 29 | * Register this component in src/index.js 30 | * Write stories which use your component as a template in src/stories/index.stories.js 31 | * Run `npm run storybook` to author your components by having a development environment 32 | * Run lint and tests before commiting anything 33 | * Commit using [Commit Convention](.github/COMMIT_CONVENTION.md) and push to github 34 | * If deployment is setup correctly(see next section), your components will be available on npm and release on github :) 35 | 36 | If everything is setup properly, every commit on master will automatically generate a release if needed. For the win. 37 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattrothenberg/vue-grid-styled/b6399bfe65cd6eddb6a53676b6a740c5d5f056ef/.github/ISSUE_TEMPLATE.md -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | **What kind of change does this PR introduce?** (check at least one) 11 | 12 | * [ ] Bugfix 13 | * [ ] Feature 14 | * [ ] Code style update 15 | * [ ] Refactor 16 | * [ ] Build-related changes 17 | * [ ] Other, please describe: 18 | 19 | **Does this PR introduce a breaking change?** (check one) 20 | 21 | * [ ] Yes 22 | * [ ] No 23 | 24 | If yes, please describe the impact and migration path for existing applications: 25 | 26 | **The PR fulfills these requirements:** 27 | 28 | * [ ] It's submitted to the `develop` branch (or to a previous version branch), _not_ the `master` branch 29 | * [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number) 30 | * [ ] All tests are passing 31 | * [ ] New/updated tests are included 32 | 33 | If adding a **new feature**, the PR's description includes: 34 | 35 | * [ ] A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it) 36 | 37 | **Other information:** 38 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by https://www.gitignore.io/api/node,visualstudiocode 2 | 3 | ### Node ### 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | # Generated code 64 | dist/ 65 | 66 | ### VisualStudioCode ### 67 | .vscode/* 68 | !.vscode/settings.json 69 | !.vscode/tasks.json 70 | !.vscode/launch.json 71 | !.vscode/extensions.json 72 | 73 | # End of https://www.gitignore.io/api/node,visualstudiocode 74 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .babelrc 2 | .commitlintrc 3 | .editorconfig 4 | .esdoc.json 5 | .travis.yml 6 | yarn.lock 7 | .github/ 8 | .storybook/ 9 | coverage/ 10 | node_modules/ 11 | src/ 12 | stories/ 13 | jest.*.js 14 | rollup.config.js -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from "@storybook/vue"; 2 | import Vue from "vue"; 3 | 4 | // Import your custom components. 5 | import VueGridStyled from "@/index"; 6 | 7 | // Install this library 8 | Vue.use(VueGridStyled, { 9 | theme: { 10 | colors: { 11 | red: "salmon" 12 | } 13 | } 14 | }); 15 | 16 | const req = require.context("../stories", true, /\.stories\.js$/); 17 | function loadStories() { 18 | req.keys().forEach(filename => req(filename)); 19 | } 20 | configure(loadStories, module); 21 | -------------------------------------------------------------------------------- /.storybook/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const { storyLoader } = require("vue-storybook"); 3 | 4 | // load the default config generator. 5 | const genDefaultConfig = require("@storybook/vue/dist/server/config/defaults/webpack.config.js"); 6 | 7 | module.exports = (baseConfig, env) => { 8 | const config = genDefaultConfig(baseConfig, env); 9 | baseConfig.module.rules[1].options = { 10 | loaders: { 11 | story: storyLoader 12 | } 13 | }; 14 | 15 | // Add js, json and vue extension support 16 | config.resolve.extensions.push(".js", ".vue", ".json"); 17 | 18 | // Add alias for @ pointing to src 19 | config.resolve.alias["@"] = path.resolve("src"); 20 | 21 | return config; 22 | }; 23 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2017 Matt Rothenberg 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-grid-styled 2 | 3 | ![Npm badge](https://img.shields.io/npm/v/vue-grid-styled.svg) 4 | 5 | > Vue.js port of @jxnblk's React library, [grid-styled](https://github.com/jxnblk/grid-styled) 6 | 7 | ## Installation 8 | 9 | ```shell 10 | yarn add vue-grid-styled 11 | ``` 12 | 13 | ## Default Theme 14 | 15 | ```js 16 | // Breakpoints 17 | const breakpoints = ["40em", "52em", "64em"]; 18 | // @media screen and (min-width: 40em) 19 | // @media screen and (min-width: 52em) 20 | // @media screen and (min-width: 64em) 21 | 22 | // Typographic Scale (numbers are converted to px values) 23 | const fontSizes = [12, 14, 16, 20, 24, 32, 48, 64, 72]; 24 | 25 | // Spacing Scale (used for margin and padding) 26 | const space = [0, 4, 8, 16, 32, 64, 128, 256, 512]; 27 | ``` 28 | 29 | ## Import & Install 30 | 31 | ```js 32 | import VueGridStyled from "vue-grid-styled"; 33 | // OR 34 | import { Box, Flex } from "vue-grid-styled"; 35 | 36 | // OPTIONAL: Pass a custom theme 37 | const theme = { 38 | colors: { 39 | red: "#F22613" 40 | } 41 | }; 42 | 43 | Vue.use(VueGridStyled, { theme }); 44 | // OR 45 | Vue.component("v-box", Box); 46 | Vue.component("v-flex", Flex); 47 | ``` 48 | 49 | ## Component Usage 50 | 51 | `vue-grid-styled` tries to emulate the [grid-styled API](https://github.com/jxnblk/grid-styled#box-) as closely as possible. Check it out for comprehensive documentation. 52 | 53 | One exception is that the `` component exposes a `tag` prop that you can use to programatically assign a HTML tag (e.g., "div", "section"). 54 | 55 | In a nutshell, replace the JSX syntax with Vue "binding" syntax and you should be good to go! Here are a few clarifying examples. 56 | 57 | #### Examples 58 | 59 | ```jsx 60 | // Grid-Styled JSX: Pixel Width 61 | 62 | ``` 63 | 64 | ```html 65 | 66 | 67 | ``` 68 | 69 | ```jsx 70 | // JSX: Responsive Widths 71 | 72 | ``` 73 | 74 | ```html 75 | 76 | 85 | ``` 86 | 87 | ```html 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | ``` 98 | 99 | ## Contributing 100 | 101 | See [CONTRIBUTING.md](.github/CONTRIBUTING.md). 102 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-grid-styled", 3 | "description": "Vue.js port of @jxnblk's React library, grid-styled", 4 | "version": "0.2.0", 5 | "license": "MIT", 6 | "main": "dist/vue-grid-styled.common.js", 7 | "module": "dist/vue-grid-styled.esm.js", 8 | "unpkg": "dist/vue-grid-styled.js", 9 | "jsdelivr": "dist/vue-grid-styled.js", 10 | "files": [ 11 | "src", 12 | "dist/*.js" 13 | ], 14 | "author": "Matt Rothenberg ", 15 | "repository": { 16 | "type": "git", 17 | "url": "https://github.com/mattrothenberg/vue-grid-styled.git" 18 | }, 19 | "bugs": { 20 | "url": "https://github.com/mattrothenberg/vue-grid-styled/issues" 21 | }, 22 | "homepage": "https://github.com/mattrothenberg/vue-grid-styled#readme", 23 | "keywords": [ 24 | "vue", 25 | "vue-component", 26 | "vue-library" 27 | ], 28 | "engines": { 29 | "node": ">=8.9.0" 30 | }, 31 | "scripts": { 32 | "build": "npm run build:cjs && npm run build:es && npm run build:umd:dev && npm run build:umd:prod", 33 | "build:cjs": "rollup -c --environment TARGET:cjs", 34 | "build:es": "rollup -c --environment TARGET:esm", 35 | "build:umd:dev": "rollup -c --environment TARGET:umd-dev", 36 | "build:umd:prod": "rollup -c --environment TARGET:umd-prod", 37 | "storybook": "start-storybook -p 9001 -c .storybook", 38 | "storybook:build": "build-storybook -c .storybook -o docs/dist/stories", 39 | "precommit": "lint-staged", 40 | "cz": "git-cz", 41 | "commitmsg": "commitlint -e $GIT_PARAMS", 42 | "lint": "eslint --ext .js,.vue .", 43 | "lint:fix": "eslint --ext .js,.vue . --fix", 44 | "prepublishOnly": "npm run build" 45 | }, 46 | "devDependencies": { 47 | "@commitlint/cli": "^6.0.2", 48 | "@commitlint/config-conventional": "^5.2.3", 49 | "@storybook/vue": "^3.3.3", 50 | "babel-core": "^6.26.0", 51 | "babel-eslint": "^8.1.2", 52 | "babel-plugin-dynamic-import-node": "^1.2.0", 53 | "babel-plugin-module-resolver": "^3.0.0", 54 | "babel-preset-vue-app": "^2.0.0", 55 | "commitizen": "^2.9.6", 56 | "cz-conventional-changelog": "^2.1.0", 57 | "eslint": "^4.14.0", 58 | "eslint-config-prettier": "^2.9.0", 59 | "eslint-import-resolver-babel-module": "^4.0.0", 60 | "eslint-plugin-html": "^4.0.1", 61 | "eslint-plugin-import": "^2.8.0", 62 | "eslint-plugin-prettier": "2.4.0", 63 | "eslint-plugin-vue": "^4.0.1", 64 | "husky": "^0.14.3", 65 | "lint-staged": "^6.0.0", 66 | "lodash": "^4.17.4", 67 | "prettier": "^1.9.2", 68 | "rollup": "^0.54.0", 69 | "rollup-plugin-babel": "^3.0.3", 70 | "rollup-plugin-commonjs": "^8.2.6", 71 | "rollup-plugin-filesize": "^1.5.0", 72 | "rollup-plugin-json": "^2.3.0", 73 | "rollup-plugin-license": "^0.5.0", 74 | "rollup-plugin-node-resolve": "^3.0.0", 75 | "rollup-plugin-replace": "^2.0.0", 76 | "rollup-plugin-uglify": "^2.0.1", 77 | "rollup-plugin-vue": "^3.0.0", 78 | "uglify-es": "^3.3.4", 79 | "vue": "^2.5.13", 80 | "vue-loader": "^13.6.2", 81 | "vue-storybook": "^0.4.0", 82 | "vue-template-compiler": "^2.5.13" 83 | }, 84 | "config": { 85 | "commitizen": { 86 | "path": "cz-conventional-changelog" 87 | } 88 | }, 89 | "lint-staged": { 90 | "*.{js,vue}": [ 91 | "eslint --fix", 92 | "git add" 93 | ] 94 | }, 95 | "dependencies": { 96 | "styled-system": "^2.2.5", 97 | "vue-styled-components": "^1.2.3" 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import { camelCase } from "lodash"; 2 | import path from "path"; 3 | import babel from "rollup-plugin-babel"; 4 | import commonjs from "rollup-plugin-commonjs"; 5 | import filesize from "rollup-plugin-filesize"; 6 | import json from "rollup-plugin-json"; 7 | import license from "rollup-plugin-license"; 8 | import resolve from "rollup-plugin-node-resolve"; 9 | import replace from "rollup-plugin-replace"; 10 | import uglify from "rollup-plugin-uglify"; 11 | import vue from "rollup-plugin-vue"; 12 | import { minify } from "uglify-es"; 13 | 14 | import pack from "./package.json"; 15 | 16 | const projectName = "vue-grid-styled"; 17 | 18 | // compute globals from dependencies 19 | const globals = 20 | pack.dependencies && 21 | Object.assign( 22 | {}, 23 | ...Object.keys(pack.dependencies).map(key => ({ 24 | [key]: camelCase(key) 25 | })) 26 | ); 27 | 28 | const builds = { 29 | // (CommonJS). Used by bundlers e.g. Webpack & Browserify 30 | cjs: { 31 | entry: "src/index.js", 32 | dest: `dist/${projectName}.common.js`, 33 | format: "cjs" 34 | }, 35 | // (ES Modules). Used by bundlers that support ES Modules, 36 | // e.g. Rollup & Webpack 2 37 | esm: { 38 | entry: "src/index.js", 39 | dest: `dist/${projectName}.esm.js`, 40 | format: "es" 41 | }, 42 | // build (Browser) 43 | "umd-dev": { 44 | entry: "src/index.umd.js", 45 | dest: `dist/${projectName}.js`, 46 | format: "umd", 47 | env: "development" 48 | }, 49 | // production build (Browser) 50 | "umd-prod": { 51 | entry: "src/index.umd.js", 52 | dest: `dist/${projectName}.min.js`, 53 | format: "umd", 54 | env: "production" 55 | } 56 | }; 57 | 58 | function genConfig(name) { 59 | const isUmd = ["umd-dev", "umd-prod"].includes(name); 60 | const external = isUmd 61 | ? null 62 | : id => pack.dependencies && pack.dependencies[id]; 63 | const opts = builds[name]; 64 | const config = { 65 | input: opts.entry, 66 | external, 67 | plugins: [ 68 | resolve({ 69 | browser: true, 70 | jsnext: true, 71 | preferBuiltins: false, 72 | extensions: [".js", ".json", ".vue"] 73 | }), 74 | commonjs(), 75 | vue({ compileTemplate: true, css: true }), 76 | json(), 77 | babel({ 78 | exclude: "node_modules/**", 79 | runtimeHelpers: true 80 | }), 81 | filesize() 82 | ].concat(opts.plugins || []), 83 | output: { 84 | exports: "named", 85 | file: opts.dest, 86 | format: opts.format, 87 | // define globals in window from external dependencies 88 | globals, 89 | name: opts.moduleName || projectName 90 | } 91 | }; 92 | 93 | if (opts.env) { 94 | config.plugins.push( 95 | replace({ 96 | "process.env.NODE_ENV": JSON.stringify(opts.env) 97 | }) 98 | ); 99 | 100 | // minify on production targets 101 | if (opts.env === "production") { 102 | config.plugins.push(uglify({}, minify)); 103 | } 104 | } 105 | 106 | // output a license to builds 107 | config.plugins.push( 108 | license({ 109 | sourceMap: true, 110 | banner: { 111 | file: path.resolve("LICENSE.md") 112 | } 113 | }) 114 | ); 115 | 116 | Object.defineProperty(config, "_name", { 117 | enumerable: false, 118 | value: name 119 | }); 120 | 121 | return config; 122 | } 123 | 124 | const target = process.env.TARGET || "umd-prod"; 125 | module.exports = genConfig(target); 126 | -------------------------------------------------------------------------------- /src/components/Box.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/Flex.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/styles/index.js: -------------------------------------------------------------------------------- 1 | import styled from "vue-styled-components"; 2 | import { 3 | space, 4 | width, 5 | flex, 6 | color, 7 | fontSize, 8 | order, 9 | alignSelf, 10 | flexWrap, 11 | flexDirection, 12 | alignItems, 13 | justifyContent, 14 | maxWidth 15 | } from "styled-system"; 16 | 17 | const boxStyles = props => [ 18 | width(props), 19 | space(props), 20 | fontSize(props), 21 | color(props), 22 | flex(props), 23 | order(props), 24 | alignSelf(props), 25 | maxWidth(props) 26 | ]; 27 | 28 | const flexStyles = props => [ 29 | flexWrap(props), 30 | flexDirection(props), 31 | alignItems(props), 32 | justifyContent(props) 33 | ]; 34 | 35 | const Box = (props, theme) => { 36 | const tag = props.tag ? props.tag : "div"; 37 | const themedProps = Object.assign({}, props, { theme }); 38 | return styled(tag)( 39 | [], 40 | { boxSizing: "border-box" }, 41 | ...boxStyles(themedProps) 42 | ); 43 | }; 44 | 45 | const Flex = (props, theme) => 46 | styled("div")( 47 | [], 48 | { display: "flex" }, 49 | ...boxStyles(props, theme), 50 | ...flexStyles(props) 51 | ); 52 | 53 | export { Box, Flex }; 54 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Box from "./components/Box"; 2 | import Flex from "./components/Flex"; 3 | const isEmpty = val => val == null || !(Object.keys(val) || val).length; 4 | 5 | const VueGridStyled = { 6 | Box, 7 | Flex, 8 | install(Vue, options) { 9 | Vue.component("v-box", Box); 10 | Vue.component("v-flex", Flex); 11 | if (!isEmpty(options) && options.hasOwnProperty("theme")) { 12 | /* eslint-disable */ 13 | Vue.prototype.$vgsTheme = options.theme; 14 | } 15 | } 16 | }; 17 | 18 | // Export library 19 | export default VueGridStyled; 20 | 21 | // Export components 22 | export { Box, Flex }; 23 | -------------------------------------------------------------------------------- /src/index.umd.js: -------------------------------------------------------------------------------- 1 | import VueGridStyled, * as LibraryComponents from "./index"; 2 | 3 | // Automatically register components if Vue is available globally 4 | if (typeof window !== "undefined" && window.Vue) { 5 | window.Vue.use(VueGridStyled); 6 | } 7 | 8 | export default LibraryComponents; 9 | -------------------------------------------------------------------------------- /stories/grid.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 1/2 5 | 6 | 7 | 1/2 8 | 9 | 10 | 1/3 11 | 12 | 13 | 1/3 14 | 15 | 16 | 1/3 17 | 18 | 19 | 1/4 20 | 21 | 22 | 1/4 23 | 24 | 25 | 1/4 26 | 27 | 28 | 1/4 29 | 30 | 31 | 32 | 33 | 34 | 35 | Responsive Widths 45 | Fixed Pixel Width (256px) 46 | Em-based Width (40em) 47 | 48 | 49 | 50 | 51 | 52 | :p="2" 53 | :pt="2" 54 | :pb="2" 55 | :pl="2" 56 | :pr="2" 57 | :px="2" 58 | :py="2" 59 | 60 | 61 | 62 | 63 | 64 | :m="4" 65 | :mt="4" 66 | :mb="4" 67 | :ml="4" 68 | :mr="4" 69 | :mx="4" 70 | :my="4" 71 | 72 | -------------------------------------------------------------------------------- /stories/index.stories.js: -------------------------------------------------------------------------------- 1 | import { storiesOf } from "@storybook/vue"; 2 | import { registerStories } from "vue-storybook"; 3 | 4 | const req = require.context("./", true, /\.vue$/); 5 | 6 | function loadStories() { 7 | req.keys().forEach(filename => { 8 | registerStories(req, filename, storiesOf, {}); 9 | }); 10 | } 11 | 12 | loadStories(); 13 | --------------------------------------------------------------------------------