windmill-components 1.82.6 → 1.82.7

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

@@ -1,8 +1,7 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import Toggle from '../../../Toggle.svelte';
 import Tooltip from '../../../Tooltip.svelte';
-import { faClose, faEdit } from '@fortawesome/free-solid-svg-icons';
-import { includes } from 'lodash';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { clearResultAppInput } from '../../utils';
 import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';

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

@@ -0,0 +1,61 @@
+<script>import { Button } from '../../../common';
+import { sendUserToast } from '../../../../utils';
+import { Copy } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { ccomponents } from '../component';
+import CssProperty from '../componentsPanel/CssProperty.svelte';
+import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
+export let component;
+const { app } = getContext('AppViewerContext');
+function applyToAllInstances() {
+    if (component) {
+        if (!$app.css) {
+            $app.css = {};
+        }
+        let componentType = component?.type;
+        if (!$app.css[componentType]) {
+            $app.css[componentType] = {};
+        }
+        Object.keys(ccomponents[component.type].customCss ?? {}).forEach((name) => {
+            if (!$app.css[componentType][name]) {
+                $app.css[componentType][name] = {};
+            }
+            if (component) {
+                let nstyle = component.customCss[name];
+                if (nstyle.style) {
+                    $app.css[componentType][name].style = nstyle.style;
+                }
+                if (nstyle.class) {
+                    $app.css[componentType][name].class = nstyle.class;
+                }
+            }
+        });
+        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
+    }
+}
+</script>
+
+<Button
+	variant="border"
+	color="light"
+	size="xs"
+	aria-label="Apply to all instances of this component"
+	on:click={applyToAllInstances}
+>
+	Copy style to global CSS &nbsp;<Copy size={18} />
+</Button>
+
+{#if component && component.customCss !== undefined}
+	{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
+		<div class="w-full">
+			<CssProperty
+				quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
+				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
+				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
+				{name}
+				bind:value={component.customCss[name]}
+				on:change={() => app.set($app)}
+			/>
+		</div>
+	{/each}
+{/if}

package/components/apps/editor/settingsPanel/StylePanel.svelte.d.ts

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        component: AppComponent | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StylePanelProps = typeof __propDef.props;
+export type StylePanelEvents = typeof __propDef.events;
+export type StylePanelSlots = typeof __propDef.slots;
+export default class StylePanel extends SvelteComponentTyped<StylePanelProps, StylePanelEvents, StylePanelSlots> {
+}
+export {};

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

@@ -24,7 +24,7 @@ function deleteComponent(cid) {
     components = components.filter((x) => x.id !== cid);
     $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
     $jobs = clearJobsByComponentId(cid, $jobs);
-    $selectedComponent = id;
+    $selectedComponent = [id];
     $app = $app;
 }
 </script>
@@ -49,10 +49,10 @@ function deleteComponent(cid) {
 			class={classNames(
 				'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
 				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
-				$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
+				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
 			)}
 			on:click={() => {
-				$selectedComponent = component.id
+				$selectedComponent = [component.id]
 			}}
 			on:keypress
 		>

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

@@ -1,19 +1,18 @@
-<script>import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
-export let componentInput;
+<script>import { createEventDispatcher } from 'svelte';
+import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
+import { ClearableInput } from '../../../../common';
+export let value = '#fff';
+const dispatch = createEventDispatcher();
 let isOpen = false;
+$: dispatch('change', value);
 </script>
 
-<div class="color-picker-input">
-	<input
-		type="text"
-		readonly
-		value={componentInput.value}
-		on:focus|preventDefault|stopPropagation={() => (isOpen = true)}
-	/>
+<div class="color-picker-input grow">
+	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
 	<ColorPicker
 		bind:isOpen
-		bind:hex={componentInput.value}
-		label={componentInput.value}
+		bind:hex={value}
+		label={value}
 		canChangeMode={false}
 		components={ChromeVariant}
 		toRight
@@ -22,7 +21,7 @@ let isOpen = false;
 </div>
 
 <style global>
-	:global(.color-picker-input) :global(span) > :global(label.svelte-rogbpz) {
+	:global(.color-picker-input) :global(span) > :global(label) {
 		display: none;
 	}
 
@@ -30,6 +29,7 @@ let isOpen = false;
 		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
 		border-style: none !important;
 		border-radius: 0.375rem !important;
+		z-index: 20;
 	}
 
 	:global(.color-picker-input) :global(.slider-wrapper) {

package/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponentTyped } from "svelte";
-import type { StaticInput } from '../../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<string>;
+        value?: string | undefined;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -5,7 +5,6 @@ export let componentInput;
 export let id;
 export let hasRows = false;
 const { onchange, worldStore, state } = getContext('AppViewerContext');
-$: componentInput && onchange?.();
 $: extraLib =
     componentInput?.expr && $worldStore
         ? buildExtraLib($worldStore?.outputsById ?? {}, id, hasRows, $state, false)
@@ -20,6 +19,11 @@ $: extraLib =
 			shouldBindKey={false}
 			{extraLib}
 			autoHeight
+			on:change={() => {
+				if (onchange) {
+					onchange()
+				}
+			}}
 		/>
 	</div>
 {/if}

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

@@ -37,9 +37,9 @@ function formatName(name) {
 }
 function select(label) {
     componentInput.value = label;
-    if (document.activeElement?.blur) {
-        ;
-        document.activeElement.blur();
+    const elem = document.activeElement;
+    if (elem.blur) {
+        elem.blur();
     }
 }
 </script>

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

@@ -2,9 +2,10 @@
 export let code;
 export let value = undefined;
 export let error = '';
+export let editor = undefined;
 function parseJson() {
     try {
-        value = JSON.parse(code);
+        value = JSON.parse(code ?? '');
         error = '';
     }
     catch (e) {
@@ -16,7 +17,7 @@ $: code && parseJson();
 
 <div class="flex flex-col w-full">
 	<div class="border border-gray-300 w-full">
-		<SimpleEditor on:change autoHeight lang="json" bind:code />
+		<SimpleEditor on:focus bind:this={editor} on:change autoHeight lang="json" bind:code />
 	</div>
 	{#if error != ''}
 		<span class="text-red-600 text-xs">{error}</span>

package/components/apps/editor/settingsPanel/inputEditor/JsonEditor.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
+import SimpleEditor from '../../../../SimpleEditor.svelte';
 declare const __propDef: {
     props: {
-        code: string;
+        code: string | undefined;
         value?: any;
         error?: string | undefined;
+        editor?: SimpleEditor | undefined;
     };
     events: {
+        focus: CustomEvent<any>;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -74,8 +74,8 @@ $: componentInput && onchange?.();
 			Inconsistent labeled resource object
 		{/if}
 	{:else if fieldType === 'color'}
-		<ColorInput bind:componentInput />
-	{:else if fieldType === 'object'}
+		<ColorInput bind:value={componentInput.value} />
+	{:else if fieldType === 'object' || fieldType == 'labeledselect'}
 		{#if format?.startsWith('resource-')}
 			<ResourcePicker
 				initialValue={componentInput.value?.split('$res:')[1] || ''}

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte

@@ -0,0 +1,47 @@
+<script>import { fly } from 'svelte/transition';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { Badge, Button } from '../../../../common';
+import { secondaryMenu, SECONDARY_MENU_ID } from './';
+import { getContext } from 'svelte';
+const { selectedComponent } = getContext('AppViewerContext');
+let width;
+let lastSelected = $selectedComponent;
+$: if (lastSelected !== $selectedComponent) {
+    secondaryMenu.close();
+    lastSelected = $selectedComponent;
+}
+</script>
+
+<div
+	bind:clientWidth={width}
+	class="absolute z-50 inset-0 overflow-hidden"
+	class:pointer-events-none={!$secondaryMenu.isOpen}
+>
+	{#if $secondaryMenu.isOpen && $secondaryMenu.component}
+		<div
+			transition:fly|local={{ duration: 300, x: width, y: 0, opacity: 1 }}
+			id={SECONDARY_MENU_ID}
+			class="flex flex-col w-full h-full bg-white"
+		>
+			<div class="flex justify-between items-center bg-white gap-1 p-3">
+				<Button
+					color="light"
+					size="xs"
+					variant="border"
+					startIcon={{ icon: faChevronLeft }}
+					on:click={secondaryMenu.close}
+				>
+					Back
+				</Button>
+				<Badge color="blue">{$selectedComponent}</Badge>
+			</div>
+			<div class="relative h-full overflow-y-auto px-3 pb-3">
+				{#if typeof $secondaryMenu.component === 'string'}
+					{@html $secondaryMenu.component}
+				{:else}
+					<svelte:component this={$secondaryMenu.component} {...$secondaryMenu.props} />
+				{/if}
+			</div>
+		</div>
+	{/if}
+</div>

package/components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SecondaryMenuProps = typeof __propDef.props;
+export type SecondaryMenuEvents = typeof __propDef.events;
+export type SecondaryMenuSlots = typeof __propDef.slots;
+export default class SecondaryMenu extends SvelteComponentTyped<SecondaryMenuProps, SecondaryMenuEvents, SecondaryMenuSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/secondaryMenu/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/index.js

@@ -0,0 +1,2 @@
+export { default as SecondaryMenu } from './SecondaryMenu.svelte';
+export * from './menuStore';

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.d.ts

@@ -0,0 +1,12 @@
+import type { SvelteComponent } from 'svelte';
+export declare const SECONDARY_MENU_ID: "app-secondary-menu";
+export interface SecondaryMenuStore {
+    isOpen: boolean;
+    component?: typeof SvelteComponent | string;
+    props: Record<string, any>;
+}
+export declare const secondaryMenu: {
+    readonly subscribe: (this: void, run: import("svelte/store").Subscriber<SecondaryMenuStore>, invalidate?: ((value?: SecondaryMenuStore | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    readonly open: (component: SecondaryMenuStore['component'], props?: SecondaryMenuStore['props']) => void;
+    readonly close: () => void;
+};

package/components/apps/editor/settingsPanel/secondaryMenu/menuStore.js

@@ -0,0 +1,10 @@
+import { writable } from 'svelte/store';
+export const SECONDARY_MENU_ID = 'app-secondary-menu';
+const store = writable({ isOpen: false, component: undefined, props: {} });
+export const secondaryMenu = {
+    subscribe: store.subscribe,
+    open: (component, props = {}) => {
+        store.set({ isOpen: true, component, props });
+    },
+    close: () => store.set({ isOpen: false, component: undefined, props: {} })
+};

package/components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte

@@ -19,6 +19,6 @@ $: onLoad =
 	bind:inlineScript={runnable.inlineScript}
 	{onLoad}
 	{doNotRecomputeOnInputChanged}
-	id={$selectedComponent}
+	id={$selectedComponent?.[0]}
 	{onClick}
 />

package/components/apps/inputType.d.ts

@@ -1,6 +1,6 @@
 import type { ReadFileAs } from '../common/fileInput/model';
 import type { InlineScript } from './types';
-export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'tab-select';
+export type InputType = 'text' | 'textarea' | 'template' | 'number' | 'boolean' | 'select' | 'icon-select' | 'color' | 'date' | 'time' | 'datetime' | 'object' | 'array' | 'any' | 'labeledresource' | 'labeledselect' | 'tab-select';
 export type InputConnection = {
     componentId: string;
     path: string;
@@ -81,7 +81,7 @@ export type StaticOptions = {
         label: string;
     }[];
 };
-export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
+export type AppInput = AppInputSpec<'text', string> | AppInputSpec<'textarea', string> | AppInputSpec<'template', string> | AppInputSpec<'number', number> | AppInputSpec<'boolean', boolean> | AppInputSpec<'date', string> | AppInputSpec<'time', string> | AppInputSpec<'datetime', string> | AppInputSpec<'any', any> | AppInputSpec<'object', Record<string | number, any>> | AppInputSpec<'object', string> | (AppInputSpec<'select', string> & StaticOptions) | AppInputSpec<'icon-select', string> | AppInputSpec<'color', string> | AppInputSpec<'array', string[], 'text'> | AppInputSpec<'array', string[], 'textarea'> | AppInputSpec<'array', number[], 'number'> | AppInputSpec<'array', boolean[], 'boolean'> | AppInputSpec<'array', string[], 'date'> | AppInputSpec<'array', string[], 'time'> | AppInputSpec<'array', string[], 'datetime'> | AppInputSpec<'array', object[], 'object'> | (AppInputSpec<'array', string[], 'select'> & StaticOptions) | AppInputSpec<'array', object[], 'labeledresource'> | AppInputSpec<'array', object[], 'labeledselect'> | AppInputSpec<'labeledselect', object> | AppInputSpec<'labeledresource', object> | AppInputSpec<'array', object[], 'tab-select'>;
 export type RowAppInput = Extract<AppInput, {
     type: 'row';
 }>;

package/components/apps/rx.d.ts

@@ -2,10 +2,10 @@ import type { AppInput } from './inputType';
 import { type Writable } from 'svelte/store';
 export interface Subscriber<T> {
     id?: string;
-    next(v: T): any;
+    next(v: T): void;
 }
 export interface Observable<T> {
-    subscribe(x: Subscriber<T>): any;
+    subscribe(x: Subscriber<T>): void;
 }
 export interface Output<T> extends Observable<T> {
     set(x: T, force?: boolean): void;

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

@@ -12,7 +12,8 @@ export let gap = [10, 10];
 export let fastStart = false;
 export let throttleUpdate = 100;
 export let throttleResize = 100;
-export let onTopId = undefined;
+export let selectedIds;
+export let allIdsInPath;
 export let containerWidth = undefined;
 export let scroller = undefined;
 export let sensor = 20;
@@ -23,12 +24,6 @@ $: [gapX, gapY] = gap;
 let xPerPx = 0;
 let yPerPx = rowHeight;
 $: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
-const pointerup = (ev) => {
-    dispatch('pointerup', {
-        id: ev.detail.id,
-        cols: getComputedCols
-    });
-};
 const onResize = throttle(() => {
     items = specifyUndefinedColumns(items, getComputedCols, cols);
     dispatch('resize', {
@@ -84,23 +79,28 @@ const updateMatrix = ({ detail }) => {
         }
         citems = JSON.parse(JSON.stringify(initItems));
     }
-    let activeItem = getItemById(detail.id, citems);
-    if (activeItem) {
-        activeItem = {
-            ...activeItem,
-            [getComputedCols]: {
-                ...activeItem[getComputedCols],
-                ...detail.shadow
-            }
-        };
-        sortedItems = moveItem(activeItem, citems, getComputedCols, getItemById(detail.id, citems));
-        if (detail.onUpdate)
-            detail.onUpdate();
-        dispatch('change', {
-            unsafeItem: activeItem,
-            id: activeItem.id,
-            cols: getComputedCols
-        });
+    let nselectedIds = selectedIds ?? [];
+    if (detail.id && !selectedIds?.includes(detail.id)) {
+        nselectedIds = [detail.id, ...(selectedIds ?? [])];
+    }
+    sortedItems = citems;
+    for (let id of nselectedIds) {
+        let activeItem = getItemById(id, sortedItems);
+        if (activeItem) {
+            activeItem = {
+                ...activeItem,
+                [getComputedCols]: {
+                    ...activeItem[getComputedCols],
+                    ...shadows[id]
+                }
+            };
+            sortedItems = moveItem(activeItem, sortedItems, getComputedCols, getItemById(id, sortedItems));
+        }
+    }
+    for (let id of nselectedIds ?? []) {
+        if (detail.activate) {
+            moveResizes?.[id]?.inActivate();
+        }
     }
     if (isPointerUp) {
         dispatch('redraw', sortGridItemsPosition(JSON.parse(JSON.stringify(sortedItems)), getComputedCols));
@@ -115,15 +115,35 @@ const handleRepaint = ({ detail }) => {
         updateMatrix({ detail });
     }
 };
+let moveResizes = {};
+let shadows = {};
+export function handleMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.updateMove(JSON.parse(JSON.stringify(detail.cordDiff)), detail.eventY);
+        }
+    });
+    throttleMatrix({ detail: { isPointerUp: false, activate: false } });
+}
+export function handleInitMove({ detail }) {
+    Object.entries(moveResizes).forEach(([id, moveResize]) => {
+        if (selectedIds?.includes(id)) {
+            moveResize?.initmove();
+        }
+    });
+}
 </script>
 
 <div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
 	{#if xPerPx || !fastStart}
 		{#each sortedItems as item (item.id)}
 			<MoveResize
+				on:initmove={handleInitMove}
+				on:move={handleMove}
+				bind:shadow={shadows[item.id]}
+				bind:this={moveResizes[item.id]}
 				on:repaint={handleRepaint}
-				on:pointerup={pointerup}
-				onTop={item.id == onTopId}
+				onTop={Boolean(allIdsInPath?.includes(item.id))}
 				id={item.id}
 				{xPerPx}
 				{yPerPx}
@@ -140,16 +160,9 @@ const handleRepaint = ({ detail }) => {
 				{sensor}
 				container={scroller}
 				nativeContainer={container}
-				let:resizePointerDown
-				let:movePointerDown
 			>
 				{#if item[getComputedCols]}
-					<slot
-						{movePointerDown}
-						{resizePointerDown}
-						dataItem={item}
-						item={item[getComputedCols]}
-					/>
+					<slot dataItem={item} item={item[getComputedCols]} />
 				{/if}
 			</MoveResize>
 		{/each}
@@ -160,4 +173,7 @@ const handleRepaint = ({ detail }) => {
 	.svlt-grid-container {
 		position: relative;
 		width: 100%;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
 	}</style>

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

@@ -9,29 +9,28 @@ declare class __sveltets_Render<T> {
         fastStart?: boolean | undefined;
         throttleUpdate?: number | undefined;
         throttleResize?: number | undefined;
-        onTopId?: string | undefined;
+        selectedIds: string[] | undefined;
+        allIdsInPath: string[] | undefined;
         containerWidth?: number | undefined;
         scroller?: HTMLElement | undefined;
         sensor?: number | undefined;
         parentWidth?: number | undefined;
+        handleMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
+        handleInitMove?: (({ detail }: {
+            detail: any;
+        }) => void) | undefined;
     };
     events(): {
-        pointerup: CustomEvent<any>;
         resize: CustomEvent<any>;
         mount: CustomEvent<any>;
-        change: CustomEvent<any>;
         redraw: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots(): {
         default: {
-            movePointerDown: ({ clientX, clientY, target }: {
-                clientX: any;
-                clientY: any;
-                target: any;
-            }) => void;
-            resizePointerDown: (e: any) => void;
             dataItem: FilledItem<T>;
             item: Required<import("./types").ItemLayout>;
         };
@@ -41,5 +40,11 @@ export type GridProps<T> = ReturnType<__sveltets_Render<T>['props']>;
 export type GridEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
 export type GridSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 export default class Grid<T> extends SvelteComponentTyped<GridProps<T>, GridEvents<T>, GridSlots<T>> {
+    get handleMove(): ({ detail }: {
+        detail: any;
+    }) => void;
+    get handleInitMove(): ({ detail }: {
+        detail: any;
+    }) => void;
 }
 export {};