npm - windmill-components - Versions diffs - 1.448.50 → 1.472.2 - Mend

windmill-components 1.448.50 → 1.472.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (533) hide show

package/package/components/auditLogs/AuditLogsFilters.svelte.d.ts CHANGED Viewed

@@ -6,12 +6,14 @@ declare const __propDef: {
         logs?: AuditLog[] | undefined;
         username?: string | undefined;
         pageIndex?: number | undefined;
+        hasMore?: boolean | undefined;
         before?: string | undefined;
         after?: string | undefined;
         perPage?: number | undefined;
         operation?: string | undefined;
         resource?: string | undefined;
         actionKind?: ActionKind | "all" | undefined;
+        scope?: undefined | 'all_workspaces' | 'instance';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/auditLogs/AuditLogsTable.svelte CHANGED Viewed

@@ -10,6 +10,7 @@ import { ListFilter } from 'lucide-svelte';
 export let logs = [];
 export let pageIndex = 1;
 export let perPage = 100;
+export let hasMore = true;
 export let actionKind = undefined;
 export let operation = undefined;
 export let selectedId = undefined;
@@ -63,8 +64,8 @@ function kindToBadgeColor(kind) {
 	paginated
 	rounded={false}
 	size="sm"
+	{hasMore}
 	bind:perPage
-	shouldHidePagination={logs?.length === 0}
 >
 	<Head>
 		<Cell first head>ID</Cell>

package/package/components/auditLogs/AuditLogsTable.svelte.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ declare const __propDef: {
         logs?: AuditLog[] | undefined;
         pageIndex?: number | undefined;
         perPage?: number | undefined;
+        hasMore?: boolean | undefined;
         actionKind?: string | undefined;
         operation?: string | undefined;
         selectedId?: number | undefined;

package/package/components/common/alert/Alert.svelte CHANGED Viewed

@@ -1,4 +1,5 @@
-<script>import Tooltip from '../../Tooltip.svelte';
+<script>import { classes } from './model';
+import Tooltip from '../../Tooltip.svelte';
 import { AlertCircle, AlertTriangle, CheckCircle2, Info, ChevronDown, ChevronUp } from 'lucide-svelte';
 import { slide } from 'svelte/transition';
 import { twMerge } from 'tailwind-merge';
@@ -24,32 +25,6 @@ const icons = {
     error: AlertTriangle,
     success: CheckCircle2
 };
-const classes = {
-    info: {
-        bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
-        iconClass: 'text-blue-500 dark:text-blue-300',
-        titleClass: 'text-blue-800 dark:text-blue-100',
-        descriptionClass: 'text-blue-700 dark:text-blue-100'
-    },
-    warning: {
-        bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',
-        iconClass: 'text-yellow-500 dark:text-yellow-300/90',
-        titleClass: 'text-yellow-800 dark:text-yellow-100/90',
-        descriptionClass: 'text-yellow-700 dark:text-yellow-100/90'
-    },
-    error: {
-        bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/40 dark:border-red-700/40',
-        iconClass: 'text-red-500 dark:text-red-300/90',
-        titleClass: 'text-red-800 dark:text-red-100/90',
-        descriptionClass: 'text-red-700 dark:text-red-100/90'
-    },
-    success: {
-        bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/40 dark:border-green-700/40',
-        iconClass: 'text-green-500 dark:text-green-300/90',
-        titleClass: 'text-green-800 dark:text-green-100/90',
-        descriptionClass: 'text-green-700 dark:text-green-100/90'
-    }
-};
 function toggleCollapse() {
     if (collapsible) {
         isCollapsed = !isCollapsed;

package/package/components/common/alert/Alert.svelte.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { AlertType } from './model';
+import { type AlertType } from './model';
 declare const __propDef: {
     props: {
         [x: string]: any;

package/package/components/common/alert/model.d.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export type AlertType = 'success' \| 'error' \| 'warning' \| 'info';
2	+ export declare const classes: Record<AlertType, Record<string, string>>;

package/package/components/common/alert/model.js CHANGED Viewed

@@ -1 +1,26 @@
-export {};
+export const classes = {
+    info: {
+        bgClass: 'bg-blue-50 border-blue-200 border dark:bg-blue-900/40 dark:border-blue-700/40',
+        iconClass: 'text-blue-500 dark:text-blue-300',
+        titleClass: 'text-blue-800 dark:text-blue-100',
+        descriptionClass: 'text-blue-700 dark:text-blue-100'
+    },
+    warning: {
+        bgClass: 'bg-yellow-50 border-yellow-200 border dark:bg-yellow-900/40 dark:border-yellow-700/40',
+        iconClass: 'text-yellow-500 dark:text-yellow-300/90',
+        titleClass: 'text-yellow-800 dark:text-yellow-100/90',
+        descriptionClass: 'text-yellow-700 dark:text-yellow-100/90'
+    },
+    error: {
+        bgClass: 'bg-red-50 border-red-200 border dark:bg-red-900/40 dark:border-red-700/40',
+        iconClass: 'text-red-500 dark:text-red-300/90',
+        titleClass: 'text-red-800 dark:text-red-100/90',
+        descriptionClass: 'text-red-700 dark:text-red-100/90'
+    },
+    success: {
+        bgClass: 'bg-green-50 border-green-200 border dark:bg-green-900/40 dark:border-green-700/40',
+        iconClass: 'text-green-500 dark:text-green-300/90',
+        titleClass: 'text-green-800 dark:text-green-100/90',
+        descriptionClass: 'text-green-700 dark:text-green-100/90'
+    }
+};

package/package/components/common/button/Button.svelte CHANGED Viewed

@@ -1,10 +1,9 @@
 <script>import { createEventDispatcher } from 'svelte';
 import { ButtonType } from './model';
 import { twMerge } from 'tailwind-merge';
-import ButtonDropdown from './ButtonDropdown.svelte';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
-import { classNames, getModifierKey } from '../../../utils';
-import { Loader2 } from 'lucide-svelte';
+import Dropdown from '../../DropdownV2.svelte';
+import { getModifierKey } from '../../../utils';
+import { Loader2, ChevronDown } from 'lucide-svelte';
 export let size = 'md';
 export let spacingSize = size;
 export let color = 'blue';
@@ -26,18 +25,18 @@ export let loading = false;
 export let title = undefined;
 export let style = '';
 export let download = undefined;
-export let portalTarget = undefined;
 export let startIcon = undefined;
 export let endIcon = undefined;
 export let shortCut = undefined;
 export let dropdownItems = undefined;
-function computeDropdowns() {
-    if (typeof dropdownItems === 'function') {
-        return dropdownItems();
-    }
-    else {
-        return dropdownItems;
-    }
+function computeDropdowns(menuItems) {
+    const items = typeof menuItems === 'function' ? menuItems() : menuItems;
+    return items.map((item) => ({
+        displayName: item.label,
+        action: item.onClick ? (e) => item.onClick?.(e) : undefined,
+        icon: item.icon,
+        href: item.href
+    }));
 }
 export function focus() {
     element?.focus({});
@@ -197,32 +196,19 @@ $: lucideIconSize = (iconMap[size] ?? 12) * 1;
 	{/if}
 	{#if dropdownItems && dropdownItems.length > 0}
-		<div
-			class={twMerge(
-				buttonClass,
-				'rounded-md m-0 p-0 h-auto !w-10',
-				variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
-				'rounded-r-md !rounded-l-none'
-			)}
-		>
-			<ButtonDropdown target={portalTarget}>
-				<svelte:fragment slot="items">
-					{#each computeDropdowns() ?? [] as item}
-						<MenuItem on:click={item.onClick} href={item.href}>
-							<div
-								class={classNames(
-									'!text-secondary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-surface-hover !text-xs font-semibold'
-								)}
-							>
-								{#if item.icon}
-									<svelte:component this={item.icon} class="w-4 h-4" size={lucideIconSize} />
-								{/if}
-								{item.label}
-							</div>
-						</MenuItem>
-					{/each}
-				</svelte:fragment>
-			</ButtonDropdown>
-		</div>
+		<Dropdown items={computeDropdowns(dropdownItems)} class="h-auto w-fit">
+			<svelte:fragment slot="buttonReplacement">
+				<div
+					class={twMerge(
+						buttonClass,
+						'rounded-md m-0 p-0 !w-10 center-center h-full',
+						variant === 'border' ? 'border-0 border-r border-y ' : 'border-0',
+						'rounded-r-md !rounded-l-none'
+					)}
+				>
+					<ChevronDown class="w-5 h-5" />
+				</div>
+			</svelte:fragment>
+		</Dropdown>
 	{/if}
 </div>

package/package/components/common/button/Button.svelte.d.ts CHANGED Viewed

@@ -24,7 +24,6 @@ declare const __propDef: {
         title?: string | undefined;
         style?: string | undefined;
         download?: string | undefined;
-        portalTarget?: string | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
         shortCut?: {

package/package/components/common/calendarPicker/CalendarPicker.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script>import { Calendar } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
-import { Popup } from '..';
+import Popover from '../../meltComponents/Popover.svelte';
 import DateTimeInput from '../../DateTimeInput.svelte';
 export let date;
 export let label;
@@ -12,8 +12,12 @@ let input;
 export let placement = 'top-end';
 </script>
-<Popup floatingConfig={{ placement: placement, strategy: 'absolute' }} {target}>
-	<svelte:fragment slot="button">
+<Popover
+	floatingConfig={{ placement: placement, strategy: 'absolute' }}
+	portal={target}
+	contentClasses="p-4"
+>
+	<svelte:fragment slot="trigger">
 		<button
 			title="Open calendar picker"
 			class="absolute bottom-1 right-2 top-1 py-1 min-w-min !px-2 items-center text-primary bg-surface border rounded center-center hover:bg-surface-hover transition-all cursor-pointer"
@@ -25,26 +29,27 @@ export let placement = 'top-end';
 			<Calendar size={14} />
 		</button>
 	</svelte:fragment>
-	<!-- svelte-ignore a11y-label-has-associated-control -->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<label class="block text-primary">
-		<div class="pb-1 text-sm text-secondary">{label}</div>
+	<svelte:fragment slot="content">
+		<!-- svelte-ignore a11y-label-has-associated-control -->
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
-		<div on:click|stopPropagation class="flex w-full">
-			<DateTimeInput
-				{clearable}
-				{useDropdown}
-				value={date}
-				on:change={(e) => {
-					date = e.detail
-					dispatch('change', date)
-				}}
-				on:clear={() => {
-					dispatch('clear')
-				}}
-			/>
-		</div>
-	</label>
-</Popup>
+		<label class="block text-primary">
+			<div class="pb-1 text-sm text-secondary">{label}</div>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div on:click|stopPropagation class="flex w-full">
+				<DateTimeInput
+					{clearable}
+					{useDropdown}
+					value={date}
+					on:change={(e) => {
+						date = e.detail
+						dispatch('change', date)
+					}}
+					on:clear={() => {
+						dispatch('clear')
+					}}
+				/>
+			</div>
+		</label>
+	</svelte:fragment>
+</Popover>

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte CHANGED Viewed

@@ -3,26 +3,29 @@ import { beforeNavigate } from '$app/navigation';
 import { goto as gotoUrl } from '$app/navigation';
 import Button from '../button/Button.svelte';
 import { cleanValueProperties, orderedJsonStringify, replaceFalseWithUndefined } from '../../../utils';
-import { tick } from 'svelte';
 import { page } from '$app/stores';
-export let savedValue = undefined;
-export let modifiedValue = undefined;
+export let getInitialAndModifiedValues = undefined;
 export let diffDrawer = undefined;
 export let additionalExitAction = () => { };
+let savedValue = undefined;
+let modifiedValue = undefined;
 let bypassBeforeNavigate = false;
 let open = false;
 let goingTo = undefined;
 beforeNavigate(async (newNavigationState) => {
-    // console.log('beforeNavigate', newNavigationState, bypassBeforeNavigate)
     if (!bypassBeforeNavigate &&
+        getInitialAndModifiedValues &&
         newNavigationState.to &&
         newNavigationState.to.url != $page.url &&
         newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) {
         // console.log('going to', newNavigationState.to.url)
         goingTo = newNavigationState.to.url;
-        newNavigationState.cancel();
-        if (newNavigationState.type != 'popstate') {
-            await tick(); // make sure saved value is updated when clicking on save draft or deploy
+        const state = getInitialAndModifiedValues?.();
+        savedValue = state?.savedValue;
+        modifiedValue = state?.modifiedValue;
+        async function openModal() {
+            newNavigationState.cancel();
+            open = true;
         }
         if (savedValue && modifiedValue) {
             const draftOrDeployed = cleanValueProperties({
@@ -34,14 +37,13 @@ beforeNavigate(async (newNavigationState) => {
                 orderedJsonStringify(replaceFalseWithUndefined(current))) {
                 bypassBeforeNavigate = true;
                 additionalExitAction?.();
-                gotoUrl(goingTo);
             }
             else {
-                open = true;
+                await openModal();
             }
         }
         else {
-            open = true;
+            await openModal();
         }
     }
     else if (bypassBeforeNavigate) {

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts CHANGED Viewed

@@ -1,10 +1,9 @@
 import { SvelteComponent } from "svelte";
 import type DiffDrawer from '../../DiffDrawer.svelte';
-import { type Value } from '../../../utils';
+import type { GetInitialAndModifiedValues } from './unsavedTypes';
 declare const __propDef: {
     props: {
-        savedValue?: Value | undefined;
-        modifiedValue?: Value | undefined;
+        getInitialAndModifiedValues?: GetInitialAndModifiedValues;
         diffDrawer?: DiffDrawer | undefined;
         additionalExitAction?: (() => void) | undefined;
     };

package/package/components/common/confirmationModal/unsavedTypes.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import type { Value } from "../../../utils";
+export type GetInitialAndModifiedValues = (() => SavedAndModifiedValue) | undefined;
+export type SavedAndModifiedValue = {
+    savedValue: Value | undefined;
+    modifiedValue: Value | undefined;
+};

package/package/components/common/confirmationModal/unsavedTypes.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/package/components/common/drawer/Disposable.svelte CHANGED Viewed

@@ -5,6 +5,7 @@
 import { createEventDispatcher } from 'svelte';
 export let open = false;
 export let id = (Math.random() + 1).toString(36).substring(10);
+export let preventEscape = false;
 if (open) {
     openedDrawers.push(id);
 }
@@ -47,7 +48,8 @@ function onKeyDown(event) {
     if (open) {
         switch (event.key) {
             case 'Escape':
-                if (id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) {
+                if ((id == openedDrawers[openedDrawers.length - 1] || openedDrawers.length == 0) &&
+                    !preventEscape) {
                     openedDrawers.pop();
                     event.preventDefault();
                     event.stopPropagation();

package/package/components/common/drawer/Disposable.svelte.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         open?: boolean | undefined;
         id?: string | undefined;
+        preventEscape?: boolean | undefined;
         initialOffset?: number | undefined;
         toggleDrawer?: (() => void) | undefined;
         openDrawer?: (() => void) | undefined;

package/package/components/common/drawer/Drawer.svelte CHANGED Viewed

@@ -9,6 +9,7 @@ export let size = '600px';
 export let alwaysOpen = false;
 export let shouldUsePortal = true;
 export let offset = 0;
+export let preventEscape = false;
 let disposable = undefined;
 $: durationMs = duration * 1000;
 export function toggleDrawer() {
@@ -55,6 +56,7 @@ onMount(() => {
 		bind:this={disposable}
 		on:open
 		on:close
+		{preventEscape}
 	>
 		<aside
 			class="drawer windmill-app windmill-drawer {$$props.class ?? ''} {$$props.positionClass ??

package/package/components/common/drawer/Drawer.svelte.d.ts CHANGED Viewed

@@ -9,6 +9,7 @@ declare const __propDef: {
         alwaysOpen?: boolean | undefined;
         shouldUsePortal?: boolean | undefined;
         offset?: number | undefined;
+        preventEscape?: boolean | undefined;
         toggleDrawer?: (() => void) | undefined;
         openDrawer?: (() => void) | undefined;
         closeDrawer?: (() => void) | undefined;

package/package/components/common/fileInput/FileInput.svelte CHANGED Viewed

@@ -15,6 +15,7 @@ export let returnFileNames = false;
 export let submittedText = undefined;
 export let defaultFile = undefined;
 export let disabled = undefined;
+export let folderOnly = false;
 const dispatch = createEventDispatcher();
 let input;
 export let files = undefined;
@@ -24,17 +25,11 @@ async function onChange(fileList) {
         dispatch('change', files);
         return;
     }
-    if (!multiple || !files) {
-        files = [];
+    if (multiple && files) {
+        files = [...files, ...fileList];
     }
-    for (let i = 0; i < fileList.length; i++) {
-        const file = fileList.item(i);
-        if (file) {
-            files.push(file);
-        }
-    }
-    if (!files.length) {
-        files = undefined;
+    else {
+        files = fileList;
     }
     // Needs to be reset so the same file can be selected
     // multiple times in a row
@@ -72,16 +67,64 @@ function handleDragOver(event) {
         event.dataTransfer.dropEffect = 'copy';
     }
 }
-function handleDrop(event) {
+async function handleFile(fileEntry) {
+    return new Promise((resolve, reject) => {
+        fileEntry.file(resolve, reject);
+    });
+}
+async function handleDirectory(dirEntry, path) {
+    const files = [];
+    const dirReader = dirEntry.createReader();
+    async function readEntries() {
+        return new Promise((resolve) => {
+            dirReader.readEntries(async (entries) => {
+                if (entries.length === 0) {
+                    resolve(files);
+                    return;
+                }
+                const filePromises = entries.map(async (entry) => {
+                    return traverseFileTree(entry, path + dirEntry.name + '/');
+                });
+                const nestedFiles = await Promise.all(filePromises);
+                files.push(...nestedFiles.flat());
+                // readEntries only return up to 100 files
+                // continue reading if more files exist
+                resolve(await readEntries());
+            });
+        });
+    }
+    return readEntries();
+}
+async function traverseFileTree(entry, path = '') {
+    if (entry.isFile) {
+        const file = await handleFile(entry);
+        file.path = path + file.name;
+        return [file];
+    }
+    else if (entry.isDirectory) {
+        return handleDirectory(entry, path);
+    }
+    return [];
+}
+async function handleDrop(event) {
     event.preventDefault();
     if (event.dataTransfer) {
-        if (event.dataTransfer.files && event.dataTransfer.files.length) {
-            if (!multiple && event.dataTransfer.files.length > 1) {
-                sendUserToast('Only one file can be uploaded at a time');
-                return;
+        if (folderOnly) {
+            const item = event.dataTransfer.items[0]?.webkitGetAsEntry();
+            if (item) {
+                const files = await traverseFileTree(item, '');
+                onChange(files);
             }
-            else {
-                onChange(event.dataTransfer.files);
+        }
+        else {
+            if (event.dataTransfer.files && event.dataTransfer.files.length) {
+                if (!multiple && event.dataTransfer.files.length > 1) {
+                    sendUserToast('Only one file can be uploaded at a time');
+                    return;
+                }
+                else {
+                    onChange(Array.from(event.dataTransfer.files));
+                }
             }
         }
     }
@@ -158,22 +201,22 @@ export function clearFiles() {
 		</div>
 	{:else}
 		<slot>
-			<span>Drag and drop {multiple ? 'files' : 'a file'}</span>
+			<span>Drag and drop {folderOnly ? 'a folder' : multiple ? 'files' : 'a file'}</span>
 		</slot>
 	{/if}
 	<input
 		class="!absolute !inset-0 !z-10 !opacity-0 !cursor-pointer"
 		type="file"
+		{...{ webkitdirectory: folderOnly }}
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
 		on:change={({ currentTarget }) => {
-			onChange(currentTarget.files)
+			onChange(currentTarget.files ? Array.from(currentTarget.files) : null)
 		}}
 		{accept}
 		{multiple}
 		{...$$restProps}
 	/>
 	{#if defaultFile}
 		<div class="w-full border-dashed border-t-2 text-2xs pt-1 text-tertiary mt-2">
 			Default file: <span class="text-blue-500">{defaultFile}</span>

package/package/components/common/fileInput/FileInput.svelte.d.ts CHANGED Viewed

@@ -14,7 +14,10 @@ declare const __propDef: {
         submittedText?: string | undefined;
         defaultFile?: string | undefined;
         disabled?: boolean | undefined;
-        files?: File[] | undefined;
+        folderOnly?: boolean | undefined;
+        files?: (File & {
+            path?: string | undefined;
+        })[] | undefined;
         clearFiles?: (() => void) | undefined;
     };
     events: {