windmill-components 1.70.0 → 1.77.0

package/components/apps/editor/component/default-codes.js

@@ -69,14 +69,14 @@ return {
     },
     displaycomponent: {
         deno: `export async function main() {
-return {
-	"foo": 42
-}
+	return {
+		"foo": 42
+	}
 }`,
         python3: `def main():
-return {
-	"foo": 42
-}`
+	return {
+		"foo": 42
+	}`
     },
     htmlcomponent: {
         deno: `export async function main() {

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

@@ -4,7 +4,10 @@ const layout = {
         'tabscomponent',
         'containercomponent',
         'horizontaldividercomponent',
-        'verticaldividercomponent'
+        'verticaldividercomponent',
+        'drawercomponent',
+        'verticalsplitpanescomponent',
+        'horizontalsplitpanescomponent'
     ]
 };
 const buttons = {
@@ -16,6 +19,7 @@ const inputs = {
     components: [
         'textinputcomponent',
         'passwordinputcomponent',
+        'emailinputcomponent',
         'numberinputcomponent',
         'currencycomponent',
         'slidercomponent',
@@ -23,7 +27,9 @@ const inputs = {
         'dateinputcomponent',
         'fileinputcomponent',
         'checkboxcomponent',
-        'selectcomponent'
+        'selectcomponent',
+        'resourceselectcomponent',
+        'multiselectcomponent',
     ]
 };
 const display = {
@@ -32,6 +38,7 @@ const display = {
         'textcomponent',
         'iconcomponent',
         'imagecomponent',
+        'mapcomponent',
         'htmlcomponent',
         'tablecomponent',
         'aggridcomponent',
@@ -41,7 +48,8 @@ const display = {
         'plotlycomponent',
         'scatterchartcomponent',
         'timeseriescomponent',
-        'displaycomponent',
+        'pdfcomponent',
+        'displaycomponent'
     ]
 };
 export const COMPONENT_SETS = [layout, buttons, inputs, display];

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

@@ -1,42 +1,85 @@
-<script>import { getContext, onMount } from 'svelte';
-import { isOpenStore } from './store';
+<script>import { getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
 import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
 import { components as componentsRecord, COMPONENT_SETS } from '../component';
 import ListItem from './ListItem.svelte';
 import { insertNewGridItem } from '../appUtils';
-const TITLE_PREFIX = 'Component.';
-const { app, selectedComponent, focusedGrid } = getContext('AppEditorContext');
+import { X } from 'lucide-svelte';
+import { push } from '../../../../history';
+import { flip } from 'svelte/animate';
+const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
 function addComponent(appComponentType) {
+    push(history, $app);
     $dirtyStore = true;
     const data = componentsRecord[appComponentType].data;
     const id = insertNewGridItem($app, data, $focusedGrid);
     $selectedComponent = id;
 }
-onMount(() => {
-    isOpenStore.addItems(COMPONENT_SETS.map((set) => ({ [TITLE_PREFIX + set.title]: true })));
-});
+let search = '';
+// Filter COMPONENT_SETS by search
+$: componentsFiltered = COMPONENT_SETS.map((set) => ({
+    ...set,
+    components: set.components.filter((component) => {
+        const name = componentsRecord[component].name.toLowerCase();
+        return name.includes(search.toLowerCase());
+    })
+}));
 </script>
 
-{#each COMPONENT_SETS as { title, components }, index (index)}
-	<ListItem {title} prefix={TITLE_PREFIX}>
-		{#if components.length}
-			<div class="flex flex-wrap gap-2 py-2">
-				{#each components as item}
-					<button
-						on:click={() => addComponent(item)}
-						title={componentsRecord[item].name}
-						class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-							justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
-					>
-						<svelte:component this={componentsRecord[item].icon} />
-						<div class="text-xs w-full text-center ellipsize">
-							{componentsRecord[item].name}
-						</div>
-					</button>
-				{/each}
-			</div>
-		{:else}
-			<div class="text-xs text-gray-500 py-1 px-2"> There are no components in this group yet </div>
+<section class="p-2 sticky bg-white w-full z-20 top-0">
+	<div class="relative">
+		<input
+			bind:value={search}
+			class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+			placeholder="Search components..."
+		/>
+		{#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}
-	</ListItem>
-{/each}
+	</div>
+</section>
+
+<div class="relative">
+	{#if componentsFiltered.reduce((acc, { components }) => acc + components.length, 0) === 0}
+		<div
+			in:fade|local={{ duration: 50, delay: 50 }}
+			out:fade|local={{ duration: 50 }}
+			class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-6 px-2"
+		>
+			No components found
+		</div>
+	{:else}
+		<div in:fade|local={{ duration: 50, delay: 50 }} out:fade|local={{ duration: 50 }}>
+			{#each componentsFiltered as { title, components }, index (index)}
+				{#if components.length}
+					<div transition:slide|local={{ duration: 300 }}>
+						<ListItem title={`${title} (${components.length})`}>
+							<div class="flex flex-wrap gap-2 py-2">
+								{#each components as item (item)}
+									<button
+										animate:flip={{ duration: 300 }}
+										on:click={() => addComponent(item)}
+										title={componentsRecord[item].name}
+										class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+										justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
+									>
+										<svelte:component this={componentsRecord[item].icon} />
+										<div class="text-xs w-full text-center ellipsize">
+											{componentsRecord[item].name}
+										</div>
+									</button>
+								{/each}
+							</div>
+						</ListItem>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -1,31 +1,67 @@
-<script>export let name;
+<script>import { X } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
+export let name;
 export let value;
+function reset(property) {
+    if (value) {
+        value[property] = '';
+    }
+}
 </script>
 
 <div class="text-sm font-semibold text-gray-500 capitalize pt-2">
-	{name}
+	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
 	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
-		<label class="block pb-2">
-			<div class="text-xs font-medium pb-0.5">
-				Style
-			</div>
-			<input
-				type="text"
-				bind:value={value.style}
-				on:focus
-			/>
-		</label>
-		<label class="block">
-			<div class="text-xs font-medium pb-0.5">
-				Tailwind classes
-			</div>
-			<input
-				type="text"
-				bind:value={value.class}
-				on:focus
-			/>
-		</label>
+		{#if value.style !== undefined}
+			<label class="block pb-2">
+				<div class="text-xs font-medium pb-0.5"> Style </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.style}
+						on:focus
+					/>
+					{#if value?.style}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove styles"
+							on:click|preventDefault|stopPropagation={() => reset('style')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
+		{/if}
+		{#if value.class !== undefined}
+			<label class="block">
+				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.class}
+						on:focus
+					/>
+					{#if value?.class}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove classes"
+							on:click|preventDefault|stopPropagation={() => reset('class')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
+		{/if}
 	</div>
-{/if}
+{/if}

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

@@ -1,11 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import type { ComponentCssProperty } from "../../types";
+import type { ComponentCssProperty } from '../../types';
 declare const __propDef: {
     props: {
         name: string;
         value: ComponentCssProperty | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         focus: FocusEvent;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -7,8 +7,11 @@ import ListItem from './ListItem.svelte';
 import { isOpenStore } from './store';
 import CssProperty from './CssProperty.svelte';
 import { components } from '../component';
+import { slide } from 'svelte/transition';
+const STATIC_ELEMENTS = ['app'];
 const TITLE_PREFIX = 'Css.';
-const { app } = getContext('AppEditorContext');
+const SHOW_UNUSED_ID = 'Setting.ShowUnused';
+const { app } = getContext('AppViewerContext');
 let rawCode = '';
 let viewJsonSchema = false;
 $: rawCode && parseJson();
@@ -54,7 +57,7 @@ entries.forEach((e) => {
     }
     e.ids.forEach((id) => {
         if (!newCss[e.type][id]) {
-            newCss[e.type][id] = { style: '', class: '' };
+            newCss[e.type][id] = components?.[e.type]?.data?.customCss?.[id] ?? { class: '', style: '' };
         }
     });
     e.ids
@@ -67,18 +70,25 @@ entries.forEach((e) => {
 });
 //@ts-ignore
 $app.css = newCss;
+$: staticComponents = entries.filter(({ type }) => STATIC_ELEMENTS.includes(type));
+$: usedComponents = Object.keys($app.grid.reduce((acc, { data }) => {
+    acc[data.type] = true;
+    return acc;
+}, {}))
+    .map((type) => entries.find((entry) => entry.type === type))
+    .filter(Boolean);
+$: unusedComponents = entries.filter(({ type }) => {
+    return (!STATIC_ELEMENTS.includes(type) && !usedComponents.find((entry) => entry.type === type));
+});
 onMount(() => {
-    isOpenStore.addItems([{ name: 'App' }, ...Object.values(components)].map(component => {
+    isOpenStore.addItems([{ name: 'App' }, ...Object.values(components)].map((component) => {
         return { [TITLE_PREFIX + component.name]: false };
     }));
+    isOpenStore.addItems([{ [SHOW_UNUSED_ID]: false }]);
 });
 </script>
 
-<Tabs
-	selected="ui"
-	on:selected={(e) => switchTab(e.detail === 'json')}
-	class="relative"
->
+<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">
 			<MousePointer2 size={16} />
@@ -93,7 +103,7 @@ onMount(() => {
 	</Tab>
 	<div slot="content" class="h-full overflow-y-auto">
 		<TabContent value="ui">
-			{#each entries as { type, name, icon, ids }}
+			{#each [...staticComponents, ...usedComponents] as { type, name, icon, ids }}
 				{#if ids.length > 0}
 					<ListItem title={name} prefix={TITLE_PREFIX}>
 						<div slot="title" class="flex items-center">
@@ -118,6 +128,43 @@ onMount(() => {
 					</ListItem>
 				{/if}
 			{/each}
+			<div class="px-1 my-4">
+				<button
+					on:click|preventDefault|stopPropagation={() => isOpenStore.toggle(SHOW_UNUSED_ID)}
+					class="w-full text-xs text-gray-500 text-center font-medium hover:underline p-2"
+				>
+					{$isOpenStore[SHOW_UNUSED_ID] ? 'Hide' : 'Show'} unused components
+				</button>
+			</div>
+			{#if $isOpenStore[SHOW_UNUSED_ID]}
+				<div transition:slide|local={{ duration: 300 }}>
+					{#each unusedComponents as { type, name, icon, ids }}
+						{#if ids.length > 0}
+							<ListItem title={name} prefix={TITLE_PREFIX}>
+								<div slot="title" class="flex items-center">
+									<svelte:component this={icon} size={18} />
+									<span class="ml-1">
+										{name}
+									</span>
+								</div>
+								<div class="pb-2">
+									{#each ids as id}
+										<div class="mb-3">
+											{#if $app?.css?.[type][id]}
+												<CssProperty
+													name={id}
+													bind:value={$app.css[type][id]}
+													on:focus={() => (isCustom[type] = true)}
+												/>
+											{/if}
+										</div>
+									{/each}
+								</div>
+							</ListItem>
+						{/if}
+					{/each}
+				</div>
+			{/if}
 		</TabContent>
 		<TabContent value="json">
 			{#if !emptyString(jsonError)}

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

@@ -2,26 +2,37 @@
 import { ChevronDown } from 'lucide-svelte';
 import { isOpenStore } from './store';
 export let title;
-export let prefix = '';
+export let prefix = undefined;
 $: storeTitle = prefix + title;
-$: isOpen = $isOpenStore[storeTitle];
+$: isOpen = prefix ? $isOpenStore[storeTitle] : true;
 </script>
 
-<section class="mt-1 mb-2 px-1">
-	<button
-		on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
-		class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+<section class="pt-1 pb-2 px-1">
+	{#if prefix !== undefined}
+		<button
+			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
 			rounded-sm duration-200 hover:bg-gray-100"
-	>
-		<h1 class="text-sm font-semibold text-left">
+		>
+			<h1 class="text-sm font-semibold text-left">
+				<slot name="title">
+					{title}
+				</slot>
+			</h1>
+			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
+		</button>
+		{#if isOpen}
+			<div transition:slide|local={{ duration: 300 }} class="px-2">
+				<slot />
+			</div>
+		{/if}
+	{:else}
+		<h1 class="text-sm font-semibold text-left px-2 py-1">
 			<slot name="title">
 				{title}
 			</slot>
 		</h1>
-		<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
-	</button>
-	{#if isOpen}
-		<div transition:slide|local={{ duration: 300 }} class="px-2">
+		<div class="px-2">
 			<slot />
 		</div>
 	{/if}

package/components/apps/editor/componentsPanel/componentStaticValues.d.ts

@@ -1,5 +1,6 @@
 export declare const staticValues: {
     readonly buttonColorOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
+    readonly tabsKindOptions: readonly ["tabs", "sidebar", "invisibleOnView"];
     readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
     readonly tableSearchOptions: readonly ["By Component", "By Runnable", "Disabled"];
     readonly chartThemeOptions: readonly ["theme1", "theme2", "theme3"];
@@ -7,4 +8,5 @@ export declare const staticValues: {
     readonly currencyOptions: readonly ["USD", "EUR", "GBP", "CAD", "AUD", "JPY", "CNY", "INR", "BRL"];
     readonly localeOptions: readonly ["en-US", "en-GB", "en-IE", "de-DE", "fr-FR", "br-FR", "ja-JP", "pt-TL", "fr-CA", "en-CA"];
     readonly objectFitOptions: readonly ["contain", "cover", "fill"];
+    readonly splitPanelOptions: readonly ["2", "3", "4"];
 };

package/components/apps/editor/componentsPanel/componentStaticValues.js

@@ -2,11 +2,24 @@ import { BUTTON_COLORS } from '../../../common';
 const buttonColorOptions = [...BUTTON_COLORS];
 export const staticValues = {
     buttonColorOptions,
+    tabsKindOptions: ['tabs', 'sidebar', 'invisibleOnView'],
     buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
     tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
     chartThemeOptions: ['theme1', 'theme2', 'theme3'],
     textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
     currencyOptions: ['USD', 'EUR', 'GBP', 'CAD', 'AUD', 'JPY', 'CNY', 'INR', 'BRL'],
-    localeOptions: ['en-US', 'en-GB', 'en-IE', 'de-DE', 'fr-FR', 'br-FR', 'ja-JP', 'pt-TL', 'fr-CA', 'en-CA'],
-    objectFitOptions: ['contain', 'cover', 'fill']
+    localeOptions: [
+        'en-US',
+        'en-GB',
+        'en-IE',
+        'de-DE',
+        'fr-FR',
+        'br-FR',
+        'ja-JP',
+        'pt-TL',
+        'fr-CA',
+        'en-CA'
+    ],
+    objectFitOptions: ['contain', 'cover', 'fill'],
+    splitPanelOptions: ['2', '3', '4']
 };

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

@@ -0,0 +1,77 @@
+<script>import { components } from '../component';
+import { getContext } from 'svelte';
+import ComponentOutputViewer from './ComponentOutputViewer.svelte';
+import { connectInput, isIdInsideGriditem } from '../appUtils';
+import SubGridOutput from './SubGridOutput.svelte';
+import OutputHeader from './components/OutputHeader.svelte';
+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 { app, staticOutputs, selectedComponent, connectingInput } = getContext('AppViewerContext');
+const name = getComponentNameById(gridItem.id);
+function getComponentNameById(componentId) {
+    if (gridItem?.data?.type) {
+        return components[gridItem?.data.type].name;
+    }
+    else if (componentId == 'ctx') {
+        return 'Context';
+    }
+    else if (componentId.startsWith('bg_')) {
+        return 'Background';
+    }
+    else {
+        return 'Table action';
+    }
+}
+$: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids }).map((_, i) => `${gridItem.id}-${i}`);
+$: insideGrid = isIdInsideGriditem($app, gridItem, $selectedComponent);
+$: isSelected = $selectedComponent === gridItem.id;
+$: shouldOpen = insideGrid || isSelected;
+function onHeaderClick(manuallyOpen) {
+    if (manuallyOpen) {
+        if (parentId) {
+            $selectedComponent = parentId;
+        }
+        else {
+            $selectedComponent = undefined;
+        }
+    }
+    else {
+        $selectedComponent = gridItem.id;
+    }
+}
+</script>
+
+{#if $staticOutputs[gridItem.id] || gridItem.data.numberOfSubgrids > 1}
+	<OutputHeader
+		{shouldOpen}
+		on:handleClick={(e) => {
+			if (!$connectingInput.opened) {
+				onHeaderClick(e.detail.manuallyOpen)
+			}
+		}}
+		id={gridItem.id}
+		name={getComponentNameById(gridItem.id)}
+		{first}
+		{nested}
+		{expanded}
+	>
+		<div class="py-1">
+			<ComponentOutputViewer
+				componentId={gridItem.id}
+				outputs={$staticOutputs[gridItem.id]}
+				on:select={({ detail }) => {
+					if ($connectingInput.opened) {
+						$connectingInput = connectInput($connectingInput, gridItem.id, detail)
+					}
+				}}
+			/>
+		</div>
+
+		<SubGridOutput {name} {expanded} {subGrids} parentId={gridItem.id} />
+		<TableActionsOutput {gridItem} {expanded} />
+	</OutputHeader>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        gridItem: GridItem;
+        first?: boolean | undefined;
+        nested?: boolean | undefined;
+        parentId?: string | undefined;
+        expanded?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentOutputProps = typeof __propDef.props;
+export type ComponentOutputEvents = typeof __propDef.events;
+export type ComponentOutputSlots = typeof __propDef.slots;
+export default class ComponentOutput extends SvelteComponentTyped<ComponentOutputProps, ComponentOutputEvents, ComponentOutputSlots> {
+}
+export {};

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

@@ -1,14 +1,17 @@
 <script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
 import { getContext } from 'svelte';
+import { recursivelyFilterKeyInJSON } from '../appUtils';
 export let outputs = [];
 export let componentId;
-const { worldStore } = getContext('AppEditorContext');
+const { worldStore } = getContext('AppViewerContext');
+const { search } = getContext('searchCtx');
 let object = {};
 function subscribeToAllOutputs(observableOutputs) {
     if (observableOutputs) {
-        outputs.forEach((output) => {
+        outputs?.forEach((output) => {
             object[output] = undefined;
             observableOutputs[output]?.subscribe({
+                id: 'alloutputs' + output,
                 next: (value) => {
                     object[output] = value;
                 }
@@ -18,10 +21,11 @@ function subscribeToAllOutputs(observableOutputs) {
 }
 $: $worldStore?.outputsById[componentId] &&
     subscribeToAllOutputs($worldStore.outputsById[componentId]);
+$: filtered = recursivelyFilterKeyInJSON(object, $search, componentId);
 </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.keys(filtered).length > 0}
+	<ObjectViewer json={filtered} on:select topBrackets={false} />
+{:else if $search.length > 0}
+	<div class="text-xs pl-2">No results</div>
 {/if}