@gorbulevsv/table 0.0.15 → 0.0.17

package/README.md

@@ -1,117 +1,148 @@
-## Svelte TABLE
-
-Sveltekit компонент таблицы с оформлением на **Bootstrap 6**.
-
-Добавьте `<Table />` на свою страницу.
-
-##
-
-У компонента есть параметры:
-
-- `title` - заголовок таблицы (опционально),
-- `data` - данные, передаваемые в таблицу в формате массива объектов, например:
-
-  ```ts
-  let data = [
-  	{
-  		uid: 1,
-  		name: 'Serge',
-  		email: 'sergify@rr.r',
-  		status: 'ok'
-  	},
-  	{
-  		uid: 2,
-  		name: 'Helen',
-  		email: 'helen@rr.r',
-  		status: 'go'
-  	}
-  ];
-  ```
-
-  , с нужным вам количеством полей,
-
-- `titles` - заголовки колонок таблицы (опционально), если не указывать, то значения берутся из ключей объектов **data**,
-- `grows` - массив **grow** значений (опционально), для задания каждой колонке доли ширины в таблице, например:
-
-  `[2,1,1,1]`,
-  если не указывать, то значения устанавливаются равными единице,
-
--`_class` и `_style` - для задания классов и стилей оформления в формате:
-
-```ts
-{ table?: string; header?: string; row?: string }
-```
-
-, где `table`, `header`, `row` оформляют всю таблицу, заголовки столбцов или строки таблицы соответственно.
-
-##
-
-Пример:
-
-```ts
-let data = [
-	{
-		uid: 1,
-		name: 'Serge',
-		email: 'sergify@rr.r',
-		status: 'ok'
-	},
-	{
-		uid: 2,
-		name: 'Helen',
-		email: 'helen@rr.r',
-		status: 'go'
-	}
-];
-```
-
-```html
-<table {data} grows="{[2,1,1,1]}" />
-```
-
-##
-
-Вы можете отрендерить в ячейке таблицы сниппеты. Например, в качестве **status** предыдущего **data**, мы хотим добавить кнопку с указанием значения **name** из тойже **data**, т.е. хотим сделать как здесь:
-
-![Пример таблицы](assets/Table.png)
-
-тогда:
-
-- создаём сниппет:
-
-  ```html
-  {#snippet block(ob: { name: string })}
-  <button class="btn">{ob.name}</button>
-  {/snippet}
-  ```
-
-- и меняем в **data** **status** на название сниппета **block**, т.е.
-
-  ```ts
-  let data = [
-  	{
-  		uid: 1,
-  		name: 'Serge',
-  		email: 'sergify@rr.r',
-  		status: block
-  	},
-  	{
-  		uid: 2,
-  		name: 'Helen',
-  		email: 'helen@rr.r',
-  		status: block
-  	}
-  ];
-  ```
-
-В сниппете в параметрах нужно указывать объект, а не отдельный параметр. Т.е. нужно
-
-`{#snippet block(ob: { name: string })}`,
-
-а не
-
-`{#snippet block(name: string)}`
-
-Второй вариант не сработает, т.к. внутри `<Table />` это рендерится приблизительно как `{@render cell?.(data[i])}`, где `data[i]` это объект вроде `{uid: 2, name: 'Helen', email: 'helen@rr.r', status: block}`.
-
-Данные для подстановки в сниппет, берутся из объекта **data** (соответствующей ячейки).
+## Svelte TABLE
+
+Sveltekit компонент таблицы с оформлением на **Bootstrap 6**.
+
+Добавьте `<Table />` на свою страницу.
+
+##
+
+У компонента есть параметры:
+
+- `title` - заголовок таблицы (опционально),
+- `data` - данные, передаваемые в таблицу в формате массива объектов, например:
+
+  ```ts
+  let data = [
+  	{
+  		uid: 1,
+  		name: 'Serge',
+  		email: 'sergify@rr.r',
+  		status: 'ok'
+  	},
+  	{
+  		uid: 2,
+  		name: 'Helen',
+  		email: 'helen@rr.r',
+  		status: 'go'
+  	}
+  ];
+  ```
+
+  , с нужным вам количеством полей,
+
+- `titles` - заголовки колонок таблицы (опционально), если не указывать, то значения берутся из ключей объектов **data**,
+- `grows` - массив **grow** значений (опционально), для задания каждой колонке доли ширины в таблице, например:
+
+  `[2,1,1,1]`,
+  если не указывать, то значения устанавливаются равными единице,
+
+-`_class` и `_style` - для задания классов и стилей оформления в формате:
+
+```ts
+{ table?: string; header?: string; row?: string }
+```
+
+, где `table`, `header`, `row` оформляют всю таблицу, заголовки столбцов или строки таблицы соответственно.
+
+##
+
+Пример:
+
+```ts
+let data = [
+	{
+		uid: 1,
+		name: 'Serge',
+		email: 'sergify@rr.r',
+		status: 'ok'
+	},
+	{
+		uid: 2,
+		name: 'Helen',
+		email: 'helen@rr.r',
+		status: 'go'
+	}
+];
+```
+
+```html
+<table {data} grows="{[2,1,1,1]}" />
+```
+
+##
+
+Вы можете отрендерить в ячейке таблицы сниппеты. Тогда нам нужно изменить **data** следующим образом:
+
+```ts
+let data = [
+	{
+		uid: 1,
+		name: 'Max',
+		email: 'max@rr.r',
+		status: 'ok',
+		picture: {
+			snippet: pictureSnippet,
+			url: 'https://avatars.mds.yandex.net/i?id=70ac3804623c28aefe512774776838b4_l-16338923-images-thumbs&n=13',
+			title: 'Привет'
+		}
+	},
+	{
+		uid: 2,
+		name: 'Helen',
+		email: 'helen@rr.r',
+		status: 'ok',
+		picture: {
+			snippet: pictureSnippet,
+			url: 'https://avatars.mds.yandex.net/i?id=dbb82f339bab80491528cf7c02428ee4_l-10752576-images-thumbs&n=13',
+			title: 'Как дела'
+		}
+	}
+];
+```
+
+Здесь мы добавили к данным в **data** поле `picture`, которое содержит поля `snippet`, `url`, `title`. Поле `snippet` в данном случае обязательное, если мы хотим отрендерить этот `picture`, оно равно нашему сниппету. А поля `url`, `title` - это данные, которые мы передаём в сниппет.
+
+Вот пример нашего сниппета:
+
+```ts
+{#snippet pictureSnippet(obj: { picture: { url: string; title: string } })}
+	<div class="d-flex flex-column gap-1 rounded-3 overflow-hidden">
+		<div>{obj.picture.title}</div>
+		<img class="img-fluid rounded-3" src={obj.picture.url} alt={obj.picture.title} />
+	</div>
+{/snippet}
+```
+
+В сниппете в параметрах нужно указывать объект, а не отдельные параметры. Т.е. нужно
+
+```ts
+{#snippet pictureSnippet(obj: { picture: { url: string; title: string } })}
+```
+
+, а не
+
+```ts
+{#snippet pictureSnippet(picture: { url: string; title: string } )}
+```
+
+, и не
+
+```ts
+{#snippet pictureSnippet(url: string; title: string )}
+```
+
+Последние варианты не сработают, т.к. внутри `<Table />` это рендерится приблизительно как `{@render cell?.(data[i])}`, где `data[i]` это объект вроде
+
+```ts
+{
+	uid: 2,
+	name: 'Helen',
+	email: 'helen@rr.r',
+	status: 'ok',
+	picture: {
+		snippet: pictureSnippet,
+		url: 'https://avatars.mds.yandex.net/i?id=dbb82f339bab80491528cf7c02428ee4_l-10752576-images-thumbs&n=13',
+		title: 'Как дела'
+	}
+}
+```

package/dist/components/Table.svelte

@@ -42,6 +42,7 @@
 	});
 
 	function onPrev(i: number, titles: string[], array: any[][]) {
+		console.log(array);
 		if (i > 0) {
 			[titles[i], titles[i - 1]] = [titles[i - 1], titles[i]];
 			[growsState[i], growsState[i - 1]] = [growsState[i - 1], growsState[i]];
@@ -49,26 +50,27 @@
 				[row[i], row[i - 1]] = [row[i - 1], row[i]];
 			}
 		} else {
-			[titles[i], titles[array.length]] = [titles[array.length], titles[i]];
-			[growsState[i], growsState[array.length]] = [growsState[array.length], growsState[i]];
+			const length = array[0].length - 1;
+			[titles[i], titles[length]] = [titles[length], titles[i]];
+			[growsState[i], growsState[length]] = [growsState[length], growsState[i]];
 			for (const row of array) {
-				[row[i], row[array.length]] = [row[array.length], row[i]];
+				[row[i], row[row.length - 1]] = [row[row.length - 1], row[i]];
 			}
 		}
 	}
 	function onNext(i: number, titles: string[], array: any[][]) {
-		if (i > array.length - 1) {
-			[titles[i], titles[0]] = [titles[0], titles[i]];
-			[growsState[i], growsState[0]] = [growsState[0], growsState[i]];
-			for (const row of array) {
-				[row[i], row[0]] = [row[0], row[i]];
-			}
-		} else {
+		if (i < array[0].length - 1) {
 			[titles[i], titles[i + 1]] = [titles[i + 1], titles[i]];
 			[growsState[i], growsState[i + 1]] = [growsState[i + 1], growsState[i]];
 			for (const row of array) {
 				[row[i], row[i + 1]] = [row[i + 1], row[i]];
 			}
+		} else {
+			[titles[i], titles[0]] = [titles[0], titles[i]];
+			[growsState[i], growsState[0]] = [growsState[0], growsState[i]];
+			for (const row of array) {
+				[row[i], row[0]] = [row[0], row[i]];
+			}
 		}
 	}
 </script>
@@ -91,7 +93,7 @@
 			_style={_style?.header}
 		/>
 
-		{#each dataStateFiltered as row, i}
+		{#each dataStateFiltered as row}
 			<TableRow
 				data={row}
 				grows={growsState}

package/dist/components/TableRow.svelte

@@ -7,21 +7,21 @@
 		titles: string[];
 	}
 
-	let { data, grows, _class = 'bg-1 px-3 py-1 bg-50', _style, titles }: IProps = $props();
+	let { data, grows, _class = 'bg-1 bg-50 align-items-center', _style, titles }: IProps = $props();
 	// Объединяем в один объект titles - то будут keys, и data - это будут values
-	const renderedData = $derived(Object.fromEntries(titles.map((k, i) => [k, data[i]])));
+	const dataWithTitles = $derived(Object.fromEntries(titles.map((k, i) => [k, data[i]])));
 </script>
 
 <div class="d-flex align-items-strech w-100">
 	{#each data as cell, i}
 		<div
-			class="d-flex align-items-center gap-1 text-wrap {_class}"
+			class="d-flex gap-1 text-wrap px-3 py-1 {_class}"
 			style="flex: {grows?.[i]} {grows?.[i]} 0%; {_style}"
 		>
-			{#if typeof cell === 'string'}
+			{#if !cell?.snippet}
 				{@html cell}
 			{:else}
-				{@render cell?.(renderedData)}
+				{@render cell?.snippet?.(dataWithTitles)}
 			{/if}
 		</div>
 	{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gorbulevsv/table",
-	"version": "0.0.15",
+	"version": "0.0.17",
 	"publishConfig": {
 		"access": "public"
 	},

package/dist/remotes/fake.remote.d.ts

@@ -1,6 +0,0 @@
-export declare const getData: import("$app/server").RemoteQueryFunction<void, {
-    uid: `${string}-${string}-${string}-${string}-${string}`;
-    name: string;
-    email: string;
-    status: string;
-}[], void>;

package/dist/remotes/fake.remote.js

@@ -1,23 +0,0 @@
-import { query } from '$app/server';
-export const getData = query(async () => {
-    return [
-        {
-            uid: crypto.randomUUID(),
-            name: 'Serge',
-            email: 'sergify@rr.r',
-            status: "<div class='badge bg-info bg-20'>start</div>"
-        },
-        {
-            uid: crypto.randomUUID(),
-            name: 'Helen',
-            email: 'helen@rr.r',
-            status: 'go'
-        },
-        {
-            uid: crypto.randomUUID(),
-            name: 'Max',
-            email: 'max@rr.r',
-            status: 'go'
-        }
-    ];
-});