windmill-components 1.89.0 → 1.103.0

package/dist/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
-        recomputeIds?: string[] | undefined;
-        extraQueryParams?: Record<string, any> | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        noWFull?: boolean | undefined;
-        preclickAction?: (() => Promise<void>) | undefined;
-        customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined;
-        render: boolean;
-        initializing?: boolean | undefined;
-        extraKey?: string | undefined;
-        controls?: {
-            left: () => boolean;
-            right: () => boolean | string;
-        } | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppButtonProps = typeof __propDef.props;
-export type AppButtonEvents = typeof __propDef.events;
-export type AppButtonSlots = typeof __propDef.slots;
-export default class AppButton extends SvelteComponentTyped<AppButtonProps, AppButtonEvents, AppButtonSlots> {
-}
-export {};

package/dist/components/apps/components/buttons/AppForm.svelte

@@ -1,98 +0,0 @@
-<script>import { Button } from '../../../common';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import { concatCustomCss } from '../../utils';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let recomputeIds = undefined;
-export let extraQueryParams = {};
-export let horizontalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-export const staticOutputs = ['loading', 'result'];
-const { app, worldStore, stateId } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-let resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
-let runnableComponent;
-let isLoading = false;
-$: noInputs =
-    $stateId != undefined &&
-        (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
-$: css = concatCustomCss($app.css?.formcomponent, customCss);
-let loading = false;
-</script>
-
-{#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
-<RunnableWrapper
-	{recomputeIds}
-	{render}
-	bind:runnableComponent
-	bind:loading
-	{componentInput}
-	{id}
-	doOnSuccess={resolvedConfig.onSuccess}
-	{extraQueryParams}
-	autoRefresh={false}
-	forceSchemaDisplay={true}
-	runnableClass="!block"
-	runnableStyle={css?.container?.style}
-	{outputs}
->
-	<AlignWrapper {horizontalAlignment}>
-		<div
-			class="flex flex-col gap-2 px-4 w-full {css?.container?.class ?? ''}"
-			style={css?.container?.style ?? ''}
-		>
-			<div>
-				{#if noInputs}
-					<div class="text-gray-600 italic text-sm my-4">
-						Run forms are associated with a runnable that has user inputs.
-						<br />
-						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-						<strong>
-							User Input
-							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-						</strong>
-					</div>
-				{/if}
-			</div>
-			<div class="flex justify-end">
-				{#if !noInputs}
-					<Button
-						loading={isLoading}
-						btnClasses="my-1 {css?.button?.class ?? ''}"
-						style={css?.button?.style ?? ''}
-						on:pointerdown={(e) => {
-							e?.stopPropagation()
-						}}
-						on:click={() => {
-							runnableComponent?.runComponent()
-						}}
-						size={resolvedConfig.size}
-						color={resolvedConfig.color}
-					>
-						{resolvedConfig.label}
-					</Button>
-				{/if}
-			</div>
-		</div>
-	</AlignWrapper>
-</RunnableWrapper>

package/dist/components/apps/components/buttons/AppForm.svelte.d.ts

@@ -1,27 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
-        recomputeIds?: string[] | undefined;
-        extraQueryParams?: Record<string, any> | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        customCss?: ComponentCustomCSS<'formcomponent'> | undefined;
-        render: boolean;
-        staticOutputs?: string[] | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppFormProps = typeof __propDef.props;
-export type AppFormEvents = typeof __propDef.events;
-export type AppFormSlots = typeof __propDef.slots;
-export default class AppForm extends SvelteComponentTyped<AppFormProps, AppFormEvents, AppFormSlots> {
-    get staticOutputs(): string[];
-}
-export {};

package/dist/components/apps/components/buttons/AppFormButton.svelte

@@ -1,125 +0,0 @@
-<script>import { Button } from '../../../common';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { getContext } from 'svelte';
-import { Icon } from 'svelte-awesome';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-import { concatCustomCss } from '../../utils';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import AlwaysMountedModal, { getModal } from '../../../common/modal/AlwaysMountedModal.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let recomputeIds = undefined;
-export let extraQueryParams = {};
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-const { app, worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-let resolvedConfig = initConfig(components['formbuttoncomponent'].initialData.configuration, configuration);
-let runnableComponent;
-let errors = {};
-$: errorsMessage = Object.values(errors)
-    .filter((x) => x != '')
-    .join('\n');
-$: noInputs =
-    componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0;
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: css = concatCustomCss($app?.css?.formbuttoncomponent, customCss);
-let runnableWrapper;
-let loading = false;
-</script>
-
-{#each Object.keys(components['formbuttoncomponent'].initialData.configuration) as key (key)}
-	<ResolveConfig
-		{id}
-		{key}
-		bind:resolvedConfig={resolvedConfig[key]}
-		configuration={configuration[key]}
-	/>
-{/each}
-
-<AlwaysMountedModal
-	title={resolvedConfig.label ?? ''}
-	class={css?.popup?.class}
-	style={css?.popup?.style}
->
-	<RunnableWrapper
-		bind:this={runnableWrapper}
-		{recomputeIds}
-		{render}
-		bind:runnableComponent
-		{componentInput}
-		{id}
-		{extraQueryParams}
-		autoRefresh={false}
-		forceSchemaDisplay={true}
-		runnableClass="!block"
-		{outputs}
-		doOnSuccess={resolvedConfig.onSuccess}
-	>
-		<div class="flex flex-col gap-2 px-4 w-full">
-			<div>
-				{#if noInputs}
-					<div class="text-gray-600 italic text-sm my-4">
-						Run forms are associated with a runnable that has user inputs.
-						<br />
-						Once a script or flow is chosen, set some <strong>Runnable Inputs</strong> to
-						<strong>
-							User Input
-							<Icon data={faUser} scale={1.3} class="rounded-sm bg-gray-200 p-1 ml-0.5" />
-						</strong>
-					</div>
-				{/if}
-			</div>
-			<div class="flex justify-end">
-				<Button
-					{loading}
-					btnClasses="my-1"
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					on:click={async () => {
-						if (!runnableComponent) {
-							runnableWrapper.onSuccess()
-						} else {
-							await runnableComponent?.runComponent()
-						}
-						getModal().close()
-					}}
-					size="xs"
-					color="dark"
-				>
-					Submit
-				</Button>
-			</div>
-		</div>
-	</RunnableWrapper>
-</AlwaysMountedModal>
-
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	{#if errorsMessage}
-		<div class="text-red-500 text-xs">{errorsMessage}</div>
-	{/if}
-	<Button
-		disabled={resolvedConfig.disabled ?? false}
-		size={resolvedConfig.size ?? 'md'}
-		color={resolvedConfig.color}
-		btnClasses={css?.button?.class ?? ''}
-		style={css?.button?.style ?? ''}
-		on:click={(e) => {
-			getModal().open()
-		}}
-	>
-		{resolvedConfig.label}
-	</Button>
-</AlignWrapper>

package/dist/components/apps/components/buttons/AppFormButton.svelte.d.ts

@@ -1,26 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { AppInput } from '../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../types';
-declare const __propDef: {
-    props: {
-        id: string;
-        componentInput: AppInput | undefined;
-        configuration: RichConfigurations;
-        recomputeIds?: string[] | undefined;
-        extraQueryParams?: Record<string, any> | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        customCss?: ComponentCustomCSS<'formbuttoncomponent'> | undefined;
-        render: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppFormButtonProps = typeof __propDef.props;
-export type AppFormButtonEvents = typeof __propDef.events;
-export type AppFormButtonSlots = typeof __propDef.slots;
-export default class AppFormButton extends SvelteComponentTyped<AppFormButtonProps, AppFormButtonEvents, AppFormButtonSlots> {
-}
-export {};

package/dist/components/apps/components/buttons/index.d.ts

@@ -1,3 +0,0 @@
-export { default as AppButton } from './AppButton.svelte';
-export { default as AppForm } from './AppForm.svelte';
-export { default as AppFormButton } from './AppFormButton.svelte';

package/dist/components/apps/components/buttons/index.js

@@ -1,3 +0,0 @@
-export { default as AppButton } from './AppButton.svelte';
-export { default as AppForm } from './AppForm.svelte';
-export { default as AppFormButton } from './AppFormButton.svelte';

package/dist/components/apps/components/display/AppBarChart.svelte

@@ -1,75 +0,0 @@
-<script>import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js';
-import { getContext } from 'svelte';
-import { Bar, Line } from 'svelte-chartjs';
-import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
-import InputValue from '../helpers/InputValue.svelte';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let configuration;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-const { app, worldStore } = getContext('AppViewerContext');
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement);
-let result = undefined;
-let theme = 'theme1';
-let lineChart = false;
-$: backgroundColor = {
-    theme1: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
-    // blue theme
-    theme2: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
-    // red theme
-    theme3: ['#e74a3b', '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e']
-}[theme];
-const lineOptions = {
-    responsive: true,
-    animation: false,
-    maintainAspectRatio: false,
-    plugins: {
-        legend: {
-            display: false
-        }
-    }
-};
-const barOptions = {
-    responsive: true,
-    animation: false,
-    maintainAspectRatio: false,
-    plugins: {
-        legend: {
-            display: false
-        }
-    }
-};
-$: data = {
-    labels: result?.labels ?? [],
-    datasets: [
-        {
-            data: result?.data ?? [],
-            backgroundColor
-        }
-    ]
-};
-$: css = concatCustomCss($app.css?.barchartcomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.theme} bind:value={theme} />
-<InputValue {id} input={configuration.line} bind:value={lineChart} />
-
-<RunnableWrapper {outputs} {render} autoRefresh {componentInput} {id} bind:initializing bind:result>
-	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
-		{#if result}
-			{#if lineChart}
-				<Line {data} options={lineOptions} />
-			{:else}
-				<Bar {data} options={barOptions} />
-			{/if}
-		{/if}
-	</div>
-</RunnableWrapper>

package/dist/components/apps/components/display/AppDisplayComponent.svelte.d.ts

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } 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<'displaycomponent'> | undefined;
-        render: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type AppDisplayComponentProps = typeof __propDef.props;
-export type AppDisplayComponentEvents = typeof __propDef.events;
-export type AppDisplayComponentSlots = typeof __propDef.slots;
-export default class AppDisplayComponent extends SvelteComponentTyped<AppDisplayComponentProps, AppDisplayComponentEvents, AppDisplayComponentSlots> {
-}
-export {};

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

@@ -1,59 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
-import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
-export let id;
-export let componentInput;
-export let initializing = undefined;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, selectedComponent, mode } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-let result = undefined;
-let h = undefined;
-let w = undefined;
-$: css = concatCustomCss($app.css?.htmlcomponent, customCss);
-</script>
-
-<div
-	on:pointerdown={(e) => {
-		e?.preventDefault()
-	}}
-	class="h-full w-full"
-	bind:clientHeight={h}
-	bind:clientWidth={w}
->
-	{#if $mode == 'dnd'}
-		<button
-			class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
-			on:click={() => ($selectedComponent = [id])}>Select</button
-		>
-	{/if}
-
-	<RunnableWrapper
-		{outputs}
-		{render}
-		autoRefresh
-		{componentInput}
-		{id}
-		bind:initializing
-		bind:result
-	>
-		{#key result}
-			<iframe
-				frameborder="0"
-				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
-				class="p-0 {css?.container?.class ?? ''}"
-				title="sandbox"
-				srcdoc={result
-					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
-					: ''}
-			/>
-		{/key}
-		<!-- svelte-ignore a11y-click-events-have-key-events -->
-		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
-	</RunnableWrapper>
-</div>

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

@@ -1,52 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
-import { AlignWrapper, InputValue } from '../helpers';
-import { loadIcon } from '../icon';
-import InitializeComponent from '../helpers/InitializeComponent.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');
-//used so that we can count number of outputs setup for first refresh
-initOutput($worldStore, id, {});
-let icon = undefined;
-let size;
-let color;
-let strokeWidth;
-let iconComponent;
-$: handleIcon(icon);
-async function handleIcon(i) {
-    iconComponent = i ? await loadIcon(i) : undefined;
-}
-$: css = concatCustomCss($app.css?.iconcomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.icon} bind:value={icon} />
-<InputValue {id} input={configuration.size} bind:value={size} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
-
-<InitializeComponent {id} />
-
-<AlignWrapper
-	{render}
-	{horizontalAlignment}
-	{verticalAlignment}
-	class={css?.container?.class ?? ''}
-	style={css?.container?.style ?? ''}
->
-	{#if icon && iconComponent}
-		<svelte:component
-			this={iconComponent}
-			size={size || 24}
-			color={color || 'currentColor'}
-			strokeWidth={strokeWidth || 2}
-			class={css?.icon?.class ?? ''}
-			style={css?.icon?.style ?? ''}
-		/>
-	{/if}
-</AlignWrapper>

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

@@ -1,49 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { initConfig, initOutput } from '../../editor/appUtils';
-import { components } from '../../editor/component';
-import { concatCustomCss } from '../../utils';
-import Loader from '../helpers/Loader.svelte';
-import ResolveConfig from '../helpers/ResolveConfig.svelte';
-import InitializeComponent from '../helpers/InitializeComponent.svelte';
-export let id;
-export let configuration;
-export let customCss = undefined;
-export let render;
-let 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, {});
-$: css = concatCustomCss($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}
-
-{#if render}
-	<Loader loading={resolvedConfig.source == undefined}>
-		<img
-			on:pointerdown|preventDefault
-			src={resolvedConfig.source}
-			alt={resolvedConfig.altText}
-			style={css?.image?.style ?? ''}
-			class={twMerge(
-				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
-				css?.image?.class ?? ''
-			)}
-		/>
-	</Loader>
-{/if}

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

@@ -1,22 +0,0 @@
-import { SvelteComponentTyped } 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 SvelteComponentTyped<AppImageProps, AppImageEvents, AppImageSlots> {
-}
-export {};