Vue Repsonsive Grid Layout

Overview

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

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

Comments
  • The drag start position calculates incorrectly when the grid is offset from the top of the browser window

    The drag start position calculates incorrectly when the grid is offset from the top of the browser window

    Hi,

    Thank you for creating this component -- it seems to be an almost perfect fit for something I'm trying to prototype.

    I noticed that the onDragStart handler appears to calculate the position incorrectly of the dragged outline incorrectly when the grid is offset from the top-left of the window, probably indicated by this comment:

    // TODO: this wont work on nested parents

    This would be a good thing to fix I think.

    Thanks!

    bug 
    opened by anders-rv 8
  • Question about latest version (v1.1.3) and Vue.warn about eventBus.

    Question about latest version (v1.1.3) and Vue.warn about eventBus.

    Hello,

    We are using your lib inside a project (v1.0.2) and we tried to install the latest version (v1.1.3) today. We get a strange error that I don't understand :

    [Vue warn]: Injection "eventBus" not found
    

    After the update, I can't move any block on the page, I think it's related but I've no clue on where to get started...

    Have you already encountered such issue ?

    question 
    opened by shulard 7
  • Can't render custom components

    Can't render custom components

    Hi,

    I'm having a strange problem, by where if I try to pass in a component I get the console error

    [Vue warn]: Invalid prop: type check failed for prop "component". Expected String with value "[object Object]", got Object 
    

    I'm just importing my component, then passing it in e.g.

    import { YourPoliciesCard } from '@/components'
    
    layouts: {
                xs: [
                    // row 1
                    { x: 0, y: 0, w: 1, h: 1, i: '0', component: YourPoliciesCard },
                    { x: 0, y: 1, w: 1, h: 1, i: '1', component: YourPoliciesCard },
                    { x: 0, y: 2, w: 1, h: 1, i: '2', component: YourPoliciesCard },
                    // row 2
                    { x: 0, y: 3, w: 1, h: 1, i: '3', component: YourPoliciesCard },
                    { x: 0, y: 4, w: 1, h: 1, i: '4', component: YourPoliciesCard },
                    { x: 0, y: 5, w: 1, h: 1, i: '5', component: YourPoliciesCard },
                    { x: 0, y: 6, w: 1, h: 1, i: '6', component: YourPoliciesCard },
                    { x: 0, y: 7, w: 1, h: 1, i: '7', component: YourPoliciesCard },
                ],
    }
    

    Then in the template it pulls it in

    <template slot-scope="props">
                <VueGridItem
                    v-for="item in props.layout"
                    :key="item.i"
                    :i="item.i"
                    :w.sync="item.w"
                    :h.sync="item.h"
                    :x="item.x"
                    :y="item.y"
                    :component="item.component"
                    :container-width="props.containerWidth"
                    :is-draggable="true"
                    class-name="grid-item"
                    :cols="props.cols"
                    :height-from-children="true"
                >
                    <div>
                        {{ labels[item.i] }}
                    </div>
                </VueGridItem>
            </template>
    

    --

    I've created a codesandbox of the problem so the problem is replicable -> https://codesandbox.io/s/mz51pyymj?fontsize=14

    If you run that you will see the labels displaying, however if you view the developer console you will see its erroring and preventing the loading of the custom components.

    Please could you advise how to resolve this, I'm using version 1.1.6.

    Thanks :)

    bug 
    opened by OwenMelbz 6
  • Drag to starting position does not display

    Drag to starting position does not display

    When dragging an item from a certain position, it does not allow you to put it back in the same exact position again. This seems to be by design now, however it is pretty weird. If I pick up a draggable item from the coordinates x: 1, y: 1, I would assume I can put it back on those same coordinates if I changed my mind on moving it to another position. Take a look at the GIF below, this is a clip of the demo.

    recording

    Tracked this issue down to this: https://github.com/lrembacz/vue-responsive-grid-layout/blob/b53a61a35624a0218f9d127fc3b789d96d9bf86c/src/components/VueGridLayout.vue#L344

    Removing the layout comparison fixes it.

    Also I think it would be good to highlight in the docs that position: relative is very important, to put on the direct parent of the resizable container, otherwise drag positions are not calculated properly. Like in the demo when you pick up/start dragging an item, it jumps downwards, because of the offset parent is not the direct parent but the top most parent which calculates in the navbar in the demo.

    Another unrelated thing. The demo is a bit messy. There's the whole example-component there which is not used anywhere.

    Let me know if you want me to make a PR for some of these changes, even doc wise, I can help out when I find time. All in all, thanks for the nice lib.

    bug enhancement 
    opened by emcho92 4
  • Allow resize from any corner

    Allow resize from any corner

    Sometimes when you have large content it is easy to resize it from top right corner instead of bottom right corner.

    Right bottom resizing causes some glitches with large content.

    enhancement 
    opened by robsontenorio 3
  • Vuex example

    Vuex example

    I am not sure how much differences there are compared to vue-grid-layout but you mentioned that it is possible to use with vuex. I need to have layout in store but i am having difficulties figuring out how to use it this way.

    Would it be possible to provide also vuex demo? I think it would help documentation aswell.

    Thank you so much by the way. Awesome project.

    opened by iskrisis 3
  • Resizing start position incorrect in some cases

    Resizing start position incorrect in some cases

    At initial resize, everything is OK. If you drop the box so that it has to adjust its size to fit the grid, the next time you resize the box it will offset from the mouse the previous offset.

    Demo:

    demo

    This is also seen in the demos.

    opened by Pwntus 3
  • Fix reset of layout when changing breakpoints.

    Fix reset of layout when changing breakpoints.

    It seemed like the grid would sometimes reset the layout for the breakpoint when changing browser width. This code somewhat resolves that problem.

    It would probably be good to try to merge the existing coordinates and sizes that have already been set with new additions that do not yet exist in the layout for the new breakpoint.

    enhancement 
    opened by anders-rv 3
  • Endless loop and crash after VueGridItem removal

    Endless loop and crash after VueGridItem removal

    Hello and thanks for the great libary!

    I run into a issue when using it which leads to a endless loop and a unresponsable browser tab. As I'm new to vue.js, there is a good change I just do it the wrong way however.

    The issue happens after a VueGridItem is removed during runtime and a new one is added:

    [Vue warn]: Duplicate keys detected: '1'. This may cause an update error.

    This happens regardless of that the VueGridItem have unique id's.

    Here is a jsfiddle based on the demo who shows this issue: https://jsfiddle.net/so6ch0vr/

    As a additional question: How to make a button on the VueGridItem? I could not make them clickable as the dragging starts before the button is clicked...

    Thanks for looking into this and any help!

    opened by sdennler 2
  • Few questions about this library

    Few questions about this library

    So i'm looking to switch from using vue-grid-layout over to this library (specifically for responsive handling) but also because of bundle size due to that lib using interactjs which results in a large bundle (whereas this lib uses vue-resizable-core and vue-draggable-core)

    Had a few questions I hope you would be able to answer, and then I can help to start pushing some PRs and maybe even clean up the documentation to reflect the questions as well.

    1. It seems there isn't any handling added for the wrapper vue-responsive-grid-layout element to set the height appropriately -- which results in the height being 0 for the most part. Since absolute positioning is used, may need to look at adding handling like vue-grid-layout does to automatically set the height value based on the layout https://github.com/jbaysolutions/vue-grid-layout/blob/master/src/components/GridLayout.vue#L271-L285 ... reason being, when using this lib on any site with existing content, it ends up just overlaying everything

    2. It seems that in order for the lib to work, we have to specifically add the layout-update layout-change layout-init width-change and breakpoint-change events, and then add methods to handle them. Was this done specifically by design for any apparent reason? While this is great to have for granular handling, i'm wondering if maybe it would be good to just add another prop that can define something like autoUpdate or something?

    3. It's great that we can define specific grids for specific breakpoints .. but what about when only one grid breakpoint is defined? I'm going to do some further testing on this myself but figured i would ask in the meantime. Should maybe it resort to using the one defined layout if none of the others are defined?

    Either way thanks a ton for your work on this lib, can't wait to start using it and contributing as i can đź‘Ť

    opened by tripflex 2
  • Unable to drag items since I updated to 1.1.x

    Unable to drag items since I updated to 1.1.x

    Hello,

    Since I updated from 1.0.22 version to 1.1.8, grid items doesn't drag anymore (is-draggable property on vue-grid-item is on). Items can move from their positions but I can not drop them to a new grid position.

    Do I miss something ?

    Thanks

    opened by sylvaingabert 2
  • Bump shell-quote from 1.6.1 to 1.7.3

    Bump shell-quote from 1.6.1 to 1.7.3

    Bumps shell-quote from 1.6.1 to 1.7.3.

    Release notes

    Sourced from shell-quote's releases.

    v1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    v1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    v1.7.0

    v1.6.3

    v1.6.2

    Changelog

    Sourced from shell-quote's changelog.

    1.7.3

    • Fix a security issue where the regex for windows drive letters allowed some shell meta-characters to escape the quoting rules. (CVE-2021-42740)

    1.7.2

    • Fix a regression introduced in 1.6.3. This reverts the Windows path quoting fix. (144e1c2)

    1.7.1

    • Fix $ being removed when not part of an environment variable name. (@​Adman in #32)

    1.7.0

    1.6.3

    1.6.2

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eventsource from 1.0.7 to 1.1.1

    Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 StĂ©phane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.4 to 1.5.10

    Bump url-parse from 1.4.4 to 1.5.10

    Bumps url-parse from 1.4.4 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump follow-redirects from 1.7.0 to 1.14.8

    Bump follow-redirects from 1.7.0 to 1.14.8

    Bumps follow-redirects from 1.7.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ajv from 6.9.2 to 6.12.6

    Bump ajv from 6.9.2 to 6.12.6

    Bumps ajv from 6.9.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    v6.10.2

    Fix: the unknown keywords were ignored with the option strictKeywords: true (instead of failing compilation) in some sub-schemas (e.g. anyOf), when the sub-schema didn't have known keywords.

    v6.10.1

    Fix types Fix addSchema (#1001) Update dependencies

    v6.10.0

    Option strictDefaults to report ignored defaults (#957, @​not-an-aardvark) Option strictKeywords to report unknown keywords (#781)

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
lukerem
lukerem
Layoutit grid is a CSS Grid layout generator

Layoutit grid is a CSS Grid layout generator. Quickly draw down web pages layouts with our clean editor, and get HTML and CSS code to quickstart your next project.

Leniolabs_ 1.3k Oct 4, 2022
Vue Layout System is a pack of Vue components that solve daily layout problems.

A pack of Vue components that solve daily layout problems

boyin.lee 31 Aug 20, 2022
Vue Layout System is a pack of Vue components that solve daily layout problems.

Vue Layout System is a pack of Vue components that solve daily layout problems.

boyin.lee 6 May 30, 2021
🌊 A horizontal sorting waterfall layout component for Vue.js, realized by flex layout

vue-flex-waterfall A horizontal sorting waterfall layout component for Vue.js, realized by flex layout. Refer to CSS masonry with flexbox, :nth-child(

神代綺凛 27 Jul 13, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Oct 3, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 139 Aug 3, 2022
Simple, Light-weight and Flexible Vue.js component for grid layout.

vue-grd Simple, Light-weight and Flexible Vue.js component for grid layout. Vue.js port of grd. Install npm install --save vue-grd Usage You can use <

Shogo Sensui 43 Jun 30, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout Documentation Website What is Vue Grid Layout? vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by

JBay Solutions 5.9k Sep 29, 2022
Auto responsive grid layout library for Vue.

autoresponsive-vue Auto responsive grid layout library for Vue. Examples Live demo & docs: xudafeng.github.io/autoresponsive-vue Installation $ npm i

达峰的夏天 138 Sep 30, 2022
A draggable and resizable grid layout, for Vue.js.

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

ibrahem kamal 0 Aug 26, 2020
grid layout,support flex

simple-grid a simple grid layout(Vue Component) Installation use npm $ npm i simple-xgrid --save import Grid from 'simple-xgrid' import 'simple-xgrid

zhoulin 26 May 30, 2022
vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps.

| vue-products-grid vue-products-grid is a responsive Vue component to create a products grid for ecommerce apps. Fully configurable with different op

Antonio 4 Feb 14, 2020
A waterfall layout component for Vue.js

vue-waterfall A waterfall layout component for Vue.js . Branch 0.x (version 0.x.x) is compatible with Vue 1 . Demo Vertical line Horizontal line Verti

MopTym 2k Sep 26, 2022
Default layout or create custom layouts for the pages of your Vue.js SPA (Multiple layouts)

vue-extend-layout A simple extend the default layout or create custom layouts for your SPA Vue.js, using dynamic import component. For vue-extend-layo

Alan Ktquez 134 Apr 22, 2022
Vue.js Masonry layout component powered by CSS, dependancy free

A new masonry component powered by CSS to be fast loading and free of jQuery or other dependencies. Build specifically for Vue.js projects. ?? Why? Ex

Paul Collett 433 Sep 18, 2022
A Vue plugin to quickly generate a webapplication layout.

vue-ads-layout This is a vue component library to create a default web application layout. You can create a toolbar, footer, left and right drawers. A

Arne De Smedt 29 Sep 4, 2021
A pure vue responsive masonry layout without direct dom manipulation and ssr support.

vue-masonry-wall A pure vue responsive masonry implementation without direct dom manipulation, ssr friendly with lazy appending. I created this becaus

Fuxing Loh 182 Sep 14, 2022
Golden layout integration in vue

vue-golden-layout Integration of the golden-layout to Vue Installation npm i -S vue-golden-layout Fast example <golden-layout> <gl-row> <gl-comp

null 168 Sep 19, 2022
A vue layout component to provide dynamic, reactive media query information

Vue-Breakpoint A vue layout component to provide dynamic, reactive media query information. Uses the match media api.

Alex Regan 9 Jan 2, 2020