windmill-components 1.493.10 → 1.501.5

package/package/components/CronInput.svelte

@@ -1,31 +1,24 @@
 <script lang="ts">import { ScheduleService } from '../gen';
 import { emptyString, formatCron, sendUserToast } from '../utils';
 import Badge from './Badge.svelte';
-// @ts-ignore
-import Multiselect from 'svelte-multiselect';
 import { Button } from './common';
-import Select from '../components/apps/svelte-select/lib/index';
 import timezones from './timezones';
-import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
-import { onMount } from 'svelte';
 import CronBuilder from './CronBuilder.svelte';
 import Label from './Label.svelte';
 import CronGen from './copilot/CronGen.svelte';
-import DarkModeObserver from './DarkModeObserver.svelte';
-export let schedule;
-// export let offset: number = -60 * Math.floor(new Date().getTimezoneOffset() / 60)
-export let timezone; // = Intl.DateTimeFormat().resolvedOptions().timeZone
-export let disabled = false;
-export let validCRON = true;
-export let cronVersion = 'v2';
-let preview = [];
+import Select from './select/Select.svelte';
+import MultiSelect from './select/MultiSelect.svelte';
+import { safeSelectItems } from './select/utils.svelte';
+import { untrack } from 'svelte';
+let { schedule = $bindable(), timezone = $bindable(), disabled = false, validCRON = $bindable(true), cronVersion = $bindable('v2') } = $props();
+let preview = $state([]);
 // If the user has already entered a cron string, switching to the basic tab will override it.
-let executeEvery = 'minute';
-let seconds = 30;
-let minutes = 30;
-let hours = 1;
+let executeEvery = $state('minute');
+let seconds = $state(30);
+let minutes = $state(30);
+let hours = $state(1);
 const daysOfMonthOptions = Array.from(Array(31).keys()).map((i) => i + 1);
-let daysOfMonth = [];
+let daysOfMonth = $state([]);
 // let lastDayOfMonth = false
 const monthsOfYearOptions = [
     'January',
@@ -41,7 +34,7 @@ const monthsOfYearOptions = [
     'November',
     'December'
 ];
-let monthsOfYear = [];
+let monthsOfYear = $state([]);
 const daysOfWeekOptions = [
     'Sunday',
     'Monday',
@@ -51,9 +44,8 @@ const daysOfWeekOptions = [
     'Friday',
     'Saturday'
 ];
-let daysOfWeek = [];
-let UTCTime = '';
-$: !emptyString(schedule) && handleScheduleInput(schedule, timezone);
+let daysOfWeek = $state([]);
+let UTCTime = $state('');
 async function handleScheduleInput(input, timezone) {
     try {
         preview = await ScheduleService.previewSchedule({
@@ -71,8 +63,56 @@ async function handleScheduleInput(input, timezone) {
         }
     }
 }
-let nschedule = '';
-$: {
+let nschedule = $state('');
+function formatDate(timezone) {
+    try {
+        return new Intl.DateTimeFormat('en-GB', {
+            weekday: 'short',
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            timeZone: timezone,
+            timeZoneName: 'short'
+        }).format;
+    }
+    catch (ee) {
+        sendUserToast(`Invalid timezone: ${timezone}. Update your browser's timezone preference`, true);
+        return new Intl.DateTimeFormat('en-GB', {
+            weekday: 'short',
+            day: '2-digit',
+            month: 'short',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            timeZone: 'Europe/Paris',
+            timeZoneName: 'short'
+        }).format;
+    }
+}
+const items = Object.keys(timezones)
+    .map((key) => {
+    return Object.keys(timezones[key])
+        .map((subKey) => {
+        return {
+            value: subKey,
+            label: subKey,
+            group: timezones[key][subKey][1]
+        };
+    })
+        .flat();
+})
+    .flat();
+$effect(() => {
+    schedule;
+    untrack(() => {
+        !emptyString(schedule) && handleScheduleInput(schedule, timezone);
+    });
+});
+$effect(() => {
     // CRON string format
     // sec  min   hour      day of month   month     day of week   year
     // 0    30    9,12,15   1,15           May-Aug   Mon,Wed,Fri   2018/2
@@ -136,74 +176,18 @@ $: {
     else if (executeEvery === 'day-week') {
         nschedule = `0 ${s_AtUTCMinutes} ${s_AtUTCHours} * * ${s_daysOfWeek}`;
     }
-}
-$: dateFormatter = formatDate(timezone);
-function formatDate(timezone) {
-    try {
-        return new Intl.DateTimeFormat('en-GB', {
-            weekday: 'short',
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            second: 'numeric',
-            timeZone: timezone,
-            timeZoneName: 'short'
-        }).format;
-    }
-    catch (ee) {
-        sendUserToast(`Invalid timezone: ${timezone}. Update your browser's timezone preference`, true);
-        return new Intl.DateTimeFormat('en-GB', {
-            weekday: 'short',
-            day: '2-digit',
-            month: 'short',
-            year: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-            second: 'numeric',
-            timeZone: 'Europe/Paris',
-            timeZoneName: 'short'
-        }).format;
-    }
-}
-let darkMode = false;
-function onThemeChange() {
-    if (document.documentElement.classList.contains('dark')) {
-        darkMode = true;
-    }
-    else {
-        darkMode = false;
-    }
-}
-onMount(() => {
-    onThemeChange();
 });
-const items = Object.keys(timezones)
-    .map((key) => {
-    return Object.keys(timezones[key])
-        .map((subKey) => {
-        return {
-            value: subKey,
-            label: subKey,
-            group: timezones[key][subKey][1]
-        };
-    })
-        .flat();
-})
-    .flat();
+let dateFormatter = $derived(formatDate(timezone));
 </script>
 
-<DarkModeObserver on:change={onThemeChange} />
-
 <div class="w-full flex space-x-8">
 	<div class="w-full flex flex-col gap-4">
 		<Label label="Cron" class="font-semibold" primary={true}>
-			<svelte:fragment slot="error">
+			{#snippet error()}
 				{#if !validCRON}
 					<div class="text-red-600 text-xs"> Invalid cron syntax </div>
 				{/if}
-			</svelte:fragment>
+			{/snippet}
 			<div class="flex flex-row-reverse text-2xs text-tertiary -mt-1 hover:underline">
 				<a
 					class="text-tertiary"
@@ -228,163 +212,160 @@ const items = Object.keys(timezones)
 				</div>
 			{:else}
 				<Select
-					inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-					containerStyles={'border-color: lightgray;' +
-						(darkMode
-							? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-							: SELECT_INPUT_DEFAULT_STYLE.containerStyles)}
 					{items}
+					class="w-full"
+					bind:value={timezone}
 					groupBy={(item) => item.group}
-					on:change={(w) => {
-						timezone = w.detail.label
+					sortBy={(a, b) => {
+						if (a.group[0] === '+' && b.group[0] === '-') return -1
+						if (a.group[0] === '-' && b.group[0] === '+') return 1
+						return a.group.localeCompare(b.group)
 					}}
-					value={timezone}
 				/>
 			{/if}
 		</Label>
 
 		{#if !disabled}
 			<div class="flex flex-row gap-2 mb-2">
-				<CronBuilder let:close>
-					<div class="w-full flex flex-col">
-						<div class="w-full flex flex-col gap-1">
-							<div class="text-secondary text-sm leading-none">Execute schedule every</div>
-
-							<div class="w-full flex gap-4">
-								<div class="w-full flex flex-col gap-1">
-									<select
-										{disabled}
-										name="execute_every"
-										id="execute_every"
-										bind:value={executeEvery}
-									>
-										<option value="second">Second(s)</option>
-										<option value="minute">Minute(s)</option>
-										<option value="hour">Hour(s)</option>
-										<option value="day-month">Day of the month</option>
-										<option value="month">Month(s)</option>
-										<option value="day-week">Day of the week</option>
-									</select>
-								</div>
+				<CronBuilder>
+					{#snippet children({ close })}
+						<div class="w-full flex flex-col">
+							<div class="w-full flex flex-col gap-1">
+								<div class="text-secondary text-sm leading-none">Execute schedule every</div>
 
-								<div class="w-full flex flex-col gap-1 justify-center">
-									{#if executeEvery == 'second'}
-										<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
-										<small>Valid range 0-59</small>
-									{:else if executeEvery == 'minute'}
-										<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
-										<small>Valid range 0-59</small>
-									{:else if executeEvery == 'hour'}
-										<input {disabled} type="number" min="0" max="23" bind:value={hours} />
-										<small>Valid range 0-23</small>
-									{:else if executeEvery == 'day-month'}
-										<!-- <div class="w-full flex">
-									<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
-										<div class="flex">
-											<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
-										</div>
-										<small> Last day of the month </small>
-									</label>
-								</div> -->
-									{/if}
-								</div>
-							</div>
-						</div>
-
-						<div class="w-full flex flex-col gap-4">
-							{#if executeEvery == 'month'}
-								<div class="w-full flex flex-col">
-									<Multiselect
-										{disabled}
-										bind:selected={monthsOfYear}
-										options={monthsOfYearOptions}
-										selectedOptionsDraggable={false}
-										placeholder="Every month"
-										ulOptionsClass={'!bg-surface-secondary'}
-									/>
-								</div>
-							{/if}
-
-							{#if executeEvery == 'day-week'}
-								<div class="w-full flex flex-col">
-									<Multiselect
-										{disabled}
-										bind:selected={daysOfWeek}
-										options={daysOfWeekOptions}
-										selectedOptionsDraggable={false}
-										placeholder="Every day"
-										ulOptionsClass={'!bg-surface-secondary'}
-									/>
-								</div>
-							{/if}
-
-							{#if executeEvery == 'day-month' || executeEvery == 'month'}
-								<div class="w-full flex flex-col gap-1">
-									{#if executeEvery == 'month'}
-										<small class="font-bold">On day of the month</small>
-									{/if}
-									<div class="w-full flex gap-4">
-										<div class="w-full flex">
-											<Multiselect
-												{disabled}
-												bind:selected={daysOfMonth}
-												options={daysOfMonthOptions}
-												selectedOptionsDraggable={false}
-												placeholder="Every day"
-												ulOptionsClass={'!bg-surface-secondary'}
-											/>
-										</div>
+								<div class="w-full flex gap-4">
+									<div class="w-full flex flex-col gap-1 mb-2">
+										<select
+											{disabled}
+											name="execute_every"
+											id="execute_every"
+											bind:value={executeEvery}
+										>
+											<option value="second">Second(s)</option>
+											<option value="minute">Minute(s)</option>
+											<option value="hour">Hour(s)</option>
+											<option value="day-month">Day of the month</option>
+											<option value="month">Month(s)</option>
+											<option value="day-week">Day of the week</option>
+										</select>
+									</div>
 
-										<!-- {#if executeEvery == 'month'}
-									<div class="w-full flex">
+									<div class="w-full flex flex-col gap-1 justify-center">
+										{#if executeEvery == 'second'}
+											<input {disabled} type="number" min="0" max="59" bind:value={seconds} />
+											<small>Valid range 0-59</small>
+										{:else if executeEvery == 'minute'}
+											<input {disabled} type="number" min="0" max="59" bind:value={minutes} />
+											<small>Valid range 0-59</small>
+										{:else if executeEvery == 'hour'}
+											<input {disabled} type="number" min="0" max="23" bind:value={hours} />
+											<small>Valid range 0-23</small>
+										{:else if executeEvery == 'day-month'}
+											<!-- <div class="w-full flex">
 										<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
 											<div class="flex">
 												<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
 											</div>
 											<small> Last day of the month </small>
 										</label>
+									</div> -->
+										{/if}
 									</div>
-								{/if} -->
-									</div>
-									<small>Schedule will only execute on valid calendar days</small>
 								</div>
-							{/if}
+							</div>
 
-							{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
-								<div class="w-full flex flex-col gap-1">
-									<small class="font-bold">At Time</small>
-									<input
-										{disabled}
-										type="time"
-										name="atUTCTime"
-										id="atUTCTime"
-										bind:value={UTCTime}
-									/>
-								</div>
-							{/if}
-						</div>
+							<div class="w-full flex flex-col gap-4">
+								{#if executeEvery == 'month'}
+									<div class="w-full flex flex-col">
+										<MultiSelect
+											disablePortal
+											{disabled}
+											bind:value={monthsOfYear}
+											items={safeSelectItems(monthsOfYearOptions)}
+											placeholder="Every month"
+										/>
+									</div>
+								{/if}
+
+								{#if executeEvery == 'day-week'}
+									<div class="w-full flex flex-col">
+										<MultiSelect
+											disablePortal
+											{disabled}
+											bind:value={daysOfWeek}
+											items={safeSelectItems(daysOfWeekOptions)}
+											placeholder="Every day"
+										/>
+									</div>
+								{/if}
 
-						<div class="w-full flex flex-col gap-1">
-							<div class="text-secondary text-sm leading-none">Preview New Cron</div>
+								{#if executeEvery == 'day-month' || executeEvery == 'month'}
+									<div class="w-full flex flex-col gap-1">
+										{#if executeEvery == 'month'}
+											<small class="font-bold">On day of the month</small>
+										{/if}
+										<div class="w-full flex gap-4">
+											<div class="w-full flex">
+												<MultiSelect
+													disablePortal
+													{disabled}
+													bind:value={daysOfMonth}
+													items={safeSelectItems(daysOfMonthOptions)}
+													placeholder="Every day"
+												/>
+											</div>
 
-							<div class="flex p-2 px-4 rounded-md bg-surface-secondary">
-								<span>{nschedule}</span>
+											<!-- {#if executeEvery == 'month'}
+										<div class="w-full flex">
+											<label for="lastDayOfMonth" class="w-full flex items-center gap-2">
+												<div class="flex">
+													<input type="checkbox" id="lastDayOfMonth" bind:checked={lastDayOfMonth} />
+												</div>
+												<small> Last day of the month </small>
+											</label>
+										</div>
+									{/if} -->
+										</div>
+										<small>Schedule will only execute on valid calendar days</small>
+									</div>
+								{/if}
+
+								{#if executeEvery == 'day-month' || executeEvery == 'month' || executeEvery == 'day-week'}
+									<div class="w-full flex flex-col gap-1">
+										<small class="font-bold">At Time</small>
+										<input
+											{disabled}
+											type="time"
+											name="atUTCTime"
+											id="atUTCTime"
+											bind:value={UTCTime}
+										/>
+									</div>
+								{/if}
+							</div>
+
+							<div class="w-full flex flex-col gap-1">
+								<div class="text-secondary text-sm leading-none">Preview New Cron</div>
+
+								<div class="flex p-2 px-4 rounded-md bg-surface-secondary">
+									<span>{nschedule}</span>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<div class="mt-4">
-						<Button
-							color="dark"
-							size="xs"
-							on:click={() => {
-								schedule = nschedule
-								close()
-							}}
-						>
-							Set cron schedule
-						</Button>
-					</div>
+						<div class="mt-4">
+							<Button
+								color="dark"
+								size="xs"
+								on:click={() => {
+									schedule = nschedule
+									close()
+								}}
+							>
+								Set cron schedule
+							</Button>
+						</div>
+					{/snippet}
 				</CronBuilder>
 				<CronGen bind:schedule bind:cronVersion />
 			</div>

package/package/components/CronInput.svelte.d.ts

@@ -1,24 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const CronInput: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     schedule: string;
     timezone: string;
     disabled?: boolean;
     validCRON?: boolean;
     cronVersion?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type CronInput = InstanceType<typeof CronInput>;
+}
+declare const CronInput: import("svelte").Component<Props, {}, "schedule" | "timezone" | "validCRON" | "cronVersion">;
+type CronInput = ReturnType<typeof CronInput>;
 export default CronInput;

package/package/components/DBManager.svelte

@@ -165,4 +165,4 @@ let dbTableEditorProps = $derived(dbTableEditorPropsFactory?.({ selectedSchemaKe
 			/>
 		</DrawerContent>
 	</Drawer>
-{/if}
+{/if}

package/package/components/DBManagerDrawerButton.svelte

@@ -9,7 +9,7 @@ import DbManager from './DBManager.svelte';
 import { Alert } from './common';
 import { dbDeleteTableActionWithPreviewScript, dbTableOpsWithPreviewScripts } from './dbOps';
 import { makeCreateTableQuery } from './apps/components/display/dbtable/queries/createTable';
-import { runPreviewJobAndPollResult } from './jobs/utils';
+import { runScriptAndPollResult } from './jobs/utils';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
 import SqlRepl from './SqlRepl.svelte';
 import SimpleAgTable from './SimpleAgTable.svelte';
@@ -174,7 +174,7 @@ async function getColDefs(tableKey) {
 								previewSql: (values) =>
 									makeCreateTableQuery(values, resourceType, selectedSchemaKey),
 								async onConfirm(values) {
-									await runPreviewJobAndPollResult({
+									await runScriptAndPollResult({
 										workspace: $workspaceStore,
 										requestBody: {
 											args: { database: '$res:' + resourcePath },
@@ -215,7 +215,7 @@ async function getColDefs(tableKey) {
 					</Pane>
 				</Splitpanes>
 			{/if}
-			<svelte:fragment slot="actions">
+			{#snippet actions()}
 				<Button
 					loading={refreshing}
 					on:click={() => refresh()}
@@ -232,7 +232,7 @@ async function getColDefs(tableKey) {
 					size="xs"
 					color="light"
 				/>
-			</svelte:fragment>
+			{/snippet}
 		</DrawerContent>
 	</Drawer>
 {/if}

package/package/components/DBSchemaExplorer.svelte

@@ -17,10 +17,11 @@ function handleSelected({ detail }) {
 		class="mb-4"
 		selected={dbSchema.publicOnly ? 'dbo' : 'all'}
 		on:selected={handleSelected}
-		let:item
 	>
-		<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />
-		<ToggleButton value="all" label="All" {item} />
+		{#snippet children({ item })}
+			<ToggleButton value="dbo" label={dbSchema.schema.dbo ? 'Dbo' : 'Public'} {item} />
+			<ToggleButton value="all" label="All" {item} />
+		{/snippet}
 	</ToggleButtonGroup>
 {/if}
 {#if dbSchema.lang === 'graphql'}

package/package/components/DBTable.svelte

@@ -11,6 +11,7 @@ import InsertRowDrawerButton from './apps/components/display/InsertRowDrawerButt
 import { deepEqual } from 'fast-equals';
 import 'ag-grid-community/styles/ag-grid.css';
 import './apps/components/display/table/theme/windmill-theme.css';
+import { untrack } from 'svelte';
 let { dbTableOps } = $props();
 let [clientHeight, clientWidth, darkMode, firstRow, lastRow] = $state([0, 0, false, -1, -1]);
 let quicksearch = $state('');
@@ -36,7 +37,7 @@ let datasource = {
 let rowCount = $state(0);
 let refreshCount = $state(0);
 const refresh = () => (refreshCount += 1);
-$effect(() => eGui && mountGrid());
+$effect(() => eGui && untrack(() => mountGrid()));
 function mountGrid() {
     if (eGui && !api) {
         createGrid(eGui, {
@@ -84,7 +85,7 @@ $effect(() => {
     if (deepEqual(key, prevUpdateKey))
         return;
     prevUpdateKey = key;
-    updateGrid();
+    untrack(() => updateGrid());
 });
 function updateGrid() {
     dbTableOps.getCount({ quicksearch }).then((result) => (rowCount = result));
@@ -175,7 +176,9 @@ function updateGrid() {
 		<div class="flex gap-1 w-full justify-between items-center text-xs text-primary p-2">
 			<div>
 				<Popover>
-					<svelte:fragment slot="text">Download</svelte:fragment>
+					{#snippet text()}
+						Download
+					{/snippet}
 					<Button
 						startIcon={{ icon: Download }}
 						color="light"