windmill-components 1.532.0 → 1.542.4

package/package/components/apps/editor/SettingsPanel.svelte

@@ -92,7 +92,7 @@ let menuItemsSettings = $derived(findMenuItemsSettings($app, firstComponent));
 
 {#if gridItemWithLocation}
 	{#if gridItemWithLocation.location.type === 'grid'}
-		{#each $app.grid as gridItem, gridItemIndex}
+		{#each $app.grid as gridItem, gridItemIndex (gridItem.data.id)}
 			{#if gridItem.data.id === gridItemWithLocation.item.id}
 				<ComponentPanel
 					bind:item={$app.grid[gridItemIndex]}
@@ -104,7 +104,7 @@ let menuItemsSettings = $derived(findMenuItemsSettings($app, firstComponent));
 			{/if}
 		{/each}
 	{:else if gridItemWithLocation.location.type === 'subgrid' && $app.subgrids}
-		{#each $app.subgrids[gridItemWithLocation.location.subgridKey] as subgridItem, subgridItemIndex}
+		{#each $app.subgrids[gridItemWithLocation.location.subgridKey] as subgridItem, subgridItemIndex (subgridItem.data.id)}
 			{#if subgridItem.data.id === gridItemWithLocation.item.id}
 				<ComponentPanel
 					bind:item={$app.subgrids[gridItemWithLocation.location.subgridKey][subgridItemIndex]}

package/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { getContext } from 'svelte';
 import { handleEscape, handlePaste, handleArrowUp, handleCut, handleCopy, down, right, left } from './componentCallbacks.svelte';
-const { history, movingcomponents, jobsDrawerOpen } = getContext('AppEditorContext');
+const { history, movingcomponents, jobsDrawerOpen, runnableJobEditorPanel } = getContext('AppEditorContext');
 const { app, selectedComponent, focusedGrid, componentControl } = getContext('AppViewerContext');
 const ctx = {
     history,
@@ -16,7 +16,8 @@ function keydown(event) {
     // Ignore keydown events if the user is typing in monaco
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
-        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName) ||
+        $runnableJobEditorPanel.focused) {
         return;
     }
     switch (event.key) {

package/package/components/apps/editor/componentsPanel/ListItem.svelte

@@ -4,14 +4,14 @@ import { ChevronDown } from 'lucide-svelte';
 import { isOpenStore } from './store';
 import { createEventDispatcher, onMount } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
-let { title, prefix = undefined, openByDefault = false, wrapperClasses = '', toggleClasses = '', contentWrapperClasses = '', isOpen = $bindable(false), tooltip = undefined, documentationLink = undefined, subtitle = undefined, titleSlot, children } = $props();
+let { title, prefix = undefined, openByDefault = false, wrapperClasses = '', toggleClasses = '', contentWrapperClasses = '', isOpen = $bindable(), tooltip = undefined, documentationLink = undefined, subtitle = undefined, titleSlot, children } = $props();
 const dispatch = createEventDispatcher();
 let storeTitle = $derived(prefix + title);
 $effect(() => {
     isOpen = prefix ? $isOpenStore[storeTitle] : true;
 });
 $effect(() => {
-    dispatch('open', isOpen);
+    dispatch('open', isOpen ?? false);
 });
 onMount(() => {
     if (prefix !== undefined && !(prefix + title in $isOpenStore)) {

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -350,7 +350,7 @@ let extraLib = $derived(isFrontend && worldStore
 				<DiffEditor
 					open={false}
 					bind:this={diffEditor}
-					class="h-full"
+					className="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 					defaultLang={scriptLangToEditorLang(inlineScript?.language)}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte.d.ts

@@ -30,6 +30,6 @@ declare const InlineScriptEditor: $$__sveltets_2_IsomorphicComponent<Props, {
     delete: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "name" | "fields" | "inlineScript" | "editor">;
+}, {}, {}, "name" | "fields" | "editor" | "inlineScript">;
 type InlineScriptEditor = InstanceType<typeof InlineScriptEditor>;
 export default InlineScriptEditor;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditorDrawer.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptEditorDrawer: $$__sveltets_2_IsomorphicComponent<Props
     [evt: string]: CustomEvent<any>;
 }, {}, {
     openDrawer: () => void;
-}, "inlineScript" | "isOpen">;
+}, "isOpen" | "inlineScript">;
 type InlineScriptEditorDrawer = InstanceType<typeof InlineScriptEditorDrawer>;
 export default InlineScriptEditorDrawer;

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte

@@ -79,7 +79,6 @@ function refresh(runnable) {
     if (deepEqual(runnable, lastRunnable)) {
         return;
     }
-    console.log('runnable', runnable);
     notFound = false;
     if (runnable.runType == 'script') {
         refreshScript(runnable);

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte.d.ts

@@ -26,6 +26,6 @@ declare const InlineScriptRunnableByPath: $$__sveltets_2_IsomorphicComponent<Pro
     fork: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "runnable" | "fields">;
+}, {}, {}, "fields" | "runnable">;
 type InlineScriptRunnableByPath = InstanceType<typeof InlineScriptRunnableByPath>;
 export default InlineScriptRunnableByPath;

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -1,14 +1,17 @@
 <script lang="ts">import { preventDefault, stopPropagation } from 'svelte/legacy';
 import { Button } from '../../../common';
 import { GripVertical, Loader2, Plus, X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+import { createEventDispatcher, getContext, tick } from 'svelte';
 import SubTypeEditor from './SubTypeEditor.svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
 import RefreshDatabaseStudioTable from './RefreshDatabaseStudioTable.svelte';
+import { findGridItem } from '../appUtils';
 let { componentInput = $bindable(), subFieldType = undefined, selectOptions = undefined, id } = $props();
+const appContext = getContext('AppViewerContext');
+const { app, selectedComponent } = appContext || {};
 let items = $state([]);
 items = getItems(componentInput);
 const dispatch = createEventDispatcher();
@@ -175,10 +178,30 @@ function addElementByType() {
     componentInput = componentInput;
     items = getItems(componentInput);
 }
-function deleteElementByType(index) {
+async function updateConfiguration() {
+    if (selectedComponent && id) {
+        $selectedComponent = undefined;
+        await tick();
+        $selectedComponent = [id];
+    }
+}
+async function deleteElementByType(index) {
     if (componentInput.value) {
+        const item = componentInput.value[index];
+        // If deleting actions column, clear all table actions
+        if (subFieldType === 'ag-grid' && item && item._isActionsColumn === true) {
+            const gridItem = id ? findGridItem($app, id) : null;
+            if (gridItem && (gridItem.data.type === 'aggridcomponent' ||
+                gridItem.data.type === 'aggridcomponentee' ||
+                gridItem.data.type === 'aggridinfinitecomponent' ||
+                gridItem.data.type === 'aggridinfinitecomponentee') && Array.isArray(gridItem.data.actions)) {
+                gridItem.data.actions.length = 0;
+            }
+            await updateConfiguration();
+            return;
+        }
         componentInput.value.splice(index, 1);
-        items.splice(index, 1); // Add this
+        items.splice(index, 1);
         items = items;
         componentInput.value = componentInput.value;
         dispatch('deleteArrayItem', { index });
@@ -218,6 +241,7 @@ $effect(() => {
 $effect(() => {
     items != undefined && handleItemsChange();
 });
+const rnd = generateRandomString();
 </script>
 
 <div class="flex gap-2 flex-col mt-2 w-full">
@@ -267,7 +291,8 @@ $effect(() => {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridCondition.svelte

@@ -92,6 +92,7 @@ function addCondition() {
     });
     component.numberOfSubgrids = items.length + 1;
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={'Conditions'}>
@@ -107,7 +108,8 @@ function addCondition() {
 			use:dragHandleZone={{
 				items: items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridNavbar.svelte

@@ -94,6 +94,7 @@ function handleFinalize(e) {
 }
 let resolvedPaths = $state([]);
 let resolvedLabels = $state([]);
+const rnd = generateRandomString();
 </script>
 
 <PanelSection
@@ -107,7 +108,8 @@ let resolvedLabels = $state([]);
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/GridTab.svelte

@@ -112,6 +112,7 @@ function handleFinalize(e) {
         });
     }
 }
+const rnd = generateRandomString();
 </script>
 
 <PanelSection title={`${word}s ${tabs && tabs.length > 0 ? `(${tabs.length})` : ''}`}>
@@ -123,7 +124,8 @@ function handleFinalize(e) {
 			use:dragHandleZone={{
 				items,
 				flipDurationMs: 200,
-				dropTargetStyle: {}
+				dropTargetStyle: {},
+				type: rnd
 			}}
 			onconsider={handleConsider}
 			onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/InputsSpecEditor.svelte

@@ -117,7 +117,7 @@ function openConnection() {
 								componentInput['value'] != undefined &&
 								(componentInput['expr'] == '' || componentInput['expr'] == undefined)
 							) {
-								componentInput['expr'] = JSON.stringify(componentInput['value'])
+								componentInput['expr'] = JSON.stringify(componentInput['value'], null, 2)
 							} else if (fileUploadS3 && fieldType === 'text' && e.detail != 'uploadS3') {
 								componentInput['value'] = ''
 							} else if (e.detail == 'uploadS3') {

package/package/components/apps/editor/settingsPanel/OneOfInputSpecsEditor.svelte

@@ -3,7 +3,7 @@ import { addWhitespaceBeforeCapitals, capitalize } from '../../../../utils';
 import { cleanseOneOfConfiguration } from '../appUtils';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 let { key, oneOf = $bindable(), inputSpecsConfiguration, labels, shouldCapitalize, id, resourceOnly, tooltip, disabledOptions = [], acceptSelf = false, recomputeOnInputChanged = true, showOnDemandOnlyToggle = true } = $props();
-$effect(() => {
+$effect.pre(() => {
     if (oneOf == undefined) {
         oneOf = { configuration: {}, selected: '' };
     }
@@ -35,59 +35,61 @@ function getValueOfDeprecated(obj) {
 </script>
 
 <div class="p-2 border">
-	<div class="mb-2 text-sm font-semibold">
-		{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
-		{#if tooltip}
-			<Tooltip light>{tooltip}</Tooltip>
-		{/if}
-	</div>
-	<select
-		class="w-full border border-gray-300 rounded-md p-2"
-		value={oneOf.selected}
-		onchange={(e) => {
-			oneOf = { ...oneOf, selected: e?.target?.['value'] }
-		}}
-	>
-		{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
-			{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
-				<option value={choice}>{labels?.[choice] ?? choice}</option>
+	{#if oneOf}
+		<div class="mb-2 text-sm font-semibold">
+			{capitalize(addWhitespaceBeforeCapitals(key))}&nbsp;
+			{#if tooltip}
+				<Tooltip light>{tooltip}</Tooltip>
 			{/if}
-		{/each}
-	</select>
-	{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
-		<div class="mb-4"></div>
-	{/if}
-	<div class="flex flex-col gap-4">
-		{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
-			{@const config = {
-				...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
-				...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+		</div>
+		<select
+			class="w-full border border-gray-300 rounded-md p-2"
+			value={oneOf.selected}
+			onchange={(e) => {
+				oneOf = { ...oneOf, selected: e?.target?.['value'] }
 			}}
+		>
+			{#each Object.keys(inputSpecsConfiguration ?? {}) as choice}
+				{#if (!disabledOptions.includes(choice) && !getValueOfDeprecated(inputSpecsConfiguration[choice])) || oneOf.selected === choice}
+					<option value={choice}>{labels?.[choice] ?? choice}</option>
+				{/if}
+			{/each}
+		</select>
+		{#if oneOf.selected !== 'none' && oneOf.selected !== 'errorOverlay'}
+			<div class="mb-4"></div>
+		{/if}
+		<div class="flex flex-col gap-4">
+			{#each Object.keys(inputSpecsConfiguration?.[oneOf.selected] ?? {}) as nestedKey}
+				{@const config = {
+					...inputSpecsConfiguration?.[oneOf.selected]?.[nestedKey],
+					...oneOf.configuration?.[oneOf.selected]?.[nestedKey]
+				}}
 
-			{#if config && oneOf.configuration[oneOf.selected]}
-				<InputsSpecEditor
-					{recomputeOnInputChanged}
-					key={nestedKey}
-					bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
-					{id}
-					{acceptSelf}
-					userInputEnabled={false}
-					{shouldCapitalize}
-					{resourceOnly}
-					fieldType={config?.['fieldType']}
-					subFieldType={config?.['subFieldType']}
-					format={config?.['format']}
-					selectOptions={config?.['selectOptions']}
-					placeholder={config?.['placeholder']}
-					customTitle={config?.['customTitle']}
-					tooltip={config?.['tooltip']}
-					fileUpload={config?.['fileUpload']}
-					loading={config?.['loading']}
-					documentationLink={config?.['documentationLink']}
-					allowTypeChange={config?.['allowTypeChange']}
-					{showOnDemandOnlyToggle}
-				/>
-			{/if}
-		{/each}
-	</div>
+				{#if config && oneOf.configuration[oneOf.selected]}
+					<InputsSpecEditor
+						{recomputeOnInputChanged}
+						key={nestedKey}
+						bind:componentInput={oneOf.configuration[oneOf.selected][nestedKey]}
+						{id}
+						{acceptSelf}
+						userInputEnabled={false}
+						{shouldCapitalize}
+						{resourceOnly}
+						fieldType={config?.['fieldType']}
+						subFieldType={config?.['subFieldType']}
+						format={config?.['format']}
+						selectOptions={config?.['selectOptions']}
+						placeholder={config?.['placeholder']}
+						customTitle={config?.['customTitle']}
+						tooltip={config?.['tooltip']}
+						fileUpload={config?.['fileUpload']}
+						loading={config?.['loading']}
+						documentationLink={config?.['documentationLink']}
+						allowTypeChange={config?.['allowTypeChange']}
+						{showOnDemandOnlyToggle}
+					/>
+				{/if}
+			{/each}
+		</div>
+	{/if}
 </div>

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -72,6 +72,7 @@ function handleFinalize(e) {
     const { items: newItems } = e.detail;
     items = newItems;
 }
+const rnd = generateRandomString();
 </script>
 
 {#if components}
@@ -101,7 +102,8 @@ function handleFinalize(e) {
 				use:dragHandleZone={{
 					items,
 					flipDurationMs: 200,
-					dropTargetStyle: {}
+					dropTargetStyle: {},
+					type: rnd
 				}}
 				onconsider={handleConsider}
 				onfinalize={handleFinalize}

package/package/components/apps/editor/settingsPanel/inputEditor/StaticInputEditor.svelte

@@ -273,11 +273,19 @@ let s3FilePicker = $state(undefined);
 		{:else if fieldType === 'ag-grid'}
 			<div class="flex flex-row rounded-md bg-surface items-center h-full">
 				<div class="relative w-full">
-					<input
-						class="text-xs px-2 border-y w-full flex flex-row items-center border-r rounded-r-md h-8"
-						bind:value={componentInput.value.field}
-						placeholder="Field"
-					/>
+					{#if componentInput.value._isActionsColumn === true}
+						<div
+							class="text-xs px-2 border w-full flex flex-row items-center rounded-r-md h-8 text-primary"
+						>
+							Actions Column
+						</div>
+					{:else}
+						<input
+							class="text-xs px-2 border-y w-full flex flex-row items-center border-r rounded-r-md h-8"
+							bind:value={componentInput.value.field}
+							placeholder="Field"
+						/>
+					{/if}
 					<div class="absolute top-1 right-1">
 						<AgGridWizard bind:value={componentInput.value}>
 							{#snippet trigger()}

package/package/components/apps/svelte-grid/Grid.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { FilledItem } from './types';
 import { type GridShadow } from '../editor/appUtils';
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         items: FilledItem<T>[];
         rowHeight?: number;
         gap?: any;
@@ -16,28 +16,47 @@ declare class __sveltets_Render<T> {
         parentWidth?: number | undefined;
         disableMove?: boolean;
         children?: import("svelte").Snippet<[any]>;
-        onDropped?: ((e: {
+        onDropped?: (e: {
             id: string;
             overlapped: string | undefined;
             x: number;
             y: number;
-        }) => void) | undefined;
-        onRedraw?: ((grid: FilledItem<T>[]) => void) | undefined;
-        onResize?: ((e: {
+        }) => void;
+        onRedraw?: (grid: FilledItem<T>[]) => void;
+        onResize?: (e: {
             cols: number;
             xPerPx: number;
             yPerPx: number;
             width: number | undefined;
-        }) => void) | undefined;
-        onMounted?: ((e: {
+        }) => void;
+        onMounted?: (e: {
             cols: number;
             xPerPx: number;
             yPerPx: number;
             width: number | undefined;
-        }) => void) | undefined;
+        }) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {
+        handleMove: (detail: {
+            cordDiff: {
+                x: number;
+                y: number;
+            };
+            clientY: number;
+            intersectingElement?: string | undefined;
+            shadow?: GridShadow | undefined;
+            overlapped?: string | undefined;
+        }) => void;
+        handleInitMove: (id: string) => void;
+    };
+    bindings: "containerWidth";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "containerWidth";
     exports(): {
         handleMove: (detail: {

package/package/components/assets/JobAssetsViewer.svelte

@@ -49,30 +49,34 @@ let dbManagerDrawer = $state();
 let resourceEditorDrawer = $state();
 </script>
 
-<ul class="flex flex-col divide-y mt-1">
-	{#each assets.value ?? [] as asset}
-		<li class="flex justify-between py-3 leading-4 text-sm pl-4">
-			<div class="flex flex-col flex-1 truncate">
-				{asset.path}
-				<span class="text-2xs text-tertiary">
-					{formatAssetKind({
-						...asset,
-						...(asset.kind === 'resource'
-							? { metadata: { resource_type: resourceDataCache[asset.path] } }
-							: {})
-					})}
-				</span>
-			</div>
-			<AssetButtons
-				{asset}
-				{resourceDataCache}
-				{dbManagerDrawer}
-				{resourceEditorDrawer}
-				{s3FilePicker}
-			/>
-		</li>
-	{/each}
-</ul>
+{#if assets.value && assets.value.length > 0}
+	<ul class="flex flex-col divide-y mt-1">
+		{#each assets.value ?? [] as asset}
+			<li class="flex justify-between py-3 leading-4 text-sm pl-4">
+				<div class="flex flex-col flex-1 truncate">
+					{asset.path}
+					<span class="text-2xs text-tertiary">
+						{formatAssetKind({
+							...asset,
+							...(asset.kind === 'resource'
+								? { metadata: { resource_type: resourceDataCache[asset.path] } }
+								: {})
+						})}
+					</span>
+				</div>
+				<AssetButtons
+					{asset}
+					{resourceDataCache}
+					{dbManagerDrawer}
+					{resourceEditorDrawer}
+					{s3FilePicker}
+				/>
+			</li>
+		{/each}
+	</ul>
+{:else}
+	<div class="text-sm text-tertiary">No assets found</div>
+{/if}
 
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
 <DbManagerDrawer bind:this={dbManagerDrawer} />

package/package/components/auditLogs/AuditLogsTable.svelte

@@ -76,11 +76,7 @@ function kindToBadgeColor(kind) {
 
 <svelte:window onresize={() => computeHeight()} />
 
-<div
-	class="divide-y min-w-[640px] h-full"
-	id="audit-logs-table-wrapper"
->
-
+<div class="divide-y min-w-[640px] h-full" id="audit-logs-table-wrapper">
 	<div bind:clientHeight={headerHeight}>
 		<div
 			class="flex flex-row bg-surface-secondary sticky top-0 w-full p-2 pr-4 text-xs font-semibold"
@@ -105,7 +101,7 @@ function kindToBadgeColor(kind) {
 			scrollToAlignment="center"
 		>
 			{#snippet header()}{/snippet}
-			{#snippet children({ index, style })}
+			{#snippet item({ index, style })}
 				<div {style} class="w-full">
 					{#if flatLogs}
 						{@const logOrDate = flatLogs[index]}

package/package/components/chartjs-wrappers/Chart.svelte.d.ts

@@ -1,15 +1,22 @@
-import { Chart, type ChartData, type ChartType } from 'chart.js';
+import { Chart, type ChartData, type ChartOptions, type ChartType } from 'chart.js';
 import type { HTMLCanvasAttributes } from 'svelte/elements';
 import 'chart.js/auto';
 import 'chartjs-adapter-date-fns';
-declare class __sveltets_Render<T extends ChartType> {
-    props(): HTMLCanvasAttributes & {
+declare function $$render<T extends ChartType>(): {
+    props: HTMLCanvasAttributes & {
         type: T;
-        data: ChartData<T, import("chart.js/dist/types/utils").DistributiveArray<import("chart.js").ChartTypeRegistry[T]["defaultDataPoint"]>, unknown>;
-        options: Exclude<import("chart.js/dist/types/utils").DeepPartial<import("chart.js").CoreChartOptions<T> & import("chart.js").ElementChartOptions<T> & import("chart.js").PluginChartOptions<T> & import("chart.js").DatasetChartOptions<T> & import("chart.js").ScaleChartOptions<T> & import("chart.js").ChartTypeRegistry[T]["chartOptions"]>, import("chart.js/dist/types/utils")._DeepPartialArray<unknown>>;
+        data: ChartData<T>;
+        options: ChartOptions<T>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends ChartType> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/package/components/common/OnChange.svelte.d.ts

@@ -1,11 +1,18 @@
-declare class __sveltets_Render<T> {
-    props(): {
+declare function $$render<T>(): {
+    props: {
         key: T;
         onChange: () => void;
         runFirstEffect?: boolean;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/package/components/common/badge/Badge.svelte

@@ -11,6 +11,7 @@ export let wrapperClass = '';
 export let baseClass = 'text-center';
 export let capitalize = false;
 export let icon = undefined;
+export let verySmall = false;
 let hidden = false;
 const colors = {
     gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
@@ -40,8 +41,14 @@ const hovers = {
     orange: 'hover:bg-orange-200 dark:hover:bg-orange-300',
     violet: 'hover:bg-violet-200 dark:hover:bg-violet-300'
 };
-$: badgeClass = classNames(baseClass, small ? 'text-xs' : large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
-    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', 'flex flex-row gap-1 items-center', $$props.class);
+$: badgeClass = classNames(baseClass, small
+    ? 'text-xs'
+    : verySmall
+        ? 'text-2xs'
+        : large
+            ? 'text-sm font-medium'
+            : 'text-xs font-semibold', colors[color], href &&
+    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', verySmall ? 'px-0.5 py-0.5' : '', 'flex flex-row gap-1 items-center', $$props.class);
 const handleHide = () => (hidden = !hidden);
 </script>
 

package/package/components/common/badge/Badge.svelte.d.ts

@@ -29,10 +29,11 @@ declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWith
     baseClass?: string | undefined;
     capitalize?: boolean | undefined;
     icon?: BadgeIconProps | undefined;
+    verySmall?: boolean | undefined;
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
     keydown: KeyboardEvent;
 } & {
     [evt: string]: CustomEvent<any>;