windmill-components 1.87.0 → 1.89.1

package/package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import type { AppInput } from '../../../inputType';
+import type { RichConfigurations } from '../../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        initializing?: boolean | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppAggridTableProps = typeof __propDef.props;
+export type AppAggridTableEvents = typeof __propDef.events;
+export type AppAggridTableSlots = typeof __propDef.slots;
+export default class AppAggridTable extends SvelteComponentTyped<AppAggridTableProps, AppAggridTableEvents, AppAggridTableSlots> {
+}
+export {};

package/package/components/apps/components/display/table/AppTable.svelte

@@ -0,0 +1,366 @@
+<script>import { getContext, onMount } from 'svelte';
+import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
+import { writable } from 'svelte/store';
+import { createSvelteTable, flexRender } from '@tanstack/svelte-table';
+import AppButton from '../../buttons/AppButton.svelte';
+import { classNames, isObject } from '../../../../../utils';
+import DebouncedInput from '../../helpers/DebouncedInput.svelte';
+import AppTableFooter from './AppTableFooter.svelte';
+import { tableOptions } from './tableOptions';
+import Alert from '../../../../common/alert/Alert.svelte';
+import { components } from '../../../editor/component';
+import { concatCustomCss } from '../../../utils';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../../editor/appUtils';
+import ResolveConfig from '../../helpers/ResolveConfig.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let actionButtons;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+let result = undefined;
+const { app, worldStore, componentControl, selectedComponent, hoverStore, mode } = getContext('AppViewerContext');
+let searchValue = '';
+let outputs = initOutput($worldStore, id, {
+    selectedRowIndex: 0,
+    selectedRow: undefined,
+    loading: false,
+    result: [],
+    search: '',
+    page: 1
+});
+$: setSearch(searchValue);
+function setSearch(srch) {
+    outputs?.search?.set(srch);
+}
+const options = writable({
+    ...tableOptions,
+    data: [],
+    columns: []
+});
+let table = createSvelteTable(options);
+let resolvedConfig = initConfig(components['tablecomponent'].initialData.configuration, configuration);
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex, force = false) {
+    if (selectedRowIndex !== rowIndex || force) {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row.original, force);
+        outputs?.selectedRowIndex.set(rowIndex, force);
+    }
+}
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: selectedRowIndex === -1 &&
+    Array.isArray(result) &&
+    result.length > 0 &&
+    // We need to wait until the component is mounted so the world is created
+    mounted &&
+    outputs &&
+    toggleRow({ original: result[0] }, 0);
+function searchInResult(result, searchValue) {
+    if (searchValue === '') {
+        return result;
+    }
+    return result.filter((row) => Object.values(row).some((value) => value?.toString()?.includes(searchValue)));
+}
+function renderCell(x, props) {
+    try {
+        return flexRender(x, props);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+function cellIsObject(x, props) {
+    return typeof x != 'string' && typeof x(props) == 'object';
+}
+let filteredResult = [];
+function setFilteredResult() {
+    if (resolvedConfig.search === 'By Runnable' || resolvedConfig.search === 'Disabled') {
+        filteredResult = result ?? [];
+    }
+    else {
+        filteredResult = searchInResult(result ?? [], searchValue);
+    }
+}
+$: (result || resolvedConfig.search || searchValue || resolvedConfig.pagination) &&
+    setFilteredResult();
+$: outputs.page.set($table.getState().pagination.pageIndex);
+function rerender() {
+    if (!Array.isArray(result)) {
+        return;
+    }
+    const headers = Array.from(new Set(result.flatMap((row) => (typeof row == 'object' ? Object.keys(row) : []))));
+    $options = {
+        ...tableOptions,
+        ...(resolvedConfig?.pagination?.selected != 'manual'
+            ? {
+                initialState: {
+                    pagination: {
+                        pageSize: resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20
+                    }
+                }
+            }
+            : {}),
+        manualPagination: resolvedConfig?.pagination?.selected == 'manual',
+        pageCount: resolvedConfig?.pagination?.selected == 'manual'
+            ? resolvedConfig?.pagination?.configuration.manual.pageCount ?? -1
+            : undefined,
+        data: filteredResult,
+        columns: headers.map((header) => {
+            return {
+                accessorKey: header,
+                cell: (info) => info.getValue()
+            };
+        })
+    };
+    table = createSvelteTable(options);
+    if (result) {
+        toggleRow({ original: result[0] }, 0, true);
+    }
+    if (outputs.page.peak()) {
+        $table.setPageIndex(outputs?.page.peak());
+    }
+}
+$: filteredResult && rerender();
+$: css = concatCustomCss($app.css?.tablecomponent, customCss);
+$componentControl[id] = {
+    right: (skipActions) => {
+        if (skipActions) {
+            return false;
+        }
+        const hasActions = actionButtons.length >= 1;
+        if (hasActions) {
+            $selectedComponent = [actionButtons[0].id];
+            return true;
+        }
+        return false;
+    }
+};
+</script>
+
+{#each Object.keys(components['tablecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<RunnableWrapper {outputs} {render} {componentInput} {id} bind:initializing bind:result>
+	{#if Array.isArray(result) && result.every(isObject)}
+		<div
+			class={twMerge(
+				'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
+				css?.container?.class ?? '',
+				'flex flex-col'
+			)}
+			style={css?.container?.style ?? ''}
+		>
+			{#if resolvedConfig.search !== 'Disabled'}
+				<div class="px-2 py-1">
+					<div class="flex items-center">
+						<div class="grow max-w-[300px]">
+							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
+						</div>
+					</div>
+				</div>
+			{/if}
+
+			<div class="overflow-x-auto flex-1 w-full">
+				<table class="relative w-full border-b border-b-gray-200">
+					<thead
+						class={twMerge(
+							'bg-gray-50 text-left',
+							css?.tableHeader?.class ?? '',
+							'sticky top-0 z-40'
+						)}
+						style={css?.tableHeader?.style ?? ''}
+					>
+						{#each $table.getHeaderGroups() as headerGroup}
+							<tr class="divide-x">
+								{#each headerGroup.headers as header}
+									{#if header?.column?.columnDef?.header}
+										{@const context = header?.getContext()}
+										{#if context}
+											{@const component = renderCell(header.column.columnDef.header, context)}
+											<th class="!p-0">
+												<span class="block px-4 py-4 text-sm font-semibold border-b">
+													{#if !header.isPlaceholder && component}
+														<svelte:component this={component} />
+													{/if}
+												</span>
+											</th>
+										{/if}
+									{/if}
+								{/each}
+								{#if actionButtons.length > 0}
+									<th class="!p-0">
+										<span class="block px-4 py-4 text-sm font-semibold border-b"> Actions </span>
+									</th>
+								{/if}
+							</tr>
+						{/each}
+					</thead>
+					<tbody
+						class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
+						style={css?.tableBody?.style ?? ''}
+					>
+						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
+							<tr
+								class={classNames(
+									'last-of-type:!border-b-0',
+									selectedRowIndex === rowIndex
+										? 'bg-blue-100 hover:bg-blue-200'
+										: 'hover:bg-blue-50',
+									'divide-x w-full',
+									selectedRowIndex === rowIndex
+										? 'divide-blue-200 hover:divide-blue-300'
+										: 'divide-gray-200'
+								)}
+							>
+								{#each row.getVisibleCells() as cell, index (index)}
+									{#if cell?.column?.columnDef?.cell}
+										{@const context = cell?.getContext()}
+										{#if context}
+											{@const component = renderCell(cell.column.columnDef.cell, context)}
+											<td
+												on:keydown={() => toggleRow(row, rowIndex)}
+												on:click={() => toggleRow(row, rowIndex)}
+												class="p-4 whitespace-pre-wrap truncate text-xs text-gray-900"
+											>
+												{#if typeof cell.column.columnDef.cell != 'string' && cellIsObject(cell.column.columnDef.cell, context)}
+													{JSON.stringify(cell.column.columnDef.cell(context), null, 4)}
+												{:else if component != undefined}
+													<svelte:component this={component} />
+												{/if}
+											</td>
+										{/if}
+									{/if}
+								{/each}
+
+								{#if actionButtons.length > 0}
+									<td
+										class="p-2"
+										on:keypress={() => toggleRow(row, rowIndex)}
+										on:click={() => toggleRow(row, rowIndex)}
+									>
+										<div class="center-center h-full w-full flex-wrap gap-1">
+											{#each actionButtons as actionButton, actionIndex (actionButton?.id)}
+												<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+												<div
+													on:mouseover|stopPropagation={() => {
+														if (actionButton.id !== $hoverStore) {
+															$hoverStore = actionButton.id
+														}
+													}}
+													on:mouseout|stopPropagation={() => {
+														if ($hoverStore !== undefined) {
+															$hoverStore = undefined
+														}
+													}}
+													class={($selectedComponent?.includes(actionButton.id) ||
+														$hoverStore === actionButton.id) &&
+													$mode !== 'preview'
+														? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
+														: ''}
+												>
+													{#if $selectedComponent?.includes(actionButton.id) || $hoverStore === actionButton.id}
+														<span
+															title={`Id: ${actionButton.id}`}
+															class={classNames(
+																'px-2 text-2xs font-bold w-fit absolute shadow -top-5 -left-[2px] border z-50 rounded-sm',
+																'bg-indigo-500/90 border-indigo-600 text-white'
+															)}
+														>
+															{actionButton.id}
+														</span>
+													{/if}
+													{#if rowIndex == 0}
+														<AppButton
+															extraKey={'idx' + rowIndex}
+															{render}
+															noWFull
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
+															extraQueryParams={{ row: row.original }}
+															componentInput={actionButton.componentInput}
+															controls={{
+																left: () => {
+																	if (actionIndex === 0) {
+																		$selectedComponent = [id]
+																		return true
+																	} else if (actionIndex > 0) {
+																		$selectedComponent = [actionButtons[actionIndex - 1].id]
+																		return true
+																	}
+																	return false
+																},
+																right: () => {
+																	if (actionIndex === actionButtons.length - 1) {
+																		return id
+																	} else if (actionIndex < actionButtons.length - 1) {
+																		$selectedComponent = [actionButtons[actionIndex + 1].id]
+																		return true
+																	}
+																	return false
+																}
+															}}
+														/>
+													{:else}
+														<AppButton
+															extraKey={'idx' + rowIndex}
+															{render}
+															noWFull
+															id={actionButton.id}
+															customCss={actionButton.customCss}
+															configuration={actionButton.configuration}
+															recomputeIds={actionButton.recomputeIds}
+															preclickAction={async () => {
+																toggleRow(row, rowIndex)
+															}}
+															extraQueryParams={{ row: row.original }}
+															componentInput={actionButton.componentInput}
+														/>
+													{/if}
+												</div>
+											{/each}
+										</div>
+									</td>
+								{/if}
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+
+			<AppTableFooter
+				pageSize={resolvedConfig?.pagination?.configuration?.auto?.pageSize ?? 20}
+				manualPagination={resolvedConfig?.pagination?.selected == 'manual'}
+				result={filteredResult}
+				{table}
+				class={css?.tableFooter?.class}
+				style={css?.tableFooter?.style}
+			/>
+		</div>
+	{:else if result != undefined}
+		<div class="flex flex-col h-full w-full overflow-auto">
+			<Alert title="Parsing issues" type="error" size="xs" class="h-full w-full ">
+				The result should be an array of objects. Received:
+				<pre class="w-full bg-white p-2 rounded-md whitespace-pre-wrap"
+					>{JSON.stringify(result, null, 4)}</pre
+				>
+			</Alert>
+		</div>
+	{/if}
+</RunnableWrapper>

package/package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BaseAppComponent, ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { AppInput } from '../../../inputType';
+import { type ButtonComponent } from '../../../editor/component';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: RichConfigurations;
+        actionButtons: (BaseAppComponent & ButtonComponent)[];
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'tablecomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTableProps = typeof __propDef.props;
+export type AppTableEvents = typeof __propDef.events;
+export type AppTableSlots = typeof __propDef.slots;
+export default class AppTable extends SvelteComponentTyped<AppTableProps, AppTableEvents, AppTableSlots> {
+}
+export {};

package/package/components/apps/components/display/table/AppTableFooter.svelte

@@ -0,0 +1,68 @@
+<script>import Button from '../../../../common/button/Button.svelte';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { ChevronLeft, ChevronRight } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let result;
+export let manualPagination;
+export let pageSize;
+export let table;
+let c = '';
+export { c as class };
+export let style = '';
+function downloadResultAsJSON() {
+    const dataStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(result));
+    const downloadAnchorNode = document.createElement('a');
+    downloadAnchorNode.setAttribute('href', dataStr);
+    downloadAnchorNode.setAttribute('download', 'data.json');
+    document.body.appendChild(downloadAnchorNode);
+    downloadAnchorNode.click();
+    downloadAnchorNode.remove();
+}
+</script>
+
+<div
+	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
+	{style}
+>
+	{#if result.length > pageSize || manualPagination}
+		<div class="flex items-center gap-2 flex-row">
+			<Button
+				size="xs"
+				variant="border"
+				color="light"
+				btnClasses="!py-1 !pl-1"
+				on:click={() => $table.previousPage()}
+				disabled={!$table.getCanPreviousPage()}
+			>
+				<ChevronLeft size={14} />
+				Previous
+			</Button>
+			<Button
+				size="xs"
+				variant="border"
+				color="light"
+				btnClasses="!py-1 !pr-1"
+				on:click={() => $table.nextPage()}
+				disabled={!$table.getCanNextPage()}
+			>
+				Next
+				<ChevronRight size={14} />
+			</Button>
+			{$table.getState().pagination.pageIndex + 1} of {$table.getPageCount()}
+		</div>
+	{:else}
+		<div />
+	{/if}
+	<div class="flex items-center gap-2 flex-row">
+		<Button
+			size="xs"
+			variant="border"
+			color="light"
+			btnClasses="!py-1"
+			on:click={downloadResultAsJSON}
+			startIcon={{ icon: faDownload }}
+		>
+			Download
+		</Button>
+	</div>
+</div>

package/package/components/apps/components/display/table/AppTableFooter.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Table } from '@tanstack/svelte-table';
+import type { Readable } from 'svelte/store';
+declare const __propDef: {
+    props: {
+        result: Record<string, any>[];
+        manualPagination: boolean;
+        pageSize: number;
+        table: Readable<Table<Record<string, any>>>;
+        class?: string | undefined;
+        style?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTableFooterProps = typeof __propDef.props;
+export type AppTableFooterEvents = typeof __propDef.events;
+export type AppTableFooterSlots = typeof __propDef.slots;
+export default class AppTableFooter extends SvelteComponentTyped<AppTableFooterProps, AppTableFooterEvents, AppTableFooterSlots> {
+}
+export {};

package/package/components/apps/components/display/table/tableOptions.d.ts

@@ -0,0 +1,3 @@
+import { type TableOptions } from '@tanstack/svelte-table';
+declare const tableOptions: TableOptions<Record<string, any>>;
+export { tableOptions };

package/package/components/apps/components/display/table/tableOptions.js

@@ -0,0 +1,14 @@
+import { getCoreRowModel, getPaginationRowModel } from '@tanstack/svelte-table';
+const tableOptions = {
+    data: [],
+    columns: [],
+    enableColumnResizing: false,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+        pagination: {
+            pageSize: 25
+        }
+    }
+};
+export { tableOptions };

package/package/components/apps/components/helpers/AlignWrapper.svelte

@@ -0,0 +1,17 @@
+<script>import { twMerge } from 'tailwind-merge';
+import { tailwindHorizontalAlignment, tailwindVerticalAlignment } from '../../utils';
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+let c = '';
+export { c as class };
+export let style = '';
+export let render = true;
+$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
+</script>
+
+{#if render}
+	<div class={classes} {style}>
+		<slot />
+	</div>
+{/if}

package/package/components/apps/components/helpers/AlignWrapper.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
+declare const __propDef: {
+    props: {
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
+        noWFull?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        render?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlignWrapperProps = typeof __propDef.props;
+export type AlignWrapperEvents = typeof __propDef.events;
+export type AlignWrapperSlots = typeof __propDef.slots;
+export default class AlignWrapper extends SvelteComponentTyped<AlignWrapperProps, AlignWrapperEvents, AlignWrapperSlots> {
+}
+export {};

package/package/components/apps/components/helpers/DebouncedInput.svelte

@@ -0,0 +1,26 @@
+<script>export let placeholder = 'Search...';
+// Using 'any' so 'type="number"' can be passed to the input
+// which should return a number
+export let value;
+export let debounceDelay = 500;
+let parentClass = undefined;
+export { parentClass as class };
+let timer;
+function debounce(event) {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+        const target = event.target;
+        value = target.value;
+    }, debounceDelay);
+}
+</script>
+
+<input
+	bind:value
+	{placeholder}
+	on:pointerdown|stopPropagation
+	on:keyup={debounce}
+	on:keydown|stopPropagation
+	class={parentClass}
+	{...$$restProps}
+/>

package/package/components/apps/components/helpers/DebouncedInput.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placeholder?: string | undefined;
+        value: any;
+        debounceDelay?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DebouncedInputProps = typeof __propDef.props;
+export type DebouncedInputEvents = typeof __propDef.events;
+export type DebouncedInputSlots = typeof __propDef.slots;
+export default class DebouncedInput extends SvelteComponentTyped<DebouncedInputProps, DebouncedInputEvents, DebouncedInputSlots> {
+}
+export {};

package/package/components/apps/components/helpers/HiddenComponent.svelte

@@ -0,0 +1,42 @@
+<script>import { getContext, onMount } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import RunnableComponent from './RunnableComponent.svelte';
+export let id;
+export let name;
+export let inlineScript;
+export let fields;
+export let recomputeOnInputChanged;
+export let recomputableByRefreshButton;
+export let noBackendValue = undefined;
+const { worldStore, staticExporter, noBackend } = getContext('AppViewerContext');
+let result = noBackend ? noBackendValue : undefined;
+onMount(() => {
+    $staticExporter[id] = () => {
+        return result;
+    };
+});
+let outputs = initOutput($worldStore, id, {
+    result: result,
+    loading: false
+});
+</script>
+
+<RunnableComponent
+	render={false}
+	{id}
+	{fields}
+	autoRefresh={true}
+	{recomputeOnInputChanged}
+	bind:result
+	transformer={undefined}
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+	{outputs}
+	{recomputableByRefreshButton}
+>
+	<slot />
+</RunnableComponent>