windmill-components 1.89.1 → 1.103.0

package/dist/components/apps/components/display/table/AppAggridTable.svelte

@@ -1,125 +0,0 @@
-<script>import 'ag-grid-community/styles/ag-grid.css';
-import 'ag-grid-community/styles/ag-theme-alpine.css';
-import AgGridSvelte from 'ag-grid-svelte/AgGridSvelte.svelte';
-import { isObject } from '../../../../../utils';
-import { getContext, onMount } from 'svelte';
-import RunnableWrapper from '../../helpers/RunnableWrapper.svelte';
-import { initConfig, initOutput } from '../../../editor/appUtils';
-import { components } from '../../../editor/component';
-import Alert from '../../../../common/alert/Alert.svelte';
-import ResolveConfig from '../../helpers/ResolveConfig.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let render;
-let result = undefined;
-const { worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
-let resolvedConfig = initConfig(components['aggridcomponent'].initialData.configuration, configuration);
-let outputs = initOutput($worldStore, id, {
-    selectedRowIndex: 0,
-    selectedRow: {},
-    result: [],
-    loading: false,
-    page: 0,
-    newChange: { row: 0, column: '', value: undefined },
-    ready: undefined
-});
-let selectedRowIndex = -1;
-function toggleRow(rowIndex) {
-    if (selectedRowIndex !== rowIndex && result) {
-        selectedRowIndex = rowIndex;
-        outputs?.selectedRow.set(result[rowIndex]);
-        outputs?.selectedRowIndex.set(rowIndex);
-    }
-}
-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(0);
-$: outputs?.result?.set(result ?? []);
-let clientHeight;
-let clientWidth;
-function onCellValueChanged(event) {
-    if (result) {
-        let dataCell = event.newValue;
-        try {
-            dataCell = JSON.parse(dataCell);
-        }
-        catch (e) { }
-        outputs?.newChange?.set({
-            row: event.node.rowIndex,
-            column: event.colDef.field,
-            value: dataCell
-        });
-        result[event.node.rowIndex][event.colDef.field] = dataCell;
-    }
-}
-</script>
-
-{#each Object.keys(components['aggridcomponent'].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="border border-gray-300 shadow-sm divide-y divide-gray-300 flex flex-col h-full"
-			bind:clientHeight
-			bind:clientWidth
-		>
-			<div
-				on:pointerdown|stopPropagation={() => {
-					$selectedComponent = [id]
-				}}
-				style:height="{clientHeight}px"
-				style:width="{clientWidth}px"
-				class="ag-theme-alpine"
-			>
-				{#key resolvedConfig?.pagination}
-					<AgGridSvelte
-						bind:rowData={result}
-						columnDefs={resolvedConfig?.columnDefs}
-						pagination={resolvedConfig?.pagination}
-						paginationAutoPageSize={resolvedConfig?.pagination}
-						defaultColDef={{ flex: 1, editable: resolvedConfig?.allEditable, onCellValueChanged }}
-						onPaginationChanged={(event) => {
-							outputs?.page.set(event.api.paginationGetCurrentPage())
-						}}
-						rowSelection="single"
-						suppressRowDeselection={true}
-						onSelectionChanged={(e) => {
-							const row = e.api.getSelectedNodes()?.[0]?.rowIndex
-							if (row != undefined) {
-								toggleRow(row)
-							}
-						}}
-						onGridReady={(e) => {
-							outputs?.ready.set(true)
-							$componentControl[id] = { agGrid: { api: e.api, columnApi: e.columnApi } }
-						}}
-					/>
-				{/key}
-			</div>
-		</div>
-	{:else if result != undefined}
-		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects, received:
-			<pre class="overflow-auto">
-				{JSON.stringify(result)}
-			</pre>
-		</Alert>
-	{/if}
-</RunnableWrapper>

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

@@ -1,24 +0,0 @@
-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/dist/components/apps/components/display/table/AppTable.svelte

@@ -1,366 +0,0 @@
-<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/dist/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,25 +0,0 @@
-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/dist/components/apps/components/display/table/AppTableFooter.svelte

@@ -1,68 +0,0 @@
-<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/dist/components/apps/components/display/table/AppTableFooter.svelte.d.ts

@@ -1,23 +0,0 @@
-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/dist/components/apps/components/display/table/tableOptions.d.ts

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

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

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

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

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