windmill-components 1.339.2 → 1.352.0

package/package/components/SchemaModal.svelte

@@ -1,443 +0,0 @@
-<script context="module">import { modalToSchema } from '../common';
-import Tab from './common/tabs/Tab.svelte';
-import TabContent from './common/tabs/TabContent.svelte';
-import Tabs from './common/tabs/Tabs.svelte';
-import SchemaEditor from './SchemaEditor.svelte';
-export const ARG_TYPES = [
-    'integer',
-    'number',
-    'string',
-    'boolean',
-    'object',
-    'array',
-    'S3'
-];
-const argTypesLabels = {
-    integer: 'Integer',
-    number: 'Number',
-    string: 'String',
-    boolean: 'Boolean',
-    object: 'Object',
-    array: 'Array',
-    S3: 'S3 Object'
-};
-export function schemaToModal(schema, name, required) {
-    return {
-        name,
-        selectedType: schema.type,
-        description: schema.description ?? '',
-        pattern: schema.pattern,
-        default: schema.default,
-        contentEncoding: schema.contentEncoding,
-        format: schema.format,
-        enum_: schema.enum,
-        min: schema.min,
-        max: schema.max,
-        currency: schema.currency,
-        currencyLocale: schema.currencyLocale,
-        multiselect: schema.multiselect,
-        items: schema.items?.type
-            ? { type: schema.items.type, enum: schema.items.enum }
-            : undefined,
-        required,
-        schema: schema.type == 'object'
-            ? {
-                $schema: undefined,
-                type: schema.type,
-                properties: schema.properties ?? {},
-                required: schema.required ?? []
-            }
-            : undefined,
-        showExpr: schema.showExpr,
-        password: schema.password,
-        nullable: schema.nullable,
-        dateFormat: schema.format,
-        title: schema.title,
-        placeholder: schema.placeholder
-    };
-}
-export const DEFAULT_PROPERTY = {
-    selectedType: 'string',
-    description: '',
-    name: '',
-    required: false
-};
-</script>
-
-<script>import { createEventDispatcher } from 'svelte';
-import ArgInput from './ArgInput.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
-import Required from './Required.svelte';
-import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import { Alert, Button } from './common';
-import Toggle from './Toggle.svelte';
-import DrawerContent from './common/drawer/DrawerContent.svelte';
-import Drawer from './common/drawer/Drawer.svelte';
-import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
-import LightweightSchemaForm from './LightweightSchemaForm.svelte';
-import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
-import Label from './Label.svelte';
-import { shouldDisplayPlaceholder } from '../utils';
-import ItemPicker from './ItemPicker.svelte';
-import { Plus } from 'lucide-svelte';
-import { VariableService } from '../gen';
-import { workspaceStore } from '../stores';
-export let error = '';
-export let editing = false;
-export let oldArgName = undefined;
-export let isFlowInput = false;
-export let propsNames = [];
-export let variableEditor = undefined;
-let itemPicker = undefined;
-const dispatch = createEventDispatcher();
-let drawer;
-let property = DEFAULT_PROPERTY;
-function handleKeyUp(event) {
-    const key = event.key;
-    if (key === 'Enter') {
-        dispatch('save', property);
-    }
-}
-export function openDrawer(nproperty) {
-    drawer.openDrawer();
-    error = '';
-    property = nproperty;
-}
-export function closeDrawer() {
-    drawer.closeDrawer();
-}
-function clearModal() {
-    error = '';
-    editing = false;
-    oldArgName = undefined;
-    property.name = DEFAULT_PROPERTY.name;
-    property.default = DEFAULT_PROPERTY.default;
-    property.description = DEFAULT_PROPERTY.description;
-    property.required = DEFAULT_PROPERTY.required;
-    property.selectedType = DEFAULT_PROPERTY.selectedType;
-    property.format = undefined;
-    property.schema = undefined;
-    property.min = undefined;
-    property.max = undefined;
-    property.currency = undefined;
-    property.currencyLocale = undefined;
-    property.multiselect = undefined;
-    property.items = undefined;
-    property.showExpr = undefined;
-    property.password = undefined;
-    property.nullable = false;
-    property.dateFormat = undefined;
-    property.title = undefined;
-    property.placeholder = undefined;
-    drawer.closeDrawer();
-}
-$: if (property.name == '') {
-    error = 'Name is required';
-}
-else {
-    error = '';
-}
-let title = '';
-$: title = editing ? `Edit ${oldArgName} argument` : 'Add an argument';
-function getResourceTypesFromFormat(format) {
-    if (format?.startsWith('resource-')) {
-        return [format.split('-')[1]];
-    }
-    return [];
-}
-function shouldDisplayPlaceholderForProperty(property) {
-    return shouldDisplayPlaceholder(property.selectedType, property.format, property.enum_, property.contentEncoding, property.pattern);
-}
-</script>
-
-<Drawer bind:this={drawer} placement="right">
-	<DrawerContent on:close={clearModal} {title}>
-		<div class="flex flex-col gap-6">
-			<div>
-				<label class="block">
-					<div class="mb-1 font-semibold text-secondary">
-						Name
-						<Required required={true} />
-					</div>
-					<!-- svelte-ignore a11y-autofocus -->
-					<input
-						id="schema-modal-name"
-						autofocus
-						autocomplete="off"
-						type="text"
-						placeholder="Enter a name"
-						bind:value={property.name}
-						on:keyup={handleKeyUp}
-						class={error === ''
-							? ''
-							: 'border border-red-700 bg-red-100 border-opacity-30 focus:border-red-700 focus:border-opacity-30 focus-visible:ring-red-700 focus-visible:ring-opacity-25 focus-visible:border-red-700'}
-					/>
-				</label>
-				<div class="text-red-600 text-2xs">{error}</div>
-			</div>
-
-			<label class="block">
-				<div class="mb-1 font-semibold text-secondary">
-					Description
-					<Required required={false} />
-				</div>
-				<textarea placeholder="Enter a description" rows="3" bind:value={property.description} />
-			</label>
-
-			<label class="block">
-				<div class="mb-1 font-semibold text-secondary"> Custom Title </div>
-				<textarea placeholder="Enter a custom title" rows="1" bind:value={property.title} />
-			</label>
-			<div>
-				<div class="mb-1 font-semibold text-secondary">Type<Required required={true} /></div>
-				<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-x-2 gap-y-1 items-center mb-2 w-full">
-					{#each ARG_TYPES as argType}
-						{@const isSelected =
-							(argType === 'S3' && property.format === 'resource-s3_object') ||
-							(argType === property.selectedType && property.format !== 'resource-s3_object')}
-						<Button
-							size="sm"
-							variant="border"
-							color={isSelected ? 'blue' : 'light'}
-							btnClasses={isSelected ? '!border-2' : 'm-[1px]'}
-							on:click={() => {
-								const isS3 = argType == 'S3'
-
-								if (isS3) {
-									property.selectedType = 'object'
-									property.format = 'resource-s3_object'
-								} else {
-									property.format = undefined
-									property.selectedType = argType
-								}
-
-								property.contentEncoding = undefined
-								property.enum_ = undefined
-								property.pattern = undefined
-								property.default = undefined
-								property.min = undefined
-								property.max = undefined
-								property.currency = undefined
-								property.currencyLocale = undefined
-								property.multiselect = undefined
-								property.password = undefined
-								property.dateFormat = undefined
-								if (argType == 'array') {
-									property.items = { type: 'string' }
-								} else {
-									property.items = undefined
-								}
-								property.showExpr = undefined
-							}}
-							id={`schema-modal-type-${argType}`}
-						>
-							{argTypesLabels[argType]}
-						</Button>
-					{/each}
-					<Button
-						size="sm"
-						variant="border"
-						color={!property.selectedType ? 'blue' : 'light'}
-						btnClasses={!property.selectedType ? '!border-2' : 'm-[1px]'}
-						on:click={() => {
-							property.selectedType = undefined
-						}}
-					>
-						any
-					</Button>
-				</div>
-			</div>
-			<div>
-				<div class="flex flex-row gap-x-4 items-center">
-					<ArgInput
-						{itemPicker}
-						resourceTypes={getResourceTypesFromFormat(property.format)}
-						label="Default"
-						bind:value={property.default}
-						type={property.password ? 'string' : property.selectedType}
-						pattern={property.pattern}
-						customErrorMessage={property.customErrorMessage}
-						itemsType={property.items}
-						contentEncoding={property.contentEncoding}
-						format={property.format}
-						extra={property.password ? {} : property}
-						nullable={property.nullable}
-						title={property.title}
-						placeholder={property.placeholder}
-						{variableEditor}
-					/>
-					<div>
-						<Toggle
-							options={{ right: 'Required' }}
-							size="xs"
-							bind:checked={property.required}
-							on:change={(event) => {
-								if (event?.detail) {
-									property.nullable = false
-								}
-							}}
-						/>
-						{#if property?.selectedType === 'string'}
-							<Toggle
-								options={{
-									right: 'Nullable',
-									rightTooltip:
-										'If enabled, the default value will be null and not an empty string.'
-								}}
-								size="xs"
-								bind:checked={property.nullable}
-								disabled={property?.required}
-							/>
-						{/if}
-					</div>
-				</div>
-				{#if isFlowInput}
-					<Alert type="info" title="Default not used by webhooks" size="xs" collapsible>
-						If this flow is triggered by a webhook, the default value will not replace a missing
-						value from the payload. It will only be used as the default value in the autogenerated
-						UI. We recommend using default values in the signature of the steps where this value is
-						used (using `x=default`) to have the desired behavior.
-					</Alert>
-				{/if}
-			</div>
-			<div>
-				<div class="font-semibold text-secondary mb-1">Advanced</div>
-				{#if property.selectedType == 'string'}
-					<StringTypeNarrowing
-						bind:customErrorMessage={property.customErrorMessage}
-						bind:format={property.format}
-						bind:pattern={property.pattern}
-						bind:enum_={property.enum_}
-						bind:contentEncoding={property.contentEncoding}
-						bind:password={property.password}
-						bind:dateFormat={property.dateFormat}
-						noExtra
-					/>
-				{:else if property.selectedType == 'array'}
-					<ArrayTypeNarrowing bind:itemsType={property.items} />
-				{:else if property.selectedType == 'number' || property.selectedType == 'integer'}
-					<NumberTypeNarrowing
-						bind:min={property.min}
-						bind:max={property.max}
-						bind:currency={property.currency}
-						bind:currencyLocale={property.currencyLocale}
-					/>
-				{:else if property.selectedType == 'object' && property.format !== 'resource-s3'}
-					<Tabs selected="resource">
-						<Tab value="resource">Resource</Tab>
-						<Tab value="custom-object">Custom Object</Tab>
-						<svelte:fragment slot="content">
-							<div class="pt-2">
-								<TabContent value="custom-object">
-									<SchemaEditor bind:schema={property.schema} />
-								</TabContent>
-
-								<TabContent value="resource">
-									<h3 class="mb-2 font-bold mt-4">Resource type</h3>
-									<ObjectTypeNarrowing bind:format={property.format} />
-								</TabContent>
-							</div>
-						</svelte:fragment>
-					</Tabs>
-				{/if}
-				{#if property && shouldDisplayPlaceholderForProperty(property)}
-					<Label label="Placeholder" class="pt-2">
-						<textarea
-							placeholder="Enter a placeholder"
-							rows="1"
-							bind:value={property.placeholder}
-						/>
-					</Label>
-				{/if}
-
-				<div class="pt-2">
-					<Toggle
-						options={{ right: 'Show this field only when conditions are met' }}
-						class="!justify-start"
-						checked={Boolean(property.showExpr)}
-						on:change={() => {
-							property.showExpr = property.showExpr ? undefined : 'true //fields.foo == 42'
-						}}
-					/>
-					{#if property.showExpr != undefined}
-						<div class="border">
-							<SimpleEditor
-								extraLib={`declare const fields: Record<${propsNames
-									.filter((x) => x != property.name)
-									.map((x) => `"${x}"`)
-									.join(' | ')}, any>;\n`}
-								lang="javascript"
-								bind:code={property.showExpr}
-								shouldBindKey={false}
-								fixedOverflowWidgets={false}
-								autoHeight
-							/>
-						</div>
-						<div class="flex flex-row-reverse text-2xs text-tertiary"
-							><div
-								>Other fields are available under <code>fields</code> (e.g:
-								<code>fields.foo == 42</code>)</div
-							></div
-						>
-					{/if}
-				</div>
-			</div>
-		</div>
-		<div class="font-semibold text-secondary mb-1 pt-4">Preview</div>
-		<LightweightSchemaForm
-			displayType={false}
-			schema={{
-				properties: {
-					[property.name]: modalToSchema(property)
-				},
-				required: property.required ? [property.name] : []
-			}}
-		/>
-		<svelte:fragment slot="actions">
-			<div class="h-10" />
-			<Button
-				color="dark"
-				disabled={!property.name || error != ''}
-				on:click={() => {
-					dispatch('save', property)
-				}}
-				id="schema-modal-save"
-			>
-				Save
-			</Button>
-		</svelte:fragment>
-	</DrawerContent>
-</Drawer>
-
-{#if isFlowInput}
-	<ItemPicker
-		bind:this={itemPicker}
-		pickCallback={(path, _) => {
-			if (property) {
-				property.default = '$var:' + path
-			}
-		}}
-		itemName="Variable"
-		tooltip="Variables are dynamic values that have a key associated to them and can be retrieved during the execution of a Script or Flow."
-		documentationLink="https://www.windmill.dev/docs/core_concepts/variables_and_secrets"
-		extraField="path"
-		loadItems={async () =>
-			(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
-				name: x.path,
-				...x
-			}))}
-	>
-		<div slot="submission">
-			<Button
-				variant="border"
-				color="blue"
-				size="sm"
-				startIcon={{ icon: Plus }}
-				on:click={() => variableEditor?.initNew?.()}
-			>
-				New Variable
-			</Button>
-		</div>
-	</ItemPicker>
-{/if}

package/package/components/SchemaModal.svelte.d.ts

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-import { type SchemaProperty, type ModalSchemaProperty } from '../common';
-export declare const ARG_TYPES: readonly ["integer", "number", "string", "boolean", "object", "array", "S3"];
-export type ArgType = (typeof ARG_TYPES)[number];
-export declare function schemaToModal(schema: SchemaProperty, name: string, required: boolean): ModalSchemaProperty;
-export declare const DEFAULT_PROPERTY: ModalSchemaProperty;
-import type VariableEditor from './VariableEditor.svelte';
-declare const __propDef: {
-    props: {
-        error?: string | undefined;
-        editing?: boolean | undefined;
-        oldArgName?: string | undefined;
-        isFlowInput?: boolean | undefined;
-        propsNames?: string[] | undefined;
-        variableEditor?: VariableEditor | undefined;
-        openDrawer?: ((nproperty: ModalSchemaProperty) => void) | undefined;
-        closeDrawer?: (() => void) | undefined;
-    };
-    events: {
-        save: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SchemaModalProps = typeof __propDef.props;
-export type SchemaModalEvents = typeof __propDef.events;
-export type SchemaModalSlots = typeof __propDef.slots;
-export default class SchemaModal extends SvelteComponent<SchemaModalProps, SchemaModalEvents, SchemaModalSlots> {
-    get openDrawer(): (nproperty: ModalSchemaProperty) => void;
-    get closeDrawer(): () => void;
-}
-export {};

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

@@ -1,55 +0,0 @@
-<script>import Badge from '../../../common/badge/Badge.svelte';
-import { getContext } from 'svelte';
-import PanelSection from './common/PanelSection.svelte';
-import Toggle from '../../../Toggle.svelte';
-export let recomputeIds = undefined;
-export let ownId;
-export let title = 'Trigger runnables on success';
-export let tooltip = 'Select components to recompute after this runnable has successfully run';
-export let documentationLink = 'https://www.windmill.dev/docs/apps/app-runnable-panel#trigger-runnables-on-success';
-const { runnableComponents } = getContext('AppViewerContext');
-function onChange(checked, id) {
-    if (checked) {
-        recomputeIds = [...(recomputeIds ?? []), id];
-    }
-    else {
-        recomputeIds = recomputeIds?.filter((x) => x !== id);
-    }
-}
-</script>
-
-<PanelSection {title} {tooltip} {documentationLink}>
-	{#if Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId).length > 0}
-		<table class="divide-y border w-full">
-			<thead class="bg-surface-secondary">
-				<tr>
-					<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-tertiary">
-						Component
-					</th>
-					<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-tertiary">
-						Recompute
-					</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
-					<tr>
-						<td class="whitespace-nowrap px-2 text-xs">
-							<Badge color="indigo">{id}</Badge>
-						</td>
-						<td class="relative whitespace-nowrap px-4">
-							<Toggle
-								class="windmillapp my-1"
-								size="xs"
-								on:change={(e) => onChange(e.detail, 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/package/components/apps/editor/settingsPanel/Recompute.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        recomputeIds?: string[] | undefined;
-        ownId: string;
-        title?: string | undefined;
-        tooltip?: string | undefined;
-        documentationLink?: string | undefined;
-    };
-    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 SvelteComponent<RecomputeProps, RecomputeEvents, RecomputeSlots> {
-}
-export {};