windmill-components 1.46.3 → 1.55.0

package/components/flows/map/FlowModuleSchemaItem.svelte

@@ -1,10 +1,10 @@
 <script>import Badge from '../../common/badge/Badge.svelte';
-import Button from '../../common/button/Button.svelte';
+import Popover from '../../Popover.svelte';
 import { classNames } from '../../../utils';
-import { faBed, faRepeat, faStop, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-export let color = 'blue';
+import { PhoneIncoming, Repeat } from 'lucide-svelte';
 export let isFirst = false;
 export let isLast = false;
 export let hasLine = true;
@@ -13,6 +13,7 @@ export let deletable = false;
 export let retry = false;
 export let earlyStop = false;
 export let suspend = false;
+export let sleep = false;
 export let bold = false;
 export let id = undefined;
 export let label;
@@ -24,66 +25,76 @@ const dispatch = createEventDispatcher();
 <div class="flex relative" on:click>
 	<div
 		class={classNames(
-			'flex mr-2 ml-0.5',
+			'flex pl-6 ml-0.5',
 			hasLine ? 'line' : '',
 			isFirst ? 'justify-center items-start' : 'justify-center items-center'
 		)}
-	>
-		<div
-			class={classNames(
-				'flex justify-center items-center w-6 h-6 border rounded-full text-xs font-bold',
-				color === 'blue'
-					? 'bg-blue-200 text-blue-800'
-					: color === 'orange'
-					? 'bg-orange-200 text-orange-800'
-					: 'bg-blue-100 text-blue-600',
-				''
-			)}
-		>
-			<slot name="icon" />
-		</div>
-	</div>
+	/>
 	<div
 		class={classNames(
-			'w-full flex overflow-hidden rounded-sm cursor-pointer',
+			'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
 			selected ? 'outline outline-offset-1 outline-2  outline-gray-600' : '',
 			margin
 		)}
 	>
-		<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1">
+		<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-20">
 			{#if retry}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faRepeat} />
-				</div>
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+						<Repeat size={14} />
+					</div>
+					<span slot="text">Retries</span>
+				</Popover>
 			{/if}
 			{#if earlyStop}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faStop} />
-				</div>
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1">
+						<Icon scale={0.8} data={faStop} />
+					</div>
+					<span slot="text">Early Stop/Break</span>
+				</Popover>
+			{/if}
+			{#if sleep}
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1">
+						<Icon scale={0.8} data={faBed} />
+					</div>
+					<span slot="text">Sleep</span>
+				</Popover>
 			{/if}
 			{#if suspend}
-				<div class="bg-white rounded border text-gray-600 px-1">
-					<Icon scale={0.8} data={faBed} />
-				</div>
+				<Popover notClickable>
+					<div class="bg-white rounded border text-gray-700 px-1 center-center">
+						<PhoneIncoming size={12} />
+					</div>
+					<span slot="text">Suspend</span>
+				</Popover>
 			{/if}
 		</div>
 		<div
-			class="flex justify-between items-center w-full overflow-hidden border p-2 bg-white text-sm"
+			class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
 		>
+			{#if $$slots.icon}
+				<slot name="icon" />
+				<span class="mr-2" />
+			{/if}
 			<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
 			<div class="flex items-center space-x-2">
 				{#if id}
 					<Badge color="indigo">{id}</Badge>
 				{/if}
 				{#if deletable}
-					<Button
+					<button
+						class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
+							? ''
+							: '!hidden'}"
 						on:click={(event) => dispatch('delete', event)}
-						startIcon={{ icon: faTrashAlt, classes: 'text-gray-500' }}
-						iconOnly={true}
-						color="light"
-						variant="border"
-						size="xs"
-					/>
+						><Icon
+							data={faTimesCircle}
+							class="text-gray-600 hover:text-red-600"
+							scale={0.9}
+						/></button
+					>
 				{/if}
 			</div>
 		</div>
@@ -91,7 +102,10 @@ const dispatch = createEventDispatcher();
 </div>
 
 <style>
+	.module:hover .trash {
+		display: flex !important;
+	}
 	.line {
-		background: repeating-linear-gradient(to bottom, transparent 0 4px, #bbb 4px 8px) 50%/1px 100%
-			no-repeat;
+		background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
+			50%/1px 100% no-repeat;
 	}</style>

package/components/flows/map/FlowModuleSchemaItem.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        color?: "blue" | "indigo" | "orange" | undefined;
         isFirst?: boolean | undefined;
         isLast?: boolean | undefined;
         hasLine?: boolean | undefined;
@@ -10,13 +9,14 @@ declare const __propDef: {
         retry?: boolean | undefined;
         earlyStop?: boolean | undefined;
         suspend?: boolean | undefined;
+        sleep?: boolean | undefined;
         bold?: boolean | undefined;
         id?: string | undefined;
         label: string;
     };
     events: {
         click: MouseEvent;
-        delete: CustomEvent<CustomEvent<MouseEvent>>;
+        delete: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -24,9 +24,9 @@ declare const __propDef: {
         icon: {};
     };
 };
-export declare type FlowModuleSchemaItemProps = typeof __propDef.props;
-export declare type FlowModuleSchemaItemEvents = typeof __propDef.events;
-export declare type FlowModuleSchemaItemSlots = typeof __propDef.slots;
+export type FlowModuleSchemaItemProps = typeof __propDef.props;
+export type FlowModuleSchemaItemEvents = typeof __propDef.events;
+export type FlowModuleSchemaItemSlots = typeof __propDef.slots;
 export default class FlowModuleSchemaItem extends SvelteComponentTyped<FlowModuleSchemaItemProps, FlowModuleSchemaItemEvents, FlowModuleSchemaItemSlots> {
 }
 export {};

package/components/flows/map/FlowModuleSchemaMap.svelte

@@ -1,29 +1,47 @@
 <script>import { getContext } from 'svelte';
-import { deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
+import { createBranchAll, createBranches, createLoop, deleteFlowStateById, emptyModule, idMutex } from '../flowStateUtils';
 import { flowStateStore } from '../flowState';
 import FlowErrorHandlerItem from './FlowErrorHandlerItem.svelte';
 import RemoveStepConfirmationModal from '../content/RemoveStepConfirmationModal.svelte';
-import { emptyFlowModuleState, isEmptyFlowModule } from '../utils';
+import { emptyFlowModuleState } from '../utils';
 import MapItem from './MapItem.svelte';
 import FlowSettingsItem from './FlowSettingsItem.svelte';
 import FlowInputsItem from './FlowInputsItem.svelte';
 import InsertModuleButton from './InsertModuleButton.svelte';
+import { slide } from 'svelte/transition';
 export let root = false;
-export let color = 'blue';
 export let modules;
 let indexToRemove = undefined;
 const { select } = getContext('FlowEditorContext');
-async function insertNewModuleAtIndex(index) {
+async function insertNewModuleAtIndex(index, kind) {
     await idMutex.runExclusive(async () => {
-        const flowModule = emptyModule();
+        var module = emptyModule(kind == 'flow');
+        var state = emptyFlowModuleState();
+        if (kind == 'forloop') {
+            ;
+            [module, state] = await createLoop(module.id);
+        }
+        else if (kind == 'branchone') {
+            ;
+            [module, state] = await createBranches(module.id);
+        }
+        else if (kind == 'branchall') {
+            ;
+            [module, state] = await createBranchAll(module.id);
+        }
+        const flowModule = module;
+        if (!modules)
+            return;
         modules.splice(index, 0, flowModule);
         modules = modules;
-        $flowStateStore[flowModule.id] = emptyFlowModuleState();
+        $flowStateStore[flowModule.id] = state;
         select(flowModule.id);
     });
 }
 function removeAtIndex(index) {
     select('settings');
+    if (!modules)
+        return;
     const [removedModule] = modules.splice(index, 1);
     modules = modules;
     const leaves = findLeaves(removedModule);
@@ -58,35 +76,47 @@ function findLeaves(flowModule) {
 $: confirmationModalOpen = indexToRemove !== undefined;
 </script>
 
-<div class="flex flex-col justify-between w-full">
-	<ul class="w-full">
-		{#if root}
+<div class="flex flex-col h-full relative">
+	{#if root}
+		<div
+			class="z-10 sticky top-0 bg-gray-50 flex-initial inline-flex px-3 py-2 items-center h-full max-h-12 border-b border-gray-300"
+		>
 			<FlowSettingsItem />
-			<FlowInputsItem />
+		</div>
+	{/if}
+	<ul class="w-full flex-auto   {root ? 'px-2 pb-2 pt-3' : ''} py-1">
+		{#if root}
+			<li>
+				<FlowInputsItem />
+			</li>
 		{/if}
 
-		{#each modules as mod, index (mod.id ?? index)}
-			<MapItem
-				{color}
-				{index}
-				bind:mod
-				on:delete={(event) => {
-					if (event.detail.detail.shiftKey || isEmptyFlowModule(mod)) {
-						removeAtIndex(index)
-					} else {
-						indexToRemove = index
-					}
-				}}
-				on:insert={() => {
-					insertNewModuleAtIndex(index)
-				}}
-			/>
-		{/each}
+		{#if modules}
+			{#each modules as mod, index (mod.id ?? index)}
+				<div transition:slide|local>
+					<MapItem
+						bind:mod
+						on:delete={(event) => {
+							if (event.detail.detail.shiftKey || mod.value.type === 'identity') {
+								removeAtIndex(index)
+							} else {
+								indexToRemove = index
+							}
+						}}
+						on:insert={(e) => {
+							insertNewModuleAtIndex(index, e.detail)
+						}}
+					/>
+				</div>
+			{/each}
+		{/if}
 
-		<InsertModuleButton on:click={() => insertNewModuleAtIndex(modules.length)} />
+		<InsertModuleButton on:new={(e) => insertNewModuleAtIndex(modules?.length ?? 0, e.detail)} />
 	</ul>
 	{#if root}
-		<FlowErrorHandlerItem />
+		<div class="sticky bottom-0 bg-gray-50 flex-none px-4 py-1 pb-2 border-t">
+			<FlowErrorHandlerItem />
+		</div>
 	{/if}
 </div>
 
@@ -102,69 +132,3 @@ $: confirmationModalOpen = indexToRemove !== undefined;
 		}
 	}}
 />
-
-<style>
-	.badge {
-
-    display: flex;
-
-    cursor: pointer;
-
-    align-items: center;
-
-    white-space: nowrap;
-
-    border-radius: 0.25rem;
-
-    border-width: 1px;
-
-    padding-left: 0.625rem;
-
-    padding-right: 0.625rem;
-
-    padding-top: 0.125rem;
-
-    padding-bottom: 0.125rem;
-
-    font-size: 0.875rem;
-
-    line-height: 1.25rem;
-
-    font-weight: 500
-}
-
-	.badge-on {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(30 64 175 / var(--tw-text-opacity))
-}
-
-	.badge-on:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity))
-}
-
-	.badge-off {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-
-    --tw-text-opacity: 1;
-
-    color: rgb(31 41 55 / var(--tw-text-opacity))
-}
-
-	.badge-off:hover {
-
-    --tw-bg-opacity: 1;
-
-    background-color: rgb(229 231 235 / var(--tw-bg-opacity))
-}</style>

package/components/flows/map/FlowModuleSchemaMap.svelte.d.ts

@@ -3,17 +3,16 @@ import type { FlowModule } from '../../../gen';
 declare const __propDef: {
     props: {
         root?: boolean | undefined;
-        color?: "blue" | "indigo" | "orange" | undefined;
-        modules: FlowModule[];
+        modules: FlowModule[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowModuleSchemaMapProps = typeof __propDef.props;
-export declare type FlowModuleSchemaMapEvents = typeof __propDef.events;
-export declare type FlowModuleSchemaMapSlots = typeof __propDef.slots;
+export type FlowModuleSchemaMapProps = typeof __propDef.props;
+export type FlowModuleSchemaMapEvents = typeof __propDef.events;
+export type FlowModuleSchemaMapSlots = typeof __propDef.slots;
 export default class FlowModuleSchemaMap extends SvelteComponentTyped<FlowModuleSchemaMapProps, FlowModuleSchemaMapEvents, FlowModuleSchemaMapSlots> {
 }
 export {};

package/components/flows/map/FlowSettingsItem.svelte

@@ -3,27 +3,28 @@ import Icon from 'svelte-awesome';
 import { faCalendarAlt, faSliders } from '@fortawesome/free-solid-svg-icons';
 import { classNames } from '../../../utils';
 import { Badge } from '../../common';
+import { flowStore } from '../flowStore';
 const { select, selectedId, schedule } = getContext('FlowEditorContext');
-$: settingsClass = classNames('border w-full rounded-md p-2 bg-white text-sm cursor-pointer flex items-center mb-4 sticky top-0 z-10', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
+$: settingsClass = classNames('border w-full rounded-sm p-2 bg-white border-gray-400 text-sm cursor-pointer flex items-center', $selectedId === 'settings' ? 'outline outline-offset-1 outline-2  outline-slate-900' : '');
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div on:click={() => select('settings')} class={settingsClass}>
 	<Icon data={faSliders} class="mr-2" />
-	<span
-		class="text-xs font-bold flex flex-row justify-between w-full  gap-2 items-center flex-wrap"
-	>
+	<span class="text-xs font-bold flex flex-row justify-between w-full gap-2 items-center truncate">
 		Settings
 		<span
 			class={classNames('badge', $schedule?.enabled ? 'badge-on' : 'badge-off')}
 			on:click|stopPropagation={() => select('settings-schedule')}
 		>
 			{#if $schedule?.enabled}
-				<Badge color="gray"
-					>{$schedule.cron}
-					<Icon class={$schedule.cron ? 'ml-2' : ''} data={faCalendarAlt} scale={0.8} />
+				<Badge color="gray" baseClass="truncate">
+					<Icon data={faCalendarAlt} scale={0.8} />
 				</Badge>
 			{/if}
+			{#if $flowStore.value.same_worker}
+				<Badge color="blue" baseClass="truncate">./shared</Badge>
+			{/if}
 		</span>
 	</span>
 </div>

package/components/flows/map/FlowSettingsItem.svelte.d.ts

@@ -1,14 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type FlowSettingsItemProps = typeof __propDef.props;
-export declare type FlowSettingsItemEvents = typeof __propDef.events;
-export declare type FlowSettingsItemSlots = typeof __propDef.slots;
+export type FlowSettingsItemProps = typeof __propDef.props;
+export type FlowSettingsItemEvents = typeof __propDef.events;
+export type FlowSettingsItemSlots = typeof __propDef.slots;
 export default class FlowSettingsItem extends SvelteComponentTyped<FlowSettingsItemProps, FlowSettingsItemEvents, FlowSettingsItemSlots> {
 }
 export {};

package/components/flows/map/InsertModuleButton.svelte

@@ -1,11 +1,81 @@
-<script>import { faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { Menu } from '../../common';
+import { faCode, faCodeBranch, faPlus, faBarsStaggered } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
+import { Repeat } from 'lucide-svelte';
+const dispatch = createEventDispatcher();
 </script>
 
-<button
-	on:click
-	type="button"
-	class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
->
-	<Icon data={faPlus} scale={0.8} />
-</button>
+<Menu noMinW placement="bottom-start" let:close>
+	<button
+		slot="trigger"
+		type="button"
+		class="text-gray-900 bg-white border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+	>
+		<Icon data={faPlus} scale={0.8} />
+	</button>
+	<div class="divide-y divide-gray-100 text-xs w-40">
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'script')
+			}}
+			role="menuitem"
+			tabindex="-1"
+		>
+			<Icon data={faCode} scale={0.8} class="mr-1" />
+			Script
+		</button>
+		<button
+			class="w-full inline-flex gap-1 text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'forloop')
+			}}
+			role="menuitem"
+		>
+			<span>
+				<Repeat size={14} />
+			</span>
+
+			For Loop
+		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'branchone')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			Branch to one
+		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'branchall')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faCodeBranch} scale={0.8} class="mr-1" />
+			Branch to all
+		</button>
+
+		<button
+			class="w-full text-left p-2 hover:bg-gray-100"
+			on:click={() => {
+				close()
+				dispatch('new', 'flow')
+			}}
+			role="menuitem"
+		>
+			<Icon data={faBarsStaggered} scale={0.8} class="mr-1" />
+			Flow
+		</button>
+	</div>
+</Menu>

package/components/flows/map/InsertModuleButton.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
-        click: MouseEvent;
+        new: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export declare type InsertModuleButtonProps = typeof __propDef.props;
-export declare type InsertModuleButtonEvents = typeof __propDef.events;
-export declare type InsertModuleButtonSlots = typeof __propDef.slots;
+export type InsertModuleButtonProps = typeof __propDef.props;
+export type InsertModuleButtonEvents = typeof __propDef.events;
+export type InsertModuleButtonSlots = typeof __propDef.slots;
 export default class InsertModuleButton extends SvelteComponentTyped<InsertModuleButtonProps, InsertModuleButtonEvents, InsertModuleButtonSlots> {
 }
 export {};