├── .github
    ├── ISSUE_TEMPLATE.md
    ├── CONTRIBUTING.md
    └── PULL_REQUEST_TEMPLATE.md
├── .eslintignore
├── .DS_Store
├── .commitlintrc.json
├── .npmignore
├── .editorconfig
├── src
    ├── components
    │   ├── Flex.vue
    │   ├── Box.vue
    │   └── styles
    │   │   └── index.js
    ├── index.umd.js
    └── index.js
├── .babelrc
├── stories
    ├── index.stories.js
    └── grid.vue
├── .storybook
    ├── config.js
    └── webpack.config.js
├── LICENSE.md
├── .gitignore
├── .eslintrc.js
├── README.md
├── package.json
└── rollup.config.js


/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | .github/
2 | _book/
3 | docs/
4 | coverage/
5 | dist/


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mattrothenberg/vue-grid-styled/HEAD/.DS_Store


--------------------------------------------------------------------------------
/.commitlintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "@commitlint/config-conventional"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/.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


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/src/components/Flex.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Flex } from "./styles";
 3 | 
 4 | export default {
 5 |   name: "flex",
 6 |   functional: true,
 7 |   render(h, { props, children }) {
 8 |     return h(Flex(props, parent.$vgsTheme), children);
 9 |   }
10 | };
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/components/Box.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import { Box } from "./styles";
 3 | 
 4 | export default {
 5 |   name: "box",
 6 |   functional: true,
 7 |   render(h, { props, children, parent }) {
 8 |     return h(Box(props, parent.$vgsTheme), children);
 9 |   }
10 | };
11 | </script>
12 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | }


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.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 <mattrothenberg@gmail.com>
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 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/.github/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
 1 | <!--
 2 | Please make sure to read the Pull Request Guidelines:
 3 | https://github.com/mattrothenberg/vue-grid-styled/.github/CONTRIBUTING.md#pull-request-guidelines
 4 | -->
 5 | 
 6 | <!-- PULL REQUEST TEMPLATE -->
 7 | 
 8 | <!-- (Update "[ ]" to "[x]" to check a box) -->
 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 | 


--------------------------------------------------------------------------------
/.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 | }


--------------------------------------------------------------------------------
/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 `<v-box>` 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 | <Box width={256} />
 62 | ```
 63 | 
 64 | ```html
 65 | <!-- VUE: Pixel Width -->
 66 | <v-box :width="256" tag="section" />
 67 | ```
 68 | 
 69 | ```jsx
 70 | // JSX: Responsive Widths
 71 | <Box width={[1 / 2, 1 / 3, 1 / 4, 1 / 6]} />
 72 | ```
 73 | 
 74 | ```html
 75 | <!-- VUE: Responsive widths -->
 76 | <v-box
 77 |   tag="main"
 78 |   :width="[
 79 |     1/2,
 80 |     1/3,
 81 |     1/4,
 82 |     1/6
 83 |   ]"
 84 | />
 85 | ```
 86 | 
 87 | ```html
 88 | <!-- Altogther now! -->
 89 | <v-flex flexWrap="wrap" maxWidth="960px" mx="auto">
 90 |   <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
 91 |     <v-box bg="aliceblue" :py="4"/>
 92 |   </v-box>
 93 |   <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
 94 |     <v-box bg="aliceblue" :py="4"/>
 95 |   </v-box>
 96 | </v-flex>
 97 | ```
 98 | 
 99 | ## Contributing
100 | 
101 | See [CONTRIBUTING.md](.github/CONTRIBUTING.md).
102 | 


--------------------------------------------------------------------------------
/stories/grid.vue:
--------------------------------------------------------------------------------
 1 | <story name="Basic Grid">
 2 |   <v-flex flexWrap="wrap" maxWidth="960px" mx="auto">
 3 |     <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
 4 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/2</v-flex>
 5 |     </v-box>
 6 |     <v-box :width="[1, 1/2]" :px="[0, 1]" :mb="2">
 7 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/2</v-flex>
 8 |     </v-box>
 9 |     <v-box :width="[1, 1/3]" :px="[0, 1]" :mb="2">
10 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/3</v-flex>
11 |     </v-box>
12 |     <v-box :width="[1, 1/3]" :px="[0, 1]" :mb="2">
13 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/3</v-flex>
14 |     </v-box>
15 |     <v-box :width="[1, 1/3]" :px="[0, 1]" :mb="2">
16 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/3</v-flex>
17 |     </v-box>
18 |     <v-box :width="[1, 1/4]" :px="[0, 1]" :mb="2">
19 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/4</v-flex>
20 |     </v-box>
21 |     <v-box :width="[1, 1/4]" :px="[0, 1]" :mb="2">
22 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/4</v-flex>
23 |     </v-box>
24 |     <v-box :width="[1, 1/4]" :px="[0, 1]" :mb="2">
25 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/4</v-flex>
26 |     </v-box>
27 |     <v-box :width="[1, 1/4]" :px="[0, 1]" :mb="2">
28 |       <v-flex alignItems="center" justifyContent="center" bg="aliceblue" :py="4">1/4</v-flex>
29 |     </v-box>
30 |   </v-flex>
31 | </story>
32 | 
33 | <story name="Width">
34 |   <v-flex flexDirection="column">
35 |     <v-box
36 |       bg="red"
37 |       :p="3"
38 |       :mb="4"
39 |       :width="[
40 |         1/2,
41 |         1/3,
42 |         1/4,
43 |         1/6
44 |       ]">Responsive Widths</v-box>
45 |       <v-box bg="aliceblue" :p="3" :mb="4" :width="256">Fixed Pixel Width (256px)</v-box>
46 |       <v-box bg="aliceblue" :p="3" width="40em">Em-based Width (40em)</v-box>
47 |   </v-flex>
48 | </story>
49 | 
50 | <story name="Padding">
51 |   <v-flex flexDirection="column">
52 |     <v-box bg="aliceblue" :mb="4" :p="2">:p="2"</v-box>
53 |     <v-box bg="aliceblue" :mb="4" :pt="2">:pt="2"</v-box>
54 |     <v-box bg="aliceblue" :mb="4" :pb="2">:pb="2"</v-box>
55 |     <v-box bg="aliceblue" :mb="4" :pl="2">:pl="2"</v-box>
56 |     <v-box bg="aliceblue" :mb="4" :pr="2">:pr="2"</v-box>
57 |     <v-box bg="aliceblue" :mb="4" :px="2">:px="2"</v-box>
58 |     <v-box bg="aliceblue" :mb="4" :py="2">:py="2"</v-box>
59 |   </v-flex>
60 | </story>
61 | 
62 | <story name="Margin">
63 |   <v-flex flexDirection="column">
64 |     <v-box bg="aliceblue" :m="4">:m="4"</v-box>
65 |     <v-box bg="aliceblue" :mt="4">:mt="4"</v-box>
66 |     <v-box bg="aliceblue" :mb="4">:mb="4"</v-box>
67 |     <v-box bg="aliceblue" :ml="4">:ml="4"</v-box>
68 |     <v-box bg="aliceblue" :mr="4">:mr="4"</v-box>
69 |     <v-box bg="aliceblue" :mx="4">:mx="4"</v-box>
70 |     <v-box bg="aliceblue" :my="4">:my="4"</v-box>
71 |   </v-flex>
72 | </story>


--------------------------------------------------------------------------------
/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 <mattrothenberg@gmail.com>",
 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 | 


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