windmill-components 1.60.3 → 1.83.1

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

@@ -0,0 +1,354 @@
+<script>import { getContext, onMount } from 'svelte';
+import InputValue from '../../helpers/InputValue.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) && 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,
+        manualPagination: resolvedConfig.manualPagination,
+        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
+				paginationEnabled
+				manualPagination={resolvedConfig.manualPagination}
+				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/components/apps/components/{table → display/table}/AppTable.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent, ButtonComponent } from '../../types';
-import type { AppInput } from '../../inputType';
+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: Record<string, AppInput>;
+        configuration: RichConfigurations;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
-        staticOutputs?: string[] | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'tablecomponent'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,6 +21,5 @@ 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> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/{table → display/table}/AppTableFooter.svelte

@@ -1,10 +1,15 @@
-<script>import Button from '../../../common/button/Button.svelte';
+<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';
 import { tableOptions } from './tableOptions';
 export let result;
 export let paginationEnabled = false;
+export let manualPagination;
 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');
@@ -16,8 +21,11 @@ function downloadResultAsJSON() {
 }
 </script>
 
-<div class="px-2 py-1 text-xs flex flex-row gap-2 items-center justify-between">
-	{#if paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)}
+<div
+	class={twMerge('px-2 py-1 text-xs gap-2 items-center justify-between', c, 'flex flex-row')}
+	{style}
+>
+	{#if (paginationEnabled && result.length > (tableOptions.initialState?.pagination?.pageSize ?? 25)) || manualPagination}
 		<div class="flex items-center gap-2 flex-row">
 			<Button
 				size="xs"

package/components/apps/components/{table → display/table}/AppTableFooter.svelte.d.ts

@@ -5,7 +5,10 @@ declare const __propDef: {
     props: {
         result: Record<string, any>[];
         paginationEnabled?: boolean | undefined;
+        manualPagination: boolean;
         table: Readable<Table<Record<string, any>>>;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/{table → display/table}/tableOptions.js

@@ -9,6 +9,6 @@ const tableOptions = {
         pagination: {
             pageSize: 25
         }
-    },
+    }
 };
 export { tableOptions };

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

@@ -1,30 +1,36 @@
-<script>import { classNames } from '../../../../utils';
+<script>import { twMerge } from 'tailwind-merge';
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let noWFull = false;
-function tailwindHorizontalAlignment(horizontalAlignment) {
-    switch (horizontalAlignment) {
-        case 'left':
-            return 'justify-start';
-        case 'center':
-            return 'justify-center';
-        case 'right':
-            return 'justify-end';
-    }
+let c = '';
+export { c as class };
+export let style = '';
+export let render = true;
+function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end'
+    };
+    return classes[alignment];
 }
-function tailwindVerticalAlignment(verticalAlignment) {
-    switch (verticalAlignment) {
-        case 'top':
-            return 'items-start';
-        case 'center':
-            return 'items-center';
-        case 'bottom':
-            return 'items-end';
-    }
+function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end'
+    };
+    return classes[alignment];
 }
-$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
+$: classes = twMerge('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '', c);
 </script>
 
-<div class={classes}>
-	<slot />
-</div>
+{#if render}
+	<div class={classes} {style}>
+		<slot />
+	</div>
+{/if}

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

@@ -1,9 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { HorizontalAlignment, VerticalAlignment } from '../../types';
 declare const __propDef: {
     props: {
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
         noWFull?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
+        render?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -18,6 +18,7 @@ function debounce(event) {
 <input
 	bind:value
 	{placeholder}
+	on:pointerdown|stopPropagation
 	on:keyup={debounce}
 	class={parentClass}
 	{...$$restProps}

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

@@ -8,6 +8,8 @@ declare const __propDef: {
         class?: string | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -0,0 +1,36 @@
+<script>import { getContext } 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 doNotRecomputeOnInputChanged;
+export let recomputableByRefreshButton;
+let result = undefined;
+const { worldStore } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+</script>
+
+<RunnableComponent
+	render={false}
+	{id}
+	{fields}
+	autoRefresh={true}
+	{doNotRecomputeOnInputChanged}
+	bind:result
+	transformer={undefined}
+	runnable={{
+		name,
+		inlineScript,
+		type: 'runnableByName'
+	}}
+	wrapperClass="hidden"
+	{outputs}
+	{recomputableByRefreshButton}
+>
+	<slot />
+</RunnableComponent>

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

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../../inputType';
+import type { InlineScript } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        inlineScript: InlineScript | undefined;
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        doNotRecomputeOnInputChanged: boolean;
+        recomputableByRefreshButton: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type HiddenComponentProps = typeof __propDef.props;
+export type HiddenComponentEvents = typeof __propDef.events;
+export type HiddenComponentSlots = typeof __propDef.slots;
+export default class HiddenComponent extends SvelteComponentTyped<HiddenComponentProps, HiddenComponentEvents, HiddenComponentSlots> {
+}
+export {};

package/components/apps/components/helpers/InputDefaultValue.svelte

@@ -0,0 +1,17 @@
+<script>export let input = undefined;
+export let defaultValue = undefined;
+function setInputValueToDefaultValue() {
+    if (defaultValue !== undefined && input) {
+        input.value = String(defaultValue);
+    }
+}
+function clearInputValue() {
+    if (input) {
+        input.value = '';
+    }
+}
+$: input && defaultValue && setInputValueToDefaultValue();
+$: input &&
+    (defaultValue === '' || defaultValue === undefined || defaultValue === null) &&
+    clearInputValue();
+</script>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        input?: HTMLInputElement | undefined;
+        defaultValue?: (string | number | boolean) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputDefaultValueProps = typeof __propDef.props;
+export type InputDefaultValueEvents = typeof __propDef.events;
+export type InputDefaultValueSlots = typeof __propDef.slots;
+export default class InputDefaultValue extends SvelteComponentTyped<InputDefaultValueProps, InputDefaultValueEvents, InputDefaultValueSlots> {
+}
+export {};