+
+ {{item.i}}
+
+ +
+ + +
Row Height: Col nums:
+ Margin x: Margin y:
+
+ {{text}}
+
+ x
+
\ No newline at end of file
+
diff --git a/src/components/index.js b/src/components/index.js
index 326d702d..36816c40 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,20 +1,34 @@
-import Vue from "vue";
import GridItem from './GridItem.vue';
import GridLayout from './GridLayout.vue';
// import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
-
const VueGridLayout = {
// ResponsiveGridLayout,
GridLayout,
GridItem
}
-// module.exports = VueGridLayout;
+export function install(Vue) {
+ if (install.installed) return;
+ install.installed = true;
+ Object.keys(VueGridLayout).forEach(name => {
+ Vue.component(name, VueGridLayout[name]);
+ });
+}
+
+const plugin = {
+ install,
+};
-Object.keys(VueGridLayout).forEach(name => {
- Vue.component(name, VueGridLayout[name]);
-});
+let GlobalVue = null;
+if (typeof window !== 'undefined') {
+ GlobalVue = window.Vue;
+} else if (typeof global !== 'undefined') {
+ GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+ GlobalVue.use(plugin);
+}
export default VueGridLayout;
-export { GridLayout, GridItem };
\ No newline at end of file
+export { GridLayout, GridItem };
diff --git a/src/helpers/utils.js b/src/helpers/utils.js
index ead0b5bc..4cadea9a 100644
--- a/src/helpers/utils.js
+++ b/src/helpers/utils.js
@@ -75,9 +75,10 @@ export function collides(l1: LayoutItem, l2: LayoutItem): boolean {
* @param {Array} layout Layout.
* @param {Boolean} verticalCompact Whether or not to compact the layout
* vertically.
+ * @param {Object} minPositions
* @return {Array} Compacted Layout.
*/
-export function compact(layout: Layout, verticalCompact: Boolean): Layout {
+export function compact(layout: Layout, verticalCompact: Boolean, minPositions): Layout {
// Statics go in the compareWith array right away so items flow around them.
const compareWith = getStatics(layout);
// We go through the items by row and column.
@@ -90,7 +91,7 @@ export function compact(layout: Layout, verticalCompact: Boolean): Layout {
// Don't move static elements
if (!l.static) {
- l = compactItem(compareWith, l, verticalCompact);
+ l = compactItem(compareWith, l, verticalCompact, minPositions);
// Add to comparison array. We only collide with items before this one.
// Statics are already in this array.
@@ -110,12 +111,17 @@ export function compact(layout: Layout, verticalCompact: Boolean): Layout {
/**
* Compact an item in the layout.
*/
-export function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean): LayoutItem {
+export function compactItem(compareWith: Layout, l: LayoutItem, verticalCompact: boolean, minPositions): LayoutItem {
if (verticalCompact) {
// Move the element up as far as it can go without colliding.
while (l.y > 0 && !getFirstCollision(compareWith, l)) {
l.y--;
}
+ } else if (minPositions) {
+ const minY = minPositions[l.i].y;
+ while (l.y > minY && !getFirstCollision(compareWith, l)) {
+ l.y--;
+ }
}
// Move it down, and keep moving it down if it's colliding.
@@ -380,9 +386,14 @@ export function setTopRight(top, right, width, height): Object {
*/
export function sortLayoutItemsByRowCol(layout: Layout): Layout {
return [].concat(layout).sort(function(a, b) {
+ if (a.y === b.y && a.x === b.x) {
+ return 0;
+ }
+
if (a.y > b.y || (a.y === b.y && a.x > b.x)) {
return 1;
}
+
return -1;
});
}
@@ -457,6 +468,7 @@ export function synchronizeLayoutWithChildren(initialLayout: Layout, children: A
export function validateLayout(layout: Layout, contextName: string): void {
contextName = contextName || "Layout";
const subProps = ['x', 'y', 'w', 'h'];
+ let keyArr = [];
if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
for (let i = 0, len = layout.length; i < len; i++) {
const item = layout[i];
@@ -465,11 +477,20 @@ export function validateLayout(layout: Layout, contextName: string): void {
throw new Error('VueGridLayout: ' + contextName + '[' + i + '].' + subProps[j] + ' must be a number!');
}
}
- if (item.i && typeof item.i !== 'string') {
- // number is also ok, so comment the error
- // TODO confirm if commenting the line below doesn't cause unexpected problems
- // throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be a string!');
+
+ if (item.i === undefined || item.i === null) {
+ throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i cannot be null!');
}
+
+ if (typeof item.i !== 'number' && typeof item.i !== 'string') {
+ throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be a string or number!');
+ }
+
+ if (keyArr.indexOf(item.i) >= 0) {
+ throw new Error('VueGridLayout: ' + contextName + '[' + i + '].i must be unique!');
+ }
+ keyArr.push(item.i);
+
if (item.static !== undefined && typeof item.static !== 'boolean') {
throw new Error('VueGridLayout: ' + contextName + '[' + i + '].static must be a boolean!');
}
diff --git a/test/unit/GridItem.spec.js b/test/unit/GridItem.spec.js
new file mode 100644
index 00000000..562ac962
--- /dev/null
+++ b/test/unit/GridItem.spec.js
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils'
+import GridLayout from '../../src/components/GridLayout.vue'
+
+let layout
+
+describe('GridLayout test', () => {
+ beforeAll(()=>{
+ let testLayout = [{"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2}];
+ layout = JSON.parse(JSON.stringify(testLayout))
+ })
+
+ describe('Interface test', () => {
+ it('should render correct contents', () => {
+ const wrapper = shallowMount(GridLayout, {
+ propsData: {
+ layout: layout
+ }
+ })
+ const grid = wrapper.findAll('.vue-grid-layout');
+ expect(grid.selector).toEqual('.vue-grid-layout');
+ })
+ })
+})
diff --git a/test/unit/utils.spec.js b/test/unit/utils.spec.js
new file mode 100644
index 00000000..ad26733c
--- /dev/null
+++ b/test/unit/utils.spec.js
@@ -0,0 +1,313 @@
+// @flow
+/* eslint-env jest */
+
+import {
+ bottom,
+ collides,
+ compact,
+ moveElement,
+ sortLayoutItemsByRowCol,
+ validateLayout
+ } from "../../src/helpers/utils";
+
+ describe("bottom", () => {
+ it("Handles an empty layout as input", () => {
+ expect(bottom([])).toEqual(0);
+ });
+
+ it("Returns the bottom coordinate of the layout", () => {
+ expect(
+ bottom([
+ { i: "1", x: 0, y: 1, w: 1, h: 1 },
+ { i: "2", x: 1, y: 2, w: 1, h: 1 }
+ ])
+ ).toEqual(3);
+ });
+ });
+
+ describe("sortLayoutItemsByRowCol", () => {
+ it("should sort by top to bottom right", () => {
+ const layout = [
+ { x: 1, y: 1, w: 1, h: 1, i: "2" },
+ { x: 1, y: 0, w: 1, h: 1, i: "1" },
+ { x: 0, y: 1, w: 2, h: 2, i: "3" }
+ ];
+ expect(sortLayoutItemsByRowCol(layout)).toEqual([
+ { x: 1, y: 0, w: 1, h: 1, i: "1" },
+ { x: 0, y: 1, w: 2, h: 2, i: "3" },
+ { x: 1, y: 1, w: 1, h: 1, i: "2" }
+ ]);
+ });
+ });
+
+ describe("collides", () => {
+ it("Returns whether the layout items collide", () => {
+ expect(
+ collides(
+ { i: "1", x: 0, y: 1, w: 1, h: 1 },
+ { i: "2", x: 1, y: 2, w: 1, h: 1 }
+ )
+ ).toEqual(false);
+ expect(
+ collides(
+ { i: "1", x: 0, y: 1, w: 1, h: 1 },
+ { i: "2", x: 0, y: 1, w: 1, h: 1 }
+ )
+ ).toEqual(true);
+ });
+ });
+
+ describe("validateLayout", () => {
+ it("Validates an empty layout", () => {
+ validateLayout([]);
+ });
+ it("Validates a populated layout", () => {
+ validateLayout([
+ { i: "1", x: 0, y: 1, w: 1, h: 1 },
+ { i: "2", x: 1, y: 2, w: 1, h: 1 }
+ ]);
+ });
+ it("Throws errors on invalid input", () => {
+ expect(() => {
+ validateLayout([
+ { i: "1", x: 0, y: 1, w: 1, h: 1 },
+ { i: "2", x: 1, y: 2, w: 1 }
+ ]);
+ }).toThrowError(/layout\[1\]\.h must be a number!/i);
+ });
+ });
+
+ describe("moveElement", () => {
+ function compactAndMove(
+ layout,
+ layoutItem,
+ x,
+ y,
+ isUserAction,
+ preventCollision
+ ) {
+ return compact(
+ moveElement(
+ layout,
+ layoutItem,
+ x,
+ y,
+ isUserAction,
+ preventCollision
+ )
+ );
+ }
+
+ it("Does not change layout when colliding on no rearrangement mode", () => {
+ const layout = [
+ { i: "1", x: 0, y: 1, w: 1, h: 1, moved: false },
+ { i: "2", x: 1, y: 2, w: 1, h: 1, moved: false }
+ ];
+ const layoutItem = layout[0];
+ expect(
+ moveElement(
+ layout,
+ layoutItem,
+ 1,
+ 2, // x, y
+ true,
+ true // isUserAction, preventCollision
+ )
+ ).toEqual([
+ { i: "1", x: 0, y: 1, w: 1, h: 1, moved: false },
+ { i: "2", x: 1, y: 2, w: 1, h: 1, moved: false }
+ ]);
+ });
+
+ it("Does change layout when colliding in rearrangement mode", () => {
+ const layout = [
+ { i: "1", x: 0, y: 0, w: 1, h: 1, moved: false },
+ { i: "2", x: 1, y: 0, w: 1, h: 1, moved: false }
+ ];
+ const layoutItem = layout[0];
+ expect(
+ moveElement(
+ layout,
+ layoutItem,
+ 1,
+ 0, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ { i: "1", x: 1, y: 0, w: 1, h: 1, moved: true },
+ { i: "2", x: 1, y: 1, w: 1, h: 1, moved: true }
+ ]);
+ });
+
+ it("Moves elements out of the way without causing panel jumps when compaction is vertical", () => {
+ const layout = [
+ { x: 0, y: 0, w: 1, h: 10, i: "A" },
+ { x: 0, y: 10, w: 1, h: 1, i: "B" },
+ { x: 0, y: 11, w: 1, h: 1, i: "C" }
+ ];
+ // move A down slightly so it collides with C; can cause C to jump above B.
+ // We instead want B to jump above A (it has the room)
+ const itemA = layout[0];
+ expect(
+ compactAndMove(
+ layout,
+ itemA,
+ 0,
+ 1, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ expect.objectContaining({ x: 0, y: 1, w: 1, h: 10, i: "A" }),
+ expect.objectContaining({ x: 0, y: 0, w: 1, h: 1, i: "B" }),
+ expect.objectContaining({ x: 0, y: 11, w: 1, h: 1, i: "C" })
+ ]);
+ });
+
+ it("Calculates the correct collision when moving large object far", () => {
+ const layout = [
+ { x: 0, y: 0, w: 1, h: 10, i: "A" },
+ { x: 0, y: 10, w: 1, h: 1, i: "B" },
+ { x: 0, y: 11, w: 1, h: 1, i: "C" }
+ ];
+ // Move A down by 2. This should move B above, but since we don't compact in between,
+ // C should move below.
+ const itemA = layout[0];
+ expect(
+ moveElement(
+ layout,
+ itemA,
+ 0,
+ 2, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ expect.objectContaining({ x: 0, y: 2, w: 1, h: 10, i: "A" }),
+ expect.objectContaining({ x: 0, y: 1, w: 1, h: 1, i: "B" }),
+ expect.objectContaining({ x: 0, y: 12, w: 1, h: 1, i: "C" })
+ ]);
+ });
+
+ it("Moves elements out of the way without causing panel jumps when compaction is vertical", () => {
+ const layout = [
+ { x: 0, y: 0, w: 1, h: 1, i: "A" },
+ { x: 1, y: 0, w: 1, h: 1, i: "B" },
+ { x: 0, y: 1, w: 2, h: 2, i: "C" }
+ ];
+ // move A over slightly so it collides with B; can cause C to jump above B
+ // this test will check that that does not happen
+ const itemA = layout[0];
+ expect(
+ moveElement(
+ layout,
+ itemA,
+ 1,
+ 0, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ { x: 1, y: 0, w: 1, h: 1, i: "A", moved: true },
+ { x: 1, y: 1, w: 1, h: 1, i: "B", moved: true },
+ { x: 0, y: 2, w: 2, h: 2, i: "C", moved: true }
+ ]);
+ });
+
+ it("Moves one element to another should cause moving down panels, vert compact", () => {
+ // | A | B |
+ // |C| D |
+ const layout = [
+ { x: 0, y: 0, w: 2, h: 1, i: "A" },
+ { x: 2, y: 0, w: 2, h: 1, i: "B" },
+ { x: 0, y: 1, w: 1, h: 1, i: "C" },
+ { x: 1, y: 1, w: 3, h: 1, i: "D" }
+ ];
+ // move B left slightly so it collides with A; can cause C to jump above A
+ // this test will check that that does not happen
+ const itemB = layout[1];
+ expect(
+ compactAndMove(
+ layout,
+ itemB,
+ 1,
+ 0, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ expect.objectContaining({ x: 0, y: 1, w: 2, h: 1, i: "A" }),
+ expect.objectContaining({ x: 1, y: 0, w: 2, h: 1, i: "B" }),
+ expect.objectContaining({ x: 0, y: 2, w: 1, h: 1, i: "C" }),
+ expect.objectContaining({ x: 1, y: 2, w: 3, h: 1, i: "D" })
+ ]);
+ });
+
+ it("Moves one element to another should cause moving down panels, vert compact", () => {
+ // | A |
+ // |B|C|
+ // | |
+ //
+ // Moving C above A should not move B above A
+ const layout = [
+ { x: 0, y: 0, w: 2, h: 1, i: "A" },
+ { x: 0, y: 1, w: 1, h: 1, i: "B" },
+ { x: 1, y: 1, w: 1, h: 2, i: "C" }
+ ];
+ // Move C up.
+ const itemB = layout[2];
+ expect(
+ compactAndMove(
+ layout,
+ itemB,
+ 1,
+ 0, // x, y
+ true,
+ false // isUserAction, preventCollision
+ )
+ ).toEqual([
+ expect.objectContaining({ x: 0, y: 2, w: 2, h: 1, i: "A" }),
+ expect.objectContaining({ x: 0, y: 3, w: 1, h: 1, i: "B" }),
+ expect.objectContaining({ x: 1, y: 0, w: 1, h: 2, i: "C" })
+ ]);
+ });
+ });
+
+ describe("compact vertical", () => {
+ it("Removes empty vertical space above item", () => {
+ const layout = [{ i: "1", x: 0, y: 1, w: 1, h: 1 }];
+ expect(compact(layout, true)).toEqual([
+ { i: "1", x: 0, y: 0, w: 1, h: 1, moved: false }
+ ]);
+ });
+
+ it("Resolve collision by moving item further down in array", () => {
+ const layout = [
+ { x: 0, y: 0, w: 1, h: 5, i: "1" },
+ { x: 0, y: 1, w: 1, h: 1, i: "2" }
+ ];
+ expect(compact(layout, true)).toEqual([
+ { x: 0, y: 0, w: 1, h: 5, i: "1", moved: false },
+ { x: 0, y: 5, w: 1, h: 1, i: "2", moved: false }
+ ]);
+ });
+
+ it("Handles recursive collision by moving new collisions out of the way before moving item down", () => {
+ const layout = [
+ { x: 0, y: 0, w: 2, h: 5, i: "1" },
+ { x: 0, y: 0, w: 10, h: 1, i: "2" },
+ { x: 5, y: 1, w: 1, h: 1, i: "3" },
+ { x: 5, y: 2, w: 1, h: 1, i: "4" },
+ { x: 5, y: 3, w: 1, h: 1, i: "5", static: true }
+ ];
+
+ expect(compact(layout, true)).toEqual([
+ { x: 0, y: 0, w: 2, h: 5, i: "1", moved: false },
+ { x: 0, y: 5, w: 10, h: 1, i: "2", moved: false },
+ { x: 5, y: 0, w: 1, h: 1, i: "3", moved: false },
+ { x: 5, y: 1, w: 1, h: 1, i: "4", moved: false },
+ { x: 5, y: 3, w: 1, h: 1, i: "5", moved: false, static: true }
+ ]);
+ });
+ });
diff --git a/vue.config.js b/vue.config.js
index 17c313c0..59f22cbb 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,4 +1,11 @@
+// https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const webpack = require('webpack');
+const PACKAGE = require('./package.json');
+
+const banner = PACKAGE.name + ' - ' + PACKAGE.version + ' | ' +
+ '(c) 2015, ' + new Date().getFullYear() + ' ' + PACKAGE.author + ' | ' +
+ PACKAGE.homepage;
module.exports = {
configureWebpack: {
@@ -6,8 +13,10 @@ module.exports = {
library: "VueGridLayout",
libraryExport: 'default'
},
- // https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7
- // plugins: [new BundleAnalyzerPlugin()],
+ plugins: [
+ // new BundleAnalyzerPlugin(),
+ new webpack.BannerPlugin(banner)
+ ],
},
css: {
extract: false
diff --git a/website/TODOS.md b/website/TODOS.md
new file mode 100644
index 00000000..2d56732e
--- /dev/null
+++ b/website/TODOS.md
@@ -0,0 +1,9 @@
+# vue-grid-layout
+
+
+https://github.com/wearebraid/vueformulate.com/tree/master/docs
+
+
+# emit responsiveLayoutUpdatedEvent?
+
+https://github.com/jbaysolutions/vue-grid-layout/compare/master...wzquyin:master
diff --git a/website/docs/.vuepress/Autocomplete.js b/website/docs/.vuepress/Autocomplete.js
new file mode 100644
index 00000000..47320d04
--- /dev/null
+++ b/website/docs/.vuepress/Autocomplete.js
@@ -0,0 +1,15 @@
+// import MyFormulateAutocomplete from './components/MyFormulateAutocomplete'
+//
+// export default function (formulateInstance) {
+// formulateInstance.extend({
+// components: {
+// MyFormulateAutocomplete
+// },
+// library: {
+// autocomplete: {
+// classification: 'text',
+// component: 'MyFormulateAutocomplete'
+// }
+// }
+// })
+// }
diff --git a/website/docs/.vuepress/components/Example01Basic.vue b/website/docs/.vuepress/components/Example01Basic.vue
new file mode 100644
index 00000000..537b41d0
--- /dev/null
+++ b/website/docs/.vuepress/components/Example01Basic.vue
@@ -0,0 +1,132 @@
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example03MultipleGrids.vue b/website/docs/.vuepress/components/Example03MultipleGrids.vue
new file mode 100644
index 00000000..e734cb40
--- /dev/null
+++ b/website/docs/.vuepress/components/Example03MultipleGrids.vue
@@ -0,0 +1,207 @@
+
+
+
+
+ {{event}}
+
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example04AllowIgnore.vue b/website/docs/.vuepress/components/Example04AllowIgnore.vue
new file mode 100644
index 00000000..8497b955
--- /dev/null
+++ b/website/docs/.vuepress/components/Example04AllowIgnore.vue
@@ -0,0 +1,204 @@
+
+
+
+
+ {{item.i}}
+
+
+
+ Grid #1
+
+
+
+ {{item.i}}
+
+
+
+ Grid #2
+
+
+
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example05Mirrored.vue b/website/docs/.vuepress/components/Example05Mirrored.vue
new file mode 100644
index 00000000..ff14c0c5
--- /dev/null
+++ b/website/docs/.vuepress/components/Example05Mirrored.vue
@@ -0,0 +1,133 @@
+
+
+
+
+
+ Draggable
+ Resizable
+ Mirrored
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example06Responsive.vue b/website/docs/.vuepress/components/Example06Responsive.vue
new file mode 100644
index 00000000..6ea37bac
--- /dev/null
+++ b/website/docs/.vuepress/components/Example06Responsive.vue
@@ -0,0 +1,156 @@
+
+ +
+
+ Draggable + Resizable + Responsive +
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example07PreventCollision.vue b/website/docs/.vuepress/components/Example07PreventCollision.vue
new file mode 100644
index 00000000..5ce50888
--- /dev/null
+++ b/website/docs/.vuepress/components/Example07PreventCollision.vue
@@ -0,0 +1,128 @@
+
+
+ Displayed as
+ [x, y, w, h]:
+
+
+
+ {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+
+ + Draggable + Resizable + Responsive +
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue b/website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue
new file mode 100644
index 00000000..b124a51f
--- /dev/null
+++ b/website/docs/.vuepress/components/Example08ResponsivePredefinedLayouts.vue
@@ -0,0 +1,159 @@
+
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example09DynamicAddRemove.vue b/website/docs/.vuepress/components/Example09DynamicAddRemove.vue
new file mode 100644
index 00000000..89c6cb01
--- /dev/null
+++ b/website/docs/.vuepress/components/Example09DynamicAddRemove.vue
@@ -0,0 +1,168 @@
+
+
+
+
+ {{item.i}}
+ x
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example10DragFromOutside.vue b/website/docs/.vuepress/components/Example10DragFromOutside.vue
new file mode 100644
index 00000000..3fe1f2f2
--- /dev/null
+++ b/website/docs/.vuepress/components/Example10DragFromOutside.vue
@@ -0,0 +1,234 @@
+
+
+ Displayed as
+
+ Draggable
+ Resizable
+ [x, y, w, h]:
+
+
+
+ {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/Example11Bounded.vue b/website/docs/.vuepress/components/Example11Bounded.vue
new file mode 100644
index 00000000..b81d4e98
--- /dev/null
+++ b/website/docs/.vuepress/components/Example11Bounded.vue
@@ -0,0 +1,153 @@
+
+
+
+
+ Displayed as
+ [x, y, w, h]:
+
+
+
+ {{ item.i }}: [{{ item.x }}, {{ item.y }}, {{ item.w }}, {{ item.h }}]
+
+ +
Droppable Element (Drag me!)
+
+
+
+ {{ item.i }}
+
+
+
+
+
+ Draggable + Resizable + Bounded +
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/ExampleStylingGridLines.vue b/website/docs/.vuepress/components/ExampleStylingGridLines.vue
new file mode 100644
index 00000000..b78efaef
--- /dev/null
+++ b/website/docs/.vuepress/components/ExampleStylingGridLines.vue
@@ -0,0 +1,168 @@
+
+
+ Displayed as
+ [x, y, w, h]:
+
+
+
+ {{item.i}}: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
+
+ + Draggable + Resizable + Bounded +
+
+
+
+ {{item.i}}
+
+
+
+
+
+
+ {{ itemTitle(item) }}
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/ExampleStylingPlaceholder.vue b/website/docs/.vuepress/components/ExampleStylingPlaceholder.vue
new file mode 100644
index 00000000..4f29f511
--- /dev/null
+++ b/website/docs/.vuepress/components/ExampleStylingPlaceholder.vue
@@ -0,0 +1,138 @@
+
+
+
+
+ {{itemTitle(item)}}
+
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/HomeFooter.vue b/website/docs/.vuepress/components/HomeFooter.vue
new file mode 100644
index 00000000..cdac91e1
--- /dev/null
+++ b/website/docs/.vuepress/components/HomeFooter.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
diff --git a/website/docs/.vuepress/components/HomepageGrid.vue b/website/docs/.vuepress/components/HomepageGrid.vue
new file mode 100644
index 00000000..ffc69c75
--- /dev/null
+++ b/website/docs/.vuepress/components/HomepageGrid.vue
@@ -0,0 +1,217 @@
+
+
+ 
+
+
+ {{ itemTitle(item) }}
+
+
+
+ API to generate image and PDF documents
+
+
+ Get started for FREE
+
+