windmill-components 1.89.1 → 1.103.1

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,7 +1,7 @@
 <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 { push } from '../../../../history';
@@ -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) => ({
@@ -42,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})`}>
@@ -62,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/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

@@ -61,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);

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

@@ -5,7 +5,8 @@ import Tooltip from '../../../Tooltip.svelte';
 import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
-import { capitalize, emptySchema, getScriptByPath } from '../../../../utils';
+import { capitalize, emptySchema } from '../../../../utils';
+import { getScriptByPath } from '../../../../scripts';
 import { faCodeBranch } from '@fortawesome/free-solid-svg-icons';
 import { Building, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
@@ -13,8 +14,10 @@ import { fly } from 'svelte/transition';
 import { defaultCode } from '../component';
 import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
+import RunnableSelector from '../settingsPanel/mainInput/RunnableSelector.svelte';
 export let name;
 export let componentType = undefined;
+export let showScriptPicker = false;
 let tab = 'inlinescripts';
 let filter = '';
 let picker;
@@ -112,18 +115,23 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 </Drawer>
 
 <div class="flex flex-col px-4 gap-2 text-sm" in:fly={{ duration: 50 }}>
-	<div class="mt-4 flex justify-between gap-8 mb-2">
-		<div class="font-bold items-baseline">Choose a language:</div>
+	<div class="mt-2 flex justify-between gap-4">
+		<div class="font-bold items-baseline truncate">Choose a language</div>
 		<div class="flex gap-2">
+			{#if showScriptPicker}
+				<RunnableSelector on:pick hideCreateScript />
+			{/if}
 			<Button
 				on:click={() => picker?.openDrawer()}
 				size="xs"
+				variant="border"
 				color="blue"
 				startIcon={{ icon: faCodeBranch }}
 				btnClasses="truncate"
 			>
-				Fork a workspace or hub script
+				Fork a script
 			</Button>
+
 			<Button
 				on:click={() => dispatch('delete')}
 				size="xs"
@@ -131,7 +139,7 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 				variant="border"
 				btnClasses="truncate"
 			>
-				Cancel
+				Clear
 			</Button>
 		</div>
 	</div>
@@ -152,7 +160,7 @@ const langs = ['deno', 'python3', 'go', 'bash'];
 				{/each}
 			</div>
 
-			<div class="mt-4 mb-2 text-sm">Typescript templates</div>
+			<div class="mt-2 mb-2 text-sm">Typescript templates</div>
 
 			<div class="flex gap-2 flex-row flex-wrap mb-4">
 				<FlowScriptPicker
@@ -195,6 +203,10 @@ console.log(ctx.email)
 if (!state.foo) { state.foo = 0 }
 state.foo += 1
 
+// for reactivity to work, you need to assign a value and not modify it in place
+// e.g: state.foo.push(1) will not work but 'state.foo = [...state.foo, 1]' will.
+// you may also just reassign as next statement 'state.foo = state.foo'
+
 // you can also navigate (goto), recompute a script (recompute), or set a tab (setTab)
 
 return state.foo`,

package/package/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte.d.ts

@@ -3,8 +3,13 @@ declare const __propDef: {
     props: {
         name: string;
         componentType?: string | undefined;
+        showScriptPicker?: boolean | undefined;
     };
     events: {
+        pick: CustomEvent<{
+            runnable: import("../../inputType").Runnable;
+            fields: Record<string, import("../../inputType").StaticAppInput>;
+        }>;
         delete: CustomEvent<any>;
         new: CustomEvent<any>;
     } & {