windmill-components 1.52.0 → 1.55.0

package/components/apps/editor/ComponentEditor.svelte

@@ -4,61 +4,82 @@ import BarChartComponent from '../components/dataDisplay/AppBarChart.svelte';
 import DisplayComponent from '../components/DisplayComponent.svelte';
 import TableComponent from '../components/dataDisplay/AppTable.svelte';
 import TextComponent from '../components/dataDisplay/AppText.svelte';
-import { displayData } from '../utils';
 import ButtonComponent from '../components/buttons/AppButton.svelte';
 import PieChartComponent from '../components/dataDisplay/AppPieChart.svelte';
 import CheckboxComponent from '../components/selectInputs/AppCheckbox.svelte';
+import TextInputComponent from '../components/textInputs/AppTextInput.svelte';
+import NumberInputComponent from '../components/numberInputs/AppNumberInput.svelte';
+import ComponentHeader from './ComponentHeader.svelte';
+import AppForm from '../components/form/AppForm.svelte';
 export let component;
 export let selected;
-const { staticOutputs, mode } = getContext('AppEditorContext');
+$: shouldDisplayOverlay = selected && $mode !== 'preview';
+const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
 </script>
 
 <div class="h-full flex flex-col w-full">
-	{#if selected}
-		<span
-			class={classNames(
-				'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5',
-				selected ? 'bg-indigo-500' : 'bg-gray-500'
-			)}
-		>
-			{displayData[component.type].name} - {component.id}
-		</span>
+	{#if shouldDisplayOverlay}
+		<ComponentHeader {component} {selected} on:delete />
 	{/if}
 
 	<div
 		class={classNames(
 			' border overflow-auto cursor-pointer  h-full bg-white',
-			selected ? 'border-blue-500' : 'border-white',
-			$mode === 'preview' ? 'border-white' : 'hover:border-blue-500',
-			component.card ? 'p-2' : ''
+			shouldDisplayOverlay ? 'border-blue-500' : 'border-white',
+			!selected && $mode !== 'preview' && !component.card ? 'border-gray-100' : '',
+			$mode !== 'preview' && !$connectingInput.opened ? 'hover:border-blue-500' : '',
+			component.card ? 'p-2' : '',
+			'relative'
 		)}
 	>
 		{#if component.type === 'displaycomponent'}
-			<DisplayComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<DisplayComponent
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'barchartcomponent'}
 			<BarChartComponent
 				{...component}
-				bind:inputs={component.inputs}
+				bind:componentInput={component.componentInput}
 				bind:staticOutputs={$staticOutputs[component.id]}
 			/>
 		{:else if component.type === 'piechartcomponent'}
 			<PieChartComponent
 				{...component}
 				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:inputs={component.inputs}
+				bind:componentInput={component.componentInput}
 			/>
 		{:else if component.type === 'tablecomponent'}
 			<TableComponent
 				{...component}
 				bind:staticOutputs={$staticOutputs[component.id]}
-				bind:inputs={component.inputs}
+				bind:componentInput={component.componentInput}
 			/>
 		{:else if component.type === 'textcomponent'}
-			<TextComponent {...component} />
+			<TextComponent
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'buttoncomponent'}
-			<ButtonComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+			<ButtonComponent
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'formcomponent'}
+			<AppForm
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
 		{:else if component.type === 'checkboxcomponent'}
 			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'textinputcomponent'}
+			<TextInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'numberinputcomponent'}
+			<NumberInputComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
 		{/if}
 	</div>
 </div>

package/components/apps/editor/ComponentEditor.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         selected: boolean;
     };
     events: {
+        delete: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/editor/ComponentHeader.svelte

@@ -0,0 +1,28 @@
+<script>import { classNames } from '../../../utils';
+import { displayData } from '../utils';
+import { X } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+export let component;
+export let selected;
+const dispatch = createEventDispatcher();
+</script>
+
+<span
+	class={classNames(
+		'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5',
+		selected ? 'bg-indigo-500' : 'bg-gray-500'
+	)}
+>
+	{displayData[component.type].name} - {component.id}
+</span>
+<button
+	class={classNames(
+		'text-white px-1 text-2xs py-0.5 font-bold rounded-t-sm w-fit absolute -top-5 right-0  cursor-pointer',
+		'bg-gray-600 hover:bg-gray-800'
+	)}
+	on:click={() => {
+		dispatch('delete')
+	}}
+>
+	<X size={16} />
+</button>

package/components/apps/editor/ComponentHeader.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../types';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+    };
+    events: {
+        delete: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentHeaderProps = typeof __propDef.props;
+export type ComponentHeaderEvents = typeof __propDef.events;
+export type ComponentHeaderSlots = typeof __propDef.slots;
+export default class ComponentHeader extends SvelteComponentTyped<ComponentHeaderProps, ComponentHeaderEvents, ComponentHeaderSlots> {
+}
+export {};

package/components/apps/editor/GridEditor.svelte

@@ -2,18 +2,39 @@
 import Grid from 'svelte-grid';
 import ComponentEditor from './ComponentEditor.svelte';
 import { classNames } from '../../../utils';
-import { columnConfiguration, disableDrag, enableDrag } from '../gridUtils';
-const { selectedComponent, app, mode } = getContext('AppEditorContext');
-$: if ($mode === 'preview') {
+import { columnConfiguration, disableDrag, enableDrag, gridColumns } from '../gridUtils';
+import { Alert } from '../../common';
+import { fly } from 'svelte/transition';
+import gridHelp from 'svelte-grid/build/helper/index.mjs';
+import Button from '../../common/button/Button.svelte';
+import RecomputeAllComponents from './RecomputeAllComponents.svelte';
+const { selectedComponent, app, mode, connectingInput, staticOutputs, runnableComponents } = getContext('AppEditorContext');
+// The drag is disabled when the user is connecting an input
+$: if ($mode === 'preview' || $connectingInput.opened) {
     $app.grid.map((gridItem) => disableDrag(gridItem));
 }
 else {
     $app.grid.map((gridItem) => enableDrag(gridItem));
 }
+function deleteComponent(component) {
+    if (component) {
+        $app.grid = $app.grid.filter((gridComponent) => gridComponent.data.id !== component?.id);
+        // Delete static inputs
+        delete $staticOutputs[component.id];
+        $staticOutputs = $staticOutputs;
+        delete $runnableComponents[component.id];
+        $runnableComponents = $runnableComponents;
+    }
+}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="bg-white h-full" on:click|preventDefault={() => ($selectedComponent = undefined)}>
+<div
+	class="bg-white h-full relative"
+	on:click|preventDefault={() => ($selectedComponent = undefined)}
+>
+	<RecomputeAllComponents />
+
 	<Grid bind:items={$app.grid} rowHeight={64} let:dataItem cols={columnConfiguration}>
 		{#each $app.grid as gridComponent (gridComponent.id)}
 			{#if gridComponent.data.id === dataItem.data.id}
@@ -25,17 +46,45 @@ else {
 						gridComponent.data.card ? 'border border-gray-100' : ''
 					)}
 					on:click|preventDefault|stopPropagation={() => {
-						$selectedComponent = dataItem.data.id
+						if (!$connectingInput.opened) {
+							$selectedComponent = dataItem.data.id
+						}
 					}}
 				>
 					<ComponentEditor
 						bind:component={gridComponent.data}
 						selected={$selectedComponent === dataItem.data.id}
+						on:delete={() => deleteComponent(gridComponent.data)}
 					/>
 				</div>
 			{/if}
 		{/each}
 	</Grid>
+	{#if $connectingInput.opened}
+		<div
+			class="fixed top-32 left-0 w-full z-10 flex justify-center items-center"
+			transition:fly={{ duration: 100, y: -100 }}
+		>
+			<Alert title="Connecting" type="info">
+				<div class="flex gap-2 flex-col">
+					Click on the output of the component you want to connect to on the left panel.
+					<div>
+						<Button
+							color="blue"
+							variant="border"
+							size="xs"
+							on:click={() => {
+								$connectingInput.opened = false
+								$connectingInput.input = undefined
+							}}
+						>
+							Stop connecting
+						</Button>
+					</div>
+				</div>
+			</Alert>
+		</div>
+	{/if}
 </div>
 
 <style>

package/components/apps/editor/GridEditor.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/RecomputeAllComponents.svelte

@@ -0,0 +1,28 @@
+<script>import Button from '../../common/button/Button.svelte';
+import { classNames } from '../../../utils';
+import { faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+const { runnableComponents } = getContext('AppEditorContext');
+let loading = false;
+async function onRefresh() {
+    await Promise.all(Object.keys($runnableComponents).map((id) => {
+        return $runnableComponents?.[id]?.();
+    }));
+    loading = false;
+}
+</script>
+
+<Button
+	size="xs"
+	btnClasses="m-2 mb-4"
+	startIcon={{ icon: faRefresh, classes: classNames(loading ? 'animate-spin' : '', 'mr-2') }}
+	color="light"
+	variant="border"
+	disabled={Object.keys($runnableComponents).length === 0}
+	on:click={() => {
+		loading = true
+		onRefresh()
+	}}
+>
+	Recompute all ({Object.keys($runnableComponents).length})
+</Button>

package/components/apps/editor/RecomputeAllComponents.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 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/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -9,8 +9,43 @@ import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
 import { isOpenStore } from './store';
 import { gridColumns } from '../../gridUtils';
 const { app } = getContext('AppEditorContext');
-const COLS = 6;
-function addComponent(appComponent, defaultDimensions, minDimensions = { w: 2, h: 1 }, maxDimensions = { w: 12, h: 12 }) {
+function getMinDimensionsByComponent(componentType, column) {
+    console.log(componentType, column);
+    if (componentType === 'buttoncomponent') {
+        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
+    }
+    else if (componentType === 'formcomponent') {
+        return column === 3 ? { w: 2, h: 3 } : { w: 6, h: 4 };
+    }
+    else if (componentType === 'textcomponent') {
+        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
+    }
+    else if (componentType === 'textinputcomponent') {
+        return column === 3 ? { w: 1, h: 2 } : { w: 3, h: 2 };
+    }
+    else if (componentType === 'numberinputcomponent') {
+        return column === 3 ? { w: 1, h: 2 } : { w: 3, h: 2 };
+    }
+    else if (componentType === 'barchartcomponent') {
+        return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 };
+    }
+    else if (componentType === 'piechartcomponent') {
+        return column === 3 ? { w: 2, h: 4 } : { w: 6, h: 4 };
+    }
+    else if (componentType === 'tablecomponent') {
+        return column === 3 ? { w: 3, h: 4 } : { w: 12, h: 4 };
+    }
+    else if (componentType === 'displaycomponent') {
+        return column === 3 ? { w: 2, h: 2 } : { w: 6, h: 4 };
+    }
+    else if (componentType === 'checkboxcomponent') {
+        return column === 3 ? { w: 1, h: 1 } : { w: 3, h: 1 };
+    }
+    else {
+        return { w: 2, h: 1 };
+    }
+}
+function addComponent(appComponent) {
     const grid = $app.grid ?? [];
     const id = getNextId(grid.map((gridItem) => gridItem.data.id));
     appComponent.id = id;
@@ -21,35 +56,65 @@ function addComponent(appComponent, defaultDimensions, minDimensions = { w: 2, h
         customDragger: false,
         customResizer: false,
         x: 0,
-        y: 0,
-        ...defaultDimensions
+        y: 0
     };
     const newItem = {
         data: JSON.parse(JSON.stringify(appComponent)),
         id: id
     };
-    function getMinMaxDimensions(column) {
-        if (column === 3) {
-            return {
-                min: { w: 1, h: 1 },
-                max: { w: 3, h: 12 }
-            };
-        }
-        else {
-            return {
-                min: minDimensions,
-                max: maxDimensions
-            };
-        }
-    }
     gridColumns.forEach((column) => {
         newItem[column] = newComponent;
         const position = gridHelp.findSpace(newItem, grid, column);
-        const dimensions = getMinMaxDimensions(column);
-        newItem[column] = { ...newItem[column], ...position, ...dimensions };
+        const min = getMinDimensionsByComponent(appComponent.type, column);
+        const max = { w: 12, h: 12 };
+        newItem[column].w = min.w;
+        newItem[column].h = min.h;
+        newItem[column] = { ...newItem[column], ...position, min, max };
     });
     $app.grid = [...grid, newItem];
 }
+const products = {
+    1: {
+        name: 'Product 1',
+        description: 'Product 1 description',
+        image: 'https://picsum.photos/200'
+    },
+    2: {
+        name: 'Product 2',
+        description: 'Product 2 description',
+        image: 'https://picsum.photos/200'
+    },
+    3: {
+        name: 'Product 3',
+        description: 'Product 3 description',
+        image: 'https://picsum.photos/200'
+    },
+    4: {
+        name: 'Product 4',
+        description: 'Product 4 description',
+        image: 'https://picsum.photos/200'
+    },
+    5: {
+        name: 'Product 5',
+        description: 'Product 5 description',
+        image: 'https://picsum.photos/200'
+    },
+    6: {
+        name: 'Product 6',
+        description: 'Product 6 description',
+        image: 'https://picsum.photos/200'
+    },
+    7: {
+        name: 'Product 7',
+        description: 'Product 7 description',
+        image: 'https://picsum.photos/200'
+    },
+    8: {
+        name: 'Product 8',
+        description: 'Product 8 description',
+        image: 'https://picsum.photos/200'
+    }
+};
 onMount(() => {
     isOpenStore.addItems(componentSets.map((set) => ({ [set.title]: true })));
 });
@@ -61,7 +126,7 @@ onMount(() => {
 		<button
 			on:click|preventDefault={() => isOpenStore.toggle(title)}
 			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
-				rounded-sm hover:bg-gray-100"
+				rounded-sm duration-200 hover:bg-gray-100"
 		>
 			<h1 class="text-sm font-semibold text-left">{title}</h1>
 			<Icon data={faAngleDown} class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
@@ -69,15 +134,18 @@ onMount(() => {
 		{#if isOpen}
 			<div transition:slide|local={{ duration: 300 }}>
 				{#if components.length}
-					<div class="grid grid-cols-3 gap-1 p-2">
-						{#each components as item, componentIndex (componentIndex)}
+					<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2 p-2">
+						{#each components as item}
 							<button
-								on:click={() => addComponent(item, { w: 2, h: 2 })}
+								on:click={() => addComponent(item)}
+								title={displayData[item.type].name}
 								class="border shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 									justify-center bg-white rounded-md scale-100 hover:scale-105 ease-in duration-75"
 							>
-								<Icon data={displayData[item.type].icon} scale={1.6} class="text-blue-800" />
-								<div class="text-xs">{displayData[item.type].name}</div>
+								<svelte:component this={displayData[item.type].icon} class="text-blue-800" />
+								<div class="text-xs w-full text-center ellipsize">
+									{displayData[item.type].name}
+								</div>
 							</button>
 						{/each}
 					</div>

package/components/apps/editor/componentsPanel/ComponentList.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/components/apps/editor/componentsPanel/componentDefaultProps.d.ts

@@ -1,7 +1,3 @@
-import type { Aligned } from "../../types";
-declare const defaultProps: {
-    inputs: {};
-    componentInputs: {};
-};
+import type { Aligned } from '../../types';
 declare const defaultAlignement: Aligned;
-export { defaultProps, defaultAlignement };
+export { defaultAlignement };

package/components/apps/editor/componentsPanel/componentDefaultProps.js

@@ -1,9 +1,5 @@
-const defaultProps = {
-    inputs: {},
-    componentInputs: {}
-};
 const defaultAlignement = {
     horizontalAlignment: 'center',
     verticalAlignment: 'center'
 };
-export { defaultProps, defaultAlignement };
+export { defaultAlignement };

package/components/apps/editor/componentsPanel/componentStaticValues.d.ts

@@ -1,4 +1,6 @@
 export declare const staticValues: {
     readonly buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light")[];
     readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly tableSearchOptions: readonly ["Frontend", "Backend", "Disabled"];
+    readonly chartThemeOptions: readonly ["theme1", "theme2", "theme3"];
 };

package/components/apps/editor/componentsPanel/componentStaticValues.js

@@ -2,5 +2,7 @@ import { BUTTON_COLORS } from '../../../common';
 const buttonColorOptions = [...BUTTON_COLORS];
 export const staticValues = {
     buttonColorOptions,
-    buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl']
+    buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
+    tableSearchOptions: ['Frontend', 'Backend', 'Disabled'],
+    chartThemeOptions: ['theme1', 'theme2', 'theme3']
 };