windmill-components 1.46.3 → 1.52.0

package/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { InputsSpec } from '../../types';
+declare const __propDef: {
+    props: {
+        inputSpecs: InputsSpec;
+        userInputEnabled?: boolean | undefined;
+    };
+    events: {
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type InputsSpecsEditorProps = typeof __propDef.props;
+export type InputsSpecsEditorEvents = typeof __propDef.events;
+export type InputsSpecsEditorSlots = typeof __propDef.slots;
+export default class InputsSpecsEditor extends SvelteComponentTyped<InputsSpecsEditorProps, InputsSpecsEditorEvents, InputsSpecsEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/PickFlow.svelte

@@ -0,0 +1,37 @@
+<script>import ItemPicker from '../../../ItemPicker.svelte';
+import { FlowService } from '../../../../gen';
+import { workspaceStore } from '../../../../stores';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import { Wind } from 'svelte-lucide';
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return await FlowService.listFlows({ workspace: $workspaceStore });
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName="Flow"
+	extraField="summary"
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<Wind size="18px" />
+
+		<span class="text-xs">Flow</span>
+	</div>
+</Button>

package/components/apps/editor/settingsPanel/PickFlow.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickFlowProps = typeof __propDef.props;
+export type PickFlowEvents = typeof __propDef.events;
+export type PickFlowSlots = typeof __propDef.slots;
+export default class PickFlow extends SvelteComponentTyped<PickFlowProps, PickFlowEvents, PickFlowSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/PickInlineScript.svelte

@@ -0,0 +1,38 @@
+<script>import ItemPicker from '../../../ItemPicker.svelte';
+import { createEventDispatcher } from 'svelte';
+import Button from '../../../common/button/Button.svelte';
+import { MousePointerClick } from 'svelte-lucide';
+export let scripts;
+let itemPicker;
+const dispatch = createEventDispatcher();
+async function loadItems() {
+    return scripts;
+}
+</script>
+
+<ItemPicker
+	bind:this={itemPicker}
+	pickCallback={(path, summary) => {
+		dispatch('pick', { path, summary })
+	}}
+	itemName={'Script'}
+	extraField="summary"
+	noItemMessage={`There are no inline scripts.<br>
+	Click '<span class="font-semibold">Add script</span>' on the left panel to create one.`}
+	{loadItems}
+/>
+
+<Button
+	on:click={() => itemPicker.openDrawer()}
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<MousePointerClick size="18px" />
+
+		<span class="text-xs">Pick</span>
+	</div>
+</Button>

package/components/apps/editor/settingsPanel/PickInlineScript.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        scripts: {
+            summary: string;
+        }[];
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type PickInlineScriptProps = typeof __propDef.props;
+export type PickInlineScriptEvents = typeof __propDef.events;
+export type PickInlineScriptSlots = typeof __propDef.slots;
+export default class PickInlineScript extends SvelteComponentTyped<PickInlineScriptProps, PickInlineScriptEvents, PickInlineScriptSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/SectionPanel.svelte

@@ -0,0 +1,70 @@
+<script>import { Alert } from '../../../common';
+import Badge from '../../../common/badge/Badge.svelte';
+import Button from '../../../common/button/Button.svelte';
+import ConfirmationModal from '../../../common/confirmationModal/ConfirmationModal.svelte';
+import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import PanelSection from './common/PanelSection.svelte';
+export let section;
+const dispatch = createEventDispatcher();
+let deleteConfirmedCallback = undefined;
+$: open = Boolean(deleteConfirmedCallback);
+function deleteSection(event) {
+    if (section &&
+        Array.isArray(section.components) &&
+        section?.components.length > 0 &&
+        !event.detail.shiftKey) {
+        deleteConfirmedCallback = () => {
+            dispatch('remove');
+            deleteConfirmedCallback = undefined;
+        };
+    }
+    else {
+        dispatch('remove');
+    }
+}
+</script>
+
+{#if section}
+	<div class="flex flex-col w-full divide-y">
+		<span class="text-sm border-y w-full py-1 px-2 bg-gray-800 text-white">Section editor</span>
+
+		<PanelSection title="Danger zone">
+			<Button
+				size="xs"
+				variant="border"
+				color="red"
+				startIcon={{ icon: faTrashAlt }}
+				on:click={deleteSection}
+			>
+				Delete section
+			</Button>
+		</PanelSection>
+	</div>
+{/if}
+
+<ConfirmationModal
+	{open}
+	title="Remove section"
+	confirmationText="Remove"
+	on:canceled={() => {
+		deleteConfirmedCallback = undefined
+	}}
+	on:confirmed={() => {
+		if (deleteConfirmedCallback) {
+			deleteConfirmedCallback()
+		}
+		deleteConfirmedCallback = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>Are you sure you want to remove this section?</span>
+		<Alert type="info" title="Bypass confirmation">
+			<div>
+				You can press
+				<Badge color="dark-gray">SHIFT</Badge>
+				while removing a resource to bypass confirmation.
+			</div>
+		</Alert>
+	</div>
+</ConfirmationModal>

package/components/apps/editor/settingsPanel/SectionPanel.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppSection } from '../../types';
+declare const __propDef: {
+    props: {
+        section: AppSection | undefined;
+    };
+    events: {
+        remove: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SectionPanelProps = typeof __propDef.props;
+export type SectionPanelEvents = typeof __propDef.events;
+export type SectionPanelSlots = typeof __propDef.slots;
+export default class SectionPanel extends SvelteComponentTyped<SectionPanelProps, SectionPanelEvents, SectionPanelSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/StaticInputEditor.svelte

@@ -0,0 +1,29 @@
+<script>import Toggle from '../../../Toggle.svelte';
+import { staticValues } from '../componentsPanel/componentStaticValues';
+export let input;
+export let canHide;
+</script>
+
+{#if input.type === 'static'}
+	{#if canHide}
+		<Toggle bind:checked={input.visible} options={{ right: 'Visible' }} />
+	{/if}
+
+	{#if input.fieldType === 'number'}
+		<input type="number" bind:value={input.value} />
+	{:else if input.fieldType === 'textarea'}
+		<textarea bind:value={input.value} />
+	{:else if input.fieldType === 'boolean'}
+		<Toggle bind:checked={input.value} />
+	{:else if input.fieldType === 'select'}
+		<select bind:value={input.value}>
+			{#each staticValues[input.optionValuesKey] || [] as option}
+				<option value={option}>
+					{option}
+				</option>
+			{/each}
+		</select>
+	{:else}
+		<input bind:value={input.value} />
+	{/if}
+{/if}

package/components/apps/editor/settingsPanel/StaticInputEditor.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInputTransform } from '../../types';
+declare const __propDef: {
+    props: {
+        input: AppInputTransform;
+        canHide: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type StaticInputEditorProps = typeof __propDef.props;
+export type StaticInputEditorEvents = typeof __propDef.events;
+export type StaticInputEditorSlots = typeof __propDef.slots;
+export default class StaticInputEditor extends SvelteComponentTyped<StaticInputEditorProps, StaticInputEditorEvents, StaticInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -0,0 +1,107 @@
+<script>import { Badge } from '../../../common';
+import Alert from '../../../common/alert/Alert.svelte';
+import Button from '../../../common/button/Button.svelte';
+import { getNextId } from '../../../flows/flowStateUtils';
+import { classNames } from '../../../../utils';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { getContext } from 'svelte';
+import { defaultProps } from '../componentsPanel/componentDefaultProps';
+import PanelSection from './common/PanelSection.svelte';
+import ComponentPanel from './ComponentPanel.svelte';
+export let components;
+const { app } = getContext('AppEditorContext');
+function addComponent() {
+    const grid = $app.grid ?? [];
+    const id = getNextId(grid.map((gridItem) => gridItem.data.id));
+    const newComponent = {
+        ...defaultProps,
+        id,
+        type: 'buttoncomponent',
+        componentInputs: {
+            label: {
+                type: 'static',
+                visible: true,
+                value: 'Action',
+                fieldType: 'textarea',
+                defaultValue: 'Action'
+            },
+            color: {
+                fieldType: 'select',
+                type: 'static',
+                visible: true,
+                value: 'dark',
+                optionValuesKey: 'buttonColorOptions',
+                defaultValue: 'dark'
+            },
+            size: {
+                fieldType: 'select',
+                type: 'static',
+                visible: true,
+                value: 'xs',
+                optionValuesKey: 'buttonSizeOptions',
+                defaultValue: 'xs'
+            }
+        },
+        runnable: true
+    };
+    components = [...components, newComponent];
+}
+let openedComponentId = components[0]?.id;
+</script>
+
+<PanelSection title={`Table actions ${components.length > 0 ? `(${components.length})` : ''}`}>
+	<svelte:fragment slot="action">
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: faPlus }}
+			on:click={addComponent}
+			iconOnly
+		/>
+	</svelte:fragment>
+	{#if components.length > 0}
+		<div class="w-full">
+			<Alert title="Special argument" size="xs">
+				A "row" argument is automatically added to the script. It contains the row data.
+			</Alert>
+		</div>
+	{/if}
+	{#each components as component}
+		<div
+			class={classNames(
+				'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
+				'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
+				openedComponentId === component.id ? 'outline outline-gray-500 outline-offset-1' : ''
+			)}
+			on:click={() => {
+				if (openedComponentId === component.id) {
+					openedComponentId = undefined
+				} else {
+					openedComponentId = component.id
+				}
+			}}
+			on:keypress
+		>
+			<div
+				>{component.componentInputs.label.type === 'static'
+					? component.componentInputs.label.value
+					: ''}
+			</div>
+			<Badge color="dark-blue">
+				Component: {component.id}
+			</Badge>
+		</div>
+
+		{#if openedComponentId === component.id}
+			<div class="w-full border">
+				<ComponentPanel
+					bind:component
+					onDelete={() => {
+						components = components.filter((c) => c.id !== component.id)
+					}}
+				/>
+			</div>
+		{/if}
+	{/each}
+</PanelSection>

package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ButtonComponent, BaseAppComponent } from '../../types';
+declare const __propDef: {
+    props: {
+        components: (BaseAppComponent & ButtonComponent)[];
+    };
+    events: {
+        keypress: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type TableActionsProps = typeof __propDef.props;
+export type TableActionsEvents = typeof __propDef.events;
+export type TableActionsSlots = typeof __propDef.slots;
+export default class TableActions extends SvelteComponentTyped<TableActionsProps, TableActionsEvents, TableActionsSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/UserInputEditor.svelte

@@ -0,0 +1,2 @@
+<script>"use strict";
+</script>

package/components/apps/editor/settingsPanel/UserInputEditor.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {};
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UserInputEditorProps = typeof __propDef.props;
+export type UserInputEditorEvents = typeof __propDef.events;
+export type UserInputEditorSlots = typeof __propDef.slots;
+export default class UserInputEditor extends SvelteComponentTyped<UserInputEditorProps, UserInputEditorEvents, UserInputEditorSlots> {
+}
+export {};

package/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -0,0 +1,11 @@
+<script>import { classNames } from '../../../../../utils';
+export let title;
+</script>
+
+<div class={classNames('flex flex-col gap-2 items-start p-4')}>
+	<div class="flex justify-between items-center w-full">
+		<div class="text-xs font-bold">{title}</div>
+		<slot name="action" />
+	</div>
+	<slot />
+</div>

package/components/apps/editor/settingsPanel/common/PanelSection.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        action: {};
+        default: {};
+    };
+};
+export type PanelSectionProps = typeof __propDef.props;
+export type PanelSectionEvents = typeof __propDef.events;
+export type PanelSectionSlots = typeof __propDef.slots;
+export default class PanelSection extends SvelteComponentTyped<PanelSectionProps, PanelSectionEvents, PanelSectionSlots> {
+}
+export {};

package/components/apps/gridUtils.d.ts

@@ -0,0 +1,11 @@
+import type { GridItem } from './types';
+type ColumnConfiguration = [number, number][];
+declare const Breakpoints: {
+    sm: number;
+    lg: number;
+};
+declare const columnConfiguration: ColumnConfiguration;
+declare const gridColumns: number[];
+declare function disableDrag(component: GridItem): GridItem;
+declare function enableDrag(component: GridItem): GridItem;
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };

package/components/apps/gridUtils.js

@@ -0,0 +1,24 @@
+const Breakpoints = {
+    sm: 640,
+    lg: 1024
+};
+const columnConfiguration = [
+    [Breakpoints.lg, 12],
+    [Breakpoints.sm, 3]
+];
+const gridColumns = columnConfiguration.map((value) => value[1]);
+function disableDrag(component) {
+    gridColumns.forEach((column) => {
+        component[column].customDragger = true;
+        component[column].customResizer = true;
+    });
+    return component;
+}
+function enableDrag(component) {
+    gridColumns.forEach((column) => {
+        component[column].customDragger = false;
+        component[column].customResizer = false;
+    });
+    return component;
+}
+export { gridColumns, columnConfiguration, disableDrag, enableDrag, Breakpoints };

package/components/apps/rx.d.ts

@@ -0,0 +1,27 @@
+import type { AppInputTransform } from './types';
+export interface Subscriber<T> {
+    next(v: T): any;
+}
+export interface Observable<T> {
+    subscribe(x: Subscriber<T>): any;
+}
+export interface Output<T> extends Observable<T> {
+    set(x: T, force?: boolean): void;
+}
+export interface Input<T> extends Subscriber<T> {
+    peak(): T | any | undefined;
+}
+export type World = {
+    outputsById: Record<string, Record<string, Output<any>>>;
+    connect: <T>(inputSpec: AppInputTransform, next: (x: T) => void) => Input<T>;
+};
+export declare function buildWorld(components: Record<string, string[]>): {
+    outputsById: Record<string, Record<string, Output<any>>>;
+    connect: <T>(inputSpec: AppInputTransform, next: (x: T) => void) => Input<T>;
+};
+export declare function buildObservableWorld(): {
+    connect: <T>(inputSpec: AppInputTransform, next: (x: T) => void) => Input<T>;
+    newOutput: <T_1>(id: string, name: string) => Output<T_1>;
+};
+export declare function cachedInput<T>(nextParan: (x: T) => void): Input<T>;
+export declare function settableOutput<T>(): Output<T>;

package/components/apps/rx.js

@@ -0,0 +1,87 @@
+export function buildWorld(components) {
+    const newWorld = buildObservableWorld();
+    const outputsById = {};
+    for (const [k, outputs] of Object.entries(components)) {
+        outputsById[k] = {};
+        for (const o of outputs) {
+            outputsById[k][o] = newWorld.newOutput(k, o);
+        }
+    }
+    return { outputsById, connect: newWorld.connect };
+}
+export function buildObservableWorld() {
+    const observables = {};
+    function connect(inputSpec, next) {
+        if (inputSpec.type === 'static') {
+            return {
+                peak: () => inputSpec.value,
+                next: () => { }
+            };
+        }
+        else if (inputSpec.type === 'output') {
+            const input = cachedInput(next);
+            const [name] = inputSpec.name ? inputSpec.name.split('.') : [undefined];
+            let obs = observables[`${inputSpec.id}.${name}`];
+            if (!obs) {
+                console.warn('Observable at ' + inputSpec.id + '.' + name + ' not found');
+                return {
+                    peak: () => undefined,
+                    next: () => { }
+                };
+            }
+            obs.subscribe(input);
+            return input;
+        }
+        else if (inputSpec.type === 'user') {
+            return {
+                peak: () => inputSpec.value,
+                next: () => { }
+            };
+        }
+        else {
+            throw Error('Unknown input type ' + inputSpec);
+        }
+    }
+    function newOutput(id, name) {
+        const output = settableOutput();
+        observables[`${id}.${name}`] = output;
+        return output;
+    }
+    return {
+        connect,
+        newOutput
+    };
+}
+export function cachedInput(nextParan) {
+    let value = undefined;
+    function peak() {
+        return value;
+    }
+    function next(x) {
+        value = x;
+        nextParan(x);
+    }
+    return {
+        peak,
+        next
+    };
+}
+export function settableOutput() {
+    let value = undefined;
+    const subscribers = [];
+    function subscribe(x) {
+        if (!subscribers.includes(x)) {
+            subscribers.push(x);
+        }
+    }
+    function set(x, force = false) {
+        if (value != x || force) {
+            value = x;
+            subscribers.forEach((x) => x.next(value));
+        }
+    }
+    return {
+        subscribe,
+        set
+    };
+}