Vue Mutable Grid Layout

Vue Mutable Grid Layout is a simple flexible and dynamic grid layout system for Vue.js, ideal for creating draggable and mutable grid layouts. Currently v1 is only functional with single slot items. Later features aim to add multi-slot items, row/col individual sizing, hover with dynamic shifting/inserting, and more.

Installation

npm install vue-mutable-grid-layout

Usage

Import GridLayout and GridModule in your Vue component:

import GridLayout from 'vue-mutable-grid-layout';

export default {
  components: {
    GridLayout
  }
  // ...rest of code
};

**A more detailed example/usage can be seen below

Props

Prop	Type	Required	Default	Description
items	Array	No	[]	Array of items to be displayed in the grid.
cols	Number	No	3	Number of columns in the grid.
rows	Number	No	2	Number of rows in the grid.
gridWidth	String, Number	No	"100%"	Width of the grid. (number is in px)
gridHeight	String, Number	No	"100%"	Height of the grid. (number is in px)
itemGap	Number	No	15	Gap between grid items.
highlightCellOnMove	Boolean	No	true	Flag to highlight cells on item move.
highlightOnMoveClass	String	No	"highlighted-cell"	Class to apply when highlighting cells.
borderRadius	Number	No	0	Border radius for grid items.
showScrollOnOverflow	Boolean	No	true	Flag to show custom scrollbars.

Items Prop ---- please read

each item will want to have either a component or a rawHTML prop passed to it.

 

Prop	Type	Required	Default	Description
component	Object	No	null	Make sure to use markRaw for your component
props	Object	No	null	If passing in a component, pass the props for it here
rawHTML	String	No	null	Option to pass in raw HTML rather than a component.

Events

Event	Description
updatedItemsList	Emitted when the list of items is updated (e.g., after a drag-and-drop).
updateItem	Emitted when a single item's position is updated.
itemDragStart	Emitted when the dragging of an item starts.
itemDragEnd	Emitted when the dragging of an item ends.

Example

Here is a simple example of how to use Vue Mutable Grid Layout:

<template>
  <GridLayout
    :items="gridItems"
    :cols="3"
    :rows="2"
    :gridWidth="1000"
    :gridHeight="800"
    showErrorToast
    :itemGap="5"
    :borderRadius="5"
    :showScroll="true"
    highlightCellOnMove
    @updatedItemsList="handleUpdateItems"
  >
    <template v-slot="{ item }">
      <div>
        <div v-if="item.id === 1" v-html="getCurrent12hrTime"></div>
      </div>
    </template>
  </GridLayout>
  <button @click="getAndSetFromStorage">SET FROM STORAGE</button>
</template>

<script>
// Import the GridLayout component
import GridLayout from 'vue-mutable-grid-layout';
import { markRaw } from 'vue';

export default {
  components: { GridLayout },
  data() {
    return {
      // Define your grid items here
      gridItems: [
        { id: 1, component: markRaw(<YourComonent>), props: {<PropsForPAssedInComponment>}, color: "red", customClass: 'my-custom-class', customStyle: { color: 'yellow', fontSize: '20px' } },
        { id: 1, rawHTML: this.returnTest(),  },
        // ... other items
      ],
    };
  },
  methods: {
    handleUpdateItems(updatedItemList) {
      // Handle the updated items list
      this.gridItems = updatedItemList;
    },
     returnTest() {
  return `
    <div style="border: 1px solid #ddd; padding: 10px; border-radius: 8px; background-color: #f9f9f9;">
      <h1 style="color: #333; text-align: center;">Welcome to Test Container</h1>
      <p style="color: #666;">This is a test paragraph with some sample text.</p>
      <ul style="list-style-type: none; padding: 0;">
        <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
            <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
            <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
            <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
            <li style="margin-bottom: 5px; color: #555;">Item 1</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 2</li>
        <br />
        <li style="margin-bottom: 5px; color: #555;">Item 3</li>
        <br />
      </ul>
      <button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor  : pointer;">
        Click Me
      </button>
      <div style="margin-top: 15px; border-top: 1px solid #eee; padding-top: 10px;">
        <span style="color: #999;">Footer Information</span>
      </div>
    </div>
  `;
}
  },
};
</script>

Contributing

Contributions to Vue Mutable Grid Layout are welcome. Please ensure that your code follows the existing style and that all tests pass.

License

Vue Mutable Grid Layout is MIT licensed.