Vue-mutable-grid-layout NPM

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.

vue

@everything-registry/sub-chunk-3087

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago