windmill-components 1.89.1 → 1.103.0

package/dist/components/apps/editor/settingsPanel/Recompute.svelte

@@ -1,54 +0,0 @@
-<script>import Badge from '../../../common/badge/Badge.svelte';
-import { getContext } from 'svelte';
-import PanelSection from './common/PanelSection.svelte';
-export let recomputeIds = undefined;
-export let ownId;
-const { runnableComponents } = getContext('AppViewerContext');
-function onChange(event, id) {
-    if (event.currentTarget.checked) {
-        recomputeIds = [...(recomputeIds ?? []), id];
-    }
-    else {
-        recomputeIds = recomputeIds?.filter((x) => x !== id);
-    }
-}
-</script>
-
-<PanelSection
-	title="Recompute others"
-	tooltip="Select components to recompute after running this script"
->
-	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
-		<table class="divide-y divide-gray-300 border w-full">
-			<thead class="bg-gray-50">
-				<tr>
-					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
-						Component
-					</th>
-					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
-						Recompute
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
-					<tr>
-						<td class="whitespace-nowrap px-4 py-2 text-xs">
-							<Badge color="dark-indigo">{id}</Badge>
-						</td>
-						<td class="relative whitespace-nowrap px-4 py-2 ">
-							<input
-								class="windmillapp"
-								type="checkbox"
-								on:change={(event) => onChange(event, id)}
-								checked={recomputeIds?.includes(id)}
-							/>
-						</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
-	{:else}
-		<div class="text-xs">No components to recompute. Create one and select it here.</div>
-	{/if}
-</PanelSection>

package/dist/components/apps/editor/settingsPanel/Recompute.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        recomputeIds?: string[] | undefined;
-        ownId: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RecomputeProps = typeof __propDef.props;
-export type RecomputeEvents = typeof __propDef.events;
-export type RecomputeSlots = typeof __propDef.slots;
-export default class Recompute extends SvelteComponentTyped<RecomputeProps, RecomputeEvents, RecomputeSlots> {
-}
-export {};

package/dist/components/apps/editor/settingsPanel/SelectedRunnable.svelte

@@ -1,126 +0,0 @@
-<script>import Button from '../../../common/button/Button.svelte';
-import Toggle from '../../../Toggle.svelte';
-import Tooltip from '../../../Tooltip.svelte';
-import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-import { clearResultAppInput } from '../../utils';
-import ComponentTriggerList from './triggerLists/ComponentTriggerList.svelte';
-const { app } = getContext('AppViewerContext');
-const { selectedComponentInEditor } = getContext('AppEditorContext');
-export let appInput;
-export let appComponent;
-function detach() {
-    if (appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript) {
-        $app.unusedInlineScripts.push({
-            name: appInput.runnable.name,
-            inlineScript: appInput.runnable.inlineScript
-        });
-        $app = $app;
-        appInput = clearResultAppInput(appInput);
-    }
-}
-function clear() {
-    appInput = clearResultAppInput(appInput);
-}
-$: {
-    if (appInput.recomputeOnInputChanged === undefined) {
-        appInput.recomputeOnInputChanged = true;
-    }
-    //TODO: remove after migration is done
-    if (appInput.doNotRecomputeOnInputChanged != undefined) {
-        appInput.recomputeOnInputChanged = !appInput.doNotRecomputeOnInputChanged;
-        appInput.doNotRecomputeOnInputChanged = undefined;
-    }
-}
-</script>
-
-<div class="flex justify-between w-full items-center gap-1">
-	<span class="text-xs font-semibold truncate">
-		{#if appInput.runnable?.type === 'runnableByName'}
-			{appInput.runnable.name}
-		{:else if appInput.runnable?.type === 'runnableByPath'}
-			{appInput.runnable.path}
-		{/if}
-	</span>
-	<div class="flex gap-1 justify-center">
-		{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-			<Button size="xs" color="light" variant="border" on:click={detach}>
-				Detach&nbsp;
-				<Tooltip>
-					Detaching an inline script keep it for later to be reused by another component
-				</Tooltip>
-			</Button>
-		{/if}
-		<Button size="xs" color="red" variant="border" startIcon={{ icon: faClose }} on:click={clear}>
-			Clear
-		</Button>
-	</div>
-</div>
-<div>
-	<div class="w-full"><div class="mx-auto w-0">&downarrow;</div></div>
-	<div class="flex gap-1 justify-between items-center">
-		<span class="text-xs font-semibold truncate">
-			Transformer &nbsp;<Tooltip
-				>A transformer is an optional frontend script that is executed right after the component's
-				script whose purpose is to do lightweight transformation in the browser. It takes the
-				previous computation's result as `result`</Tooltip
-			></span
-		>
-		<div class="flex gap-1">
-			{#if !appInput.transformer}
-				<div>
-					<Button
-						variant="border"
-						color="light"
-						size="xs"
-						on:click={() => {
-							appInput.transformer = {
-								language: 'frontend',
-								content: 'return result'
-							}
-							$selectedComponentInEditor = appComponent.id + '_transformer'
-						}}>Add Transformer</Button
-					>
-				</div>
-			{:else}
-				<Button
-					size="xs"
-					color="red"
-					variant="border"
-					startIcon={{ icon: faClose }}
-					on:click={() => {
-						appInput.transformer = undefined
-					}}
-				>
-					Clear
-				</Button>
-			{/if}
-		</div></div
-	>
-</div>
-
-{#if appInput.runnable?.type === 'runnableByName' && appInput.runnable.inlineScript}
-	{#if !['buttoncomponent', 'formbuttoncomponent', 'formcomponent'].includes(appComponent.type)}
-		<div class="flex items-center">
-			<Toggle
-				size="xs"
-				bind:checked={appInput.recomputeOnInputChanged}
-				options={{ right: 'recompute on any input changes' }}
-			/>
-		</div>
-	{/if}
-
-	<div>
-		<ComponentTriggerList
-			bind:runnable={appInput.runnable}
-			{appComponent}
-			fields={appInput.fields}
-			recomputeOnInputChanged={appInput.recomputeOnInputChanged}
-		/>
-	</div>
-{/if}
-{#if appInput.runnable?.type === 'runnableByName' && !appInput.runnable.inlineScript}
-	<span class="text-xs text-gray-500">
-		Please configure the language in the inline script panel
-	</span>
-{/if}

package/dist/components/apps/editor/settingsPanel/SelectedRunnable.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { ResultAppInput } from '../../inputType';
-import type { AppComponent } from '../component';
-declare const __propDef: {
-    props: {
-        appInput: ResultAppInput;
-        appComponent: AppComponent;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SelectedRunnableProps = typeof __propDef.props;
-export type SelectedRunnableEvents = typeof __propDef.events;
-export type SelectedRunnableSlots = typeof __propDef.slots;
-export default class SelectedRunnable extends SvelteComponentTyped<SelectedRunnableProps, SelectedRunnableEvents, SelectedRunnableSlots> {
-}
-export {};

package/dist/components/apps/editor/settingsPanel/StylePanel.svelte

@@ -1,63 +0,0 @@
-<script>import { Button } from '../../../common';
-import { sendUserToast } from '../../../../utils';
-import { Copy } from 'lucide-svelte';
-import { getContext } from 'svelte';
-import { ccomponents } from '../component';
-import CssProperty from '../componentsPanel/CssProperty.svelte';
-import { quickStyleProperties } from '../componentsPanel/quickStyleProperties';
-export let component;
-const { app } = getContext('AppViewerContext');
-function applyToAllInstances() {
-    if (component) {
-        if (!$app.css) {
-            $app.css = {};
-        }
-        let componentType = component?.type;
-        if (!$app.css[componentType]) {
-            $app.css[componentType] = {};
-        }
-        Object.keys(ccomponents[component.type].customCss ?? {}).forEach((name) => {
-            if (!$app.css[componentType][name]) {
-                $app.css[componentType][name] = {};
-            }
-            if (component) {
-                let nstyle = component.customCss[name];
-                if (nstyle.style) {
-                    $app.css[componentType][name].style = nstyle.style;
-                }
-                if (nstyle.class) {
-                    $app.css[componentType][name].class = nstyle.class;
-                }
-            }
-        });
-        sendUserToast(`Applied style to all instances of the ${componentType.replace('component', '')} component`);
-    }
-}
-</script>
-
-<Button
-	variant="border"
-	color="light"
-	size="xs"
-	aria-label="Apply to all instances of this component"
-	btnClasses="ml-3 mt-2"
-	on:click={applyToAllInstances}
->
-	Copy style to global CSS &nbsp;<Copy size={18} />
-</Button>
-
-{#if component && component.customCss !== undefined}
-	{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
-		<div class="w-full">
-			<CssProperty
-				quickStyleProperties={quickStyleProperties?.[component.type]?.[name]}
-				forceStyle={ccomponents[component.type].customCss[name].style !== undefined}
-				forceClass={ccomponents[component.type].customCss[name].class !== undefined}
-				{name}
-				componentType={component.type}
-				bind:value={component.customCss[name]}
-				on:change={() => app.set($app)}
-			/>
-		</div>
-	{/each}
-{/if}

package/dist/components/apps/editor/settingsPanel/StylePanel.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type AppComponent } from '../component';
-declare const __propDef: {
-    props: {
-        component: AppComponent | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type StylePanelProps = typeof __propDef.props;
-export type StylePanelEvents = typeof __propDef.events;
-export type StylePanelSlots = typeof __propDef.slots;
-export default class StylePanel extends SvelteComponentTyped<StylePanelProps, StylePanelEvents, StylePanelSlots> {
-}
-export {};

package/dist/components/apps/editor/settingsPanel/SubTypeEditor.svelte

@@ -1,17 +0,0 @@
-<script>import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
-export let value;
-export let componentInput;
-export let subFieldType;
-let fakeComponentInput = {
-    ...componentInput,
-    value
-};
-// Bubble up changes to the real componentInput
-$: fakeComponentInput && (value = fakeComponentInput.value);
-</script>
-
-<StaticInputEditor
-	noVariablePicker
-	fieldType={subFieldType}
-	bind:componentInput={fakeComponentInput}
-/>

package/dist/components/apps/editor/settingsPanel/SubTypeEditor.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { InputType, StaticInput } from '../../inputType';
-declare const __propDef: {
-    props: {
-        value: any;
-        componentInput: StaticInput<any>;
-        subFieldType: InputType | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SubTypeEditorProps = typeof __propDef.props;
-export type SubTypeEditorEvents = typeof __propDef.events;
-export type SubTypeEditorSlots = typeof __propDef.slots;
-export default class SubTypeEditor extends SvelteComponentTyped<SubTypeEditorProps, SubTypeEditorEvents, SubTypeEditorSlots> {
-}
-export {};

package/dist/components/apps/editor/settingsPanel/TableActionLabel.svelte

@@ -1,10 +0,0 @@
-<script>import InputValue from '../../components/helpers/InputValue.svelte';
-export let componentInput;
-let label = '';
-</script>
-
-{#if componentInput !== undefined}
-	<InputValue input={componentInput} bind:value={label} />
-{/if}
-
-{label}

package/dist/components/apps/editor/settingsPanel/TableActionLabel.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { RichConfiguration } from '../../types';
-declare const __propDef: {
-    props: {
-        componentInput: RichConfiguration | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TableActionLabelProps = typeof __propDef.props;
-export type TableActionLabelEvents = typeof __propDef.events;
-export type TableActionLabelSlots = typeof __propDef.slots;
-export default class TableActionLabel extends SvelteComponentTyped<TableActionLabelProps, TableActionLabelEvents, TableActionLabelSlots> {
-}
-export {};

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

@@ -1,83 +0,0 @@
-<script>import { Badge } from '../../../common';
-import Button from '../../../common/button/Button.svelte';
-import { getNextId } from '../../../flows/idUtils';
-import { classNames } from '../../../../utils';
-import { faPlus, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
-import { appComponentFromType, clearErrorByComponentId, clearJobsByComponentId } from '../appUtils';
-import PanelSection from './common/PanelSection.svelte';
-import TableActionLabel from './TableActionLabel.svelte';
-export let components;
-export let id;
-const { selectedComponent, app, errorByComponent, jobs } = getContext('AppViewerContext');
-function addComponent() {
-    const actionId = getNextId(components.map((x) => x.id.split('_')[1]));
-    const newComponent = {
-        ...appComponentFromType('buttoncomponent')(`${id}_${actionId}`),
-        recomputeIds: []
-    };
-    components = [...components, newComponent];
-    $app = $app;
-}
-function deleteComponent(cid) {
-    components = components.filter((x) => x.id !== cid);
-    $errorByComponent = clearErrorByComponentId(cid, $errorByComponent);
-    $jobs = clearJobsByComponentId(cid, $jobs);
-    $selectedComponent = [id];
-    $app = $app;
-}
-</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}
-		<span class="text-xs text-gray-500">No action buttons</span>
-	{/if}
-	{#each components as component}
-		<div
-			class={classNames(
-				'w-full text-xs font-bold gap-1 truncate 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',
-				$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
-			)}
-			on:click={() => {
-				$selectedComponent = [component.id]
-			}}
-			on:keypress
-		>
-			<Badge color="dark-indigo">
-				{component.id}
-			</Badge>
-
-			<div>
-				<TableActionLabel componentInput={component.configuration.label} />
-			</div>
-			<div>
-				<Button variant="border" color="red" on:click={() => deleteComponent(component.id)}>
-					<Icon class="h-3" data={faTrashAlt} />
-				</Button>
-			</div>
-		</div>
-	{/each}
-	<div class="w-full">
-		<Button
-			btnClasses="w-full"
-			color="light"
-			variant="border"
-			startIcon={{ icon: faPlus }}
-			on:click={addComponent}
-			iconOnly
-		/>
-	</div>
-</PanelSection>

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

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../types';
-import type { ButtonComponent } from '../component';
-declare const __propDef: {
-    props: {
-        components: (BaseAppComponent & ButtonComponent)[];
-        id: string;
-    };
-    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/dist/components/apps/editor/settingsPanel/common/PanelSection.svelte

@@ -1,30 +0,0 @@
-<script>import { classNames } from '../../../../../utils';
-import Tooltip from '../../../../Tooltip.svelte';
-export let title;
-export let noPadding = false;
-export let titlePadding = '';
-export let tooltip = '';
-</script>
-
-<div
-	class={classNames(
-		$$props.class,
-		'flex flex-col h-full gap-2 items-start',
-		noPadding ? '' : 'p-3'
-	)}
->
-	<div class="flex justify-between flex-wrap items-center w-full gap-1">
-		<div class="text-sm inline-flex items-center font-extrabold {titlePadding} gap-1">
-			<span class="truncate">
-				{title}
-			</span>
-			{#if tooltip}
-				<Tooltip light>
-					{tooltip}
-				</Tooltip>
-			{/if}
-		</div>
-		<slot name="action" />
-	</div>
-	<slot />
-</div>

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

@@ -1,23 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        title: string;
-        noPadding?: boolean | undefined;
-        titlePadding?: string | undefined;
-        tooltip?: string | undefined;
-    };
-    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/dist/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte

@@ -1,48 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import ColorPicker, { ChromeVariant } from 'svelte-awesome-color-picker';
-import { ClearableInput } from '../../../../common';
-export let value = '#fff';
-const dispatch = createEventDispatcher();
-let isOpen = false;
-$: dispatch('change', value);
-</script>
-
-<div class="color-picker-input grow">
-	<ClearableInput readonly bind:value on:focus={() => (isOpen = true)} />
-	<ColorPicker
-		bind:isOpen
-		bind:hex={value}
-		label={value}
-		canChangeMode={false}
-		components={ChromeVariant}
-		toRight
-		--focus-color="#e0e7ff"
-	/>
-</div>
-
-<style global>
-	:global(.color-picker-input) :global(span) > :global(label) {
-		display: none;
-	}
-
-	:global(.color-picker-input) :global(span) > :global(div.wrapper) {
-		box-shadow: 0 10px 40px -5px rgba(0, 0, 0, 0.25) !important;
-		border-style: none !important;
-		border-radius: 0.375rem !important;
-		z-index: 30;
-	}
-
-	:global(.color-picker-input) :global(.slider-wrapper) {
-		overflow: visible !important;
-	}
-
-	:global(.color-picker-input) :global(.slider-indicator) {
-		width: 14px !important;
-		height: 14px !important;
-		border-radius: 7px !important;
-		margin-top: 0 !important;
-		background-color: #fafafa !important;
-		border: 1px solid #2e2e2eaf !important;
-		top: -2px !important;
-		box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.5) !important;
-	}</style>

package/dist/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte.d.ts

@@ -1,18 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        value?: string | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ColorInputProps = typeof __propDef.props;
-export type ColorInputEvents = typeof __propDef.events;
-export type ColorInputSlots = typeof __propDef.slots;
-export default class ColorInput extends SvelteComponentTyped<ColorInputProps, ColorInputEvents, ColorInputSlots> {
-}
-export {};

package/dist/components/apps/editor/settingsPanel/inputEditor/ConnectedInputEditor.svelte

@@ -1,70 +0,0 @@
-<script>import { Badge, Button } from '../../../../common';
-import { faArrowRight, faClose } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-export let componentInput;
-const { connectingInput, app } = getContext('AppViewerContext');
-function applyConnection() {
-    if (!$connectingInput.opened &&
-        $connectingInput.input !== undefined &&
-        !componentInput.connection) {
-        componentInput.connection = $connectingInput.input.connection;
-        $connectingInput = {
-            opened: false,
-            input: undefined,
-            hoveredComponent: undefined
-        };
-        $app = $app;
-    }
-}
-$: $connectingInput && applyConnection();
-</script>
-
-{#if componentInput.connection}
-	<div class="flex justify-between w-full gap-1">
-		<span class="text-xs">Status</span>
-		<Badge color="green">Connected</Badge>
-	</div>
-	<div class="flex justify-between w-full">
-		<span class="text-xs">Component</span>
-		<Badge color="indigo">{componentInput.connection.componentId}</Badge>
-	</div>
-	<div class="flex justify-between w-full">
-		<span class="text-xs">Path</span>
-		<Badge color="indigo">{componentInput.connection.path}</Badge>
-	</div>
-	<Button
-		size="xs"
-		startIcon={{ icon: faClose }}
-		color="red"
-		variant="border"
-		on:click={() => {
-			if (componentInput.type === 'connected') {
-				componentInput.connection = undefined
-			}
-			$app = $app
-		}}
-	>
-		Disconnect
-	</Button>
-{:else}
-	<div class="flex justify-between w-full gap-1">
-		<span class="text-xs">Status</span>
-		<Badge color="yellow">Not connected</Badge>
-	</div>
-	<Button
-		size="xs"
-		endIcon={{ icon: faArrowRight }}
-		color="blue"
-		on:click={() => {
-			if (componentInput.type === 'connected') {
-				$connectingInput = {
-					opened: true,
-					input: undefined,
-					hoveredComponent: undefined
-				}
-			}
-		}}
-	>
-		Connect
-	</Button>
-{/if}