windmill-components 1.46.3 → 1.55.0

package/components/apps/editor/AppPreview.svelte

@@ -0,0 +1,42 @@
+<script>import { onMount, setContext } from 'svelte';
+import { writable } from 'svelte/store';
+import { buildWorld } from '../rx';
+import GridEditor from './GridEditor.svelte';
+import { classNames } from '../../../utils';
+export let app;
+const appStore = writable(app);
+const worldStore = writable(undefined);
+const staticOutputs = writable({});
+const selectedComponent = writable(undefined);
+const mode = writable('preview');
+const breakpoint = writable('lg');
+const connectingInput = writable({
+    opened: false,
+    input: undefined
+});
+const runnableComponents = writable({});
+setContext('AppEditorContext', {
+    worldStore,
+    staticOutputs,
+    app: appStore,
+    selectedComponent,
+    mode,
+    connectingInput,
+    breakpoint,
+    runnableComponents
+});
+let mounted = false;
+onMount(() => {
+    mounted = true;
+});
+$: mounted && ($worldStore = buildWorld($staticOutputs));
+$: width = $breakpoint === 'sm' ? 'w-[640px]' : 'w-full ';
+</script>
+
+<div class="h-full w-5/6 mx-auto">
+	{#if $appStore.grid}
+		<div class={classNames('mx-auto h-full', width)}>
+			<GridEditor />
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+import { SvelteComponentTyped } from "svelte";
+import type { App } from '../types';
+declare const __propDef: {
+    props: {
+        app: App;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppPreviewProps = typeof __propDef.props;
+export type AppPreviewEvents = typeof __propDef.events;
+export type AppPreviewSlots = typeof __propDef.slots;
+export default class AppPreview extends SvelteComponentTyped<AppPreviewProps, AppPreviewEvents, AppPreviewSlots> {
+}
+export {};

package/components/apps/editor/ComponentEditor.svelte

@@ -0,0 +1,85 @@
+<script>import { classNames } from '../../../utils';
+import { getContext } from 'svelte';
+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 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;
+$: shouldDisplayOverlay = selected && $mode !== 'preview';
+const { staticOutputs, mode, connectingInput } = getContext('AppEditorContext');
+</script>
+
+<div class="h-full flex flex-col w-full">
+	{#if shouldDisplayOverlay}
+		<ComponentHeader {component} {selected} on:delete />
+	{/if}
+
+	<div
+		class={classNames(
+			' border overflow-auto cursor-pointer  h-full bg-white',
+			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:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'barchartcomponent'}
+			<BarChartComponent
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'piechartcomponent'}
+			<PieChartComponent
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+			/>
+		{:else if component.type === 'tablecomponent'}
+			<TableComponent
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:componentInput={component.componentInput}
+			/>
+		{:else if component.type === 'textcomponent'}
+			<TextComponent
+				{...component}
+				bind:componentInput={component.componentInput}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'buttoncomponent'}
+			<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

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

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

@@ -0,0 +1,94 @@
+<script>import { getContext } from 'svelte';
+import Grid from 'svelte-grid';
+import ComponentEditor from './ComponentEditor.svelte';
+import { classNames } from '../../../utils';
+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 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}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+
+				<div
+					class={classNames(
+						'h-full w-full flex justify-center align-center',
+						gridComponent.data.card ? 'border border-gray-100' : ''
+					)}
+					on:click|preventDefault|stopPropagation={() => {
+						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>
+	:global(.svlt-grid-shadow) {
+		/* Back shadow */
+		background: rgb(147 197 253) !important;
+	}</style>

package/components/apps/editor/GridEditor.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 GridEditorProps = typeof __propDef.props;
+export type GridEditorEvents = typeof __propDef.events;
+export type GridEditorSlots = typeof __propDef.slots;
+export default class GridEditor extends SvelteComponentTyped<GridEditorProps, GridEditorEvents, GridEditorSlots> {
+}
+export {};

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

@@ -0,0 +1,160 @@
+<script>import { slide } from 'svelte/transition';
+import Icon from 'svelte-awesome';
+import { displayData } from '../../utils';
+import { componentSets } from './data';
+import gridHelp from 'svelte-grid/build/helper/index.mjs';
+import { getContext, onMount } from 'svelte';
+import { getNextId } from '../../../flows/flowStateUtils';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
+import { isOpenStore } from './store';
+import { gridColumns } from '../../gridUtils';
+const { app } = getContext('AppEditorContext');
+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;
+    const newComponent = {
+        fixed: false,
+        resizable: true,
+        draggable: true,
+        customDragger: false,
+        customResizer: false,
+        x: 0,
+        y: 0
+    };
+    const newItem = {
+        data: JSON.parse(JSON.stringify(appComponent)),
+        id: id
+    };
+    gridColumns.forEach((column) => {
+        newItem[column] = newComponent;
+        const position = gridHelp.findSpace(newItem, grid, column);
+        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 })));
+});
+</script>
+
+{#each componentSets as { title, components }, index (index)}
+	{@const isOpen = $isOpenStore[title]}
+	<section class="mt-1 mb-2 px-2">
+		<button
+			on:click|preventDefault={() => isOpenStore.toggle(title)}
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
+				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' : ''}" />
+		</button>
+		{#if isOpen}
+			<div transition:slide|local={{ duration: 300 }}>
+				{#if components.length}
+					<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)}
+								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"
+							>
+								<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>
+				{:else}
+					<div class="text-xs text-gray-500 py-1 px-2">
+						There are no components in this group yet
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</section>
+{/each}

package/components/apps/editor/componentsPanel/ComponentList.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 ComponentListProps = typeof __propDef.props;
+export type ComponentListEvents = typeof __propDef.events;
+export type ComponentListSlots = typeof __propDef.slots;
+export default class ComponentList extends SvelteComponentTyped<ComponentListProps, ComponentListEvents, ComponentListSlots> {
+}
+export {};

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

@@ -0,0 +1,3 @@
+import type { Aligned } from '../../types';
+declare const defaultAlignement: Aligned;
+export { defaultAlignement };

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

@@ -0,0 +1,5 @@
+const defaultAlignement = {
+    horizontalAlignment: 'center',
+    verticalAlignment: 'center'
+};
+export { defaultAlignement };

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

@@ -0,0 +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

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

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

@@ -0,0 +1,3 @@
+import type { ComponentSet } from '../../types';
+declare const componentSets: ComponentSet[];
+export { componentSets };