windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -1,27 +1,34 @@
 <script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
 import { getContext } from 'svelte';
-export let outputs = [];
+import { recursivelyFilterKeyInJSON as recursivelyFilterInJSON } from '../appUtils';
 export let componentId;
-const { worldStore } = getContext('AppEditorContext');
+const { worldStore } = getContext('AppViewerContext');
+const { search, hasResult } = getContext('ContextPanel');
 let object = {};
 function subscribeToAllOutputs(observableOutputs) {
     if (observableOutputs) {
-        outputs.forEach((output) => {
-            object[output] = undefined;
-            observableOutputs[output]?.subscribe({
+        Object.entries(observableOutputs).forEach(([k, output]) => {
+            object[k] = undefined;
+            output?.subscribe({
+                id: 'alloutputs' + componentId + '-' + k,
                 next: (value) => {
-                    object[output] = value;
+                    object[k] = value;
                 }
             });
         });
     }
 }
-$: $worldStore?.outputsById[componentId] &&
-    subscribeToAllOutputs($worldStore.outputsById[componentId]);
+$: subscribeToAllOutputs($worldStore?.outputsById?.[componentId]);
+$: filtered = recursivelyFilterInJSON(object, $search, componentId);
+$: $hasResult[componentId] = Object.keys(filtered).length > 0;
 </script>
 
-{#if Object.keys(object).length > 0}
-	<ObjectViewer json={object} on:select topBrackets={false} />
-{:else}
-	<div class="text-xs text-gray-500 px-4">No outputs</div>
+{#if object != undefined && Object.keys(object).length > 0}
+	{#if $hasResult[componentId] || $search == ''}
+		<ObjectViewer json={filtered} on:select topBrackets={false} />
+	{:else if $search.length > 0}
+		<div class="text-xs pl-2 text-gray-600">No results</div>
+	{:else}
+		<div class="text-xs pl-2 text-gray-600">No outputs</div>
+	{/if}
 {/if}

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte.d.ts

@@ -1,7 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        outputs?: string[] | undefined;
         componentId: string;
     };
     events: {

package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,101 +1,79 @@
-<script>import { page } from '$app/stores';
+<script>import Alert from '../../../common/alert/Alert.svelte';
 import { classNames } from '../../../../utils';
+import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
-import { key } from 'svelte-awesome/icons';
-import { displayData } from '../../utils';
+import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
+import ComponentOutput from './ComponentOutput.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
-const { connectingInput, staticOutputs, worldStore, selectedComponent, app } = getContext('AppEditorContext');
-function connectInput(componentId, path) {
-    if ($connectingInput) {
-        $connectingInput = {
-            opened: false,
-            input: {
-                connection: {
-                    componentId,
-                    path
-                },
-                type: 'connected'
-            },
-            hoveredComponent: undefined
-        };
-    }
-}
-function getComponentNameById(componentId) {
-    const component = $app.grid.find((c) => c?.data?.id === componentId);
-    if (component?.data.type) {
-        return displayData[component?.data.type].name;
-    }
-    else if (componentId == 'ctx') {
-        return 'Context';
-    }
-    else {
-        return 'Table action';
-    }
-}
-$: panels = [['ctx', ['email', 'username', 'query']]].concat(Object.entries($staticOutputs));
+import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
+import OutputHeader from './components/OutputHeader.svelte';
+const { connectingInput, app } = getContext('AppViewerContext');
+const { search } = getContext('ContextPanel');
 </script>
 
-<PanelSection noPadding titlePadding="px-4 pt-2" title="Outputs">
+<PanelSection noPadding titlePadding="px-1.5 pt-2" title="Outputs">
 	<div
-		class="overflow-auto min-w-[150px] border-t w-full relative flex flex-col gap-4 px-2 pt-4 pb-2"
+		class={classNames(
+			'bg-white w-full h-full z-30',
+			$connectingInput.opened ? 'border-blue-500 border-t-2 border-r-2 bg-blue-50/50 z-50' : ''
+		)}
 	>
-		{#each panels as [componentId, outputs] (componentId)}
-			{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-				<div>
-					<div
-						class="flex {$connectingInput?.opened
-							? 'bg-white z-50'
-							: ''} flex-row justify-between w-full"
-					>
+		<div class="min-w-[150px]">
+			<div class="sticky z-10 top-0 left-0 w-full bg-white p-1.5">
+				<div class="relative w-full">
+					<input
+						bind:value={$search}
+						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+						placeholder="Search outputs..."
+					/>
+					{#if search}
 						<button
-							on:click|stopPropagation|preventDefault={$connectingInput.opened
-								? undefined
-								: () => ($selectedComponent = componentId)}
-							class={classNames(
-								'px-2 text-2xs py-0.5 border border-gray-300 font-bold rounded-t-sm w-fit',
-								$selectedComponent === componentId
-									? ' bg-indigo-500 text-white'
-									: 'bg-gray-200 text-gray-500'
-							)}
+							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+							on:click|stopPropagation|preventDefault={() => ($search = '')}
 						>
-							{componentId}
+							<X size="14" />
 						</button>
-						<span
-							class={classNames(
-								'px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit',
-								'bg-gray-500 text-white'
-							)}
-						>
-							{getComponentNameById(componentId)}
-						</span>
-					</div>
+					{/if}
+				</div>
+			</div>
+
+			<div class="flex flex-col gap-4">
+				<div>
+					<span class="text-xs font-bold p-2">State & Context</span>
 
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={classNames(
-							$connectingInput?.opened ? 'bg-white z-50' : '',
-							`w-full py-2 grow border relative break-all `,
-							$selectedComponent === componentId ? 'border border-blue-500 ' : '',
-							$connectingInput.hoveredComponent === componentId ? 'outline outline-blue-500' : ''
-						)}
-					>
-						{#key $selectedComponent}
-							{#key $connectingInput?.opened}
-								<ComponentOutputViewer
-									outputs={$connectingInput?.opened && $selectedComponent === componentId
-										? ['search']
-										: outputs}
-									{componentId}
-									on:select={({ detail }) => {
-										connectInput(componentId, detail)
-									}}
-								/>
-							{/key}
-						{/key}
+					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
+						<ComponentOutputViewer
+							componentId={'ctx'}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'ctx', detail)
+							}}
+						/>
+					</OutputHeader>
+
+					<OutputHeader selectable={false} id={'state'} name={'State'} color="blue">
+						<ComponentOutputViewer
+							componentId={'state'}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'state', detail)
+							}}
+						/>
+					</OutputHeader>
+				</div>
+
+				<div>
+					<span class="text-sm font-bold p-2">Components</span>
+					{#each $app.grid as gridItem, index (gridItem.id)}
+						<ComponentOutput {gridItem} first={index === 0} />
+					{/each}
+				</div>
+				<div>
+					<span class="text-sm font-bold p-2">Background scripts</span>
+					<div class="border-t">
+						<BackgroundScriptsOutput />
 					</div>
 				</div>
-			{/if}
-		{/each}
+			</div>
+		</div>
 	</div>
 </PanelSection>

package/components/apps/editor/contextPanel/SubGridOutput.svelte

@@ -0,0 +1,66 @@
+<script>import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import { slide } from 'svelte/transition';
+import { connectInput } from '../appUtils';
+import ComponentOutput from './ComponentOutput.svelte';
+export let name = undefined;
+export let parentId;
+export let expanded = false;
+export let subGrids;
+const { app, connectingInput, worldStore } = getContext('AppViewerContext');
+let selected = 0;
+$: outputs = $worldStore?.outputsById[parentId];
+$: subgridItems = subGrids.map((k) => ({
+    k,
+    items: $app.subgrids?.[k] ?? []
+}));
+$: if (outputs?.selectedTabIndex) {
+    outputs.selectedTabIndex.subscribe({
+        id: 'subgridoutput-' + parentId,
+        next: (value) => {
+            selected = value;
+        }
+    });
+}
+</script>
+
+{#each subgridItems as { k, items }, index (k)}
+	<div class="ml-2 my-2">
+		{#if subGrids.length > 1}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<div
+				class={classNames(
+					'px-1 py-0.5 flex justify-between items-center font-semibold text-xs border-l border-y w-full cursor-pointer',
+					selected === index ? 'bg-gray-200' : 'bg-gray-50'
+				)}
+				on:click={() => {
+					selected = index
+				}}
+			>
+				<div class="text-xs">
+					{name ? name : 'Should implement name'}
+					{index + 1}
+				</div>
+			</div>
+		{/if}
+
+		{#if selected === index || name !== 'Tabs'}
+			<div transition:slide|local class="border-l">
+				{#if items.length > 0}
+					{#each items as subGridItem, index (subGridItem.id)}
+						<ComponentOutput
+							gridItem={subGridItem}
+							first={index === 0}
+							{expanded}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, subGridItem.id, detail)
+							}}
+						/>
+					{/each}
+				{:else}
+					<div class="text-xs text-gray-500 border-y border-l p-1">No components</div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/each}

package/components/apps/editor/contextPanel/SubGridOutput.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        name?: string | undefined;
+        parentId: string;
+        expanded?: boolean | undefined;
+        subGrids: string[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SubGridOutputProps = typeof __propDef.props;
+export type SubGridOutputEvents = typeof __propDef.events;
+export type SubGridOutputSlots = typeof __propDef.slots;
+export default class SubGridOutput extends SvelteComponentTyped<SubGridOutputProps, SubGridOutputEvents, SubGridOutputSlots> {
+}
+export {};

package/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let name;
+export let first = false;
+</script>
+
+<OutputHeader selectable={false} {id} {name} color="blue" {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

package/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type BackgroundScriptOutputProps = typeof __propDef.props;
+export type BackgroundScriptOutputEvents = typeof __propDef.events;
+export type BackgroundScriptOutputSlots = typeof __propDef.slots;
+export default class BackgroundScriptOutput extends SvelteComponentTyped<BackgroundScriptOutputProps, BackgroundScriptOutputEvents, BackgroundScriptOutputSlots> {
+}
+export {};

package/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte

@@ -0,0 +1,8 @@
+<script>import { getContext } from 'svelte';
+import BackgroundScriptOutput from './BackgroundScriptOutput.svelte';
+const { app } = getContext('AppViewerContext');
+</script>
+
+{#each $app.hiddenInlineScripts as action, index}
+	<BackgroundScriptOutput id={`bg_${index}`} name={action.name} />
+{/each}

package/components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte.d.ts

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

package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -0,0 +1,107 @@
+<script>import { classNames } from '../../../../../utils';
+import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { allsubIds } from '../../appUtils';
+export let id;
+export let name;
+export let first = false;
+export let nested = false;
+export let color = 'indigo';
+export let selectable = true;
+const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
+const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput } = getContext('AppViewerContext');
+$: subids = $search != '' ? allsubIds($app, id) : [];
+$: inSearch =
+    $search != '' &&
+        ($hasResult[id] ||
+            Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
+$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+const hoverColor = {
+    blue: 'hover:bg-blue-300 hover:text-blue-600',
+    indigo: 'hover:bg-indigo-300 hover:text-indigo-600'
+};
+const openBackground = {
+    blue: 'bg-blue-50',
+    indigo: 'bg-indigo-50'
+};
+const manuallyOpenColor = {
+    blue: 'text-blue-600',
+    indigo: 'text-indigo-600'
+};
+const idClass = {
+    blue: 'bg-blue-500 text-white',
+    indigo: 'bg-indigo-500 text-white'
+};
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		on:mouseover|stopPropagation={() => {
+			if (id !== $hoverStore) {
+				$hoverStore = id
+			}
+		}}
+		on:mouseout|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class={classNames(
+			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
+			hoverColor[color],
+			$selectedComponent?.includes(id)
+				? openBackground[color]
+				: $connectingInput.hoveredComponent === id
+				? 'bg-orange-300 '
+				: 'bg-white',
+			first ? 'border-t' : '',
+			nested ? 'border-l' : ''
+		)}
+		on:click={() => {
+			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+		}}
+	>
+		<button
+			disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+			title="Select component"
+			on:click|stopPropagation={() => ($selectedComponent = [id])}
+			class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+		>
+			<div
+				class={classNames(
+					'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+					$selectedComponent?.includes(id) ? idClass[color] : ''
+				)}
+			>
+				{id}
+			</div>
+			{#if selectable && !$selectedComponent?.includes(id)}
+				<div class=" px-1 ">
+					<Pointer size={14} />
+				</div>
+			{/if}
+		</button>
+		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+			{name}
+			{#if !open}
+				<ChevronDown size={14} />
+			{:else if $manuallyOpened[id]}
+				<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+			{:else}
+				<ChevronUp size={14} />
+			{/if}
+		</div>
+	</div>
+	<div
+		class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'} {$connectingInput.hoveredComponent ===
+			id && !$selectedComponent?.includes(id)
+			? '  bg-orange-100/40'
+			: ''}"
+	>
+		<div class={classNames(nested ? 'border-l ml-2' : '')}>
+			<slot />
+		</div>
+	</div>
+</div>

package/components/apps/editor/contextPanel/components/OutputHeader.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+        nested?: boolean | undefined;
+        color?: "blue" | "indigo" | undefined;
+        selectable?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type OutputHeaderProps = typeof __propDef.props;
+export type OutputHeaderEvents = typeof __propDef.events;
+export type OutputHeaderSlots = typeof __propDef.slots;
+export default class OutputHeader extends SvelteComponentTyped<OutputHeaderProps, OutputHeaderEvents, OutputHeaderSlots> {
+}
+export {};

package/components/apps/editor/contextPanel/components/TableActionOutput.svelte

@@ -0,0 +1,17 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let first = false;
+</script>
+
+<OutputHeader {id} name={'Table action'} {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

package/components/apps/editor/contextPanel/components/TableActionOutput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        first?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionOutputProps = typeof __propDef.props;
+export type TableActionOutputEvents = typeof __propDef.events;
+export type TableActionOutputSlots = typeof __propDef.slots;
+export default class TableActionOutput extends SvelteComponentTyped<TableActionOutputProps, TableActionOutputEvents, TableActionOutputSlots> {
+}
+export {};

package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte

@@ -0,0 +1,13 @@
+<script>import TableActionOutput from './TableActionOutput.svelte';
+export let gridItem;
+</script>
+
+<div class="my-1">
+	{#if gridItem.data.type === 'tablecomponent' && gridItem.data.actionButtons.length > 0}
+		<div class="ml-2 border-l">
+			{#each gridItem.data.actionButtons as action, index}
+				<TableActionOutput id={action.id} first={index === 0} />
+			{/each}
+		</div>
+	{/if}
+</div>

package/components/apps/editor/contextPanel/components/TableActionsOutput.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../../types';
+declare const __propDef: {
+    props: {
+        gridItem: GridItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionsOutputProps = typeof __propDef.props;
+export type TableActionsOutputEvents = typeof __propDef.events;
+export type TableActionsOutputSlots = typeof __propDef.slots;
+export default class TableActionsOutput extends SvelteComponentTyped<TableActionsOutputProps, TableActionsOutputEvents, TableActionsOutputSlots> {
+}
+export {};