windmill-components 1.35.42 → 1.35.43

package/components/flows/FlowModuleHeader.svelte

@@ -1,109 +0,0 @@
-<script>import { getScriptByPath } from '../../utils';
-import { faArrowDown, faClose, faCode, faCodeBranch, faSave, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import { createEventDispatcher } from 'svelte';
-import Icon from 'svelte-awesome';
-import { Highlight } from 'svelte-highlight';
-import python from 'svelte-highlight/languages/python';
-import typescript from 'svelte-highlight/languages/typescript';
-import IconedPath from '../IconedPath.svelte';
-import Modal from '../Modal.svelte';
-import { isEmptyFlowModule } from './flowStateUtils';
-import { stepOpened } from './stepOpenedStore';
-export let indexes;
-export let mod;
-$: shouldPick = isEmptyFlowModule(mod);
-let modalViewer;
-let modalViewerContent = '';
-let modalViewerLanguage = 'deno';
-async function viewCode() {
-    if (mod.value.type == 'script') {
-        const { content, language } = await getScriptByPath(mod.value.path);
-        modalViewerContent = content;
-        modalViewerLanguage = language;
-        modalViewer.openModal();
-    }
-    else {
-        throw Error('Not a script');
-    }
-}
-const dispatch = createEventDispatcher();
-$: opened = $stepOpened === String(indexes.join('-'));
-</script>
-
-<div>
-	<h3 class="text-sm font-bold text-gray-900 flex flex-col">
-		<span class="text-xs shrink">
-			{#if 'path' in mod.value && mod.value.path}
-				<IconedPath path={mod.value.path} />
-			{:else if 'language' in mod.value && mod.value.language}
-				Inline {mod.value.language}
-			{:else}
-				Select a script
-			{/if}
-		</span>
-		{#if ('path' in mod.value && mod.value.path) || ('language' in mod.value && mod.value.language)}
-			<input
-				on:click|stopPropagation={() => undefined}
-				class="overflow-x-auto"
-				type="text"
-				bind:value={mod.summary}
-				placeholder="Summary"
-			/>
-		{/if}
-	</h3>
-</div>
-
-<div class="flex flex-row space-x-2" on:click|stopPropagation={() => undefined}>
-	{#if mod.value.type === 'script' && !shouldPick}
-		<Button size="xs" color="alternative" on:click={() => dispatch('fork')}>
-			<Icon data={faCodeBranch} class="mr-2" />
-			Fork
-		</Button>
-		<Button size="xs" color="alternative" on:click={viewCode}>
-			<Icon data={faCode} class="mr-2" />
-			View code
-		</Button>
-	{/if}
-
-	{#if mod.value.type === 'rawscript' && !shouldPick}
-		<Button size="xs" color="alternative" on:click={() => dispatch('createScriptFromInlineScript')}>
-			<Icon data={faSave} class="mr-2" />
-			Save to workspace
-		</Button>
-	{/if}
-	<Button
-		size="xs"
-		color="alternative"
-		on:click={() => {
-			dispatch('delete')
-		}}
-	>
-		<Icon data={faTrashAlt} class="mr-2" />
-		Remove step
-	</Button>
-	{#if opened}
-		<Button size="xs" color="dark" on:click={() => stepOpened.update(() => undefined)}>
-			<Icon data={faClose} />
-		</Button>
-	{:else}
-		<Button
-			size="xs"
-			color="light"
-			on:click={() => stepOpened.update(() => String(indexes.join('-')))}
-		>
-			<Icon data={faArrowDown} />
-		</Button>
-	{/if}
-</div>
-
-<Modal bind:this={modalViewer}>
-	<div slot="title">Script {'path' in mod?.value ? mod?.value.path : ''}</div>
-	<div slot="content">
-		{#if modalViewerLanguage === 'python3'}
-			<Highlight language={python} code={modalViewerContent} />
-		{:else if modalViewerLanguage === 'deno'}
-			<Highlight language={typescript} code={modalViewerContent} />
-		{/if}
-	</div>
-</Modal>

package/components/flows/FlowSettings.svelte

@@ -1,165 +0,0 @@
-<script>import { sendUserToast } from '../../utils';
-import { faFileExport, faFileImport, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import Menu from '../common/menu/Menu.svelte';
-import MenuItem from '../common/menu/MenuItem.svelte';
-import FlowViewer from '../FlowViewer.svelte';
-import Modal from '../Modal.svelte';
-import SimpleEditor from '../SimpleEditor.svelte';
-import CollapseLink from './../CollapseLink.svelte';
-import CronInput from './../CronInput.svelte';
-import FlowBox from './../flows/FlowBox.svelte';
-import { flowStore, initFlow } from './../flows/flowStore';
-import Path from './../Path.svelte';
-import Required from './../Required.svelte';
-import SchemaForm from './../SchemaForm.svelte';
-import Toggle from './../Toggle.svelte';
-import Tooltip from './../Tooltip.svelte';
-import { stepOpened } from './stepOpenedStore';
-import { cleanInputs } from './utils';
-export let pathError = '';
-export let initialPath = '';
-export let previewArgs = {};
-export let scheduleArgs = {};
-export let scheduleEnabled = false;
-export let scheduleCron = '0 */5 * * *';
-let jsonSetter;
-let jsonViewer;
-let jsonValue = '';
-</script>
-
-<Modal bind:this={jsonSetter}>
-	<div slot="title">Import JSON</div>
-	<div slot="content" class="h-full">
-		<SimpleEditor bind:code={jsonValue} lang="json" class="h-full" />
-	</div>
-	<div slot="submission">
-		<button
-			class="default-button px-4 py-2 font-semibold"
-			on:click={() => {
-				Object.assign($flowStore, JSON.parse(jsonValue))
-				initFlow($flowStore)
-				stepOpened.update(() => undefined)
-				sendUserToast('OpenFlow imported from JSON')
-				jsonSetter.closeModal()
-			}}
-		>
-			Import
-		</button>
-	</div>
-</Modal>
-
-<Modal bind:this={jsonViewer}>
-	<div slot="title">See JSON</div>
-	<div slot="content" class="h-full">
-		<FlowViewer flow={cleanInputs($flowStore)} tab="json" />
-	</div>
-</Modal>
-
-<FlowBox title="Flow Settings">
-	<div slot="header">
-		<div class="flex flex-row-reverse">
-			<Menu placement="bottom-end">
-				<button slot="trigger" class="text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-					...
-				</button>
-				<div class="divide-y divide-gray-200">
-					<MenuItem
-						on:click={() => {
-							jsonSetter.openModal()
-						}}
-					>
-						<Icon data={faFileImport} scale={0.6} class="inline mr-2" />
-						Import from a JSON OpenFlow
-					</MenuItem>
-					<MenuItem
-						on:click={() => {
-							jsonViewer.openModal()
-						}}
-					>
-						<Icon data={faFileExport} scale={0.6} class="inline mr-2" />
-						Export to a JSON OpenFlow
-					</MenuItem>
-					<MenuItem
-						on:click={() => {
-							const url = new URL('https://hub.windmill.dev/flows/add')
-							const openFlow = {
-								value: $flowStore.value,
-								summary: $flowStore.summary,
-								description: $flowStore.description,
-								schema: $flowStore.schema
-							}
-							url.searchParams.append('flow', btoa(JSON.stringify(openFlow)))
-							window.open(url, '_blank')?.focus()
-						}}
-					>
-						<Icon data={faGlobe} scale={0.6} class="inline mr-2" />
-						Publish to Hub
-					</MenuItem>
-				</div>
-			</Menu>
-		</div>
-	</div>
-
-	<div slot="content">
-		<div class="p-6 border-t border-gray-300">
-			<Path
-				bind:error={pathError}
-				bind:path={$flowStore.path}
-				{initialPath}
-				namePlaceholder="my_flow"
-				kind="flow"
-			>
-				<div slot="ownerToolkit">
-					Flow permissions depend on their path. Select the group <span class="font-mono">all</span>
-					to share your flow, and <span class="font-mono">user</span> to keep it private.
-					<a href="https://docs.windmill.dev/docs/reference/namespaces">docs</a>
-				</div>
-			</Path>
-
-			<label class="block mt-4">
-				<span class="text-gray-700">Summary <Required required={false} /></span>
-				<textarea
-					bind:value={$flowStore.summary}
-					class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-					placeholder="A very short summary of the flow displayed when the flow is listed"
-					rows="1"
-				/>
-			</label>
-
-			<CollapseLink text="set primary schedule" open={true}>
-				<Tooltip>
-					The primary schedule of a flow is simply a schedule that has the same name as a flow. It
-					can be set and enabled directly within the flow editor. "Watching for new changes" flows
-					are meant to be watching regularly for new items in an external systems. The primary
-					schedule purpose is there to set the periodicity at which you want this watcher to
-					operate.
-				</Tooltip>
-				<Toggle
-					bind:checked={scheduleEnabled}
-					options={{
-						left: 'disabled',
-						right: 'enabled'
-					}}
-				/>
-				<div class="p-2 my-2 rounded" class:bg-gray-300={!scheduleEnabled}>
-					{#if !scheduleEnabled}
-						<span class="font-black">No next scheduled run when disabled</span>
-					{/if}
-					<CronInput bind:schedule={scheduleCron} />
-				</div>
-				<div class="flex flex-row-reverse">
-					<Button
-						color="alternative"
-						size="sm"
-						on:click={() => (scheduleArgs = JSON.parse(JSON.stringify(previewArgs)))}
-					>
-						Copy from preview arguments
-					</Button>
-				</div>
-				<SchemaForm schema={$flowStore.schema} bind:args={scheduleArgs} />
-			</CollapseLink>
-		</div>
-	</div>
-</FlowBox>

package/components/flows/FlowTimeline.svelte

@@ -1,169 +0,0 @@
-<script>import { faInfoCircle, faPen, faPlus, faSliders, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { Button, Toggle, Tooltip } from 'flowbite-svelte';
-import Icon from 'svelte-awesome';
-import ModuleStep from '../ModuleStep.svelte';
-import FlowInput from './FlowInput.svelte';
-import { emptyFlowModuleSchema } from './flowStateUtils';
-import { stepOpened } from './stepOpenedStore';
-export let args = {};
-export let flowModuleSchemas;
-export let parentIndex = undefined;
-const root = parentIndex === undefined;
-function insertAtIndex(index) {
-    flowModuleSchemas.splice(index, 0, emptyFlowModuleSchema());
-    flowModuleSchemas = flowModuleSchemas;
-    const indexes = getIndexes(parentIndex, index);
-    stepOpened.update(() => String(indexes.join('-')));
-}
-function removeAtIndex(index) {
-    flowModuleSchemas.splice(index, 1);
-    flowModuleSchemas = flowModuleSchemas;
-}
-function getIndexes(parentIndex, childIndex) {
-    const indexes = [];
-    if (parentIndex !== undefined) {
-        indexes.push(parentIndex);
-    }
-    indexes.push(childIndex);
-    return indexes;
-}
-const color = root ? 'blue' : 'orange';
-</script>
-
-<div class="w-full">
-	<ol class="relative ml-4 border-l border-gray-200 dark:border-gray-700 space-y-12 border-dashed">
-		{#if root}
-			<li class="ml-8">
-				<span class="relative">
-					<span
-						class={`flex absolute -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-					>
-						<Icon
-							class={`text-${color}-600 dark:text-${color}-400  text-font-bold text-center`}
-							data={faSliders}
-						/>
-					</span>
-				</span>
-				<slot name="settings" />
-			</li>
-			<li class="ml-8 ">
-				<span class="relative">
-					<span
-						class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-					>
-						<Icon
-							class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}
-							data={faPen}
-						/>
-					</span>
-				</span>
-				<FlowInput />
-			</li>
-		{/if}
-		{#each flowModuleSchemas as flowModuleSchema, index (index)}
-			{#if flowModuleSchema.flowModule.value.type === 'forloopflow'}
-				<li id="module-{index}" class="ml-4 relative">
-					<button
-						on:click={() => insertAtIndex(index)}
-						class="flex absolute -top-10 -left-8 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-					>
-						<Icon class="text-gray-400" data={faPlus} />
-					</button>
-					<div
-						class="py-2 px-6 ml-4 mb-16 flex justify-between text-sm font-bold border border-gray-300 rounded-md shadow-md"
-						role="alert"
-					>
-						<span class="flex items-center z-50">
-							For loop
-							<Tooltip
-								content="Inside a loop, the flow input has an 'iter' property. It contains the value and the index of the iteration"
-								placement="bottom"
-								arrow
-							>
-								<Icon data={faInfoCircle} class="ml-2" /></Tooltip
-							>
-						</span>
-						<span class="flex items-center space-x-2">
-							<Toggle size="small" bind:checked={flowModuleSchema.flowModule.value.skip_failures}>
-								Skip failures
-							</Toggle>
-							<Button size="xs" color="alternative" on:click={() => removeAtIndex(index)}>
-								<Icon data={faTrashAlt} class="mr-2" />
-								Remove loop
-							</Button>
-						</span>
-					</div>
-					<span
-						class="flex absolute top-3 -left-8 justify-center items-center w-8 h-8 bg-orange-200 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-orange-900"
-					>
-						<span class={`text-orange-600 dark:text-orange-400 font-bold text-center`}>
-							{index + 1}
-						</span>
-					</span>
-
-					<svelte:self
-						bind:args
-						bind:flowModuleSchemas={flowModuleSchema.childFlowModules}
-						parentIndex={index}
-					/>
-
-					<div
-						class="flex px-6 py-4 ml-4 mt-4 text-sm font-bold border border-gray-300 rounded-md shadow-md z-50"
-						role="alert"
-					>
-						End of For Loop
-						<Tooltip
-							content="The results of each iteration are collecting in an array and is the result of the step.	"
-							placement="bottom"
-							arrow
-						>
-							<Icon data={faInfoCircle} class="ml-2" /></Tooltip
-						>
-					</div>
-				</li>
-			{:else}
-				<li id="module-{String(getIndexes(parentIndex, index).join('-'))}" class="ml-8">
-					<span class="relative">
-						<button
-							on:click={() => insertAtIndex(index)}
-							class="flex absolute -top-10 -left-12 justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-						>
-							<Icon class="text-gray-400" data={faPlus} />
-						</button>
-						<span
-							class={`flex absolute top-4 -left-12 justify-center items-center w-8 h-8 bg-${color}-200  rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900`}
-						>
-							<span class={`text-${color}-600 dark:text-${color}-400 font-bold text-center`}>
-								{index + 1}
-							</span>
-						</span>
-						<ModuleStep
-							indexes={getIndexes(parentIndex, index)}
-							bind:mod={flowModuleSchema.flowModule}
-							bind:args
-							bind:schema={flowModuleSchema.schema}
-							bind:childFlowModules={flowModuleSchema.childFlowModules}
-							on:delete={() => removeAtIndex(index)}
-						/>
-					</span>
-				</li>
-			{/if}
-			{#if flowModuleSchemas.length - 1 === index}
-				<button
-					on:click={() => insertAtIndex(flowModuleSchemas.length)}
-					class="-ml-4 -mt-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-				>
-					<Icon class="text-gray-400" data={faPlus} />
-				</button>
-			{/if}
-		{/each}
-		{#if flowModuleSchemas.length === 0}
-			<button
-				on:click={() => insertAtIndex(0)}
-				class="-ml-4 flex justify-center items-center bg-white border-2 border-gray-200 w-8 h-8 rounded-full ring-8 ring-white dark:ring-gray-900 dark:bg-${color}-900"
-			>
-				<Icon class="text-gray-400" data={faPlus} />
-			</button>
-		{/if}
-	</ol>
-</div>

package/components/flows/FlowTimeline.svelte.d.ts

@@ -1,21 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { FlowState } from './flowState';
-declare const __propDef: {
-    props: {
-        args?: Record<string, any> | undefined;
-        flowModuleSchemas: FlowState;
-        parentIndex?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        settings: {};
-    };
-};
-export declare type FlowTimelineProps = typeof __propDef.props;
-export declare type FlowTimelineEvents = typeof __propDef.events;
-export declare type FlowTimelineSlots = typeof __propDef.slots;
-export default class FlowTimeline extends SvelteComponentTyped<FlowTimelineProps, FlowTimelineEvents, FlowTimelineSlots> {
-}
-export {};

package/components/flows/stepOpenedStore.d.ts

@@ -1 +0,0 @@
-export declare const stepOpened: import("svelte/store").Writable<string | undefined>;

package/components/flows/stepOpenedStore.js

@@ -1,6 +0,0 @@
-import { writable } from 'svelte/store';
-import { scrollIntoView } from './utils';
-export const stepOpened = writable(undefined);
-stepOpened.subscribe((insertAt) => {
-    setTimeout(() => scrollIntoView(document.querySelector(`#module-${insertAt}`)), 100);
-});

package/components/propertyPicker/OverlayPropertyPicker.svelte

@@ -1,69 +0,0 @@
-<script>import { createEventDispatcher } from 'svelte';
-import { createPopperActions } from 'svelte-popperjs';
-import PropPicker from './PropPicker.svelte';
-const [popperRef, popperContent] = createPopperActions({
-    placement: 'bottom',
-    strategy: 'fixed'
-});
-export let pickableProperties;
-let isOpen = false;
-let isFocused = false;
-let timeout;
-let pickerVariation = 'append';
-export function unfocus() {
-    isFocused = false;
-    close();
-}
-export function focus(newPickerVariation) {
-    if (newPickerVariation) {
-        pickerVariation = newPickerVariation;
-    }
-    isFocused = true;
-    open();
-}
-function open() {
-    if (isFocused) {
-        clearTimeout(timeout);
-        !isOpen && (isOpen = true);
-    }
-}
-function close() {
-    if (pickerVariation === 'append') {
-        timeout = setTimeout(() => (isOpen = false), 50);
-    }
-}
-function closePropertyPicker() {
-    timeout = setTimeout(() => (isOpen = false), 50);
-}
-const dispatch = createEventDispatcher();
-</script>
-
-<div class="w-full">
-	<div use:popperRef on:click={open} on:input={open} on:mouseleave={close}>
-		<slot />
-	</div>
-
-	{#if isOpen}
-		<div class="content" use:popperContent on:mouseenter={open} on:mouseleave={closePropertyPicker}>
-			<PropPicker
-				bind:pickableProperties
-				on:select={(event) => {
-					dispatch('select', { propPath: event.detail, pickerVariation })
-					isOpen = false
-					pickerVariation = 'append'
-				}}
-			/>
-		</div>
-	{/if}
-</div>
-
-<style>
-	.content {
-    --tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
-    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-    width: 100%;
-    max-width: 56rem;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    z-index: 50
-}</style>

package/components/propertyPicker/OverlayPropertyPicker.svelte.d.ts

@@ -1,24 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        pickableProperties: Object | undefined;
-        unfocus?: (() => void) | undefined;
-        focus?: ((newPickerVariation?: ("append" | "connect") | undefined) => void) | undefined;
-    };
-    events: {
-        select: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type OverlayPropertyPickerProps = typeof __propDef.props;
-export declare type OverlayPropertyPickerEvents = typeof __propDef.events;
-export declare type OverlayPropertyPickerSlots = typeof __propDef.slots;
-export default class OverlayPropertyPicker extends SvelteComponentTyped<OverlayPropertyPickerProps, OverlayPropertyPickerEvents, OverlayPropertyPickerSlots> {
-    get unfocus(): () => void;
-    get focus(): (newPickerVariation?: ("append" | "connect") | undefined) => void;
-}
-export {};