vue3-drr-grid-layout

Grid layout for vue 3 with draggable, resize, responsive events

Module use source code from VueGridLayout

Rewrote to TypeScript, Composition API and migrated to Vue3

Usage

1  import { createApp } from 'vue'
2  import App from './App.vue'
3  import GridLayout from 'vue3-drr-grid-layout'
4  import 'vue3-drr-grid-layout/dist/style.css'
5
6  const app = createApp(App)
7
8  app.use(GridLayout)
9
10  app.mount('#app')

1  <template>
2    <grid-layout
3      v-model:layout="layout"
4      :col-num="12"
5      :row-height="30"
6      @resize="resize"
7      @move="move"
8      @moved="moved"
9    >
10      <template #item="{ item }">
11        {{ item.i }}
12      </template>
13    </grid-layout>
14  </template>
15  <script>
16    export default {
17      name: 'App',
18      data () {
19        return {
20          layout: [
21            { x: 0, y: 0, w: 2, h: 2, i: 0 },
22            { x: 2, y: 0, w: 2, h: 4, i: 1 },
23            { x: 4, y: 0, w: 2, h: 5, i: 2 },
24            { x: 6, y: 0, w: 2, h: 3, i: 3 },
25            { x: 8, y: 0, w: 2, h: 3, i: 4 },
26            { x: 8, y: 0, w: 2, h: 3, i: 5 },
27            { x: 0, y: 5, w: 2, h: 5, i: 6 },
28            { x: 2, y: 5, w: 2, h: 5, i: 7 },
29            { x: 4, y: 5, w: 2, h: 5, i: 8 },
30            { x: 6, y: 3, w: 2, h: 4, i: 9 }
31          ]
32        }
33      }
34    }
35  </script>

or

1  <template>
2    <grid-layout
3            v-model:layout="layout"
4            :col-num="12"
5            :row-height="30"
6    >
7      <template #default="{ gridItemProps }">
8        <!-- | gridItemProps props from GridLayout | -->
9        <!--breakpointCols: props.cols-->
10        <!--colNum: props.colNum-->
11        <!--containerWidth: width.value-->
12        <!--isDraggable: props.isDraggable-->
13        <!--isResizable: props.isResizable-->
14        <!--lastBreakpoint: lastBreakpoint.value-->
15        <!--margin: props.margin-->
16        <!--maxRows: props.maxRows-->
17        <!--responsive: props.responsive-->
18        <!--rowHeight: props.rowHeight-->
19        <!--useCssTransforms: props.useCssTransforms-->
20        <!--width: width.value-->
21        <grid-item
22          v-for="item in layout"
23          :key="item.i"
24          v-bind="gridItemProps"
25          :x="item.x"
26          :y="item.y"
27          :w="item.w"
28          :h="item.h"
29          :i="item.i"
30          @resize="resize"
31          @move="move"
32          @moved="moved"
33        >
34          {{ item.i }}
35        </grid-item>
36      </template>
37    </grid-layout>
38  </template>
39  <script>
40  export default {
41    name: 'App',
42    data () {
43      return {
44        layout: [
45          { x: 0, y: 0, w: 2, h: 2, i: 0 },
46          { x: 2, y: 0, w: 2, h: 4, i: 1 },
47          { x: 4, y: 0, w: 2, h: 5, i: 2 },
48          { x: 6, y: 0, w: 2, h: 3, i: 3 },
49          { x: 8, y: 0, w: 2, h: 3, i: 4 },
50          { x: 8, y: 0, w: 2, h: 3, i: 5 },
51          { x: 0, y: 5, w: 2, h: 5, i: 6 },
52          { x: 2, y: 5, w: 2, h: 5, i: 7 },
53          { x: 4, y: 5, w: 2, h: 5, i: 8 },
54          { x: 6, y: 3, w: 2, h: 4, i: 9 }
55        ]
56      }
57    }
58  }
59  </script>

Grid Layout Props

1//
2// Required props
3//
4// This is grid layout for not responsive pages
5layout: {
6    x: number
7    y: number
8    w: number
9    h: number
10    i: number
11    isDraggable?: boolean
12    isResizable?: boolean
13    maxH?: number
14    maxW?: number
15    minH?: number
16    minW?: number
17    moved?: boolean
18    static?: boolea
19}
20// Number of columns
21colNum: number
22
23//
24// Optional props
25//
26autoSize: boolean = true
27isDraggable: boolean = true
28isDraggable: boolean = true
29margin: [number, number] = [10, 10]
30maxRows: number = Infinity
31preventCollision: boolean = true
32rowHeight: number = 150
33useCssTransforms: boolean = true
34verticalCompact: boolean = true

Responsive grid layout props

1// To enable responsive mode, the responsive prop must be true.
2responsive: boolean = false
3// 6 display widths
4// Window witch > lg component use layout prop
5breakpoints: object = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
6// colNum by display width
7cols: object = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
8// Responsive layout is a { [keyof breakpoints]: layout }
9// { lg: layout, md: layout, sm: layout, xs: layout, xss: layout }
10responsiveLayouts: object = {}

Intersection observer grid layout props

Documentation

1// To enable intersection observer mode, the useObserver prop must be true.
2useObserver: boolean = false
3// Intersection observer config { ...propsConfig, ...defaultConfig }
4intersectionObserverConfig: object = { root: null, rootMargin: '8px', threshold: 0.40 }

Grid layout emits

• @container-resized
  • When layout container was resized

1    {
2        i: number // grid item index
3        h: number // grid item height from propss
4        w: number // grid item width from props
5        height: number // grid item height
6        width: number // grid item width
7     }

• @resize
  • Grid item resize event

1    i: number // grid item index
2    h: number // grid item height from propss
3    w: number // grid item width from props
4    newHeight: number // grid item height
5    newWidth: number // grid item width   

• @resized
  • Grid item resizeend event

1    i: number // grid item index
2    h: number // grid item height from propss
3    w: number // grid item width from props
4    newHeight: number // grid item height
5    newWidth: number // grid item width   

• @move
  • Grid item drag event

1    i: number // grid item index
2    x: number // grid item x position
3    y: number // grid item y position 

• @moved
  • Grid item dragend event

1    i: number // grid item index
2    x: number // grid item x position
3    y: number // grid item y position 

• @update:layout
  • Update layout, you can use v-model:layout="layout"

1    layout: Layout // see props

• @layout-ready
  • When layout is ready

1    layout: Layout // see props

• @update:breakpoint
  • Update breakpoints, you can use v-model:breakpoint="layout"

1    newBreakpoint: Breakpoints // see props
2    layout: Layout // see props

• Layout life cycles
  • @layout-created
  • @layout-before-mount
  • @layout-mounted

1    layout: Layout // see props

• @intersection-observe
  • When grid item appeared in the viewport

1  observeItems: number[] // grid items indexes

• @intersection-unobserve
  • When grid item is missing in the viewport

1  unobserveItems: number[] // grid items indexes