windmill-components 1.86.0 → 1.89.0

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

@@ -0,0 +1,438 @@
+<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;
+let inlineEditorOpened = false;
+</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:lock
+			on:expand
+			{locked}
+			{inlineEditorOpened}
+			hasInlineEditor={component.type === 'textcomponent' &&
+				component.componentInput &&
+				component.componentInput.type !== 'connected'}
+			on:triggerInlineEditor={() => {
+				inlineEditorOpened = !inlineEditorOpened
+			}}
+		/>
+	{/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
+				bind:editorMode={inlineEditorOpened}
+				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}
+	<!-- 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="absolute inset-0 center-center flex-col bg- border animate-skeleton"
+	/>
+{/if}

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

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from './components';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+        locked?: boolean | undefined;
+        render: boolean;
+    };
+    events: {
+        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/package/components/apps/editor/component/ComponentNavigation.svelte

@@ -0,0 +1,200 @@
+<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, 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);
+    }
+    $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} />

package/package/components/apps/editor/component/ComponentNavigation.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 ComponentNavigationProps = typeof __propDef.props;
+export type ComponentNavigationEvents = typeof __propDef.events;
+export type ComponentNavigationSlots = typeof __propDef.slots;
+export default class ComponentNavigation extends SvelteComponentTyped<ComponentNavigationProps, ComponentNavigationEvents, ComponentNavigationSlots> {
+}
+export {};