windmill-components 1.70.0 → 1.77.0

package/assets/app.css

@@ -50,12 +50,23 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
 }
 
 @layer components {
 	/* Flow graph viewer -> Svelvet library internal class overwrite */
 	.Node {
 		display: flex !important;
-		cursor: pointer !important;
 	}
 }

package/components/AppConnect.svelte

@@ -72,7 +72,7 @@ let args = {};
 $: key =
     apiTokenApps[resource_type]?.key ??
         (args != undefined
-            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key'].includes(x))[0]
+            ? Object.keys(args).filter((x) => ['token', 'password', 'api_key', 'key'].includes(x))[0]
             : undefined);
 let scopes = [];
 let extra_params = [];
@@ -230,6 +230,7 @@ $: disabled =
             args['token'] == '' &&
             args['password'] == '' &&
             args['api_key'] == '' &&
+            args['key'] == '' &&
             key != undefined) ||
         (step == 3 && pathError != '') ||
         !isValid;
@@ -365,7 +366,7 @@ let filteredConnectsManual = [];
 				bind:error={pathError}
 				bind:path
 				initialPath=""
-				namePlaceholder="{resource_type}"
+				namePlaceholder={resource_type}
 				kind="resource"
 			/>
 
@@ -402,7 +403,7 @@ let filteredConnectsManual = [];
 		{:else}
 			<Path
 				initialPath=""
-				namePlaceholder="{resource_type}"
+				namePlaceholder={resource_type}
 				bind:error={pathError}
 				bind:path
 				kind="resource"

package/components/DisplayResult.svelte

@@ -1,9 +1,10 @@
 <script>import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
-import { truncate } from '../utils';
-import { Button } from './common';
+import { copyToClipboard, truncate } from '../utils';
+import { Button, Drawer, DrawerContent } from './common';
 import autosize from 'svelte-autosize';
+import { ClipboardCopy } from 'lucide-svelte';
 export let result;
 export let requireHtmlApproval = false;
 let resultKind;
@@ -70,16 +71,35 @@ function inferResultKind(result) {
     return 'json';
 }
 let payload = '';
+let jsonViewer;
 </script>
 
+<Drawer bind:this={jsonViewer} size="900px">
+	<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+		<svelte:fragment slot="actions">
+			<Button
+				on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+				color="light"
+				size="xs"
+			>
+				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+			</Button>
+		</svelte:fragment>
+		<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+	</DrawerContent>
+</Drawer>
+
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
-				as JSON&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
+				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 text-sm text-gray-700"
-				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
+				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
+				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
+				<div class="text-gray-500 text-sm  absolute top-0 right-2">
+					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>
+				</div></div
 			>{/if}{#if !forceJson && resultKind == 'table-col'}<div
 				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
 			>
@@ -207,12 +227,10 @@ let payload = '';
 					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
 				>
 			</div>
-		{:else}<Highlight
-				language={json}
-				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
-			/>
+		{:else}
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
 		{/if}
 	{:else}
-		<div class="text-gray-500 text-sm">No result</div>
+		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
 	{/if}
 </div>

package/components/Dropdown.svelte

@@ -1,19 +1,29 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import { MoreHorizontal } from 'lucide-svelte';
+import { MoreVertical } from 'lucide-svelte';
 import { Button, Menu } from './common';
 import { goto } from '$app/navigation';
+import { twMerge } from 'tailwind-merge';
 export let dropdownItems;
 export let name = undefined;
 export let placement = 'bottom-start';
-export let btnClasses = '!text-blue-500 bg-transparent';
+export let btnClasses = '';
+$: buttonClass = twMerge('!border-0 bg-transparent !p-[6px]', btnClasses);
 const dispatch = createEventDispatcher();
 </script>
 
 <Menu {placement} let:close>
-	<Button nonCaptureEvent color="light" size="xs" {btnClasses} {...$$restProps} slot="trigger">
+	<Button
+		nonCaptureEvent
+		color="dark"
+		variant="border"
+		size="xs"
+		btnClasses={buttonClass}
+		{...$$restProps}
+		slot="trigger"
+	>
 		{#if !$$slots.default}
-			<MoreHorizontal size={20} />
+			<MoreVertical size={20} />
 		{:else}
 			<slot />
 		{/if}

package/components/FieldHeader.svelte

@@ -7,17 +7,21 @@ export let required = false;
 export let itemsType = undefined;
 </script>
 
-<div class="inline-flex flex-row items-center">
+<div class="inline-flex flex-row items-center truncated">
 	<span class="font-semibold">
 		{label}
 	</span>
 	<Required {required} class="!ml-0" />
 
-	<span class="text-sm italic ml-1 text-indigo-800">
-		({type ?? 'any'}{contentEncoding && contentEncoding != ''
-			? `, encoding: ${contentEncoding}`
-			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
-			? ` of ${itemsType?.type}s`
-			: ''})</span
-	>
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
 </div>

package/components/FlowBuilder.svelte

@@ -1,20 +1,18 @@
 <script>import { goto } from '$app/navigation';
-import { page } from '$app/stores';
 import { FlowService, ScheduleService } from '../gen';
+import { initHistory, redo, undo } from '../history';
 import { userStore, workspaceStore } from '../stores';
 import { encodeState, formatCron, loadHubScripts, sendUserToast } from '../utils';
-import { faCalendarAlt, faEye, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarAlt, faPen, faSave } from '@fortawesome/free-solid-svg-icons';
 import { setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
-import { Button, Drawer, DrawerContent } from './common';
+import { Button, ButtonPopup, ButtonPopupItem, UndoRedo } from './common';
 import { dirtyStore } from './common/confirmationModal/dirtyStore';
-import UnsavedConfirmationModal from './common/confirmationModal/UnsavedConfirmationModal.svelte';
 import { OFFSET } from './CronInput.svelte';
-import FlowGraphViewer from './FlowGraphViewer.svelte';
+import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import FlowEditor from './flows/FlowEditor.svelte';
-import { flowStateStore } from './flows/flowState';
-import { flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
 import { loadFlowSchedule } from './flows/scheduleUtils';
@@ -23,7 +21,8 @@ export let initialPath = '';
 export let selectedId;
 export let initialArgs = {};
 export let loading = false;
-let pathError = '';
+export let flowStore;
+export let flowStateStore;
 async function createSchedule(path) {
     const { cron, args, enabled } = $scheduleStore;
     try {
@@ -44,7 +43,9 @@ async function createSchedule(path) {
         sendUserToast(`The primary schedule could not be created: ${err}`, true);
     }
 }
-async function saveFlow() {
+let loadingSave = false;
+async function saveFlow(leave) {
+    loadingSave = true;
     const flow = cleanInputs($flowStore);
     const { cron, args, enabled } = $scheduleStore;
     $dirtyStore = false;
@@ -108,8 +109,13 @@ async function saveFlow() {
             await createSchedule(flow.path);
         }
     }
-    sendUserToast(`Flow saved at ${$flowStore.path}`);
-    goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    loadingSave = false;
+    if (leave) {
+        goto(`/flows/get/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
+    else if (initialPath !== $flowStore.path) {
+        goto(`/flows/edit/${$flowStore.path}?workspace_id=${$workspaceStore}`);
+    }
 }
 let timeout = undefined;
 $: {
@@ -131,17 +137,26 @@ function saveDraft() {
         }
     }, 500);
 }
-const selectedIdStore = writable(selectedId);
+const selectedIdStore = writable(selectedId ?? 'settings-metadata');
 const scheduleStore = writable({ args: {}, cron: '', enabled: false });
 const previewArgsStore = writable(initialArgs);
+const scriptEditorDrawer = writable(undefined);
+const moving = writable(undefined);
+const history = initHistory($flowStore);
+const testStepStore = writable({});
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
     schedule: scheduleStore,
-    select,
-    previewArgs: previewArgsStore
+    previewArgs: previewArgsStore,
+    scriptEditorDrawer,
+    moving,
+    history,
+    flowStateStore,
+    flowStore,
+    testStepStore
 });
 async function loadSchedule() {
     loadFlowSchedule(initialPath, $workspaceStore)
@@ -159,38 +174,81 @@ async function loadSchedule() {
 $: selectedId && select(selectedId);
 $: initialPath && $workspaceStore && loadSchedule();
 loadHubScripts();
-let flowViewer;
+function onKeyDown(event) {
+    switch (event.key) {
+        case 'Z':
+            if (event.ctrlKey) {
+                $flowStore = redo(history);
+                event.preventDefault();
+            }
+            break;
+        case 'z':
+            if (event.ctrlKey) {
+                $flowStore = undo(history, $flowStore);
+                $selectedIdStore = 'Input';
+                event.preventDefault();
+            }
+            break;
+        case 's':
+            if (event.ctrlKey) {
+                saveFlow(false);
+                event.preventDefault();
+            }
+            break;
+        case 'ArrowDown': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > -1 && idx < ids.length - 1) {
+                $selectedIdStore = ids[idx + 1];
+                event.preventDefault();
+            }
+            break;
+        }
+        case 'ArrowUp': {
+            let ids = generateIds();
+            let idx = ids.indexOf($selectedIdStore);
+            if (idx > 0 && idx < ids.length) {
+                $selectedIdStore = ids[idx - 1];
+                event.preventDefault();
+            }
+            break;
+        }
+    }
+}
+function generateIds() {
+    return [
+        'settings-metadata',
+        'constants',
+        ...dfs($flowStore.value.modules, (module) => module.id)
+    ];
+}
 </script>
 
-{#if !$userStore?.operator}
-	<UnsavedConfirmationModal />
+<svelte:window on:keydown={onKeyDown} />
 
-	<Drawer bind:this={flowViewer} size="75%">
-		<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
-			<div class="overflow-hidden h-full w-full">
-				<FlowGraphViewer flow={$flowStore} />
-			</div>
-		</DrawerContent>
-	</Drawer>
+{#if !$userStore?.operator}
+	<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 
 	<div class="flex flex-col flex-1 h-screen">
 		<!-- Nav between steps-->
 		<div
 			class="justify-between flex flex-row w-full items-center pl-2.5 pr-6  space-x-4 overflow-x-auto scrollbar-hidden max-h-12 h-full"
 		>
-			<div class="flex flex-row">
+			<div class="flex flex-row gap-4 items-center">
 				<FlowImportExportMenu />
-				<Button
-					btnClasses="inline-flex"
-					startIcon={{ icon: faEye }}
-					variant="border"
-					color="light"
-					size="sm"
-					on:click={flowViewer.openDrawer}
-				>
-					Graph
-				</Button>
+				<UndoRedo
+					undoProps={{ disabled: $history.index === 0 }}
+					redoProps={{ disabled: $history.index === $history.history.length - 1 }}
+					on:undo={() => {
+						$flowStore = undo(history, $flowStore)
+						$selectedIdStore = 'Input'
+					}}
+					on:redo={() => {
+						$flowStore = redo(history)
+					}}
+				/>
 			</div>
+
 			<div class="gap-1 flex-row hidden md:flex shrink overflow-hidden">
 				{#if $scheduleStore.enabled}
 					<Button
@@ -237,12 +295,22 @@ let flowViewer;
 			<div class="flex flex-row space-x-2">
 				<FlowPreviewButtons />
 				<div class="center-center">
-					<Button
-						disabled={pathError != ''}
-						startIcon={{ icon: faSave }}
+					<ButtonPopup
+						loading={loadingSave}
 						size="sm"
-						on:click={saveFlow}>Save</Button
+						startIcon={{ icon: faSave }}
+						on:click={() => saveFlow(false)}
 					>
+						<svelte:fragment slot="main">Save</svelte:fragment>
+						<ButtonPopupItem on:click={() => saveFlow(true)}>Save and exit</ButtonPopupItem>
+						{#if initialPath != ''}
+							<ButtonPopupItem
+								on:click={() => {
+									window.open(`/flows/add?template=${initialPath}`)
+								}}>Fork</ButtonPopupItem
+							>
+						{/if}
+					</ButtonPopup>
 				</div>
 			</div>
 		</div>

package/components/FlowBuilder.svelte.d.ts

@@ -1,10 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
+import { type Flow } from '../gen';
+import { type Writable } from 'svelte/store';
+import type { FlowState } from './flows/flowState';
 declare const __propDef: {
     props: {
         initialPath?: string | undefined;
         selectedId: string | undefined;
         initialArgs?: Record<string, any> | undefined;
         loading?: boolean | undefined;
+        flowStore: Writable<Flow>;
+        flowStateStore: Writable<FlowState>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/FlowGraphViewer.svelte

@@ -71,17 +71,16 @@ let topHeight = 0;
 </Drawer>
 <div class="grid grid-cols-3 w-full">
 	<div
-		bind:clientHeight={topHeight}
 		class="{noSide
 			? 'col-span-3'
-			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 h-screen"
+			: 'sm:col-span-2 col-span-3'} w-full border border-gray-400 max-h-screen"
 		class:overflow-auto={overflowAuto}
 	>
 		<FlowGraph
-			minHeight={topHeight}
+			minHeight={400}
 			modules={flow?.value?.modules}
 			failureModule={flow?.value?.failure_module}
-			on:click={(e) => (stepDetail = e.detail)}
+			on:select={(e) => (stepDetail = e.detail)}
 		/>
 	</div>
 	{#if !noSide}
@@ -89,7 +88,9 @@ let topHeight = 0;
 			class="w-full border-r border-b border-t border-gray-400 min-h-[150px] p-2 overflow-auto hidden sm:block"
 		>
 			{#if stepDetail == undefined}
-				<span class="font-black text-lg w-full my-4">
+				<SchemaViewer schema={flow?.schema} />
+
+				<span class="font-black text-lg w-full my-4 mt-14">
 					<span>Click on a step to see its details</span>
 				</span>
 			{:else if stepDetail == 'Input'}

package/components/FlowJobResult.svelte

@@ -10,9 +10,9 @@ export let loading;
 
 <div
 	class:border={!noBorder}
-	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full"
+	class="grid {!col ? 'grid-cols-2' : 'grid-rows-2'} shadow  border-gray-400 h-full max-h-screen"
 >
-	<div class="bg-white max-h-80 h-full p-1 overflow-auto relative">
+	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		{#if result}
 			<DisplayResult {result} />
@@ -22,7 +22,7 @@ export let loading;
 			<div class="text-gray-400">No result (result is undefined)</div>
 		{/if}
 	</div>
-	<div class="overflow-auto max-h-80 h-full relative">
+	<div class="overflow-auto {col ? '' : 'max-h-80'} h-full relative">
 		<LogViewer content={logs ?? ''} isLoading={false} />
 	</div>
 </div>

package/components/FlowPreviewContent.svelte

@@ -4,12 +4,11 @@ import { faClose, faPlay, faRefresh } from '@fortawesome/free-solid-svg-icons';
 import { Button, Kbd } from './common';
 import { createEventDispatcher, getContext } from 'svelte';
 import Icon from 'svelte-awesome';
-import { dfs, flowStore } from './flows/flowStore';
+import { dfs } from './flows/flowStore';
 import { runFlowPreview } from './flows/utils';
 import SchemaForm from './SchemaForm.svelte';
 import FlowStatusViewer from '../components/FlowStatusViewer.svelte';
 import FlowProgressBar from './flows/FlowProgressBar.svelte';
-import { flowStateStore } from './flows/flowState';
 import CapturePayload from './flows/content/CapturePayload.svelte';
 import { Loader2 } from 'lucide-svelte';
 let capturePayload;
@@ -17,10 +16,9 @@ export let previewMode;
 export let open;
 export let jobId = undefined;
 export let job = undefined;
-let isValid = true;
 let isRunning = false;
 let jobProgressReset;
-const { selectedId, previewArgs } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function sliceModules(modules, upTo, idOrders) {
     return modules
@@ -97,7 +95,6 @@ $: if (job?.type === 'CompletedJob') {
 
 		{#if isRunning}
 			<Button
-				disabled={!isValid}
 				color="red"
 				on:click={async () => {
 					isRunning = false
@@ -124,7 +121,6 @@ $: if (job?.type === 'CompletedJob') {
 				color="blue"
 				size="sm"
 				btnClasses="w-full max-w-lg"
-				disabled={!isValid}
 				on:click={() => runPreview($previewArgs)}
 			>
 				Test flow <Kbd class="ml-2">Ctrl+Enter</Kbd>
@@ -141,14 +137,13 @@ $: if (job?.type === 'CompletedJob') {
 	</div>
 	<FlowProgressBar {job} bind:reset={jobProgressReset} />
 
-	<div class="overflow-y-auto grow  divide-y divide-gray-600 ">
+	<div class="overflow-y-auto grow  divide-y divide-gray-600 pr-4">
 		<div class="max-h-1/2 overflow-auto border-b border-gray-700">
 			<SchemaForm
 				noVariablePicker
 				compact
 				class="py-4 max-w-3xl"
 				schema={$flowStore.schema}
-				bind:isValid
 				bind:args={$previewArgs}
 			/>
 		</div>

package/components/FlowStatusViewer.svelte

@@ -68,7 +68,7 @@ function updateInnerModules() {
         if (mod.type === FlowStatusModule.type.WAITING_FOR_EVENTS &&
             localFlowModuleStates?.[innerModules?.[i - 1]?.id ?? '']?.type ==
                 FlowStatusModule.type.SUCCESS) {
-            localFlowModuleStates[mod.id ?? ''] = { type: mod.type };
+            localFlowModuleStates[mod.id ?? ''] = { type: mod.type, args: job?.args };
         }
         else if (mod.type === FlowStatusModule.type.WAITING_FOR_EXECUTOR &&
             localFlowModuleStates[mod.id ?? '']?.scheduled_for == undefined) {
@@ -80,7 +80,8 @@ function updateInnerModules() {
                     type: mod.type,
                     scheduled_for: 'scheduled for ' + displayDate(job?.['scheduled_for'], true),
                     job_id: job?.id,
-                    parent_module: mod['parent_module']
+                    parent_module: mod['parent_module'],
+                    args: job?.args
                 };
             });
         }
@@ -292,10 +293,12 @@ function isSuccess(arg) {
 											type: FlowStatusModule.type.IN_PROGRESS,
 											logs: e.detail.logs,
 											job_id: e.detail.id,
+											args: e.detail.args,
 											iteration_total: flowJobIds?.flowJobs.length
 										}
 									} else {
 										localFlowModuleStates[flowJobIds.moduleId] = {
+											args: e.detail.args,
 											type: e.detail.success
 												? FlowStatusModule.type.SUCCESS
 												: FlowStatusModule.type.FAILURE,
@@ -360,10 +363,12 @@ function isSuccess(arg) {
 												localFlowModuleStates[mod.id] = {
 													type: FlowStatusModule.type.IN_PROGRESS,
 													logs: e.detail.logs,
+													args: e.detail.args,
 													parent_module: mod['parent_module']
 												}
 											} else {
 												localFlowModuleStates[mod.id] = {
+													args: e.detail.args,
 													type: e.detail.success
 														? FlowStatusModule.type.SUCCESS
 														: FlowStatusModule.type.FAILURE,
@@ -410,13 +415,17 @@ function isSuccess(arg) {
 					<FlowGraph
 						success={isSuccess(job?.['success'])}
 						flowModuleStates={localFlowModuleStates}
-						on:click={(e) => {
-							if (e.detail.id) {
+						on:select={(e) => {
+							if (typeof e.detail == 'string') {
+								if (e.detail == 'Input') {
+									selectedNode = 'start'
+								} else if (e.detail == 'Result') {
+									selectedNode = 'end'
+								} else {
+									selectedNode = e.detail
+								}
+							} else {
 								selectedNode = e.detail.id
-							} else if (e.detail == 'Result') {
-								selectedNode = 'end'
-							} else if (e.detail == 'Input') {
-								selectedNode = 'start'
 							}
 						}}
 						modules={job.raw_flow?.modules ?? []}
@@ -460,6 +469,10 @@ function isSuccess(arg) {
 									</div>
 								{/if}
 							</div>
+							<div class="px-1 border-b border-black">
+								<JobArgs args={node.args} />
+							</div>
+
 							<FlowJobResult
 								loading={job['running'] == true}
 								noBorder

package/components/FolderUsageInfo.svelte

@@ -1,6 +1,8 @@
 <script>import { FolderService, GroupService } from '../gen';
 import { workspaceStore } from '../stores';
 export let name;
+export let tabular = false;
+export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'];
 $: $workspaceStore && loadUsage();
 let usage = {};
 async function loadUsage() {
@@ -8,10 +10,18 @@ async function loadUsage() {
 }
 </script>
 
-<div class="flex flex-col text-xs text-gray-600">
-	{#each Object.entries(usage) as [k, v]}
-		<div>
-			{k}: {v}
-		</div>
+{#if tabular}
+	{#each order as key}
+		<td class="text-center">
+			{usage[key] ?? ''}
+		</td>
 	{/each}
-</div>
+{:else}
+	<div class="flex flex-col text-xs text-gray-600">
+		{#each Object.entries(usage) as [k, v]}
+			<div>
+				{k}: {v}
+			</div>
+		{/each}
+	</div>
+{/if}

package/components/FolderUsageInfo.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         name: string;
+        tabular?: boolean | undefined;
+        order?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;