windmill-components 1.75.0 → 1.77.0

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

@@ -1,149 +1,93 @@
-<script>import { classNames } from '../../../../utils';
+<script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
 import { X } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { flip } from 'svelte/animate';
-import { fade } from 'svelte/transition';
-import { findGridItem } from '../appUtils';
-import { components } from '../component';
+import { getContext, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { connectInput, recursivelyFilterKeyInJSON, sortGridItemsPosition } 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('AppViewerContext');
-function connectInput(componentId, path) {
-    if ($connectingInput) {
-        $connectingInput = {
-            opened: false,
-            input: {
-                connection: {
-                    componentId,
-                    path
-                },
-                type: 'connected'
-            },
-            hoveredComponent: undefined
-        };
-    }
-}
-function getComponentNameById(componentId) {
-    const component = findGridItem($app, componentId);
-    if (component?.data?.type) {
-        return components[component?.data.type].name;
-    }
-    else if (componentId == 'ctx') {
-        return 'Context';
-    }
-    else if (componentId.startsWith('bg_')) {
-        return 'Background';
-    }
-    else {
-        return 'Table action';
-    }
-}
-$: panels = [['ctx', ['email', 'username', 'query', 'hash']]].concat(Object.entries($staticOutputs));
-let search = '';
-// filter out outputs that don't match the search by name (computed by getComponentNameById) and id
-// The output should be [string, string[]][]
-$: filteredPanels = panels.filter(([componentId, outputs]) => {
-    const name = getComponentNameById(componentId);
-    return (name.toLowerCase().includes(search.toLowerCase()) ||
-        componentId.toLowerCase().includes(search.toLowerCase()));
+import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
+import MinMaxButton from './components/MinMaxButton.svelte';
+import OutputHeader from './components/OutputHeader.svelte';
+const { connectingInput, breakpoint, app, state } = getContext('AppViewerContext');
+let search = writable('');
+let expanded = false;
+let ctxOpened = true;
+let stateOpened = true;
+setContext('searchCtx', {
+    search
 });
+let sortedItems = sortGridItemsPosition($app.grid, $breakpoint);
+$: $app.subgrids &&
+    setTimeout(() => (sortedItems = sortGridItemsPosition($app.grid, $breakpoint)), 500);
+$: expanded && !ctxOpened && (ctxOpened = true);
+$: expanded && !stateOpened && (stateOpened = true);
+$: filteredState = recursivelyFilterKeyInJSON($state, $search);
 </script>
 
 <PanelSection noPadding titlePadding="px-4 pt-2 pb-0.5" title="Outputs">
-	<div class="overflow-auto h-full min-w-[150px] w-full relative flex flex-col">
-		<div class="sticky z-50 top-0 left-0 w-full bg-white px-2 pb-2">
-			<div class="relative">
-				<input
-					bind:value={search}
-					class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
-					placeholder="Search outputs..."
-				/>
-				{#if search}
-					<button
-						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 = '')}
-					>
-						<X size="14" />
-					</button>
-				{/if}
-			</div>
-		</div>
-		<div class="relative p-2">
-			{#each filteredPanels as [componentId, outputs] (componentId)}
-				<div
-					animate:flip={{ duration: 300 }}
-					in:fade|local={{ duration: 100, delay: 50 }}
-					out:fade|local={{ duration: 100 }}
-					class="pb-2"
-				>
-					{#if outputs.length > 0 && $worldStore?.outputsById[componentId]}
-						{@const name = getComponentNameById(componentId)}
-						<div>
-							<div
-								class="flex {$connectingInput?.opened
-									? 'bg-white z-50'
-									: ''} flex-row justify-between w-full"
-							>
-								<button
-									on:click|stopPropagation|preventDefault={$connectingInput.opened
-										? undefined
-										: () => ($selectedComponent = componentId)}
-									class={classNames(
-										'px-2 text-2xs py-0.5 border-t border-x font-bold rounded-t-sm w-fit',
-										$selectedComponent === componentId
-											? ' bg-indigo-500/90 text-white border-indigo-500/90'
-											: 'bg-gray-100 text-gray-500 border-gray-200'
-									)}
-								>
-									{componentId}
-								</button>
-								<span
-									class={classNames(
-										'px-1 text-2xs py-0.5 font-semibold rounded-t-sm w-fit',
-										'bg-gray-700 text-white'
-									)}
-								>
-									{name}
-								</span>
-							</div>
-							<div
-								class={classNames(
-									$connectingInput?.opened ? 'bg-white z-50' : '',
-									`w-full py-2 grow border relative break-all `,
-									$selectedComponent === componentId ? 'border border-indigo-500/90 ' : '',
-									$connectingInput.hoveredComponent === componentId
-										? 'outline outline-indigo-500/90'
-										: ''
-								)}
-							>
-								{#key $selectedComponent}
-									{#key $connectingInput?.opened}
-										<ComponentOutputViewer
-											outputs={$connectingInput?.opened && $selectedComponent === componentId
-												? name == 'Table'
-													? ['search']
-													: []
-												: outputs}
-											{componentId}
-											on:select={({ detail }) => {
-												connectInput(componentId, detail)
-											}}
-										/>
-									{/key}
-								{/key}
-							</div>
-						</div>
+	<div style="z-index:1000;" class="bg-white w-full h-full">
+		<div class="min-w-[150px]">
+			<div class="sticky z-50 top-0 left-0 w-full bg-white p-2">
+				<div class="relative">
+					<input
+						bind:value={$search}
+						class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+						placeholder="Search outputs..."
+					/>
+					{#if search}
+						<button
+							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 = '')}
+						>
+							<X size="14" />
+						</button>
 					{/if}
 				</div>
-			{:else}
-				<div
-					in:fade|local={{ duration: 50, delay: 100 }}
-					out:fade|local={{ duration: 50 }}
-					class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-4 px-2"
-				>
-					No outputs found
+			</div>
+
+			<div class="p-1 ">
+				<MinMaxButton bind:expanded />
+			</div>
+
+			<div class="flex flex-col gap-4">
+				<div>
+					<span class="text-sm font-bold p-2">State & Context</span>
+
+					<OutputHeader id={'ctx'} name={'App Context'} first color="blue" {expanded}>
+						<ComponentOutputViewer
+							componentId={'ctx'}
+							outputs={['email', 'username', 'query', 'hash']}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'ctx', detail)
+							}}
+						/>
+					</OutputHeader>
+
+					<OutputHeader id={'state'} name={'State'} color="blue" {expanded}>
+						<ComponentOutputViewer
+							componentId={'state'}
+							outputs={Object.keys($state)}
+							on:select={({ detail }) => {
+								$connectingInput = connectInput($connectingInput, 'state', detail)
+							}}
+						/>
+					</OutputHeader>
+				</div>
+
+				<div>
+					<span class="text-sm font-bold p-2">Components</span>
+					{#each sortedItems as gridItem, index}
+						<ComponentOutput {gridItem} first={index === 0} {expanded} />
+					{/each}
+				</div>
+				<div>
+					<span class="text-sm font-bold p-2">Background scripts</span>
+					<div class="border-t">
+						<BackgroundScriptsOutput {expanded} />
+					</div>
 				</div>
-			{/each}
+			</div>
 		</div>
 	</div>
 </PanelSection>

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

@@ -0,0 +1,71 @@
+<script>import { classNames } from '../../../../utils';
+import { getContext } from 'svelte';
+import { slide } from 'svelte/transition';
+import { connectInput, sortGridItemsPosition } from '../appUtils';
+import ComponentOutput from './ComponentOutput.svelte';
+export let name = undefined;
+export let parentId;
+export let expanded = false;
+export let subGrids;
+const { app, connectingInput, breakpoint, worldStore } = getContext('AppViewerContext');
+let selected = 0;
+$: outputs = $worldStore?.outputsById[parentId];
+let sortedItems = subGrids.map((k) => ({
+    k,
+    items: sortGridItemsPosition($app.subgrids?.[k] ?? [], $breakpoint)
+}));
+$: $app.subgrids &&
+    setTimeout(() => (sortedItems = subGrids.map((k) => ({
+        k,
+        items: sortGridItemsPosition($app.subgrids?.[k] ?? [], $breakpoint)
+    }))), 500);
+$: if (outputs?.selectedTabIndex) {
+    outputs.selectedTabIndex.subscribe({
+        id: 'subgridoutput-' + parentId,
+        next: (value) => {
+            selected = value;
+        }
+    });
+}
+</script>
+
+{#each sortedItems 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,38 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { selectedComponent, connectingInput } = getContext('AppViewerContext');
+export let id;
+export let name;
+export let expanded = false;
+export let first = false;
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        $selectedComponent = undefined;
+    }
+    else {
+        $selectedComponent = id;
+    }
+}
+</script>
+
+<OutputHeader
+	{id}
+	{name}
+	color="blue"
+	{first}
+	{expanded}
+	on:handleClick={(e) => {
+		onHeaderClick(e.detail.manuallyOpen)
+	}}
+	shouldOpen={$selectedComponent === id}
+>
+	<ComponentOutputViewer
+		componentId={id}
+		outputs={['loading', 'result']}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        expanded?: boolean | undefined;
+        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,10 @@
+<script>import { getContext } from 'svelte';
+import OutputHeader from './OutputHeader.svelte';
+import BackgroundScriptOutput from './BackgroundScriptOutput.svelte';
+const { app } = getContext('AppViewerContext');
+export let expanded = false;
+</script>
+
+{#each $app.hiddenInlineScripts as action, index}
+	<BackgroundScriptOutput id={`bg_${index}`} name={action.name} {expanded} />
+{/each}

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        expanded?: boolean | undefined;
+    };
+    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/MinMaxButton.svelte

@@ -0,0 +1,25 @@
+<script>import Button from '../../../../common/button/Button.svelte';
+import { Maximize, Minimize } from 'lucide-svelte';
+export let expanded = false;
+</script>
+
+<Button
+	on:click={() => {
+		expanded = !expanded
+	}}
+	color="light"
+	size="xs"
+	variant="border"
+>
+	{#if !expanded}
+		<div class="flex flex-row gap-2">
+			<Maximize size="14" />
+			Expand all
+		</div>
+	{:else}
+		<div class="flex flex-row gap-2">
+			<Minimize size="14" />
+			Collapse all
+		</div>
+	{/if}
+</Button>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        expanded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MinMaxButtonProps = typeof __propDef.props;
+export type MinMaxButtonEvents = typeof __propDef.events;
+export type MinMaxButtonSlots = typeof __propDef.slots;
+export default class MinMaxButton extends SvelteComponentTyped<MinMaxButtonProps, MinMaxButtonEvents, MinMaxButtonSlots> {
+}
+export {};

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

@@ -0,0 +1,78 @@
+<script>import { classNames } from '../../../../../utils';
+import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { slide } from 'svelte/transition';
+export let id;
+export let name;
+export let first = false;
+export let nested = false;
+export let color = 'indigo';
+export let expanded = false;
+export let shouldOpen = false;
+$: open = shouldOpen;
+let manuallyOpen = false;
+const dispatch = createEventDispatcher();
+$: if (expanded) {
+    manuallyOpen = true;
+}
+else {
+    manuallyOpen = false;
+}
+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={classNames(
+		'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
+		hoverColor[color],
+		open && !manuallyOpen ? openBackground[color] : 'bg-white',
+		first ? 'border-t' : '',
+		nested ? 'border-l' : ''
+	)}
+	on:click={() => {
+		dispatch('handleClick', { manuallyOpen })
+		manuallyOpen = !manuallyOpen
+	}}
+>
+	<div
+		class={classNames(
+			'text-2xs ml-0.5 font-bold px-2 py-0.5 rounded-sm',
+			open ? idClass[color] : ' bg-gray-100'
+		)}
+	>
+		{id}
+	</div>
+	<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+		{name}
+		{#if !open && !manuallyOpen}
+			<ChevronDown size={14} />
+		{:else if manuallyOpen}
+			<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+		{:else}
+			<ChevronUp size={14} />
+		{/if}
+	</div>
+</div>
+{#if open || manuallyOpen}
+	<div class="py-1 border-b" transition:slide|local>
+		<div class={classNames(nested ? 'border-l ml-2' : '')}>
+			<slot />
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+        nested?: boolean | undefined;
+        color?: "blue" | "indigo" | undefined;
+        expanded?: boolean | undefined;
+        shouldOpen?: boolean | undefined;
+    };
+    events: {
+        handleClick: CustomEvent<any>;
+    } & {
+        [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,19 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { staticOutputs, connectingInput } = getContext('AppViewerContext');
+export let id;
+export let expanded = false;
+export let first = false;
+</script>
+
+<OutputHeader {id} name={'Table action'} {first} {expanded}>
+	<ComponentOutputViewer
+		componentId={id}
+		outputs={$staticOutputs[id]}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        expanded?: boolean | undefined;
+        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,14 @@
+<script>import TableActionOutput from './TableActionOutput.svelte';
+export let gridItem;
+export let expanded = false;
+</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} {expanded} first={index === 0} />
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../../types';
+declare const __propDef: {
+    props: {
+        gridItem: GridItem;
+        expanded?: boolean | undefined;
+    };
+    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 {};