windmill-components 1.89.0 → 1.103.0

package/dist/components/apps/editor/AppInputs.svelte

@@ -1,59 +0,0 @@
-<script>import { Alert } from '../../common';
-import Toggle from '../../Toggle.svelte';
-import { getContext } from 'svelte';
-import { allItems } from '../utils';
-import AppComponentInput from './AppComponentInput.svelte';
-import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-const { app } = getContext('AppViewerContext');
-let resourceOnly = true;
-</script>
-
-<Alert type="info" title="Configurations">
-	In order to properly configure the app, you need to fill in the inputs below.
-</Alert>
-<div class="mt-2 flex flex-row-reverse">
-	<Toggle bind:checked={resourceOnly} options={{ right: 'Resource only' }} />
-</div>
-<div class="gap-4 flex flex-col pt-4">
-	{#each allItems($app.grid, $app.subgrids) as gridItem (gridItem.data.id)}
-		{#if gridItem?.data?.type === 'tablecomponent'}
-			<div>
-				<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
-				<div class="ml-4 mt-4">
-					{#each gridItem.data.actionButtons as actionButton (actionButton.id)}
-						<AppComponentInput bind:component={actionButton.data} {resourceOnly} />
-					{/each}
-				</div>
-			</div>
-		{:else}
-			<AppComponentInput bind:component={gridItem.data} {resourceOnly} />
-		{/if}
-	{/each}
-</div>
-
-{#if $app?.hiddenInlineScripts?.length > 0}
-	<div class="font-bold text-lg">Background script inputs</div>
-	<div class="gap-4 flex flex-col pt-4">
-		{#each $app?.hiddenInlineScripts ?? [] as script, index (script.name)}
-			<div class="border p-2">
-				<div class="text-sm font-bold">{script.name}</div>
-
-				{#if resourceOnly && Object.keys(script.fields).filter((fieldKey) => {
-						const fields = script.fields
-						const field = fields[fieldKey]
-						return field.fieldType === 'object' && field.format?.startsWith('resource-')
-					}).length === 0}
-					<span class="text-sm text-gray-600">No resource input</span>
-				{:else}
-					<InputsSpecsEditor
-						id={`bg_${index}`}
-						shouldCapitalize={false}
-						bind:inputSpecs={script.fields}
-						userInputEnabled={false}
-						{resourceOnly}
-					/>
-				{/if}
-			</div>
-		{/each}
-	</div>
-{/if}

package/dist/components/apps/editor/AppInputs.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppInputsProps = typeof __propDef.props;
-export type AppInputsEvents = typeof __propDef.events;
-export type AppInputsSlots = typeof __propDef.slots;
-export default class AppInputs extends SvelteComponentTyped<AppInputsProps, AppInputsEvents, AppInputsSlots> {
-}
-export {};

package/dist/components/apps/editor/AppPreview.svelte

@@ -1,161 +0,0 @@
-<script>import { setContext } from 'svelte';
-import { writable } from 'svelte/store';
-import { buildWorld } from '../rx';
-import { classNames } from '../../../utils';
-import Button from '../../common/button/Button.svelte';
-import { Unlock } from 'lucide-svelte';
-import RecomputeAllComponents from './RecomputeAllComponents.svelte';
-import GridViewer from './GridViewer.svelte';
-import { Component } from './component';
-import { twMerge } from 'tailwind-merge';
-import { columnConfiguration } from '../gridUtils';
-import { HiddenComponent } from '../components';
-import { deepEqual } from 'fast-equals';
-import { dfs } from './appUtils';
-export let app;
-export let appPath;
-export let breakpoint;
-export let policy;
-export let summary;
-export let workspace;
-export let isEditor;
-export let context;
-export let noBackend = false;
-export let isLocked = false;
-const appStore = writable(app);
-const selectedComponent = writable(undefined);
-const mode = writable('preview');
-const connectingInput = writable({
-    opened: false,
-    input: undefined,
-    hoveredComponent: undefined
-});
-const allIdsInPath = writable([]);
-const parentWidth = writable(0);
-setContext('AppViewerContext', {
-    worldStore: buildWorld(context),
-    initialized: writable({ initialized: false, initializedComponents: [] }),
-    app: appStore,
-    summary: writable(summary),
-    selectedComponent,
-    mode,
-    connectingInput,
-    breakpoint,
-    runnableComponents: writable({}),
-    appPath,
-    workspace,
-    onchange: undefined,
-    isEditor,
-    jobs: writable([]),
-    staticExporter: writable({}),
-    noBackend,
-    errorByComponent: writable({}),
-    openDebugRun: writable(undefined),
-    focusedGrid: writable(undefined),
-    stateId: writable(0),
-    parentWidth,
-    state: writable({}),
-    componentControl: writable({}),
-    hoverStore: writable(undefined),
-    allIdsInPath
-});
-let ncontext = { ...context, workspace };
-function hashchange(e) {
-    ncontext.hash = e.newURL.split('#')[1];
-    ncontext = ncontext;
-}
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs(app.grid, id, app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
-$: width = $breakpoint === 'sm' ? 'max-w-[640px]' : 'w-full ';
-$: lockedClasses = isLocked ? '!max-h-[400px] overflow-hidden pointer-events-none' : '';
-</script>
-
-<svelte:window on:hashchange={hashchange} />
-
-<div id="app-editor-top-level-drawer" />
-
-<div class="relative">
-	<div
-		class="{$$props.class} {lockedClasses} h-full
-	w-full {app.fullscreen ? '' : 'max-w-6xl'} mx-auto"
-	>
-		{#if $appStore.grid}
-			<div
-				class={classNames(
-					'mx-auto',
-					width,
-					$appStore?.norefreshbar ? 'invisible h-0 overflow-hidden' : ''
-				)}
-			>
-				<div
-					class="w-full sticky z-[1001] top-0 flex justify-between border-b bg-gray-50 px-4 py-1 items-center gap-4"
-				>
-					<h2 class="truncate">{summary}</h2>
-					<RecomputeAllComponents />
-					<div class="text-2xs text-gray-600">
-						{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
-					</div>
-				</div>
-			</div>
-		{/if}
-
-		<div
-			style={app.css?.['app']?.['grid']?.style}
-			class={twMerge('px-4 pt-4 pb-2 overflow-visible', app.css?.['app']?.['grid']?.class ?? '')}
-			bind:clientWidth={$parentWidth}
-		>
-			<div>
-				<GridViewer
-					allIdsInPath={$allIdsInPath}
-					items={app.grid}
-					let:dataItem
-					rowHeight={36}
-					cols={columnConfiguration}
-					gap={[4, 2]}
-				>
-					<!-- svelte-ignore a11y-click-events-have-key-events -->
-					<div
-						class={'h-full w-full center-center'}
-						on:pointerdown={() => ($selectedComponent = [dataItem.id])}
-					>
-						<Component render={true} component={dataItem.data} selected={false} locked={true} />
-					</div>
-				</GridViewer>
-			</div>
-		</div>
-	</div>
-
-	{#if isLocked}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div
-			on:click={() => (isLocked = false)}
-			class="absolute inset-0 center-center bg-black/20 z-50 backdrop-blur-[1px] cursor-pointer"
-		>
-			<Button on:click={() => (isLocked = false)}>
-				Unlock preview
-				<Unlock size={18} class="ml-1" strokeWidth={2.5} />
-			</Button>
-		</div>
-	{/if}
-</div>
-
-{#if app.hiddenInlineScripts}
-	{#each app.hiddenInlineScripts as script, index}
-		{#if script}
-			<HiddenComponent
-				id={`bg_${index}`}
-				inlineScript={script.inlineScript}
-				name={script.name}
-				fields={script.fields}
-				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
-				noBackendValue={script.noBackendValue}
-			/>
-		{/if}
-	{/each}
-{/if}

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

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type Writable } from 'svelte/store';
-import type { App, EditorBreakpoint } from '../types';
-import type { Policy } from '../../../gen';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        app: App;
-        appPath: string;
-        breakpoint: Writable<EditorBreakpoint>;
-        policy: Policy;
-        summary: string;
-        workspace: string;
-        isEditor: boolean;
-        context: Record<string, any>;
-        noBackend?: boolean | undefined;
-        isLocked?: boolean | undefined;
-    };
-    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/dist/components/apps/editor/ComponentHeader.svelte

@@ -1,129 +0,0 @@
-<script>import { classNames } from '../../../utils';
-import { Anchor, Bug, Expand, Move, Pen } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
-import Popover from '../../Popover.svelte';
-import { Alert, Button } from '../../common';
-import { twMerge } from 'tailwind-merge';
-import { getErrorFromLatestResult } from './appUtils';
-export let component;
-export let selected;
-export let locked = false;
-export let hover = false;
-export let shouldHideActions = false;
-export let hasInlineEditor = false;
-export let inlineEditorOpened = false;
-const dispatch = createEventDispatcher();
-const { errorByComponent, openDebugRun, jobs, connectingInput } = getContext('AppViewerContext');
-$: error = getErrorFromLatestResult(component.id, $errorByComponent, $jobs);
-function openDebugRuns() {
-    if ($openDebugRun) {
-        $openDebugRun(component.id);
-    }
-}
-</script>
-
-{#if selected || hover}
-	<span
-		on:mousedown|stopPropagation|capture
-		draggable="false"
-		title={`Id: ${component.id}`}
-		class={twMerge(
-			'px-2 text-2xs font-semibold w-fit absolute shadow -top-[9px] -left-[8px] border rounded-sm z-50 cursor-move',
-			selected
-				? 'bg-indigo-500/90 border-indigo-600 text-white'
-				: $connectingInput.opened
-				? 'bg-red-500/90 border-red-600 text-white'
-				: 'bg-blue-500/90 border-blue-600 text-white'
-		)}
-	>
-		{component.id}
-	</span>
-{/if}
-
-{#if selected && !shouldHideActions}
-	<div class="top-[-9px] -right-[8px] flex flex-row absolute gap-1.5 z-50">
-		{#if hasInlineEditor}
-			<button
-				title="Expand"
-				class={classNames(
-					'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-				)}
-				on:click={() => dispatch('triggerInlineEditor')}
-				on:pointerdown|stopPropagation
-			>
-				{#if inlineEditorOpened}
-					<Pen aria-label="Unlock position" size={14} class="text-orange-500" />
-				{:else}
-					<Pen aria-label="Lock position" size={14} />
-				{/if}
-			</button>
-		{/if}
-		<button
-			title="Expand"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-pointer rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-			on:click={() => dispatch('expand')}
-			on:pointerdown|stopPropagation
-		>
-			<Expand aria-label="Expand position" size={14} />
-		</button>
-		<button
-			title="Lock Position"
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border  rounded-sm cursor-pointer',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-			on:click={() => dispatch('lock')}
-			on:pointerdown|stopPropagation
-		>
-			{#if locked}
-				<Anchor aria-label="Unlock position" size={14} class="text-orange-500" />
-			{:else}
-				<Anchor aria-label="Lock position" size={14} />
-			{/if}
-		</button>
-		<span
-			draggable="false"
-			title="Move"
-			on:mousedown|stopPropagation|capture
-			class={classNames(
-				'px-1 text-2xs py-0.5 font-bold w-fit border cursor-move rounded-sm',
-				'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
-			)}
-		>
-			<Move size={14} />
-		</span>
-	</div>
-{/if}
-
-{#if error}
-	{@const json = JSON.parse(JSON.stringify(error))}
-	<span
-		title="Error"
-		class={classNames(
-			'text-red-500 px-1 text-2xs py-0.5 font-bold w-fit absolute border border-red-500 -bottom-1  shadow left-1/2 transform -translate-x-1/2 z-50 cursor-pointer',
-			'bg-red-100/80'
-		)}
-	>
-		<Popover notClickable placement="bottom" popupClass="!bg-white border w-96">
-			<Bug size={14} />
-			<span slot="text">
-				<div class="bg-white">
-					<Alert type="error" title={`${json?.name}: ${json?.message}`}>
-						<div class="flex flex-col gap-2">
-							<div>
-								<pre class=" whitespace-pre-wrap text-gray-900 bg-white border w-full p-4 text-xs">
-									{json?.stack ?? ''}	
-								</pre>
-							</div>
-							<Button color="red" variant="border" on:click={openDebugRuns}>Open Debug Runs</Button>
-						</div>
-					</Alert>
-				</div>
-			</span>
-		</Popover>
-	</span>
-{/if}

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

@@ -1,29 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppComponent } from './component';
-declare const __propDef: {
-    props: {
-        component: AppComponent;
-        selected: boolean;
-        locked?: boolean | undefined;
-        hover?: boolean | undefined;
-        shouldHideActions?: boolean | undefined;
-        hasInlineEditor?: boolean | undefined;
-        inlineEditorOpened?: boolean | undefined;
-    };
-    events: {
-        mousedown: MouseEvent;
-        pointerdown: PointerEvent;
-        triggerInlineEditor: CustomEvent<any>;
-        expand: CustomEvent<any>;
-        lock: 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/dist/components/apps/editor/ConnectionInstructions.svelte

@@ -1,29 +0,0 @@
-<script>import { Alert, Button } from '../../common';
-import { getContext } from 'svelte';
-import { secondaryMenu } from './settingsPanel/secondaryMenu';
-const { connectingInput } = getContext('AppViewerContext');
-function stopConnecting() {
-    $connectingInput.opened = false;
-    $connectingInput.input = undefined;
-    secondaryMenu.close();
-}
-</script>
-
-<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 class="my-2">
-			<ol class="list-disc flex gap-2 flex-col">
-				<li>
-					You can also navigate your app in a viewer mode: You won't be able to fire any events.
-				</li>
-				<li> Clicking on a component will open the component's output on the left. </li>
-			</ol>
-		</div>
-		<div>
-			<Button color="blue" variant="border" size="xs" on:click={stopConnecting}>
-				Stop connecting
-			</Button>
-		</div>
-	</div>
-</Alert>

package/dist/components/apps/editor/ConnectionInstructions.svelte.d.ts

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ConnectionInstructionsProps = typeof __propDef.props;
-export type ConnectionInstructionsEvents = typeof __propDef.events;
-export type ConnectionInstructionsSlots = typeof __propDef.slots;
-export default class ConnectionInstructions extends SvelteComponentTyped<ConnectionInstructionsProps, ConnectionInstructionsEvents, ConnectionInstructionsSlots> {
-}
-export {};

package/dist/components/apps/editor/GridEditor.svelte

@@ -1,127 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { columnConfiguration, isFixed, toggleFixed } from '../gridUtils';
-import { twMerge } from 'tailwind-merge';
-import RecomputeAllComponents from './RecomputeAllComponents.svelte';
-import HiddenComponent from '../components/helpers/HiddenComponent.svelte';
-import Component from './component/Component.svelte';
-import { push } from '../../../history';
-import { dfs, expandGriditem, findGridItem } from './appUtils';
-import Grid from '../svelte-grid/Grid.svelte';
-import { deepEqual } from 'fast-equals';
-import ComponentWrapper from './component/ComponentWrapper.svelte';
-import { classNames } from '../../../utils';
-export let policy;
-const { selectedComponent, app, mode, connectingInput, summary, focusedGrid, parentWidth, breakpoint, allIdsInPath } = getContext('AppViewerContext');
-const { history } = getContext('AppEditorContext');
-let previousSelectedIds = undefined;
-$: if (!deepEqual(previousSelectedIds, $selectedComponent)) {
-    previousSelectedIds = $selectedComponent;
-    $allIdsInPath = ($selectedComponent ?? [])
-        .flatMap((id) => dfs($app.grid, id, $app.subgrids ?? {}))
-        .filter((x) => x != undefined);
-}
-</script>
-
-<div class="relative w-full z-20 overflow-visible">
-	<div
-		class="w-full sticky top-0 flex justify-between border-b {$connectingInput?.opened
-			? ''
-			: 'bg-gray-50 '} px-4 py-1 items-center gap-4"
-		style="z-index: 1000;"
-	>
-		<h2 class="truncate">{$summary}</h2>
-		{#if !$connectingInput.opened}
-			<RecomputeAllComponents />
-		{/if}
-		<div class="flex text-2xs text-gray-600 gap-1 items-center">
-			<div class="py-2 pr-2 text-gray-600 flex gap-2 items-center">
-				Hide bar on view
-				<input class="windmillapp" type="checkbox" bind:checked={$app.norefreshbar} />
-			</div>
-			<div>
-				{policy.on_behalf_of ? `on behalf of ${policy.on_behalf_of_email}` : ''}
-			</div>
-		</div>
-	</div>
-
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<div
-		style={$app.css?.['app']?.['grid']?.style}
-		class={twMerge('px-4 pt-4 pb-2 overflow-visible', $app.css?.['app']?.['grid']?.class ?? '')}
-		on:pointerdown={() => {
-			$selectedComponent = undefined
-			$focusedGrid = undefined
-		}}
-		bind:clientWidth={$parentWidth}
-	>
-		<div class={!$focusedGrid && $mode !== 'preview' ? 'border-gray-400 border border-dashed' : ''}>
-			<Grid
-				allIdsInPath={$allIdsInPath}
-				selectedIds={$selectedComponent}
-				items={$app.grid}
-				on:redraw={(e) => {
-					push(history, $app)
-					$app.grid = e.detail
-				}}
-				let:dataItem
-				rowHeight={36}
-				cols={columnConfiguration}
-				fastStart={true}
-				gap={[4, 2]}
-			>
-				<ComponentWrapper
-					id={dataItem.id}
-					type={dataItem.data.type}
-					class={classNames(
-						'h-full w-full center-center',
-						Boolean($selectedComponent?.includes(dataItem.id)) ? 'active-grid-item' : ''
-					)}
-				>
-					<Component
-						render={true}
-						component={dataItem.data}
-						selected={Boolean($selectedComponent?.includes(dataItem.id))}
-						locked={isFixed(dataItem)}
-						on:lock={() => {
-							const gridItem = findGridItem($app, dataItem.id)
-							if (gridItem) {
-								toggleFixed(gridItem)
-							}
-							$app = $app
-						}}
-						on:expand={() => {
-							push(history, $app)
-							$selectedComponent = [dataItem.id]
-							expandGriditem($app.grid, dataItem.id, $breakpoint)
-							$app = $app
-						}}
-					/>
-				</ComponentWrapper>
-			</Grid>
-		</div>
-	</div>
-</div>
-
-{#if $app.hiddenInlineScripts}
-	{#each $app.hiddenInlineScripts as script, index}
-		{#if script}
-			<HiddenComponent
-				id={`bg_${index}`}
-				inlineScript={script.inlineScript}
-				name={script.name}
-				fields={script.fields}
-				recomputeOnInputChanged={script.recomputeOnInputChanged ?? true}
-				recomputableByRefreshButton={script.autoRefresh ?? false}
-			/>
-		{/if}
-	{/each}
-{/if}
-
-<style global>
-	:global(.svlt-grid-shadow) {
-		/* Back shadow */
-		background: #93c4fdd0 !important;
-	}
-	:global(.svlt-grid-active) {
-		opacity: 1 !important;
-	}</style>

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

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { Policy } from '../../../gen';
-declare const __propDef: {
-    props: {
-        policy: Policy;
-    };
-    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 {};