windmill-components 1.550.0 → 1.555.1

package/package/components/apps/components/buttons/AppButton.svelte

@@ -182,46 +182,64 @@ let errorsMessage = $derived(Object.values(errors)
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		{#key css}
-			<Button
-				on:pointerdown={(e) => e.stopPropagation()}
-				btnClasses={twMerge(
-					css?.button?.class ?? '',
-					isMenuItem ? 'flex items-center justify-start' : '',
-					isMenuItem ? '!border-0' : '',
-					'wm-button',
-					`wm-button-${resolvedConfig.color}`
-				)}
-				variant={isMenuItem ? 'border' : 'contained'}
-				style={css?.button?.style}
-				wrapperClasses={twMerge(
-					css?.container?.class ?? '',
-					resolvedConfig.fillContainer ? 'w-full h-full' : '',
-					isMenuItem ? 'w-full' : '',
-					'wm-button-container',
-					`wm-button-container-${resolvedConfig.color}`
-				)}
-				wrapperStyle={css?.container?.style}
-				disabled={resolvedConfig.disabled}
-				on:click={handleClick}
-				size={resolvedConfig.size}
-				color={resolvedConfig.color}
-				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0 ? String(resolvedConfig.tooltip) : undefined}
-				loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
+			<div
+				class="inline-flex"
+				title={resolvedConfig.tooltip && String(resolvedConfig.tooltip).length > 0
+					? String(resolvedConfig.tooltip)
+					: undefined}
 			>
-				{#if resolvedConfig.beforeIcon}
-					{#key resolvedConfig.beforeIcon}
-						<div class={resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0 ? "min-w-4" : ""} bind:this={beforeIconComponent}></div>
-					{/key}
-				{/if}
-				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
-					<div>{resolvedConfig.label.toString()}</div>
-				{/if}
-				{#if resolvedConfig.afterIcon}
-					{#key resolvedConfig.afterIcon}
-						<div class={resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0 ? "min-w-4" : ""} bind:this={afterIconComponent}></div>
-					{/key}
-				{/if}
-			</Button>
+				<Button
+					on:pointerdown={(e) => e.stopPropagation()}
+					btnClasses={twMerge(
+						css?.button?.class ?? '',
+						isMenuItem ? 'flex items-center justify-start' : '',
+						isMenuItem ? '!border-0' : '',
+						'wm-button',
+						`wm-button-${resolvedConfig.color}`
+					)}
+					variant={isMenuItem ? 'border' : 'contained'}
+					style={css?.button?.style}
+					wrapperClasses={twMerge(
+						css?.container?.class ?? '',
+						resolvedConfig.fillContainer ? 'w-full h-full' : '',
+						isMenuItem ? 'w-full' : '',
+						'wm-button-container',
+						`wm-button-container-${resolvedConfig.color}`
+					)}
+					wrapperStyle={css?.container?.style}
+					disabled={resolvedConfig.disabled}
+					on:click={handleClick}
+					size={resolvedConfig.size}
+					color={resolvedConfig.color}
+					loading={resolvedConfig.runInBackground ? backgroundClickFeedback : loading}
+				>
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={beforeIconComponent}
+							></div>
+						{/key}
+					{/if}
+					{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
+						<div>{resolvedConfig.label.toString()}</div>
+					{/if}
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div
+								class={resolvedConfig.label?.toString() &&
+								resolvedConfig.label?.toString()?.length > 0
+									? 'min-w-4'
+									: ''}
+								bind:this={afterIconComponent}
+							></div>
+						{/key}
+					{/if}
+				</Button>
+			</div>
 		{/key}
 	</AlignWrapper>
 </RunnableWrapper>

package/package/components/apps/components/display/dbtable/InsertRow.svelte

@@ -5,6 +5,7 @@ init(wasmUrl);
 import { argSigToJsonSchemaType } from 'windmill-utils-internal';
 import SchemaForm from '../../../../SchemaForm.svelte';
 import { untrack } from 'svelte';
+import Toggle from '../../../../Toggle.svelte';
 let schema = $state(undefined);
 function parseSQLArgs(field, dbType) {
     let rawType = '';
@@ -87,7 +88,9 @@ async function builtSchema(fields, dbType) {
 let { args = $bindable({}), dbType = 'postgresql', columnDefs = [], isInsertable = $bindable(false) } = $props();
 let fields = $derived(columnDefs
     ?.filter((t) => {
-    const shouldFilter = t.isidentity === ColumnIdentity.Always || t?.hideInsert === true;
+    const shouldFilter = t.isidentity === ColumnIdentity.Always ||
+        t?.hideInsert === true ||
+        t.defaultvalue?.startsWith('nextval('); // exclude postgres serial/auto increment fields
     return !shouldFilter;
 })
     .map((column) => {
@@ -119,5 +122,32 @@ $effect(() => {
 </script>
 
 {#if schema}
-	<SchemaForm onlyMaskPassword {schema} bind:args />
+	<SchemaForm onlyMaskPassword {schema} bind:args>
+		{#snippet actions({ item })}
+			{@const disabled = fields?.[fields?.findIndex((f) => f.name === item.id)]?.nullable != 'YES'}
+			{#if !disabled}
+				<Toggle
+					options={{ right: 'NULL' }}
+					class="pl-2"
+					textClass="text-tertiary"
+					size="2sm"
+					bind:checked={
+						() => args[item.id] === null,
+						(v) => {
+							if (!schema?.properties[item.id]) return
+							if (v) {
+								schema.properties[item.id].nullable = true
+								schema.properties[item.id].disabled = true
+								args[item.id] = null
+							} else {
+								delete schema.properties[item.id].disabled
+								delete schema.properties[item.id].nullable
+								args[item.id] = schema.properties[item.id].default ?? ''
+							}
+						}
+					}
+				/>
+			{/if}
+		{/snippet}
+	</SchemaForm>
 {/if}

package/package/components/apps/components/display/dbtable/queries/insert.js

@@ -69,7 +69,7 @@ function shouldOmitColumnInInsert(column) {
 export function makeInsertQuery(table, columns, dbType) {
     if (!table)
         throw new Error('Table name is required');
-    const columnsInsert = columns.filter((x) => !x.hideInsert);
+    const columnsInsert = columns.filter((x) => !x.hideInsert && !(dbType == 'postgresql' && x.defaultvalue?.startsWith('nextval(')));
     const columnsDefault = columns.filter((c) => !shouldOmitColumnInInsert(c));
     const allInsertColumns = columnsInsert.concat(columnsDefault);
     let query = buildParameters(columnsInsert, dbType);
@@ -80,6 +80,7 @@ export function makeInsertQuery(table, columns, dbType) {
     const defaultValues = formatDefaultValues(columnsDefault);
     const commaOrEmpty = shouldInsertComma ? ', ' : '';
     query += `INSERT INTO ${table} (${columnNames}) VALUES (${insertValues}${commaOrEmpty}${defaultValues})`;
+    console.log(query);
     return query;
 }
 export function getInsertInput(table, columns, resource, dbType) {

package/package/components/apps/components/display/dbtable/utils.d.ts

@@ -57,6 +57,14 @@ export declare function formatSchema(dbSchema: {
     schema: SQLSchema['schema'];
     publicOnly: SQLSchema['publicOnly'];
 }): {
+    [tableKey: string]: {
+        [columnKey: string]: {
+            type: string;
+            default: string;
+            required: boolean;
+        };
+    };
+} | {
     [schemaKey: string]: {
         [tableKey: string]: {
             [columnKey: string]: {
@@ -66,14 +74,6 @@ export declare function formatSchema(dbSchema: {
             };
         };
     };
-} | {
-    [tableKey: string]: {
-        [columnKey: string]: {
-            type: string;
-            default: string;
-            required: boolean;
-        };
-    };
 };
 export declare function formatGraphqlSchema(schema: IntrospectionQuery): string;
 export type DbType = (typeof dbTypes)[number];

package/package/components/apps/components/display/table/utils.js

@@ -140,12 +140,22 @@ export function transformColumnDefs({ columnDefs, actions, customActionsHeader,
             ...(actionsIndex > -1
                 ? {
                     // keep width/pin/flex/align/hide from placeholder when provided
-                    ...(['width', 'minWidth', 'maxWidth', 'flex', 'pinned', 'headerName', 'cellStyle', 'cellClass', 'autoHeight', 'hide']
-                        .reduce((acc, key) => {
+                    ...[
+                        'width',
+                        'minWidth',
+                        'maxWidth',
+                        'flex',
+                        'pinned',
+                        'headerName',
+                        'cellStyle',
+                        'cellClass',
+                        'autoHeight',
+                        'hide'
+                    ].reduce((acc, key) => {
                         if (r[actionsIndex] && r[actionsIndex][key] !== undefined)
                             acc[key] = r[actionsIndex][key];
                         return acc;
-                    }, {}))
+                    }, {})
                 }
                 : {}),
             ...(customActionsHeader?.trim() ? { headerName: customActionsHeader } : {})

package/package/components/apps/components/helpers/RunnableComponent.svelte

@@ -402,7 +402,7 @@ async function runTransformer(res) {
             return {
                 error: {
                     name: 'TransformerError',
-                    message: 'An error occured in the transformer',
+                    message: 'An error occurred in the transformer',
                     stack: err.message
                 }
             };
@@ -630,7 +630,7 @@ $effect(() => {
 	<div class="h-full flex relative flex-row flex-wrap {wrapperClass} visible" style={wrapperStyle}>
 		<!-- {Object.keys(schemaStripped?.properties ?? {}).length > 0} -->
 		{#if render && (autoRefresh || forceSchemaDisplay) && schemaStripped && Object.keys(schemaStripped?.properties ?? {}).length > 0}
-			<div class="px-2 h-fit min-h-0">
+			<div class="px-2 h-fit min-h-0 w-full min-w-[350px]">
 				<SchemaForm
 					noVariablePicker
 					onlyMaskPassword
@@ -663,7 +663,7 @@ $effect(() => {
 							<div class="bg-surface">
 								<Alert type="error" title="Error during execution">
 									<div class="flex flex-col gap-2 overflow-auto">
-										An error occured, please contact the app author.
+										An error occurred, please contact the app author.
 
 										{#if $errorByComponent?.[id]?.error}
 											<div class="font-bold">{$errorByComponent[id].error}</div>

package/package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">import DarkModeObserver from '../../../../DarkModeObserver.svelte';
+import { inputBaseClass, inputBorderClass } from '../../../../text_input/TextInput.svelte';
 import { onMount, untrack } from 'svelte';
 /* Forked from MIT LICENSE
 https://raw.githubusercontent.com/Canutin/svelte-currency-input/main/src/lib/CurrencyInput.svelte
@@ -141,7 +142,7 @@ let darkMode = $state(false);
 		bind:value
 	/>
 	<input
-		class="
+		class="{inputBaseClass} {inputBorderClass()} 
 			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
 			{isNegativeAllowed && !isZero && !isNegative
 			? (inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE)