Customizable grid and extra attributes

[TheMaverickProgrammer]

Features added:

• emitted events for dragging now send the full payload (props) of a matching boxlayout into the callback function. I added this to know the contents of the box I was picking up and dragging as I include js meta-data in my use-cases.

Properties added:

• nogrid - if true, hides grid and respective styles. Default is false
• noplaceholder - if true hides placeholder styling. Default is false
• dynamicResize - if false, reverts the layout if either a drag-n-drop or resize result would expand the container. Also if false, forces the css to match the exact width and height of the container. Default is true
• placeholderStyle - can take in a vue css* object and apply it on the placeholder. Default is gold dashed-lines and darkens grid.
• gridStyle - grid configuration object. Default values are explained below

gridStyle is a configuration to style the container as a grid and even include smaller, mini grids inside each cell/boxlayout:

• backgroundColor - css string of container background color
• color - css string for the color of the cell-splitting lines
• thickness - css string for the thickness of the cell-splitting lines
• position - css string for the position offset of the cell-splitting lines
• innerGrid - object that provides additional configuration for the "mini grid" inside each cell

innerGrid can be configured with the following properties:

• cols - number of columns inside each cell/boxlayout
• rows - number of rows inside each cell/boxlayout
• color - css string of the color for the inner grid lines
• position - css string of the position offset for the inner grid lines
• thickness - css string of the thickness for the inner grid lines

The default object values for gridStyle object are as follows:

 {
    backgroundColor: "rgb(47, 122, 202)",
    color: "white",
    thickness: "2px",
    position: "-4px -4px, -4px -4px",
    innerGrid: {
        cols: 4,
        rows: 4,
        color: "#b0b0b0",
        position: "-2px -2px, -2px -2px",
        thickness: "1px"
    }
}

Image preview:

* vue css object example

{
  border: '2px dashed gold',
  background: 'rgba(0,0,0,0.2)',
  zIndex: '0'
}