windmill-components 1.46.3 → 1.55.0

package/components/apps/components/dataDisplay/AppTable.svelte

@@ -0,0 +1,132 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import DebouncedInput from '../helpers/DebouncedInput.svelte';
+import AppButton from '../buttons/AppButton.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let actionButtons;
+const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
+export const staticOutputs = ['selectedRow', 'loading', 'result'];
+$: outputs = $worldStore?.outputsById[id];
+let selectedRowIndex = -1;
+function toggleRow(row, rowIndex) {
+    if (selectedRowIndex === rowIndex) {
+        selectedRowIndex = -1;
+        outputs.selectedRow.set(null);
+    }
+    else {
+        selectedRowIndex = rowIndex;
+        outputs?.selectedRow.set(row);
+    }
+}
+let search = 'Disabled';
+let pagination = undefined;
+let page = 1;
+let searchValue = '';
+$: result = [];
+$: headers = Array.from(new Set(result.flatMap((row) => Object.keys(row))));
+$: extraQueryParams = search === 'Backend' ? { search: searchValue, page } : { page };
+function searchInResult(result, searchValue) {
+    if (searchValue === '') {
+        return result;
+    }
+    return result.filter((row) => Object.values(row).some((value) => value.toString().includes(searchValue)));
+}
+let filteredResult = [];
+$: search === 'Frontend' && (filteredResult = searchInResult(result, searchValue));
+$: (search === 'Backend' || search === 'Disabled') && (filteredResult = result);
+</script>
+
+<InputValue input={configuration.search} bind:value={search} />
+<InputValue input={configuration.pagination} bind:value={pagination} />
+
+<RunnableWrapper bind:componentInput {id} bind:result {extraQueryParams}>
+	<div class="gap-2 flex flex-col mt-2">
+		{#if search !== 'Disabled'}
+			<div>
+				<div>
+					<DebouncedInput placeholder="Search..." bind:value={searchValue} />
+				</div>
+			</div>
+		{/if}
+		<div class="flex flex-col">
+			<table class="divide-y divide-gray-300 border">
+				{#if headers}
+					<thead class="bg-gray-50">
+						<tr>
+							{#each headers as header}
+								<th
+									scope="col"
+									class="px-4 py-2 text-left text-xs font-medium text-gray-500 tracking-wider"
+								>
+									{header.replace(/([A-Z]+)*([A-Z][a-z])/g, '$1 $2')}
+								</th>
+							{/each}
+							<th scope="col" class="relative py-2 px-4">
+								<span class="sr-only">Edit</span>
+							</th>
+						</tr>
+					</thead>
+				{/if}
+				<tbody class="divide-y divide-gray-200 bg-white">
+					{#each filteredResult as row, rowIndex (rowIndex)}
+						<tr
+							class={classNames(
+								selectedRowIndex === rowIndex ? 'bg-blue-100 hover:bg-blue-200' : 'hover:bg-blue-50'
+							)}
+							on:click={() => toggleRow(row, rowIndex)}
+						>
+							{#each headers as header}
+								<td class="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
+									{row[header]}
+								</td>
+							{/each}
+							<td class="relative whitespace-nowrap px-4 py-2 text-right ">
+								{#if actionButtons?.length > 0}
+									<div class="center-center gap-2">
+										{#each actionButtons as props}
+											<AppButton
+												{...props}
+												extraQueryParams={{ row }}
+												bind:componentInput={props.componentInput}
+												bind:staticOutputs={$staticOutputsStore[props.id]}
+											/>
+										{/each}
+									</div>
+								{/if}
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		{#if pagination}
+			<div class="flex flex-row gap-2">
+				<Button
+					on:click={() => {
+						page = page - 1
+					}}
+					color="light"
+					size="xs"
+					variant="border"
+					disabled={page === 1}
+				>
+					Previous
+				</Button>
+				<Button
+					on:click={() => {
+						page = page + 1
+					}}
+					color="light"
+					size="xs"
+					variant="border">Next</Button
+				>
+			</div>
+		{/if}
+	</div>
+</RunnableWrapper>

package/components/apps/components/dataDisplay/AppTable.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { BaseAppComponent, ButtonComponent } from '../../types';
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        actionButtons: (BaseAppComponent & ButtonComponent)[];
+        staticOutputs?: string[] | undefined;
+    };
+    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> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/AppText.svelte

@@ -0,0 +1,22 @@
+<script>import SvelteMarkdown from 'svelte-markdown';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['result', 'loading'];
+let result = '';
+</script>
+
+<RunnableWrapper bind:componentInput {id} bind:result>
+	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+		{#if result === ''}
+			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+				No text
+			</div>
+		{:else}
+			<SvelteMarkdown source={String(result)} />
+		{/if}
+	</AlignWrapper>
+</RunnableWrapper>

package/components/apps/components/dataDisplay/AppText.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTextProps = typeof __propDef.props;
+export type AppTextEvents = typeof __propDef.events;
+export type AppTextSlots = typeof __propDef.slots;
+export default class AppText extends SvelteComponentTyped<AppTextProps, AppTextEvents, AppTextSlots> {
+    get staticOutputs(): string[];
+}
+export {};

package/components/apps/components/dataDisplay/app.md

@@ -0,0 +1,49 @@
+- Input () => any
+
+  - text field
+  - Checkbox
+  - select
+
+- Display: (data: Static | Connect | Result, configuration: List<Static>) => Outputs
+
+  - Table :  
+    actions: List<Button>,
+    configuration: {
+    Search: Frontend | Backend | Disabled,
+    Pagination: Frontend | Backend | Disabled
+    }
+    Outputs: {
+    selectedRow,
+    page,
+    data
+    }
+
+  - Charts
+    Outputs: {
+    data,
+    selected: {
+    id,
+    value
+    }
+    }
+
+  - Text
+    Outputs: {
+    data,
+    }
+  - Image
+    Outputs: {
+    data,
+    }
+
+IFrame: URL => void
+outputs: Record<id, any>
+
+- Run form (action: Result, configuration: List<Static>) => any
+- Button (action: Result | ForceRefresh, configuration: List<Static>) => any
+
+Result (fields: List<Static | Connect | User >) => Data
+
+ForceRefresh (List<ID of Display>) => void
+
+Global Refresh

package/components/apps/components/form/AppForm.svelte

@@ -0,0 +1,50 @@
+<script>import { Button } from '../../../common';
+import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let configuration;
+export let recomputeIds = undefined;
+export let extraQueryParams = {};
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export const staticOutputs = ['loading', 'result'];
+const { runnableComponents } = getContext('AppEditorContext');
+let labelValue = 'Default label';
+let color;
+let size;
+let runnableComponent;
+</script>
+
+<InputValue input={configuration.label} bind:value={labelValue} />
+<InputValue input={configuration.color} bind:value={color} />
+<InputValue input={configuration.size} bind:value={size} />
+
+<RunnableWrapper
+	bind:runnableComponent
+	bind:componentInput
+	{id}
+	{extraQueryParams}
+	autoRefresh={false}
+	forceSchemaDisplay={true}
+>
+	<AlignWrapper {horizontalAlignment} {verticalAlignment} disableVerticalAlignment={true}>
+		<Button
+			on:click={() => {
+				runnableComponent?.runComponent()
+
+				if (recomputeIds) {
+					recomputeIds.forEach((id) => {
+						$runnableComponents[id]?.()
+					})
+				}
+			}}
+			{size}
+			{color}
+		>
+			{labelValue}
+		</Button>
+	</AlignWrapper>
+</RunnableWrapper>

package/components/apps/components/form/AppForm.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        configuration: Record<string, AppInput>;
+        recomputeIds?: string[] | undefined;
+        extraQueryParams?: Record<string, any> | undefined;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        staticOutputs?: string[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFormProps = typeof __propDef.props;
+export type AppFormEvents = typeof __propDef.events;
+export type AppFormSlots = typeof __propDef.slots;
+export default class AppForm extends SvelteComponentTyped<AppFormProps, AppFormEvents, AppFormSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,30 @@
+<script>import { classNames } from '../../../../utils';
+export let horizontalAlignment;
+export let verticalAlignment;
+export let disableVerticalAlignment = false;
+function tailwindHorizontalAlignment(horizontalAlignment) {
+    switch (horizontalAlignment) {
+        case 'left':
+            return 'justify-start';
+        case 'center':
+            return 'justify-center';
+        case 'right':
+            return 'justify-end';
+    }
+}
+function tailwindVerticalAlignment(verticalAlignment) {
+    switch (verticalAlignment) {
+        case 'top':
+            return 'items-start';
+        case 'center':
+            return 'items-center';
+        case 'bottom':
+            return 'items-end';
+    }
+}
+$: classes = classNames('flex w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), disableVerticalAlignment ? '' : 'h-full');
+</script>
+
+<div class={classes}>
+	<slot />
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        horizontalAlignment: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment: 'top' | 'center' | 'bottom' | undefined;
+        disableVerticalAlignment?: 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/components/apps/components/helpers/DebouncedInput.svelte

@@ -0,0 +1,24 @@
+<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:keyup={debounce}
+	class={parentClass}
+	{...$$restProps}
+/>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placeholder?: string | undefined;
+        value: any;
+        debounceDelay?: number | undefined;
+        class?: string | undefined;
+    };
+    events: {
+        [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/components/apps/components/helpers/InputValue.svelte

@@ -0,0 +1,46 @@
+<script>import { getContext } from 'svelte';
+import { accessPropertyByPath } from '../../utils';
+export let input;
+export let value;
+const { worldStore } = getContext('AppEditorContext');
+$: input && $worldStore && handleConnection();
+function handleConnection() {
+    if (input.type === 'connected') {
+        $worldStore?.connect(input, onValueChange);
+    }
+    else if (input.type === 'static') {
+        setValue();
+    }
+    else {
+        value = undefined;
+    }
+}
+function setValue() {
+    if (input.type === 'static') {
+        value = input.value;
+    }
+}
+function onValueChange(newValue) {
+    if (input.type === 'connected' && newValue !== undefined && newValue !== null) {
+        const { connection } = input;
+        if (!connection) {
+            // No connection
+            return;
+        }
+        const { componentId, path } = connection;
+        const hasSubPath = ['.', '['].some((x) => path.includes(x));
+        if (hasSubPath) {
+            // Must remove top level property from path
+            // Which was manually added, i.e. result
+            const realPath = path.split('.').slice(1).join('.');
+            value = accessPropertyByPath(newValue, realPath);
+        }
+        else {
+            value = newValue;
+        }
+    }
+    else {
+        // TODO: handle disconnect
+    }
+}
+</script>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        input: AppInput;
+        value: string | number | boolean | Record<string | number, any> | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputValueProps = typeof __propDef.props;
+export type InputValueEvents = typeof __propDef.events;
+export type InputValueSlots = typeof __propDef.slots;
+export default class InputValue extends SvelteComponentTyped<InputValueProps, InputValueEvents, InputValueSlots> {
+}
+export {};

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -0,0 +1,20 @@
+<script>import { getContext } from 'svelte';
+import InputValue from './InputValue.svelte';
+export let result = undefined;
+export let componentInput;
+export let id;
+// Sync the result to the output
+const { worldStore } = getContext('AppEditorContext');
+$: outputs = $worldStore?.outputsById[id];
+function setOutput() {
+    if (outputs) {
+        outputs.result?.set(result);
+    }
+}
+$: result !== undefined && setOutput();
+</script>
+
+{#if componentInput.type !== 'runnable'}
+	<InputValue input={componentInput} bind:value={result} />
+{/if}
+<slot />

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+declare const __propDef: {
+    props: {
+        result?: any;
+        componentInput: AppInput;
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type NonRunnableComponentProps = typeof __propDef.props;
+export type NonRunnableComponentEvents = typeof __propDef.events;
+export type NonRunnableComponentSlots = typeof __propDef.slots;
+export default class NonRunnableComponent extends SvelteComponentTyped<NonRunnableComponentProps, NonRunnableComponentEvents, NonRunnableComponentSlots> {
+}
+export {};