windmill-components 1.55.1 → 1.55.2

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

@@ -0,0 +1,54 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+export let result;
+export let paginationEnabled = false;
+export let table;
+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="px-4 py-2 text-xs flex flex-row gap-2 items-center justify-between">
+	{#if paginationEnabled}
+		<div class="flex items-center gap-2 flex-row">
+			<Button
+				size="xs"
+				variant="border"
+				color="light"
+				on:click={() => $table.previousPage()}
+				disabled={!$table.getCanPreviousPage()}
+			>
+				Previous
+			</Button>
+			<Button
+				size="xs"
+				variant="border"
+				color="light"
+				on:click={() => $table.nextPage()}
+				disabled={!$table.getCanNextPage()}
+			>
+				Next
+			</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"
+			on:click={downloadResultAsJSON}
+			startIcon={{ icon: faDownload }}
+		>
+			Download
+		</Button>
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+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>[];
+        paginationEnabled?: boolean | undefined;
+        table: Readable<Table<Record<string, any>>>;
+    };
+    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/components/apps/components/table/tableOptions.d.ts

@@ -0,0 +1,10 @@
+declare const tableOptions: {
+    getCoreRowModel: (table: import("@tanstack/svelte-table").Table<unknown>) => () => import("@tanstack/svelte-table").RowModel<unknown>;
+    getPaginationRowModel: (table: import("@tanstack/svelte-table").Table<unknown>) => () => import("@tanstack/svelte-table").RowModel<unknown>;
+    initialState: {
+        pagination: {
+            pageSize: number;
+        };
+    };
+};
+export { tableOptions };

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

@@ -0,0 +1,11 @@
+import { getCoreRowModel, getPaginationRowModel } from '@tanstack/svelte-table';
+const tableOptions = {
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    initialState: {
+        pagination: {
+            pageSize: 10
+        }
+    }
+};
+export { tableOptions };

package/components/apps/components/textInputs/AppTextInput.svelte

@@ -1,21 +1,28 @@
 <script>import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
+export let inputType = 'text';
+export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
 const { worldStore } = getContext('AppEditorContext');
-let value;
+let input;
 let labelValue = 'Title';
 $: outputs = $worldStore?.outputsById[id];
-$: (value || !value) && outputs?.result.set(value || '');
+function handleInput() {
+    outputs?.result.set(input.value);
+}
 </script>
 
-<InputValue input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
 
-<!-- svelte-ignore a11y-label-has-associated-control -->
-<label>
-	<div>
-		{labelValue}
-	</div>
-	<input type="text" bind:value placeholder="Type..." />
-</label>
+<AlignWrapper {verticalAlignment}>
+	<input
+		type={inputType}
+		bind:this={input}
+		on:input={handleInput}
+		placeholder="Type..."
+		class="h-full"
+	/>
+</AlignWrapper>

package/components/apps/components/textInputs/AppTextInput.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
+        inputType?: string | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/editor/AppEditor.svelte

@@ -16,6 +16,7 @@ import ContextPanel from './contextPanel/ContextPanel.svelte';
 import { classNames } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import { userStore } from '../../../stores';
+import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 export let app;
 export let path;
 export let initialMode = 'dnd';
@@ -38,16 +39,23 @@ setContext('AppEditorContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents
+    runnableComponents,
+    appPath: path
 });
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: mounted && ($worldStore = buildWorld($staticOutputs));
-$: selectedTab = $selectedComponent ? 'settings' : 'insert';
+$: mounted && ($worldStore = buildWorld($staticOutputs, $worldStore));
 $: previewing = $mode === 'preview';
-$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
+$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'min-w-[1080px] w-full';
+let selectedTab = 'insert';
+$: if ($selectedComponent) {
+    selectedTab = 'settings';
+}
+else {
+    selectedTab = 'insert';
+}
 </script>
 
 {#if !$userStore?.operator}
@@ -56,27 +64,34 @@ $: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
 	{/if}
 
 	{#if previewing}
-		<AppPreview app={$appStore} />
+		<AppPreview app={$appStore} appPath={path} {breakpoint} />
 	{:else}
 		<SplitPanesWrapper class="max-w-full overflow-hidden">
-			<Pane size={20} minSize={15} maxSize={40}>
-				<ContextPanel appPath={path} />
+			<Pane size={20}>
+				<ContextPanel />
 			</Pane>
-			<Pane size={60}>
-				<div class="p-4 bg-gray-100 min-h-full w-full relative">
-					{#if $appStore.grid}
-						<div class={classNames('mx-auto h-full', width)}>
-							<GridEditor />
+			<Pane size={55}>
+				<SplitPanesWrapper horizontal>
+					<Pane size={70}>
+						<div class={classNames('bg-gray-100  mx-auto  relative min-h-full', width)}>
+							{#if $appStore.grid}
+								<div class={classNames('mx-auto p-4 w-full h-full bg-gray-100', width)}>
+									<GridEditor />
+								</div>
+							{/if}
+							{#if $connectingInput.opened}
+								<div
+									class="absolute top-0 left-0 w-full h-full bg-black border-2 bg-opacity-25 z-1 flex justify-center items-center"
+								/>
+							{/if}
 						</div>
-					{/if}
-					{#if $connectingInput.opened}
-						<div
-							class="absolute top-0 left-0 w-full h-full bg-black border-2 bg-opacity-25 z-1 flex justify-center items-center"
-						/>
-					{/if}
-				</div>
+					</Pane>
+					<Pane size={30}>
+						<InlineScriptsPanel />
+					</Pane>
+				</SplitPanesWrapper>
 			</Pane>
-			<Pane size={30} minSize={25} maxSize={40}>
+			<Pane size={25} minSize={20} maxSize={33}>
 				<Tabs bind:selected={selectedTab}>
 					<Tab value="insert" size="xs">
 						<div class="m-1 flex flex-row gap-2">

package/components/apps/editor/AppEditorHeader.svelte

@@ -44,7 +44,7 @@ async function save() {
 
 <div class="border-b flex flex-row justify-between py-1 px-4 items-center">
 	<input class="text-sm w-64" bind:value={title} />
-	<div class="flex gap-2">
+	<div class="flex gap-4 items-center">
 		<div>
 			<ToggleButtonGroup bind:selected={mode}>
 				<ToggleButton position="left" value="dnd" startIcon={{ icon: faHand }} size="xs">
@@ -57,12 +57,20 @@ async function save() {
 		</div>
 		<div>
 			<ToggleButtonGroup bind:selected={breakpoint}>
-				<ToggleButton position="left" value="sm" startIcon={{ icon: faMobileAlt }} size="xs">
-					Mobile
-				</ToggleButton>
-				<ToggleButton position="right" value="lg" startIcon={{ icon: faDesktopAlt }} size="xs">
-					Desktop
-				</ToggleButton>
+				<ToggleButton
+					position="left"
+					value="sm"
+					startIcon={{ icon: faMobileAlt }}
+					size="xs"
+					iconOnly
+				/>
+				<ToggleButton
+					position="right"
+					value="lg"
+					startIcon={{ icon: faDesktopAlt }}
+					size="xs"
+					iconOnly
+				/>
 			</ToggleButtonGroup>
 		</div>
 	</div>

package/components/apps/editor/AppPreview.svelte

@@ -4,12 +4,13 @@ import { buildWorld } from '../rx';
 import GridEditor from './GridEditor.svelte';
 import { classNames } from '../../../utils';
 export let app;
+export let appPath;
+export let breakpoint;
 const appStore = writable(app);
 const worldStore = writable(undefined);
 const staticOutputs = writable({});
 const selectedComponent = writable(undefined);
 const mode = writable('preview');
-const breakpoint = writable('lg');
 const connectingInput = writable({
     opened: false,
     input: undefined
@@ -23,13 +24,14 @@ setContext('AppEditorContext', {
     mode,
     connectingInput,
     breakpoint,
-    runnableComponents
+    runnableComponents,
+    appPath
 });
 let mounted = false;
 onMount(() => {
     mounted = true;
 });
-$: mounted && ($worldStore = buildWorld($staticOutputs));
+$: mounted && ($worldStore = buildWorld($staticOutputs, undefined));
 $: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
 </script>
 

package/components/apps/editor/AppPreview.svelte.d.ts

@@ -1,8 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { App } from '../types';
+import { type Writable } from 'svelte/store';
+import type { App, EditorBreakpoint } from '../types';
 declare const __propDef: {
     props: {
         app: App;
+        appPath: string;
+        breakpoint: Writable<EditorBreakpoint>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/ComponentEditor.svelte

@@ -2,33 +2,37 @@
 import { getContext } from 'svelte';
 import BarChartComponent from '../components/dataDisplay/AppBarChart.svelte';
 import DisplayComponent from '../components/DisplayComponent.svelte';
-import TableComponent from '../components/dataDisplay/AppTable.svelte';
+import TableComponent from '../components/table/AppTable.svelte';
 import TextComponent from '../components/dataDisplay/AppText.svelte';
 import ButtonComponent from '../components/buttons/AppButton.svelte';
 import PieChartComponent from '../components/dataDisplay/AppPieChart.svelte';
+import SelectComponent from '../components/selectInputs/AppSelect.svelte';
 import CheckboxComponent from '../components/selectInputs/AppCheckbox.svelte';
 import TextInputComponent from '../components/textInputs/AppTextInput.svelte';
 import NumberInputComponent from '../components/numberInputs/AppNumberInput.svelte';
+import DateInputComponent from '../components/dateInputs/AppDateInput.svelte';
 import ComponentHeader from './ComponentHeader.svelte';
 import AppForm from '../components/form/AppForm.svelte';
 export let component;
 export let selected;
+export let locked = false;
 $: shouldDisplayOverlay = selected && $mode !== 'preview';
 const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 </script>
 
 <div class="h-full flex flex-col w-full">
 	{#if shouldDisplayOverlay}
-		<ComponentHeader {component} {selected} on:delete />
+		<ComponentHeader {component} {selected} on:delete on:lock {locked} />
 	{/if}
 
 	<div
 		class={classNames(
-			' border overflow-auto cursor-pointer  h-full bg-white',
+			'border cursor-pointer h-full bg-white',
 			shouldDisplayOverlay ? 'border-blue-500' : 'border-white',
 			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
 			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
 			component.card ? 'p-2' : '',
+			component.softWrap ? '' : 'overflow-auto',
 			'relative'
 		)}
 	>
@@ -68,6 +72,8 @@ const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
+		{:else if component.type === 'selectcomponent'}
+			<SelectComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'formcomponent'}
 			<AppForm
 				{...component}
@@ -78,6 +84,18 @@ const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{:else if component.type === 'textinputcomponent'}
 			<TextInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'passwordinputcomponent'}
+			<TextInputComponent
+				inputType="password"
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'dateinputcomponent'}
+			<DateInputComponent
+				inputType="date"
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'numberinputcomponent'}
 			<NumberInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{/if}

package/components/apps/editor/ComponentEditor.svelte.d.ts

@@ -4,9 +4,11 @@ declare const __propDef: {
     props: {
         component: AppComponent;
         selected: boolean;
+        locked?: boolean | undefined;
     };
     events: {
         delete: CustomEvent<any>;
+        lock: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/ComponentHeader.svelte

@@ -1,20 +1,37 @@
 <script>import { classNames } from '../../../utils';
-import { displayData } from '../utils';
-import { X } from 'lucide-svelte';
+import { Anchor, Lock, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 export let component;
 export let selected;
+export let locked = false;
 const dispatch = createEventDispatcher();
 </script>
 
 <span
 	class={classNames(
-		'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5',
+		'text-white px-2 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5',
 		selected ? 'bg-indigo-500' : 'bg-gray-500'
 	)}
 >
-	{displayData[component.type].name} - {component.id}
+	{component.id}
 </span>
+
+<button
+	class={classNames(
+		'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5 right-8  cursor-pointer',
+		'bg-gray-600 hover:bg-gray-800'
+	)}
+	on:click={() => {
+		dispatch('lock')
+	}}
+>
+	{#if locked}
+		<Anchor size={16} class="text-orange-500" />
+	{:else}
+		<Anchor size={16} />
+	{/if}
+</button>
+
 <button
 	class={classNames(
 		'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5 right-0  cursor-pointer',

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -4,8 +4,10 @@ declare const __propDef: {
     props: {
         component: AppComponent;
         selected: boolean;
+        locked?: boolean | undefined;
     };
     events: {
+        lock: CustomEvent<any>;
         delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/GridEditor.svelte

@@ -2,10 +2,9 @@
 import Grid from 'svelte-grid';
 import ComponentEditor from './ComponentEditor.svelte';
 import { classNames } from '../../../utils';
-import { columnConfiguration, disableDrag, enableDrag, gridColumns } from '../gridUtils';
+import { columnConfiguration, disableDrag, enableDrag, isFixed, toggleFixed } from '../gridUtils';
 import { Alert } from '../../common';
 import { fly } from 'svelte/transition';
-import gridHelp from 'svelte-grid/build/helper/index.mjs';
 import Button from '../../common/button/Button.svelte';
 import RecomputeAllComponents from './RecomputeAllComponents.svelte';
 const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents } = getContext('AppEditorContext');
@@ -16,53 +15,74 @@ $: if ($mode === 'preview' || $connectingInput.opened) {
 else {
     $app.grid.map((gridItem) => enableDrag(gridItem));
 }
-function deleteComponent(component) {
+function removeGridElement(component) {
     if (component) {
-        $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
+        $app.grid = $app.grid.filter((gridComponent) => {
+            if (gridComponent.data.id === component.id) {
+                if (gridComponent.data.componentInput?.runnable?.type === 'runnableByName' &&
+                    gridComponent.data.componentInput?.runnable.inlineScript) {
+                    const { name, inlineScript } = gridComponent.data.componentInput?.runnable;
+                    if (!$app.unusedInlineScripts) {
+                        $app.unusedInlineScripts = [];
+                    }
+                    $app.unusedInlineScripts.push({
+                        name,
+                        inlineScript
+                    });
+                    $app = $app;
+                }
+            }
+            return gridComponent.data.id !== component?.id;
+        });
         // Delete static inputs
         delete $staticOutputs[component.id];
         $staticOutputs = $staticOutputs;
         delete $runnableComponents[component.id];
         $runnableComponents = $runnableComponents;
+        $selectedComponent = undefined;
     }
 }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="bg-white h-full relative"
-	on:click|preventDefault={() => ($selectedComponent = undefined)}
->
+<div class="bg-white h-full relative">
 	<RecomputeAllComponents />
-
-	<Grid bind:items={$app.grid} rowHeight={64} let:dataItem cols={columnConfiguration}>
+	<Grid
+		bind:items={$app.grid}
+		let:dataItem
+		rowHeight={64}
+		cols={columnConfiguration}
+		fastStart={true}
+		on:pointerup={({ detail }) => {
+			if (!$connectingInput.opened) {
+				$selectedComponent = detail.id
+			}
+		}}
+	>
 		{#each $app.grid as gridComponent (gridComponent.id)}
 			{#if gridComponent.data.id === dataItem.data.id}
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-
 				<div
 					class={classNames(
 						'h-full w-full flex justify-center align-center',
 						gridComponent.data.card ? 'border border-gray-100' : ''
 					)}
-					on:click|preventDefault|stopPropagation={() => {
-						if (!$connectingInput.opened) {
-							$selectedComponent = dataItem.data.id
-						}
-					}}
 				>
 					<ComponentEditor
 						bind:component={gridComponent.data}
 						selected={$selectedComponent === dataItem.data.id}
-						on:delete={() => deleteComponent(gridComponent.data)}
+						locked={isFixed(gridComponent)}
+						on:delete={() => removeGridElement(gridComponent.data)}
+						on:lock={() => {
+							gridComponent = toggleFixed(gridComponent)
+						}}
 					/>
 				</div>
 			{/if}
 		{/each}
 	</Grid>
+
 	{#if $connectingInput.opened}
 		<div
-			class="fixed top-32 left-0 w-full z-10 flex justify-center items-center"
+			class="fixed top-32  z-10 flex justify-center items-center"
 			transition:fly={{ duration: 100, y: -100 }}
 		>
 			<Alert title="Connecting" type="info">

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -5,24 +5,22 @@ import { getContext } from 'svelte';
 const { runnableComponents } = getContext('AppEditorContext');
 let loading = false;
 async function onRefresh() {
+    loading = true;
     await Promise.all(Object.keys($runnableComponents).map((id) => {
         return $runnableComponents?.[id]?.();
     }));
     loading = false;
 }
+$: disabled = Object.keys($runnableComponents).length === 0;
 </script>
 
 <Button
 	size="xs"
 	btnClasses="m-2 mb-4"
 	startIcon={{ icon: faRefresh, classes: classNames(loading ? 'animate-spin' : '', 'mr-2') }}
-	color="light"
-	variant="border"
-	disabled={Object.keys($runnableComponents).length === 0}
-	on:click={() => {
-		loading = true
-		onRefresh()
-	}}
+	color="dark"
+	{disabled}
+	on:click={onRefresh}
 >
 	Recompute all ({Object.keys($runnableComponents).length})
 </Button>