windmill-components 1.46.3 → 1.52.0

package/components/apps/editor/AppEditorHeader.svelte

@@ -0,0 +1,75 @@
+<script>import { page } from '$app/stores';
+import Button from '../../common/button/Button.svelte';
+import ToggleButton from '../../common/toggleButton/ToggleButton.svelte';
+import ToggleButtonGroup from '../../common/toggleButton/ToggleButtonGroup.svelte';
+import { AppService, Policy } from '../../../gen';
+import { userStore, workspaceStore } from '../../../stores';
+import { faDesktopAlt, faDisplay, faExternalLink, faHand, faMobileAlt } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { sendUserToast } from '../../../utils';
+const { app } = getContext('AppEditorContext');
+export let title = $app.title || '';
+export let mode;
+export let breakpoint;
+const loading = {
+    publish: false,
+    save: false
+};
+async function save() {
+    loading.save = true;
+    AppService.updateApp({
+        workspace: $workspaceStore,
+        path: $page.params.path,
+        requestBody: {
+            value: $app,
+            summary: title,
+            policy: {
+                triggerables: {},
+                execution_mode: Policy.execution_mode.PUBLISHER,
+                on_behalf_of: `u/${$userStore?.username}`
+            }
+        }
+    })
+        .then(() => {
+        sendUserToast('Saved successfully.');
+    })
+        .catch(() => {
+        sendUserToast('Error during saving. Please try again later.', true);
+    })
+        .finally(() => {
+        loading.save = false;
+    });
+}
+</script>
+
+<div class="border-b flex flex-row justify-between py-1 px-4 items-center">
+	<input class="text-sm w-64" bind:value={title} />
+	<div class="flex gap-8">
+		<div>
+			<ToggleButtonGroup bind:selected={mode}>
+				<ToggleButton position="left" value="dnd" startIcon={{ icon: faHand }} size="xs">
+					Editor
+				</ToggleButton>
+				<ToggleButton position="right" value="preview" startIcon={{ icon: faDisplay }} size="xs">
+					Preview
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+		<div>
+			<ToggleButtonGroup bind:selected={breakpoint}>
+				<ToggleButton position="left" value="sm" startIcon={{ icon: faMobileAlt }} size="xs">
+					Mobile
+				</ToggleButton>
+				<ToggleButton position="right" value="lg" startIcon={{ icon: faDesktopAlt }} size="xs">
+					Desktop
+				</ToggleButton>
+			</ToggleButtonGroup>
+		</div>
+	</div>
+	<div class="flex flex-row gap-2">
+		<Button color="dark" size="xs" variant="border" startIcon={{ icon: faExternalLink }}>
+			Publish
+		</Button>
+		<Button loading={loading.save} on:click={save} color="dark" size="xs">Save</Button>
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { EditorBreakpoint, EditorMode } from '../types';
+declare const __propDef: {
+    props: {
+        title?: string | undefined;
+        mode: EditorMode;
+        breakpoint: EditorBreakpoint;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppEditorHeaderProps = typeof __propDef.props;
+export type AppEditorHeaderEvents = typeof __propDef.events;
+export type AppEditorHeaderSlots = typeof __propDef.slots;
+export default class AppEditorHeader extends SvelteComponentTyped<AppEditorHeaderProps, AppEditorHeaderEvents, AppEditorHeaderSlots> {
+}
+export {};

package/components/apps/editor/ComponentEditor.svelte

@@ -0,0 +1,64 @@
+<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 { displayData } from '../utils';
+import ButtonComponent from '../components/buttons/AppButton.svelte';
+import PieChartComponent from '../components/dataDisplay/AppPieChart.svelte';
+import CheckboxComponent from '../components/selectInputs/AppCheckbox.svelte';
+export let component;
+export let selected;
+const { staticOutputs, mode } = 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}
+
+	<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' : ''
+		)}
+	>
+		{#if component.type === 'displaycomponent'}
+			<DisplayComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'barchartcomponent'}
+			<BarChartComponent
+				{...component}
+				bind:inputs={component.inputs}
+				bind:staticOutputs={$staticOutputs[component.id]}
+			/>
+		{:else if component.type === 'piechartcomponent'}
+			<PieChartComponent
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:inputs={component.inputs}
+			/>
+		{:else if component.type === 'tablecomponent'}
+			<TableComponent
+				{...component}
+				bind:staticOutputs={$staticOutputs[component.id]}
+				bind:inputs={component.inputs}
+			/>
+		{:else if component.type === 'textcomponent'}
+			<TextComponent {...component} />
+		{:else if component.type === 'buttoncomponent'}
+			<ButtonComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{:else if component.type === 'checkboxcomponent'}
+			<CheckboxComponent {...component} bind:staticOutputs={$staticOutputs[component.id]} />
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppComponent } from '../types';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+    };
+    events: {
+        [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/GridEditor.svelte

@@ -0,0 +1,45 @@
+<script>import { getContext } from 'svelte';
+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') {
+    $app.grid.map((gridItem) => disableDrag(gridItem));
+}
+else {
+    $app.grid.map((gridItem) => enableDrag(gridItem));
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="bg-white h-full" on:click|preventDefault={() => ($selectedComponent = undefined)}>
+	<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={() => {
+						$selectedComponent = dataItem.data.id
+					}}
+				>
+					<ComponentEditor
+						bind:component={gridComponent.data}
+						selected={$selectedComponent === dataItem.data.id}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</Grid>
+</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: {};
+    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/componentsPanel/ComponentList.svelte

@@ -0,0 +1,92 @@
+<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');
+const COLS = 6;
+function addComponent(appComponent, defaultDimensions, minDimensions = { w: 2, h: 1 }, maxDimensions = { w: 12, h: 12 }) {
+    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,
+        ...defaultDimensions
+    };
+    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 };
+    });
+    $app.grid = [...grid, newItem];
+}
+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 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-3 gap-1 p-2">
+						{#each components as item, componentIndex (componentIndex)}
+							<button
+								on:click={() => addComponent(item, { w: 2, h: 2 })}
+								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>
+							</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: {};
+    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,7 @@
+import type { Aligned } from "../../types";
+declare const defaultProps: {
+    inputs: {};
+    componentInputs: {};
+};
+declare const defaultAlignement: Aligned;
+export { defaultProps, defaultAlignement };

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

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

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

@@ -0,0 +1,4 @@
+export declare const staticValues: {
+    readonly buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light")[];
+    readonly buttonSizeOptions: readonly ["xs", "sm", "md", "lg", "xl"];
+};

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

@@ -0,0 +1,6 @@
+import { BUTTON_COLORS } from '../../../common';
+const buttonColorOptions = [...BUTTON_COLORS];
+export const staticValues = {
+    buttonColorOptions,
+    buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl']
+};

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

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

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

@@ -0,0 +1,158 @@
+import { defaultAlignement, defaultProps } from './componentDefaultProps';
+const windmillComponents = {
+    title: 'Windmill Components',
+    components: [
+        {
+            ...defaultProps,
+            id: 'displaycomponent',
+            type: 'displaycomponent',
+            componentInputs: {
+                result: {
+                    id: undefined,
+                    name: undefined,
+                    type: 'output',
+                    defaultValue: {},
+                    fieldType: 'object'
+                }
+            }
+        }
+    ]
+};
+const textInputs = {
+    title: 'Text Inputs',
+    components: []
+};
+const numberInputs = {
+    title: 'Number Inputs',
+    components: []
+};
+const buttons = {
+    title: 'Buttons',
+    components: [
+        {
+            ...defaultProps,
+            id: 'buttoncomponent',
+            type: 'buttoncomponent',
+            componentInputs: {
+                label: {
+                    type: 'static',
+                    visible: true,
+                    value: 'Lorem ipsum',
+                    fieldType: 'textarea',
+                    defaultValue: 'Lorem ipsum'
+                },
+                color: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'blue',
+                    optionValuesKey: 'buttonColorOptions',
+                    defaultValue: 'blue'
+                },
+                size: {
+                    fieldType: 'select',
+                    type: 'static',
+                    visible: true,
+                    value: 'md',
+                    optionValuesKey: 'buttonSizeOptions',
+                    defaultValue: 'md'
+                }
+            },
+            runnable: true,
+            card: false
+        }
+    ]
+};
+const selectInputs = {
+    title: 'Select Inputs',
+    components: [
+        {
+            ...defaultProps,
+            ...defaultAlignement,
+            id: 'checkboxcomponent',
+            type: 'checkboxcomponent',
+            componentInputs: {
+                label: {
+                    type: 'static',
+                    visible: true,
+                    value: undefined,
+                    fieldType: 'textarea',
+                    defaultValue: 'Lorem ipsum'
+                }
+            },
+            card: false
+        }
+    ]
+};
+const dateTimeInputs = {
+    title: 'Date and Time Inputs',
+    components: []
+};
+const dataDisplay = {
+    title: 'Data Display',
+    components: [
+        {
+            ...defaultProps,
+            ...defaultAlignement,
+            id: 'textcomponent',
+            type: 'textcomponent',
+            componentInputs: {
+                content: {
+                    type: 'static',
+                    visible: true,
+                    value: 'Lorem ipsum',
+                    fieldType: 'textarea',
+                    defaultValue: 'Lorem ipsum'
+                }
+            }
+        },
+        {
+            ...defaultProps,
+            id: 'tablecomponent',
+            type: 'tablecomponent',
+            componentInputs: {
+                searchEnabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    visible: true,
+                    defaultValue: false
+                },
+                paginationEnabled: {
+                    type: 'static',
+                    value: false,
+                    fieldType: 'boolean',
+                    visible: true,
+                    defaultValue: false
+                }
+            },
+            runnable: true,
+            card: true,
+            actionButtons: []
+        },
+        {
+            ...defaultProps,
+            id: 'piechartcomponent',
+            type: 'piechartcomponent',
+            runnable: true,
+            card: true
+        },
+        {
+            ...defaultProps,
+            id: 'barchartcomponent',
+            type: 'barchartcomponent',
+            runnable: true,
+            card: true
+        }
+    ]
+};
+const componentSets = [
+    windmillComponents,
+    textInputs,
+    numberInputs,
+    buttons,
+    selectInputs,
+    dateTimeInputs,
+    dataDisplay
+];
+export { componentSets };

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

@@ -0,0 +1,9 @@
+export type IsOpenStoreItem = Record<string, boolean>;
+export declare const isOpenStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<IsOpenStoreItem>, invalidate?: ((value?: IsOpenStoreItem | undefined) => void) | undefined) => import("svelte/store").Unsubscriber;
+    update: (this: void, updater: import("svelte/store").Updater<IsOpenStoreItem>) => void;
+    /** If an item is already set, it won't get updated. */
+    addItems: (items: IsOpenStoreItem[]) => void;
+    toggle: (id: string) => void;
+    reset: () => void;
+};

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

@@ -0,0 +1,16 @@
+import { writable } from "svelte/store";
+const store = writable({});
+export const isOpenStore = {
+    subscribe: store.subscribe,
+    update: store.update,
+    /** If an item is already set, it won't get updated. */
+    addItems: (items) => {
+        let newItems = {};
+        items.forEach(item => newItems = { ...newItems, ...item });
+        store.update(last => ({ ...newItems, ...last }));
+    },
+    toggle: (id) => {
+        store.update(last => ({ ...last, [id]: !last[id] }));
+    },
+    reset: () => store.set({})
+};

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte

@@ -0,0 +1,22 @@
+<script>import ObjectViewer from '../../../propertyPicker/ObjectViewer.svelte';
+import { getContext } from 'svelte';
+export let outputs = [];
+export let componentId;
+const { worldStore } = getContext('AppEditorContext');
+let object = {};
+function subscribeToAllOutputs(observableOutputs) {
+    if (observableOutputs) {
+        outputs.forEach((output) => {
+            observableOutputs[output].subscribe({
+                next: (value) => {
+                    object[output] = value;
+                }
+            });
+        });
+    }
+}
+$: $worldStore?.outputsById[componentId] &&
+    subscribeToAllOutputs($worldStore.outputsById[componentId]);
+</script>
+
+<ObjectViewer json={object} on:select topBrackets={true} />

package/components/apps/editor/contextPanel/ComponentOutputViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        outputs?: string[] | undefined;
+        componentId: string;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentOutputViewerProps = typeof __propDef.props;
+export type ComponentOutputViewerEvents = typeof __propDef.events;
+export type ComponentOutputViewerSlots = typeof __propDef.slots;
+export default class ComponentOutputViewer extends SvelteComponentTyped<ComponentOutputViewerProps, ComponentOutputViewerEvents, ComponentOutputViewerSlots> {
+}
+export {};