windmill-components 1.85.0 → 1.87.0

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

@@ -1,417 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import ComponentHeader from '../ComponentHeader.svelte';
-import { AppBarChart, AppDisplayComponent, AppTable, AppText, AppButton, AppPieChart, AppSelect, AppCheckbox, AppTextInput, AppNumberInput, AppDateInput, AppForm, AppScatterChart, AppTimeseries, AppHtml, AppSliderInputs, AppFormButton, VegaLiteHtml, PlotlyHtml, AppRangeInput, AppTabs, AppIcon, AppCurrencyInput, AppDivider, AppFileInput, AppImage, AppContainer, AppAggridTable, AppDrawer, AppMap, AppSplitpanes, AppPdf } from '../../components';
-import AppMultiSelect from '../../components/inputs/AppMultiSelect.svelte';
-export let component;
-export let selected;
-export let locked = false;
-export let render;
-const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
-const editorContext = getContext('AppEditorContext');
-const movingcomponents = editorContext?.movingcomponents;
-$: ismoving =
-    movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
-let initializing = undefined;
-let componentContainerHeight = 0;
-</script>
-
-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<div
-	on:mouseover|stopPropagation={() => {
-		if (component.id !== $hoverStore) {
-			$hoverStore = component.id
-		}
-	}}
-	on:mouseout|stopPropagation={() => {
-		if ($hoverStore !== undefined) {
-			$hoverStore = undefined
-		}
-	}}
-	class="h-full flex flex-col w-full component {initializing ? 'overflow-hidden h-0' : ''}"
->
-	{#if $mode !== 'preview'}
-		<ComponentHeader
-			hover={$hoverStore === component.id}
-			{component}
-			{selected}
-			shouldHideActions={$connectingInput.opened}
-			on:delete
-			on:lock
-			on:expand
-			{locked}
-		/>
-	{/if}
-
-	{#if ismoving}
-		<div class="absolute -top-8 w-40 ">
-			<button
-				class="border p-0.5 text-xs"
-				on:click={() => {
-					$movingcomponents = undefined
-				}}
-			>
-				Cancel move
-			</button>
-		</div>
-	{/if}
-	<div
-		class={twMerge(
-			'h-full bg-white/40 outline-1',
-			$hoverStore === component.id && $mode !== 'preview'
-				? $connectingInput.opened
-					? 'outline outline-orange-600'
-					: 'outline outline-blue-600'
-				: '',
-			selected && $mode !== 'preview' ? 'outline outline-indigo-600' : '',
-			$mode != 'preview' ? 'cursor-pointer' : '',
-			'relative z-auto',
-			$app.css?.['app']?.['component']?.class,
-			ismoving ? 'animate-pulse' : ''
-		)}
-		style={$app.css?.['app']?.['component']?.style}
-		bind:clientHeight={componentContainerHeight}
-	>
-		{#if component.type === 'displaycomponent'}
-			<AppDisplayComponent
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'barchartcomponent'}
-			<AppBarChart
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'timeseriescomponent'}
-			<AppTimeseries
-				id={component.id}
-				customCss={component.customCss}
-				configuration={component.configuration}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'htmlcomponent'}
-			<AppHtml
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'vegalitecomponent'}
-			<VegaLiteHtml
-				configuration={component.configuration}
-				id={component.id}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'plotlycomponent'}
-			<PlotlyHtml
-				id={component.id}
-				configuration={component.configuration}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'scatterchartcomponent'}
-			<AppScatterChart
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'piechartcomponent'}
-			<AppPieChart
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'tablecomponent'}
-			<AppTable
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				actionButtons={component.actionButtons}
-				{render}
-			/>
-		{:else if component.type === 'aggridcomponent'}
-			<AppAggridTable
-				id={component.id}
-				configuration={component.configuration}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'textcomponent'}
-			<AppText
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				bind:initializing
-				componentInput={component.componentInput}
-				{render}
-			/>
-		{:else if component.type === 'buttoncomponent'}
-			<AppButton
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				componentInput={component.componentInput}
-				recomputeIds={component.recomputeIds}
-				bind:initializing
-				{render}
-			/>
-		{:else if component.type === 'selectcomponent' || component.type === 'resourceselectcomponent'}
-			<AppSelect
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'multiselectcomponent'}
-			<AppMultiSelect
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'formcomponent'}
-			<AppForm
-				id={component.id}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				componentInput={component.componentInput}
-				recomputeIds={component.recomputeIds}
-				{render}
-			/>
-		{:else if component.type === 'formbuttoncomponent'}
-			<AppFormButton
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				componentInput={component.componentInput}
-				recomputeIds={component.recomputeIds}
-				{render}
-			/>
-		{:else if component.type === 'checkboxcomponent'}
-			<AppCheckbox
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'textinputcomponent'}
-			<AppTextInput
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'textareainputcomponent'}
-			<AppTextInput
-				id={component.id}
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				customCss={component.customCss}
-				inputType="textarea"
-				appCssKey="textareainputcomponent"
-				{render}
-			/>
-		{:else if component.type === 'emailinputcomponent'}
-			<AppTextInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				inputType="email"
-				appCssKey="emailinputcomponent"
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'passwordinputcomponent'}
-			<AppTextInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				inputType="password"
-				appCssKey="passwordinputcomponent"
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'dateinputcomponent'}
-			<AppDateInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				inputType="date"
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'numberinputcomponent'}
-			<AppNumberInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'currencycomponent'}
-			<AppCurrencyInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'slidercomponent'}
-			<AppSliderInputs
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				bind:initializing
-				{render}
-			/>
-		{:else if component.type === 'horizontaldividercomponent'}
-			<AppDivider
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				position="horizontal"
-				{render}
-			/>
-		{:else if component.type === 'verticaldividercomponent'}
-			<AppDivider
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				position="vertical"
-				{render}
-			/>
-		{:else if component.type === 'rangecomponent'}
-			<AppRangeInput
-				verticalAlignment={component.verticalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-				bind:initializing
-			/>
-		{:else if component.type === 'tabscomponent' && component.tabs}
-			<AppTabs
-				configuration={component.configuration}
-				id={component.id}
-				tabs={component.tabs}
-				customCss={component.customCss}
-				{componentContainerHeight}
-				{render}
-			/>
-		{:else if component.type === 'containercomponent'}
-			<AppContainer
-				id={component.id}
-				customCss={component.customCss}
-				{componentContainerHeight}
-				{render}
-			/>
-		{:else if component.type === 'verticalsplitpanescomponent'}
-			<AppSplitpanes
-				id={component.id}
-				customCss={component.customCss}
-				panes={component.panes}
-				{componentContainerHeight}
-				{render}
-			/>
-		{:else if component.type === 'horizontalsplitpanescomponent'}
-			<AppSplitpanes
-				id={component.id}
-				customCss={component.customCss}
-				panes={component.panes}
-				{componentContainerHeight}
-				horizontal={true}
-				{render}
-			/>
-		{:else if component.type === 'iconcomponent'}
-			<AppIcon
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'fileinputcomponent'}
-			<AppFileInput
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'imagecomponent'}
-			<AppImage
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'drawercomponent'}
-			<AppDrawer
-				verticalAlignment={component.verticalAlignment}
-				horizontalAlignment={component.horizontalAlignment}
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'mapcomponent'}
-			<AppMap
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{:else if component.type === 'pdfcomponent'}
-			<AppPdf
-				configuration={component.configuration}
-				id={component.id}
-				customCss={component.customCss}
-				{render}
-			/>
-		{/if}
-	</div>
-</div>
-{#if initializing}
-	<div class="absolute inset-0 center-center flex-col bg- border animate-skeleton" />
-{/if}

package/components/apps/editor/component/Component.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './components';
-declare const __propDef: {
-    props: {
-        component: AppComponent;
-        selected: boolean;
-        locked?: boolean | undefined;
-        render: boolean;
-    };
-    events: {
-        delete: CustomEvent<any>;
-        lock: CustomEvent<any>;
-        expand: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComponentProps = typeof __propDef.props;
-export type ComponentEvents = typeof __propDef.events;
-export type ComponentSlots = typeof __propDef.slots;
-export default class Component extends SvelteComponentTyped<ComponentProps, ComponentEvents, ComponentSlots> {
-}
-export {};

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

@@ -1,201 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { findGridItem, findGridItemParentGrid, getAllSubgridsAndComponentIds, insertNewGridItem } from '../appUtils';
-import { push } from '../../../../history';
-import { sendUserToast } from '../../../../utils';
-import { gridColumns } from '../../gridUtils';
-const { app, selectedComponent, worldStore, focusedGrid, componentControl } = getContext('AppViewerContext');
-const { history, movingcomponents } = getContext('AppEditorContext');
-let tempGridItems = undefined;
-let copiedGridItems = undefined;
-function getSortedGridItemsOfChildren() {
-    if (!$focusedGrid) {
-        return $app.grid;
-    }
-    if (!$app.subgrids) {
-        return [];
-    }
-    return $app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`] ?? [];
-}
-function getGridItems() {
-    if ($app.grid.find((item) => item.id === $selectedComponent?.[0])) {
-        return $app.grid;
-    }
-    if (!$app.subgrids) {
-        return [];
-    }
-    return (Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent?.[0])) ?? []);
-}
-function left(event) {
-    if (!$componentControl[$selectedComponent?.[0] ?? '']?.left?.()) {
-        const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
-        if (currentIndex !== -1 && currentIndex > 0) {
-            const left = sortedGridItems[currentIndex - 1];
-            if (left.data.type === 'tablecomponent' && left.data.actionButtons.length >= 1) {
-                $selectedComponent = [left.data.actionButtons[left.data.actionButtons.length - 1].id];
-            }
-            else {
-                $selectedComponent = [left.id];
-            }
-        }
-    }
-    event.preventDefault();
-}
-function right(event) {
-    let r = $componentControl[$selectedComponent?.[0] ?? '']?.right?.();
-    if (typeof r === 'string') {
-        $selectedComponent = [r];
-        r = $componentControl[r]?.right?.(true);
-    }
-    if (!r) {
-        const sortedGridItems = getGridItems();
-        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent?.[0] ?? '');
-        if (currentIndex !== -1 && currentIndex < sortedGridItems.length - 1) {
-            $selectedComponent = [sortedGridItems[currentIndex + 1].id];
-        }
-    }
-    event.preventDefault();
-}
-function down(event) {
-    if (!$focusedGrid) {
-        $selectedComponent = [getSortedGridItemsOfChildren()[0]?.id];
-        event.preventDefault();
-    }
-    else if ($app.subgrids) {
-        const index = $focusedGrid?.subGridIndex ?? 0;
-        const subgrid = $app.subgrids[`${$selectedComponent}-${index}`];
-        if (!subgrid || subgrid.length === 0) {
-            return;
-        }
-        if (subgrid) {
-            $selectedComponent = [subgrid[0].id];
-        }
-        event.preventDefault();
-    }
-}
-function handleEscape(event) {
-    $selectedComponent = undefined;
-    $focusedGrid = undefined;
-    event.preventDefault();
-}
-function handleArrowUp(event) {
-    if (!$selectedComponent)
-        return;
-    let parentId = findGridItemParentGrid($app, $selectedComponent?.[0])?.split('-')[0];
-    if (parentId) {
-        $selectedComponent = [parentId];
-    }
-    else {
-        $selectedComponent = undefined;
-        $focusedGrid = undefined;
-    }
-}
-function handleCopy(event) {
-    if (!$selectedComponent) {
-        return;
-    }
-    tempGridItems = undefined;
-    copiedGridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
-}
-function handleCut(event) {
-    if (!$selectedComponent) {
-        return;
-    }
-    $movingcomponents = JSON.parse(JSON.stringify($selectedComponent));
-    push(history, $app);
-    let gridItems = $selectedComponent
-        .map((x) => findGridItem($app, x))
-        .filter((x) => x != undefined);
-    copiedGridItems = gridItems;
-    if (!gridItems) {
-        return;
-    }
-    // Store the grid item in a temp variable so we can paste it later
-    tempGridItems = gridItems;
-}
-function handlePaste(event) {
-    push(history, $app);
-    $movingcomponents = undefined;
-    if (tempGridItems != undefined) {
-        for (let tempGridItem of tempGridItems) {
-            if ($focusedGrid &&
-                getAllSubgridsAndComponentIds($app, tempGridItem.data)[0].includes(`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`)) {
-                sendUserToast('Cannot paste a component into itself', true);
-                return;
-            }
-            let parentGrid = findGridItemParentGrid($app, tempGridItem.id);
-            if (parentGrid) {
-                $app.subgrids &&
-                    ($app.subgrids[parentGrid] = $app.subgrids[parentGrid].filter((item) => item.id !== tempGridItem?.id));
-            }
-            else {
-                $app.grid = $app.grid.filter((item) => item.id !== tempGridItem?.id);
-            }
-            const gridItem = tempGridItem;
-            insertNewGridItem($app, (id) => ({ ...gridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, gridItem[column]])), tempGridItem.id);
-        }
-        copiedGridItems = tempGridItems;
-        $selectedComponent = tempGridItems.map((x) => x.id);
-        tempGridItems = undefined;
-    }
-    else if (copiedGridItems) {
-        let nitems = [];
-        for (let copiedGridItem of copiedGridItems) {
-            nitems.push(insertNewGridItem($app, (id) => ({ ...copiedGridItem.data, id }), $focusedGrid, Object.fromEntries(gridColumns.map((column) => [column, copiedGridItem[column]]))));
-        }
-        $selectedComponent = nitems.map((x) => x);
-    }
-    $worldStore = $worldStore;
-    $app = $app;
-}
-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)) {
-        return;
-    }
-    switch (event.key) {
-        case 'Escape':
-            handleEscape(event);
-            break;
-        case 'ArrowUp': {
-            handleArrowUp(event);
-            break;
-        }
-        case 'ArrowDown': {
-            down(event);
-            break;
-        }
-        case 'ArrowRight': {
-            right(event);
-            break;
-        }
-        case 'ArrowLeft': {
-            left(event);
-            break;
-        }
-        case 'c':
-            if (event.ctrlKey || event.metaKey) {
-                handleCopy(event);
-            }
-            break;
-        case 'v':
-            if (event.ctrlKey || event.metaKey) {
-                handlePaste(event);
-            }
-            break;
-        case 'x':
-            if (event.ctrlKey || event.metaKey) {
-                handleCut(event);
-            }
-            break;
-        default:
-            break;
-    }
-}
-</script>
-
-<svelte:window on:keydown={keydown} />