Skip to content

Commit e2bde88

Browse files
andrelmlinsandrelmlins
committed
Creating example
1 parent 6734575 commit e2bde88

File tree

12 files changed

+370
-54
lines changed

12 files changed

+370
-54
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
node_modules
2-
dist
2+
dist
3+
build

‎.prettierrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "singleQuote": true }

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 N.A.D.A.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎docs/App.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<row :gutter="12" :columns="24">
3+
<column :xs="12" :sm="6" :lg="4">
4+
<p>teste</p>
5+
</column>
6+
<column :xs="12" :sm="6" :lg="4">
7+
<p>teste</p>
8+
</column>
9+
<column :xs="12" :sm="6" :lg="4">
10+
<p>teste</p>
11+
</column>
12+
<column :xs="12" :sm="6" :lg="4">
13+
<p>teste</p>
14+
</column>
15+
<column :xs="12" :sm="6" :lg="4">
16+
<p>teste</p>
17+
</column>
18+
<column :xs="12" :sm="6" :lg="4">
19+
<p>teste</p>
20+
</column>
21+
</row>
22+
</template>

‎docs/main.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Vue from 'vue';
2+
import { Row, Column } from '../src';
3+
import App from './App.vue';
4+
5+
Vue.component('row', Row);
6+
Vue.component('column', Column);
7+
8+
new Vue({
9+
el: '#app',
10+
render: h => h(App)
11+
});

‎package.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,22 @@
66
"module": "dist/vue-grid-responsive.esm.js",
77
"unpkg": "dist/vue-grid-responsive.min.js",
88
"scripts": {
9-
"build": "rollup -c"
9+
"build": "rollup -c",
10+
"dev": "rollup -c -w",
11+
"start": "sirv public"
1012
},
1113
"devDependencies": {
1214
"@babel/core": "^7.10.2",
1315
"@babel/preset-env": "^7.10.2",
1416
"rollup": "^2.12.0",
1517
"rollup-plugin-babel": "^4.4.0",
1618
"rollup-plugin-commonjs": "^10.1.0",
19+
"rollup-plugin-livereload": "^1.3.0",
1720
"rollup-plugin-node-resolve": "^5.2.0",
21+
"rollup-plugin-replace": "^2.2.0",
22+
"rollup-plugin-terser": "^6.1.0",
1823
"rollup-plugin-vue": "^5.1.6",
24+
"sirv-cli": "^0.4.6",
1925
"vue": "^2.6.11",
2026
"vue-template-compiler": "^2.6.11"
2127
}

‎public/index.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
7+
<title>Vue Grid Responsive</title>
8+
9+
<link rel="icon" type="image/png" href="/favicon.png" />
10+
<script defer src="/build/bundle.js"></script>
11+
</head>
12+
13+
<body>
14+
<div id="app"></div>
15+
</body>
16+
</html>

‎rollup.config.js

Lines changed: 74 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,108 @@
1-
import babel from "rollup-plugin-babel";
2-
import resolve from "rollup-plugin-node-resolve";
3-
import commonjs from "rollup-plugin-commonjs";
4-
import vue from "rollup-plugin-vue";
5-
import pkg from "./package.json";
1+
import babel from 'rollup-plugin-babel';
2+
import resolve from 'rollup-plugin-node-resolve';
3+
import commonjs from 'rollup-plugin-commonjs';
4+
import livereload from 'rollup-plugin-livereload';
5+
import { terser } from 'rollup-plugin-terser';
6+
import vue from 'rollup-plugin-vue';
7+
import replace from 'rollup-plugin-replace';
8+
import pkg from './package.json';
69

7-
export default [
10+
const app = {
11+
input: 'docs/main.js',
12+
output: {
13+
sourcemap: true,
14+
format: 'iife',
15+
name: 'app',
16+
file: 'public/build/bundle.js'
17+
},
18+
plugins: [
19+
vue(),
20+
babel({ exclude: 'node_modules/**' }),
21+
resolve({ mainFields: ['module', 'jsnext', 'main', 'browser'] }),
22+
commonjs(),
23+
serve(),
24+
livereload('public'),
25+
terser(),
26+
replace({
27+
'process.env.NODE_ENV': JSON.stringify('development'),
28+
'process.env.VUE_ENV': JSON.stringify('browser')
29+
})
30+
],
31+
watch: {
32+
clearScreen: false
33+
}
34+
};
35+
36+
const library = [
837
{
9-
input: "src/index.js",
38+
input: 'src/index.js',
1039
plugins: [
1140
vue(),
12-
babel({ exclude: "node_modules/**" }),
13-
resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
41+
babel({ exclude: 'node_modules/**' }),
42+
resolve({ mainFields: ['module', 'jsnext', 'main', 'browser'] }),
1443
commonjs()
1544
],
1645
output: {
17-
exports: "named",
18-
name: "VueGridResponsive",
46+
exports: 'named',
47+
name: 'VueGridResponsive',
1948
file: pkg.unpkg,
20-
format: "iife",
49+
format: 'iife',
2150
sourcemap: true
2251
},
2352
watch: {
24-
include: "src/**"
53+
include: 'src/**'
2554
}
2655
},
2756
{
28-
input: "./src/index.js",
57+
input: './src/index.js',
2958
plugins: [
3059
vue(),
31-
babel({ exclude: "node_modules/**" }),
32-
resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
60+
babel({ exclude: 'node_modules/**' }),
61+
resolve({ mainFields: ['module', 'jsnext', 'main', 'browser'] }),
3362
commonjs()
3463
],
3564
output: {
36-
name: "VueGridResponsive",
65+
name: 'VueGridResponsive',
3766
file: pkg.module,
38-
format: "es",
67+
format: 'es',
3968
sourcemap: true
4069
}
4170
},
4271
{
43-
input: "./src/index.js",
72+
input: './src/index.js',
4473
plugins: [
4574
vue(),
46-
babel({ exclude: "node_modules/**" }),
47-
resolve({ mainFields: ["module", "jsnext", "main", "browser"] }),
75+
babel({ exclude: 'node_modules/**' }),
76+
resolve({ mainFields: ['module', 'jsnext', 'main', 'browser'] }),
4877
commonjs()
4978
],
5079
output: {
51-
exports: "named",
52-
name: "VueGridResponsive",
80+
exports: 'named',
81+
name: 'VueGridResponsive',
5382
file: pkg.main,
54-
format: "umd",
83+
format: 'umd',
5584
sourcemap: true
5685
}
5786
}
5887
];
88+
89+
function serve() {
90+
let started = false;
91+
92+
return {
93+
writeBundle() {
94+
if (!started) {
95+
started = true;
96+
97+
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
98+
stdio: ['ignore', 'inherit', 'inherit'],
99+
shell: true
100+
});
101+
}
102+
}
103+
};
104+
}
105+
106+
const config = process.env.ROLLUP_WATCH ? app : library;
107+
108+
export default config;

‎src/Column.vue

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<script>
88
export default {
9-
name: "Column",
9+
name: 'Col',
1010
data() {
1111
let styleGeneral = this.createStyleSize();
1212
@@ -26,40 +26,37 @@ export default {
2626
sm: Number,
2727
md: Number,
2828
lg: Number,
29-
xl: Number,
30-
localColumns: {
31-
type: Number,
32-
default: 12
33-
}
29+
xl: Number
3430
},
3531
methods: {
3632
getValue(breakpoint) {
37-
if (breakpoint > this.localColumns) {
38-
breakpoint = this.localColumns;
33+
const localColumns = this.$parent.columns;
34+
if (breakpoint > localColumns) {
35+
breakpoint = localColumns;
3936
}
4037
41-
return breakpoint ? `${(breakpoint / this.localColumns) * 100}%` : false;
38+
return breakpoint ? `${(breakpoint / localColumns) * 100}%` : false;
4239
},
4340
createClassSize() {
44-
let newClass = "col-xs ";
41+
let newClass = 'col-xs ';
4542
46-
newClass += this.sm ? "col-sm " : "";
47-
newClass += this.md ? "col-md " : "";
48-
newClass += this.lg ? "col-lg " : "";
49-
newClass += this.xl ? "col-xl " : "";
43+
newClass += this.sm ? 'col-sm ' : '';
44+
newClass += this.md ? 'col-md ' : '';
45+
newClass += this.lg ? 'col-lg ' : '';
46+
newClass += this.xl ? 'col-xl ' : '';
5047
5148
return newClass;
5249
},
5350
createStyleSize() {
54-
let newStyle = "";
51+
let newStyle = '';
5552
5653
newStyle += this.xs
5754
? `--xsWidthSGR:${this.getValue(this.xs)}; `
5855
: `--xsWidthSGR:100%; `;
59-
newStyle += this.sm ? `--smWidthSGR:${this.getValue(this.sm)}; ` : "";
60-
newStyle += this.md ? `--mdWidthSGR:${this.getValue(this.md)}; ` : "";
61-
newStyle += this.lg ? `--lgWidthSGR:${this.getValue(this.lg)}; ` : "";
62-
newStyle += this.xl ? `--xlWidthSGR:${this.getValue(this.xl)}; ` : "";
56+
newStyle += this.sm ? `--smWidthSGR:${this.getValue(this.sm)}; ` : '';
57+
newStyle += this.md ? `--mdWidthSGR:${this.getValue(this.md)}; ` : '';
58+
newStyle += this.lg ? `--lgWidthSGR:${this.getValue(this.lg)}; ` : '';
59+
newStyle += this.xl ? `--xlWidthSGR:${this.getValue(this.xl)}; ` : '';
6360
6461
return newStyle;
6562
}

‎src/Row.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<script>
88
export default {
9-
name: "Row",
9+
name: 'Row',
1010
data() {
1111
return {
1212
styleGeneral: this.createGutter(this.gutter)
@@ -23,7 +23,7 @@ export default {
2323
createGutter(gutter) {
2424
return gutter
2525
? `--paddingSGR:${gutter / 2}px;--marginSGR:-${gutter / 2}px`
26-
: "--paddingSGR:0;--marginSGR:0";
26+
: '--paddingSGR:0;--marginSGR:0';
2727
}
2828
}
2929
};

0 commit comments

Comments
 (0)