windmill-components 1.60.4 → 1.75.0

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

@@ -0,0 +1,434 @@
+<script>import { getContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { Loader2 } from 'lucide-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 pointerdown = false;
+export let render;
+const { staticOutputs, mode, connectingInput, app, errorByComponent } = getContext('AppViewerContext');
+let hover = false;
+let initializing = undefined;
+let componentContainerHeight = 0;
+// let component = JSON.parse(JSON.stringify({ conf }))
+// $: if (!deepEqual(component, pComponent)) {
+// 	component = JSON.parse(JSON.stringify(pComponent))
+// }
+$: componentWithErrors = Object.values($errorByComponent).map((e) => e.componentId);
+$: hasError = componentWithErrors.includes(component.id);
+</script>
+
+<div
+	on:pointerenter={() => (hover = true)}
+	on:pointerleave={() => (hover = false)}
+	class="h-full flex flex-col w-full component"
+>
+	{#if $mode !== 'preview'}
+		<ComponentHeader
+			{hover}
+			{pointerdown}
+			{component}
+			{selected}
+			on:delete
+			on:lock
+			on:expand
+			{locked}
+		/>
+	{/if}
+
+	<div
+		on:pointerdown={(e) => {
+			// Removed in https://github.com/windmill-labs/windmill/pull/1171
+			// In case of a bug, try stopping propagation on the native event
+			// and dispatch a custom event: `e?.stopPropagation(); dispatch('select');`
+			// if ($mode === 'preview') {
+			// 	e?.stopPropagation()
+			// }
+		}}
+		class={twMerge(
+			'h-full bg-white/40',
+			selected && $mode !== 'preview' ? 'border border-blue-500' : '',
+			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
+			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
+			component.softWrap || hasError ? '' : 'overflow-auto',
+			$mode != 'preview' ? 'cursor-pointer' : '',
+			'relative z-auto',
+			$app.css?.['app']?.['component']?.class
+		)}
+		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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'barchartcomponent'}
+			<AppBarChart
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'timeseriescomponent'}
+			<AppTimeseries
+				id={component.id}
+				customCss={component.customCss}
+				configuration={component.configuration}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'htmlcomponent'}
+			<AppHtml
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'vegalitecomponent'}
+			<VegaLiteHtml
+				configuration={component.configuration}
+				id={component.id}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'plotlycomponent'}
+			<PlotlyHtml
+				id={component.id}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'scatterchartcomponent'}
+			<AppScatterChart
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'piechartcomponent'}
+			<AppPieChart
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				componentInput={component.componentInput}
+				{render}
+			/>
+		{:else if component.type === 'tablecomponent'}
+			<AppTable
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				componentInput={component.componentInput}
+				bind:actionButtons={component.actionButtons}
+				{render}
+			/>
+		{:else if component.type === 'aggridcomponent'}
+			<AppAggridTable
+				id={component.id}
+				configuration={component.configuration}
+				bind:initializing
+				bind:staticOutputs={$staticOutputs[component.id]}
+				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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				recomputeIds={component.recomputeIds}
+				{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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'multiselectcomponent'}
+			<AppMultiSelect
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'formcomponent'}
+			<AppForm
+				id={component.id}
+				horizontalAlignment={component.horizontalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'textinputcomponent'}
+			<AppTextInput
+				id={component.id}
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'emailinputcomponent'}
+			<AppTextInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				inputType="email"
+				appCssKey="emailinputcomponent"
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'passwordinputcomponent'}
+			<AppTextInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				inputType="password"
+				appCssKey="passwordinputcomponent"
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'dateinputcomponent'}
+			<AppDateInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				inputType="date"
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'numberinputcomponent'}
+			<AppNumberInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'currencycomponent'}
+			<AppCurrencyInput
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'slidercomponent'}
+			<AppSliderInputs
+				verticalAlignment={component.verticalAlignment}
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'tabscomponent'}
+			<AppTabs
+				configuration={component.configuration}
+				id={component.id}
+				tabs={component.tabs}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'containercomponent'}
+			<AppContainer
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'verticalsplitpanescomponent'}
+			<AppSplitpanes
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				panes={component.panes}
+				{componentContainerHeight}
+				{render}
+			/>
+		{:else if component.type === 'horizontalsplitpanescomponent'}
+			<AppSplitpanes
+				configuration={component.configuration}
+				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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'fileinputcomponent'}
+			<AppFileInput
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'imagecomponent'}
+			<AppImage
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{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}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{:else if component.type === 'pdfcomponent'}
+			<AppPdf
+				configuration={component.configuration}
+				id={component.id}
+				customCss={component.customCss}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				{render}
+			/>
+		{/if}
+	</div>
+</div>
+{#if initializing}
+	<div
+		out:fade|local={{ duration: 200 }}
+		class="absolute inset-0 center-center flex-col bg-white text-gray-600 border"
+	>
+		<Loader2 class="animate-spin" size={16} />
+		<span class="text-xs mt-1">Loading</span>
+	</div>
+{/if}

package/components/apps/editor/{ComponentEditor.svelte.d.ts → component/Component.svelte.d.ts}

@@ -1,23 +1,25 @@
 import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from '../types';
+import type { AppComponent } from './components';
 declare const __propDef: {
     props: {
         component: AppComponent;
         selected: boolean;
         locked?: boolean | undefined;
         pointerdown?: boolean | undefined;
+        render: boolean;
     };
     events: {
         delete: CustomEvent<any>;
         lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
 };
-export type ComponentEditorProps = typeof __propDef.props;
-export type ComponentEditorEvents = typeof __propDef.events;
-export type ComponentEditorSlots = typeof __propDef.slots;
-export default class ComponentEditor extends SvelteComponentTyped<ComponentEditorProps, ComponentEditorEvents, ComponentEditorSlots> {
+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

@@ -0,0 +1,125 @@
+<script>import { getContext } from 'svelte';
+import { findGridItemParentId } from '../appUtils';
+const { app, selectedComponent, breakpoint, focusedGrid } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+function getSortedGridItemsOfChildren() {
+    if (!$focusedGrid) {
+        return sortGridItems($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItems($app.subgrids[`${$focusedGrid.parentComponentId}-${$focusedGrid.subGridIndex}`], $breakpoint);
+}
+function getSortedGridItemsOfGrid() {
+    if ($app.grid.find((item) => item.id === $selectedComponent)) {
+        return sortGridItems($app.grid, $breakpoint);
+    }
+    if (!$app.subgrids) {
+        return [];
+    }
+    return sortGridItems(Object.values($app.subgrids ?? {}).find((grid) => grid.find((item) => item.id === $selectedComponent)) ?? [], $breakpoint);
+}
+function left(event) {
+    if (!$componentControl[$selectedComponent]?.left?.()) {
+        const sortedGridItems = getSortedGridItemsOfGrid();
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        if (currentIndex !== -1 && currentIndex > 0) {
+            $selectedComponent = sortedGridItems[currentIndex - 1].id;
+        }
+    }
+    event.preventDefault();
+}
+function right(event) {
+    let r = $componentControl[$selectedComponent]?.right?.();
+    if (!r) {
+        const sortedGridItems = getSortedGridItemsOfGrid();
+        const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent);
+        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;
+        }
+        const sortedGridItems = sortGridItems(subgrid, $breakpoint);
+        if (sortedGridItems) {
+            $selectedComponent = sortedGridItems[0].id;
+        }
+        event.preventDefault();
+    }
+}
+function keydown(event) {
+    switch (event.key) {
+        case 'Escape':
+            $selectedComponent = undefined;
+            event.preventDefault();
+            break;
+        case 'ArrowUp': {
+            if (!$selectedComponent)
+                return;
+            let parentId = findGridItemParentId($app, $selectedComponent);
+            if (parentId) {
+                $selectedComponent = parentId;
+            }
+            else {
+                $selectedComponent = undefined;
+                $focusedGrid = undefined;
+            }
+            break;
+        }
+        case 'ArrowDown': {
+            down(event);
+            break;
+        }
+        case 'ArrowRight': {
+            right(event);
+            break;
+        }
+        case 'ArrowLeft': {
+            left(event);
+            break;
+        }
+        default:
+            break;
+    }
+}
+function sortGridItems(gridItems, breakpoint) {
+    return gridItems.sort((a, b) => {
+        const width = breakpoint === 'lg' ? 12 : 3;
+        const aX = a[width].x;
+        const aY = a[width].y;
+        const bX = b[width].x;
+        const bY = b[width].y;
+        if (aY < bY) {
+            return -1;
+        }
+        else if (aY > bY) {
+            return 1;
+        }
+        else {
+            if (aX < bX) {
+                return -1;
+            }
+            else if (aX > bX) {
+                return 1;
+            }
+            else {
+                return 0;
+            }
+        }
+    });
+}
+</script>
+
+<svelte:window on:keydown={keydown} />

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 {};

package/components/apps/editor/component/README.md

@@ -0,0 +1,15 @@
+# How to add new components
+
+1. [**`components.ts`**](./components.ts):
+   1. Create a type for the new component and add it to the `AppComponent` union
+      type
+   1. Add the component to the `components` record
+1. [**`sets.ts`**](./sets.ts):
+   1. Add the component to one of the component sets: `layout`, `buttons`,
+      `inputs` or `display` _(this controls which group the component will be
+      placed in in the **Insert** menu)_
+1. [**`Component.svelte`**](./Component.svelte):
+   1. Add the new component in the Svelte `if` statement
+1. [**`default-codes.ts`**](./default-codes.ts):
+   1. _(optional)_ Add the default code associated with the new component to the
+      `DEFAULT_CODES` record