### Install grid-layout-plus with pnpm

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Use this command to install the library if you are using pnpm as your package manager.

```sh
pnpm i grid-layout-plus
```

--------------------------------

### Install Grid Layout Plus

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Install the grid-layout-plus package using your preferred package manager.

```bash
pnpm i grid-layout-plus
```

```bash
yarn add grid-layout-plus
```

```bash
npm install grid-layout-plus
```

--------------------------------

### Install grid-layout-plus with yarn

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Use this command to install the library if you are using yarn as your package manager.

```sh
yarn add grid-layout-plus
```

--------------------------------

### Basic Grid Layout Setup in Vue 3

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Set up a basic grid layout with draggable and resizable items using Vue 3's `<script setup>` and TypeScript. Requires importing `GridLayout` and `GridItem` components.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

// Layout data: each item requires i (id), x, y, w (width), h (height)
const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
  { x: 4, y: 0, w: 2, h: 5, i: '2' },
  { x: 6, y: 0, w: 2, h: 3, i: '3' },
  { x: 8, y: 0, w: 2, h: 3, i: '4' },
  { x: 10, y: 0, w: 2, h: 3, i: '5' },
])
</script>

<template>
  <!-- Using item slot (simpler approach) -->
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <template #item="{ item }">
      <span class="text">{{ item.i }}</span>
    </template>
  </GridLayout>
</template>

<style scoped>
.vgl-layout {
  background-color: #eee;
}

:deep(.vgl-item:not(.vgl-item--placeholder)) {
  background-color: #ccc;
  border: 1px solid black;
}

.text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  font-size: 24px;
  text-align: center;
}
</style>
```

--------------------------------

### Import GridLayout and GridItem in a Vue component (script setup)

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Import the necessary components within a Vue component using the `<script setup>` syntax.

```vue
<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
</script>
```

--------------------------------

### Responsive Layout Setup

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/example/responsive.md

When enabling responsive layouts, the `v-model` data must be defined using `ref` to ensure synchronization. Using `reactive` will not work.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const layout = ref([
  {
    x: 0,
    y: 0,
    w: 1,
    h: 2,
    i: '0'
  },
  {
    x: 1,
    y: 0,
    w: 2,
    h: 2,
    i: '1'
  },
  {
    x: 3,
    y: 0,
    w: 1,
    h: 2,
    i: '2'
  }
])
</script>

<template>
  <grid-layout
    v-model="layout"
    :is-responsive="true"
    :col-num="12"
    :row-height="120"
    :margin="[10, 10]"
    :use-css-transforms="true"
  >
    <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i">
      {{ item.i }}
    </grid-item>
  </grid-layout>
</template>

<style>
.vue-grid-layout {
  background-color: #eee;
}
</style>
```

--------------------------------

### Implement Dragging External Elements into Grid

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

This Vue.js component enables dragging external elements into the grid. It requires setup for drag events and mouse position tracking. Ensure the 'lodash-es' library is installed for throttling.

```vue
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import { throttle } from 'lodash-es'
import type { GridLayout } from 'grid-layout-plus'

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
])

const wrapper = ref<HTMLElement>()
const gridLayout = ref<InstanceType<typeof GridLayout>>()

const mouseAt = { x: -1, y: -1 }

onMounted(() => {
  document.addEventListener('dragover', syncMousePosition)
})

onBeforeUnmount(() => {
  document.removeEventListener('dragover', syncMousePosition)
})

function syncMousePosition(event: MouseEvent) {
  mouseAt.x = event.clientX
  mouseAt.y = event.clientY
}

const dropId = 'drop'
const dragItem = { x: -1, y: -1, w: 2, h: 2, i: '' }

const drag = throttle(() => {
  const parentRect = wrapper.value?.getBoundingClientRect()
  if (!parentRect || !gridLayout.value) return

  const mouseInGrid =
    mouseAt.x > parentRect.left &&
    mouseAt.x < parentRect.right &&
    mouseAt.y > parentRect.top &&
    mouseAt.y < parentRect.bottom

  if (mouseInGrid && !layout.value.find(item => item.i === dropId)) {
    layout.value.push({
      x: (layout.value.length * 2) % 12,
      y: layout.value.length + 12,
      w: 2,
      h: 2,
      i: dropId,
    })
  }

  const index = layout.value.findIndex(item => item.i === dropId)
  if (index !== -1) {
    const item = gridLayout.value.getItem(dropId)
    if (!item) return

    item.wrapper.style.display = 'none'

    Object.assign(item.state, {
      top: mouseAt.y - parentRect.top,
      left: mouseAt.x - parentRect.left,
    })
    const newPos = item.calcXY(mouseAt.y - parentRect.top, mouseAt.x - parentRect.left)

    if (mouseInGrid) {
      gridLayout.value.dragEvent('dragstart', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
      dragItem.i = String(index)
      dragItem.x = layout.value[index].x
      dragItem.y = layout.value[index].y
    } else {
      gridLayout.value.dragEvent('dragend', dropId, newPos.x, newPos.y, dragItem.h, dragItem.w)
      layout.value = layout.value.filter(item => item.i !== dropId)
    }
  }
}, 16)

function dragEnd() {
  const parentRect = wrapper.value?.getBoundingClientRect()
  if (!parentRect || !gridLayout.value) return

  const mouseInGrid =
    mouseAt.x > parentRect.left &&
    mouseAt.x < parentRect.right &&
    mouseAt.y > parentRect.top &&
    mouseAt.y < parentRect.bottom

  if (mouseInGrid) {
    gridLayout.value.dragEvent('dragend', dropId, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
    layout.value = layout.value.filter(item => item.i !== dropId)

    layout.value.push({
      x: dragItem.x,
      y: dragItem.y,
      w: dragItem.w,
      h: dragItem.h,
      i: dragItem.i,
    })
    gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
  }
}
</script>

<template>
  <div
    class="droppable-element"
    draggable="true"
    @drag="drag"
    @dragend="dragEnd"
  >
    Drag me into the grid!
  </div>

  <div ref="wrapper">
    <GridLayout ref="gridLayout" v-model:layout="layout" :row-height="30">
      <template #item="{ item }">
        {{ item.i }}
      </template>
    </GridLayout>
  </div>
</template>

<style scoped>
.droppable-element {
  width: 150px;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
  background-color: #fdd;
  border: 1px solid black;
  cursor: grab;
}
</style>
```

--------------------------------

### Include browser-ready bundle

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Include the browser-ready JavaScript bundle directly in your HTML file to use the library.

```html
<script src="dist/grid-layout-plus.js"></script>
```

--------------------------------

### Override Placeholder Background Color

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/custom-style.md

To change the placeholder's background color, redefine the `--vgl-placeholder-bg` CSS variable within the `.vgl-layout` class. This example sets the background to green.

```css
.vgl-layout {
  --vgl-placeholder-bg: green;
}
```

--------------------------------

### Basic Demo Vue Component Source

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/example/basic.md

This Vue component file contains the source code for the basic demonstration. It is intended to be used within a Vue project, likely imported and rendered by another component.

```vue
<template>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</template>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
  border: 1px solid #ccc;
}
</style>

```

--------------------------------

### Prevent Collision in Grid Layout

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Enable collision prevention to ensure grid items can only be dropped in blank spaces, preventing overlaps. Set `prevent-collision` to true. Note that `vertical-compact` is set to false in this example.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
  { x: 4, y: 0, w: 2, h: 5, i: '2' },
  { x: 6, y: 0, w: 2, h: 3, i: '3' },
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :row-height="30"
    :responsive="false"
    :vertical-compact="false"
    prevent-collision
  >
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>
```

--------------------------------

### Responsive Grid Layouts with Breakpoints

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Configure different grid layouts for various screen sizes using responsive layouts and breakpoint configurations. The `@breakpoint-changed` event provides information when the breakpoint changes.

```vue
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { GridLayout } from 'grid-layout-plus'
import type { Breakpoint, Layout } from 'grid-layout-plus'

// Define layouts for different breakpoints
const presetLayouts = reactive({
  lg: [
    { x: 0, y: 0, w: 2, h: 2, i: '0' },
    { x: 2, y: 0, w: 2, h: 4, i: '1' },
    { x: 4, y: 0, w: 2, h: 5, i: '2' },
    { x: 6, y: 0, w: 2, h: 3, i: '3' },
    { x: 8, y: 0, w: 2, h: 3, i: '4' },
    { x: 10, y: 0, w: 2, h: 3, i: '5' },
  ],
  md: [
    { x: 0, y: 0, w: 2, h: 2, i: '0' },
    { x: 2, y: 0, w: 2, h: 4, i: '1' },
    { x: 4, y: 0, w: 2, h: 5, i: '2' },
    { x: 6, y: 0, w: 2, h: 3, i: '3' },
    { x: 2, y: 4, w: 2, h: 3, i: '4' },
    { x: 4, y: 5, w: 2, h: 3, i: '5' },
  ],
})

const layout = ref(presetLayouts.lg)

function breakpointChangedEvent(newBreakpoint: Breakpoint, newLayout: Layout) {
  console.log('Breakpoint changed:', newBreakpoint, 'Layout:', newLayout)
}
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :responsive-layouts="presetLayouts"
    :row-height="30"
    responsive
    :breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
    :cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }"
    @breakpoint-changed="breakpointChangedEvent"
  >
    <template #item="{ item }">
      <span class="text">{{ item.i }}</span>
    </template>
  </GridLayout>
</template>
```

--------------------------------

### GridLayout layout-before-mount Event

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/events.md

Emitted on the component beforeMount lifecycle hook. Use this to perform actions just before the layout is initially mounted.

```typescript
function layoutBeforeMount(newLayout: Layout): void
```

--------------------------------

### GridLayout layout-ready Event

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/events.md

Emitted when finish all the operations on the mount lifecycle hook. This is useful for performing actions after all initial layout calculations and DOM manipulations are complete.

```typescript
function layoutReady(newLayout: Layout): void
```

--------------------------------

### Vue Component for Responsive Layouts Demo

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/example/responsive-layouts.md

This Vue component renders a demonstration of predefined responsive layouts. It relies on a child component `DemoResponsiveLayouts` for the actual UI. Ensure the `DemoResponsiveLayouts` component is correctly imported and registered.

```vue
<template>
  <ClientOnly>
    <DemoResponsiveLayouts></DemoResponsiveLayouts>
  </ClientOnly>
</template>

<script setup>
import DemoResponsiveLayouts from "@/demos/responsive-layouts.vue";
</script>
```

--------------------------------

### Add Grid Lines to Layout

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/custom-style.md

Apply this CSS to the `.vgl-layout::before` pseudo-element to create visual grid lines within the layout. Adjust `background-size` to match your desired column and row dimensions.

```css
.vgl-layout::before {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 5px;
  content: '';
  background-image:
    linear-gradient(to right,lightgrey 1px,transparent 1px),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(calc(100% - 5px) / 12) 40px;
}
```

--------------------------------

### Grid Item Properties

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/properties.md

Configuration options for individual grid items.

```APIDOC
## Grid Item Configuration Properties

This section details the properties that can be applied to individual grid items to control their behavior and appearance within the grid layout.

### min-h

- **Type**: `number`
- **Default**: `1`
- **Description**: Specifies the minimum height of the grid item. If the item's height (`h`) is set to be smaller than `min-h`, `h` will be adjusted to `min-h`.

### max-w

- **Type**: `number`
- **Default**: `Infinity`
- **Description**: Specifies the maximum width of the grid item. If the item's width (`w`) is set to be larger than `max-w`, `w` will be adjusted to `max-w`.

### max-h

- **Type**: `number`
- **Default**: `Infinity`
- **Description**: Specifies the maximum height of the grid item. If the item's height (`h`) is set to be larger than `max-h`, `h` will be adjusted to `max-h`.

### is-draggable

- **Type**: `boolean`
- **Default**: `null`
- **Description**: Determines if the grid item is draggable. If set to `null`, the draggable state is inherited from the parent component.

### is-resizable

- **Type**: `boolean`
- **Default**: `null`
- **Description**: Determines if the grid item is resizable. If set to `null`, the resizable state is inherited from the parent component.

### is-bounded

- **Type**: `boolean`
- **Default**: `null`
- **Description**: Determines if the grid item is constrained within the container boundaries when being dragged. If set to `null`, this behavior is inherited from the parent component.

### static

- **Type**: `boolean`
- **Default**: `false`
- **Description**: If `true`, the item is static and cannot be dragged, resized, or moved by other items in the grid.

### drag-ignore-from

- **Type**: `string`
- **Default**: `'a, button'`
- **Description**: A CSS-like selector string specifying elements within the item that should not trigger a drag event. Refer to [interact.js docs](http://interactjs.io/docs/#ignorable-selectors) for more details.

### drag-allow-from

- **Type**: `string`
- **Default**: `null`
- **Description**: A CSS-like selector string specifying elements within the item that should trigger a drag event. If `null`, any element (excluding those specified by `drag-ignore-from`) can initiate a drag. Refer to [interact.js docs](http://interactjs.io/docs/#ignorable-selectors) for more details.

### resize-ignore-from

- **Type**: `string`
- **Default**: `'a, button'`
- **Description**: A CSS-like selector string specifying elements within the item that should not trigger a resize event. Refer to [interact.js docs](http://interactjs.io/docs/#ignorable-selectors) for more details.

### preserve-aspect-ratio

- **Type**: `boolean`
- **Default**: `false`
- **Description**: If `true`, the grid item will maintain its aspect ratio when being resized.

### drag-option

- **Type**: `Record<string, any>`
- **Default**: `{}`
- **Description**: An object for passing through configuration options directly to the [interact.js draggable configuration](https://interactjs.io/docs/draggable/).

### resize-option

- **Type**: `Record<string, any>`
- **Default**: `{}`
- **Description**: An object for passing through configuration options directly to the [interact.js resizable configuration](https://interactjs.io/docs/resizable/).
```

--------------------------------

### GridLayout Properties

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/properties.md

Configuration options for the GridLayout component.

```APIDOC
## GridLayout Properties

### layout
- type: `Layout`
- required

This is the initial layout of the grid. The value must be an array. Each item must have `i`, `x`, `y`, `w` and `h` properties.

### responsive-layouts
- type: `Partial<ResponsiveLayout>`
- default: `{}`

Initial layouts of the grid per breakpoint if `responsive` is set to `true`. The keys of the object are breakpoint names and each value is an array as defined by `layout` prop.

### col-num
- type: `number`
- default: `12`

Specifies the number of columns the grid has. The value should be a natural number.

### row-height
- type: `number`
- default: `150`

Specifies the height of a single row in pixels.

### max-rows
- type: `number`
- default: `Infinity`

Specifies the maximal number of rows in the grid.

### margin
- type: `number[]`
- default: `[10, 10]`

Specifies the margins of elements inside the grid. The value must be a number array with size two. Each value is expressed in pixels. The first value is horizontal margin, the second is vertical margin.

### is-draggable
- type: `boolean`
- default: `true`

Specifies if the grid items are draggable.

### is-resizable
- type: `boolean`
- default: `true`

Specifies if the grid items are resizable.

### is-mirrored
- type: `boolean`
- default: `false`

Specifies if the RTL/LTR should be reversed.

### is-bounded
- type: `boolean`
- default: `false`

Specifies if the grid items are bounded to the container when dragging.

### auto-size
- type: `boolean`
- default: `true`

Specifies if the container height should adjust to fit contents.

### vertical-compact
- type: `boolean`
- default: `true`

Specifies if the layout should be compacted vertically.

### restore-on-drag
- type: `boolean`
- default: `false`

Specifies if moved grid items should be restored after being dragged over.

### prevent-collision
- type: `boolean`
- default: `false`

Specifies whether to prevent items collision. When `true`, items can only be dropped to blank space.

### use-css-transforms
- type: `boolean`
- default: `true`

Specifies if the CSS `transition-property: transform;` should be used.

### responsive
- type: `boolean`
- default: `false`

Specifies if the layout should be responsive to window width.

### breakpoints
- type: `Breakpoints`
- default: `{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }`

Breakpoints defined for responsive layout.

### cols
- type: `Breakpoints`
- default: `{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }`

Defines the number of columns for each breakpoint.

### use-style-cursor
- type: `boolean`
- default: `true`

Specifies if the cursor style should be set dynamically. Setting this to `false` may alleviate problems when dragging freezes. This property is not reactive.

### transform-scale
- type: `number`
- default: `1`

Sets a scaling factor to the size of the grid items, `1` means 100%.
```

--------------------------------

### Handle GridLayout and GridItem Events

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Listen to layout and item events to track changes in the grid. This includes events for layout lifecycle, breakpoint changes, and item movement or resizing. Ensure necessary types are imported for event handlers.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
import type { Layout, Breakpoint } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
])

// GridLayout events
function layoutBeforeMount(newLayout: Layout) {
  console.log('Layout before mount:', newLayout)
}

function layoutMounted(newLayout: Layout) {
  console.log('Layout mounted:', newLayout)
}

function layoutReady(newLayout: Layout) {
  console.log('Layout ready:', newLayout)
}

function layoutUpdated(newLayout: Layout) {
  console.log('Layout updated:', newLayout)
}

function breakpointChanged(newBreakpoint: Breakpoint, newLayout: Layout) {
  console.log('Breakpoint changed:', newBreakpoint, newLayout)
}

// GridItem events
function onMove(i: string, newX: number, newY: number) {
  console.log(`MOVE i=${i}, X=${newX}, Y=${newY}`)
}

function onMoved(i: string, newX: number, newY: number) {
  console.log(`MOVED i=${i}, X=${newX}, Y=${newY}`)
}

function onResize(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
  console.log(`RESIZE i=${i}, H=${newH}, W=${newW}, H(px)=${newHPx}, W(px)=${newWPx}`)
}

function onResized(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
  console.log(`RESIZED i=${i}, H=${newH}, W=${newW}, H(px)=${newHPx}, W(px)=${newWPx}`)
}

function onContainerResized(i: string, newH: number, newW: number, newHPx: number, newWPx: number) {
  console.log(`CONTAINER RESIZED i=${i}, H=${newH}, W=${newW}, H(px)=${newHPx}, W(px)=${newWPx}`)
}
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :row-height="30"
    @layout-before-mount="layoutBeforeMount"
    @layout-mounted="layoutMounted"
    @layout-ready="layoutReady"
    @layout-updated="layoutUpdated"
    @breakpoint-changed="breakpointChanged"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @move="onMove"
      @moved="onMoved"
      @resize="onResize"
      @resized="onResized"
      @container-resized="onContainerResized"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>

```

--------------------------------

### Vue.js Component for Styling Placeholder

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/example/styling-placeholder.md

This Vue.js component demonstrates the structure for a styling placeholder. It is intended for client-side rendering only.

```vue
<template>
  <div class="placeholder-container">
    <div class="placeholder-item"></div>
    <div class="placeholder-item"></div>
    <div class="placeholder-item"></div>
  </div>
</template>

<style scoped>
.placeholder-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.placeholder-item {
  background-color: #e0e0e0;
  height: 100px;
  border-radius: 4px;
}
</style>

```

--------------------------------

### Basic Vue Component Structure

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/example/basic.md

This is a standard Vue.js component structure for integrating client-side components. The `<ClientOnly>` tag ensures that the `DemoBasic` component is rendered only on the client side.

```vue
<template>
  <ClientOnly>
    <DemoBasic />
  </ClientOnly>
</template>

```

--------------------------------

### Configure GridItem Component Props

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Use these properties to configure individual grid items, including their position, size, and behavior like static placement or drag/resize constraints. Ensure a unique 'i' identifier for each item.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
  { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },  // Static item won't move
  { x: 4, y: 0, w: 2, h: 3, i: '2', minW: 2, maxW: 4, minH: 2, maxH: 6 },
])
</script>

<template>
  <GridLayout v-model:layout="layout" :row-height="30">
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :i="item.i"                    <!-- Unique identifier (required) -->
      :x="item.x"                    <!-- Horizontal position in grid units (required) -->
      :y="item.y"                    <!-- Vertical position in grid units (required) -->
      :w="item.w"                    <!-- Width in grid units (required) -->
      :h="item.h"                    <!-- Height in grid units (required) -->
      :min-w="1"                     <!-- Minimum width (default: 1) -->
      :min-h="1"                     <!-- Minimum height (default: 1) -->
      :max-w="Infinity"              <!-- Maximum width -->
      :max-h="Infinity"              <!-- Maximum height -->
      :is-draggable="null"           <!-- Override parent draggable setting -->
      :is-resizable="null"           <!-- Override parent resizable setting -->
      :is-bounded="null"             <!-- Override parent bounded setting -->
      :static="item.static"          <!-- Make item immovable and non-resizable -->
      drag-ignore-from="a, button"   <!-- Elements that won't trigger drag -->
      drag-allow-from=".drag-handle" <!-- Only these elements trigger drag -->
      resize-ignore-from="a, button" <!-- Elements that won't trigger resize -->
      :preserve-aspect-ratio="false" <!-- Keep aspect ratio when resizing -->
    >
      <span class="text">{{ item.i }}{{ item.static ? ' - Static' : '' }}</span>
    </GridItem>
  </GridLayout>
</template>

```

--------------------------------

### Customize Grid Layout Appearance with CSS Variables

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Use CSS variables within the '.vgl-layout' class to customize the appearance of the grid, including placeholder colors, resizing opacity, and resizer handle styles. Apply specific styles to grid items using ':deep()' selectors for different states like resizing or static.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
])
</script>

<template>
  <GridLayout v-model:layout="layout" :row-height="30">
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>

<style scoped>
/* CSS Variables for customization */
.vgl-layout {
  --vgl-placeholder-bg: green;           /* Placeholder background color */
  --vgl-placeholder-opacity: 20%;        /* Placeholder opacity */
  --vgl-placeholder-z-index: 2;          /* Placeholder z-index */
  --vgl-item-resizing-z-index: 3;        /* Z-index while resizing */
  --vgl-item-resizing-opacity: 60%;      /* Opacity while resizing */
  --vgl-item-dragging-z-index: 3;        /* Z-index while dragging */
  --vgl-item-dragging-opacity: 100%;     /* Opacity while dragging */
  --vgl-resizer-size: 10px;              /* Resize handle size */
  --vgl-resizer-border-color: #444;      /* Resize handle border color */
  --vgl-resizer-border-width: 2px;       /* Resize handle border width */

  background-color: #eee;
}

/* Style grid items */
:deep(.vgl-item:not(.vgl-item--placeholder)) {
  background-color: #ccc;
  border: 1px solid black;
}

/* Style while resizing */
:deep(.vgl-item--resizing) {
  opacity: 90%;
}

/* Style static items differently */
:deep(.vgl-item--static) {
  background-color: #cce;
}

/* Add grid lines */
.vgl-layout::before {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 5px;
  content: '';
  background-image:
    linear-gradient(to right, lightgrey 1px, transparent 1px),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(calc(100% - 5px) / 12) 40px; /* Adjust based on col-num and row-height */
}
</style>
```

--------------------------------

### LayoutItem Interface

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/properties.md

Extends LayoutItemRequired with optional properties for minimum/maximum dimensions, drag and resize states, and static positioning.

```typescript
interface LayoutItem extends LayoutItemRequired {
  minW?: number,
  minH?: number,
  maxW?: number,
  maxH?: number,
  moved?: boolean,
  static?: boolean,
  isDraggable?: boolean,
  isResizable?: boolean
}
```

--------------------------------

### TypeScript Types for Grid Layout Plus

Source: https://context7.com/qmhc/grid-layout-plus/llms.txt

Utilize the exported TypeScript types for robust type checking in your grid layout configurations. Define layouts, breakpoints, and responsive layouts with type safety.

```typescript
import type {
  Layout,
  LayoutItem,
  LayoutItemRequired,
  Breakpoint,
  Breakpoints,
  ResponsiveLayout,
} from 'grid-layout-plus'

// LayoutItemRequired - minimum required properties
interface LayoutItemRequired {
  w: number      // Width in grid units
  h: number      // Height in grid units
  x: number      // X position in grid units
  y: number      // Y position in grid units
  i: number | string  // Unique identifier
}

// LayoutItem - full item with optional properties
interface LayoutItem extends LayoutItemRequired {
  minW?: number       // Minimum width
  minH?: number       // Minimum height
  maxW?: number       // Maximum width
  maxH?: number       // Maximum height
  moved?: boolean     // Has been moved
  static?: boolean    // Cannot be moved or resized
  isDraggable?: boolean  // Override parent draggable
  isResizable?: boolean  // Override parent resizable
}

// Layout - array of layout items
type Layout = Array<LayoutItem>

// Breakpoint - responsive breakpoint names
type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'

// Breakpoints - width values for each breakpoint
type Breakpoints = Record<Breakpoint, number>

// ResponsiveLayout - layouts for each breakpoint
type ResponsiveLayout = Record<Breakpoint, Layout>

// Example usage
const layout: Layout = [
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1', static: true },
]

const breakpoints: Breakpoints = {
  lg: 1200,
  md: 996,
  sm: 768,
  xs: 480,
  xxs: 0,
}

const responsiveLayouts: Partial<ResponsiveLayout> = {
  lg: layout,
  md: [{ x: 0, y: 0, w: 4, h: 2, i: '0' }],
}
```

--------------------------------

### Import GridLayout and GridItem in a Vue component (defineComponent)

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Import and register the GridLayout and GridItem components within a Vue component using the `defineComponent` option.

```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

export default defineComponent({
  components: {
    GridLayout,
    GridItem
  }
})
</script>
```

--------------------------------

### Types

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/zh/guide/properties.md

TypeScript type definitions used within GridLayout Plus.

```APIDOC
## Types

### LayoutItemRequired
```ts
interface LayoutItemRequired {
  w: number,
  h: number,
  x: number,
  y: number,
  i: number | string
}
```

### LayoutItem
```ts
interface LayoutItem extends LayoutItemRequired {
  minW?: number,
  minH?: number,
  maxW?: number,
  maxH?: number,
  moved?: boolean,
  static?: boolean,
  isDraggable?: boolean,
  isResizable?: boolean
}
```

### Layout
```ts
type Layout = Array<LayoutItem>
```

### Breakpoint
```ts
type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
```

### Breakpoints
```ts
type Breakpoints = Record<Breakpoint, number>
```

### ResponsiveLayout
```ts
type ResponsiveLayout = Record<Breakpoint, Layout>
```
```

--------------------------------

### Globally import GridLayout and GridItem

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/installation.md

Import and register the GridLayout and GridItem components globally in your Vue application.

```ts
import { GridLayout, GridItem } from 'grid-layout-plus'

app
  .component('GridLayout', GridLayout)
  .component('GridItem', GridItem)
```

--------------------------------

### Default Placeholder Styles

Source: https://github.com/qmhc/grid-layout-plus/blob/main/docs/guide/custom-style.md

The default CSS for placeholders uses variables to define z-index, background color, and opacity. Ensure these variables are set if you intend to override them.

```css
.vgl-item--placeholder {
  z-index: var(--vgl-placeholder-z-index, 2);
  user-select: none;
  background-color: var(--vgl-placeholder-bg, red);
  opacity: var(--vgl-placeholder-opacity, 20%);
  transition-duration: 100ms;
}
```