@max-ts/svelte 0.2.0 → 0.3.0

package/dist/components/DataGrid/Body/Body.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+type TRow = $$Generic;
+
+import { Row } from '../Row/index.js';
+import { State } from '../State/index.js';
+import styles from './styles.css.js';
+import type { BodyProps } from './types.js';
+
+let {
+	isError,
+	isLoading,
+	emptyState,
+	errorState,
+	columns,
+	rows,
+	rowHeight,
+	keyId,
+	onRowClick,
+	onRetry,
+}: BodyProps<TRow> = $props();
+
+const isEmpty = $derived(rows.length === 0);
+const isStateVisible = $derived(isError || isLoading || isEmpty);
+</script>
+
+{#if isStateVisible}
+	<tbody class={styles.container}>
+		<State
+			{emptyState}
+			{errorState}
+			{isEmpty}
+			{isError}
+			{isLoading}
+			columnsLength={columns.length}
+			{onRetry}
+		/>
+	</tbody>
+{:else}
+	<tbody class={styles.container}>
+		{#each rows as row, index (`${row[keyId]}`)}
+			{@const rowId = String(row[keyId])}
+			<Row
+				{row}
+				{rowId}
+				{rowHeight}
+				{columns}
+				{onRowClick}
+				rowIndex={index}
+			/>
+		{/each}
+	</tbody>
+{/if}

package/dist/components/DataGrid/Body/Body.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { BodyProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: BodyProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Body: $$IsomorphicComponent;
+type Body<TRow> = InstanceType<typeof Body<TRow>>;
+export default Body;

package/dist/components/DataGrid/Body/index.js

@@ -0,0 +1,2 @@
+import Body from './Body.svelte';
+export { Body };

package/dist/components/DataGrid/Body/styles.css.js

@@ -0,0 +1,11 @@
+import { style } from '../../../styles/index.js';
+const container = style({
+    height: '100%',
+    margin: 0,
+    padding: 0,
+    scrollBehavior: 'smooth',
+    listStyle: 'none',
+});
+export default {
+    container,
+};

package/dist/components/DataGrid/Body/types.js

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

package/dist/components/DataGrid/Cell/Cell.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { calculateSize } from '../../../styles/index.js';
+import styles from './styles.css.js';
+import type { CellProps } from './types.js';
+
+type TRow = $$Generic;
+
+let { row, column, rowIndex, height }: CellProps<TRow> = $props();
+
+const hightValue = $derived(calculateSize(height));
+const widthValue = $derived(calculateSize(column.width));
+</script>
+
+<td
+	align={column.align ?? 'left'}
+	style:background-color={column.cellColor?.(row)}
+	style:height={hightValue}
+	style:width={widthValue}
+	class={[styles.cell,{
+		[styles.disabled]: column.isDisabled
+	}]}>
+	{#if column.cell}
+		{@render column.cell(row, rowIndex)}
+	{:else if column.format}
+		{column.format(row) || '—'}
+	{:else if column.field}
+		{row[column.field] || '—'}
+	{:else}
+		—
+	{/if}
+</td>

package/dist/components/DataGrid/Cell/Cell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CellProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: CellProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Cell: $$IsomorphicComponent;
+type Cell<TRow> = InstanceType<typeof Cell<TRow>>;
+export default Cell;

package/dist/components/DataGrid/Cell/index.js

@@ -0,0 +1,2 @@
+import Cell from './Cell.svelte';
+export { Cell };

package/dist/components/DataGrid/Cell/styles.css.js

@@ -0,0 +1,16 @@
+import { style, theme } from '../../../styles/index.js';
+const cell = style({
+    overflow: 'hidden',
+    padding: `${theme.spacing[1]} ${theme.spacing[2]}`,
+    height: '100%',
+    color: theme.colors.text.primary,
+    fontSize: theme.fontSize.base,
+    borderBottom: `1px solid ${theme.colors.border}`,
+});
+const disabled = style({
+    opacity: 0.5,
+});
+export default {
+    cell,
+    disabled,
+};

package/dist/components/DataGrid/Cell/types.js

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

package/dist/components/DataGrid/DataGrid.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+import { Body } from './Body/index.js';
+import { ROW_HEIGHT } from './constants.js';
+import { Footer } from './Footer/index.js';
+import { Header } from './Header/index.js';
+
+import styles from './styles.css.js';
+import type { DataGridProps } from './types.js';
+
+type TRow = $$Generic;
+
+let {
+	rows,
+	columns,
+	class: className,
+	height = '100%',
+	rowHeight = ROW_HEIGHT,
+	headerHeight = ROW_HEIGHT,
+	keyId,
+	isLoading,
+	isDisabled,
+	isError,
+	emptyState,
+	errorState,
+	onRowClick,
+	onRetry,
+	title,
+	footer,
+	stickyHeader,
+}: DataGridProps<TRow> = $props();
+
+const isFullHeight = $derived(isLoading || isError || rows.length === 0);
+
+// Вычисляемые стили
+const heightValue = $derived(
+	typeof height === 'number' ? `${height}px` : height,
+);
+</script>
+
+<div data-slot='data-grid' style:height={heightValue} class={[styles.container, className]} >
+	<table 
+	class={[
+		styles.table,
+		{
+			[styles.disabled]: isDisabled,
+			[styles.loading]: isLoading,
+			[styles.fullHeight]: isFullHeight,
+		},
+		className
+	]}
+	>
+		{#if title}
+			<caption class={styles.title}>{title}</caption>
+		{/if}
+		
+		<Header columns={columns} height={headerHeight} sticky={stickyHeader} />
+		
+		<Body
+			rows={rows}
+			columns={columns}
+			rowHeight={rowHeight}
+			keyId={keyId}
+			onRowClick={onRowClick}
+			isLoading={isLoading}
+			emptyState={emptyState}
+			errorState={errorState}
+			isError={isError}
+			onRetry={onRetry}
+		/>
+	</table>
+	{#if footer}
+		<Footer>{footer}</Footer>
+	{/if}
+</div>

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

@@ -0,0 +1,25 @@
+import type { DataGridProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: DataGridProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const DataGrid: $$IsomorphicComponent;
+type DataGrid<TRow> = InstanceType<typeof DataGrid<TRow>>;
+export default DataGrid;

package/dist/components/DataGrid/Footer/Footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import styles from './styles.css.js';
+
+let {
+	children,
+	class: className,
+}: {
+	children: Snippet<[]>;
+	class?: string;
+} = $props();
+</script>
+
+<footer class={[styles.footer, className]}>
+	{@render children()}
+</footer>

package/dist/components/DataGrid/Footer/Footer.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet<[]>;
+    class?: string;
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/DataGrid/Footer/index.js

@@ -0,0 +1,2 @@
+import Footer from './Footer.svelte';
+export { Footer };

package/dist/components/DataGrid/Footer/styles.css.js

@@ -0,0 +1,22 @@
+import { style, theme } from '../../../styles/index.js';
+const footer = style({
+    width: '100%',
+    height: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background.paper,
+    position: 'sticky',
+    bottom: 0,
+    padding: theme.spacing[2],
+    borderTop: `1px solid ${theme.colors.border}`,
+    marginTop: 'auto',
+    selectors: {
+        '&:empty': {
+            display: 'none',
+        },
+    },
+});
+export default {
+    footer,
+};

package/dist/components/DataGrid/Header/Header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import { HeaderCell } from '../HeaderCell/index.js';
+import styles from './styles.css.js';
+import type { HeaderProps } from './types.js';
+
+type TRow = $$Generic;
+
+let { columns, height, sticky }: HeaderProps<TRow> = $props();
+</script>
+
+<thead>
+	<tr class={{
+		[styles.sticky]: sticky
+	}}>
+		{#each columns as column (column.title)}
+			<HeaderCell
+				{column}
+				{height}
+				width={column.width}
+			/>
+		{/each}
+	</tr>
+</thead>

package/dist/components/DataGrid/Header/Header.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { HeaderProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: HeaderProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Header: $$IsomorphicComponent;
+type Header<TRow> = InstanceType<typeof Header<TRow>>;
+export default Header;

package/dist/components/DataGrid/Header/index.js

@@ -0,0 +1,2 @@
+import Header from './Header.svelte';
+export { Header };

package/dist/components/DataGrid/Header/styles.css.js

@@ -0,0 +1,9 @@
+import { style } from '../../../styles/index.js';
+const sticky = style({
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
+});
+export default {
+    sticky,
+};

package/dist/components/DataGrid/Header/types.js

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

package/dist/components/DataGrid/HeaderCell/HeaderCell.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+type TRow = $$Generic;
+
+import styles from './styles.css.js';
+import type { HeaderCellProps } from './types.js';
+
+let { column, height, width }: HeaderCellProps<TRow> = $props();
+
+const alignment = $derived(column.align ?? 'left');
+const hightValue = $derived(
+	typeof height === 'number' ? `${height}px` : height,
+);
+const widthValue = $derived(typeof width === 'number' ? `${width}px` : width);
+</script>
+
+<th
+	title={column.title}
+	class={styles.cell}
+	align={alignment}
+	style:color={column.color}
+	style:height={hightValue}
+	style:width={widthValue}>
+	{#if column.headerCell}
+		{@render column.headerCell(column)}
+	{:else}
+		{column.title}
+	{/if}
+</th>

package/dist/components/DataGrid/HeaderCell/HeaderCell.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { HeaderCellProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: HeaderCellProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const HeaderCell: $$IsomorphicComponent;
+type HeaderCell<TRow> = InstanceType<typeof HeaderCell<TRow>>;
+export default HeaderCell;

package/dist/components/DataGrid/HeaderCell/index.js

@@ -0,0 +1,2 @@
+import HeaderCell from './HeaderCell.svelte';
+export { HeaderCell };

package/dist/components/DataGrid/HeaderCell/styles.css.js

@@ -0,0 +1,13 @@
+import { style, theme } from '../../../styles/index.js';
+const cell = style({
+    padding: `${theme.spacing[1]} ${theme.spacing[2]}`,
+    width: '100%',
+    fontWeight: theme.fontWeight.semibold,
+    fontSize: theme.fontSize.sm,
+    overflowWrap: 'break-word',
+    backgroundColor: theme.colors.background.paper,
+    borderBottom: `1px solid ${theme.colors.border}`,
+});
+export default {
+    cell,
+};

package/dist/components/DataGrid/HeaderCell/types.js

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

package/dist/components/DataGrid/Row/Row.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+type TRow = $$Generic;
+
+import { Cell } from '../Cell/index.js';
+import styles from './styles.css.js';
+import type { RowProps } from './types.js';
+
+let { row, columns, rowIndex, rowId, rowHeight, onRowClick }: RowProps<TRow> =
+	$props();
+
+const handleSelect = () => {
+	if (onRowClick) {
+		onRowClick(row);
+	}
+};
+</script>
+
+<tr 
+	onclick={handleSelect}
+	onkeydown={handleSelect}
+	class={[styles.row, { [styles.selectable]: !!onRowClick }]}
+>
+	{#each columns as column, index (`${rowId}-${index}`)}
+		<Cell
+			{row}
+			{rowIndex}
+			{column}
+			height={rowHeight}
+		/>
+	{/each}
+</tr>

package/dist/components/DataGrid/Row/Row.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { RowProps } from './types.js';
+declare function $$render<TRow>(): {
+    props: RowProps<TRow>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Row: $$IsomorphicComponent;
+type Row<TRow> = InstanceType<typeof Row<TRow>>;
+export default Row;

package/dist/components/DataGrid/Row/index.js

@@ -0,0 +1,2 @@
+import Row from './Row.svelte';
+export { Row };

package/dist/components/DataGrid/Row/styles.css.js

@@ -0,0 +1,18 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const row = style({
+    backgroundColor: 'transparent',
+    transition: 'background-color 0.2s ease',
+});
+globalStyle(`${row}:last-child td`, {
+    borderBottom: 'none',
+});
+const selectable = style({
+    cursor: 'pointer',
+    ':hover': {
+        backgroundColor: theme.colors.background.elementHover,
+    },
+});
+export default {
+    row,
+    selectable,
+};

package/dist/components/DataGrid/Row/types.js

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

package/dist/components/DataGrid/State/State.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+import { Button } from '../../Button/index.js';
+import { CircularProgress } from '../../CircularProgress/index.js';
+import { Placeholder } from '../../Placeholder/index.js';
+import styles from './styles.css.js';
+import type { StateProps } from './types.js';
+
+let {
+	isLoading,
+	isEmpty,
+	columnsLength,
+	emptyState,
+	errorState,
+	isError,
+	onRetry,
+}: StateProps = $props();
+
+const emptyStateData = $derived(emptyState || { text: 'Нет данных' });
+const errorStateData = $derived(errorState || { text: 'Произошла ошибка' });
+</script>
+
+{#snippet actions()}
+	{#if onRetry}
+		<Button onclick={onRetry}>Повторить попытку</Button>
+	{:else}
+		undefined
+	{/if}
+{/snippet}
+
+{#if isLoading}
+	<tr class={styles.container}>
+		<td colSpan={columnsLength} align='center'>
+			<span class={styles.loader}>
+				<CircularProgress />
+			</span>
+		</td>
+	</tr>
+{:else if isEmpty}
+	<tr class={styles.container}>
+		<td colSpan={columnsLength} align='center'>
+			<Placeholder 
+				title={emptyStateData.text} 
+				imgSrc={emptyStateData.imgSrc} 
+				imgAlt={emptyStateData.imgAlt} 
+			/>
+		</td>
+	</tr>
+{:else if isError}
+<tr class={styles.container}>
+		<td colSpan={columnsLength} align='center'>
+			<Placeholder
+				title={errorStateData.text}
+				imgSrc={errorStateData.imgSrc}
+				imgAlt={errorStateData.imgAlt}
+				actions={actions}
+			/>
+		</td>
+	</tr>
+{/if}

package/dist/components/DataGrid/State/State.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { StateProps } from './types.js';
+declare const State: import("svelte").Component<StateProps, {}, "">;
+type State = ReturnType<typeof State>;
+export default State;

package/dist/components/DataGrid/State/index.js

@@ -0,0 +1,2 @@
+import State from './State.svelte';
+export { State };

package/dist/components/DataGrid/State/styles.css.js

@@ -0,0 +1,16 @@
+import { style } from '../../../styles/index.js';
+const container = style({
+    width: '100%',
+    height: '100%',
+});
+const loader = style({
+    height: '100%',
+    minHeight: 50,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+});
+export default {
+    container,
+    loader,
+};

package/dist/components/DataGrid/State/types.js

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

package/dist/components/DataGrid/constants.js

@@ -0,0 +1 @@
+export const ROW_HEIGHT = 40;