windmill-components 1.448.50 → 1.472.2

package/package/components/wizards/TableActionsWizard.svelte

@@ -1,84 +1,87 @@
 <script>import { Code } from 'lucide-svelte';
 import PanelSection from '../apps/editor/settingsPanel/common/PanelSection.svelte';
 import InputsSpecEditor from '../apps/editor/settingsPanel/InputsSpecEditor.svelte';
-import { Button, Popup } from '../common';
+import { Button } from '../common';
+import Popover from '../meltComponents/Popover.svelte';
 import { offset, flip, shift } from 'svelte-floating-ui/dom';
 export let actionsOrder = undefined;
 export let selectedId = undefined;
 export let components;
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		strategy: 'fixed',
 		placement: 'left-end',
 		middleware: [offset(8), flip(), shift()]
 	}}
-	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
+	closeButton
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
-	<div class="w-96">
-		<PanelSection
-			title={`Manage actions programmatically`}
-			tooltip="
+	<svelte:fragment slot="content">
+		<div class="w-96">
+			<PanelSection
+				title={`Manage actions programmatically`}
+				tooltip="
 		You can manage the order of the actions programmatically: You need to return an array of action ids in the order you want them to appear in the table. You can also hide actions by not including them in the array."
-		>
-			<div class="w-full flex gap-2 flex-col mt-2">
-				{#if actionsOrder}
-					<InputsSpecEditor
-						key={'Order'}
-						bind:componentInput={actionsOrder}
-						id={selectedId ?? ''}
-						userInputEnabled={false}
-						shouldCapitalize={true}
-						resourceOnly={false}
-						fieldType={actionsOrder?.['fieldType']}
-						subFieldType={actionsOrder?.['subFieldType']}
-						format={actionsOrder?.['format']}
-						selectOptions={actionsOrder?.['selectOptions']}
-						tooltip={actionsOrder?.['tooltip']}
-						fileUpload={actionsOrder?.['fileUpload']}
-						placeholder={actionsOrder?.['placeholder']}
-						customTitle={actionsOrder?.['customTitle']}
-						allowTypeChange={false}
-						displayType={false}
-					/>
-					<Button
-						size="xs"
-						color="light"
-						startIcon={{
-							icon: Code
-						}}
-						variant="border"
-						on:click={() => {
-							actionsOrder = undefined
-						}}
-					>
-						Disable
-					</Button>
-				{:else}
-					<Button
-						size="xs"
-						color="light"
-						startIcon={{
-							icon: Code
-						}}
-						variant="border"
-						on:click={() => {
-							actionsOrder = {
-								fieldType: 'text',
-								type: 'evalv2',
-								expr: JSON.stringify(components?.map((x) => x.id) ?? []),
-								connections: []
-							}
-						}}
-					>
-						Enable
-					</Button>
-				{/if}
-			</div>
-		</PanelSection>
-	</div>
-</Popup>
+			>
+				<div class="w-full flex gap-2 flex-col mt-2">
+					{#if actionsOrder}
+						<InputsSpecEditor
+							key={'Order'}
+							bind:componentInput={actionsOrder}
+							id={selectedId ?? ''}
+							userInputEnabled={false}
+							shouldCapitalize={true}
+							resourceOnly={false}
+							fieldType={actionsOrder?.['fieldType']}
+							subFieldType={actionsOrder?.['subFieldType']}
+							format={actionsOrder?.['format']}
+							selectOptions={actionsOrder?.['selectOptions']}
+							tooltip={actionsOrder?.['tooltip']}
+							fileUpload={actionsOrder?.['fileUpload']}
+							placeholder={actionsOrder?.['placeholder']}
+							customTitle={actionsOrder?.['customTitle']}
+							allowTypeChange={false}
+							displayType={false}
+						/>
+						<Button
+							size="xs"
+							color="light"
+							startIcon={{
+								icon: Code
+							}}
+							variant="border"
+							on:click={() => {
+								actionsOrder = undefined
+							}}
+						>
+							Disable
+						</Button>
+					{:else}
+						<Button
+							size="xs"
+							color="light"
+							startIcon={{
+								icon: Code
+							}}
+							variant="border"
+							on:click={() => {
+								actionsOrder = {
+									fieldType: 'text',
+									type: 'evalv2',
+									expr: JSON.stringify(components?.map((x) => x.id) ?? []),
+									connections: []
+								}
+							}}
+						>
+							Enable
+						</Button>
+					{/if}
+				</div>
+			</PanelSection>
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/components/wizards/TableColumnWizard.svelte

@@ -1,4 +1,4 @@
-<script>import { Popup } from '../common';
+<script>import Popover from '../meltComponents/Popover.svelte';
 import Alert from '../common/alert/Alert.svelte';
 import Label from '../Label.svelte';
 import Toggle from '../Toggle.svelte';
@@ -7,61 +7,66 @@ import { offset, flip, shift } from 'svelte-floating-ui/dom';
 export let column;
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{
 		strategy: 'fixed',
 		placement: 'left-end',
 		middleware: [offset(8), flip(), shift()]
 	}}
-	containerClasses="border rounded-lg shadow-lg bg-surface p-4"
+	closeButton
+	closeOnOtherPopoverOpen
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<slot name="trigger" />
 	</svelte:fragment>
-	<div class="flex flex-col w-96 p-2 gap-4">
-		<span class="text-sm mb-2 leading-6 font-semibold">
-			Table Column
-			<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/">
-				Column definitions are used to define columns in ag-Grid.
-			</Tooltip>
-		</span>
+	<svelte:fragment slot="content">
+		<div class="flex flex-col w-96 p-4 gap-4">
+			<span class="text-sm mb-2 leading-6 font-semibold">
+				Table Column
+				<Tooltip
+					documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/"
+				>
+					Column definitions are used to define columns in ag-Grid.
+				</Tooltip>
+			</span>
 
-		<Label label="Header name">
-			<input placeholder="header name" bind:value={column.headerName} />
-		</Label>
+			<Label label="Header name">
+				<input placeholder="header name" bind:value={column.headerName} />
+			</Label>
 
-		<Label label="Show column">
-			<Toggle
-				on:pointerdown={(e) => {
-					e?.stopPropagation()
-				}}
-				options={{ right: 'Hide column' }}
-				bind:checked={column.hideColumn}
-				size="xs"
-			/>
-		</Label>
+			<Label label="Show column">
+				<Toggle
+					on:pointerdown={(e) => {
+						e?.stopPropagation()
+					}}
+					options={{ right: 'Hide column' }}
+					bind:checked={column.hideColumn}
+					size="xs"
+				/>
+			</Label>
 
-		<Label label="Type">
-			<select bind:value={column.type}>
-				<option value="text">Text</option>
-				<option value="badge">Badge</option>
-				<option value="link">Link</option>
-			</select>
-		</Label>
+			<Label label="Type">
+				<select bind:value={column.type}>
+					<option value="text">Text</option>
+					<option value="badge">Badge</option>
+					<option value="link">Link</option>
+				</select>
+			</Label>
 
-		{#if column.type === 'link'}
-			<Alert type="info" title="Label" size="xs">
-				They are two ways to define a link:
-				<ul class="list-disc list-inside">
-					<li>
-						<strong>String</strong>: The string will be used as the link and the label.
-					</li>
-					<li>
-						<strong>Object</strong>: The object must have a <code>href</code> and a
-						<code>label</code> property.
-					</li>
-				</ul>
-			</Alert>
-		{/if}
-	</div>
-</Popup>
+			{#if column.type === 'link'}
+				<Alert type="info" title="Label" size="xs">
+					They are two ways to define a link:
+					<ul class="list-disc list-inside">
+						<li>
+							<strong>String</strong>: The string will be used as the link and the label.
+						</li>
+						<li>
+							<strong>Object</strong>: The object must have a <code>href</code> and a
+							<code>label</code> property.
+						</li>
+					</ul>
+				</Alert>
+			{/if}
+		</div>
+	</svelte:fragment>
+</Popover>

package/package/gen/core/OpenAPI.js

@@ -21,7 +21,7 @@ export const OpenAPI = {
     PASSWORD: undefined,
     TOKEN: undefined,
     USERNAME: undefined,
-    VERSION: '1.447.4',
+    VERSION: '1.472.1',
     WITH_CREDENTIALS: false,
     interceptors: {
         request: new Interceptors(),