From 807974c446a23483b6ba1d784db98a3964c41efe Mon Sep 17 00:00:00 2001
From: cuire <garwes@icloud.com>
Date: Sun, 20 Nov 2022 19:23:57 +0300
Subject: [PATCH 01/10] =?UTF-8?q?=F0=9F=A9=B9=20Fix=20`blinking`=20issue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Grid.svelte     |  4 ++--
 src/lib/GridItem.svelte | 22 ++++++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/lib/Grid.svelte b/src/lib/Grid.svelte
index 3c83448..025de96 100644
--- a/src/lib/Grid.svelte
+++ b/src/lib/Grid.svelte
@@ -67,7 +67,7 @@
 
 	$: if (typeof rows === 'number') _rows = rows;
 
-	$: if (itemSize?.width && itemSize?.height) _itemSize = itemSize as ItemSize;
+	$: if (itemSize?.width && itemSize?.height) _itemSize = { ...itemSize } as ItemSize;
 
 	$: if (itemSize?.width && _itemSize?.width) containerWidth = _cols * (_itemSize.width + gap + 1);
 
@@ -108,7 +108,7 @@
 			const height = entry.contentRect.height;
 
 			_cols = findGridSize(cols, width, breakpoints);
-			_rows = findGridSize(rows, width, breakpoints);
+			_rows = findGridSize(rows, height, breakpoints);
 
 			shouldExpandCols = _cols === 0;
 			shouldExpandRows = _rows === 0;
diff --git a/src/lib/GridItem.svelte b/src/lib/GridItem.svelte
index f8b1d0d..c722913 100644
--- a/src/lib/GridItem.svelte
+++ b/src/lib/GridItem.svelte
@@ -29,10 +29,24 @@
 
 	let active = false;
 
-	$: ({ left, top, width, height } = calcPosition(item, {
-		itemSize: gridParams.itemSize,
-		gap: gridParams.gap
-	}));
+	let left: number;
+
+	let top: number;
+
+	let width: number;
+
+	let height: number;
+
+	$: if (!active) {
+		const newPosition = calcPosition(item, {
+			itemSize: gridParams.itemSize,
+			gap: gridParams.gap
+		});
+		left = newPosition.left;
+		top = newPosition.top;
+		width = newPosition.width;
+		height = newPosition.height;
+	}
 
 	let min: ItemSize;
 

From fa38397bb6289ddb8c7e936f6775e38c804d8e1d Mon Sep 17 00:00:00 2001
From: cuire <garwes@icloud.com>
Date: Sun, 20 Nov 2022 21:07:23 +0300
Subject: [PATCH 02/10] =?UTF-8?q?=E2=9C=A8=20Custom=20Attributes=20#10?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 29 ++++++++++++++-----
 src/lib/Grid.svelte                           | 11 ++++++-
 src/lib/index.ts                              |  2 ++
 src/lib/types.ts                              |  4 +--
 .../examples/custom-attributes/+page.svelte   | 29 +++++++++++++++++++
 5 files changed, 64 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/examples/custom-attributes/+page.svelte

diff --git a/README.md b/README.md
index 4a63bc1..c98b57d 100644
--- a/README.md
+++ b/README.md
@@ -32,17 +32,30 @@ pnpm install svelte-grid-extended
 
 List of all available props:
 
-| prop     | description                                                                        | type                                                              | default  |
-| -------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------- | -------- |
-| cols     | Grid columns count. If set to 0, grid will grow infinitly. Must be >= 0.           | number                                                            | 0        |
-| rows     | Grid rows count. If set to 0, grid will grow infinitly. Must be >= 0.              | number                                                            | 0        |
-| itemSize | Size of the grid item. If not set, grid will calculate it based on container size. | { width?: number, height?: number }                               | {}       |
-| items    | Array of grid items.                                                               | Array<{ id: string, x: number, y: number, w: number, h: number }> | requried |
-| gap      | Gap between grid items.                                                            | number                                                            | 10       |
-| bounds   | Should grid items be bounded by the grid container.                                | boolean                                                           | false    |
+| prop     | description                                                                        | type                                | default  |
+| -------- | ---------------------------------------------------------------------------------- | ----------------------------------- | -------- |
+| cols     | Grid columns count. If set to 0, grid will grow infinitly. Must be >= 0.           | number                              | 0        |
+| rows     | Grid rows count. If set to 0, grid will grow infinitly. Must be >= 0.              | number                              | 0        |
+| itemSize | Size of the grid item. If not set, grid will calculate it based on container size. | { width?: number, height?: number } | {}       |
+| items    | Array of grid items.                                                               | [Item[]\<T\>](#item-type)           | requried |
+| gap      | Gap between grid items.                                                            | number                              | 10       |
+| bounds   | Should grid items be bounded by the grid container.                                | boolean                             | false    |
 
 > ⚠️ if `cols` or/and `rows` are set to 0, `itemSize.width` or/and `itemSize.height` must be setted.
 
+### Item[] type
+
+`Item[]<T>` are represented as an array of objects, which must have the following properties:
+
+| prop | description                                                         | type   | default   |
+| ---- | ------------------------------------------------------------------- | ------ | --------- |
+| id   | Unique id of the item. Used to compare items during collision tests | string | requried  |
+| x    | X position of the item in grid units.                               | number | requried  |
+| y    | Y position of the item in grid units.                               | number | requried  |
+| w    | Width of the item in grid units.                                    | number | requried  |
+| h    | Height of the item in grid units.                                   | number | requried  |
+| data | Custom attributes. 🦌                                               | T      | undefined |
+
 ## Usage
 
 - [Basic](#basic)
diff --git a/src/lib/Grid.svelte b/src/lib/Grid.svelte
index 025de96..8c89d5e 100644
--- a/src/lib/Grid.svelte
+++ b/src/lib/Grid.svelte
@@ -16,7 +16,16 @@
 
 	export let gap = 10;
 
-	export let items: Item[];
+	type T = $$Generic;
+
+	interface $$Slots {
+		default: {
+			item: Item<T>;
+		};
+		loader: Record<string, never>;
+	}
+
+	export let items: Item<T>[];
 
 	export let breakpoints: Breakpoints = {
 		xxl: 1536,
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 41f6559..c287d6c 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,3 +1,5 @@
 import Grid from './Grid.svelte';
+import type { Item } from './types';
 
+export { Grid, type Item };
 export default Grid;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 8271d01..dde464d 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,11 +1,11 @@
 import type { RequireAtLeastOne } from '$lib/utils/types';
 
-export type Item = Size &
+export type Item<T = unknown> = Size &
 	Position & {
 		id: string;
 		min?: Size;
 		max?: Size;
-	};
+	} & (T extends undefined ? { data: T } : { data?: T });
 
 export type Size = { w: number; h: number };
 
diff --git a/src/routes/examples/custom-attributes/+page.svelte b/src/routes/examples/custom-attributes/+page.svelte
new file mode 100644
index 0000000..98b69b7
--- /dev/null
+++ b/src/routes/examples/custom-attributes/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Grid from '$lib';
+	import type { Item } from '$lib/types';
+
+	const items: Item<{ text: string }>[] = [
+		{ id: '0', x: 6, y: 0, w: 2, h: 2, data: { text: '🎅' } },
+		{ id: '1', x: 6, y: 2, w: 2, h: 2, data: { text: '🤶' } },
+		{ id: '2', x: 4, y: 0, w: 2, h: 2, data: { text: '🦌' } },
+		{ id: '3', x: 4, y: 2, w: 2, h: 2, data: { text: '🦌' } },
+		{ id: '4', x: 2, y: 1, w: 2, h: 2, data: { text: '🦌' } },
+		{ id: '5', x: 8, y: 2, w: 2, h: 2, data: { text: '🎄' } },
+		{ id: '6', x: 8, y: 0, w: 2, h: 2, data: { text: '🎁' } }
+	];
+</script>
+
+<Grid {items} cols={10} rows={10} let:item>
+	<div class="item">{item.data?.text}</div>
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+		font-size: xx-large;
+	}
+</style>

From ea4c3afeb9b45027f54211dc42e349fbbfebe2ea Mon Sep 17 00:00:00 2001
From: cuire <garwes@icloud.com>
Date: Sun, 20 Nov 2022 21:23:24 +0300
Subject: [PATCH 03/10] =?UTF-8?q?=E2=99=BB=20Add=20Layout=20type=20&=20ren?=
 =?UTF-8?q?ame=20Item=20->=20LayoutItem?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |  6 +++---
 src/lib/Grid.svelte                           |  8 ++++----
 src/lib/GridItem.svelte                       | 10 +++++-----
 src/lib/index.ts                              |  4 ++--
 src/lib/types.ts                              |  6 ++++--
 src/lib/utils/grid.ts                         | 10 +++++-----
 src/lib/utils/item.ts                         |  8 ++++----
 .../examples/custom-attributes/+page.svelte   |  4 ++--
 tests/unit/grid.test.ts                       |  4 ++--
 tests/unit/item.test.ts                       | 20 +++++++++----------
 10 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/README.md b/README.md
index c98b57d..d7ff50e 100644
--- a/README.md
+++ b/README.md
@@ -37,15 +37,15 @@ List of all available props:
 | cols     | Grid columns count. If set to 0, grid will grow infinitly. Must be >= 0.           | number                              | 0        |
 | rows     | Grid rows count. If set to 0, grid will grow infinitly. Must be >= 0.              | number                              | 0        |
 | itemSize | Size of the grid item. If not set, grid will calculate it based on container size. | { width?: number, height?: number } | {}       |
-| items    | Array of grid items.                                                               | [Item[]\<T\>](#item-type)           | requried |
+| items    | Array of grid items.                                                               | [Layout\<T\>](#layout-type)         | requried |
 | gap      | Gap between grid items.                                                            | number                              | 10       |
 | bounds   | Should grid items be bounded by the grid container.                                | boolean                             | false    |
 
 > ⚠️ if `cols` or/and `rows` are set to 0, `itemSize.width` or/and `itemSize.height` must be setted.
 
-### Item[] type
+### Layout
 
-`Item[]<T>` are represented as an array of objects, which must have the following properties:
+`Layout<T>` are represented as an array of objects, items of which must have the following properties:
 
 | prop | description                                                         | type   | default   |
 | ---- | ------------------------------------------------------------------- | ------ | --------- |
diff --git a/src/lib/Grid.svelte b/src/lib/Grid.svelte
index 8c89d5e..b273496 100644
--- a/src/lib/Grid.svelte
+++ b/src/lib/Grid.svelte
@@ -6,7 +6,7 @@
 	import { findGridSize } from './utils/breakpoints';
 	import { getGridDimensions } from './utils/grid';
 
-	import type { Breakpoints, ItemSize, GridSize, Item } from './types';
+	import type { Breakpoints, ItemSize, GridSize, LayoutItem } from './types';
 
 	export let cols: GridSize = 0;
 
@@ -20,12 +20,12 @@
 
 	interface $$Slots {
 		default: {
-			item: Item<T>;
+			item: LayoutItem<T>;
 		};
 		loader: Record<string, never>;
 	}
 
-	export let items: Item<T>[];
+	export let items: LayoutItem<T>[];
 
 	export let breakpoints: Breakpoints = {
 		xxl: 1536,
@@ -101,7 +101,7 @@
 		items = [...items];
 	}
 
-	function updateGridDimensions(event: CustomEvent<{ item: Item }>) {
+	function updateGridDimensions(event: CustomEvent<{ item: LayoutItem }>) {
 		const { item } = event.detail;
 		calculatedGridSize = getGridDimensions([...items.filter((i) => i.id !== item.id), item]);
 	}
diff --git a/src/lib/GridItem.svelte b/src/lib/GridItem.svelte
index c722913..45aee7e 100644
--- a/src/lib/GridItem.svelte
+++ b/src/lib/GridItem.svelte
@@ -6,14 +6,14 @@
 	import { coordinate2size, calcPosition, snapOnMove, snapOnResize } from './utils/item';
 	import { hasCollisions } from './utils/grid';
 
-	import type { Item, ItemSize, ItemPosition, GridParams } from './types';
+	import type { LayoutItem, ItemSize, ItemPosition, GridParams } from './types';
 
 	const dispatch = createEventDispatcher<{
-		itemchange: { item: Item };
-		previewchange: { item: Item };
+		itemchange: { item: LayoutItem };
+		previewchange: { item: LayoutItem };
 	}>();
 
-	export let item: Item;
+	export let item: LayoutItem;
 
 	export let gridParams: GridParams;
 
@@ -67,7 +67,7 @@
 		};
 	}
 
-	let previewItem: Item = item;
+	let previewItem: LayoutItem = item;
 
 	$: previewItem, dispatch('previewchange', { item: previewItem });
 
diff --git a/src/lib/index.ts b/src/lib/index.ts
index c287d6c..138df90 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1,5 +1,5 @@
 import Grid from './Grid.svelte';
-import type { Item } from './types';
+import type { Layout, LayoutItem } from './types';
 
-export { Grid, type Item };
+export { Grid, type Layout, type LayoutItem };
 export default Grid;
diff --git a/src/lib/types.ts b/src/lib/types.ts
index dde464d..0fe38cb 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,12 +1,14 @@
 import type { RequireAtLeastOne } from '$lib/utils/types';
 
-export type Item<T = unknown> = Size &
+export type LayoutItem<T = unknown> = Size &
 	Position & {
 		id: string;
 		min?: Size;
 		max?: Size;
 	} & (T extends undefined ? { data: T } : { data?: T });
 
+export type Layout<T = unknown> = LayoutItem<T>[];
+
 export type Size = { w: number; h: number };
 
 export type Position = { x: number; y: number };
@@ -31,5 +33,5 @@ export type GridParams = {
 	maxCols: number;
 	maxRows: number;
 	bounds: boolean;
-	items: Item[];
+	items: LayoutItem[];
 };
diff --git a/src/lib/utils/grid.ts b/src/lib/utils/grid.ts
index 0bf4163..0b40525 100644
--- a/src/lib/utils/grid.ts
+++ b/src/lib/utils/grid.ts
@@ -1,6 +1,6 @@
-import type { GridDimensions, Item } from '$lib/types';
+import type { GridDimensions, LayoutItem } from '$lib/types';
 
-export function isItemColliding(item: Item, otherItem: Item): boolean {
+export function isItemColliding(item: LayoutItem, otherItem: LayoutItem): boolean {
 	return (
 		item.id !== otherItem.id &&
 		item.x <= otherItem.x + otherItem.w - 1 &&
@@ -10,15 +10,15 @@ export function isItemColliding(item: Item, otherItem: Item): boolean {
 	);
 }
 
-export function getCollisions(currentItem: Item, items: Item[]): Item[] {
+export function getCollisions(currentItem: LayoutItem, items: LayoutItem[]): LayoutItem[] {
 	return items.filter((item) => isItemColliding(currentItem, item));
 }
 
-export function hasCollisions(currentItem: Item, items: Item[]): boolean {
+export function hasCollisions(currentItem: LayoutItem, items: LayoutItem[]): boolean {
 	return items.some((item) => isItemColliding(currentItem, item));
 }
 
-export function getGridDimensions(items: Item[]): GridDimensions {
+export function getGridDimensions(items: LayoutItem[]): GridDimensions {
 	const cols = Math.max(...items.map((item) => item.x + item.w), 1);
 	const rows = Math.max(...items.map((item) => item.y + item.h), 1);
 
diff --git a/src/lib/utils/item.ts b/src/lib/utils/item.ts
index ed2081f..9d80923 100644
--- a/src/lib/utils/item.ts
+++ b/src/lib/utils/item.ts
@@ -1,4 +1,4 @@
-import type { GridParams, Item, ItemPosition, ItemSize, Position, Size } from '$lib/types';
+import type { GridParams, LayoutItem, ItemPosition, ItemSize, Position, Size } from '$lib/types';
 
 export function coordinate2position(coordinate: number, cellSize: number, gap: number): number {
 	return coordinate * cellSize + (coordinate + 1) * gap;
@@ -19,7 +19,7 @@ export function size2coordinate(size: number, cellSize: number, gap: number): nu
 export function snapOnMove(
 	left: number,
 	top: number,
-	item: Item,
+	item: LayoutItem,
 	gridParams: GridParams
 ): Position {
 	const { itemSize, gap } = gridParams;
@@ -37,7 +37,7 @@ export function snapOnMove(
 export function snapOnResize(
 	width: number,
 	height: number,
-	item: Item,
+	item: LayoutItem,
 	gridParams: GridParams
 ): Size {
 	const { itemSize, gap } = gridParams;
@@ -53,7 +53,7 @@ export function snapOnResize(
 }
 
 export function calcPosition(
-	item: Item,
+	item: LayoutItem,
 	options: { itemSize: ItemSize; gap: number }
 ): ItemPosition & ItemSize {
 	const { itemSize, gap } = options;
diff --git a/src/routes/examples/custom-attributes/+page.svelte b/src/routes/examples/custom-attributes/+page.svelte
index 98b69b7..fd1cef6 100644
--- a/src/routes/examples/custom-attributes/+page.svelte
+++ b/src/routes/examples/custom-attributes/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import Grid from '$lib';
-	import type { Item } from '$lib/types';
+	import type { Layout } from '$lib';
 
-	const items: Item<{ text: string }>[] = [
+	const items: Layout<{ text: string }> = [
 		{ id: '0', x: 6, y: 0, w: 2, h: 2, data: { text: '🎅' } },
 		{ id: '1', x: 6, y: 2, w: 2, h: 2, data: { text: '🤶' } },
 		{ id: '2', x: 4, y: 0, w: 2, h: 2, data: { text: '🦌' } },
diff --git a/tests/unit/grid.test.ts b/tests/unit/grid.test.ts
index ad7fabb..9626afb 100644
--- a/tests/unit/grid.test.ts
+++ b/tests/unit/grid.test.ts
@@ -7,7 +7,7 @@ import {
 	isItemColliding
 } from '../../src/lib/utils/grid';
 
-import type { Item } from '../../src/lib/types';
+import type { LayoutItem } from '../../src/lib/types';
 
 /**
  * Grid with shape:\
@@ -17,7 +17,7 @@ import type { Item } from '../../src/lib/types';
  * |  7 ~ ~ ~ |\
  * Where ~ is empty spot
  */
-const items: Item[] = [
+const items: LayoutItem[] = [
 	{ id: '0', x: 0, y: 0, w: 1, h: 1 },
 	{ id: '1', x: 1, y: 0, w: 1, h: 1 },
 	{ id: '2', x: 2, y: 0, w: 1, h: 1 },
diff --git a/tests/unit/item.test.ts b/tests/unit/item.test.ts
index ccac547..27eb4ff 100644
--- a/tests/unit/item.test.ts
+++ b/tests/unit/item.test.ts
@@ -11,7 +11,7 @@ import {
 	snapOnResize
 } from '../../src/lib/utils/item';
 
-import type { GridParams, Item, ItemSize, Position, Size } from '../../src/lib/types';
+import type { GridParams, LayoutItem, ItemSize, Position, Size } from '../../src/lib/types';
 
 describe('🥐 coordinate2position()', () => {
 	test.each([
@@ -160,8 +160,8 @@ const gridParams: GridParams = {
 };
 
 describe('🥥 snapOnMove()', () => {
-	const item1x1: Item = { id: '0', x: 0, y: 0, w: 1, h: 1 };
-	const item4x4: Item = { id: '0', x: 0, y: 0, w: 4, h: 4 };
+	const item1x1: LayoutItem = { id: '0', x: 0, y: 0, w: 1, h: 1 };
+	const item4x4: LayoutItem = { id: '0', x: 0, y: 0, w: 4, h: 4 };
 
 	test.each([
 		[0, 0, item1x1, gridParams, { x: 0, y: 0 }],
@@ -182,7 +182,7 @@ describe('🥥 snapOnMove()', () => {
 		[600, 600, item1x1, gridParams, { x: 6, y: 6 }]
 	])(
 		'should find the correct position %dx%d for item 1x1',
-		(left: number, top: number, item: Item, gridParams: GridParams, expected: Position) => {
+		(left: number, top: number, item: LayoutItem, gridParams: GridParams, expected: Position) => {
 			expect(snapOnMove(left, top, item, gridParams)).toEqual(expected);
 		}
 	);
@@ -206,15 +206,15 @@ describe('🥥 snapOnMove()', () => {
 		[600, 600, item4x4, gridParams, { x: 4, y: 4 }]
 	])(
 		'should find the correct position %dx%d for item4x4',
-		(left: number, top: number, item: Item, gridParams: GridParams, expected: Position) => {
+		(left: number, top: number, item: LayoutItem, gridParams: GridParams, expected: Position) => {
 			expect(snapOnMove(left, top, item, gridParams)).toEqual(expected);
 		}
 	);
 });
 
 describe('🍍 snapOnResize()', () => {
-	const itemX1Y1: Item = { id: '0', x: 1, y: 1, w: 1, h: 1 };
-	const itemX4Y4: Item = { id: '0', x: 4, y: 4, w: 1, h: 1 };
+	const itemX1Y1: LayoutItem = { id: '0', x: 1, y: 1, w: 1, h: 1 };
+	const itemX4Y4: LayoutItem = { id: '0', x: 4, y: 4, w: 1, h: 1 };
 
 	test.each([
 		[100, 100, itemX1Y1, gridParams, { w: 1, h: 1 }],
@@ -235,7 +235,7 @@ describe('🍍 snapOnResize()', () => {
 		[600, 600, itemX1Y1, gridParams, { w: 6, h: 6 }]
 	])(
 		'should find the correct size %dx%d for itemX1Y1',
-		(width: number, height: number, item: Item, gridParams: GridParams, expected: Size) => {
+		(width: number, height: number, item: LayoutItem, gridParams: GridParams, expected: Size) => {
 			expect(snapOnResize(width, height, item, gridParams)).toEqual(expected);
 		}
 	);
@@ -259,14 +259,14 @@ describe('🍍 snapOnResize()', () => {
 		[1200, 1200, itemX4Y4, gridParams, { w: 4, h: 4 }]
 	])(
 		'should find the correct size %dx%d for itemX4Y4',
-		(width: number, height: number, item: Item, gridParams: GridParams, expected: Size) => {
+		(width: number, height: number, item: LayoutItem, gridParams: GridParams, expected: Size) => {
 			expect(snapOnResize(width, height, item, gridParams)).toEqual(expected);
 		}
 	);
 });
 
 describe('🫑 calcPosition()', () => {
-	const item: Item = { id: '0', x: 1, y: 1, w: 1, h: 1 };
+	const item: LayoutItem = { id: '0', x: 1, y: 1, w: 1, h: 1 };
 	const itemSize: ItemSize = { width: 100, height: 100 };
 	const gap = 0;
 

From 9106be08b72fed0de70d06e663ccb4a35b213193 Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Fri, 25 Nov 2022 22:27:04 +0500
Subject: [PATCH 04/10] =?UTF-8?q?=F0=9F=92=85=20Styling=20examples?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                | 89 +++++++++++++++++++++++-
 src/routes/examples/styling/+page.svelte | 60 ++++++++++++++++
 2 files changed, 148 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/examples/styling/+page.svelte

diff --git a/README.md b/README.md
index d7ff50e..9ebe904 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,7 @@ pnpm install svelte-grid-extended
 
 ## Props
 
-List of all available props:
+### Main props
 
 | prop     | description                                                                        | type                                | default  |
 | -------- | ---------------------------------------------------------------------------------- | ----------------------------------- | -------- |
@@ -56,11 +56,47 @@ List of all available props:
 | h    | Height of the item in grid units.                                   | number | requried  |
 | data | Custom attributes. 🦌                                               | T      | undefined |
 
+### Style related props:
+
+Component can be styled with css framework of your choice or with global classes. To do so, you can use the following props:
+
+- `class` - class name for grid container.
+- `itemClass` - class name for grid item.
+- `itemActiveClass` - class name that applies when item is currently being dragged or resized. By default, it is used to make active grid item transparent.
+- `itemPreviewClass` - class name for preview where item will be placed after interaction.
+- `resizerClass` - class name for item's resize handle.
+
+To understand how to use these props, look at `<Grid />` component simplified structure.
+
+> 📄 `active` is variable that indicates if grid item is currently being dragged or resized:
+
+```svelte
+<!-- Grid -->
+<div class={class}>
+	<!-- GridItem -->
+	<div class={itemClass} class:itemActiveClass={active}>
+		<slot />
+		<!-- Resizer -->
+		<div class={resizerClass} />
+		<!-- Resizer -->
+	</div>
+
+	{#if active}
+		<!-- GridItemGhost -->
+		<div class={itemPreviewClass} />
+	{/if}
+
+	<!-- /GridItem -->
+</div>
+<!-- /Grid -->
+```
+
 ## Usage
 
 - [Basic](#basic)
 - [Static grid](#static-grid)
 - [Grid without bounds](#grid-without-bounds)
+- [Styling](#styling)
 
 ### Basic
 
@@ -151,3 +187,54 @@ It can be set to both dimensions or just one.
 	<div>Content</div>
 </Grid>
 ```
+
+### Styling
+
+Grid can be styled with classes passed to various props. Check [Style related props](#style-related-props) section for more info.
+
+✨ [repl](https://svelte.dev/repl/b158b6fbb2234241b7ea9737b7e2fc24?version=3.53.1)
+
+```svelte
+<script lang="ts">
+	import Grid from 'svelte-grid-extended';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 1, h: 1 },
+		{ id: '1', x: 0, y: 1, w: 1, h: 1 }
+	];
+</script>
+
+<Grid
+	{items}
+	class="grid-container"
+	itemClass="grid-item"
+	itemActiveClass="grid-item-active"
+	itemPreviewClass="bg-red-500 rounded"
+>
+	<div>Content</div>
+</Grid>
+
+<style>
+	:global(.grid-container) {
+		opacity: 0.7;
+	}
+
+	:global(.grid-item) {
+		transition: width 4s, height 4s;
+		transition: transform 4s, opacity 4s;
+	}
+
+	:global(.grid-item-active) {
+		opacity: 0.1;
+	}
+
+	/* tailwind classes */
+	:global(.bg-red-500) {
+		background-color: rgb(202, 33, 33);
+	}
+
+	:global(.rounded) {
+		border-radius: 0.25rem;
+	}
+</style>
+```
diff --git a/src/routes/examples/styling/+page.svelte b/src/routes/examples/styling/+page.svelte
new file mode 100644
index 0000000..1977485
--- /dev/null
+++ b/src/routes/examples/styling/+page.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import Grid from '$lib';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 2, h: 5 },
+		{ id: '1', x: 2, y: 2, w: 2, h: 2 },
+		{ id: '2', x: 2, y: 0, w: 1, h: 2 },
+		{ id: '3', x: 3, y: 0, w: 2, h: 2 },
+		{ id: '4', x: 4, y: 2, w: 1, h: 3 },
+		{ id: '5', x: 8, y: 0, w: 2, h: 8 },
+		{ id: '6', x: 4, y: 5, w: 1, h: 1 },
+		{ id: '7', x: 2, y: 6, w: 3, h: 2 },
+		{ id: '8', x: 2, y: 4, w: 2, h: 2 }
+	];
+</script>
+
+<Grid
+	{items}
+	class="grid-container"
+	itemClass="grid-item"
+	itemActiveClass="grid-item-active"
+	itemPreviewClass="bg-red-500 rounded"
+	cols={10}
+	rows={10}
+	let:item
+>
+	<div class="item">{item.id}</div>
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+	}
+
+	:global(.grid-container) {
+		opacity: 0.7;
+	}
+
+	:global(.grid-item) {
+		transition: width 4s, height 4s;
+		transition: transform 4s, opacity 4s;
+	}
+
+	:global(.grid-item-active) {
+		opacity: 0.1;
+	}
+
+	/* tailwind classes */
+	/* :global(.bg-red-500) {
+		background-color: rgb(202, 33, 33);
+	}
+
+	:global(.rounded) {
+		border-radius: 0.25rem;
+	} */
+</style>

From 31cf47e72bce9a87d41ea37ef9a72ad31b4bc2ff Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Fri, 25 Nov 2022 22:28:29 +0500
Subject: [PATCH 05/10] =?UTF-8?q?=E2=9C=A8=20Add=20coverage=20to=20.pretti?=
 =?UTF-8?q?erignore?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.prettierignore b/.prettierignore
index 3897265..f4f9385 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+/coverage
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

From 20860657e734772f52d202f37590019b1ecda15c Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Fri, 25 Nov 2022 23:26:29 +0500
Subject: [PATCH 06/10] =?UTF-8?q?=F0=9F=8E=90=20Github=20actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/lint.yml  | 35 +++++++++++++++++++++++++++++++++++
 .github/workflows/test.yaml | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 .github/workflows/lint.yml
 create mode 100644 .github/workflows/test.yaml

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
new file mode 100644
index 0000000..45b8552
--- /dev/null
+++ b/.github/workflows/lint.yml
@@ -0,0 +1,35 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  run-linters:
+    name: Run linters
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run linte
+        run: yarn lint
diff --git a/.github/workflows/test.yaml b/.github/workflows/test.yaml
new file mode 100644
index 0000000..118e66e
--- /dev/null
+++ b/.github/workflows/test.yaml
@@ -0,0 +1,35 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  test:
+    name: Run Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: 'yarn'
+
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Run tests
+        run: yarn test

From 38a6fb686e2ad30c2b4bb85837d6304f689dd3f8 Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Sat, 26 Nov 2022 00:10:10 +0500
Subject: [PATCH 07/10] =?UTF-8?q?=F0=9F=AB=90=20Disable=20interactions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     | 60 ++++++++++++++++---
 src/lib/Grid.svelte                           |  5 +-
 src/lib/GridItem.svelte                       | 16 ++++-
 src/lib/types.ts                              |  3 +
 .../disable-moving-or-resizing/+page.svelte   | 33 ++++++++++
 src/routes/examples/readonly/+page.svelte     | 29 +++++++++
 6 files changed, 134 insertions(+), 12 deletions(-)
 create mode 100644 src/routes/examples/disable-moving-or-resizing/+page.svelte
 create mode 100644 src/routes/examples/readonly/+page.svelte

diff --git a/README.md b/README.md
index 9ebe904..4977f54 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@ pnpm install svelte-grid-extended
 | items    | Array of grid items.                                                               | [Layout\<T\>](#layout-type)         | requried |
 | gap      | Gap between grid items.                                                            | number                              | 10       |
 | bounds   | Should grid items be bounded by the grid container.                                | boolean                             | false    |
+| readonly | If true disables interaction with grid items.                                      | boolean                             | false    |
 
 > ⚠️ if `cols` or/and `rows` are set to 0, `itemSize.width` or/and `itemSize.height` must be setted.
 
@@ -47,14 +48,16 @@ pnpm install svelte-grid-extended
 
 `Layout<T>` are represented as an array of objects, items of which must have the following properties:
 
-| prop | description                                                         | type   | default   |
-| ---- | ------------------------------------------------------------------- | ------ | --------- |
-| id   | Unique id of the item. Used to compare items during collision tests | string | requried  |
-| x    | X position of the item in grid units.                               | number | requried  |
-| y    | Y position of the item in grid units.                               | number | requried  |
-| w    | Width of the item in grid units.                                    | number | requried  |
-| h    | Height of the item in grid units.                                   | number | requried  |
-| data | Custom attributes. 🦌                                               | T      | undefined |
+| prop      | description                                                         | type    | default   |
+| --------- | ------------------------------------------------------------------- | ------- | --------- |
+| id        | Unique id of the item. Used to compare items during collision tests | string  | requried  |
+| x         | X position of the item in grid units.                               | number  | requried  |
+| y         | Y position of the item in grid units.                               | number  | requried  |
+| w         | Width of the item in grid units.                                    | number  | requried  |
+| h         | Height of the item in grid units.                                   | number  | requried  |
+| movable   | If true, item can be moved by user.                                 | boolean | true      |
+| resizable | If true, item can be resized by user.                               | boolean | true      |
+| data      | Custom attributes. 🦌                                                | T       | undefined |
 
 ### Style related props:
 
@@ -97,6 +100,7 @@ To understand how to use these props, look at `<Grid />` component simplified st
 - [Static grid](#static-grid)
 - [Grid without bounds](#grid-without-bounds)
 - [Styling](#styling)
+- [Disable interactions](#disable-interactions)
 
 ### Basic
 
@@ -238,3 +242,43 @@ Grid can be styled with classes passed to various props. Check [Style related pr
 	}
 </style>
 ```
+
+### Disable interactions
+
+To disable interactions, set `readOnly` prop to `true`. Or set `movable` and/or `resizable` to `false` on specific item. 
+
+Read Only grid: ✨ [repl](https://svelte.dev/repl/29ce85a23a714c51b6638f12f5ecdd7c?version=3.53.1)
+
+```svelte
+<script lang="ts">
+	import Grid from 'svelte-grid-extended';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 1, h: 1 },
+		{ id: '1', x: 0, y: 1, w: 1, h: 1 }
+	];
+</script>
+
+<Grid {items} cols={10} rows={10} readOnly>
+	<div>Content</div>
+</Grid>
+```
+
+Make item non-interactive: ✨ [repl](https://svelte.dev/repl/1b3b9b9b9b9b9b9b9b9b9b9b9b9b9b9b?version=3.53.1)
+
+```svelte
+<script lang="ts">
+	import Grid from 'svelte-grid-extended';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 1, h: 1, movable: false },
+		{ id: '1', x: 0, y: 1, w: 1, h: 1, movable: false, resizable: false}
+	];
+</script>
+
+<Grid {items} cols={10} rows={10}>
+	<div>Content</div>
+</Grid>
+
+```
+
diff --git a/src/lib/Grid.svelte b/src/lib/Grid.svelte
index b273496..b8f7e97 100644
--- a/src/lib/Grid.svelte
+++ b/src/lib/Grid.svelte
@@ -40,6 +40,8 @@
 
 	export let bounds = false;
 
+	export let readOnly = false;
+
 	export let debug = false;
 
 	let classes = '';
@@ -151,7 +153,8 @@
 					maxCols,
 					maxRows,
 					bounds,
-					items
+					items,
+					readOnly
 				}}
 				activeClass={itemActiveClass}
 				previewClass={itemPreviewClass}
diff --git a/src/lib/GridItem.svelte b/src/lib/GridItem.svelte
index 45aee7e..947bc71 100644
--- a/src/lib/GridItem.svelte
+++ b/src/lib/GridItem.svelte
@@ -7,6 +7,7 @@
 	import { hasCollisions } from './utils/grid';
 
 	import type { LayoutItem, ItemSize, ItemPosition, GridParams } from './types';
+	import Grid from './Grid.svelte';
 
 	const dispatch = createEventDispatcher<{
 		itemchange: { item: LayoutItem };
@@ -71,6 +72,15 @@
 
 	$: previewItem, dispatch('previewchange', { item: previewItem });
 
+	const movable = !gridParams.readOnly && item.movable === undefined && item.movable !== false;
+
+	const resizable =
+		!gridParams.readOnly && item.resizable === undefined && item.resizable !== false;
+
+	const moveAction = movable ? move : () => {};
+
+	const resizeAction = resizable ? resize : () => {};
+
 	function start() {
 		active = true;
 	}
@@ -119,16 +129,16 @@
 	class={`${classes} ${active ? activeClass : ''}`}
 	class:item-default={!classes}
 	class:active-default={!activeClass && active}
-	use:move={{ position: { left, top } }}
+	use:moveAction={{ position: { left, top } }}
 	on:movestart={start}
 	on:moving={moving}
 	on:moveend={end}
-	use:resize={{ min, max, resizerClass, bounds: gridParams.bounds }}
+	use:resizeAction={{ min, max, resizerClass, bounds: gridParams.bounds }}
 	on:resizestart={start}
 	on:resizing={resizing}
 	on:resizeend={end}
 	style={`position: absolute; left:${left}px; top:${top}px; width: ${width}px; height: ${height}px; 
-			cursor: move; touch-action: none; user-select: none;`}
+			${movable ? 'cursor: move;' : ''} touch-action: none; user-select: none;`}
 >
 	<slot />
 </div>
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 0fe38cb..0d72b1e 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -5,6 +5,8 @@ export type LayoutItem<T = unknown> = Size &
 		id: string;
 		min?: Size;
 		max?: Size;
+		movable?: boolean;
+		resizable?: boolean;
 	} & (T extends undefined ? { data: T } : { data?: T });
 
 export type Layout<T = unknown> = LayoutItem<T>[];
@@ -34,4 +36,5 @@ export type GridParams = {
 	maxRows: number;
 	bounds: boolean;
 	items: LayoutItem[];
+	readOnly: boolean;
 };
diff --git a/src/routes/examples/disable-moving-or-resizing/+page.svelte b/src/routes/examples/disable-moving-or-resizing/+page.svelte
new file mode 100644
index 0000000..11c2027
--- /dev/null
+++ b/src/routes/examples/disable-moving-or-resizing/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import Grid from '$lib';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 2, h: 5, movable: false },
+		{ id: '1', x: 2, y: 2, w: 2, h: 2, movable: false, resizable: false },
+		{ id: '2', x: 2, y: 0, w: 1, h: 2, resizable: false },
+		{ id: '3', x: 3, y: 0, w: 2, h: 2 },
+		{ id: '4', x: 4, y: 2, w: 1, h: 3 },
+		{ id: '5', x: 8, y: 0, w: 2, h: 8 },
+		{ id: '6', x: 4, y: 5, w: 1, h: 1 },
+		{ id: '7', x: 2, y: 6, w: 3, h: 2 },
+		{ id: '8', x: 2, y: 4, w: 2, h: 2 }
+	];
+</script>
+
+<Grid {items} cols={10} rows={10} let:item>
+	<div class="item">
+		{item.id}
+		{item.movable === false ? 'Cant move' : ''}
+		{item.resizable === false ? 'Cant resize' : ''}
+	</div>
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+	}
+</style>
diff --git a/src/routes/examples/readonly/+page.svelte b/src/routes/examples/readonly/+page.svelte
new file mode 100644
index 0000000..54b055b
--- /dev/null
+++ b/src/routes/examples/readonly/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import Grid from '$lib';
+
+	const items = [
+		{ id: '0', x: 0, y: 0, w: 2, h: 5 },
+		{ id: '1', x: 2, y: 2, w: 2, h: 2 },
+		{ id: '2', x: 2, y: 0, w: 1, h: 2 },
+		{ id: '3', x: 3, y: 0, w: 2, h: 2 },
+		{ id: '4', x: 4, y: 2, w: 1, h: 3 },
+		{ id: '5', x: 8, y: 0, w: 2, h: 8 },
+		{ id: '6', x: 4, y: 5, w: 1, h: 1 },
+		{ id: '7', x: 2, y: 6, w: 3, h: 2 },
+		{ id: '8', x: 2, y: 4, w: 2, h: 2 }
+	];
+</script>
+
+<Grid {items} cols={10} rows={10} readOnly let:item>
+	<div class="item">{item.id}</div>
+</Grid>
+
+<style>
+	.item {
+		display: grid;
+		place-items: center;
+		background-color: rgb(150, 150, 150);
+		width: 100%;
+		height: 100%;
+	}
+</style>

From 787fd18b304489963ee92fec71d362041358f183 Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Sat, 26 Nov 2022 00:11:51 +0500
Subject: [PATCH 08/10] =?UTF-8?q?=F0=9F=A7=AB=20Fix=20lint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4977f54..0a13735 100644
--- a/README.md
+++ b/README.md
@@ -57,7 +57,7 @@ pnpm install svelte-grid-extended
 | h         | Height of the item in grid units.                                   | number  | requried  |
 | movable   | If true, item can be moved by user.                                 | boolean | true      |
 | resizable | If true, item can be resized by user.                               | boolean | true      |
-| data      | Custom attributes. 🦌                                                | T       | undefined |
+| data      | Custom attributes. 🦌                                               | T       | undefined |
 
 ### Style related props:
 
@@ -245,7 +245,7 @@ Grid can be styled with classes passed to various props. Check [Style related pr
 
 ### Disable interactions
 
-To disable interactions, set `readOnly` prop to `true`. Or set `movable` and/or `resizable` to `false` on specific item. 
+To disable interactions, set `readOnly` prop to `true`. Or set `movable` and/or `resizable` to `false` on specific item.
 
 Read Only grid: ✨ [repl](https://svelte.dev/repl/29ce85a23a714c51b6638f12f5ecdd7c?version=3.53.1)
 
@@ -272,13 +272,11 @@ Make item non-interactive: ✨ [repl](https://svelte.dev/repl/1b3b9b9b9b9b9b9b9b
 
 	const items = [
 		{ id: '0', x: 0, y: 0, w: 1, h: 1, movable: false },
-		{ id: '1', x: 0, y: 1, w: 1, h: 1, movable: false, resizable: false}
+		{ id: '1', x: 0, y: 1, w: 1, h: 1, movable: false, resizable: false }
 	];
 </script>
 
 <Grid {items} cols={10} rows={10}>
 	<div>Content</div>
 </Grid>
-
 ```
-

From d6d8ea5b41c987d73964e31e7cbc72147e317693 Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Sat, 26 Nov 2022 00:14:11 +0500
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=A7=AB=20Fix=20lint=20again?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/GridItem.svelte | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/lib/GridItem.svelte b/src/lib/GridItem.svelte
index 947bc71..b9c27f7 100644
--- a/src/lib/GridItem.svelte
+++ b/src/lib/GridItem.svelte
@@ -7,7 +7,6 @@
 	import { hasCollisions } from './utils/grid';
 
 	import type { LayoutItem, ItemSize, ItemPosition, GridParams } from './types';
-	import Grid from './Grid.svelte';
 
 	const dispatch = createEventDispatcher<{
 		itemchange: { item: LayoutItem };
@@ -77,9 +76,17 @@
 	const resizable =
 		!gridParams.readOnly && item.resizable === undefined && item.resizable !== false;
 
-	const moveAction = movable ? move : () => {};
-
-	const resizeAction = resizable ? resize : () => {};
+	const moveAction = movable
+		? move
+		: () => {
+				// do nothing
+		  };
+
+	const resizeAction = resizable
+		? resize
+		: () => {
+				// do nothing
+		  };
 
 	function start() {
 		active = true;

From e06f6fc011547e0004a4a71b944b42cb91bb6de4 Mon Sep 17 00:00:00 2001
From: cuire <81014305+cuire@users.noreply.github.com>
Date: Sat, 26 Nov 2022 00:18:28 +0500
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=8E=A1=20v0.1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 14e6a32..c898e13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "svelte-grid-extended",
-	"version": "0.0.3",
+	"version": "0.1.0",
 	"description": "A draggable and resizable grid layout, for Svelte",
 	"repository": "https://github.com/cuire/svelte-grid-extended",
 	"scripts": {