windmill-components 1.82.8 → 1.82.10

package/components/apps/editor/component/components.js

@@ -81,6 +81,7 @@ export const components = {
         name: 'Rich Result',
         icon: Monitor,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {
             header: { class: '', style: '' },
             container: { class: '', style: '' }
@@ -98,6 +99,7 @@ export const components = {
         name: 'Container',
         icon: BoxSelect,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -111,6 +113,7 @@ export const components = {
         name: 'Text',
         icon: Type,
         dims: '1:1-3:1',
+        softWrap: true,
         customCss: {
             text: { class: '', style: '' }
         },
@@ -150,6 +153,7 @@ export const components = {
         name: 'Button',
         icon: Inspect,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             button: { style: '', class: '' }
         },
@@ -367,6 +371,7 @@ export const components = {
         name: 'HTML',
         icon: Code2,
         dims: '1:2-1:2',
+        softWrap: false,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -388,6 +393,7 @@ Hello \${ctx.username}
         name: 'Vega Lite',
         icon: PieChart,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {},
         initialData: {
             componentInput: {
@@ -424,6 +430,7 @@ Hello \${ctx.username}
         name: 'Plotly',
         icon: PieChart,
         dims: '2:8-6:8',
+        softWrap: false,
         customCss: {},
         initialData: {
             componentInput: {
@@ -441,15 +448,7 @@ Hello \${ctx.username}
                     }
                 }
             },
-            configuration: {
-                layout: {
-                    type: 'static',
-                    fieldType: 'object',
-                    value: {},
-                    tooltip: 'Layout options for the plot. See https://plotly.com/javascript/reference/layout/ for more information',
-                    onlyStatic: true
-                }
-            }
+            configuration: {}
         }
     },
     timeseriescomponent: {
@@ -671,6 +670,7 @@ Hello \${ctx.username}
         name: 'Toggle',
         icon: ToggleLeft,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             text: { class: '', style: '' }
         },
@@ -695,6 +695,7 @@ Hello \${ctx.username}
         name: 'Text Input',
         icon: TextCursorInput,
         dims: '2:1-2:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -720,6 +721,7 @@ Hello \${ctx.username}
         name: 'Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
@@ -730,7 +732,7 @@ Hello \${ctx.username}
                 items: {
                     type: 'static',
                     fieldType: 'array',
-                    subFieldType: 'labeledselect',
+                    subFieldType: 'object',
                     value: [
                         { value: 'foo', label: 'Foo' },
                         { value: 'bar', label: 'Bar' }
@@ -761,6 +763,7 @@ Hello \${ctx.username}
         name: 'Multi Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
@@ -787,6 +790,7 @@ Hello \${ctx.username}
         name: 'Resource Select',
         icon: List,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { style: '' }
         },
@@ -813,6 +817,7 @@ Hello \${ctx.username}
         name: 'Number',
         icon: Binary,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -854,6 +859,7 @@ Hello \${ctx.username}
         name: 'Currency',
         icon: DollarSign,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -894,6 +900,7 @@ Hello \${ctx.username}
         name: 'Slider',
         icon: SlidersHorizontal,
         dims: '3:1-4:1',
+        softWrap: true,
         customCss: {
             bar: { style: '' },
             handle: { style: '' },
@@ -933,6 +940,7 @@ Hello \${ctx.username}
         name: 'Range',
         icon: SlidersHorizontal,
         dims: '3:2-4:2',
+        softWrap: true,
         customCss: {
             handles: { style: '' },
             bar: { style: '' },
@@ -976,6 +984,7 @@ Hello \${ctx.username}
         name: 'Password',
         icon: Lock,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -996,6 +1005,7 @@ Hello \${ctx.username}
         name: 'Email Input',
         icon: AtSignIcon,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1021,6 +1031,7 @@ Hello \${ctx.username}
         name: 'Date',
         icon: Calendar,
         dims: '2:1-3:1',
+        softWrap: true,
         customCss: {
             input: { class: '', style: '' }
         },
@@ -1050,6 +1061,7 @@ Hello \${ctx.username}
         name: 'Tabs',
         icon: ListOrdered,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             tabRow: { class: '', style: '' },
             allTabs: { class: '', style: '' },
@@ -1075,6 +1087,7 @@ Hello \${ctx.username}
         name: 'Icon',
         icon: Smile,
         dims: '1:3-1:2',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' },
             icon: { class: '', style: '' }
@@ -1235,6 +1248,7 @@ Hello \${ctx.username}
         name: 'Drawer',
         icon: SidebarClose,
         dims: '1:1-2:1',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -1340,6 +1354,7 @@ Hello \${ctx.username}
         name: 'Vertical Split Panes',
         icon: FlipHorizontal,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },
@@ -1354,6 +1369,7 @@ Hello \${ctx.username}
         name: 'Horizontal Split Panes',
         icon: FlipVertical,
         dims: '2:8-6:8',
+        softWrap: true,
         customCss: {
             container: { class: '', style: '' }
         },

package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -13,7 +13,7 @@ function addComponent(appComponentType) {
     push(history, $app);
     $dirtyStore = true;
     const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
-    $selectedComponent = [id];
+    $selectedComponent = id;
     $app = $app;
     $worldStore = $worldStore;
 }

package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -6,6 +6,7 @@ import { Button, ClearableInput } from '../../../common';
 import Popover from '../../../Popover.svelte';
 import QuickStyleMenu from './QuickStyleMenu.svelte';
 export let name;
+export let componentType = undefined;
 export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
@@ -17,6 +18,14 @@ $: dispatch('change', value);
 function toggleQuickMenu() {
     isQuickMenuOpen = !isQuickMenuOpen;
 }
+function applyToAllInstances() {
+    if (componentType &&
+        componentType in ($app?.css || {}) &&
+        name in ($app?.css?.[componentType] || {})) {
+        $app.css[componentType][name].style = value.style;
+        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
+    }
+}
 </script>
 
 <div
@@ -41,6 +50,23 @@ function toggleQuickMenu() {
 							/>
 						</div>
 						<div class="flex flex-col gap-1">
+							{#if componentType}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<Button
+										variant="border"
+										color="light"
+										size="xs"
+										btnClasses="!p-1 !w-[34px] !h-[34px]"
+										aria-label="Apply to all instances of this component"
+										on:click={applyToAllInstances}
+									>
+										<Forward size={18} />
+									</Button>
+									<svelte:fragment slot="text">
+										Apply to all instances of this component
+									</svelte:fragment>
+								</Popover>
+							{/if}
 							{#if quickStyleProperties?.length}
 								<Popover placement="bottom" notClickable disapperTimoout={0}>
 									<Button

package/components/apps/editor/componentsPanel/CssProperty.svelte.d.ts

@@ -1,9 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentCssProperty } from '../../types';
+import type { AppComponent } from '../component/components';
 import type { StylePropertyKey } from './quickStyleProperties';
 declare const __propDef: {
     props: {
         name: string;
+        componentType?: AppComponent['type'] | undefined;
         value?: ComponentCssProperty | undefined;
         forceStyle?: boolean | undefined;
         forceClass?: boolean | undefined;

package/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -53,7 +53,6 @@ entries.sort((a, b) => a.name.localeCompare(b.name));
 let search = '';
 </script>
 
-<h3 class="w-full text-center text-gray-600 py-1">Global Styling</h3>
 <Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
 	<Tab value="ui" size="xs" class="grow">
 		<div class="m-1 center-center">

package/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -19,19 +19,16 @@ function parseStyle() {
         multiValues = initiateMultiValues();
         return;
     }
-    try {
-        const current = parse(value) || {};
-        Object.entries(current).forEach(([k, v]) => {
-            styleStore.updatePropValue(k, v);
-            const { prop, index } = styleStore.getProp(k);
-            if (Array.isArray(prop?.prop?.value) && index !== undefined) {
-                const valueArray = v.split(' ');
-                multiValues[index] = multiValues[index].map((v, i) => valueArray[i] || v);
-            }
-        });
-        setTopColors();
-    }
-    catch { }
+    const current = parse(value) || {};
+    Object.entries(current).forEach(([k, v]) => {
+        styleStore.updatePropValue(k, v);
+        const { prop, index } = styleStore.getProp(k);
+        if (Array.isArray(prop?.prop?.value) && index !== undefined) {
+            const valueArray = v.split(' ');
+            multiValues[index] = multiValues[index].map((v, i) => valueArray[i] || v);
+        }
+    });
+    setTopColors();
 }
 function writeStyle() {
     const current = parse(value) || {};

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

@@ -8,8 +8,9 @@ import TableActionsOutput from './components/TableActionsOutput.svelte';
 export let gridItem;
 export let first = false;
 export let nested = false;
+export let parentId = undefined;
 export let expanded = false;
-const { connectingInput } = getContext('AppViewerContext');
+const { selectedComponent, connectingInput } = getContext('AppViewerContext');
 const name = getComponentNameById(gridItem.id);
 function getComponentNameById(componentId) {
     if (gridItem?.data?.type) {
@@ -26,9 +27,32 @@ function getComponentNameById(componentId) {
     }
 }
 $: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        if (parentId) {
+            $selectedComponent = parentId;
+        }
+        else {
+            $selectedComponent = undefined;
+        }
+    }
+    else {
+        $selectedComponent = gridItem.id;
+    }
+}
 </script>
 
-<OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>
+<OutputHeader
+	on:handleClick={(e) => {
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
+	}}
+	id={gridItem.id}
+	name={getComponentNameById(gridItem.id)}
+	{first}
+	{nested}
+>
 	<ComponentOutputViewer
 		componentId={gridItem.id}
 		on:select={({ detail }) => {

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

@@ -5,6 +5,7 @@ declare const __propDef: {
         gridItem: GridItem;
         first?: boolean | undefined;
         nested?: boolean | undefined;
+        parentId?: string | undefined;
         expanded?: boolean | undefined;
     };
     events: {

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

@@ -23,12 +23,10 @@ $: filtered = recursivelyFilterInJSON(object, $search, componentId);
 $: $hasResult[componentId] = Object.keys(filtered).length > 0;
 </script>
 
-{#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 $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}

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

@@ -6,13 +6,16 @@ import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutput from './ComponentOutput.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
+import MinMaxButton from './components/MinMaxButton.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
-const { connectingInput, app, allIdsInPath } = getContext('AppViewerContext');
+const { connectingInput, app } = getContext('AppViewerContext');
 let search = writable('');
+let expanded = writable(false);
 setContext('ContextPanel', {
     search,
     manuallyOpened: writable({}),
-    hasResult: writable({})
+    hasResult: writable({}),
+    expanded
 });
 </script>
 
@@ -37,11 +40,15 @@ setContext('ContextPanel', {
 				</div>
 			</div>
 
+			<div class="p-1 ">
+				<MinMaxButton bind:expanded={$expanded} />
+			</div>
+
 			<div class="flex flex-col gap-4">
 				<div>
 					<span class="text-xs font-bold p-2">State & Context</span>
 
-					<OutputHeader selectable={false} id={'ctx'} name={'App Context'} first color="blue">
+					<OutputHeader id={'ctx'} name={'App Context'} first color="blue">
 						<ComponentOutputViewer
 							componentId={'ctx'}
 							on:select={({ detail }) => {
@@ -50,7 +57,7 @@ setContext('ContextPanel', {
 						/>
 					</OutputHeader>
 
-					<OutputHeader selectable={false} id={'state'} name={'State'} color="blue">
+					<OutputHeader id={'state'} name={'State'} color="blue">
 						<ComponentOutputViewer
 							componentId={'state'}
 							on:select={({ detail }) => {

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

@@ -2,13 +2,36 @@
 import { connectInput } from '../../appUtils';
 import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
 import OutputHeader from './OutputHeader.svelte';
-const { connectingInput } = getContext('AppViewerContext');
+const { selectedComponent, connectingInput } = getContext('AppViewerContext');
 export let id;
 export let name;
 export let first = false;
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        if (id) {
+            $selectedComponent = id;
+        }
+        else {
+            $selectedComponent = undefined;
+        }
+    }
+    else {
+        $selectedComponent = id;
+    }
+}
 </script>
 
-<OutputHeader selectable={false} {id} {name} color="blue" {first}>
+<OutputHeader
+	{id}
+	{name}
+	color="blue"
+	{first}
+	on:handleClick={(e) => {
+		if (!$connectingInput.opened) {
+			onHeaderClick(e.detail.manuallyOpen)
+		}
+	}}
+>
 	<ComponentOutputViewer
 		componentId={id}
 		on:select={({ detail }) => {

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

@@ -1,21 +1,22 @@
 <script>import { classNames } from '../../../../../utils';
-import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { ChevronDown, ChevronUp } from 'lucide-svelte';
+import { createEventDispatcher, 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 } = getContext('AppViewerContext');
-$: subids = $search != '' ? allsubIds($app, id) : [];
+const { expanded, manuallyOpened, search, hasResult } = getContext('ContextPanel');
+const { selectedComponent, app, hoverStore } = getContext('AppViewerContext');
+$: subids = allsubIds($app, id);
 $: inSearch =
     $search != '' &&
         ($hasResult[id] ||
             Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
-$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+$: open =
+    $expanded || subids.includes($selectedComponent ?? '') || $manuallyOpened[id] || inSearch;
+const dispatch = createEventDispatcher();
 const hoverColor = {
     blue: 'hover:bg-blue-300 hover:text-blue-600',
     indigo: 'hover:bg-indigo-300 hover:text-indigo-600'
@@ -51,35 +52,29 @@ const idClass = {
 		class={classNames(
 			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
 			hoverColor[color],
-			$selectedComponent?.includes(id) ? openBackground[color] : 'bg-white',
+			$selectedComponent == id ? openBackground[color] : 'bg-white',
 			first ? 'border-t' : '',
 			nested ? 'border-l' : ''
 		)}
 		on:click={() => {
+			dispatch('handleClick', { manuallyOpen: $manuallyOpened[id] })
 			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
 		}}
 	>
-		<button
-			disabled={!(selectable && !$selectedComponent?.includes(id))}
-			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 ml-0.5 font-bold px-2 py-0.5 rounded-sm',
+				$selectedComponent == id ? idClass[color] : ' bg-gray-100'
+			)}
+		>
+			{id}
+		</div>
+		<div
+			on:click|stopPropagation={() => {
+				$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+			}}
+			class="text-2xs font-bold flex flex-row gap-2 items-center truncate"
 		>
-			<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} />
@@ -90,9 +85,25 @@ const idClass = {
 			{/if}
 		</div>
 	</div>
-	<div class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'}">
+	<div class="scale border-b overflow-hidden  {open ? 'py-1 scale-y' : 'scale-0 max-h-0'} ">
 		<div class={classNames(nested ? 'border-l ml-2' : '')}>
 			<slot />
 		</div>
 	</div>
 </div>
+
+<style>
+	.scale {
+		transform-origin: top;
+		transition: transform 0.26s ease;
+	}
+	.scale-y {
+		transform: scaleY(1);
+		max-height: 100%;
+	}
+
+	.scale-0 {
+		transform: scaleY(0);
+		overflow: hidden;
+		max-height: 0;
+	}</style>

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

@@ -6,9 +6,10 @@ declare const __propDef: {
         first?: boolean | undefined;
         nested?: boolean | undefined;
         color?: "blue" | "indigo" | undefined;
-        selectable?: boolean | undefined;
     };
     events: {
+        handleClick: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {

package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -163,7 +163,7 @@ function handleRefreshOn(refreshOn) {
 						btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
 						on:click={async () => {
 							runLoading = true
-							await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+							await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
 							runLoading = false
 						}}
 					>
@@ -199,7 +199,7 @@ function handleRefreshOn(refreshOn) {
 							inlineScript.content = editor?.getCode() ?? ''
 						}
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(inlineScript)
+						await $runnableComponents[id]?.(inlineScript)
 						runLoading = false
 					}}
 					on:change={async (e) => {
@@ -222,7 +222,7 @@ function handleRefreshOn(refreshOn) {
 					bind:this={simpleEditor}
 					cmdEnterAction={async () => {
 						runLoading = true
-						await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
+						await $runnableComponents[id]?.(!transformer ? inlineScript : undefined)
 						runLoading = false
 					}}
 					class="h-full"