VueResponsiveGridLayout 1.2.0
Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstrap).
It's based on https://github.com/STRML/react-grid-layout
News
Now you can make both normal and responsive layout.
It works with Vuex nice as well.
And it's partly coded in Typescript.
Typescript types *.d.ts available from 1.1.6
Demo
- https://jsfiddle.net/pebwnfL8/ - simple editable demo with VueResponsiveGridLayout
Example
- Clone project.
- run
$ npm run serve
Usage
NPM
npm install vue-responsive-grid-layout
Registration
import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout'
Vue.component('vue-responsive-grid-layout', VueResponsiveGridLayout)
Vue.component('vue-grid-item', VueGridItem)
Vue.component('vue-grid-layout', VueGridLayout)
Registration as plugin
import Vue from 'vue'
import VueResponsiveGridLayout from 'vue-responsive-grid-layout'
Vue.use(VueResponsiveGridLayout)
Simple example
<template>
<VueResponsiveGridLayout
@layout-update="onLayoutUpdate"
@layout-change="onLayoutChange"
@layout-init="onLayoutInit"
@width-change="onWidthChange"
@breakpoint-change="onBreakpointChange"
:layouts="layouts"
:compactType="'vertical'"
:breakpoint="breakpoint"
:cols="cols"
ref="layout"
>
<template slot-scope="props">
<VueGridItem v-for="item in props.layout"
:i="item.i"
:w.sync="item.w"
:h.sync="item.h"
:x="item.x"
:y="item.y"
:immobile.sync="item.immobile"
:containerWidth="props.containerWidth"
:rowHeight="props.rowHeight"
:isDraggable="true"
:isResizable="true"
:className="'grid-item'"
:cols="props.cols"
:heightFromChildren="false"
:maxRows="props.maxRows"
>
<div>Test</div>
</VueGridItem>
</template>
</VueResponsiveGridLayout>
</template>
<script>
export default {
public onLayoutUpdate(layout: Layout, layouts: ResponsiveLayout, last) {
this.updateLayout({layout, breakpoint: this.breakpoint});
}
public onLayoutChange(layout: Layout, layouts: ResponsiveLayout, breakpoint: Breakpoint) {
this.updateLayout({layout, breakpoint});
}
public onLayoutInit(layout, currentLayouts, cols, breakpoint) {
this.updateCols({cols});
this.updateBreakpoint({breakpoint});
this.updateLayout({layout, breakpoint});
}
public onBreakpointChange(breakpoint: Breakpoint) {
this.updateBreakpoint({breakpoint});
}
public onWidthChange(width: number, cols: number) {
this.updateCols({cols});
}
}
</script>
API
Works with Vuex.
Vue Responsive Grid Layout uses scoped slot inside to get some props.
<slot :containerWidth="width" :layout="layout" :rowHeight="rowHeight" :cols="cols" :maxRows="maxRows">
You can use it to send containerWidth, layout, rowHeight, cols and maxRows for grid-items.
.sync
Sync modifier is used on `w` and `h` props to make them reactive for external changes,
when :heightFromChildren is set to `true`
Props VueResponsiveGridLayout
@Prop({
type: Boolean,
required: false,
})
public autoSize: boolean;
@Prop({
type: Number,
required: false,
default: 12,
})
public cols: number;
@Prop({
type: String,
required: false,
default: 'vertical',
})
public compactType: CompactType;
@Prop({
type: Array,
required: false,
default: () => [5, 5],
})
public margin: [number, number];
@Prop({
type: Array,
required: false,
default: () => [5, 5],
})
public containerPadding: [number, number] | null;
@Prop({
type: Number,
required: false,
default: 10,
})
public rowHeight: number;
@Prop({
type: Number,
required: false,
default: Infinity,
})
public maxRows: number;
@Prop({
type: Boolean,
required: false,
default: true,
})
public isDraggable: boolean;
@Prop({
type: Boolean,
required: false,
default: true,
})
public isResizable: boolean;
@Prop({
type: Boolean,
required: false,
default: false,
})
public preventCollision: boolean;
@Prop({
type: Boolean,
required: false,
default: true,
})
public useCSSTransforms: boolean;
// Responsive config
@Prop({
type: String,
required: false,
default: 'vue-responsive-grid-layout',
})
public className: string;
@Prop({
type: String,
required: false,
default: 'lg',
})
public breakpoint: Breakpoint;
@Prop({
type: Object,
required: false,
default: () => ({ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }),
})
public breakpoints: { [key: string]: number };
@Prop({
type: Object,
required: false,
default: () => ({ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }),
})
public colsAll: { [key: string]: number };
@Prop({
type: Object,
required: false,
default: () => ({}),
})
public layouts: { [key: string]: Layout };
Description
autoSize
If true, the container height swells and contracts to fit contents
notice: When you are using autoSize, margin on items and layout should be the same value.
cols
Number of cols. Default is 12.
compactType
Type of compacting layout. Default "vertical".
margin
Margin of grid-items.
containerPadding
Width of container, it is needed to calculate the width of items.
rowHeight
Height of one grid unit row for placeholder.
maxRows
Max rows in layout.
isDraggable
Items can be dragged.
isResizable
Items can be resized.
preventCollision
Preventing collisions. Makes some grid items static.
useCSSTransforms
Uses transform css property for changing positions and size.
className
Defines additional classes for grid layout. Default css class is vue-responsive-grid-layout.
breakpoint
Actual breakpoint. Default is "lg".
breakpoints
Breakpoints object which define width for breakpoints.
Default { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }.
colsAll
Defines cols for given breakpoints.
Default { lg: 12, md: 6, sm: 4, xs: 2, xxs: 1 }.
layouts
Layouts object for example:
{
"lg" : [
{ x: 0, y: 0, w: 1, h: 1, i: "1" },
{ x: 1, y: 0, w: 1, h: 1, i: "2" },
],
"md" : [
{ x: 0, y: 1, w: 1, h: 1, i: "1" },
{ x: 1, y: 1, w: 1, h: 1, i: "2" },
]
}
Events VueResponsiveGridLayout
@layout-update(layout: Layout, layouts: ResponsiveLayout, last: boolean)
@layout-change(layout: Layout, layouts: ResponsiveLayout, breakpoint: Breakpoint)
@layout-init(layout: Layout, layouts: ResponsiveLayout, cols: number, breakpoint: Breakpoint);
@width-change(width: number, cols: number)
@breakpoint-change(breakpoint: Breakpoint)
@add-child(child: Vue)
@remove-child(child: Vue)
Function on VueResponsiveGridLayout
resizeAllItems(width: number, compactType: CompactType, defaultSize = false, mode = false)
Props VueGridLayout
@Prop({
type: String,
required: false,
default: 'vue-grid-layout',
})
public className: string;
@Prop({
type: Object,
required: false,
})
public styles: object;
@Prop({
type: Boolean,
required: false,
})
public autoSize: boolean;
@Prop({
type: Number,
required: false,
default: 12,
})
public cols: number;
@Prop({
type: String,
required: false,
default: '',
})
public draggableCancel: string;
@Prop({
type: String,
required: false,
default: '',
})
public draggableHandle: string;
@Prop({
type: String,
required: false,
default: 'vertical',
})
public compactType: CompactType;
@Prop({
required: false,
validator: (value) => {
if (!value) {
return true;
}
return validateLayout(value, 'layout');
},
})
public layout: Layout;
@Prop({
type: Array,
required: false,
default: () => [5, 5],
})
public margin: [number, number];
@Prop({
type: Array,
required: false,
default: () => [5, 5],
})
public containerPadding: [number, number] | null;
@Prop({
type: Number,
required: false,
default: 10,
})
public rowHeight: number;
@Prop({
type: Number,
required: false,
default: Infinity,
})
public maxRows: number;
@Prop({
type: Boolean,
required: false,
default: true,
})
public isDraggable: boolean;
@Prop({
type: Boolean,
required: false,
default: true,
})
public isResizable: boolean;
@Prop({
type: Boolean,
required: false,
default: false,
})
public preventCollision: boolean;
@Prop({
type: Boolean,
required: false,
default: true,
})
public useCSSTransforms: boolean;
@Prop({
type: Number,
required: true,
})
public width: number;
Description
className
Defines additional classes for grid layout. Default css class is vue-grid-layout.
autoSize
If true, the container height swells and contracts to fit contents
notice: When you are using autoSize, margin on items and layout should be the same value.
cols
Number of cols. Default is 12.
compactType
Type of compacting layout. Default "vertical".
###layout Layout array.
margin
Margin of grid-items.
containerPadding
Padding of layout.
rowHeight
Height of one grid unit row for placeholder.
maxRows
Max rows in layout.
isDraggable
Items can be dragged.
isResizable
Items can be resized.
preventCollision
Preventing collisions. Makes some grid items static.
useCSSTransforms
Uses transform css property for changing positions and size.
width
Width of grid layout. Is set from inside of VueGridLayout.
Events VueGridLayout
@layout-update(layout: Layout, last: boolean)
@add-child(child: Vue)
@remove-child(child: Vue)
Props VueGridItem
@Prop({
type: Number,
required: false,
default: 12,
})
public cols: number;
@Prop({
type: Number,
required: true,
default: 0,
})
public containerWidth: number;
@Prop({
type: Number,
required: false,
default: 10,
})
public rowHeight: number;
@Prop({
type: Array,
required: false,
default: () => [10, 10],
})
public margin: number[];
@Prop({
type: Number,
required: false,
default: Infinity,
})
public maxRows: number;
@Prop({
type: Array,
required: false,
default: () => [5, 5],
})
public containerPadding: number[];
// CORDS
@Prop({
type: Number,
required: true,
})
public x: number;
@Prop({
type: Number,
required: true,
})
public y: number;
@Prop({
type: Number,
required: true,
})
public w: number;
@Prop({
type: Number,
required: true,
})
public h: number;
@Prop({
type: Number,
required: false,
default: 0,
})
public minW: number;
@Prop({
type: Number,
required: false,
default: Infinity,
})
public maxW: number;
@Prop({
type: Number,
required: false,
default: 0,
})
public minH: number;
@Prop({
type: Number,
required: false,
default: Infinity,
})
public maxH: number;
// ID
@Prop({
type: String,
required: true,
})
public i: string;
// Functions
@Prop({
type: Function,
})
public onDragStart: () => void;
@Prop({
type: Function,
})
public onDrag: () => void;
@Prop({
type: Function,
})
public onDragStop: () => void;
// Flags
@Prop({
type: Boolean,
default: false,
})
public isDraggable: boolean;
@Prop({
type: Boolean,
default: false,
})
public isResizable: boolean;
@Prop({
type: Boolean,
default: false,
})
public immobile: boolean;
@Prop({
type: Boolean,
default: true,
required: false,
})
public canBeResizedWithAll: boolean;
// Use CSS transforms instead of top/left
@Prop({
required: false,
type: Boolean,
default: true,
})
public useCSSTransforms: boolean;
@Prop({
required: false,
type: Boolean,
default: false,
})
public usePercentages: boolean;
// Others
@Prop({
required: false,
type: String,
default: 'vue-grid-item',
})
public className: string;
@Prop({
required: false,
type: String,
default: 'vue-grid-draggable-container',
})
public dragContainerClass: string;
// Selector for draggable handle
@Prop({
required: false,
type: String,
default: '',
})
public handle: string;
// Selector for draggable cancel
@Prop({
required: false,
type: String,
default: '',
})
public cancel: string;
// Child
@Prop({
type: Vue,
required: false,
})
public component: Vue;
@Prop({
type: Object,
required: false,
})
public componentProps: object;
@Prop({
type: Number,
required: false,
default: 2,
})
public defaultSize: number;
// Internal components
@Prop({
type: Object,
required: false,
})
public resizableProps: object;
@Prop({
type: Object,
required: false,
})
public draggableCoreProps: object;
@Prop({
type: Boolean,
default: true,
})
public noTouchAction: boolean;
@Prop({
type: String,
default: 'none',
})
public touchAction: string;
@Prop({
required: false,
type: Boolean,
default: false,
})
public heightFromChildren: boolean;
@Prop({
required: false,
type: Boolean,
default: false,
})
public placeholder: boolean;
Description
cols
Cols number default 12.
containerWidth
Width of container. Provided for counting of size and cords.
rowHeight
Row height. Default infinite.
margin
Margin of elements. Default [10, 10].
maxRows
Max rows in layout.
containerPadding
Padding of container. Default [5, 5].
x
X cord for item.
y
Y cord for item.
w
Width of item.
h
Height of item.
minW
Min width for item when resized.
maxW
Max width for item when resized.
minH
Min height for item when resized.
maxH
Max height for item when resized.
i
Id of item as string. Must be unique for items.
isDraggable
Enable draggable mode.
isResizable
Enable resizable mode.
immobile
Makes item static.
canBeResizedWithAll
Determinate if item can be resized with all by resizeAllItems() function.
useCSSTransforms
usePercentages
Uses percentages to count coords.
className
Class name for item. Default vue-grid-item.
dragContainerClass
Class for dragContainer in item.
handle
Selector for draggable handel.
cancel
Selector for draggable cancel.
component
Component to render inside grid item. You can use slot instead.
componentProps
Props for component inside grid item.
defaultSize
Default size of item. This size can be used to determinate size of items after resizeAllItems().
resizableProps
Props for resizable item.
draggableCoreProps
Props for draggable core item.
noTouchAction
Enable/disable touch action style after dragged.
touchAction
Touch action value after dragged.
heightFromChildren
Determinate if item should have height get from child element.
placeholder
Determinate if item is a placeholder.
License
MIT
1.4k Jan 1, 2023
33 Jan 1, 2023
27 Jul 13, 2022
6k Jan 4, 2023
139 Dec 23, 2022
42 Nov 24, 2022
0 Aug 26, 2020
25 Nov 24, 2022
4 Oct 13, 2022
2.1k Jan 1, 2023
132 Dec 6, 2022
438 Dec 20, 2022
28 Nov 24, 2022
185 Jan 4, 2023
171 Dec 29, 2022
9 Jan 2, 2020