windmill-components 1.70.0 → 1.77.0

package/components/Slider.svelte

@@ -1,14 +1,19 @@
 <script>import { ChevronDown, ChevronUp } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
 import Button from './common/button/Button.svelte';
+import Tooltip from './Tooltip.svelte';
 export let text;
+export let tooltip = undefined;
 export let view = false;
 </script>
 
 <Button color="light" on:click={() => (view = !view)} variant="border"
 	>{text}
+	{#if tooltip}
+		<Tooltip wrapperClass="mx-1">{tooltip}</Tooltip>
+	{/if}
 	{#if !view}<ChevronDown />{:else}<ChevronUp />{/if}</Button
 >
 {#if view}
-	<div class="my-4 px-2" transition:slide><slot /></div>
+	<div class="my-4 px-2" transition:slide|local><slot /></div>
 {/if}

package/components/Slider.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         text: string;
+        tooltip?: string | undefined;
         view?: boolean | undefined;
     };
     events: {

package/components/TemplateEditor.svelte

@@ -517,7 +517,7 @@ onDestroy(() => {
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class} template rounded-lg min-h-4 mx-0.5"
+	class="{$$props.class ?? ''} template rounded-lg min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 

package/components/TestJobLoader.svelte

@@ -154,10 +154,10 @@ async function syncer(id) {
     syncIteration++;
     await loadTestJob(id);
     let nextIteration = 50;
-    if (syncIteration == ITERATIONS_BEFORE_SLOW_REFRESH) {
+    if (syncIteration > ITERATIONS_BEFORE_SLOW_REFRESH) {
         nextIteration = 500;
     }
-    else if (syncIteration == ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
+    else if (syncIteration > ITERATIONS_BEFORE_SUPER_SLOW_REFRESH) {
         nextIteration = 2000;
     }
     setTimeout(() => syncer(id), nextIteration);

package/components/Toggle.svelte

@@ -1,7 +1,10 @@
 <script>import { createEventDispatcher } from 'svelte';
+import { twMerge } from 'tailwind-merge';
 export let options = {};
 export let checked = false;
 export let disabled = false;
+export let textClass = '';
+export let textStyle = '';
 export let size = 'sm';
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
@@ -16,7 +19,13 @@ const dispatch = createEventDispatcher();
 	>
 		{#if Boolean(options?.left)}
 			<span
-				class="mr-2 text-sm font-medium duration-200 {disabled ? 'text-gray-600' : 'text-gray-900'}"
+				class={twMerge(
+					'ml-2 font-medium duration-200',
+					disabled ? 'text-gray-500' : 'text-gray-900',
+					size === 'xs' ? 'text-xs' : 'text-sm',
+					textClass
+				)}
+				style={textStyle}
 			>
 				{options?.left}
 			</span>
@@ -45,9 +54,13 @@ const dispatch = createEventDispatcher();
 		</div>
 		{#if Boolean(options?.right)}
 			<span
-				class="ml-2 text-sm font-medium duration-200
-				{disabled ? 'text-gray-500' : 'text-gray-900'} 
-				{size === 'xs' ? 'text-xs' : 'text-sm'}"
+				class={twMerge(
+					'ml-2 font-medium duration-200',
+					disabled ? 'text-gray-500' : 'text-gray-900',
+					size === 'xs' ? 'text-xs' : 'text-sm',
+					textClass
+				)}
+				style={textStyle}
 			>
 				{options?.right}
 			</span>

package/components/Toggle.svelte.d.ts

@@ -8,6 +8,8 @@ declare const __propDef: {
         } | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        textClass?: string | undefined;
+        textStyle?: string | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

package/components/Tooltip.svelte

@@ -10,10 +10,12 @@ export let placement = undefined;
 <Popover notClickable {placement} class={wrapperClass}>
 	<Icon
 		class="{light
-			? 'text-gray-300'
+			? 'text-gray-400'
 			: ' text-gray-500'} font-thin inline-block align-middle w-4 {$$props.class}"
 		data={faInfoCircle}
 		{scale}
 	/>
-	<span slot="text"> <slot /> </span>
+	<svelte:fragment slot="text">
+		<slot />
+	</svelte:fragment>
 </Popover>

package/components/UserSettings.svelte

@@ -31,6 +31,8 @@ export function toggleDrawer() {
 export function closeDrawer() {
     drawer?.closeDrawer();
     const index = $page.url.href.lastIndexOf('#');
+    if (index === -1)
+        return;
     const hashRemoved = $page.url.href.slice(0, index);
     goto(hashRemoved);
 }

package/components/WhitelistIp.svelte

@@ -5,9 +5,7 @@ WorkerService.listWorkers({}).then((workers) => {
     ips = [
         ...new Set(workers
             .filter((worker) => {
-            const date = new Date().getTime() - 300 * 60;
-            const ping_at = new Date(worker.ping_at).getTime();
-            return worker.ip != 'unretrievable IP' && ping_at > date;
+            return worker.ip != 'unretrievable IP' && worker.last_ping && worker.last_ping < 300;
         })
             .map((worker) => worker.ip))
     ];

package/components/apps/components/buttons/AppButton.svelte

@@ -5,6 +5,7 @@ import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { loadIcon } from '../icon';
 import { twMerge } from 'tailwind-merge';
+import { goto } from '$app/navigation';
 export let id;
 export let componentInput;
 export let configuration;
@@ -15,15 +16,18 @@ export let verticalAlignment = undefined;
 export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
+export let render;
+export let initializing = true;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore, app } = getContext('AppEditorContext');
+const { worldStore, app } = getContext('AppViewerContext');
 let labelValue;
 let color;
 let size;
 let runnableComponent;
 let disabled = undefined;
 let fillContainer = undefined;
-let goto = undefined;
+let gotoUrl = undefined;
+let gotoNewTab = undefined;
 let isLoading = false;
 let ownClick = false;
 let triggerOnAppLoad = false;
@@ -49,6 +53,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -61,10 +66,36 @@ let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
+async function handleClick(event) {
+    event?.stopPropagation();
+    event?.preventDefault();
+    if (preclickAction) {
+        await preclickAction();
+    }
+    ownClick = true;
+    if (!runnableComponent) {
+        if (gotoUrl) {
+            if (gotoNewTab) {
+                window.open(gotoUrl, '_blank');
+            }
+            else {
+                goto(gotoUrl);
+            }
+        }
+    }
+    else {
+        await runnableComponent?.runComponent();
+    }
+}
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.goto} bind:value={goto} />
+<InputValue
+	on:done={() => initializing && (initializing = false)}
+	{id}
+	input={configuration.label}
+	bind:value={labelValue}
+/>
+<InputValue {id} input={configuration.goto} bind:value={gotoUrl} />
 <InputValue {id} input={configuration.color} bind:value={color} />
 <InputValue {id} input={configuration.size} bind:value={size} />
 <InputValue {id} input={configuration.beforeIcon} bind:value={beforeIcon} />
@@ -74,19 +105,24 @@ $: errorsMessage = Object.values(errors)
 <InputValue
 	{id}
 	input={configuration.disabled}
+	extraContext={extraQueryParams}
 	bind:value={disabled}
 	bind:error={errors.disabled}
 />
 <InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
+<InputValue {id} input={configuration.gotoNewTab} bind:value={gotoNewTab} />
 
 <RunnableWrapper
 	flexWrap
+	{recomputeIds}
 	bind:runnableComponent
-	bind:componentInput
+	{componentInput}
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
-	{goto}
+	goto={gotoUrl}
+	{gotoNewTab}
+	{render}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
@@ -104,31 +140,17 @@ $: errorsMessage = Object.values(errors)
 				e?.stopPropagation()
 				window.dispatchEvent(new Event('pointerup'))
 			}}
-			on:click={async (e) => {
-				if (preclickAction) {
-					await preclickAction()
-				}
-				e?.stopPropagation()
-				e?.preventDefault()
-				ownClick = true
-				await runnableComponent?.runComponent()
-
-				if (recomputeIds) {
-					recomputeIds.forEach((id) => {
-						$runnableComponents[id]?.()
-					})
-				}
-			}}
+			on:click={handleClick}
 			{size}
 			{color}
 			{loading}
 		>
 			<span class="truncate inline-flex gap-2 items-center">
-				{#if beforeIconComponent}
+				{#if beforeIcon && beforeIconComponent}
 					<svelte:component this={beforeIconComponent} size={14} />
 				{/if}
 				<div>{labelValue}</div>
-				{#if afterIconComponent}
+				{#if afterIcon && afterIconComponent}
 					<svelte:component this={afterIconComponent} size={14} />
 				{/if}
 			</span>

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         noWFull?: boolean | undefined;
         preclickAction?: (() => Promise<void>) | undefined;
         customCss?: ComponentCustomCSS<'button'> | undefined;
+        render: boolean;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/buttons/AppForm.svelte

@@ -2,6 +2,7 @@
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
@@ -11,8 +12,10 @@ export let configuration;
 export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { app, worldStore, stateId } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
@@ -20,16 +23,19 @@ let runnableComponent;
 let goto = undefined;
 let isLoading = false;
 $: noInputs =
-    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
+    $stateId != undefined &&
+        (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
 $: outputs = $worldStore?.outputsById[id];
 $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
     }
 });
+$: css = concatCustomCss($app.css?.formcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.goto} bind:value={goto} />
@@ -38,18 +44,23 @@ $: outputs?.loading.subscribe({
 <InputValue {id} input={configuration.size} bind:value={size} />
 
 <RunnableWrapper
-	defaultUserInput
+	{recomputeIds}
+	{render}
 	bind:runnableComponent
-	bind:componentInput
+	{componentInput}
 	{id}
 	{goto}
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 	runnableClass="!block"
+	runnableStyle={css?.container.style}
 >
 	<AlignWrapper {horizontalAlignment}>
-		<div class="flex flex-col gap-2 px-4 w-full">
+		<div
+			class="flex flex-col gap-2 px-4 w-full {css?.container?.class ?? ''}"
+			style={css?.container?.style ?? ''}
+		>
 			<div>
 				{#if noInputs}
 					<div class="text-gray-600 italic text-sm my-4">
@@ -67,19 +78,14 @@ $: outputs?.loading.subscribe({
 				{#if !noInputs}
 					<Button
 						loading={isLoading}
-						btnClasses="my-1"
+						btnClasses="my-1 {css?.button?.class ?? ''}"
+						style={css?.button?.style ?? ''}
 						on:pointerdown={(e) => {
 							e?.stopPropagation()
 							window.dispatchEvent(new Event('pointerup'))
 						}}
 						on:click={() => {
 							runnableComponent?.runComponent()
-
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
 						}}
 						{size}
 						{color}

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -8,6 +9,8 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        customCss?: ComponentCustomCSS<'container' | 'button'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/buttons/AppFormButton.svelte

@@ -7,6 +7,7 @@ import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import Portal from 'svelte-portal';
 import Modal from '../../../common/modal/Modal.svelte';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let componentInput;
 export let configuration;
@@ -14,8 +15,10 @@ export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
-const { runnableComponents, worldStore } = getContext('AppEditorContext');
+const { app, runnableComponents, worldStore } = getContext('AppViewerContext');
 let labelValue = 'Default label';
 let color;
 let size;
@@ -24,6 +27,7 @@ let disabled = undefined;
 let isLoading = false;
 let ownClick = false;
 let errors = {};
+let open = false;
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
@@ -34,6 +38,7 @@ $: if (outputs?.loading != undefined) {
     outputs.loading.set(false, true);
 }
 $: outputs?.loading.subscribe({
+    id: 'loading-' + id,
     next: (value) => {
         isLoading = value;
         if (ownClick && !value) {
@@ -42,7 +47,7 @@ $: outputs?.loading.subscribe({
     }
 });
 $: loading = isLoading && ownClick;
-let open = false;
+$: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.label} bind:value={labelValue} />
@@ -59,6 +64,8 @@ let open = false;
 	<Modal
 		{open}
 		title={labelValue}
+		class={css?.popup.class}
+		style={css?.popup.style}
 		on:canceled={() => {
 			open = false
 		}}
@@ -67,9 +74,10 @@ let open = false;
 		}}
 	>
 		<RunnableWrapper
-			defaultUserInput
+			{recomputeIds}
+			{render}
 			bind:runnableComponent
-			bind:componentInput
+			{componentInput}
 			{id}
 			{extraQueryParams}
 			autoRefresh={false}
@@ -101,12 +109,6 @@ let open = false;
 						on:click={async () => {
 							await runnableComponent?.runComponent()
 
-							if (recomputeIds) {
-								recomputeIds.forEach((id) => {
-									$runnableComponents[id]?.()
-								})
-							}
-
 							open = false
 						}}
 						size="xs"
@@ -128,6 +130,8 @@ let open = false;
 		{disabled}
 		{size}
 		{color}
+		btnClasses={css?.button?.class ?? ''}
+		style={css?.button?.style ?? ''}
 		on:click={(e) => {
 			open = true
 		}}

package/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -9,6 +10,8 @@ declare const __propDef: {
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'button' | 'popup'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppBarChart.svelte

@@ -2,11 +2,16 @@
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
+const { app } = getContext('AppViewerContext');
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
 let result = undefined;
 let theme = 'theme1';
@@ -47,17 +52,20 @@ $: data = {
         }
     ]
 };
+$: css = concatCustomCss($app.css?.barchartcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.line} bind:value={lineChart} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	{#if result}
-		{#if lineChart}
-			<Line {data} options={lineOptions} />
-		{:else}
-			<Bar {data} options={barOptions} />
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			{#if lineChart}
+				<Line {data} options={lineOptions} />
+			{:else}
+				<Bar {data} options={barOptions} />
+			{/if}
 		{/if}
-	{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppBarChart.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppDisplayComponent.svelte

@@ -7,25 +7,30 @@ export let id;
 export let componentInput;
 export let initializing = undefined;
 export let customCss = undefined;
+export let render;
 const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
-const { app } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 let result = undefined;
 export const staticOutputs = ['result', 'loading'];
 </script>
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-	<div class={twMerge(
-		'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
-		$app.css?.['displaycomponent']?.['header']?.class,
-		customCss?.header?.class
-	)}>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+	<div
+		class={twMerge(
+			'w-full border-b px-2 text-xs p-1 font-semibold bg-gray-500 text-white rounded-t-sm',
+			$app.css?.['displaycomponent']?.['header']?.class,
+			customCss?.header?.class
+		)}
+	>
 		Results
 	</div>
-	<div class={twMerge(
-		'p-2',
-		$app.css?.['displaycomponent']?.['container']?.class,
-		customCss?.container?.class
-	)}>
+	<div
+		class={twMerge(
+			'p-2',
+			$app.css?.['displaycomponent']?.['container']?.class,
+			customCss?.container?.class
+		)}
+	>
 		<DisplayResult {result} {requireHtmlApproval} />
 	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppDisplayComponent.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'header' | 'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppHtml.svelte

@@ -1,11 +1,17 @@
-<script>import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+<script>import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['result', 'loading'];
+const { app } = getContext('AppViewerContext');
 let result = undefined;
 let h = undefined;
 let w = undefined;
+$: css = concatCustomCss($app.css?.htmlcomponent, customCss);
 </script>
 
 <div
@@ -16,12 +22,20 @@ let w = undefined;
 	bind:clientHeight={h}
 	bind:clientWidth={w}
 >
-	<RunnableWrapper autoRefresh flexWrap bind:componentInput {id} bind:initializing bind:result>
+	<RunnableWrapper
+		{render}
+		autoRefresh
+		flexWrap
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
 		{#key result}
 			<iframe
 				frameborder="0"
-				style="height: {h}px; width: {w}px"
-				class="p-0"
+				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
+				class="p-0 {css?.container?.class ?? ''}"
 				title="sandbox"
 				srcdoc={result
 					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result

package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -1,10 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {