windmill-components 1.623.2 → 1.655.0

package/package/components/common/menu/MenuItem.svelte.d.ts

@@ -1,30 +1,6 @@
-export default MenuItem;
-type MenuItem = SvelteComponent<any, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> & {
-    $$bindings?: string | undefined;
-};
-declare const MenuItem: $$__sveltets_2_IsomorphicComponent<any, {
-    click: PointerEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    children?: import('svelte').Snippet;
 }
+declare const MenuItem: import("svelte").Component<Props, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;

package/package/components/common/menu/ResolveOpen.svelte

@@ -1,7 +1,10 @@
-<script lang="ts">import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
+<script lang="ts">import { run } from 'svelte/legacy';
+import { createDispatcherIfMounted } from '../../../createDispatcherIfMounted';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 const dispatchIfMounted = createDispatcherIfMounted(dispatch);
-export let open = false;
-$: dispatchIfMounted(open ? 'open' : 'close');
+let { open = false } = $props();
+run(() => {
+    dispatchIfMounted(open ? 'open' : 'close');
+});
 </script>

package/package/components/common/menu/ResolveOpen.svelte.d.ts

@@ -1,3 +1,6 @@
+interface Props {
+    open?: boolean;
+}
 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;
@@ -11,10 +14,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ResolveOpen: $$__sveltets_2_IsomorphicComponent<{
-    open?: boolean;
-}, {
+declare const ResolveOpen: $$__sveltets_2_IsomorphicComponent<Props, {
+    open: CustomEvent<void>;
+    close: CustomEvent<void>;
+} & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "">;
 type ResolveOpen = InstanceType<typeof ResolveOpen>;
 export default ResolveOpen;

package/package/components/common/modal/AlwaysMountedModal.svelte

@@ -1,13 +1,12 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import Portal from '../../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import { clickOutside } from '../../../utils';
 import { X } from 'lucide-svelte';
 import { getContext } from 'svelte';
-export let title;
-export let style = '';
-export let css = {};
+let { title, style = '', css = {}, class: className = '', children } = $props();
 const { mode } = getContext('AppViewerContext');
-let isOpen = false;
+let isOpen = $state(false);
 export function close() {
     isOpen = false;
 }
@@ -33,16 +32,13 @@ export function open() {
 					css?.popup?.class,
 					'wm-modal-form-popup'
 				)}
-				use:clickOutside
-				on:click_outside={() => {
-					close()
-				}}
+				use:clickOutside={{ onClickOutside: () => close() }}
 			>
 				<div class="px-4 py-2 border-b flex justify-between items-center">
 					<div>{title}</div>
 					<div class="w-8">
 						<button
-							on:click={() => {
+							onclick={() => {
 								isOpen = false
 							}}
 							class="hover:bg-surface-hover bg-surface-secondary rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -52,17 +48,17 @@ export function open() {
 					</div>
 				</div>
 
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
-				<div class="relative bg-surface rounded-md" on:click|stopPropagation={() => {}}>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div class="relative bg-surface rounded-md" onclick={stopPropagation(() => {})}>
 					<div
 						class={twMerge(
 							'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',
-							$$props.class
+							className
 						)}
 						{style}
 					>
-						<slot />
+						{@render children?.()}
 					</div>
 				</div>
 			</div>

package/package/components/common/modal/AlwaysMountedModal.svelte.d.ts

@@ -1,37 +1,13 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const AlwaysMountedModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    [x: string]: any;
+interface Props {
     title: string;
-    style?: string | undefined;
+    style?: string;
     css?: any;
-    close?: (() => void) | undefined;
-    open?: (() => void) | undefined;
-}, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const AlwaysMountedModal: import("svelte").Component<Props, {
     close: () => void;
     open: () => void;
-}, string>;
-type AlwaysMountedModal = InstanceType<typeof AlwaysMountedModal>;
+}, "">;
+type AlwaysMountedModal = ReturnType<typeof AlwaysMountedModal>;
 export default AlwaysMountedModal;

package/package/components/common/modal/Modal2.svelte

@@ -1,16 +1,11 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { stopPropagation } from 'svelte/legacy';
+import Portal from '../../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import { clickOutside } from '../../../utils';
 import { X } from 'lucide-svelte';
 import List from '../layout/List.svelte';
 import { fade } from 'svelte/transition';
-export let title;
-export let css = {};
-export let target = '';
-export let isOpen = false;
-export let fixedWidth = 'md';
-export let fixedHeight = 'md';
-export let contentClasses = '';
+let { title, css = {}, target = '', isOpen = $bindable(false), fixedWidth = 'md', fixedHeight = 'md', contentClasses = '', headerLeft, headerRight, children } = $props();
 const widthMap = {
     xs: '400px',
     sm: '600px',
@@ -45,7 +40,7 @@ function fadeFast(node) {
 }
 </script>
 
-<svelte:window on:keydown={handleKeyDown} />
+<svelte:window onkeydown={handleKeyDown} />
 
 {#if isOpen}
 	<Portal name="always-mounted" {target}>
@@ -63,10 +58,7 @@ function fadeFast(node) {
 						css?.popup?.class,
 						'wm-modal-form-popup'
 					)}
-					use:clickOutside
-					on:click_outside={() => {
-						close()
-					}}
+					use:clickOutside={{ onClickOutside: () => close() }}
 				>
 					<List gap="md">
 						<div class="flex w-full">
@@ -75,15 +67,15 @@ function fadeFast(node) {
 								<div class="grow w-min-0">
 									<List horizontal justify="between">
 										<div class="min-w-0 grow">
-											<slot name="header-left" />
+											{@render headerLeft?.()}
 										</div>
 										<div class="min-w-0 grow-0 justify-end">
 											<List horizontal justify="end">
-												<slot name="header-right" />
+												{@render headerRight?.()}
 												<div class="w-8">
 													<button
 														id="modal-close-button"
-														on:click={() => {
+														onclick={() => {
 															close()
 														}}
 														class="hover:bg-surface-hover rounded-full w-8 h-8 flex items-center justify-center transition-all"
@@ -98,13 +90,13 @@ function fadeFast(node) {
 							</List>
 						</div>
 
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<!-- svelte-ignore a11y_click_events_have_key_events -->
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
 						<div
 							class="w-full flex grow min-h-0 {contentClasses}"
-							on:click|stopPropagation={() => {}}
+							onclick={stopPropagation(() => {})}
 						>
-							<slot />
+							{@render children?.()}
 						</div>
 					</List>
 				</div>

package/package/components/common/modal/Modal2.svelte.d.ts

@@ -1,44 +1,18 @@
-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;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Modal2: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+interface Props {
     title: string;
     css?: any;
     target?: string;
     isOpen?: boolean;
-    fixedWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-    fixedHeight?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+    fixedWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    fixedHeight?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     contentClasses?: string;
-    close?: () => void;
-    open?: () => void;
-}, {
-    'header-left': {};
-    'header-right': {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    'header-left': {};
-    'header-right': {};
-    default: {};
-}, {
+    headerLeft?: import('svelte').Snippet;
+    headerRight?: import('svelte').Snippet;
+    children?: import('svelte').Snippet;
+}
+declare const Modal2: import("svelte").Component<Props, {
     close: () => void;
     open: () => void;
-}, string>;
-type Modal2 = InstanceType<typeof Modal2>;
+}, "isOpen">;
+type Modal2 = ReturnType<typeof Modal2>;
 export default Modal2;

package/package/components/common/popup/PopupV2.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import Portal from '../../Portal.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import Portal from '../../Portal.svelte';
 import { clickOutside } from '../../../utils';
 import { createFloatingActions } from 'svelte-floating-ui';
 import { fly } from 'svelte/transition';
@@ -9,7 +10,7 @@ let { floatingConfig = {
 }, open = $bindable(false), target = undefined, button, children, class: classNames = undefined } = $props();
 // export let containerClasses: string = 'rounded-lg shadow-md border p-4 bg-surface'
 // export let floatingClasses: string = ''
-const [floatingRef, floatingContent] = createFloatingActions(floatingConfig);
+const [floatingRef, floatingContent] = createFloatingActions(untrack(() => floatingConfig));
 function close() {
     open = false;
 }

package/package/components/common/seconds/SecondsInput.svelte

@@ -1,26 +1,26 @@
-<script lang="ts">const ONE_DAY_IN_SECONDS = 86400;
+<script lang="ts">import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../../text_input/TextInput.svelte';
+import CloseButton from '../CloseButton.svelte';
+const ONE_DAY_IN_SECONDS = 86400;
 const ONE_HOUR_IN_SECONDS = 3600;
 const ONE_MINUTE_IN_SECONDS = 60;
-export let seconds = 0;
-export let hideDisplay = false;
-export let disabled = false;
-export let max = undefined;
-let day = undefined;
-let hour = undefined;
-let min = undefined;
-let sec = undefined;
-$: convertSecondsToTime(seconds);
-function convertSecondsToTime(seconds) {
-    day = Math.floor(seconds / ONE_DAY_IN_SECONDS);
-    seconds -= day * ONE_DAY_IN_SECONDS;
-    day = day || undefined;
-    hour = Math.floor(seconds / ONE_HOUR_IN_SECONDS);
-    seconds -= hour * ONE_HOUR_IN_SECONDS;
-    hour = hour || undefined;
-    min = Math.floor(seconds / ONE_MINUTE_IN_SECONDS);
-    seconds -= min * ONE_MINUTE_IN_SECONDS;
-    min = min || undefined;
-    sec = seconds || undefined;
+const segmentClass = 'no-default-style !bg-transparent border-none !w-7 text-right p-0 text-xs font-medium focus:ring-0 focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none';
+let { seconds = $bindable(), disabled = false, max = undefined, size = 'md', clearable = false, defaultValue = undefined, onfocus } = $props();
+let day = $state(0);
+let hour = $state(0);
+let min = $state(0);
+let sec = $state(0);
+let containerFocused = $state(false);
+let hasValue = $derived(seconds != null);
+function convertSecondsToTime(s) {
+    day = Math.floor(s / ONE_DAY_IN_SECONDS);
+    s -= day * ONE_DAY_IN_SECONDS;
+    hour = Math.floor(s / ONE_HOUR_IN_SECONDS);
+    s -= hour * ONE_HOUR_IN_SECONDS;
+    min = Math.floor(s / ONE_MINUTE_IN_SECONDS);
+    s -= min * ONE_MINUTE_IN_SECONDS;
+    sec = s;
 }
 function convertUnitsToSeconds() {
     seconds =
@@ -34,70 +34,161 @@ function convertUnitsToSeconds() {
         seconds = max;
     }
 }
+function clamp(value, maxVal) {
+    return Math.max(0, Math.min(maxVal, value));
+}
+function handleKeydown(e, getter, setter, maxVal) {
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        setter(clamp((getter() || 0) + (e.key === 'ArrowUp' ? 1 : -1), maxVal));
+        convertUnitsToSeconds();
+    }
+}
+function handleInput(e, setter, maxVal) {
+    const input = e.currentTarget;
+    const clamped = clamp(parseInt(input.value) || 0, maxVal);
+    setter(clamped);
+    input.value = String(clamped);
+    convertUnitsToSeconds();
+}
+function handleFocus(e) {
+    containerFocused = true;
+    if (seconds == null) {
+        seconds = 0;
+    }
+    onfocus?.(e);
+}
+function handleBlur() {
+    containerFocused = false;
+}
+$effect(() => {
+    const s = seconds;
+    untrack(() => convertSecondsToTime(s ?? 0));
+});
 </script>
 
-<div class="flex flex-wrap gap-x-4">
-	{#if !hideDisplay}
-		<input
-			value={seconds == null || seconds == undefined
-				? 'Not set'
-				: disabled
-					? ''
-					: seconds + ' second' + (seconds === 1 ? '' : 's')}
-			{disabled}
-			readonly
-			type="text"
-			class="max-w-[248px] bg-gray-50 mb-2 mt-6"
-		/>
-	{/if}
-	<div class="flex flex-wrap items-center gap-2 text-xs font-medium">
-		<div class="flex items-center gap-2">
-			<label>
-				Sec
+<div class="flex flex-col gap-1">
+	<div class="flex items-center gap-1">
+		<div
+			class={twMerge(
+				inputBaseClass,
+				inputSizeClasses[size],
+				inputBorderClass({ forceFocus: containerFocused }),
+				'flex items-center gap-0.5 !w-fit'
+			)}
+		>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? day || 0 : ''}
+					placeholder="_ _"
+					min="0"
 					{disabled}
-					bind:value={sec}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (day = v), Infinity)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => day,
+							(v) => (day = v),
+							Infinity
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-			<label>
-				Min
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">days</span><span>{day && day > 1 ? 'days' : 'day'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? hour || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="23"
 					{disabled}
-					bind:value={min}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (hour = v), 23)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => hour,
+							(v) => (hour = v),
+							23
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-		</div>
-		<div class="flex items-center gap-2">
-			<label>
-				Hour
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">hrs</span><span>{hour && hour > 1 ? 'hrs' : 'hr'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? min || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="59"
 					{disabled}
-					bind:value={hour}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (min = v), 59)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => min,
+							(v) => (min = v),
+							59
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
-			<label>
-				Day
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">mins</span><span>{min && min > 1 ? 'mins' : 'min'}</span></span
+				>
+			</div>
+			<div class="flex items-baseline">
 				<input
 					type="number"
-					class="!w-14"
+					class={segmentClass}
+					value={hasValue ? sec || 0 : ''}
+					placeholder="_ _"
+					min="0"
+					max="59"
 					{disabled}
-					bind:value={day}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					oninput={(e) => handleInput(e, (v) => (sec = v), 59)}
+					onkeydown={(e) =>
+						handleKeydown(
+							e,
+							() => sec,
+							(v) => (sec = v),
+							59
+						)}
+					onfocus={handleFocus}
+					onblur={handleBlur}
 				/>
-			</label>
+				<span class="text-secondary text-2xs inline-grid [&>*]:col-start-1 [&>*]:row-start-1"
+					><span class="invisible">secs</span><span>{sec && sec > 1 ? 'secs' : 'sec'}</span></span
+				>
+			</div>
 		</div>
+		{#if clearable && !disabled && seconds != null && seconds !== defaultValue}
+			<CloseButton
+				class="bg-transparent text-secondary hover:text-primary"
+				noBg
+				small
+				on:close={() => {
+					seconds = defaultValue
+				}}
+			/>
+		{/if}
 	</div>
+	{#if seconds != null}
+		<span class="text-2xs text-hint">
+			= {seconds.toLocaleString()} second{seconds === 1 ? '' : 's'}
+		</span>
+	{:else}
+		<span class="text-2xs text-hint"> no time set </span>
+	{/if}
 </div>

package/package/components/common/seconds/SecondsInput.svelte.d.ts

@@ -1,25 +1,13 @@
-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 SecondsInput: $$__sveltets_2_IsomorphicComponent<{
+import type { ButtonType } from '../button/model';
+interface Props {
     seconds?: number;
-    hideDisplay?: boolean;
     disabled?: boolean;
     max?: number | undefined;
-}, {
-    focus: FocusEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SecondsInput = InstanceType<typeof SecondsInput>;
+    size?: ButtonType.UnifiedSize;
+    clearable?: boolean;
+    defaultValue?: number | undefined;
+    onfocus?: (e: FocusEvent) => void;
+}
+declare const SecondsInput: import("svelte").Component<Props, {}, "seconds">;
+type SecondsInput = ReturnType<typeof SecondsInput>;
 export default SecondsInput;