@rainlanguage/ui-components 0.0.1-alpha.21 → 0.0.1-alpha.210

package/dist/components/TanstackAppTable.svelte

@@ -1,14 +1,138 @@
-<script generics="T">import { invalidateIdQuery } from "../queries/queryClient";
+<script generics="DataItem, InputData = DataItem[]">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
 import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
-import { createEventDispatcher } from "svelte";
+import { afterUpdate, createEventDispatcher, onDestroy, onMount } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
+import { createWindowVirtualizer } from "@tanstack/svelte-virtual";
 const queryClient = useQueryClient();
 const dispatch = createEventDispatcher();
 export let queryKey;
 export let query;
 export let emptyMessage = "None found";
 export let rowHoverable = true;
+export let dataSelector = (pageData) => Array.isArray(pageData) ? pageData : [];
+export let virtualization = {};
+$: enableVirtualization = virtualization.enabled ?? true;
+$: estimatedRowHeight = virtualization.estimatedRowHeight ?? 56;
+$: virtualizationOverscan = virtualization.overscan ?? 8;
+let measuredRowHeight = null;
+$: rowHeight = measuredRowHeight ?? estimatedRowHeight;
+let transformedPages = [];
+let lastPagesRef;
+let lastSelector = dataSelector;
+$: {
+  const currentData = $query.data;
+  const currentPages = currentData?.pages;
+  const selectorChanged = lastSelector !== dataSelector;
+  if (!currentPages) {
+    transformedPages = [];
+    lastPagesRef = void 0;
+    lastSelector = dataSelector;
+  } else if (currentPages !== lastPagesRef || selectorChanged) {
+    transformedPages = currentPages.map((page) => dataSelector(page));
+    lastPagesRef = currentPages;
+    lastSelector = dataSelector;
+  }
+}
+$: flattenedRows = transformedPages.flat();
+$: totalRows = flattenedRows.length;
+$: hasData = totalRows > 0;
+const hasWindow = typeof window !== "undefined";
+let tableContainerElement = null;
+let tableOffsetTop = 0;
+let virtualizerStore = null;
+let virtualizer = null;
+let unsubscribeVirtualizer = null;
+let virtualizationActive = false;
+function updateTableOffset() {
+  if (!enableVirtualization || !hasWindow || !tableContainerElement) {
+    tableOffsetTop = 0;
+    return;
+  }
+  const rect = tableContainerElement.getBoundingClientRect();
+  tableOffsetTop = rect.top + window.scrollY;
+}
+onMount(() => {
+  if (!hasWindow) {
+    return;
+  }
+  virtualizerStore = createWindowVirtualizer({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+  unsubscribeVirtualizer = virtualizerStore.subscribe((instance) => {
+    virtualizer = instance;
+  });
+  updateTableOffset();
+  return () => {
+    unsubscribeVirtualizer?.();
+  };
+});
+afterUpdate(() => {
+  if (enableVirtualization) {
+    updateTableOffset();
+  }
+});
+$: if (virtualizer) {
+  virtualizer.setOptions({
+    count: totalRows,
+    estimateSize: () => rowHeight,
+    overscan: virtualizationOverscan,
+    scrollMargin: tableOffsetTop,
+    getItemKey: (index) => index,
+    enabled: enableVirtualization && totalRows > 0
+  });
+}
+$: virtualizationActive = enableVirtualization && Boolean(virtualizer);
+let virtualItems = [];
+let totalSize = 0;
+let topPadding = 0;
+let bottomPadding = 0;
+let scrollMargin = 0;
+$: {
+  const hasRows = totalRows > 0;
+  scrollMargin = virtualizationActive ? tableOffsetTop : 0;
+  if (virtualizationActive && virtualizer && hasRows) {
+    virtualItems = virtualizer.getVirtualItems();
+    totalSize = virtualizer.getTotalSize();
+    const firstItem = virtualItems[0];
+    const lastItem = virtualItems[virtualItems.length - 1];
+    topPadding = firstItem ? Math.max(0, firstItem.start - scrollMargin) : 0;
+    bottomPadding = lastItem ? Math.max(0, totalSize - (lastItem.end - scrollMargin)) : Math.max(0, totalSize);
+  } else {
+    virtualItems = [];
+    totalSize = 0;
+    topPadding = 0;
+    bottomPadding = 0;
+  }
+}
+onDestroy(() => {
+  unsubscribeVirtualizer?.();
+});
+afterUpdate(() => {
+  if (!virtualizationActive || !virtualizer || !tableContainerElement) {
+    return;
+  }
+  const rows = Array.from(
+    tableContainerElement.querySelectorAll('tbody tr[data-virtual-row="true"]')
+  );
+  if (!rows.length) {
+    return;
+  }
+  for (const row of rows) {
+    virtualizer.measureElement(row);
+  }
+  if (measuredRowHeight === null) {
+    const sampleHeight = rows[0].getBoundingClientRect().height;
+    if (sampleHeight > 0) {
+      measuredRowHeight = sampleHeight;
+    }
+  }
+});
 </script>
 
 <div data-testid="title" class="flex h-16 w-full items-center justify-end">
@@ -21,40 +145,67 @@ export let rowHoverable = true;
 		spin={$query.isLoading || $query.isFetching}
 		on:click={async () => {
 			if (queryKey) {
-				await invalidateIdQuery(queryClient, queryKey);
+				invalidateTanstackQueries(queryClient, [queryKey]);
 			}
-			$query.refetch();
 		}}
 	/>
 </div>
-{#if $query.data?.pages[0].length === 0}
+{#if totalRows === 0}
 	<div data-testid="emptyMessage" class="text-center text-gray-900 dark:text-white">
 		{emptyMessage}
 	</div>
-{:else if $query.data}
-	<Table
-		divClass="cursor-pointer rounded-lg overflow-auto dark:border-none border"
-		hoverable={rowHoverable}
+{:else if hasData}
+	<div
+		class="cursor-pointer overflow-x-auto rounded-lg border dark:border-none"
+		data-testid="tanstackTableContainer"
+		bind:this={tableContainerElement}
 	>
-		<TableHead data-testid="head">
-			<slot name="head" />
-		</TableHead>
-		<TableBody>
-			{#each $query.data?.pages as page}
-				{#each page as item}
-					<TableBodyRow
-						class="whitespace-nowrap"
-						data-testid="bodyRow"
-						on:click={() => {
-							dispatch('clickRow', { item });
-						}}
-					>
-						<slot name="bodyRow" {item} />
-					</TableBodyRow>
-				{/each}
-			{/each}
-		</TableBody>
-	</Table>
+		<Table divClass="min-w-full" class="w-full table-fixed" hoverable={rowHoverable}>
+			<TableHead data-testid="head">
+				<slot name="head" />
+			</TableHead>
+			<TableBody>
+				{#if virtualizationActive && topPadding > 0}
+					<tr aria-hidden="true">
+						<td colspan="1000" class="border-0 p-0" style={`height:${topPadding}px;`} />
+					</tr>
+				{/if}
+				{#if virtualizationActive}
+					{#each virtualItems as virtualItem (virtualItem.key)}
+						<TableBodyRow
+							class="whitespace-nowrap"
+							data-testid="bodyRow"
+							data-virtual-row="true"
+							on:click={() => {
+								dispatch('clickRow', { item: flattenedRows[virtualItem.index] });
+							}}
+						>
+							<slot name="bodyRow" item={flattenedRows[virtualItem.index]} />
+						</TableBodyRow>
+					{/each}
+				{:else}
+					{#each transformedPages as page}
+						{#each page as item}
+							<TableBodyRow
+								class="whitespace-nowrap"
+								data-testid="bodyRow"
+								on:click={() => {
+									dispatch('clickRow', { item });
+								}}
+							>
+								<slot name="bodyRow" {item} />
+							</TableBodyRow>
+						{/each}
+					{/each}
+				{/if}
+				{#if virtualizationActive && bottomPadding > 0}
+					<tr aria-hidden="true">
+						<td colspan="1000" class="border-0 p-0" style={`height:${bottomPadding}px;`} />
+					</tr>
+				{/if}
+			</TableBody>
+		</Table>
+	</div>
 	<div class="mt-2 flex justify-center">
 		<Button
 			data-testid="loadMoreButton"

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

@@ -1,11 +1,17 @@
 import { SvelteComponent } from "svelte";
 import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
-declare class __sveltets_Render<T> {
+declare class __sveltets_Render<DataItem, InputData = DataItem[]> {
     props(): {
-        queryKey: string | undefined;
-        query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
+        queryKey: string;
+        query: CreateInfiniteQueryResult<InfiniteData<InputData, unknown>, Error>;
         emptyMessage?: string;
         rowHoverable?: boolean;
+        dataSelector?: ((pageData: InputData) => DataItem[]) | undefined;
+        virtualization?: {
+            enabled?: boolean;
+            estimatedRowHeight?: number;
+            overscan?: number;
+        } | undefined;
     };
     events(): {
         clickRow: CustomEvent<any>;
@@ -18,13 +24,13 @@ declare class __sveltets_Render<T> {
         title: {};
         head: {};
         bodyRow: {
-            item: T;
+            item: DataItem;
         };
     };
 }
-export type TanstackAppTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type TanstackAppTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type TanstackAppTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class TanstackAppTable<T> extends SvelteComponent<TanstackAppTableProps<T>, TanstackAppTableEvents<T>, TanstackAppTableSlots<T>> {
+export type TanstackAppTableProps<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['props']>;
+export type TanstackAppTableEvents<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['events']>;
+export type TanstackAppTableSlots<DataItem, InputData = DataItem[]> = ReturnType<__sveltets_Render<DataItem, InputData>['slots']>;
+export default class TanstackAppTable<DataItem, InputData = DataItem[]> extends SvelteComponent<TanstackAppTableProps<DataItem, InputData>, TanstackAppTableEvents<DataItem, InputData>, TanstackAppTableSlots<DataItem, InputData>> {
 }
 export {};

package/dist/components/ToastDetail.svelte

@@ -0,0 +1,42 @@
+<script>import { Toast } from "flowbite-svelte";
+import { slide } from "svelte/transition";
+import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
+import { useToasts } from "../providers/toasts/useToasts";
+export let toast;
+export let i;
+const { removeToast } = useToasts();
+</script>
+
+<Toast
+	on:close={() => removeToast(i)}
+	dismissable={true}
+	transition={slide}
+	color={toast.color}
+	class="mb-2"
+>
+	<svelte:fragment slot="icon">
+		{#if toast.type === 'success'}
+			<CheckCircleSolid class="h-5 w-5" data-testid="success-icon" />
+		{:else if toast.type === 'error'}
+			<CloseCircleSolid class="h-5 w-5" data-testid="error-icon" />
+		{/if}
+	</svelte:fragment>
+	<p class="font-semibold">{toast.message}</p>
+	{#if toast.detail}
+		<p>{toast.detail}</p>
+	{/if}
+	{#if toast.links}
+		<div class="flex flex-col">
+			{#each toast.links as { link, label }}
+				<a
+					href={link}
+					target="_blank"
+					rel="noopener noreferrer"
+					class="text-blue-500 hover:underline"
+				>
+					{label}
+				</a>
+			{/each}
+		</div>
+	{/if}
+</Toast>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ToastProps } from '../types/toast';
+declare const __propDef: {
+    props: {
+        toast: ToastProps;
+        i: number;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ToastDetailProps = typeof __propDef.props;
+export type ToastDetailEvents = typeof __propDef.events;
+export type ToastDetailSlots = typeof __propDef.slots;
+export default class ToastDetail extends SvelteComponent<ToastDetailProps, ToastDetailEvents, ToastDetailSlots> {
+}
+export {};

package/dist/components/Tooltip.svelte

@@ -0,0 +1,8 @@
+<script>import { Tooltip } from "flowbite-svelte";
+export let triggeredBy = "";
+export let customClass = "";
+</script>
+
+<Tooltip {triggeredBy} class={`z-[99] shadow-none ${customClass}`}>
+	<slot />
+</Tooltip>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        triggeredBy?: string;
+        customClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TooltipProps = typeof __propDef.props;
+export type TooltipEvents = typeof __propDef.events;
+export type TooltipSlots = typeof __propDef.slots;
+export default class Tooltip extends SvelteComponent<TooltipProps, TooltipEvents, TooltipSlots> {
+}
+export {};

package/dist/components/VaultBalanceChangeTypeFilter.svelte

@@ -0,0 +1,23 @@
+<script>import {} from "@rainlanguage/orderbook";
+import DropdownCheckbox from "./dropdown/DropdownCheckbox.svelte";
+import { VAULT_BALANCE_CHANGE_FILTER_LABELS } from "../utils/vaultBalanceChangeLabels";
+export let value = void 0;
+const filterOptions = VAULT_BALANCE_CHANGE_FILTER_LABELS;
+let typeFilter = {};
+$: {
+  const keys = Object.keys(typeFilter);
+  if (keys.length > 0 && keys.length < Object.keys(filterOptions).length) {
+    value = keys.sort();
+  } else {
+    value = void 0;
+  }
+}
+</script>
+
+<DropdownCheckbox
+	options={filterOptions}
+	bind:value={typeFilter}
+	label="Change Type"
+	allLabel="All types"
+	onlyTitle={true}
+/>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type VaultBalanceChangeFilter } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        value?: VaultBalanceChangeFilter[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultBalanceChangeTypeFilterProps = typeof __propDef.props;
+export type VaultBalanceChangeTypeFilterEvents = typeof __propDef.events;
+export type VaultBalanceChangeTypeFilterSlots = typeof __propDef.slots;
+export default class VaultBalanceChangeTypeFilter extends SvelteComponent<VaultBalanceChangeTypeFilterProps, VaultBalanceChangeTypeFilterEvents, VaultBalanceChangeTypeFilterSlots> {
+}
+export {};

package/dist/components/VaultCard.svelte

@@ -0,0 +1,18 @@
+<script>import { goto } from "$app/navigation";
+export let vault;
+const handleClick = (event) => {
+  event.stopPropagation();
+  event.preventDefault();
+  goto(`/vaults/${vault.chainId}-${vault.orderbook}-${vault.id}`);
+};
+</script>
+
+<button
+	type="button"
+	class="flex flex-col rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-left shadow-sm transition-colors hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600"
+	on:click={handleClick}
+	data-testid="vault-card"
+>
+	<span class="font-semibold text-gray-800 dark:text-gray-200">{vault.token.symbol}</span>
+	<span class="truncate text-xs text-gray-500 dark:text-gray-400">{vault.formattedBalance}</span>
+</button>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { RaindexVault } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        vault: RaindexVault;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultCardProps = typeof __propDef.props;
+export type VaultCardEvents = typeof __propDef.events;
+export type VaultCardSlots = typeof __propDef.slots;
+export default class VaultCard extends SvelteComponent<VaultCardProps, VaultCardEvents, VaultCardSlots> {
+}
+export {};

package/dist/components/charts/LightweightChart.svelte

@@ -1,4 +1,4 @@
-<script generics="T extends keyof SeriesOptionsMap, D, O">import { Spinner } from "flowbite-svelte";
+<script generics="T extends keyof SeriesOptionsMap, O">import { Spinner } from "flowbite-svelte";
 import {
   createChart
 } from "lightweight-charts";

package/dist/components/charts/LightweightChart.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { Readable } from 'svelte/store';
 import { type IChartApi, type UTCTimestamp, type ISeriesApi, type WhitespaceData, type Time, type DeepPartial, type SeriesOptionsCommon, type SeriesOptionsMap } from 'lightweight-charts';
-declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
+declare class __sveltets_Render<T extends keyof SeriesOptionsMap, O> {
     props(): {
         [x: string]: any;
         data?: {
@@ -21,9 +21,9 @@ declare class __sveltets_Render<T extends keyof SeriesOptionsMap, D, O> {
     };
     slots(): {};
 }
-export type LightweightChartProps<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['props']>;
-export type LightweightChartEvents<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['events']>;
-export type LightweightChartSlots<T extends keyof SeriesOptionsMap, D, O> = ReturnType<__sveltets_Render<T, D, O>['slots']>;
-export default class LightweightChart<T extends keyof SeriesOptionsMap, D, O> extends SvelteComponent<LightweightChartProps<T, D, O>, LightweightChartEvents<T, D, O>, LightweightChartSlots<T, D, O>> {
+export type LightweightChartProps<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['props']>;
+export type LightweightChartEvents<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['events']>;
+export type LightweightChartSlots<T extends keyof SeriesOptionsMap, O> = ReturnType<__sveltets_Render<T, O>['slots']>;
+export default class LightweightChart<T extends keyof SeriesOptionsMap, O> extends SvelteComponent<LightweightChartProps<T, O>, LightweightChartEvents<T, O>, LightweightChartSlots<T, O>> {
 }
 export {};