├── lib
    ├── styles
    │   ├── main.scss
    │   └── _flex.scss
    ├── components
    │   ├── index.js
    │   ├── FlexCol.js
    │   ├── FlexRow.js
    │   └── Flex.js
    └── index.js
├── .gitignore
├── .editorconfig
├── CHANGELOG.md
├── dist
    ├── vue-flex.css
    ├── vue-flex.js
    ├── vue-flex.esm.js
    ├── vue-flex.common.js
    ├── vue-flex.js.map
    ├── vue-flex.esm.js.map
    └── vue-flex.common.js.map
├── package.json
├── rollup.config.js
└── README.md


/lib/styles/main.scss:
--------------------------------------------------------------------------------
1 | @import "flex";
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .*
3 | !.gitignore
4 | !.editorconfig
5 | !.babelrc
6 | !.eslintrc
7 | !.eslintrc.json
8 | 


--------------------------------------------------------------------------------
/lib/components/index.js:
--------------------------------------------------------------------------------
1 | export { default as Flex } from "./Flex";
2 | export { default as FlexRow } from "./FlexRow";
3 | export { default as FlexCol } from "./FlexCol";
4 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
 1 | import * as components from "./components";
 2 | import "./styles/main.scss";
 3 | 
 4 | export default {
 5 | 	install(Vue) {
 6 | 		for (const component in components) {
 7 | 			if (Object.hasOwnProperty.call(components, component)) {
 8 | 				Vue.component(component, components[component]);
 9 | 			}
10 | 		}
11 | 	},
12 | 	name: "vue-flex",
13 | };
14 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | # Unix-style newlines with a newline ending every file
 7 | [*]
 8 | charset = utf-8
 9 | end_of_line = lf
10 | insert_final_newline = true
11 | trim_trailing_whitespace = true
12 | indent_style = tab
13 | indent_size = 2
14 | max_line_length = 80
15 | 


--------------------------------------------------------------------------------
/lib/components/FlexCol.js:
--------------------------------------------------------------------------------
 1 | import { mergeData } from "vue-functional-data-merge";
 2 | import Flex from "./Flex";
 3 | 
 4 | export default {
 5 | 	functional: true,
 6 | 	inheritAttrs: false,
 7 | 	render(h, { props, data, children }) {
 8 | 		return h(
 9 | 			Flex,
10 | 			mergeData(data, {
11 | 				props: {
12 | 					column: true,
13 | 				},
14 | 			}),
15 | 			children
16 | 		);
17 | 	},
18 | };
19 | 


--------------------------------------------------------------------------------
/lib/components/FlexRow.js:
--------------------------------------------------------------------------------
 1 | import { mergeData } from "vue-functional-data-merge";
 2 | import Flex from "./Flex";
 3 | 
 4 | export default {
 5 | 	functional: true,
 6 | 	inheritAttrs: false,
 7 | 	render(h, { props, data, children }) {
 8 | 		return h(
 9 | 			Flex,
10 | 			mergeData(data, {
11 | 				props: {
12 | 					column: false,
13 | 				},
14 | 			}),
15 | 			children
16 | 		);
17 | 	},
18 | };
19 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | # Change Log
 2 | 
 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 4 | 
 5 | <a name="2.1.2"></a>
 6 | ## [2.1.2](https://github.com/alexsasharegan/vue-flex/compare/v2.1.1...v2.1.2) (2018-09-07)
 7 | 
 8 | 
 9 | 
10 | <a name="2.1.1"></a>
11 | ## [2.1.1](https://github.com/alexsasharegan/vue-flex/compare/v2.1.0...v2.1.1) (2018-09-07)
12 | 
13 | 
14 | 
15 | <a name="2.1.0"></a>
16 | # [2.1.0](https://github.com/alexsasharegan/vue-flex/compare/v2.0.5...v2.1.0) (2018-02-01)
17 | 
18 | 
19 | ### Features
20 | 
21 | * update all the things ([b079eaa](https://github.com/alexsasharegan/vue-flex/commit/b079eaa))
22 | 
23 | 
24 | 
25 | <a name="2.0.5"></a>
26 | ## [2.0.5](https://github.com/alexsasharegan/vue-flex/compare/v2.0.4...v2.0.5) (2017-12-15)
27 | 
28 | 
29 | ### Bug Fixes
30 | 
31 | * **Flex:** typo fixed to properly use `props.grow` ([e832230](https://github.com/alexsasharegan/vue-flex/commit/e832230))
32 | 


--------------------------------------------------------------------------------
/dist/vue-flex.css:
--------------------------------------------------------------------------------
1 | .vf__flex{display:flex}.vf__flex--inline{display:inline-flex}.vf__flex-dir--row{flex-direction:row}.vf__flex-dir--column{flex-direction:column}.vf__flex-dir--row-reverse{flex-direction:row-reverse}.vf__flex-dir--column-reverse{flex-direction:column-reverse}.vf__flex-wrap{flex-wrap:wrap}.vf__flex-nowrap{flex-wrap:nowrap}.vf__flex-wrap-reverse{flex-wrap:wrap-reverse}.vf__justify-content-start{justify-content:flex-start}.vf__justify-content-end{justify-content:flex-end}.vf__justify-content-center{justify-content:center}.vf__justify-content-between{justify-content:space-between}.vf__justify-content-around{justify-content:space-around}.vf__align-items-start{align-items:flex-start}.vf__align-items-end{align-items:flex-end}.vf__align-items-center{align-items:center}.vf__align-items-baseline{align-items:baseline}.vf__align-items-stretch{align-items:stretch}.vf__align-content-start{align-content:flex-start}.vf__align-content-end{align-content:flex-end}.vf__align-content-center{align-content:center}.vf__align-content-between{align-content:space-between}.vf__align-content-around{align-content:space-around}.vf__align-content-stretch{align-content:stretch}.vf__align-self-auto{align-self:auto}.vf__align-self-start{align-self:flex-start}.vf__align-self-end{align-self:flex-end}.vf__align-self-center{align-self:center}.vf__align-self-baseline{align-self:baseline}.vf__align-self-stretch{align-self:stretch}.vf__grow-children>*{flex-grow:1;flex-shrink:1;flex-basis:0}


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-flex",
 3 |   "version": "2.1.2",
 4 |   "description": "A reusable flexbox component using functional css.",
 5 |   "main": "dist/vue-flex.js",
 6 |   "module": "dist/vue-flex.esm.js",
 7 |   "directories": {
 8 |     "lib": "lib"
 9 |   },
10 |   "scripts": {
11 |     "build": "rollup -c ./rollup.config.js",
12 |     "calc-size": "gzip -c dist/vue-flex.esm.js | wc -c && gzip -c dist/vue-flex.css | wc -c",
13 |     "prerelease": "npm run build",
14 |     "release": "standard-version",
15 |     "postrelease": "git push --follow-tags origin master && npm publish",
16 |     "test": "echo \"Error: no test specified\" && exit 1"
17 |   },
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/alexsasharegan/vue-flex.git"
21 |   },
22 |   "keywords": [
23 |     "flex",
24 |     "flexbox",
25 |     "vue",
26 |     "vuejs",
27 |     "css",
28 |     "scss"
29 |   ],
30 |   "author": "Alex Regan <alex.joseph.regan@gmail.com> (https://github.com/alexsasharegan)",
31 |   "license": "ISC",
32 |   "bugs": {
33 |     "url": "https://github.com/alexsasharegan/vue-flex/issues"
34 |   },
35 |   "homepage": "https://github.com/alexsasharegan/vue-flex#readme",
36 |   "devDependencies": {
37 |     "autoprefixer": "^9.1.5",
38 |     "clean-css": "^4.2.1",
39 |     "lodash": "^4.17.10",
40 |     "node-sass": "^4.9.3",
41 |     "postcss": "^7.0.2",
42 |     "rollup": "^0.65.2",
43 |     "rollup-plugin-buble": "^0.19.2",
44 |     "rollup-plugin-commonjs": "^9.1.6",
45 |     "rollup-plugin-node-resolve": "^3.4.0",
46 |     "rollup-plugin-scss": "^0.4.0",
47 |     "rollup-plugin-terser": "^2.0.2",
48 |     "rollup-plugin-vue": "^4.3.2",
49 |     "standard-version": "^4.4.0",
50 |     "vue": "^2.5.17",
51 |     "vue-template-compiler": "^2.5.17"
52 |   },
53 |   "dependencies": {
54 |     "vue-functional-data-merge": "^2.0.7"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | const fs = require("fs");
 2 | const path = require("path");
 3 | const vue = require("rollup-plugin-vue").default;
 4 | const buble = require("rollup-plugin-buble");
 5 | const resolve = require("rollup-plugin-node-resolve");
 6 | const commonjs = require("rollup-plugin-commonjs");
 7 | const scss = require("rollup-plugin-scss");
 8 | const postcss = require("postcss");
 9 | const autoprefixer = require("autoprefixer");
10 | const { terser } = require("rollup-plugin-terser");
11 | const CleanCSS = require("clean-css");
12 | const { camelCase } = require("lodash");
13 | const { name} = require("./package.json");
14 | 
15 | const base = __dirname;
16 | const src = path.resolve(base, "lib");
17 | const dist = path.resolve(base, "dist");
18 | 
19 | // Ensure dist directory exists
20 | if (!fs.existsSync(dist)) {
21 | 	fs.mkdirSync(dist);
22 | }
23 | 
24 | module.exports = {
25 | 	input: path.resolve(src, "index.js"),
26 | 	plugins: [
27 | 		vue(),
28 | 		scss({
29 | 			// Processor will be called with two arguments:
30 | 			// - style: the compiled css
31 | 			// - id: import id
32 | 			processor(css) {
33 | 				return postcss([autoprefixer])
34 | 					.process(css)
35 | 					.then(result => result.css);
36 | 			},
37 | 			// - styles: the contents of all style tags combined: 'body { color: green }'
38 | 			// - styleNodes: an array of style objects: { filename: 'body { ... }' }
39 | 			output(styles, styleNodes) {
40 | 				postcss([autoprefixer])
41 | 					.process(styles)
42 | 					.then(({ css }) => {
43 | 						fs.writeFileSync(
44 | 							`./dist/${name}.css`,
45 | 							new CleanCSS().minify(css).styles
46 | 						);
47 | 					});
48 | 			},
49 | 		}),
50 | 		buble({
51 | 			objectAssign: "Object.assign",
52 | 		}),
53 | 		resolve({ external: ["vue"] }),
54 | 		commonjs(),
55 | 		terser(),
56 | 	],
57 | 	output: [
58 | 		{
59 | 			format: "cjs",
60 | 			name: camelCase(name),
61 | 			file: `./dist/${name}.common.js`,
62 | 			sourcemap: true,
63 | 		},
64 | 		{
65 | 			format: "es",
66 | 			file: `./dist/${name}.esm.js`,
67 | 			sourcemap: true,
68 | 		},
69 | 		{
70 | 			format: "umd",
71 | 			name: camelCase(name),
72 | 			file: `./dist/${name}.js`,
73 | 			sourcemap: true,
74 | 		},
75 | 	],
76 | };
77 | 


--------------------------------------------------------------------------------
/lib/styles/_flex.scss:
--------------------------------------------------------------------------------
  1 | .vf__flex {
  2 | 	display: flex;
  3 | }
  4 | 
  5 | .vf__flex--inline {
  6 | 	display: inline-flex;
  7 | }
  8 | 
  9 | .vf__flex-dir--row {
 10 | 	flex-direction: row;
 11 | }
 12 | 
 13 | .vf__flex-dir--column {
 14 | 	flex-direction: column;
 15 | }
 16 | 
 17 | .vf__flex-dir--row-reverse {
 18 | 	flex-direction: row-reverse;
 19 | }
 20 | 
 21 | .vf__flex-dir--column-reverse {
 22 | 	flex-direction: column-reverse;
 23 | }
 24 | 
 25 | .vf__flex-wrap {
 26 | 	flex-wrap: wrap;
 27 | }
 28 | 
 29 | .vf__flex-nowrap {
 30 | 	flex-wrap: nowrap;
 31 | }
 32 | 
 33 | .vf__flex-wrap-reverse {
 34 | 	flex-wrap: wrap-reverse;
 35 | }
 36 | 
 37 | .vf__justify-content-start {
 38 | 	justify-content: flex-start;
 39 | }
 40 | 
 41 | .vf__justify-content-end {
 42 | 	justify-content: flex-end;
 43 | }
 44 | 
 45 | .vf__justify-content-center {
 46 | 	justify-content: center;
 47 | }
 48 | 
 49 | .vf__justify-content-between {
 50 | 	justify-content: space-between;
 51 | }
 52 | 
 53 | .vf__justify-content-around {
 54 | 	justify-content: space-around;
 55 | }
 56 | 
 57 | .vf__align-items-start {
 58 | 	align-items: flex-start;
 59 | }
 60 | 
 61 | .vf__align-items-end {
 62 | 	align-items: flex-end;
 63 | }
 64 | 
 65 | .vf__align-items-center {
 66 | 	align-items: center;
 67 | }
 68 | 
 69 | .vf__align-items-baseline {
 70 | 	align-items: baseline;
 71 | }
 72 | 
 73 | .vf__align-items-stretch {
 74 | 	align-items: stretch;
 75 | }
 76 | 
 77 | .vf__align-content-start {
 78 | 	align-content: flex-start;
 79 | }
 80 | 
 81 | .vf__align-content-end {
 82 | 	align-content: flex-end;
 83 | }
 84 | 
 85 | .vf__align-content-center {
 86 | 	align-content: center;
 87 | }
 88 | 
 89 | .vf__align-content-between {
 90 | 	align-content: space-between;
 91 | }
 92 | 
 93 | .vf__align-content-around {
 94 | 	align-content: space-around;
 95 | }
 96 | 
 97 | .vf__align-content-stretch {
 98 | 	align-content: stretch;
 99 | }
100 | 
101 | .vf__align-self-auto {
102 | 	align-self: auto;
103 | }
104 | 
105 | .vf__align-self-start {
106 | 	align-self: flex-start;
107 | }
108 | 
109 | .vf__align-self-end {
110 | 	align-self: flex-end;
111 | }
112 | 
113 | .vf__align-self-center {
114 | 	align-self: center;
115 | }
116 | 
117 | .vf__align-self-baseline {
118 | 	align-self: baseline;
119 | }
120 | 
121 | .vf__align-self-stretch {
122 | 	align-self: stretch;
123 | }
124 | 
125 | .vf__grow-children > * {
126 | 	flex-grow: 1;
127 | 	flex-shrink: 1;
128 | 	flex-basis: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/lib/components/Flex.js:
--------------------------------------------------------------------------------
 1 | import { mergeData } from "vue-functional-data-merge";
 2 | 
 3 | const Shared = ["start", "end", "center"];
 4 | const JustifyContent = Shared.concat(["between", "around"]);
 5 | const AlignItems = Shared.concat(["baseline", "stretch"]);
 6 | const AlignAxes = Shared.concat(["between", "baseline", "stretch"]);
 7 | 
 8 | function boolPropFactory() {
 9 | 	const props = {};
10 | 	for (let i = 0, len = arguments.length; i < len; i++) {
11 | 		props[arguments[i]] = { type: Boolean, default: false };
12 | 	}
13 | 	return props;
14 | }
15 | 
16 | export const props = Object.assign(
17 | 	boolPropFactory(
18 | 		"inline",
19 | 		"column",
20 | 		"reverse",
21 | 		"noWrap",
22 | 		"wrapReverse",
23 | 		"grow"
24 | 	),
25 | 	{
26 | 		tag: {
27 | 			type: String,
28 | 			default: "div",
29 | 		},
30 | 		justify: {
31 | 			type: String,
32 | 			default: null,
33 | 			validator: type => JustifyContent.indexOf(type) !== -1,
34 | 		},
35 | 		align: {
36 | 			type: String,
37 | 			default: null,
38 | 			validator: type => AlignItems.indexOf(type) !== -1,
39 | 		},
40 | 		// Cannot prefix with `v` because it's parsed as directive.
41 | 		alignH: {
42 | 			type: String,
43 | 			default: null,
44 | 			validator: type => AlignAxes.indexOf(type) !== -1,
45 | 		},
46 | 		// Cannot prefix with `v` because it's parsed as directive.
47 | 		alignV: {
48 | 			type: String,
49 | 			default: null,
50 | 			validator: type => AlignAxes.indexOf(type) !== -1,
51 | 		},
52 | 	}
53 | );
54 | 
55 | export default {
56 | 	functional: true,
57 | 	props,
58 | 	render(h, { props, data, children }) {
59 | 		let componentData = { class: [] };
60 | 		let classObj = {};
61 | 		let hAxis = "justify-content",
62 | 			hProp = "justify",
63 | 			vAxis = "align-items",
64 | 			vProp = "align";
65 | 
66 | 		if (props.column) {
67 | 			hAxis = "align-items";
68 | 			hProp = "align";
69 | 			vAxis = "justify-content";
70 | 			vProp = "justify";
71 | 		}
72 | 
73 | 		componentData.class.push(`vf__flex${props.inline ? "--inline" : ""}`);
74 | 		componentData.class.push(
75 | 			`vf__flex-dir--${props.column ? "column" : "row"}${
76 | 				props.reverse ? "-reverse" : ""
77 | 			}`
78 | 		);
79 | 		componentData.class.push(classObj);
80 | 
81 | 		classObj[
82 | 			`vf__flex-wrap${props.wrapReverse ? "-reverse" : ""}`
83 | 		] = !props.noWrap;
84 | 		classObj[`vf__flex-nowrap`] = props.noWrap;
85 | 		classObj[`vf__grow-children`] = props.grow;
86 | 		classObj[`vf__justify-content-${props.justify}`] = props.justify;
87 | 		classObj[`vf__align-items-${props.align}`] = props.align;
88 | 		classObj[`vf__${hAxis}-${props.alignH}`] = props.alignH && !props[hProp];
89 | 		classObj[`vf__${vAxis}-${props.alignV}`] = props.alignV && !props[vProp];
90 | 
91 | 		return h(props.tag, mergeData(data, componentData), children);
92 | 	},
93 | };
94 | 


--------------------------------------------------------------------------------
/dist/vue-flex.js:
--------------------------------------------------------------------------------
1 | !function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.vueFlex=n()}(this,function(){"use strict";var e=function(){return(e=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function n(){for(var n,t,r=arguments,a={},i=arguments.length;i--;)for(var s=0,o=Object.keys(arguments[i]);s<o.length;s++)switch(n=o[s]){case"class":case"style":case"directives":Array.isArray(a[n])||(a[n]=[]),a[n]=a[n].concat(r[i][n]);break;case"staticClass":if(!r[i][n])break;void 0===a[n]&&(a[n]=""),a[n]&&(a[n]+=" "),a[n]+=r[i][n].trim();break;case"on":case"nativeOn":a[n]||(a[n]={});for(var l=0,c=Object.keys(arguments[i][n]||{});l<c.length;l++)t=c[l],a[n][t]?a[n][t]=[].concat(a[n][t],r[i][n][t]):a[n][t]=r[i][n][t];break;case"attrs":case"props":case"domProps":case"scopedSlots":case"staticStyle":case"hook":case"transition":a[n]||(a[n]={}),a[n]=e({},r[i][n],a[n]);break;case"slot":case"key":case"ref":case"tag":case"show":case"keepAlive":default:a[n]||(a[n]=r[i][n])}return a}var t=["start","end","center"],r=t.concat(["between","around"]),a=t.concat(["baseline","stretch"]),i=t.concat(["between","baseline","stretch"]);var s={functional:!0,props:Object.assign(function(){for(var e=arguments,n={},t=0,r=arguments.length;t<r;t++)n[e[t]]={type:Boolean,default:!1};return n}("inline","column","reverse","noWrap","wrapReverse","grow"),{tag:{type:String,default:"div"},justify:{type:String,default:null,validator:function(e){return-1!==r.indexOf(e)}},align:{type:String,default:null,validator:function(e){return-1!==a.indexOf(e)}},alignH:{type:String,default:null,validator:function(e){return-1!==i.indexOf(e)}},alignV:{type:String,default:null,validator:function(e){return-1!==i.indexOf(e)}}}),render:function(e,t){var r=t.props,a=t.data,i=t.children,s={class:[]},o={},l="justify-content",c="justify",f="align-items",u="align";return r.column&&(l="align-items",c="align",f="justify-content",u="justify"),s.class.push("vf__flex"+(r.inline?"--inline":"")),s.class.push("vf__flex-dir--"+(r.column?"column":"row")+(r.reverse?"-reverse":"")),s.class.push(o),o["vf__flex-wrap"+(r.wrapReverse?"-reverse":"")]=!r.noWrap,o["vf__flex-nowrap"]=r.noWrap,o["vf__grow-children"]=r.grow,o["vf__justify-content-"+r.justify]=r.justify,o["vf__align-items-"+r.align]=r.align,o["vf__"+l+"-"+r.alignH]=r.alignH&&!r[c],o["vf__"+f+"-"+r.alignV]=r.alignV&&!r[u],e(r.tag,n(a,s),i)}},o={functional:!0,inheritAttrs:!1,render:function(e,t){t.props;var r=t.data,a=t.children;return e(s,n(r,{props:{column:!1}}),a)}},l={functional:!0,inheritAttrs:!1,render:function(e,t){t.props;var r=t.data,a=t.children;return e(s,n(r,{props:{column:!0}}),a)}},c=Object.freeze({Flex:s,FlexRow:o,FlexCol:l});return{install:function(e){for(var n in c)Object.hasOwnProperty.call(c,n)&&e.component(n,c[n])},name:"vue-flex"}});
2 | //# sourceMappingURL=vue-flex.js.map
3 | 


--------------------------------------------------------------------------------
/dist/vue-flex.esm.js:
--------------------------------------------------------------------------------
1 | var __assign=function(){return(__assign=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e}).apply(this,arguments)};function mergeData(){for(var e,n,t=arguments,a={},r=arguments.length;r--;)for(var s=0,i=Object.keys(arguments[r]);s<i.length;s++)switch(e=i[s]){case"class":case"style":case"directives":Array.isArray(a[e])||(a[e]=[]),a[e]=a[e].concat(t[r][e]);break;case"staticClass":if(!t[r][e])break;void 0===a[e]&&(a[e]=""),a[e]&&(a[e]+=" "),a[e]+=t[r][e].trim();break;case"on":case"nativeOn":a[e]||(a[e]={});for(var l=0,o=Object.keys(arguments[r][e]||{});l<o.length;l++)n=o[l],a[e][n]?a[e][n]=[].concat(a[e][n],t[r][e][n]):a[e][n]=t[r][e][n];break;case"attrs":case"props":case"domProps":case"scopedSlots":case"staticStyle":case"hook":case"transition":a[e]||(a[e]={}),a[e]=__assign({},t[r][e],a[e]);break;case"slot":case"key":case"ref":case"tag":case"show":case"keepAlive":default:a[e]||(a[e]=t[r][e])}return a}var Shared=["start","end","center"],JustifyContent=Shared.concat(["between","around"]),AlignItems=Shared.concat(["baseline","stretch"]),AlignAxes=Shared.concat(["between","baseline","stretch"]);function boolPropFactory(){for(var e=arguments,n={},t=0,a=arguments.length;t<a;t++)n[e[t]]={type:Boolean,default:!1};return n}var props=Object.assign(boolPropFactory("inline","column","reverse","noWrap","wrapReverse","grow"),{tag:{type:String,default:"div"},justify:{type:String,default:null,validator:function(e){return-1!==JustifyContent.indexOf(e)}},align:{type:String,default:null,validator:function(e){return-1!==AlignItems.indexOf(e)}},alignH:{type:String,default:null,validator:function(e){return-1!==AlignAxes.indexOf(e)}},alignV:{type:String,default:null,validator:function(e){return-1!==AlignAxes.indexOf(e)}}}),Flex={functional:!0,props:props,render:function(e,n){var t=n.props,a=n.data,r=n.children,s={class:[]},i={},l="justify-content",o="justify",c="align-items",f="align";return t.column&&(l="align-items",o="align",c="justify-content",f="justify"),s.class.push("vf__flex"+(t.inline?"--inline":"")),s.class.push("vf__flex-dir--"+(t.column?"column":"row")+(t.reverse?"-reverse":"")),s.class.push(i),i["vf__flex-wrap"+(t.wrapReverse?"-reverse":"")]=!t.noWrap,i["vf__flex-nowrap"]=t.noWrap,i["vf__grow-children"]=t.grow,i["vf__justify-content-"+t.justify]=t.justify,i["vf__align-items-"+t.align]=t.align,i["vf__"+l+"-"+t.alignH]=t.alignH&&!t[o],i["vf__"+c+"-"+t.alignV]=t.alignV&&!t[f],e(t.tag,mergeData(a,s),r)}},FlexRow={functional:!0,inheritAttrs:!1,render:function(e,n){n.props;var t=n.data,a=n.children;return e(Flex,mergeData(t,{props:{column:!1}}),a)}},FlexCol={functional:!0,inheritAttrs:!1,render:function(e,n){n.props;var t=n.data,a=n.children;return e(Flex,mergeData(t,{props:{column:!0}}),a)}},components=Object.freeze({Flex:Flex,FlexRow:FlexRow,FlexCol:FlexCol}),index={install:function(e){for(var n in components)Object.hasOwnProperty.call(components,n)&&e.component(n,components[n])},name:"vue-flex"};export default index;
2 | //# sourceMappingURL=vue-flex.esm.js.map
3 | 


--------------------------------------------------------------------------------
/dist/vue-flex.common.js:
--------------------------------------------------------------------------------
1 | "use strict";var __assign=function(){return(__assign=Object.assign||function(e){for(var n,t=1,r=arguments.length;t<r;t++)for(var a in n=arguments[t])Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a]);return e}).apply(this,arguments)};function mergeData(){for(var e,n,t=arguments,r={},a=arguments.length;a--;)for(var s=0,i=Object.keys(arguments[a]);s<i.length;s++)switch(e=i[s]){case"class":case"style":case"directives":Array.isArray(r[e])||(r[e]=[]),r[e]=r[e].concat(t[a][e]);break;case"staticClass":if(!t[a][e])break;void 0===r[e]&&(r[e]=""),r[e]&&(r[e]+=" "),r[e]+=t[a][e].trim();break;case"on":case"nativeOn":r[e]||(r[e]={});for(var o=0,l=Object.keys(arguments[a][e]||{});o<l.length;o++)n=l[o],r[e][n]?r[e][n]=[].concat(r[e][n],t[a][e][n]):r[e][n]=t[a][e][n];break;case"attrs":case"props":case"domProps":case"scopedSlots":case"staticStyle":case"hook":case"transition":r[e]||(r[e]={}),r[e]=__assign({},t[a][e],r[e]);break;case"slot":case"key":case"ref":case"tag":case"show":case"keepAlive":default:r[e]||(r[e]=t[a][e])}return r}var Shared=["start","end","center"],JustifyContent=Shared.concat(["between","around"]),AlignItems=Shared.concat(["baseline","stretch"]),AlignAxes=Shared.concat(["between","baseline","stretch"]);function boolPropFactory(){for(var e=arguments,n={},t=0,r=arguments.length;t<r;t++)n[e[t]]={type:Boolean,default:!1};return n}var props=Object.assign(boolPropFactory("inline","column","reverse","noWrap","wrapReverse","grow"),{tag:{type:String,default:"div"},justify:{type:String,default:null,validator:function(e){return-1!==JustifyContent.indexOf(e)}},align:{type:String,default:null,validator:function(e){return-1!==AlignItems.indexOf(e)}},alignH:{type:String,default:null,validator:function(e){return-1!==AlignAxes.indexOf(e)}},alignV:{type:String,default:null,validator:function(e){return-1!==AlignAxes.indexOf(e)}}}),Flex={functional:!0,props:props,render:function(e,n){var t=n.props,r=n.data,a=n.children,s={class:[]},i={},o="justify-content",l="justify",c="align-items",f="align";return t.column&&(o="align-items",l="align",c="justify-content",f="justify"),s.class.push("vf__flex"+(t.inline?"--inline":"")),s.class.push("vf__flex-dir--"+(t.column?"column":"row")+(t.reverse?"-reverse":"")),s.class.push(i),i["vf__flex-wrap"+(t.wrapReverse?"-reverse":"")]=!t.noWrap,i["vf__flex-nowrap"]=t.noWrap,i["vf__grow-children"]=t.grow,i["vf__justify-content-"+t.justify]=t.justify,i["vf__align-items-"+t.align]=t.align,i["vf__"+o+"-"+t.alignH]=t.alignH&&!t[l],i["vf__"+c+"-"+t.alignV]=t.alignV&&!t[f],e(t.tag,mergeData(r,s),a)}},FlexRow={functional:!0,inheritAttrs:!1,render:function(e,n){n.props;var t=n.data,r=n.children;return e(Flex,mergeData(t,{props:{column:!1}}),r)}},FlexCol={functional:!0,inheritAttrs:!1,render:function(e,n){n.props;var t=n.data,r=n.children;return e(Flex,mergeData(t,{props:{column:!0}}),r)}},components=Object.freeze({Flex:Flex,FlexRow:FlexRow,FlexCol:FlexCol}),index={install:function(e){for(var n in components)Object.hasOwnProperty.call(components,n)&&e.component(n,components[n])},name:"vue-flex"};module.exports=index;
2 | //# sourceMappingURL=vue-flex.common.js.map
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-flex
 2 | 
 3 | [![npm version](https://badge.fury.io/js/vue-flex.svg)](https://badge.fury.io/js/vue-flex)
 4 | [![npm downloads](https://img.shields.io/npm/dt/vue-flex.svg)](https://www.npmjs.com/package/vue-flex)
 5 | [![GitHub issues](https://img.shields.io/github/issues/alexsasharegan/vue-flex.svg?style=flat)](https://github.com/alexsasharegan/vue-flex/issues)
 6 | [![GitHub stars](https://img.shields.io/github/stars/alexsasharegan/vue-flex.svg)](https://github.com/alexsasharegan/vue-flex/stargazers)
 7 | [![GitHub forks](https://img.shields.io/github/forks/alexsasharegan/vue-flex.svg)](https://github.com/alexsasharegan/vue-flex/network)
 8 | [![Twitter](https://img.shields.io/twitter/url/https/github.com/alexsasharegan/vue-flex.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Falexsasharegan%2Fvue-flex)
 9 | 
10 | A Vue.js functional component to wrap anything in flexbox. (1.8kb gzipped js+css, or 1.2k js & .6k css)
11 | 
12 | ## Getting Started
13 | 
14 | ```js
15 | import Vue from "vue";
16 | // imports the ESM module by default
17 | import VueFlex from "vue-flex";
18 | // Already autoprefixed for vendor prefixes.
19 | // Also namespaced to avoid collisions.
20 | import "vue-flex/dist/vue-flex.css";
21 | 
22 | Vue.use(VueFlex);
23 | ```
24 | 
25 | ### Dist Varieties
26 | 
27 | The main export is an es2015 module, but commonjs and umd modules are also available:
28 | 
29 | * Commonjs: `"vue-flex/dist/vue-flex.common.js"`
30 | * UMD: `"vue-flex/dist/vue-flex.js"`
31 | 
32 | ```html
33 | <main>
34 |     <my-navbar></my-navbar>
35 |     <flex-row tag="section">
36 |         <my-sidebar></my-sidebar>
37 |         <flex-col
38 |               tag="main"
39 |               align-v="center"
40 |               align-h="center"
41 |               grow
42 |               wrap
43 |               @click="handleClick"
44 |         >
45 |             <my-content></my-content>
46 |             <my-content></my-content>
47 |             <my-content></my-content>
48 |         </flex-col>
49 |     </flex-row>
50 | </main>
51 | ```
52 | 
53 | ## Component Props
54 | 
55 | |  Prop   |  Type   | Default | Description                                                               |
56 | | :-----: | :-----: | :-----: | ------------------------------------------------------------------------- |
57 | |   tag   | String  | `"div"` | Element tagName _(any valid HTML tag name)_                               |
58 | | inline  | Boolean | `false` | `display: inline-flex`                                                    |
59 | | column  | Boolean | `false` | `flex-direction: column` _(row is default)_                               |
60 | | reverse | Boolean | `false` | `flex-direction: row-reverse|column-reverse`                              |
61 | |  wrap   | Boolean | `false` | `flex-wrap: wrap`                                                         |
62 | | noWrap  | Boolean | `false` | `flex-wrap: nowrap`                                                       |
63 | |  grow   | Boolean | `false` | Applies to all child nodes: `{flex-grow:1;flex-shrink:1;flex-basis:0;}`   |
64 | | justify | String  | `null`  | One of `[ "start", "end", "center", "between", "around" ]`                |
65 | |  align  | String  | `null`  | One of `[ "start", "end", "center", "baseline", "stretch" ]`              |
66 | | alignV  | String  | `null`  | One of `[ "start", "end", "center", ["between", "baseline",] "stretch" ]` |
67 | | alignH  | String  | `null`  | One of `[ "start", "end", "center", ["between", "baseline",] "stretch" ]` |
68 | 
69 | \* `alignV` and `alignH` just use `align` & `justify` under the hood, but when using the directional flex components, they handle the confusion of which axis is vertical/horizontal.
70 | 
71 | ## v2
72 | 
73 | Version 2 brings two new components `<flex-row>` & `<flex-col>`. In general, these just wrap the column property and make your markup more declarative. I've also added `alignV` & `alignH` props to all the components. These will use `align-items` & `justify-content` to determine the correct axis to apply your settings. Remembering which axis is vertical when in column direction is a classic confusion for me, so this abstracts that into a much more declarative api.
74 | 
75 | ## Flexbox all the things!
76 | 
77 | While building a large Vue.js application, I found myself constantly repeating the usage of various CSS flexbox utility classes, so I wrapped all the classes in a simple Vue component. This worked beautifully! But for two problems:
78 | 
79 | * How do I listen for native events on the `<flex>` component? Do I really have to re-emit all the native events to enable `v-on:event`?
80 |   * _No! You can use the `.native` modifier when binding native event listeners to a custom Vue component. I find this to be a huge stumbling block for beginners because the documentation around this feature is too easy to miss. For more info:_
81 |     * [**Binding Native Events to Custom Components**](https://vuejs.org/v2/guide/components.html#Binding-Native-Events-to-Components)
82 |     * [**`v-on` modifier API reference**](https://vuejs.org/v2/api/#v-on)
83 | * How am I supposed to find anything in the Vue devtools component tree if so many of my components are wrapped in these `<flex>` tags?
84 |   * _If you have a `<ul>` with a bunch of `<flex>` wrapped `<li>`'s, it's annoying. If you use flexbox heavily, it legitimately wastes time performing a vnode scavenger hunt whenever you need to debug a particular item._
85 | 
86 | ## Functional Vue Components
87 | 
88 | Functional Vue components are a real game changer here. Not only does the modifier-less `v-on:event` syntax work again to bind to native events (when the root element of the component is an HTML Element), but functional components do not appear in Vue devtools. Beyond the debugging experience, there is a performance boost to be had as well. Functional components are stateless (no `data`) and instanceless (no `this` context). This removes the initial overhead of observation and is very beneficial when a component is likely to be rendered many times in your app (think list items in a large list).
89 | 


--------------------------------------------------------------------------------
/dist/vue-flex.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vue-flex.js","sources":["../node_modules/vue-functional-data-merge/dist/lib.esm.js","../lib/components/Flex.js","../lib/components/FlexRow.js","../lib/components/FlexCol.js","../lib/index.js"],"sourcesContent":["var __assign=function(){return(__assign=Object.assign||function(e){for(var a,s=1,t=arguments.length;s<t;s++)for(var r in a=arguments[s])Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);return e}).apply(this,arguments)};function mergeData(){for(var e,a,s={},t=arguments.length;t--;)for(var r=0,c=Object.keys(arguments[t]);r<c.length;r++)switch(e=c[r]){case\"class\":case\"style\":case\"directives\":Array.isArray(s[e])||(s[e]=[]),s[e]=s[e].concat(arguments[t][e]);break;case\"staticClass\":if(!arguments[t][e])break;void 0===s[e]&&(s[e]=\"\"),s[e]&&(s[e]+=\" \"),s[e]+=arguments[t][e].trim();break;case\"on\":case\"nativeOn\":s[e]||(s[e]={});for(var n=0,o=Object.keys(arguments[t][e]||{});n<o.length;n++)a=o[n],s[e][a]?s[e][a]=[].concat(s[e][a],arguments[t][e][a]):s[e][a]=arguments[t][e][a];break;case\"attrs\":case\"props\":case\"domProps\":case\"scopedSlots\":case\"staticStyle\":case\"hook\":case\"transition\":s[e]||(s[e]={}),s[e]=__assign({},arguments[t][e],s[e]);break;case\"slot\":case\"key\":case\"ref\":case\"tag\":case\"show\":case\"keepAlive\":default:s[e]||(s[e]=arguments[t][e])}return s}export{mergeData};\n//# sourceMappingURL=lib.esm.js.map\n","import { mergeData } from \"vue-functional-data-merge\";\n\nconst Shared = [\"start\", \"end\", \"center\"];\nconst JustifyContent = Shared.concat([\"between\", \"around\"]);\nconst AlignItems = Shared.concat([\"baseline\", \"stretch\"]);\nconst AlignAxes = Shared.concat([\"between\", \"baseline\", \"stretch\"]);\n\nfunction boolPropFactory() {\n\tconst props = {};\n\tfor (let i = 0, len = arguments.length; i < len; i++) {\n\t\tprops[arguments[i]] = { type: Boolean, default: false };\n\t}\n\treturn props;\n}\n\nexport const props = Object.assign(\n\tboolPropFactory(\n\t\t\"inline\",\n\t\t\"column\",\n\t\t\"reverse\",\n\t\t\"noWrap\",\n\t\t\"wrapReverse\",\n\t\t\"grow\"\n\t),\n\t{\n\t\ttag: {\n\t\t\ttype: String,\n\t\t\tdefault: \"div\",\n\t\t},\n\t\tjustify: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => JustifyContent.indexOf(type) !== -1,\n\t\t},\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignItems.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignH: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignV: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t}\n);\n\nexport default {\n\tfunctional: true,\n\tprops,\n\trender(h, { props, data, children }) {\n\t\tlet componentData = { class: [] };\n\t\tlet classObj = {};\n\t\tlet hAxis = \"justify-content\",\n\t\t\thProp = \"justify\",\n\t\t\tvAxis = \"align-items\",\n\t\t\tvProp = \"align\";\n\n\t\tif (props.column) {\n\t\t\thAxis = \"align-items\";\n\t\t\thProp = \"align\";\n\t\t\tvAxis = \"justify-content\";\n\t\t\tvProp = \"justify\";\n\t\t}\n\n\t\tcomponentData.class.push(`vf__flex${props.inline ? \"--inline\" : \"\"}`);\n\t\tcomponentData.class.push(\n\t\t\t`vf__flex-dir--${props.column ? \"column\" : \"row\"}${\n\t\t\t\tprops.reverse ? \"-reverse\" : \"\"\n\t\t\t}`\n\t\t);\n\t\tcomponentData.class.push(classObj);\n\n\t\tclassObj[\n\t\t\t`vf__flex-wrap${props.wrapReverse ? \"-reverse\" : \"\"}`\n\t\t] = !props.noWrap;\n\t\tclassObj[`vf__flex-nowrap`] = props.noWrap;\n\t\tclassObj[`vf__grow-children`] = props.grow;\n\t\tclassObj[`vf__justify-content-${props.justify}`] = props.justify;\n\t\tclassObj[`vf__align-items-${props.align}`] = props.align;\n\t\tclassObj[`vf__${hAxis}-${props.alignH}`] = props.alignH && !props[hProp];\n\t\tclassObj[`vf__${vAxis}-${props.alignV}`] = props.alignV && !props[vProp];\n\n\t\treturn h(props.tag, mergeData(data, componentData), children);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: false,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: true,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import * as components from \"./components\";\nimport \"./styles/main.scss\";\n\nexport default {\n\tinstall(Vue) {\n\t\tfor (const component in components) {\n\t\t\tif (Object.hasOwnProperty.call(components, component)) {\n\t\t\t\tVue.component(component, components[component]);\n\t\t\t}\n\t\t}\n\t},\n\tname: \"vue-flex\",\n};\n"],"names":["__assign","Object","assign","e","a","s","t","arguments","length","r","prototype","hasOwnProperty","call","apply","this","mergeData","c","keys","Array","isArray","concat","trim","n","o","const","Shared","JustifyContent","AlignItems","AlignAxes","functional","props","i","len","type","Boolean","default","boolPropFactory","tag","String","justify","validator","indexOf","align","alignH","alignV","render","h","ref","componentData","class","classObj","hAxis","hProp","vAxis","vProp","column","push","inline","reverse","wrapReverse","noWrap","grow","data","children","inheritAttrs","Flex","install","Vue","component","components","name"],"mappings":"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"}


--------------------------------------------------------------------------------
/dist/vue-flex.esm.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vue-flex.esm.js","sources":["../node_modules/vue-functional-data-merge/dist/lib.esm.js","../lib/components/Flex.js","../lib/components/FlexRow.js","../lib/components/FlexCol.js","../lib/index.js"],"sourcesContent":["var __assign=function(){return(__assign=Object.assign||function(e){for(var a,s=1,t=arguments.length;s<t;s++)for(var r in a=arguments[s])Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);return e}).apply(this,arguments)};function mergeData(){for(var e,a,s={},t=arguments.length;t--;)for(var r=0,c=Object.keys(arguments[t]);r<c.length;r++)switch(e=c[r]){case\"class\":case\"style\":case\"directives\":Array.isArray(s[e])||(s[e]=[]),s[e]=s[e].concat(arguments[t][e]);break;case\"staticClass\":if(!arguments[t][e])break;void 0===s[e]&&(s[e]=\"\"),s[e]&&(s[e]+=\" \"),s[e]+=arguments[t][e].trim();break;case\"on\":case\"nativeOn\":s[e]||(s[e]={});for(var n=0,o=Object.keys(arguments[t][e]||{});n<o.length;n++)a=o[n],s[e][a]?s[e][a]=[].concat(s[e][a],arguments[t][e][a]):s[e][a]=arguments[t][e][a];break;case\"attrs\":case\"props\":case\"domProps\":case\"scopedSlots\":case\"staticStyle\":case\"hook\":case\"transition\":s[e]||(s[e]={}),s[e]=__assign({},arguments[t][e],s[e]);break;case\"slot\":case\"key\":case\"ref\":case\"tag\":case\"show\":case\"keepAlive\":default:s[e]||(s[e]=arguments[t][e])}return s}export{mergeData};\n//# sourceMappingURL=lib.esm.js.map\n","import { mergeData } from \"vue-functional-data-merge\";\n\nconst Shared = [\"start\", \"end\", \"center\"];\nconst JustifyContent = Shared.concat([\"between\", \"around\"]);\nconst AlignItems = Shared.concat([\"baseline\", \"stretch\"]);\nconst AlignAxes = Shared.concat([\"between\", \"baseline\", \"stretch\"]);\n\nfunction boolPropFactory() {\n\tconst props = {};\n\tfor (let i = 0, len = arguments.length; i < len; i++) {\n\t\tprops[arguments[i]] = { type: Boolean, default: false };\n\t}\n\treturn props;\n}\n\nexport const props = Object.assign(\n\tboolPropFactory(\n\t\t\"inline\",\n\t\t\"column\",\n\t\t\"reverse\",\n\t\t\"noWrap\",\n\t\t\"wrapReverse\",\n\t\t\"grow\"\n\t),\n\t{\n\t\ttag: {\n\t\t\ttype: String,\n\t\t\tdefault: \"div\",\n\t\t},\n\t\tjustify: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => JustifyContent.indexOf(type) !== -1,\n\t\t},\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignItems.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignH: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignV: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t}\n);\n\nexport default {\n\tfunctional: true,\n\tprops,\n\trender(h, { props, data, children }) {\n\t\tlet componentData = { class: [] };\n\t\tlet classObj = {};\n\t\tlet hAxis = \"justify-content\",\n\t\t\thProp = \"justify\",\n\t\t\tvAxis = \"align-items\",\n\t\t\tvProp = \"align\";\n\n\t\tif (props.column) {\n\t\t\thAxis = \"align-items\";\n\t\t\thProp = \"align\";\n\t\t\tvAxis = \"justify-content\";\n\t\t\tvProp = \"justify\";\n\t\t}\n\n\t\tcomponentData.class.push(`vf__flex${props.inline ? \"--inline\" : \"\"}`);\n\t\tcomponentData.class.push(\n\t\t\t`vf__flex-dir--${props.column ? \"column\" : \"row\"}${\n\t\t\t\tprops.reverse ? \"-reverse\" : \"\"\n\t\t\t}`\n\t\t);\n\t\tcomponentData.class.push(classObj);\n\n\t\tclassObj[\n\t\t\t`vf__flex-wrap${props.wrapReverse ? \"-reverse\" : \"\"}`\n\t\t] = !props.noWrap;\n\t\tclassObj[`vf__flex-nowrap`] = props.noWrap;\n\t\tclassObj[`vf__grow-children`] = props.grow;\n\t\tclassObj[`vf__justify-content-${props.justify}`] = props.justify;\n\t\tclassObj[`vf__align-items-${props.align}`] = props.align;\n\t\tclassObj[`vf__${hAxis}-${props.alignH}`] = props.alignH && !props[hProp];\n\t\tclassObj[`vf__${vAxis}-${props.alignV}`] = props.alignV && !props[vProp];\n\n\t\treturn h(props.tag, mergeData(data, componentData), children);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: false,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: true,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import * as components from \"./components\";\nimport \"./styles/main.scss\";\n\nexport default {\n\tinstall(Vue) {\n\t\tfor (const component in components) {\n\t\t\tif (Object.hasOwnProperty.call(components, component)) {\n\t\t\t\tVue.component(component, components[component]);\n\t\t\t}\n\t\t}\n\t},\n\tname: \"vue-flex\",\n};\n"],"names":["__assign","Object","assign","e","a","s","t","arguments","length","r","prototype","hasOwnProperty","call","apply","this","mergeData","c","keys","Array","isArray","concat","trim","n","o","const","Shared","JustifyContent","AlignItems","AlignAxes","boolPropFactory","props","i","len","type","Boolean","default","tag","String","justify","validator","indexOf","align","alignH","alignV","functional","render","h","ref","componentData","class","classObj","hAxis","hProp","vAxis","vProp","column","push","inline","reverse","wrapReverse","noWrap","grow","data","children","inheritAttrs","Flex","install","Vue","component","components","name"],"mappings":"AAAA,IAAIA,SAAS,WAAW,OAAOA,SAASC,OAAOC,QAAQ,SAASC,GAAG,IAAI,IAAIC,EAAEC,EAAE,EAAEC,EAAEC,UAAUC,OAAOH,EAAEC,EAAED,IAAI,IAAI,IAAII,KAAKL,EAAEG,UAAUF,GAAGJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAEK,KAAKN,EAAEM,GAAGL,EAAEK,IAAI,OAAON,IAAIU,MAAMC,KAAKP,YAAY,SAASQ,YAAY,QAAQZ,EAAEC,cAAEC,EAAE,GAAGC,EAAEC,UAAUC,OAAOF,KAAK,IAAI,IAAIG,EAAE,EAAEO,EAAEf,OAAOgB,KAAKV,UAAUD,IAAIG,EAAEO,EAAER,OAAOC,IAAI,OAAON,EAAEa,EAAEP,IAAI,IAAI,QAAQ,IAAI,QAAQ,IAAI,aAAaS,MAAMC,QAAQd,EAAEF,MAAME,EAAEF,GAAG,IAAIE,EAAEF,GAAGE,EAAEF,GAAGiB,OAAOb,EAAUD,GAAGH,IAAI,MAAM,IAAI,cAAc,IAAII,EAAUD,GAAGH,GAAG,WAAM,IAASE,EAAEF,KAAKE,EAAEF,GAAG,IAAIE,EAAEF,KAAKE,EAAEF,IAAI,KAAKE,EAAEF,IAAII,EAAUD,GAAGH,GAAGkB,OAAO,MAAM,IAAI,KAAK,IAAI,WAAWhB,EAAEF,KAAKE,EAAEF,GAAG,IAAI,IAAI,IAAImB,EAAE,EAAEC,EAAEtB,OAAOgB,KAAKV,UAAUD,GAAGH,IAAI,IAAImB,EAAEC,EAAEf,OAAOc,IAAIlB,EAAEmB,EAAED,GAAGjB,EAAEF,GAAGC,GAAGC,EAAEF,GAAGC,GAAG,GAAGgB,OAAOf,EAAEF,GAAGC,GAAGG,EAAUD,GAAGH,GAAGC,IAAIC,EAAEF,GAAGC,GAAGG,EAAUD,GAAGH,GAAGC,GAAG,MAAM,IAAI,QAAQ,IAAI,QAAQ,IAAI,WAAW,IAAI,cAAc,IAAI,cAAc,IAAI,OAAO,IAAI,aAAaC,EAAEF,KAAKE,EAAEF,GAAG,IAAIE,EAAEF,GAAGH,SAAS,GAAGO,EAAUD,GAAGH,GAAGE,EAAEF,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,OAAO,IAAI,YAAY,QAAQE,EAAEF,KAAKE,EAAEF,GAAGI,EAAUD,GAAGH,IAAI,OAAOE,ECEviCmB,IAAMC,OAAS,CAAC,QAAS,MAAO,UAC1BC,eAAiBD,OAAOL,OAAO,CAAC,UAAW,WAC3CO,WAAaF,OAAOL,OAAO,CAAC,WAAY,YACxCQ,UAAYH,OAAOL,OAAO,CAAC,UAAW,WAAY,YAExD,SAASS,kBAER,oBADMC,EAAQ,GACLC,EAAI,EAAGC,EAAMzB,UAAUC,OAAQuB,EAAIC,EAAKD,IAChDD,EAAMvB,EAAUwB,IAAM,CAAEE,KAAMC,QAASC,SAAS,GAEjD,OAAOL,EAGDN,IAAMM,MAAQ7B,OAAOC,OAC3B2B,gBACC,SACA,SACA,UACA,SACA,cACA,QAED,CACCO,IAAK,CACJH,KAAMI,OACNF,QAAS,OAEVG,QAAS,CACRL,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAA0C,IAAlCP,eAAec,QAAQP,KAE3CQ,MAAO,CACNR,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAsC,IAA9BN,WAAWa,QAAQP,KAGvCS,OAAQ,CACPT,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAqC,IAA7BL,UAAUY,QAAQP,KAGtCU,OAAQ,CACPV,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAqC,IAA7BL,UAAUY,QAAQP,YAKzB,CACdW,YAAY,QACZd,MACAe,gBAAOC,EAAGC,uCACLC,EAAgB,CAAEC,MAAO,IACzBC,EAAW,GACXC,EAAQ,kBACXC,EAAQ,UACRC,EAAQ,cACRC,EAAQ,QA2BT,OAzBIxB,EAAMyB,SACTJ,EAAQ,cACRC,EAAQ,QACRC,EAAQ,kBACRC,EAAQ,WAGTN,EAAcC,MAAMO,iBAAgB1B,EAAM2B,OAAS,WAAa,KAChET,EAAcC,MAAMO,uBACF1B,EAAMyB,OAAS,SAAW,QAC1CzB,EAAM4B,QAAU,WAAa,KAG/BV,EAAcC,MAAMO,KAAKN,GAEzBA,mBACiBpB,EAAM6B,YAAc,WAAa,MAC7C7B,EAAM8B,OACXV,EAAS,mBAAqBpB,EAAM8B,OACpCV,EAAS,qBAAuBpB,EAAM+B,KACtCX,yBAAgCpB,EAAa,SAAMA,EAAMQ,QACzDY,qBAA4BpB,EAAW,OAAMA,EAAMW,MACnDS,SAAgBC,MAASrB,EAAY,QAAMA,EAAMY,SAAWZ,EAAMsB,GAClEF,SAAgBG,MAASvB,EAAY,QAAMA,EAAMa,SAAWb,EAAMwB,GAE3DR,EAAEhB,EAAMM,IAAKrB,UAAU+C,EAAMd,GAAgBe,aCvFvC,CACdnB,YAAY,EACZoB,cAAc,EACdnB,gBAAOC,EAAGC,qCACT,OAAOD,EACNmB,KACAlD,UAAU+C,EAAM,CACfhC,MAAO,CACNyB,QAAQ,KAGVQ,aCXY,CACdnB,YAAY,EACZoB,cAAc,EACdnB,gBAAOC,EAAGC,qCACT,OAAOD,EACNmB,KACAlD,UAAU+C,EAAM,CACfhC,MAAO,CACNyB,QAAQ,KAGVQ,iFCXY,CACdG,iBAAQC,GACP,IAAK3C,IAAM4C,KAAaC,WACnBpE,OAAOU,eAAeC,KAAKyD,WAAYD,IAC1CD,EAAIC,UAAUA,EAAWC,WAAWD,KAIvCE,KAAM"}


--------------------------------------------------------------------------------
/dist/vue-flex.common.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"file":"vue-flex.common.js","sources":["../node_modules/vue-functional-data-merge/dist/lib.esm.js","../lib/components/Flex.js","../lib/components/FlexRow.js","../lib/components/FlexCol.js","../lib/index.js"],"sourcesContent":["var __assign=function(){return(__assign=Object.assign||function(e){for(var a,s=1,t=arguments.length;s<t;s++)for(var r in a=arguments[s])Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r]);return e}).apply(this,arguments)};function mergeData(){for(var e,a,s={},t=arguments.length;t--;)for(var r=0,c=Object.keys(arguments[t]);r<c.length;r++)switch(e=c[r]){case\"class\":case\"style\":case\"directives\":Array.isArray(s[e])||(s[e]=[]),s[e]=s[e].concat(arguments[t][e]);break;case\"staticClass\":if(!arguments[t][e])break;void 0===s[e]&&(s[e]=\"\"),s[e]&&(s[e]+=\" \"),s[e]+=arguments[t][e].trim();break;case\"on\":case\"nativeOn\":s[e]||(s[e]={});for(var n=0,o=Object.keys(arguments[t][e]||{});n<o.length;n++)a=o[n],s[e][a]?s[e][a]=[].concat(s[e][a],arguments[t][e][a]):s[e][a]=arguments[t][e][a];break;case\"attrs\":case\"props\":case\"domProps\":case\"scopedSlots\":case\"staticStyle\":case\"hook\":case\"transition\":s[e]||(s[e]={}),s[e]=__assign({},arguments[t][e],s[e]);break;case\"slot\":case\"key\":case\"ref\":case\"tag\":case\"show\":case\"keepAlive\":default:s[e]||(s[e]=arguments[t][e])}return s}export{mergeData};\n//# sourceMappingURL=lib.esm.js.map\n","import { mergeData } from \"vue-functional-data-merge\";\n\nconst Shared = [\"start\", \"end\", \"center\"];\nconst JustifyContent = Shared.concat([\"between\", \"around\"]);\nconst AlignItems = Shared.concat([\"baseline\", \"stretch\"]);\nconst AlignAxes = Shared.concat([\"between\", \"baseline\", \"stretch\"]);\n\nfunction boolPropFactory() {\n\tconst props = {};\n\tfor (let i = 0, len = arguments.length; i < len; i++) {\n\t\tprops[arguments[i]] = { type: Boolean, default: false };\n\t}\n\treturn props;\n}\n\nexport const props = Object.assign(\n\tboolPropFactory(\n\t\t\"inline\",\n\t\t\"column\",\n\t\t\"reverse\",\n\t\t\"noWrap\",\n\t\t\"wrapReverse\",\n\t\t\"grow\"\n\t),\n\t{\n\t\ttag: {\n\t\t\ttype: String,\n\t\t\tdefault: \"div\",\n\t\t},\n\t\tjustify: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => JustifyContent.indexOf(type) !== -1,\n\t\t},\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignItems.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignH: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t\t// Cannot prefix with `v` because it's parsed as directive.\n\t\talignV: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t\tvalidator: type => AlignAxes.indexOf(type) !== -1,\n\t\t},\n\t}\n);\n\nexport default {\n\tfunctional: true,\n\tprops,\n\trender(h, { props, data, children }) {\n\t\tlet componentData = { class: [] };\n\t\tlet classObj = {};\n\t\tlet hAxis = \"justify-content\",\n\t\t\thProp = \"justify\",\n\t\t\tvAxis = \"align-items\",\n\t\t\tvProp = \"align\";\n\n\t\tif (props.column) {\n\t\t\thAxis = \"align-items\";\n\t\t\thProp = \"align\";\n\t\t\tvAxis = \"justify-content\";\n\t\t\tvProp = \"justify\";\n\t\t}\n\n\t\tcomponentData.class.push(`vf__flex${props.inline ? \"--inline\" : \"\"}`);\n\t\tcomponentData.class.push(\n\t\t\t`vf__flex-dir--${props.column ? \"column\" : \"row\"}${\n\t\t\t\tprops.reverse ? \"-reverse\" : \"\"\n\t\t\t}`\n\t\t);\n\t\tcomponentData.class.push(classObj);\n\n\t\tclassObj[\n\t\t\t`vf__flex-wrap${props.wrapReverse ? \"-reverse\" : \"\"}`\n\t\t] = !props.noWrap;\n\t\tclassObj[`vf__flex-nowrap`] = props.noWrap;\n\t\tclassObj[`vf__grow-children`] = props.grow;\n\t\tclassObj[`vf__justify-content-${props.justify}`] = props.justify;\n\t\tclassObj[`vf__align-items-${props.align}`] = props.align;\n\t\tclassObj[`vf__${hAxis}-${props.alignH}`] = props.alignH && !props[hProp];\n\t\tclassObj[`vf__${vAxis}-${props.alignV}`] = props.alignV && !props[vProp];\n\n\t\treturn h(props.tag, mergeData(data, componentData), children);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: false,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import { mergeData } from \"vue-functional-data-merge\";\nimport Flex from \"./Flex\";\n\nexport default {\n\tfunctional: true,\n\tinheritAttrs: false,\n\trender(h, { props, data, children }) {\n\t\treturn h(\n\t\t\tFlex,\n\t\t\tmergeData(data, {\n\t\t\t\tprops: {\n\t\t\t\t\tcolumn: true,\n\t\t\t\t},\n\t\t\t}),\n\t\t\tchildren\n\t\t);\n\t},\n};\n","import * as components from \"./components\";\nimport \"./styles/main.scss\";\n\nexport default {\n\tinstall(Vue) {\n\t\tfor (const component in components) {\n\t\t\tif (Object.hasOwnProperty.call(components, component)) {\n\t\t\t\tVue.component(component, components[component]);\n\t\t\t}\n\t\t}\n\t},\n\tname: \"vue-flex\",\n};\n"],"names":["__assign","Object","assign","e","a","s","t","arguments","length","r","prototype","hasOwnProperty","call","apply","this","mergeData","c","keys","Array","isArray","concat","trim","n","o","const","Shared","JustifyContent","AlignItems","AlignAxes","boolPropFactory","props","i","len","type","Boolean","default","tag","String","justify","validator","indexOf","align","alignH","alignV","functional","render","h","ref","componentData","class","classObj","hAxis","hProp","vAxis","vProp","column","push","inline","reverse","wrapReverse","noWrap","grow","data","children","inheritAttrs","Flex","install","Vue","component","components","name"],"mappings":"aAAA,IAAIA,SAAS,WAAW,OAAOA,SAASC,OAAOC,QAAQ,SAASC,GAAG,IAAI,IAAIC,EAAEC,EAAE,EAAEC,EAAEC,UAAUC,OAAOH,EAAEC,EAAED,IAAI,IAAI,IAAII,KAAKL,EAAEG,UAAUF,GAAGJ,OAAOS,UAAUC,eAAeC,KAAKR,EAAEK,KAAKN,EAAEM,GAAGL,EAAEK,IAAI,OAAON,IAAIU,MAAMC,KAAKP,YAAY,SAASQ,YAAY,QAAQZ,EAAEC,cAAEC,EAAE,GAAGC,EAAEC,UAAUC,OAAOF,KAAK,IAAI,IAAIG,EAAE,EAAEO,EAAEf,OAAOgB,KAAKV,UAAUD,IAAIG,EAAEO,EAAER,OAAOC,IAAI,OAAON,EAAEa,EAAEP,IAAI,IAAI,QAAQ,IAAI,QAAQ,IAAI,aAAaS,MAAMC,QAAQd,EAAEF,MAAME,EAAEF,GAAG,IAAIE,EAAEF,GAAGE,EAAEF,GAAGiB,OAAOb,EAAUD,GAAGH,IAAI,MAAM,IAAI,cAAc,IAAII,EAAUD,GAAGH,GAAG,WAAM,IAASE,EAAEF,KAAKE,EAAEF,GAAG,IAAIE,EAAEF,KAAKE,EAAEF,IAAI,KAAKE,EAAEF,IAAII,EAAUD,GAAGH,GAAGkB,OAAO,MAAM,IAAI,KAAK,IAAI,WAAWhB,EAAEF,KAAKE,EAAEF,GAAG,IAAI,IAAI,IAAImB,EAAE,EAAEC,EAAEtB,OAAOgB,KAAKV,UAAUD,GAAGH,IAAI,IAAImB,EAAEC,EAAEf,OAAOc,IAAIlB,EAAEmB,EAAED,GAAGjB,EAAEF,GAAGC,GAAGC,EAAEF,GAAGC,GAAG,GAAGgB,OAAOf,EAAEF,GAAGC,GAAGG,EAAUD,GAAGH,GAAGC,IAAIC,EAAEF,GAAGC,GAAGG,EAAUD,GAAGH,GAAGC,GAAG,MAAM,IAAI,QAAQ,IAAI,QAAQ,IAAI,WAAW,IAAI,cAAc,IAAI,cAAc,IAAI,OAAO,IAAI,aAAaC,EAAEF,KAAKE,EAAEF,GAAG,IAAIE,EAAEF,GAAGH,SAAS,GAAGO,EAAUD,GAAGH,GAAGE,EAAEF,IAAI,MAAM,IAAI,OAAO,IAAI,MAAM,IAAI,MAAM,IAAI,MAAM,IAAI,OAAO,IAAI,YAAY,QAAQE,EAAEF,KAAKE,EAAEF,GAAGI,EAAUD,GAAGH,IAAI,OAAOE,ECEviCmB,IAAMC,OAAS,CAAC,QAAS,MAAO,UAC1BC,eAAiBD,OAAOL,OAAO,CAAC,UAAW,WAC3CO,WAAaF,OAAOL,OAAO,CAAC,WAAY,YACxCQ,UAAYH,OAAOL,OAAO,CAAC,UAAW,WAAY,YAExD,SAASS,kBAER,oBADMC,EAAQ,GACLC,EAAI,EAAGC,EAAMzB,UAAUC,OAAQuB,EAAIC,EAAKD,IAChDD,EAAMvB,EAAUwB,IAAM,CAAEE,KAAMC,QAASC,SAAS,GAEjD,OAAOL,EAGDN,IAAMM,MAAQ7B,OAAOC,OAC3B2B,gBACC,SACA,SACA,UACA,SACA,cACA,QAED,CACCO,IAAK,CACJH,KAAMI,OACNF,QAAS,OAEVG,QAAS,CACRL,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAA0C,IAAlCP,eAAec,QAAQP,KAE3CQ,MAAO,CACNR,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAsC,IAA9BN,WAAWa,QAAQP,KAGvCS,OAAQ,CACPT,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAqC,IAA7BL,UAAUY,QAAQP,KAGtCU,OAAQ,CACPV,KAAMI,OACNF,QAAS,KACTI,mBAAWN,UAAqC,IAA7BL,UAAUY,QAAQP,YAKzB,CACdW,YAAY,QACZd,MACAe,gBAAOC,EAAGC,uCACLC,EAAgB,CAAEC,MAAO,IACzBC,EAAW,GACXC,EAAQ,kBACXC,EAAQ,UACRC,EAAQ,cACRC,EAAQ,QA2BT,OAzBIxB,EAAMyB,SACTJ,EAAQ,cACRC,EAAQ,QACRC,EAAQ,kBACRC,EAAQ,WAGTN,EAAcC,MAAMO,iBAAgB1B,EAAM2B,OAAS,WAAa,KAChET,EAAcC,MAAMO,uBACF1B,EAAMyB,OAAS,SAAW,QAC1CzB,EAAM4B,QAAU,WAAa,KAG/BV,EAAcC,MAAMO,KAAKN,GAEzBA,mBACiBpB,EAAM6B,YAAc,WAAa,MAC7C7B,EAAM8B,OACXV,EAAS,mBAAqBpB,EAAM8B,OACpCV,EAAS,qBAAuBpB,EAAM+B,KACtCX,yBAAgCpB,EAAa,SAAMA,EAAMQ,QACzDY,qBAA4BpB,EAAW,OAAMA,EAAMW,MACnDS,SAAgBC,MAASrB,EAAY,QAAMA,EAAMY,SAAWZ,EAAMsB,GAClEF,SAAgBG,MAASvB,EAAY,QAAMA,EAAMa,SAAWb,EAAMwB,GAE3DR,EAAEhB,EAAMM,IAAKrB,UAAU+C,EAAMd,GAAgBe,aCvFvC,CACdnB,YAAY,EACZoB,cAAc,EACdnB,gBAAOC,EAAGC,qCACT,OAAOD,EACNmB,KACAlD,UAAU+C,EAAM,CACfhC,MAAO,CACNyB,QAAQ,KAGVQ,aCXY,CACdnB,YAAY,EACZoB,cAAc,EACdnB,gBAAOC,EAAGC,qCACT,OAAOD,EACNmB,KACAlD,UAAU+C,EAAM,CACfhC,MAAO,CACNyB,QAAQ,KAGVQ,iFCXY,CACdG,iBAAQC,GACP,IAAK3C,IAAM4C,KAAaC,WACnBpE,OAAOU,eAAeC,KAAKyD,WAAYD,IAC1CD,EAAIC,UAAUA,EAAWC,WAAWD,KAIvCE,KAAM"}


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