windmill-components 1.448.50 → 1.472.2

package/package/components/DropdownV2Inner.svelte.d.ts

@@ -1,31 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { MenubarMenuElements } from '@melt-ui/svelte';
+import type { Item } from '../utils';
 declare const __propDef: {
     props: {
-        items?: {
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[] | (() => {
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[]) | (() => Promise<{
-            displayName: string;
-            action?: ((e: CustomEvent<any>) => void) | undefined;
-            icon?: any;
-            href?: string | undefined;
-            disabled?: boolean | undefined;
-            type?: "delete" | "action" | undefined;
-            hide?: boolean | undefined;
-        }[]>) | undefined;
+        items?: Item[] | (() => Item[]) | (() => Promise<Item[]>) | undefined;
+        meltItem: MenubarMenuElements['item'];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/DynSelect.svelte

@@ -4,7 +4,7 @@ import Select from './apps/svelte-select/lib/Select.svelte';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import ResultJobLoader from './ResultJobLoader.svelte';
 import Tooltip from './Tooltip.svelte';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
+import { Loader2 } from 'lucide-svelte';
 export let value = undefined;
 export let helperScript = undefined;
 export let entrypoint;
@@ -126,6 +126,10 @@ let renderCount = 0;
 		<div class="text-xs text-tertiary"
 			>Dynamic Select is not available in this mode, write value directly</div
 		>
-		<JsonEditor code={rawCode} bind:value />
+		{#await import('./JsonEditor.svelte')}
+			<Loader2 class="animate-spin" />
+		{:then Module}
+			<Module.default code={rawCode} bind:value />
+		{/await}
 	</div>
 {/if}

package/package/components/EditableSchemaForm.svelte

@@ -16,7 +16,7 @@ import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
 import { emptyString } from '../utils';
-import Popup from './common/popup/Popup.svelte';
+import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
 import { tweened } from 'svelte/motion';
@@ -31,8 +31,8 @@ export let isFlowInput = false;
 export let noPreview = false;
 export let jsonEnabled = true;
 export let isAppInput = false;
-export let lightweightMode = false;
 export let displayWebhookWarning = false;
+export let onlyMaskPassword = false;
 export let dndType = undefined;
 export let editTab;
 export let previewSchema = undefined;
@@ -41,7 +41,10 @@ export let editPanelSize = 0;
 export let diff = {};
 export let disableDnd = false;
 export let shouldDispatchChanges = false;
+export let isValid = true;
+export let customUi = undefined;
 const dispatch = createEventDispatcher();
+const noVariablePickerOnPreview = noVariablePicker || customUi?.disableVariablePicker === true;
 let clazz = '';
 export { clazz as class };
 $: if (args == undefined || typeof args !== 'object') {
@@ -166,7 +169,7 @@ function renameProperty(oldName, key) {
         sendUserToast('Argument renamed successfully');
     }
 }
-let jsonView = false;
+let jsonView = customUi?.jsonOnly;
 let schemaString = JSON.stringify(schema, null, '\t');
 let error = undefined;
 let editor = undefined;
@@ -194,7 +197,7 @@ function updatePanelSizes(editSize, inputSize) {
 }
 $: updatePanelSizes($editPanelSizeSmooth, $inputPanelSizeSmooth);
 $: !!editTab ? openEditTab() : closeEditTab();
-let pannelButtonWidth = 0;
+let panelButtonWidth = 0;
 export let pannelExtraButtonWidth = 0;
 export function updateJson() {
     schemaString = JSON.stringify(schema, null, '\t');
@@ -206,8 +209,8 @@ export function updateJson() {
 	<div class="relative z-[100000]">
 		<div
 			class="absolute"
-			style="right: calc({editPanelSize}% - 2px - {pannelExtraButtonWidth}px); top: 0px;"
-			bind:clientWidth={pannelButtonWidth}
+			style="right: calc({editPanelSize}% - 1px - {pannelExtraButtonWidth}px); top: 0px;"
+			bind:clientWidth={panelButtonWidth}
 		>
 			<slot name="openEditTab" />
 		</div>
@@ -225,7 +228,7 @@ export function updateJson() {
 							<div
 								style={editPanelSize > 0
 									? `width: 100%;`
-									: `width: calc(100% - ${pannelButtonWidth - pannelExtraButtonWidth}px);`}
+									: `width: calc(100% - ${panelButtonWidth - pannelExtraButtonWidth}px);`}
 							>
 								<slot name="addProperty" />
 							</div>
@@ -242,6 +245,7 @@ export function updateJson() {
 							schema={previewSchema ? previewSchema : schema}
 							{dndType}
 							{disableDnd}
+							{onlyMaskPassword}
 							bind:args
 							on:click={(e) => {
 								opened = e.detail
@@ -255,7 +259,6 @@ export function updateJson() {
 								schema = schema
 								dispatch('change', schema)
 							}}
-							{lightweightMode}
 							prettifyHeader={isAppInput}
 							disabled={!!previewSchema}
 							{diff}
@@ -265,6 +268,8 @@ export function updateJson() {
 								dispatch('change', schema)
 							}}
 							{shouldDispatchChanges}
+							bind:isValid
+							noVariablePicker={noVariablePickerOnPreview}
 						/>
 
 						<slot name="runButton" />
@@ -277,13 +282,13 @@ export function updateJson() {
 			<Pane
 				bind:size={editPanelSize}
 				minSize={noPreview ? 100 : 50}
-				class={twMerge('border rounded-md', pannelButtonWidth > 0 ? 'rounded-tl-none' : '')}
+				class={twMerge('border rounded-md', panelButtonWidth > 0 ? 'rounded-tl-none' : '')}
 			>
 				{#if editTab !== 'inputEditor'}
 					<slot name="extraTab" />
 				{:else}
 					<!-- WIP -->
-					{#if jsonEnabled}
+					{#if jsonEnabled && !customUi?.jsonOnly}
 						<div class="w-full p-3 flex justify-end">
 							<Toggle
 								bind:checked={jsonView}
@@ -329,12 +334,8 @@ export function updateJson() {
 												{argName}
 												{#if !uiOnly}
 													<div on:click|stopPropagation|preventDefault>
-														<Popup
-															floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-															containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-															let:close
-														>
-															<svelte:fragment slot="button">
+														<Popover placement="bottom-end" containerClasses="p-4" closeButton>
+															<svelte:fragment slot="trigger">
 																<Button
 																	color="light"
 																	size="xs2"
@@ -343,34 +344,36 @@ export function updateJson() {
 																	iconOnly
 																/>
 															</svelte:fragment>
-															<Label label="Name">
-																<div class="flex flex-col gap-2">
-																	<input
-																		type="text"
-																		class="w-full !bg-surface"
-																		value={argName}
-																		id={argName + i}
-																		on:keydown={(event) => {
-																			if (event.key === 'Enter') {
+															<svelte:fragment slot="content" let:close>
+																<Label label="Name" class="p-4">
+																	<div class="flex flex-col gap-2">
+																		<input
+																			type="text"
+																			class="w-full !bg-surface"
+																			value={argName}
+																			id={argName + i}
+																			on:keydown={(event) => {
+																				if (event.key === 'Enter') {
+																					renameProperty(argName, argName + i)
+																					close()
+																				}
+																			}}
+																		/>
+																		<Button
+																			variant="border"
+																			color="light"
+																			size="xs"
+																			on:click={() => {
 																				renameProperty(argName, argName + i)
-																				close(null)
-																			}
-																		}}
-																	/>
-																	<Button
-																		variant="border"
-																		color="light"
-																		size="xs"
-																		on:click={() => {
-																			renameProperty(argName, argName + i)
-																			close(null)
-																		}}
-																	>
-																		Rename
-																	</Button>
-																</div>
-															</Label>
-														</Popup>
+																				close()
+																			}}
+																		>
+																			Rename
+																		</Button>
+																	</div>
+																</Label>
+															</svelte:fragment>
+														</Popover>
 													</div>
 												{/if}
 											</div>
@@ -425,6 +428,7 @@ export function updateJson() {
 																		<ToggleButtonGroup
 																			tabListClass="flex-wrap"
 																			class="h-auto"
+																			let:item
 																			bind:selected
 																			on:selected={(e) => {
 																				const isS3 = e.detail == 'S3'
@@ -505,7 +509,7 @@ export function updateJson() {
 																			}}
 																		>
 																			{#each [['String', 'string'], ['Number', 'number'], ['Integer', 'integer'], ['Object', 'object'], ['OneOf', 'oneOf'], ['Array', 'array'], ['Boolean', 'boolean'], ['S3 Object', 'S3']] as x}
-																				<ToggleButton value={x[1]} label={x[0]} />
+																				<ToggleButton value={x[1]} label={x[0]} {item} />
 																			{/each}
 																		</ToggleButtonGroup>
 																	</Label>
@@ -517,7 +521,6 @@ export function updateJson() {
 																	bind:defaultValue={schema.properties[argName].default}
 																	{variableEditor}
 																	{itemPicker}
-																	{lightweightMode}
 																	bind:nullable={schema.properties[argName].nullable}
 																	bind:disabled={schema.properties[argName].disabled}
 																	type={schema.properties[argName].type}

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponent } from "svelte";
 import type { Schema } from '../common';
 import type { SchemaDiff } from './schema/schemaUtils';
+import type { EditableSchemaFormUi } from './custom_ui';
 declare const __propDef: {
     props: {
         schema: Schema | any;
@@ -14,8 +15,8 @@ declare const __propDef: {
         noPreview?: boolean | undefined;
         jsonEnabled?: boolean | undefined;
         isAppInput?: boolean | undefined;
-        lightweightMode?: boolean | undefined;
         displayWebhookWarning?: boolean | undefined;
+        onlyMaskPassword?: boolean | undefined;
         dndType?: string | undefined;
         editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
         previewSchema?: Record<string, any> | undefined;
@@ -24,6 +25,8 @@ declare const __propDef: {
         diff?: Record<string, SchemaDiff> | undefined;
         disableDnd?: boolean | undefined;
         shouldDispatchChanges?: boolean | undefined;
+        isValid?: boolean | undefined;
+        customUi?: EditableSchemaFormUi | undefined;
         class?: string | undefined;
         setDefaults?: (() => void) | undefined;
         openField?: ((key: string) => void) | undefined;

package/package/components/Editor.svelte

@@ -544,7 +544,7 @@ function addCopilotSuggestions() {
     });
 }
 $: $copilotInfo.exists_ai_resource &&
-    $copilotInfo.code_completion_enabled &&
+    $copilotInfo.code_completion_model &&
     $codeCompletionSessionEnabled &&
     initialized &&
     addCopilotSuggestions();

package/package/components/EditorBar.svelte

@@ -561,7 +561,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
-			{#if showResourcePicker}
+			{#if showResourcePicker && customUi?.resource != false}
 				<Button
 					title="Add resource"
 					btnClasses="!font-medium text-tertiary"
@@ -591,18 +591,20 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
-			<Button
-				title="Reset Content"
-				btnClasses="!font-medium text-tertiary"
-				size="xs"
-				spacingSize="md"
-				color="light"
-				on:click={clearContent}
-				{iconOnly}
-				startIcon={{ icon: RotateCw }}
-			>
-				Reset
-			</Button>
+			{#if customUi?.reset != false}
+				<Button
+					title="Reset Content"
+					btnClasses="!font-medium text-tertiary"
+					size="xs"
+					spacingSize="md"
+					color="light"
+					on:click={clearContent}
+					{iconOnly}
+					startIcon={{ icon: RotateCw }}
+				>
+					Reset
+				</Button>
+			{/if}
 
 			{#if customUi?.assistants != false}
 				{#if lang == 'deno' || lang == 'python3' || lang == 'go' || lang == 'bash'}

package/package/components/EditorBar.svelte.d.ts

@@ -18,7 +18,7 @@ declare const __propDef: {
         iconOnly?: boolean | undefined;
         validCode?: boolean | undefined;
         kind?: "script" | "trigger" | "approval" | undefined;
-        template?: "powershell" | "mysql" | "script" | "bunnative" | "docker" | "pgsql" | undefined;
+        template?: "script" | "powershell" | "mysql" | "bunnative" | "docker" | "pgsql" | undefined;
         collabMode?: boolean | undefined;
         collabLive?: boolean | undefined;
         collabUsers?: {

package/package/components/EditorSettings.svelte

@@ -1,17 +1,19 @@
 <script>import { Settings } from 'lucide-svelte';
 import FormatOnSave from './FormatOnSave.svelte';
 import VimMode from './VimMode.svelte';
-import { Button, Popup } from './common';
+import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
+import Popover from './meltComponents/Popover.svelte';
 export let customUi = {};
 </script>
 
 {#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
-	<Popup
+	<Popover
 		floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-		containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+		usePointerDownOutside
+		contentClasses="flex flex-col gap-y-2 p-4"
 	>
-		<svelte:fragment slot="button">
+		<svelte:fragment slot="trigger">
 			<Button
 				btnClasses="text-tertiary"
 				color="light"
@@ -23,7 +25,7 @@ export let customUi = {};
 			/>
 		</svelte:fragment>
 
-		<div class="flex flex-col gap-y-2">
+		<svelte:fragment slot="content">
 			{#if customUi?.autoformatting != false}
 				<div>
 					<FormatOnSave />
@@ -39,6 +41,6 @@ export let customUi = {};
 					<CodeCompletionStatus />
 				</div>
 			{/if}
-		</div>
-	</Popup>
+		</svelte:fragment>
+	</Popover>
 {/if}