@appulsauce/svelte-grid 2.0.0

package/dist/utils/assert.js

@@ -0,0 +1,23 @@
+export function assertGridOptions(options) {
+    const { cols, rows, itemSize, collision } = options;
+    if (rows !== 0 && collision && collision !== 'none') {
+        console.warn('`rows` is ignored and setted to 0 when `collision` is not `none`');
+    }
+    if (collision && collision !== 'none' && itemSize?.height === undefined) {
+        throw new Error('If `collision` is not `none`, the `itemSize.height` parameter must be specified');
+    }
+    if ((cols === 0 && itemSize?.width === undefined) ||
+        (typeof cols === 'object' && Object.values(cols).includes(0) && itemSize?.width === undefined)) {
+        throw new Error('If `cols` === `0`, the `itemSize.width` parameter must be specified');
+    }
+    if ((rows === 0 && itemSize?.height === undefined) ||
+        (typeof rows === 'object' && Object.values(rows).includes(0) && itemSize?.height === undefined)) {
+        throw new Error('If `rows` === `0`, the `itemSize.height` parameter must be specified');
+    }
+    if (typeof cols === 'number' && cols < 0) {
+        throw new Error('`cols` must be greater than or equal to `0`');
+    }
+    if (typeof rows === 'number' && rows < 0) {
+        throw new Error('`rows` must be greater than or equal to `0`');
+    }
+}

package/dist/utils/breakpoints.d.ts

@@ -0,0 +1,2 @@
+import type { Breakpoints, GridSize } from '../types';
+export declare function findGridSize(cols: GridSize, width: number, breakpoints: Breakpoints): number;

package/dist/utils/breakpoints.js

@@ -0,0 +1,9 @@
+export function findGridSize(cols, width, breakpoints) {
+    if (typeof cols == 'number') {
+        return cols;
+    }
+    return Object.entries(cols).reduce((acc, obj) => Math.abs(width - breakpoints[obj[0]]) <
+        Math.abs(width - breakpoints[acc[0]])
+        ? obj
+        : acc)[1];
+}

package/dist/utils/grid.d.ts

@@ -0,0 +1,9 @@
+import type { GridDimensions, LayoutItem } from '../types';
+export declare function isItemColliding(item: LayoutItem, otherItem: LayoutItem): boolean;
+export declare function getCollisions(currentItem: LayoutItem, items: LayoutItem[]): LayoutItem[];
+export declare function hasCollisions(currentItem: LayoutItem, items: LayoutItem[]): boolean;
+export declare function getGridDimensions(items: LayoutItem[]): GridDimensions;
+export declare function getAvailablePosition(currentItem: LayoutItem, items: LayoutItem[], maxCols: number, maxRows: number): {
+    x: number;
+    y: number;
+} | null;

package/dist/utils/grid.js

@@ -0,0 +1,43 @@
+export function isItemColliding(item, otherItem) {
+    return (item.id !== otherItem.id &&
+        item.x <= otherItem.x + otherItem.w - 1 &&
+        item.y <= otherItem.y + otherItem.h - 1 &&
+        item.x + item.w - 1 >= otherItem.x &&
+        item.y + item.h - 1 >= otherItem.y);
+}
+export function getCollisions(currentItem, items) {
+    return items.filter((item) => isItemColliding(currentItem, item));
+}
+export function hasCollisions(currentItem, items) {
+    return items.some((item) => isItemColliding(currentItem, item));
+}
+export function getGridDimensions(items) {
+    let cols = 0;
+    let rows = 0;
+    items.forEach((item) => {
+        cols = Math.max(cols, item.x + item.w);
+        rows = Math.max(rows, item.y + item.h);
+    });
+    return { cols, rows };
+}
+export function getAvailablePosition(currentItem, items, maxCols, maxRows) {
+    let { cols, rows } = getGridDimensions(items);
+    if (maxCols < Infinity)
+        cols = maxCols;
+    if (maxRows < Infinity)
+        rows = maxRows;
+    for (let y = 0; y <= rows - currentItem.h; y++) {
+        for (let x = 0; x <= cols - currentItem.w; x++) {
+            const item = { ...currentItem, x, y };
+            if (!hasCollisions(item, items)) {
+                const newPosition = { x, y };
+                return newPosition;
+            }
+        }
+    }
+    if (maxRows === Infinity)
+        return { x: 0, y: rows };
+    if (maxCols === Infinity)
+        return { x: cols, y: 0 };
+    return null;
+}

package/dist/utils/item.d.ts

@@ -0,0 +1,13 @@
+import type { GridParams, LayoutItem, ItemPosition, ItemSize, Position, Size } from '../types';
+export declare function coordinate2position(coordinate: number, cellSize: number, gap: number): number;
+export declare function coordinate2size(coordinate: number, cellSize: number, gap: number): number;
+export declare function position2coordinate(position: number, cellSize: number, gap: number): number;
+export declare function size2coordinate(size: number, cellSize: number, gap: number): number;
+export type SnapGridParams = Required<Pick<GridParams, 'itemSize' | 'gap' | 'maxCols' | 'maxRows'>>;
+export declare function snapOnMove(left: number, top: number, item: LayoutItem, gridParams: SnapGridParams): Position;
+export declare function snapOnResize(width: number, height: number, item: LayoutItem, gridParams: SnapGridParams): Size;
+export declare function calcPosition(item: LayoutItem, options: {
+    itemSize: ItemSize;
+    gap: number;
+}): ItemPosition & ItemSize;
+export declare function clamp(num: number, min: number, max: number): number;

package/dist/utils/item.js

@@ -0,0 +1,42 @@
+export function coordinate2position(coordinate, cellSize, gap) {
+    return coordinate * cellSize + (coordinate + 1) * gap;
+}
+export function coordinate2size(coordinate, cellSize, gap) {
+    return coordinate * cellSize + (coordinate - 1) * gap;
+}
+export function position2coordinate(position, cellSize, gap) {
+    return Math.round(position / (cellSize + gap));
+}
+export function size2coordinate(size, cellSize, gap) {
+    return position2coordinate(size + gap * 2, cellSize, gap);
+}
+export function snapOnMove(left, top, item, gridParams) {
+    const { itemSize, gap } = gridParams;
+    const { w, h } = item;
+    let x = position2coordinate(left, itemSize.width, gap);
+    let y = position2coordinate(top, itemSize.height, gap);
+    x = clamp(x, 0, gridParams.maxCols - w);
+    y = clamp(y, 0, gridParams.maxRows - h);
+    return { x, y };
+}
+export function snapOnResize(width, height, item, gridParams) {
+    const { itemSize, gap } = gridParams;
+    const { x, y } = item;
+    let w = position2coordinate(width + gap * 2, itemSize.width, gap);
+    let h = position2coordinate(height + gap * 2, itemSize.height, gap);
+    w = clamp(w, 0, gridParams.maxCols - x);
+    h = clamp(h, 0, gridParams.maxRows - y);
+    return { w, h };
+}
+export function calcPosition(item, options) {
+    const { itemSize, gap } = options;
+    return {
+        left: coordinate2position(item.x, itemSize.width, gap),
+        top: coordinate2position(item.y, itemSize.height, gap),
+        width: coordinate2size(item.w, itemSize.width, gap),
+        height: coordinate2size(item.h, itemSize.height, gap)
+    };
+}
+export function clamp(num, min, max) {
+    return Math.max(Math.min(num, max), min);
+}

package/dist/utils/types.d.ts

@@ -0,0 +1,3 @@
+export type RequireAtLeastOne<T> = {
+    [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>;
+}[keyof T];

package/dist/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,94 @@
+{
+	"name": "@appulsauce/svelte-grid",
+	"version": "2.0.0",
+	"description": "A draggable and resizable grid layout, for Svelte 5",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/KaiErikNiermann/svelte-grid-extended.git"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && pnpm package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "pnpm package",
+		"test": "vitest",
+		"test:unit": "vitest run",
+		"coverage": "vitest run --coverage",
+		"e2e": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
+		"prepare": "husky"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"grid",
+		"drag",
+		"draggable",
+		"resize",
+		"resizable",
+		"fluid",
+		"responsive"
+	],
+	"author": "cuire <garwes@icloud.com>",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/KaiErikNiermann/svelte-grid-extended/issues"
+	},
+	"homepage": "https://github.com/KaiErikNiermann/svelte-grid-extended#readme",
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@playwright/test": "^1.49.0",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.15.0",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@testing-library/svelte": "^5.2.6",
+		"@vitest/coverage-v8": "^2.1.0",
+		"autoprefixer": "^10.4.20",
+		"daisyui": "^4.12.0",
+		"eslint": "^9.17.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.46.0",
+		"globals": "^15.14.0",
+		"husky": "^9.1.0",
+		"jsdom": "^25.0.1",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.2",
+		"publint": "^0.2.12",
+		"svelte": "^5.16.0",
+		"svelte-check": "^4.1.0",
+		"tailwindcss": "^3.4.17",
+		"tslib": "^2.8.1",
+		"typescript": "^5.7.2",
+		"typescript-eslint": "^8.18.0",
+		"vite": "^6.0.0",
+		"vitest": "^2.1.0"
+	},
+	"type": "module",
+	"publishConfig": {
+		"access": "public"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"packageManager": "pnpm@9.15.0"
+}