@gorbulevsv/table 0.0.0-stage → 0.0.11

package/README.md

@@ -1,3 +1,111 @@
-# Temporary Holding Version
+## Svelte TABLE
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Sveltekit компонент таблицы с оформлением на **Bootstrap 6**.
+
+Добавьте `<Table />` на свою страницу.
+
+##
+
+У компонента есть параметры:
+
+- `title` - заголовок таблицы (опционально),
+- `data` - данные, передаваемые в таблицу в формате массива объектов, например:
+
+  ```json
+  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**, т.е. хотим сделать как здесь:
+
+![Пример таблицы](/static/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** (соответствующей ячейки).

package/dist/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/dist/components/PageTitle.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { STORE } from '#lib/scripts/store.svelte.ts';
+	import { onDestroy, onMount } from 'svelte';
+
+	let { children } = $props();
+
+	onMount(() => {
+		STORE.pageTitle = children;
+	});
+	onDestroy(() => {
+		STORE.pageTitle = null;
+	});
+</script>

package/dist/components/PageTitle.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const PageTitle: import("svelte").Component<{
+    children: any;
+}, {}, "">;
+type PageTitle = ReturnType<typeof PageTitle>;
+export default PageTitle;

package/dist/components/Table.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import TableHeader from '#lib/components/TableHeader.svelte';
+	import TableRow from '#lib/components/TableRow.svelte';
+	import type { ITableFilter } from '#lib/models/ITableFilter.ts';
+
+	interface IProps {
+		title?: string;
+		data: any[];
+		titles?: string[];
+		grows?: number[];
+		_class?: { table?: string; header?: string; row?: string };
+		_style?: { table?: string; header?: string; row?: string };
+	}
+
+	let { title, data, titles, grows, _class, _style }: IProps = $props();
+
+	let dataState = $state(data.map((v) => Object.values(v)));
+	let titlesState = $state(titles || Object.keys(data[0]).map((v) => v));
+	let growsState = $state(grows || Object.keys(dataState[0]).map((v) => 1));
+
+	let filter: ITableFilter = $state({
+		sort: {
+			i: 0,
+			direction: 'down'
+		}
+	});
+	let dataStateFiltered = $derived.by(() => {
+		try {
+			if (filter.sort.direction === 'down') {
+				return [...dataState].sort((a, b) =>
+					String(a[filter.sort.i]).localeCompare(String(b[filter.sort.i]))
+				);
+			}
+			if (filter.sort.direction === 'up') {
+				return [...dataState].sort((a, b) =>
+					String(b[filter.sort.i]).localeCompare(String(a[filter.sort.i]))
+				);
+			}
+		} catch (error) {
+			return [...dataState];
+		}
+	});
+
+	function onPrev(i: number, titles: string[], array: any[][]) {
+		if (i > 0) {
+			[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[array.length]] = [titles[array.length], titles[i]];
+			[growsState[i], growsState[array.length]] = [growsState[array.length], growsState[i]];
+			for (const row of array) {
+				[row[i], row[array.length]] = [row[array.length], 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 {
+			[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]];
+			}
+		}
+	}
+</script>
+
+<div>
+	<h4 class="ms-1 mb-3">{title}</h4>
+	<div class="rounded-3 overflow-hidden {_class?.table}" style={_style?.table}>
+		<TableHeader
+			data={titlesState}
+			grows={growsState}
+			{filter}
+			onClickPrev={(i) => onPrev(i, titlesState, dataState)}
+			onClickNext={(i) => onNext(i, titlesState, dataState)}
+			onChangeGrow={(i, value) => (growsState[i] = value)}
+			onClickSort={(i) => {
+				if (filter.sort.i != i) filter.sort = { i: i, direction: 'down' };
+				else filter.sort = { i: i, direction: filter.sort.direction === 'down' ? 'up' : 'down' };
+			}}
+			_class={_class?.header}
+			_style={_style?.header}
+		/>
+
+		{#each dataStateFiltered as row, i}
+			<TableRow
+				data={row}
+				grows={growsState}
+				_class={_class?.row}
+				_style={_style?.row}
+				titles={titlesState}
+			/>
+		{/each}
+	</div>
+</div>

package/dist/components/Table.svelte.d.ts

@@ -0,0 +1,19 @@
+interface IProps {
+    title?: string;
+    data: any[];
+    titles?: string[];
+    grows?: number[];
+    _class?: {
+        table?: string;
+        header?: string;
+        row?: string;
+    };
+    _style?: {
+        table?: string;
+        header?: string;
+        row?: string;
+    };
+}
+declare const Table: import("svelte").Component<IProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/TableHeader.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { ITableFilter } from '#lib/models/ITableFilter.ts';
+
+	interface IProps {
+		data: any;
+		grows: number[];
+		filter: ITableFilter;
+		onClickPrev?: (i: number) => void;
+		onClickNext?: (i: number) => void;
+		onChangeGrow?: (i: number, value: number) => void;
+		onClickSort?: (i: number) => void;
+		_class?: string;
+		_style?: string;
+	}
+
+	let {
+		data,
+		grows,
+		filter,
+		onClickPrev,
+		onClickNext,
+		onChangeGrow,
+		onClickSort,
+		_class = 'bg-2 px-3 py-1 fw-bold',
+		_style
+	}: IProps = $props();
+</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}"
+			style="flex: {grows?.[i]} {grows?.[i]} 0%; {_style}"
+		>
+			{@html cell}
+			<div class="d-flex align-items-center gap-0" style="gap:3px">
+				<button title="вперёд" class="btn btn-xs rounded-3 p-1" onclick={() => onClickPrev?.(i)}>
+					<i class="bi bi-chevron-left"></i>
+				</button>
+				<button title="назад" class="btn btn-xs rounded-3 p-1" onclick={() => onClickNext?.(i)}>
+					<i class="bi bi-chevron-right"></i>
+				</button>
+				<button
+					title="доля ширины таблицы"
+					class="btn btn-xs rounded-3 py-1 px-2"
+					data-bs-toggle="menu"
+				>
+					{grows?.[i]}
+				</button>
+				<div class="menu border-0 rounded-3 shadow-sm">
+					{#each new Array(10) as _, value}
+						<button class="menu-item fs-xs rounded-3" onclick={() => onChangeGrow?.(i, value + 1)}>
+							{value + 1}
+						</button>
+					{/each}
+				</div>
+			</div>
+			<div class="flex-grow-1 d-flex align-items-center justify-content-end">
+				<button title="" class="btn-icon btn-xs rounded-3" onclick={() => onClickSort?.(i)}>
+					{#if filter.sort.i === i && filter.sort.direction === 'down'}
+						<i title="по убыванию" class="bi bi-chevron-down"></i>
+					{:else if filter.sort.i === i && filter.sort.direction === 'up'}
+						<i title="по возрастанию" class="bi bi-chevron-up"></i>
+					{:else}
+						<i title="сортировать" class="bi bi-chevron-expand"></i>
+					{/if}
+				</button>
+			</div>
+		</div>
+	{/each}
+</div>

package/dist/components/TableHeader.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { ITableFilter } from '#lib/models/ITableFilter.ts';
+interface IProps {
+    data: any;
+    grows: number[];
+    filter: ITableFilter;
+    onClickPrev?: (i: number) => void;
+    onClickNext?: (i: number) => void;
+    onChangeGrow?: (i: number, value: number) => void;
+    onClickSort?: (i: number) => void;
+    _class?: string;
+    _style?: string;
+}
+declare const TableHeader: import("svelte").Component<IProps, {}, "">;
+type TableHeader = ReturnType<typeof TableHeader>;
+export default TableHeader;

package/dist/components/TableRow.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface IProps {
+		data: any;
+		grows: number[];
+		_class?: string;
+		_style?: string;
+		titles: string[];
+	}
+
+	let { data, grows, _class = 'bg-1 px-3 py-1 bg-50', _style, titles }: IProps = $props();
+	// Объединяем в один объект titles - то будут keys, и data - это будут values
+	const renderedData = $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}"
+			style="flex: {grows?.[i]} {grows?.[i]} 0%; {_style}"
+		>
+			{#if typeof cell !== 'function'}
+				{@html cell}
+			{:else}
+				{@render cell?.(renderedData)}
+			{/if}
+		</div>
+	{/each}
+</div>

package/dist/components/TableRow.svelte.d.ts

@@ -0,0 +1,10 @@
+interface IProps {
+    data: any;
+    grows: number[];
+    _class?: string;
+    _style?: string;
+    titles: string[];
+}
+declare const TableRow: import("svelte").Component<IProps, {}, "">;
+type TableRow = ReturnType<typeof TableRow>;
+export default TableRow;

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as TableHeader } from './components/TableHeader.svelte';
+export { default as TableRow } from './components/TableRow.svelte';
+export { default as Table } from './components/Table.svelte';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as TableHeader } from './components/TableHeader.svelte';
+export { default as TableRow } from './components/TableRow.svelte';
+export { default as Table } from './components/Table.svelte';

package/dist/models/ITableFilter.d.ts

@@ -0,0 +1,6 @@
+export interface ITableFilter {
+    sort: {
+        i: number;
+        direction: 'down' | 'up';
+    };
+}

package/dist/models/ITableFilter.js

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

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,23 @@
+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'
+        }
+    ];
+});

package/dist/scripts/store.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+interface ISTORE {
+    pageTitle: Snippet<[]> | null;
+}
+export declare let STORE: ISTORE;
+export {};

package/dist/scripts/store.svelte.js

@@ -0,0 +1,3 @@
+export let STORE = $state({
+    pageTitle: null
+});

package/package.json

@@ -1,6 +1,71 @@
-{
-  "name": "@gorbulevsv/table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+	"name": "@gorbulevsv/table",
+	"version": "0.0.11",
+	"publishConfig": {
+		"access": "public"
+	},
+	"keywords": [
+		"gorbulevsv",
+		"sveltekit",
+		"svelte",
+		"table"
+	],
+	"peerDependencies": {
+		"@sveltejs/kit": "^3.0.0",
+		"svelte": "^5.0.0"
+	},
+	"files": [
+		"dist"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./components/*": {
+			"types": "./dist/components/*.d.ts",
+			"svelte": "./dist/components/*.svelte",
+			"default": "./dist/components/*.svelte"
+		},
+		"./package.json": "./package.json"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^8.0.0",
+		"@sveltejs/kit": "^3.0.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"publint": "^0.3.21",
+		"svelte": "^5.57.2",
+		"svelte-check": "^4.6.0",
+		"typescript": "^6.0.3",
+		"vite": "^8.3.0"
+	},
+	"imports": {
+		"#lib": "./src/lib/index.js",
+		"#lib/*": "./src/lib/*"
+	},
+	"dependencies": {
+		"bootstrap": "^6.0.0-alpha.1",
+		"bootstrap-icons": "^1.13.2"
+	}
+}