windmill-components 1.89.1 → 1.103.1

package/dist/components/apps/editor/GridViewer.svelte

@@ -1,91 +0,0 @@
-<script>import { onMount, createEventDispatcher } from 'svelte';
-import { getColumn, throttle } from '../svelte-grid/utils/other';
-import { getContainerHeight } from '../svelte-grid/utils/container';
-import { specifyUndefinedColumns } from '../svelte-grid/utils/item';
-const dispatch = createEventDispatcher();
-export let items;
-export let rowHeight;
-export let cols;
-export let gap = [10, 10];
-export let throttleUpdate = 100;
-export let allIdsInPath = undefined;
-export let containerWidth = undefined;
-export let parentWidth = undefined;
-let getComputedCols;
-let container;
-$: [gapX, gapY] = gap;
-let xPerPx = 0;
-let yPerPx = rowHeight;
-$: containerHeight = getContainerHeight(items, yPerPx, getComputedCols);
-const onResize = throttle(() => {
-    items = specifyUndefinedColumns(items, getComputedCols, cols);
-    dispatch('resize', {
-        cols: getComputedCols,
-        xPerPx,
-        yPerPx,
-        width: containerWidth
-    });
-}, throttleUpdate);
-onMount(() => {
-    const sizeObserver = new ResizeObserver((entries) => {
-        requestAnimationFrame(() => {
-            let width = entries[0].contentRect.width;
-            if (width === containerWidth)
-                return;
-            getComputedCols = getColumn(parentWidth ?? width, cols);
-            xPerPx = width / getComputedCols;
-            if (!containerWidth) {
-                items = specifyUndefinedColumns(items, getComputedCols, cols);
-                dispatch('mount', {
-                    cols: getComputedCols,
-                    xPerPx,
-                    yPerPx // same as rowHeight
-                });
-            }
-            else {
-                onResize();
-            }
-            containerWidth = width;
-        });
-    });
-    sizeObserver.observe(container);
-    return () => sizeObserver.disconnect();
-});
-</script>
-
-<div class="svlt-grid-container" style="height: {containerHeight}px" bind:this={container}>
-	{#if xPerPx}
-		{#each items as item (item.id)}
-			{@const onTop = allIdsInPath?.includes(item.id)}
-			{@const width =
-				Math.min(getComputedCols, item[getComputedCols] && item[getComputedCols].w) * xPerPx -
-				gapX * 2}
-			{@const height = (item[getComputedCols] && item[getComputedCols].h) * yPerPx - gapY * 2}
-			{@const top = (item[getComputedCols] && item[getComputedCols].y) * yPerPx + gapY}
-			{@const left = (item[getComputedCols] && item[getComputedCols].x) * xPerPx + gapX}
-			<div
-				class="svlt-grid-item"
-				style="width: {width}px; height:{height}px; {onTop
-					? 'z-index: 1000;'
-					: ''} top: {top}px; left: {left}px;"
-			>
-				{#if item[getComputedCols]}
-					<slot dataItem={item} item={item[getComputedCols]} />
-				{/if}
-			</div>
-		{/each}
-	{/if}
-</div>
-
-<style>
-	.svlt-grid-container {
-		position: relative;
-		width: 100%;
-	}
-	.svlt-grid-item {
-		touch-action: none;
-		position: absolute;
-		will-change: auto;
-		backface-visibility: hidden;
-		-webkit-backface-visibility: hidden;
-	}</style>

package/dist/components/apps/editor/GridViewer.svelte.d.ts

@@ -1,32 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { FilledItem } from '../svelte-grid/types';
-declare class __sveltets_Render<T> {
-    props(): {
-        items: FilledItem<T>[];
-        rowHeight: number;
-        cols: [number, number][];
-        gap?: number[] | undefined;
-        throttleUpdate?: number | undefined;
-        allIdsInPath?: string[] | undefined;
-        containerWidth?: number | undefined;
-        parentWidth?: number | undefined;
-    };
-    events(): {
-        resize: CustomEvent<any>;
-        mount: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots(): {
-        default: {
-            dataItem: FilledItem<T>;
-            item: Required<import("../svelte-grid/types").ItemLayout>;
-        };
-    };
-}
-export type GridViewerProps<T> = ReturnType<__sveltets_Render<T>['props']>;
-export type GridViewerEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
-export type GridViewerSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
-export default class GridViewer<T> extends SvelteComponentTyped<GridViewerProps<T>, GridViewerEvents<T>, GridViewerSlots<T>> {
-}
-export {};

package/dist/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,107 +0,0 @@
-<script>import Dropdown from '../../Dropdown.svelte';
-import { ChevronDown, RefreshCw } from 'lucide-svelte';
-import { getContext, onMount } from 'svelte';
-import Button from '../../common/button/Button.svelte';
-import { allItems } from '../utils';
-const { runnableComponents, app, initialized } = getContext('AppViewerContext');
-let loading = false;
-let timeout = undefined;
-let interval = undefined;
-let shouldRefresh = false;
-let firstLoad = false;
-$: !firstLoad &&
-    $initialized.initializedComponents?.length ==
-        allItems($app.grid, $app.subgrids).length + $app.hiddenInlineScripts.length &&
-    refresh();
-$: componentNumber = Object.values($runnableComponents).filter((x) => x.autoRefresh).length;
-function onClick(stopAfterClear = true) {
-    if (timeout) {
-        clearInterval(timeout);
-        timeout = undefined;
-        shouldRefresh = false;
-        if (stopAfterClear)
-            return;
-    }
-    refresh();
-    if (interval) {
-        shouldRefresh = true;
-        timeout = setInterval(refresh, interval);
-    }
-}
-function setInter(inter) {
-    interval = inter;
-    onClick(!inter);
-}
-function refresh() {
-    let isFirstLoad = false;
-    if (!firstLoad) {
-        $initialized.initialized = true;
-        firstLoad = true;
-        isFirstLoad = true;
-    }
-    loading = true;
-    Promise.all(Object.keys($runnableComponents).map((id) => {
-        if (!$runnableComponents?.[id]?.autoRefresh &&
-            (!isFirstLoad || !$runnableComponents?.[id]?.refreshOnStart)) {
-            return;
-        }
-        return $runnableComponents?.[id]?.cb?.();
-    })).finally(() => {
-        loading = false;
-    });
-}
-function visChange() {
-    if (document.visibilityState === 'hidden') {
-        if (timeout) {
-            clearInterval(timeout);
-            timeout = undefined;
-        }
-    }
-    else if (shouldRefresh) {
-        timeout = setInterval(refresh, interval);
-    }
-}
-onMount(() => {
-    document.addEventListener('visibilitychange', visChange);
-    // setTimeout(() => refresh(), 1000)
-    return () => {
-        document.removeEventListener('visibilitychange', visChange);
-        if (timeout)
-            clearInterval(timeout);
-    };
-});
-</script>
-
-<div class="flex items-center">
-	<Button
-		disabled={componentNumber == 0}
-		on:click={() => onClick()}
-		color={timeout ? 'blue' : 'light'}
-		variant={timeout ? 'contained' : 'border'}
-		size="xs"
-		btnClasses="!rounded-r-none {timeout ? '!border !border-blue-500' : ''}"
-		title="Refresh {componentNumber} component{componentNumber > 1 ? 's' : ''} {interval
-			? `every ${interval / 1000} seconds`
-			: 'once'}"
-	>
-		<RefreshCw class={loading ? 'animate-spin' : ''} size={16} /> &nbsp;({componentNumber})
-	</Button>
-	<Dropdown
-		btnClasses="!rounded-l-none !border-l-0 min-w-[4rem] !px-2"
-		color={timeout ? 'blue' : 'light'}
-		variant="border"
-		dropdownItems={[
-			{
-				displayName: 'Once',
-				action: () => setInter(undefined)
-			},
-			...[1, 2, 3, 4, 5, 6].map((i) => ({
-				displayName: `Every ${i * 5} seconds`,
-				action: () => setInter(i * 5000)
-			}))
-		]}
-	>
-		<span class="grow text center">{interval ? `${interval / 1000}s` : 'once'}</span>
-		<ChevronDown class="ml-0.5" size={14} />
-	</Dropdown>
-</div>

package/dist/components/apps/editor/RecomputeAllComponents.svelte.d.ts

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

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

@@ -1,119 +0,0 @@
-<script>import Toggle from '../../Toggle.svelte';
-import Tooltip from '../../Tooltip.svelte';
-import { getContext } from 'svelte';
-import { allItems } from '../utils';
-import { findGridItem } from './appUtils';
-import PanelSection from './settingsPanel/common/PanelSection.svelte';
-import ComponentPanel from './settingsPanel/ComponentPanel.svelte';
-import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-import BackgroundScriptTriggerList from './settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte';
-const { selectedComponent, app, stateId } = getContext('AppViewerContext');
-$: hiddenInlineScript = $app?.hiddenInlineScripts
-    ?.map((x, i) => ({ script: x, index: i }))
-    .find(({ script, index }) => $selectedComponent?.includes(`bg_${index}`));
-$: componentSettings = findComponentSettings($app, $selectedComponent?.[0]);
-$: tableActionSettings = findTableActionSettings($app, $selectedComponent?.[0]);
-function findTableActionSettings(app, id) {
-    return allItems(app.grid, app.subgrids)
-        .map((x) => {
-        if (x?.data?.type === 'tablecomponent') {
-            if (x?.data?.actionButtons) {
-                const tableAction = x.data.actionButtons.find((x) => x.id === id);
-                if (tableAction) {
-                    return { item: { data: tableAction, id: tableAction.id }, parent: x.data.id };
-                }
-            }
-        }
-    })
-        .find((x) => x);
-}
-function findComponentSettings(app, id) {
-    if (!id)
-        return undefined;
-    if (app?.grid) {
-        const gridItem = app.grid.find((x) => x.data?.id === id);
-        if (gridItem) {
-            return { item: gridItem, parent: undefined };
-        }
-    }
-    if (app?.subgrids) {
-        for (const key of Object.keys(app.subgrids ?? {})) {
-            const gridItem = app.subgrids[key].find((x) => x.data?.id === id);
-            if (gridItem) {
-                return { item: gridItem, parent: key };
-            }
-        }
-    }
-    return undefined;
-}
-</script>
-
-{#if componentSettings}
-	{#key componentSettings?.item?.id}
-		<ComponentPanel bind:componentSettings />
-	{/key}
-{:else if tableActionSettings}
-	{#key tableActionSettings?.item?.data?.id}
-		<ComponentPanel
-			noGrid
-			rowColumns
-			bind:componentSettings={tableActionSettings}
-			duplicateMoveAllowed={false}
-			onDelete={() => {
-				if (tableActionSettings) {
-					const parent = findGridItem($app, tableActionSettings.parent)
-					if (!parent) return
-
-					if (parent.data.type === 'tablecomponent') {
-						parent.data.actionButtons = parent.data.actionButtons.filter(
-							(x) => x.id !== tableActionSettings?.item.id
-						)
-					}
-				}
-			}}
-		/>
-	{/key}
-{:else if hiddenInlineScript}
-	<div class="min-h-full flex flex-col divide-y">
-		<PanelSection title={`Configuration`}>
-			<div class="flex items-center">
-				<Toggle
-					bind:checked={hiddenInlineScript.script.autoRefresh}
-					options={{ right: 'Run on start and app refresh' }}
-				/>
-				<Tooltip>
-					You may want to disable this so that the background script is only triggered by changes to
-					other values or triggered by another computation on a button (See 'Recompute Others')
-				</Tooltip>
-			</div>
-		</PanelSection>
-
-		<div class="p-2">
-			{#if hiddenInlineScript.script.inlineScript}
-				<BackgroundScriptTriggerList
-					fields={hiddenInlineScript.script.fields}
-					autoRefresh={hiddenInlineScript.script.autoRefresh}
-					id={`bg_${hiddenInlineScript.index}`}
-					bind:recomputeOnInputChanged={hiddenInlineScript.script.recomputeOnInputChanged}
-					bind:doNotRecomputeOnInputChanged={hiddenInlineScript.script.doNotRecomputeOnInputChanged}
-					bind:inlineScript={hiddenInlineScript.script.inlineScript}
-				/>
-			{:else}
-				<span class="text-gray-600 text-xs">No script defined</span>
-			{/if}
-		</div>
-		{#if Object.keys(hiddenInlineScript.script.fields).length > 0}
-			<PanelSection title={`Inputs`}>
-				{#key $stateId}
-					<InputsSpecsEditor
-						id={`bg_${hiddenInlineScript.index}`}
-						shouldCapitalize={false}
-						bind:inputSpecs={hiddenInlineScript.script.fields}
-						userInputEnabled={false}
-					/>
-				{/key}
-			</PanelSection>
-		{/if}
-		<div class="grow shrink" />
-	</div>
-{/if}

package/dist/components/apps/editor/SettingsPanel.svelte.d.ts

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

package/dist/components/apps/editor/SubGridEditor.svelte

@@ -1,144 +0,0 @@
-<script>import { push } from '../../../history';
-import { classNames } from '../../../utils';
-import { createEventDispatcher, getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
-import Grid from '../svelte-grid/Grid.svelte';
-import { expandGriditem, findGridItem, selectId } from './appUtils';
-import Component from './component/Component.svelte';
-import ComponentWrapper from './component/ComponentWrapper.svelte';
-import GridViewer from './GridViewer.svelte';
-export let containerHeight = undefined;
-export let containerWidth = undefined;
-let classes = '';
-export { classes as class };
-export let style = '';
-export let noPadding = false;
-export let noYPadding = false;
-export let subGridId;
-export let visible = true;
-export let id;
-export let shouldHighlight = true;
-const dispatch = createEventDispatcher();
-const { app, connectingInput, selectedComponent, focusedGrid, mode, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
-const editorContext = getContext('AppEditorContext');
-$: highlight = id === $focusedGrid?.parentComponentId && shouldHighlight;
-const onpointerdown = (e) => {
-    dispatch('focus');
-};
-function selectComponent(e, id) {
-    if (!$connectingInput.opened) {
-        selectId(e, id, selectedComponent, $app);
-    }
-}
-function lock(dataItem) {
-    let fComponent = findGridItem($app, dataItem.id);
-    if (fComponent) {
-        fComponent = toggleFixed(fComponent);
-    }
-    $app = $app;
-}
-let container = undefined;
-</script>
-
-<div
-	class="translate-x-0 translate-y-0 relative w-full subgrid {visible
-		? 'visible'
-		: 'invisible h-0 overflow-hidden'} 	"
-	bind:this={container}
-	on:pointerdown={onpointerdown}
->
-	<div
-		class={twMerge(
-			'overflow-auto',
-			noYPadding ? '' : 'py-2',
-			classes ?? '',
-			noPadding ? 'px-0' : 'px-2'
-		)}
-		style="height: {containerHeight}px; {style ?? ''}"
-	>
-		{#if $mode !== 'preview'}
-			<div class={highlight ? 'border-gray-400  border border-dashed min-h-full' : ''}>
-				<Grid
-					allIdsInPath={$allIdsInPath}
-					items={$app.subgrids?.[subGridId] ?? []}
-					on:redraw={(e) => {
-						push(editorContext?.history, $app)
-						if ($app.subgrids) {
-							$app.subgrids[subGridId] = e.detail
-						}
-					}}
-					selectedIds={$selectedComponent}
-					let:dataItem
-					rowHeight={36}
-					cols={columnConfiguration}
-					fastStart={true}
-					gap={[4, 2]}
-					scroller={container}
-					parentWidth={$parentWidth - 17}
-					{containerWidth}
-				>
-					<ComponentWrapper
-						id={dataItem.id}
-						type={dataItem.data.type}
-						class={classNames(
-							'h-full w-full center-center',
-							$selectedComponent?.includes(dataItem.id) ? 'active-grid-item' : '',
-							'top-0'
-						)}
-					>
-						<Component
-							render={visible}
-							component={dataItem.data}
-							selected={Boolean($selectedComponent?.includes(dataItem.id))}
-							locked={isFixed(dataItem)}
-							on:lock={() => lock(dataItem)}
-							on:expand={() => {
-								const parentGridItem = findGridItem($app, id)
-
-								if (!parentGridItem) {
-									return
-								}
-
-								$selectedComponent = [dataItem.id]
-								push(editorContext?.history, $app)
-
-								expandGriditem(
-									$app.subgrids?.[subGridId] ?? [],
-									dataItem.id,
-									$breakpoint,
-									parentGridItem
-								)
-								$app = $app
-							}}
-						/>
-					</ComponentWrapper>
-				</Grid>
-			</div>
-		{:else}
-			<GridViewer
-				allIdsInPath={$allIdsInPath}
-				items={$app.subgrids?.[subGridId] ?? []}
-				let:dataItem
-				rowHeight={36}
-				cols={columnConfiguration}
-				gap={[4, 2]}
-				parentWidth={$parentWidth - 17}
-				{containerWidth}
-			>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div
-					on:pointerdown|stopPropagation={(e) => selectComponent(e, dataItem.id)}
-					class={classNames('h-full w-full center-center', 'top-0')}
-				>
-					<Component
-						render={visible}
-						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
-						locked={isFixed(dataItem)}
-					/>
-				</div>
-			</GridViewer>
-		{/if}
-	</div>
-</div>

package/dist/components/apps/editor/SubGridEditor.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        containerHeight?: number | undefined;
-        containerWidth?: number | undefined;
-        class?: string | undefined;
-        style?: string | undefined;
-        noPadding?: boolean | undefined;
-        noYPadding?: boolean | undefined;
-        subGridId: string;
-        visible?: boolean | undefined;
-        id: string;
-        shouldHighlight?: boolean | undefined;
-    };
-    events: {
-        focus: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SubGridEditorProps = typeof __propDef.props;
-export type SubGridEditorEvents = typeof __propDef.events;
-export type SubGridEditorSlots = typeof __propDef.slots;
-export default class SubGridEditor extends SvelteComponentTyped<SubGridEditorProps, SubGridEditorEvents, SubGridEditorSlots> {
-}
-export {};

package/dist/components/apps/editor/appUtils.d.ts

@@ -1,75 +0,0 @@
-import type { App, BaseAppComponent, ConnectingInput, EditorBreakpoint, FocusedGrid, GridItem } from '../types';
-import { components, type AppComponent, type BaseComponent } from './component';
-import type { Output, World } from '../rx';
-import type { FilledItem } from '../svelte-grid/types';
-import type { EvalAppInput, StaticAppInput } from '../inputType';
-import { type Writable } from 'svelte/store';
-export declare function dfs(grid: GridItem[], id: string, subgrids: Record<string, GridItem[]>): string[] | undefined;
-export declare function selectId(e: PointerEvent, id: string, selectedComponent: Writable<string[] | undefined>, app: App): void;
-export declare function findGridItemParentGrid(app: App, id: string): string | undefined;
-export declare function allsubIds(app: App, parentId: string): string[];
-export declare function findGridItem(app: App, id: string): GridItem | undefined;
-export declare function getNextGridItemId(app: App): string;
-export declare function getAllRecomputeIdsForComponent(app: App, id: string | undefined): string[];
-export declare function createNewGridItem(grid: GridItem[], id: string, data: AppComponent, columns?: Record<number, any>): GridItem;
-export declare function getGridItems(app: App, focusedGrid: FocusedGrid | undefined): GridItem[];
-export declare function appComponentFromType<T extends keyof typeof components>(type: T): (id: string) => BaseAppComponent & BaseComponent<T>;
-export declare function insertNewGridItem(app: App, builddata: (id: string) => AppComponent, focusedGrid: FocusedGrid | undefined, columns?: Record<string, any>, keepId?: string): string;
-export declare function getAllSubgridsAndComponentIds(app: App, component: AppComponent): [string[], string[]];
-export declare function deleteGridItem(app: App, component: AppComponent, parent: string | undefined, shouldKeepSubGrid: boolean): string[];
-type AvailableSpace = {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-};
-export declare function findAvailableSpace(grid: GridItem[], gridItem: GridItem, editorBreakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): AvailableSpace | undefined;
-type Outputtable<Type> = {
-    -readonly [Property in keyof Type]: Output<Type[Property]>;
-};
-export declare function initOutput<I extends Record<string, any>>(world: World, id: string, init: I): Outputtable<I>;
-export declare function initConfig<T extends Record<string, StaticAppInput | EvalAppInput | {
-    type: 'oneOf';
-    selected: string;
-    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
-}>>(r: T, configuration?: Record<string, StaticAppInput | {
-    type: 'oneOf';
-    selected: string;
-    configuration: Record<string, Record<string, StaticAppInput | EvalAppInput>>;
-} | any>): {
-    [Property in keyof T]: T[Property] extends StaticAppInput ? T[Property]['value'] | undefined : T[Property] extends {
-        type: 'oneOf';
-    } ? {
-        type: 'oneOf';
-        selected: keyof T[Property]['configuration'];
-        configuration: {
-            [Choice in keyof T[Property]['configuration']]: {
-                [IT in keyof T[Property]['configuration'][Choice]]: T[Property]['configuration'][Choice][IT] extends StaticAppInput ? T[Property]['configuration'][Choice][IT]['value'] | undefined : undefined;
-            };
-        };
-    } : undefined;
-};
-export declare function expandGriditem(grid: GridItem[], id: string, $breakpoint: EditorBreakpoint, parentGridItem?: GridItem | undefined): void;
-export declare function sortGridItemsPosition<T>(gridItems: FilledItem<T>[], width: number): FilledItem<T>[];
-export declare function connectInput(connectingInput: ConnectingInput, componentId: string, path: string): ConnectingInput;
-export declare function recursivelyFilterKeyInJSON(json: object, search: string, extraSearch?: string | undefined): object;
-export declare function clearErrorByComponentId(id: string, errorByComponent: Record<string, {
-    error: string;
-    componentId: string;
-}>): {};
-export declare function clearJobsByComponentId(id: string, jobs: {
-    job: string;
-    component: string;
-}[]): {
-    job: string;
-    component: string;
-}[];
-export declare function getErrorFromLatestResult(id: string, errorByComponent: Record<string, // job id
-{
-    error: string;
-    componentId: string;
-}>, jobs: {
-    job: string;
-    component: string;
-}[]): string | undefined;
-export {};