windmill-components 1.89.0 → 1.103.0

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

@@ -39,6 +39,19 @@ export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb"
 	const query = await pgSql(db)\`SELECT * FROM demo;\`;
 	return query.rows;
 }`
+    },
+    steppercomponent: {
+        deno: `export async function main(stepIndex: number) {
+		// if (stepIndex == 0) {
+		// 	if (page0Invalid) throw Error("first step invalid")
+		// } else if ...
+}`,
+        python3: `def main(stepIndex: int):
+# if stepIndex == 0:
+#     if page0Invalid:
+#         raise Exception("first step invalid")
+# elif ...
+`
     },
     textcomponent: {
         deno: `export async function main() {
@@ -89,9 +102,9 @@ export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb"
 }`
     },
     displaycomponent: {
-        deno: `export async function main() {
+        deno: `export async function main(x = 42) {
 	return {
-		"foo": 42
+		foo: x
 	}
 }`,
         python3: `def main():
@@ -453,5 +466,31 @@ export async function main(db: Resource<"postgresql">) {
 }`,
         python3: `def main():
 	return "Smile"`
+    },
+    schemaformcomponent: {
+        deno: `export async function main() {
+return {
+		properties: {
+			first_name: {
+				type: 'string',
+				description: 'your name',
+				default: 'default'
+			}
+		},
+		required: []
+	}
+}`,
+        python3: `def main():
+	return {
+		"properties": {
+			"first_name": {
+				"type": "string",
+				"description": "your name",
+				"default": "default"
+			}
+		},
+		"required": []
+	}
+`
     }
 };

package/package/components/apps/editor/component/sets.d.ts

@@ -1,2 +1,2 @@
 import type { ComponentSet } from '../../types';
-export declare const COMPONENT_SETS: readonly [ComponentSet, ComponentSet, ComponentSet, ComponentSet];
+export declare const COMPONENT_SETS: readonly [ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet, ComponentSet];

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

@@ -1,22 +1,29 @@
+const tabs = {
+    title: 'Tabs',
+    components: ['tabscomponent', 'conditionalwrapper'],
+    presets: ['sidebartabscomponent', 'invisibletabscomponent']
+};
 const layout = {
     title: 'Layout',
     components: [
-        'tabscomponent',
         'containercomponent',
         'horizontaldividercomponent',
         'verticaldividercomponent',
         'drawercomponent',
         'verticalsplitpanescomponent',
-        'horizontalsplitpanescomponent'
+        'horizontalsplitpanescomponent',
+        'modalcomponent',
+        'steppercomponent'
     ]
 };
 const buttons = {
     title: 'Buttons',
-    components: ['buttoncomponent', 'formcomponent', 'formbuttoncomponent']
+    components: ['buttoncomponent', 'formcomponent', 'formbuttoncomponent', 'downloadcomponent']
 };
 const inputs = {
     title: 'Inputs',
     components: [
+        'schemaformcomponent',
         'textinputcomponent',
         'textareainputcomponent',
         'passwordinputcomponent',
@@ -30,7 +37,9 @@ const inputs = {
         'checkboxcomponent',
         'selectcomponent',
         'resourceselectcomponent',
-        'multiselectcomponent'
+        'multiselectcomponent',
+        'selecttabcomponent',
+        'selectstepcomponent'
     ]
 };
 const display = {
@@ -41,16 +50,26 @@ const display = {
         'imagecomponent',
         'mapcomponent',
         'htmlcomponent',
-        'tablecomponent',
-        'aggridcomponent',
+        'pdfcomponent',
+        'displaycomponent',
+        'logcomponent',
+        'flowstatuscomponent'
+    ]
+};
+const tables = {
+    title: 'Tables',
+    components: ['tablecomponent', 'aggridcomponent']
+};
+const charts = {
+    title: 'Charts',
+    components: [
         'barchartcomponent',
         'piechartcomponent',
         'vegalitecomponent',
         'plotlycomponent',
         'scatterchartcomponent',
         'timeseriescomponent',
-        'pdfcomponent',
-        'displaycomponent'
+        'chartjscomponent'
     ]
 };
-export const COMPONENT_SETS = [layout, buttons, inputs, display];
+export const COMPONENT_SETS = [layout, tabs, buttons, inputs, tables, display, charts];

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

@@ -1,12 +1,12 @@
 <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 { components as componentsRecord, presets as presetsRecord, COMPONENT_SETS } from '../component';
 import ListItem from './ListItem.svelte';
 import { appComponentFromType, insertNewGridItem } from '../appUtils';
-import { X } from 'lucide-svelte';
 import { push } from '../../../../history';
 import { flip } from 'svelte/animate';
+import { ClearableInput } from '../../../common';
 const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
 const { history } = getContext('AppEditorContext');
 function addComponent(appComponentType) {
@@ -16,6 +16,14 @@ function addComponent(appComponentType) {
     $selectedComponent = [id];
     $app = $app;
 }
+function addPresetComponent(appComponentType) {
+    const preset = presetsRecord[appComponentType];
+    push(history, $app);
+    $dirtyStore = true;
+    const id = insertNewGridItem($app, appComponentFromType(preset.targetComponent, preset.configuration), $focusedGrid);
+    $selectedComponent = [id];
+    $app = $app;
+}
 let search = '';
 // Filter COMPONENT_SETS by search
 $: componentsFiltered = COMPONENT_SETS.map((set) => ({
@@ -28,22 +36,7 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 </script>
 
 <section class="p-2 sticky bg-white w-full z-10 top-0">
-	<div class="relative">
-		<input
-			bind:value={search}
-			class="px-2 py-1 border border-gray-300 rounded-sm !pr-6"
-			placeholder="Search components..."
-		/>
-
-		{#if search !== ''}
-			<button
-				class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
-				on:click|stopPropagation|preventDefault={() => (search = '')}
-			>
-				<X size="10" color="white" />
-			</button>
-		{/if}
-	</div>
+	<ClearableInput bind:value={search} placeholder="Search components..." />
 </section>
 
 <div class="relative">
@@ -57,7 +50,7 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 		</div>
 	{:else}
 		<div in:fade|local={{ duration: 50, delay: 50 }} out:fade|local={{ duration: 50 }}>
-			{#each componentsFiltered as { title, components }, index (index)}
+			{#each componentsFiltered as { title, components, presets }, index (index)}
 				{#if components.length}
 					<div transition:slide|local={{ duration: 100 }}>
 						<ListItem title={`${title} (${components.length})`}>
@@ -77,6 +70,26 @@ $: componentsFiltered = COMPONENT_SETS.map((set) => ({
 										</div>
 									</div>
 								{/each}
+								{#if presets}
+									{#each presets as presetItem (presetItem)}
+										<div animate:flip={{ duration: 100 }} class="w-20">
+											<button
+												on:click={() => addPresetComponent(presetItem)}
+												title={presetsRecord[presetItem].name}
+												class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+										justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+											>
+												<svelte:component
+													this={presetsRecord[presetItem].icon}
+													class="text-gray-600"
+												/>
+											</button>
+											<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+												{presetsRecord[presetItem].name}
+											</div>
+										</div>
+									{/each}
+								{/if}
 							</div>
 						</ListItem>
 					</div>

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

@@ -5,12 +5,14 @@ import { addWhitespaceBeforeCapitals } from '../../../../utils';
 import { Button, ClearableInput } from '../../../common';
 import Popover from '../../../Popover.svelte';
 import QuickStyleMenu from './QuickStyleMenu.svelte';
+import Tooltip from '../../../Tooltip.svelte';
 export let name;
 export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
 export let quickStyleProperties = undefined;
 export let componentType = undefined;
+export let tooltip = undefined;
 const dispatch = createEventDispatcher();
 let isQuickMenuOpen = false;
 $: dispatch('change', value);
@@ -26,11 +28,14 @@ function toggleQuickMenu() {
 </div>
 {#if value}
 	<div class="px-3">
+		{#if tooltip}
+			<div class="text-gray-600 text-2xs py-2">{tooltip}</div>
+		{/if}
 		{#if value.style !== undefined || forceStyle}
 			<div class="pb-2">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label class="block">
-					<div class="text-sm font-medium text-gray-600 pb-0.5"> Style </div>
+					<div class="text-sm font-medium text-gray-600 pb-0.5"> Plain CSS </div>
 					<div class="flex gap-1">
 						<div class="relative grow">
 							<ClearableInput
@@ -78,7 +83,11 @@ function toggleQuickMenu() {
 		{#if value.class !== undefined || forceClass}
 			<!-- svelte-ignore a11y-label-has-associated-control -->
 			<label class="block">
-				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
+				<div class="text-sm font-medium text-gray-600 pb-0.5">
+					Tailwind classes<Tooltip documentationLink="https://tailwindcss.com/"
+						>Use any tailwind classes to style your component</Tooltip
+					></div
+				>
 				<div class="relative">
 					<ClearableInput bind:value={value.class} />
 				</div>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         forceClass?: boolean | undefined;
         quickStyleProperties?: PropertyGroup[] | undefined;
         componentType?: TypedComponent['type'] | undefined;
+        tooltip?: string | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -1,17 +1,19 @@
 <script>import { getContext } from 'svelte';
-import { LayoutDashboardIcon, MousePointer2, CurlyBraces, X } from 'lucide-svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces } from 'lucide-svelte';
 import SimpleEditor from '../../../SimpleEditor.svelte';
 import { emptyString } from '../../../../utils';
-import { Tab, TabContent, Tabs } from '../../../common';
+import { ClearableInput, Tab, TabContent, Tabs } from '../../../common';
 import ListItem from './ListItem.svelte';
 import CssProperty from './CssProperty.svelte';
 import { ccomponents, components } from '../component';
+import { slide } from 'svelte/transition';
 const STATIC_ELEMENTS = ['app'];
 const TITLE_PREFIX = 'Css.';
 const { app } = getContext('AppViewerContext');
 let rawCode = '';
 $: rawCode && parseJson();
 let jsonError = '';
+let jsonErrorHeight;
 function parseJson() {
     try {
         $app.css = JSON.parse(rawCode ?? '');
@@ -51,8 +53,8 @@ entries.sort((a, b) => a.name.localeCompare(b.name));
 let search = '';
 </script>
 
-<div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div>
-<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+<!-- <div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div> -->
+<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="h-full">
 	<Tab value="ui" size="xs" class="w-1/2">
 		<div class="m-1 center-center">
 			<MousePointer2 size={16} />
@@ -65,80 +67,64 @@ let search = '';
 			<span class="pl-1">JSON</span>
 		</div>
 	</Tab>
-	<div slot="content" class="h-full overflow-y-auto">
-		<TabContent value="ui">
-			<div class="sticky top-0 left-0 w-full bg-white p-2">
-				<div class="relative">
-					<input
-						bind:value={search}
-						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
-						placeholder="Search..."
-					/>
-					{#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 = '')}
+	<div slot="content" class="h-[calc(100%-35px)] overflow-auto">
+		<TabContent value="ui" class="h-full">
+			<div class="p-2">
+				<ClearableInput bind:value={search} placeholder="Search..." />
+			</div>
+			<div class="h-[calc(100%-50px)] overflow-auto relative">
+				{#each search != '' ? entries.filter((x) => x.name
+								.toLowerCase()
+								.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
+					{#if ids.length > 0}
+						<ListItem
+							title={name}
+							prefix={TITLE_PREFIX}
+							on:open={(e) => {
+								if ($app.css != undefined) {
+									if (e.detail && $app.css[type] == undefined) {
+										$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
+									}
+								}
+							}}
 						>
-							<X size="14" />
-						</button>
+							<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, forceStyle, forceClass }}
+									<div class="mb-3">
+										{#if $app?.css?.[type]}
+											<CssProperty
+												{forceClass}
+												{forceStyle}
+												name={id}
+												bind:value={$app.css[type][id]}
+											/>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</ListItem>
 					{/if}
-				</div>
+				{/each}
 			</div>
-			{#each search != '' ? entries.filter((x) => x.name
-							.toLowerCase()
-							.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
-				{#if ids.length > 0}
-					<ListItem
-						title={name}
-						prefix={TITLE_PREFIX}
-						on:open={(e) => {
-							if ($app.css != undefined) {
-								if (e.detail && $app.css[type] == undefined) {
-									$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
-								}
-							}
-						}}
-					>
-						<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, forceStyle, forceClass }}
-								<div class="mb-3">
-									{#if $app?.css?.[type]}
-										<CssProperty
-											{forceClass}
-											{forceStyle}
-											name={id}
-											bind:value={$app.css[type][id]}
-										/>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					</ListItem>
-				{/if}
-			{/each}
 		</TabContent>
-		<TabContent value="json">
+		<TabContent value="json" class="h-full">
 			{#if !emptyString(jsonError)}
-				<span class="text-red-400 text-xs mb-1 flex flex-row-reverse">
+				<div
+					transition:slide={{ duration: 200 }}
+					bind:clientHeight={jsonErrorHeight}
+					class="text-red-500 text-xs p-1"
+				>
 					{jsonError}
-				</span>
-			{:else}
-				<div class="py-2" />
+				</div>
 			{/if}
-			<div class="h-full w-full py-1">
-				<SimpleEditor
-					autoHeight
-					class="editor"
-					lang="json"
-					bind:code={rawCode}
-					fixedOverflowWidgets={false}
-				/>
+			<div style="height: calc(100% - {jsonErrorHeight || 0}px);">
+				<SimpleEditor class="h-full" lang="json" bind:code={rawCode} fixedOverflowWidgets={false} />
 			</div>
 		</TabContent>
 	</div>

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

@@ -12,7 +12,19 @@ const key = prop.key;
 const type = prop.value?.['type'];
 let unit = StylePropertyUnits[0];
 let internalValue;
-$: internalValue = value ? +value.replace(unit, '') : '';
+function getInteralValue(value, propValue) {
+    if (!value) {
+        return '';
+    }
+    if (propValue.type === StylePropertyType.number) {
+        return value;
+    }
+    if (propValue.type === StylePropertyType.text) {
+        return +value.replace(unit, '');
+    }
+    return '';
+}
+$: internalValue = getInteralValue(value, prop.value);
 $: dispatch('change', value);
 function updateValue(next) {
     value = next ? next + unit : '';

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

@@ -454,6 +454,12 @@ export const quickStyleProperties = {
     mapcomponent: {
         map: [spacingGrouping, borderGrouping]
     },
+    steppercomponent: {
+        container: containerDefaultProps
+    },
+    conditionalwrapper: {
+        container: containerDefaultProps
+    },
     pdfcomponent: {
         container: containerDefaultProps
     },
@@ -510,9 +516,15 @@ export const quickStyleProperties = {
     buttoncomponent: {
         button: buttonDefaultProps
     },
+    downloadcomponent: {
+        button: buttonDefaultProps
+    },
     drawercomponent: {
         container: containerDefaultProps
     },
+    modalcomponent: {
+        container: containerDefaultProps
+    },
     plotlycomponent: {},
     selectcomponent: {
         input: inputDefaultProps
@@ -527,6 +539,14 @@ export const quickStyleProperties = {
         header: [...containerDefaultProps, typographyGrouping],
         container: containerDefaultProps
     },
+    logcomponent: {
+        header: [...containerDefaultProps, typographyGrouping],
+        container: containerDefaultProps
+    },
+    flowstatuscomponent: {
+        header: [...containerDefaultProps, typographyGrouping],
+        container: containerDefaultProps
+    },
     barchartcomponent: {
         container: containerDefaultProps
     },
@@ -539,6 +559,9 @@ export const quickStyleProperties = {
     piechartcomponent: {
         container: containerDefaultProps
     },
+    chartjscomponent: {
+        container: containerDefaultProps
+    },
     vegalitecomponent: {},
     containercomponent: {
         container: containerDefaultProps
@@ -593,5 +616,15 @@ export const quickStyleProperties = {
     },
     horizontalsplitpanescomponent: {
         container: containerDefaultProps
-    }
+    },
+    schemaformcomponent: {
+        container: containerDefaultProps,
+        button: buttonDefaultProps
+    },
+    selecttabcomponent: {
+        tabRow: containerDefaultProps,
+        allTabs: [typographyGrouping, sizeGrouping],
+        selectedTab: [typographyGrouping, sizeGrouping]
+    },
+    selectstepcomponent: {}
 };

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

@@ -5,6 +5,7 @@ import { connectInput } from '../appUtils';
 import SubGridOutput from './SubGridOutput.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
 import TableActionsOutput from './components/TableActionsOutput.svelte';
+import { BG_PREFIX } from '../../utils';
 export let gridItem;
 export let first = false;
 export let nested = false;
@@ -18,7 +19,7 @@ function getComponentNameById(componentId) {
     else if (componentId == 'ctx') {
         return 'Context';
     }
-    else if (componentId.startsWith('bg_')) {
+    else if (componentId.startsWith(BG_PREFIX)) {
         return 'Background';
     }
     else {

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

@@ -1,5 +1,4 @@
 <script>import { classNames } from '../../../../utils';
-import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
@@ -7,6 +6,7 @@ import ComponentOutput from './ComponentOutput.svelte';
 import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
+import { ClearableInput } from '../../../common';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
 let hasState = false;
@@ -21,21 +21,7 @@ let hasState = false;
 	>
 		<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="!border-gray-200 !rounded-md !text-xs !pr-6"
-						placeholder="Search outputs..."
-					/>
-					{#if $search !== ''}
-						<button
-							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
-							on:click|stopPropagation|preventDefault={() => ($search = '')}
-						>
-							<X size="10" color="white" />
-						</button>
-					{/if}
-				</div>
+				<ClearableInput bind:value={$search} placeholder="Search outputs..." />
 			</div>
 
 			<div class="flex flex-col gap-4">
@@ -75,7 +61,7 @@ let hasState = false;
 					{/each}
 				</div>
 				<div>
-					<span class="text-xs font-semibold text-gray-800 p-2">Background scripts</span>
+					<span class="text-xs font-semibold text-gray-800 p-2">Background runnables</span>
 					<BackgroundScriptsOutput />
 				</div>
 			</div>

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

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

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

@@ -19,7 +19,8 @@ $: inSearch =
     $search != '' &&
         ($hasResult[id] ||
             Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
-$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+$: open =
+    $allIdsInPath.includes(id) || id == $selectedComponent?.[0] || $manuallyOpened[id] || inSearch;
 const hoverColor = {
     blue: 'hover:bg-blue-100 hover:text-blue-500',
     indigo: 'hover:bg-indigo-100 hover:text-indigo-500'
@@ -55,12 +56,7 @@ function renameId(newId) {
             renameComponent(from, to, item.data);
         });
         $app.hiddenInlineScripts.forEach((x) => {
-            console.log('process', x.name, id);
-            processRunnable(from, to, {
-                name: x.name,
-                inlineScript: x.inlineScript,
-                type: 'runnableByName'
-            });
+            processRunnable(from, to, x);
         });
     }
     propagateRename(id, newId);