windmill-components 1.472.1 → 1.472.2

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte

@@ -0,0 +1,104 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { IS_APP_PUBLIC_CONTEXT_KEY } from '../../types';
+import { initCss } from '../../utils';
+import TestJobLoader from '../../../TestJobLoader.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import DisplayResult from '../../../DisplayResult.svelte';
+import { userStore } from '../../../../stores';
+export let id;
+export let initializing = false;
+export let customCss = undefined;
+export let configuration;
+export let render;
+const { app, worldStore, workspace, appPath } = getContext('AppViewerContext');
+const requireHtmlApproval = getContext(IS_APP_PUBLIC_CONTEXT_KEY);
+let resolvedConfig = initConfig(components['jobiddisplaycomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    jobId: undefined
+});
+initializing = false;
+let css = initCss($app.css?.jobiddisplaycomponent, customCss);
+let testJobLoader = undefined;
+let testIsLoading = false;
+let testJob = undefined;
+$: if (resolvedConfig.jobId) {
+    outputs.loading.set(true);
+    testJobLoader?.watchJob(resolvedConfig?.['jobId']);
+}
+let result = undefined;
+</script>
+
+{#each Object.keys(components['jobiddisplaycomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.jobiddisplaycomponent}
+	/>
+{/each}
+
+<TestJobLoader
+	workspaceOverride={workspace}
+	bind:this={testJobLoader}
+	bind:isLoading={testIsLoading}
+	bind:job={testJob}
+	on:done={(e) => {
+		outputs.loading.set(false)
+		outputs.jobId.set(e.detail.id)
+		outputs.result.set(e.detail.result)
+		result = e.detail.result
+	}}
+/>
+
+<InitializeComponent {id} />
+
+{#if render}
+	<div class="flex flex-col w-full h-full component-wrapper">
+		<div
+			class={twMerge(
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
+				css?.header?.class
+			)}
+			style={css?.header?.style}
+		>
+			{resolvedConfig?.title ? resolvedConfig?.title : 'Result'}
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['displaycomponent']?.['container']?.style,
+				customCss?.container?.style,
+				'wm-rich-result-container'
+			)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['displaycomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			<DisplayResult
+				workspaceId={workspace}
+				{result}
+				{requireHtmlApproval}
+				disableExpand={resolvedConfig?.hideDetails}
+				appPath={$userStore ? undefined : $appPath}
+			/>
+		</div>
+	</div>
+{/if}

package/package/components/apps/components/display/AppDisplayComponentByJobId.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type ComponentCustomCSS, type RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'jobiddisplaycomponent'> | undefined;
+        configuration: RichConfigurations;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDisplayComponentByJobIdProps = typeof __propDef.props;
+export type AppDisplayComponentByJobIdEvents = typeof __propDef.events;
+export type AppDisplayComponentByJobIdSlots = typeof __propDef.slots;
+export default class AppDisplayComponentByJobId extends SvelteComponent<AppDisplayComponentByJobIdProps, AppDisplayComponentByJobIdEvents, AppDisplayComponentByJobIdSlots> {
+}
+export {};

package/package/components/apps/components/display/AppDownload.svelte

@@ -0,0 +1,108 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import { initCss, transformBareBase64IfNecessary } from '../../utils';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { Button } from '../../../common';
+import { loadIcon } from '../icon';
+import ComponentErrorHandler from '../helpers/ComponentErrorHandler.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+const resolvedConfig = initConfig(components['downloadcomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let beforeIconComponent;
+let afterIconComponent;
+$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
+$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
+async function handleBeforeIcon() {
+    if (resolvedConfig.beforeIcon) {
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
+    }
+}
+async function handleAfterIcon() {
+    if (resolvedConfig.afterIcon) {
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
+    }
+}
+let css = initCss($app.css?.downloadcomponent, customCss);
+</script>
+
+<InitializeComponent {id} />
+
+{#each Object.keys(components['downloadcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.downloadcomponent}
+	/>
+{/each}
+
+{#if render}
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		<ComponentErrorHandler
+			hasError={resolvedConfig?.source != undefined && typeof resolvedConfig.source !== 'string'}
+		>
+			<Button
+				on:pointerdown={(e) => e.stopPropagation()}
+				btnClasses={twMerge(
+					css?.button?.class,
+					'wm-button',
+					'wm-download-button',
+					resolvedConfig.fillContainer ? 'w-full h-full' : ''
+				)}
+				wrapperClasses={twMerge(
+					'wm-button-container',
+					'wm-download-button-container',
+					resolvedConfig.fillContainer ? 'w-full h-full' : ''
+				)}
+				style={css?.button?.style}
+				disabled={resolvedConfig.source == undefined}
+				size={resolvedConfig.size}
+				color={resolvedConfig.color}
+				download={resolvedConfig.filename}
+				href={transformBareBase64IfNecessary(resolvedConfig.source)}
+				target="_blank"
+				ref="external"
+				nonCaptureEvent
+			>
+				<span class="truncate inline-flex gap-2 items-center">
+					{#if resolvedConfig.beforeIcon}
+						{#key resolvedConfig.beforeIcon}
+							<div class="min-w-4" bind:this={beforeIconComponent} />
+						{/key}
+					{/if}
+					{#if resolvedConfig.label && resolvedConfig.label?.length > 0}
+						<div>{resolvedConfig.label}</div>
+					{/if}
+					{#if resolvedConfig.afterIcon}
+						{#key resolvedConfig.afterIcon}
+							<div class="min-w-4" bind:this={afterIconComponent} />
+						{/key}
+					{/if}
+				</span>
+			</Button>
+		</ComponentErrorHandler>
+	</AlignWrapper>
+{/if}

package/package/components/apps/components/display/AppDownload.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'downloadcomponent'> | undefined;
+        render: boolean;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDownloadProps = typeof __propDef.props;
+export type AppDownloadEvents = typeof __propDef.events;
+export type AppDownloadSlots = typeof __propDef.slots;
+export default class AppDownload extends SvelteComponent<AppDownloadProps, AppDownloadEvents, AppDownloadSlots> {
+}
+export {};

package/package/components/apps/components/display/AppFlowStatusComponent.svelte

@@ -0,0 +1,15 @@
+<script>import { Alert } from '../../../common';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+</script>
+
+<AlignWrapper verticalAlignment="center" horizontalAlignment="center">
+	<Alert
+		title="Deprecated component"
+		documentationLink="https://www.windmill.dev/docs/apps/app_configuration_settings/flow_status"
+		tooltip="See documentation of the new component:"
+		type="error"
+	>
+		This component is deprecated and has been removed. Please use the Flow status by Job Id
+		component instead.
+	</Alert>
+</AlignWrapper>

package/package/components/apps/components/display/AppFlowStatusComponent.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppFlowStatusComponentProps = typeof __propDef.props;
+export type AppFlowStatusComponentEvents = typeof __propDef.events;
+export type AppFlowStatusComponentSlots = typeof __propDef.slots;
+export default class AppFlowStatusComponent extends SvelteComponent<AppFlowStatusComponentProps, AppFlowStatusComponentEvents, AppFlowStatusComponentSlots> {
+}
+export {};

package/package/components/apps/components/display/AppHtml.svelte

@@ -0,0 +1,57 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, mode } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let result = undefined;
+let css = initCss($app.css?.htmlcomponent, customCss);
+</script>
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.htmlcomponent}
+	/>
+{/each}
+
+{#if render}
+	<div
+		on:pointerdown={(e) => {
+			if ($mode !== 'preview') {
+				e?.preventDefault()
+			}
+		}}
+		class="h-full w-full"
+	>
+		<RunnableWrapper
+			{outputs}
+			{render}
+			autoRefresh
+			{componentInput}
+			{id}
+			bind:initializing
+			bind:result
+		>
+			<div class="w-full h-full overflow-auto">
+				{#key result}
+					{@html result}
+				{/key}
+			</div>
+		</RunnableWrapper>
+	</div>
+{:else}
+	<RunnableWrapper {outputs} render={false} autoRefresh {componentInput} {id} />
+{/if}

package/package/components/apps/components/display/AppHtml.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentInput: AppInput | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'htmlcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppHtmlProps = typeof __propDef.props;
+export type AppHtmlEvents = typeof __propDef.events;
+export type AppHtmlSlots = typeof __propDef.slots;
+export default class AppHtml extends SvelteComponent<AppHtmlProps, AppHtmlEvents, AppHtmlSlots> {
+}
+export {};

package/package/components/apps/components/display/AppIcon.svelte

@@ -0,0 +1,66 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import { loadIcon } from '../icon';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { twMerge } from 'tailwind-merge';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+export let id;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['iconcomponent'].initialData.configuration, configuration);
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let iconComponent;
+$: handleIcon(resolvedConfig, iconComponent);
+async function handleIcon(conf, comp) {
+    if (conf.icon && comp) {
+        await loadIcon(conf.icon, iconComponent, conf.size, conf.strokeWidth, conf.color);
+    }
+}
+let css = initCss($app.css?.iconcomponent, customCss);
+</script>
+
+{#each Object.keys(components['iconcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.iconcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper
+	{render}
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={twMerge(css?.container?.class, 'wm-icon-container')}
+	style={css?.container?.style ?? ''}
+>
+	{#if resolvedConfig.icon}
+		<div
+			bind:this={iconComponent}
+			class={twMerge(css?.icon?.class, 'wm-icon')}
+			style={css?.icon?.style ?? ''}
+		/>
+	{/if}
+</AlignWrapper>

package/package/components/apps/components/display/AppIcon.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'iconcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppIconProps = typeof __propDef.props;
+export type AppIconEvents = typeof __propDef.events;
+export type AppIconSlots = typeof __propDef.slots;
+export default class AppIcon extends SvelteComponent<AppIconProps, AppIconEvents, AppIconSlots> {
+}
+export {};

package/package/components/apps/components/display/AppImage.svelte

@@ -0,0 +1,67 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import { initCss } from '../../utils';
+import Loader from '../helpers/Loader.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
+const fit = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill'
+};
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let css = initCss($app.css?.imagecomponent, customCss);
+</script>
+
+<InitializeComponent {id} />
+
+{#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.imagecomponent}
+	/>
+{/each}
+
+{#if render}
+	<Loader loading={resolvedConfig.source == undefined}>
+		<img
+			on:pointerdown|preventDefault
+			src={resolvedConfig.sourceKind == 'png encoded as base64'
+				? 'data:image/png;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'jpeg encoded as base64'
+				? 'data:image/jpeg;base64,' + resolvedConfig.source
+				: resolvedConfig.sourceKind == 'svg encoded as base64'
+				? 'data:image/svg+xml;base64,' + resolvedConfig.source
+				: resolvedConfig.source}
+			alt={resolvedConfig.altText}
+			style={css?.image?.style ?? ''}
+			class={twMerge(
+				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
+				css?.image?.class,
+				'wm-image'
+			)}
+		/>
+	</Loader>
+{/if}

package/package/components/apps/components/display/AppImage.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'imagecomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppImageProps = typeof __propDef.props;
+export type AppImageEvents = typeof __propDef.events;
+export type AppImageSlots = typeof __propDef.slots;
+export default class AppImage extends SvelteComponent<AppImageProps, AppImageEvents, AppImageSlots> {
+}
+export {};

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte

@@ -0,0 +1,88 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import FlowStatusViewer from '../../../FlowStatusViewer.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let initializing = false;
+export let customCss = undefined;
+export let configuration;
+export let render;
+const { app, worldStore, workspace } = getContext('AppViewerContext');
+const resolvedConfig = initConfig(components['jobidlogcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false,
+    jobId: undefined
+});
+initializing = false;
+let css = initCss($app.css?.jobidflowstatuscomponent, customCss);
+$: jobId = resolvedConfig.jobId;
+</script>
+
+{#each Object.keys(components['jobidflowstatuscomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.jobidflowstatuscomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+{#if render}
+	<div class="flex flex-col w-full h-full component-wrapper">
+		<div
+			class={twMerge(
+				'w-full border-b p-2 text-xs font-semibold text-primary bg-surface-secondary',
+				css?.header?.class
+			)}
+			style={css?.header?.style}
+		>
+			Flow Status
+		</div>
+		<div
+			style={twMerge(
+				$app.css?.['flowstatuscomponent']?.['container']?.style,
+				customCss?.container?.style
+			)}
+			class={twMerge(
+				'p-2 grow overflow-auto',
+				$app.css?.['flowstatuscomponent']?.['container']?.class,
+				customCss?.container?.class
+			)}
+		>
+			{#if jobId}
+				<FlowStatusViewer
+					workspaceId={workspace}
+					{jobId}
+					on:start={() => {
+						outputs?.jobId.set(jobId)
+						outputs?.loading.set(true)
+					}}
+					on:done={(e) => {
+						outputs?.loading.set(false)
+						outputs?.result.set(e?.detail?.result)
+					}}
+				/>
+			{:else}
+				<span class="text-secondary text-xs">No flow</span>
+			{/if}
+		</div>
+	</div>
+{/if}

package/package/components/apps/components/display/AppJobIdFlowStatus.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'jobidflowstatuscomponent'> | undefined;
+        configuration: RichConfigurations;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppJobIdFlowStatusProps = typeof __propDef.props;
+export type AppJobIdFlowStatusEvents = typeof __propDef.events;
+export type AppJobIdFlowStatusSlots = typeof __propDef.slots;
+export default class AppJobIdFlowStatus extends SvelteComponent<AppJobIdFlowStatusProps, AppJobIdFlowStatusEvents, AppJobIdFlowStatusSlots> {
+}
+export {};