### Install with NPM

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/guide/installation.md

Use NPM to install the package. This command adds the package as a dependency to your project.

```bash
npm install vue-ts-responsive-grid-layout --save
```

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

### Install Project Dependencies

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Installs all necessary external dependencies for the project. Run this command after cloning the repository.

```bash
npm install
```

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

### Install the local package archive

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/testing-package.md

Install the generated .tgz file into another project to test the package. Replace `vue-ts-responsive-grid-layout.tgz` with your actual package name.

```bash
npm install vue-ts-responsive-grid-layout.tgz
```

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

### Run Development Server

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Compiles the project and starts a hot-reloading development server. Useful for iterative development and testing.

```bash
npm run dev
```

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

### Install with Yarn

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/guide/installation.md

Use Yarn to add the package to your project. This is an alternative to using NPM for package management.

```bash
yarn add vue-ts-responsive-grid-layout
```

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

### Importing Custom Component

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/03-example.md

Imports the custom component used for grid layout examples.

```javascript
import CustomComponent from './components/03-example.vue';
```

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

### dragstart

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when a GridItem starts to be dragged within the GridLayout.

```APIDOC
## dragstart

### Description
Emitted when a GridItem starts to being dragged.

### Event
`dragstart`
```

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

### Importing Custom Component

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/14-example.md

Imports the `CustomComponent` from a local file path. This is a common setup step for using custom Vue components.

```javascript
import CustomComponent from './components/14-example.vue';
```

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

### Import Package Components (Composition API)

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/guide/installation.md

Import the GridItem and GridLayout components directly for use with Vue's Composition API via the `<script setup>` block.

```javascript
import { GridItem, GridLayout } from 'vue-ts-responsive-grid-layout';
```

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

### Handle Layout Before Mount Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Use this event to access the layout configuration before the component is mounted. It's useful for initial setup or validation.

```typescript
layoutBeforeMountEvent: function(newLayout: Layout): void {
  console.log("beforeMount layout: ", newLayout);
}
```

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

### Vue Component for Grid Example

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/10-example.md

This is the main Vue component that manages the grid layout and provides functionality to add and remove items.

```vue
<template>
  <grid-layout
    :layout.sync="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
    :vertical-compact="true"
    :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">
      <span class="text">{{ item.i }}</span>
      <button @click="removeItem(item.i)">close</button>
    </grid-item>
  </grid-layout>
  <button @click="addItem">Add Item</button>
</template>

<script setup>
import { ref } from 'vue';
import { GridLayout, GridItem } from 'vue-responsive-grid-layout';

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 2, i: '1' },
  { x: 4, y: 0, w: 2, h: 2, i: '2' },
  { x: 6, y: 0, w: 2, h: 2, i: '3' },
  { x: 8, y: 0, w: 2, h: 2, i: '4' },
  { x: 10, y: 0, w: 2, h: 2, i: '5' },
  { x: 0, y: 2, w: 2, h: 2, i: '6' },
  { x: 2, y: 2, w: 2, h: 2, i: '7' },
  { x: 4, y: 2, w: 2, h: 2, i: '8' },
  { x: 6, y: 2, w: 2, h: 2, i: '9' },
  { x: 8, y: 2, w: 2, h: 2, i: '10' },
  { x: 10, y: 2, w: 2, h: 2, i: '11' },
  { x: 0, y: 4, w: 4, h: 2, i: '12' },
  { x: 4, y: 4, w: 4, h: 2, i: '13' },
  { x: 8, y: 4, w: 4, h: 2, i: '14' },
]);

let nextItem = 15;

const addItem = () => {
  layout.value.push({
    x: (layout.value.length * 2) % 12,
    y: Infinity,
    w: 2,
    h: 2,
    i: nextItem.toString(),
  });
  nextItem++;
};

const removeItem = (i) => {
  const index = layout.value.findIndex(item => item.i === i);
  if (index !== -1) {
    layout.value.splice(index, 1);
  }
};
</script>

<style>
.vue-grid-layout {
  background-color: #eee;
}
.vue-grid-item {
  background-color: #ccc;
  border: 1px solid #999;
}
.vue-grid-item .text {
  font-size: 1em;
}
.vue-grid-item button {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
</style>
```

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

### Create a local package archive

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/testing-package.md

Run this command in your project's root directory to create a .tgz file of your package.

```bash
npm pack
```

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

### layout-ready

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when all operations on the mount hook finish, providing the new layout.

```APIDOC
## layout-ready

### Description
Emitted when all the operations on the mount hook finish.

### Event
`layout-ready`

### Example
```typescript
layoutReadyEvent: function(newLayout: Layout): void {
  console.log("Ready layout: ", newLayout);
}
```
```

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

### Build Component Library

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Uses Vite to build the component library, compiling .vue files to .js, executing a build:types script, and performing an npm pack. This is for production deployment.

```bash
npm run build
```

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

### layout-before-mount

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted on the component beforeMount lifecycle hook, providing the new layout.

```APIDOC
## layout-before-mount

### Description
Emitted on the component beforeMount lifecycle hook.

### Event
`layout-before-mount`

### Example
```typescript
layoutBeforeMountEvent: function(newLayout: Layout): void {
  console.log("beforeMount layout: ", newLayout);
}
```
```

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

### Run Style Linting

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Executes style linting, likely focusing on CSS or SCSS files within the project to enforce styling conventions.

```bash
npm run lint:style
```

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

### Run ESLint

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Executes ESLint to check for code style and potential errors according to the project's linting rules.

```bash
npm run lint
```

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

### Import Custom Component

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/13-example.md

Imports the custom component used for the responsive grid layout.

```javascript
import CustomComponent from './components/13-example.vue';
```

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

### Handle Layout Ready Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

This event is emitted once all mount hook operations are complete. It signifies that the layout is fully initialized and ready for interaction.

```typescript
layoutReadyEvent: function(newLayout: Layout): void {
  console.log("Ready layout: ", newLayout);
}
```

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

### layout-mounted

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted on the component mounted lifecycle hook, providing the new layout.

```APIDOC
## layout-mounted

### Description
Emitted on the component mounted lifecycle hook.

### Event
`layout-mounted`

### Example
```typescript
layoutMountedEvent: function(newLayout: Layout): void {
  console.log("Mounted layout: ", newLayout);
}
```
```

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

### Run ESLint with Fix Option

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Executes ESLint and automatically fixes any fixable code style issues. Use this to maintain code consistency.

```bash
npm run lint:fix
```

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

### Import Package Components (Options API)

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/guide/installation.md

Import the main package for use with Vue's Options API. This sets up the components for registration within your Vue application.

```typescript
import VueResponsiveGridLayout from 'vue-ts-responsive-grid-layout';
```

```typescript
export default {
    components: {
        GridLayout: VueResponsiveGridLayout.GridLayout,
        GridItem: VueResponsiveGridLayout.GridItem
    },
// ... data, methods, mounted (), etc.
}
```

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

### layout-created

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted on the component created lifecycle hook, providing the new layout.

```APIDOC
## layout-created

### Description
Emitted on the component created lifecycle hook.

### Event
`layout-created`

### Example
```typescript
layoutCreatedEvent: function(newLayout: Layout): void {
  console.log("Created layout: ", newLayout);
}
```
```

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

### Basic Grid Layout Styles

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-grid-layout.md

Defines the base styles for the grid layout container, setting its position to relative and enabling smooth height transitions.

```scss
.vue-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
```

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

### Audit npm Packages

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/README.md

Use this command to audit your project's npm packages for security vulnerabilities. Ensure you specify the correct npm registry.

```bash
npm audit --registry=https://registry.npmjs.org/
```

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

### GridLayout Properties

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-props.md

Configuration options for the GridLayout component.

```APIDOC
## autoSize

### Description
When `true` the `GridLayout` container adjusts its height and width based on the content.

### Type
Boolean

### Default
`true`

### Required
`false`

## borderRadiusPx

### Description
Sets the border-radius CSS value used for the GridItem. This value is fully reactive.

### Type
Number

### Default
`8`

### Required
`false`

## breakpoints

### Description
Breakpoints defined for responsive layout. The parameter represents the width of different devices: `lg` = large, `md` = medium, `sm` = small, `xs` = extra small. Sets widths on which column number changes.

### Type
Object

### Default
`{ lg: 1200, md: 996, sm: 768, xs: 576, xxs: 0 }`

### Required
`false`

## colNum

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

### Type
Number

### Default
`12`

### Required
`false`

## cols

### Description
Defines the number of columns for each breakpoint. If set to `false`, `isDraggable` and `isResizeable` will be set to `false` and the `GridItem`'s will be static. Setting it from `false` to `true` will enable both the `isDraggable` and `isResizeable` props.

### Type
Object

### Default
`{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }`

### Required
`false`

## distributeEvenly

### Description
If set to `true`, it will ensure that GridItems are distributed evenly in the layout.

### Type
Boolean

### Default
`false`

### Required
`false`

## horizontalShift

### Description
When `true`, `GridItem`'s will be moved horizontally when two of them collide. When `false`, `GridItem`'s will be moved vertically when two of them collide.

### Type
Boolean

### Default
`true`

### Required
`false`

## isBounded

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

### Type
Boolean

### Default
`false`

### Required
`false`

## isDraggable

### Description
When `true`, `GridItem`'s can be dragged to a new position in the layout. Except if a 'GridItem' is `static`, then it will not be possible to drag it into a new position in the layout.

### Type
Boolean

### Default
`true`

### Required
`false`

## isMirrored

### Description
Specifies if the RTL/LTR should be reversed. This value is not reactive.

### Type
Boolean

### Default
`false`

### Required
`false`

## isResizable

### Description
When `true`, `GridItem`'s can be resized both horizontally and vertically.

### Type
Boolean

### Default
`true`

### Required
`false`

## layout

### Description
This is the initial layout of the grid. The value must be an `Array` of type `TLayout` items. Each item must have: `h` (height), `i` (index), `x` (column start), `y` (row start), `w` (width). Please refer to the documentation for [GridItem](grid-item.md) for more details.

### Type
TLayout[]

### Required
`true`

## margin

### Description
Specifies the margins of elements inside the grid. The value must be a two-element `Array` of `Number`. Each value is expressed in pixels. The first element is a horizontal margin, the second is a vertical margin. This value is not reactive.

### Type
Array

### Default
`[10, 10]`

### Required
`false`

## maxRows

### Description
The maximal number of rows in the `GridLayout`.

### Type
Number

### Default
`Infinity`

### Required
`false`

## preventCollision

### Description
Specifies if grid items will move when being dragged over.

### Type
Boolean

### Default
`false`

### Required
`false`

## responsive

### Description
Specifies if the layout should be responsive to window width.

### Type
Boolean

### Default
`false`

### Required
`false`

## responsiveLayouts

### Description
This is the 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` of `Object` items as defined by `layout` prop. eg: `{ lg:[layout items], md:[layout items] }`. Setting the prop after the creation of the GridLayout has no effect. This must be tested.

### Type
Object

### Default
`{}`

### Required
`false`

## restoreOnDrag

### Description
Specifies if the moved grid items should be restored after an item has been dragged over. This must be tested.

### Type
Boolean

### Default
`false`

### Required
`false`

## rowHeight

### Description
Specifies the height of a single row in pixels.

### Type
Number

### Default
`150`

### Required
`false`

## showCloseButton

### Description
If `true`, the GridItem's will show a close button in the top right corner. When the button is clicked, an event `remove-grid-item` will be emitted by the `GridItem`. The `GridLayout` listens for this event and the `GridItem` will then be removed from the `layout`.

### Type
Boolean

### Default
`true`

### Required
`false`

## showGridLines

### Description
If set to `true`, it adds a grid layout, displaying the size of each box in the `GridLayout`.

### Type
Boolean

### Default
`false`

### Required
`false`

## transformScale

### Description
Sets a scaling factor to the size of the grid items, `1` is `100%`. This must be tested.

### Type
Number

### Default
`1`

### Required
`false`

## useBorderRadius

### Description
If set to `true`, it adds an 8px corner radius to each `GridItem`.

### Type
Boolean

### Default
`false`

### Required
`false`
```

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

### Configure Drag Allow/Ignore Properties

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/05-example.md

Use `drag-allow-from` to specify a CSS selector for elements that should initiate dragging, and `drag-ignore-from` for elements that should be ignored for drag operations.

```html
drag-allow-from=".vue-draggable-handle"
drag-ignore-from=".no-drag"
```

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

### Generate TypeScript Declaration Files

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Generates TypeScript declaration files (.d.ts) for .vue files using vue-tsc. Essential for TypeScript integration.

```bash
npm run build:types
```

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

### GridItem Properties

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-props.md

This section lists and describes all available properties for the GridItem component.

```APIDOC
## GridItem Properties

This document outlines the properties available for the GridItem component.

### distributeEvenly
* **Type:** Boolean
* **Default:** `true`
* **Required:** `false`
* **Description:** When true, ensures that grid items are evenly distributed when the layout is resized. In a normal layout, this means a grid item moves left until it finds another item to its left. For mirrored (RTL) layouts, this is currently a Work In Progress (WIP).

### enableEditMode
* **Type:** Boolean
* **Default:** `false`
* **Required:** `false`
* **Description:** When set to `false`, this property overrides `isDraggable`, `isResizable`, and `showCloseButton`. Setting it to `true` does not change these props but also does not override them.

### isBounded
* **Type:** Boolean | null
* **Default:** `null`
* **Required:** `false`
* **Description:** Determines if the item is bounded to the container when dragging. If the default value is `null`, it is inherited from the parent.

### dragAllowFrom
* **Type:** String
* **Default:** `null`
* **Required:** `false`
* **Description:** Specifies which elements within the item should trigger the drag event. The value is a CSS-like selector string. If `null`, any element within the item can trigger the drag (excluding elements specified by `dragIgnoreFrom`). Refer to interact.js docs for `allowFrom`.

### dragIgnoreFrom
* **Type:** String
* **Default:** `'a, button'`
* **Required:** `false`
* **Description:** Specifies which elements within the item should *not* trigger the drag event. The value is a CSS-like selector string. Refer to interact.js docs for `ignoreFrom`.

### dragOption
* **Type:** Object
* **Default:** `{}`
* **Required:** `false`
* **Description:** A pass-through object for the grid item's interact.js draggable configuration.

### h
* **Type:** Number
* **Required:** `true`
* **Description:** Sets the initial height of the item. The value is a number multiplied by `rowHeight`.

### i
* **Type:** String | Number
* **Required:** `true`
* **Description:** The unique identifier for the item.

### isDraggable
* **Type:** Boolean | null
* **Default:** `null`
* **Required:** `false`
* **Description:** Indicates if the item is draggable. If the default value is `null`, it is inherited from the parent.

### isResizable
* **Type:** Boolean | null
* **Default:** `null`
* **Required:** `false`
* **Description:** Indicates if the item is resizable. If the default value is `null`, it is inherited from the parent.

### isStatic
* **Type:** Boolean
* **Default:** `false`
* **Required:** `false`
* **Description:** If `true`, the item is static and cannot be dragged, resized, or moved by other items.

### maxH
* **Type:** Number
* **Default:** `Infinity`
* **Required:** `false`
* **Description:** Sets the maximum height of the item. If the `h` value exceeds `maxH`, `h` will be set to `maxH`. The value is a number multiplied by `rowHeight`.

### maxW
* **Type:** Number
* **Default:** `Infinity`
* **Required:** `false`
* **Description:** Sets the maximum width of the item. If the `w` value exceeds `maxW`, `w` will be set to `maxW`. The value is a number multiplied by `colWidth`.

### minH
* **Type:** Number
* **Default:** `1`
* **Required:** `false`
* **Description:** Sets the minimum height of the item. If the `h` value is less than `minH`, `h` will be set to `minH`. The value is a number multiplied by `rowHeight`.

### minW
* **Type:** Number
* **Default:** `1`
* **Required:** `false`
* **Description:** Sets the minimum width of the item. If the `w` value is less than `minW`, `w` will be set to `minW`. The value is a number multiplied by `colWidth`.

### preserveAspectRatio
* **Type:** Boolean
* **Default:** `false`
* **Required:** `false`
* **Description:** If `true`, forces the GridItem to preserve its aspect ratio when resizing.

### resizeIgnoreFrom
* **Type:** String
* **Default:** `'a, button'`
* **Required:** `false`
* **Description:** Specifies which elements within the item should *not* trigger the resize event. The value is a CSS-like selector string. Refer to interact.js docs for `ignoreFrom`.

### resizeOption
* **Type:** Object
* **Default:** `{}`
* **Required:** `false`
* **Description:** A pass-through object for the grid item's interact.js resizable configuration.

### showCloseButton
* **Type:** Boolean
* **Default:** `true`
* **Required:** `false`
* **Description:** If `true`, the GridItem displays a close button in the top right corner. Clicking this button fires a `remove-grid-item` event, which the `GridLayout` listens for, leading to the removal of the GridItem.

### useBorderRadius
* **Type:** Boolean
* **Default:** `false`
* **Required:** `false`
* **Description:** If set to `true`, an 8px corner radius is applied to the GridItem.

### w
* **Type:** Number
* **Required:** `true`
* **Description:** Sets the initial width of the item. The value is a number multiplied by `colWidth`.
```

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

### Using Custom Component with Grid Layout

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/02-example.md

This snippet shows how to integrate a custom Vue component within the responsive grid layout. Ensure the custom component is correctly imported and registered.

```vue
<template>
  <GridLayout>
    <CustomComponent/>
  </GridLayout>
</template>

<script setup>
import CustomComponent from './components/02-example.vue';
</script>
```

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

### Default Breakpoints Configuration

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/07-example.md

Defines the pixel values for various screen size breakpoints (xxl, xl, lg, md, sm, xs, xxs).

```typescript
breakpoints: (): IBreakpoints => ({
  xxl: 1600,
  xl: 1400,
  lg: 1200,
  md: 996,
  sm: 768,
  xs: 480,
  xxs: 0,
})
```

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

### Default Columns Configuration

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/07-example.md

Specifies the number of columns for each defined breakpoint (xxl, xl, lg, md, sm, xs, xxs).

```typescript
cols: (): IColumns => ({
  xxl: 12,
  xl: 12,
  lg: 12,
  md: 10,
  sm: 6,
  xs: 4,
  xxs: 2,
})
```

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

### Importing Custom Component

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/06-example.md

Imports a custom component for use within the Vue application.

```vue
<script setup>
import CustomComponent from './components/06-example.vue';
</script>
```

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

### Handle Layout Mounted Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Fired when the component has been mounted to the DOM. Useful for DOM-related operations or integrating with other libraries.

```typescript
layoutMountedEvent: function(newLayout: Layout): void {
  console.log("Mounted layout: ", newLayout);
}
```

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

### recalculate-styles

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted into the event bus, potentially for grouping with other events into a separate enum.

```APIDOC
## recalculate-styles

### Description
Emitted into the event bus, maybe get this and others into separate enum.

### Event
`recalculate-styles`
```

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

### Handle Resized Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

Fired once an item has finished being resized. It includes the item index and its final dimensions in both grid units and pixels.

```typescript
resizeEvent: function(i, newH, newW, newHPx, newWPx): void {
    console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
}
```

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

### container-resized

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when the container of the GridLayout is resized.

```APIDOC
## container-resized

### Description
Emitted when the container of the GridLayout is resized.

### Event
`container-resized`
```

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

### Handle Layout Created Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

This event fires after the component has been created. Use it to perform actions that depend on the component instance being available.

```typescript
layoutCreatedEvent: function(newLayout: Layout): void {
  console.log("Created layout: ", newLayout);
}
```

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

### Handle Resize Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

This event is triggered continuously while an item is being resized. It provides the item index and new dimensions in both grid units and pixels.

```typescript
resizeEvent: function(i, newH, newW, newHPx, newWPx): void {
    console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
}
```

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

### Define Placeholder GridItem Opacity

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the opacity for the placeholder GridItem during dragging.

```scss
$grid-item-placeholder-opacity: .5;
```

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

### dragend

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when a GridItem is finished dragging and is dropped into the GridLayout.

```APIDOC
## dragend

### Description
Emitted when a GridItem is finished dragging (GridItem is dropped into the GridLayout).

### Event
`dragend`
```

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

### Handle Container Resized Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

Use this event to react when the grid item's container size changes. It provides the item index and new dimensions in both grid units and pixels.

```typescript
containerResizedEvent: function(i, newH, newW, newHPx, newWPx): void {
    console.log("CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
}
```

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

### Run TypeScript Type Checking

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/docs/setup.md

Executes type checking on all .ts files in the project using vue-tsc. Helps catch type-related errors.

```bash
npm run typeCheck
```

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

### layout-update

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted every time the GridLayout is being updated, including when GridItems are dropped or resized.

```APIDOC
## layout-update

### Description
Emitted every time the GridLayout is being updated. This will fire everytime the GridLayout is updated, the GridItems are dropped or resized in the GridLayout.

### Event
`layout-update`

### Example
```typescript
layoutUpdatedEvent: function(newLayout: Layout): void {
  console.log("Updated layout: ", newLayout);
}
```
```

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

### GridItem SCSS Styles

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-grid-item.md

Defines the base styles, hover effects for close buttons, and various states for grid items such as static, resizing, draggable, and placeholder appearances. Includes styles for the resizable handle.

```scss
@import '../../styles/variables';

$grid-item-border-radius: 10px;

.vue-close-button {
  height: 24px;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 24px;
  z-index: 20;
}

.vue-close-button:hover {
  cursor: pointer;
  filter: brightness(0) invert(1);
  opacity: .8;
}

.vue-grid-item {
  background-color: $grid-item-bg-color;
  box-sizing: border-box;
  color: $grid-item-text-color;
  cursor: default !important;
  font-size: $grid-item-font-size;
  touch-action: none;
  transition: all 200ms ease;
  transition-property: left, top, right;

&.vue-static {
   background-color: $grid-item-static-bg-color;
 }

&.no-touch {
   touch-action: none;
 }

&.vue-use-radius {
   border-radius: $grid-item-border-radius;
 }

&.css-transforms {
   left: 0;
   right: auto;
   transition-property: transform;
 }

&.resizing {
   opacity: .6;
   z-index: 3;
 }

&.vue-draggable {
   cursor: grab !important;
 }

&.vue-draggable-dragging {
   cursor: grabbing !important;
   transition: none;
   z-index: 3;
 }

&.vue-grid-placeholder {
   background: $grid-item-placeholder-bg-color;
   opacity: $grid-item-placeholder-opacity;
   transition-duration: 100ms;
   user-select: none;
   z-index: 2;
 }

& > .vue-resizable-handle {
    background-image: url('../../assets/resize.svg');
    background-origin: content-box;
    background-position: bottom right;
    background-repeat: no-repeat;
    bottom: 1px;
    box-sizing: border-box;
    cursor: se-resize;
    height: 20px;
    padding: 0 3px 3px 0;
    position: absolute;
    right: 1px;
    width: 20px;
    z-index: 20;
  }

&.disable-user-select {
   user-select: none;
 }
}

```

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

### ILayoutItemRequired Interface Definition

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/interfaces-layout.md

Defines the required properties for a grid layout item, including width, height, position, and a unique identifier.

```typescript
export interface ILayoutItemRequired {
  w: number;
  h: number;
  x: number;
  y: number;
  i: string | number;
}
```

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

### layout-updated

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when a GridItem is dropped or finishes resizing and the GridLayout is updated.

```APIDOC
## layout-updated

### Description
Emitted when a GridItem is dropped or finished resizing and the GridLayout is updated.

### Event
`layout-updated`
```

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

### Define Placeholder GridItem Background Color

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the background color for the placeholder GridItem during dragging.

```scss
$grid-item-placeholder-bg-color: red;
```

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

### Handle Item Move Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

This event fires continuously as an item is being moved, indicating its new X and Y coordinates.

```typescript
moveEvent: function(i, newX, newY): void {
    console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
}
```

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

### Define GridItem Font Size

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the font size for text within GridItem components.

```scss
$grid-item-font-size: 1rem;
```

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

### Handle Layout Updated Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Fired whenever the GridLayout is updated, typically after a GridItem is dropped or resized. Use this to react to layout changes.

```typescript
layoutUpdatedEvent: function(newLayout: Layout): void {
  console.log("Updated layout: ", newLayout);
}
```

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

### TLayoutItem Type Definition

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/types-layout.md

Defines the structure of an individual layout item, including optional properties for minimum/maximum width and height, movement status, and interactive states.

```typescript
export type TLayoutItem = ILayoutItemRequired & {
minW?: number
minH?: number
maxW?: number
maxH?: number
moved?: boolean
isStatic?: boolean
isDraggable?: boolean
isResizable?: boolean
}
```

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

### TLayout Type Definition

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/types-layout.md

Defines the overall layout as an array of TLayoutItem objects.

```typescript
export type TLayout = TLayoutItem[]
```

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

### dragmove

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when a dragged GridItem is being moved within the GridLayout.

```APIDOC
## dragmove

### Description
Emitted when a dragged GridItem is being moved.

### Event
`dragmove`
```

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

### Handle Dragged Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

Fired once an item has finished being dragged. It includes the item index and its final dimensions.

```typescript
dragEvent: function(i, h, w, height, width): void {
    console.log("DRAGGED i=" + i + ", h=" + h + ", w=" + w + ", height=" + height + ", width=" + width);
}
```

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

### Define Static GridItem Background Color

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the background color for GridItems when the `isStatic` prop is true.

```scss
$grid-item-static-bg-color: #393d42;
```

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

### breakpoint-changed

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when the breakpoint is changed during a recalculation of the GridLayout.

```APIDOC
## breakpoint-changed

### Description
Emitted when the breakpoint is changed during a recalculation of the GridLayout.

### Event
`breakpoint-changed`
```

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

### Handle Item Moved Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

Emitted after an item has finished moving and its position has been updated. It provides the item index and its final X and Y coordinates.

```typescript
movedEvent: function(i, newX, newY): void {
    console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
}
```

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

### Define GridItem Background Color

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the default background color for GridItem components.

```scss
$grid-item-bg-color: #720c0c;
```

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

### Define GridItem Text Color

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the text color for GridItem components.

```scss
$grid-item-text-color: white;
```

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

### Define GridItem Border Radius

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the border radius for GridItem components.

```sass
$grid-item-border-radius: 8px;
```

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

### IEventsData Interface Definition

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/interfaces-eventBus.md

Defines the structure for the payload emitted by drag and resize events. It includes properties for event type, dimensions (height, width), item identifier, and position (x, y).

```typescript
export interface IEventsData {
  eventType: string | symbol;
  h: number;
  i: string | number;
  w: number;
  x: number;
  y: number;
}
```

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

### EGridLayoutEvent Enum Definition

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/GridLayout-enums.md

Defines the string constants for events emitted by the GridLayout component. Use these constants to listen for specific layout-related events.

```typescript
/**
 * Events emitted by the GridLayout component
 */
export enum EGridLayoutEvent {
  BREAKPOINT_CHANGED = `breakpoint-changed`,
  CHANGED_DIRECTION = `changed-direction`,
  COLUMNS_CHANGED = `columns-changed`,
  CONTAINER_RESIZED = `container-resized`,
  DRAG_END = `drag-end`,
  DRAG_MOVE= `drag-move`,
  DRAG_START = `drag-start`,
  LAYOUT_BEFORE_MOUNT = `layout-before-mount`,
  LAYOUT_CREATED = `layout-created`,
  LAYOUT_MOUNTED = `layout-mounted`,
  LAYOUT_READY = `layout-ready`,
  LAYOUT_UPDATED = `layout-updated`,
  LAYOUT_UPDATE = `layout-update`,
}
```

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

### Handle Drag Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

This event is triggered continuously while an item is being dragged. It provides the item index and its current dimensions.

```typescript
dragEvent: function(i, h, w, height, width): void {
    console.log("DRAG i=" + i + ", h=" + h + ", w=" + w + ", height=" + height + ", width=" + width);
}
```

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

### changed-direction

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-layout-events.md

Emitted when the direction of the layout changes (RTL or LTR).

```APIDOC
## changed-direction

### Description
Emitted when the direction of the layout changes (RTL or LTR).

### Event
`changed-direction`
```

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

### Enable Horizontal Shift for GridItems

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/15-example.md

Set the `horizontalShift` prop to `true` to allow GridItems to shift horizontally when dragged over other items. By default, they shift vertically.

```vue
<script setup>
import CustomComponent from './components/15-example.vue';
</script>

<CustomComponent />
```

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

### GridItem Event Enum

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/api/GridItem-enums.md

Defines the string constants for events emitted by the GridItem component. Use these constants to listen for specific events like container resizing, dragging, and item removal.

```typescript
/**
 * Events emitted by the GridItem component
 */
export enum EGridItemEvent {
  CONTAINER_RESIZED = `container-resized`,
  DRAG = `drag`,
  DRAGGED = `dragged`,
  MOVE = `move`,
  MOVED = `moved`,
  REMOVE_ITEM = `remove-grid-item`,
  RESIZE = `resize`,
  RESIZED = `resized`,
}
```

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

### Define GridLayout Grid Line Color

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/css-variables.md

Sets the color for the grid lines in the GridLayout component.

```scss
$grid-line-color: #000;
```

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

### Custom Component for Drag and Drop

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/11-example.md

This custom component is used to facilitate the drag and drop interaction from outside the grid. It likely handles the event listeners and data transfer for external items.

```vue
<template>
  <div class="grid-container">
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
      @layout-updated="layout = $event"
    >
      <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>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { GridLayout, GridItem } from 'vue-responsive-grid-layout';

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

// Logic for handling external drag and drop would be implemented here
// For example, using event listeners on a separate element and updating the layout
</script>

<style>
.grid-container {
  width: 100%;
  height: 500px; /* Example height */
  border: 1px solid #ccc;
}
</style>

```

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

### Styling the Drag Handle and Overriding Cursor

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/05-example.md

This SCSS styles the drag handle element and overrides the default cursor to provide visual feedback during drag operations. It also sets a default cursor for the grid item itself.

```scss
.vue-draggable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -5px;
  left: 5px;
  background-origin: content-box;
  background-color: black;
  box-sizing: border-box;
  border-radius: 10px;
  cursor: grab;
}

.vue-grid-item {
  &.vue-draggable {
    cursor: default !important;
  }

  &.vue-draggable-dragging {
    cursor: grabbing !important;
  }
}
```

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

### Enable Horizontal Shift for GridItems

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/examples/16-example.md

Set the `horizontalShift` prop to `true` on a GridItem component to enable horizontal shifting when dragging. This prevents vertical shifts and allows the item to move horizontally over other items.

```vue
<script setup>
import CustomComponent from './components/16-example.vue';
</script>

<CustomComponent />
```

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

### Emit Remove Grid Item Event

Source: https://github.com/gwinnem/vue-responsive-grid-layout/blob/main/vitepress-docs/components/grid-item-events.md

Use this function to emit the 'remove-grid-item' event when a close button is clicked on a GridItem. It requires the ID of the item to be removed.

```typescript
const closeClicked = (id: number): void => {
  emit(`remove-grid-item`, id);
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.