windmill-components 1.85.0 → 1.87.0

package/components/ArgInput.svelte

@@ -1,436 +0,0 @@
-<script>import { faChevronDown, faChevronUp, faDollarSign, faPlus } from '@fortawesome/free-solid-svg-icons';
-import { setInputCat as computeInputCat } from '../utils';
-import { X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
-import autosize from 'svelte-autosize';
-import Icon from 'svelte-awesome';
-import { fade } from 'svelte/transition';
-import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
-import { Badge, Button } from './common';
-import FieldHeader from './FieldHeader.svelte';
-import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
-import ObjectResourceInput from './ObjectResourceInput.svelte';
-import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import Password from './Password.svelte';
-import Range from './Range.svelte';
-import ResourcePicker from './ResourcePicker.svelte';
-import SchemaForm from './SchemaForm.svelte';
-import SimpleEditor from './SimpleEditor.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
-import Toggle from './Toggle.svelte';
-export let label = '';
-export let value;
-export let defaultValue = undefined;
-export let description = '';
-export let format = '';
-export let contentEncoding = undefined;
-export let type = undefined;
-export let required = false;
-export let pattern = undefined;
-export let valid = required ? false : true;
-export let enum_ = undefined;
-export let disabled = false;
-export let editableSchema = false;
-export let itemsType = undefined;
-export let displayHeader = true;
-export let properties = undefined;
-export let autofocus = false;
-export let compact = false;
-export let password = false;
-export let pickForField = undefined;
-export let variableEditor = undefined;
-export let itemPicker = undefined;
-export let noMargin = false;
-export let extra = {};
-let seeEditable = enum_ != undefined || pattern != undefined;
-const dispatch = createEventDispatcher();
-$: validateInput(pattern, value);
-let error = '';
-let el = undefined;
-export let editor = undefined;
-let rawValue = undefined;
-$: {
-    if (rawValue) {
-        try {
-            value = JSON.parse(rawValue);
-            error = '';
-        }
-        catch (err) {
-            error = err.toString();
-        }
-    }
-}
-$: {
-    error = '';
-    if (inputCat === 'object') {
-        evalValueToRaw();
-        validateInput(pattern, value);
-    }
-}
-export function evalValueToRaw() {
-    if (value) {
-        rawValue = JSON.stringify(value, null, 2);
-    }
-}
-function fileChanged(e, cb) {
-    let t = e.target;
-    if (t && 'files' in t && t.files.length > 0) {
-        let reader = new FileReader();
-        reader.onload = (e) => {
-            cb(e.target.result.split('base64,')[1]);
-        };
-        reader.readAsDataURL(t.files[0]);
-    }
-    else {
-        cb(undefined);
-    }
-}
-export function focus() {
-    el?.focus();
-    if (el) {
-        el.style.height = '5px';
-        el.style.height = el.scrollHeight + 50 + 'px';
-    }
-}
-function validateInput(pattern, v) {
-    if (required && (v == undefined || v == null || v === '')) {
-        error = 'This field is required';
-        valid = false;
-    }
-    else {
-        if (pattern && !testRegex(pattern, v)) {
-            error = `Should match ${pattern}`;
-            valid = false;
-        }
-        else {
-            error = '';
-            valid = true;
-        }
-    }
-}
-function testRegex(pattern, value) {
-    try {
-        const regex = new RegExp(pattern);
-        return regex.test(value);
-    }
-    catch (err) {
-        return false;
-    }
-}
-$: {
-    if (value == undefined || value == null) {
-        value = defaultValue;
-        if (defaultValue === undefined || defaultValue === null) {
-            if (inputCat === 'string') {
-                value = '';
-            }
-            else if (inputCat == 'enum') {
-                value = enum_?.[0];
-            }
-            else if (inputCat == 'boolean') {
-                value = false;
-            }
-            else if (inputCat == 'list') {
-                value = [];
-            }
-        }
-    }
-}
-$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
-let redraw = 0;
-let itemsLimit = 50;
-</script>
-
-<!-- svelte-ignore a11y-autofocus -->
-<div class="flex flex-col w-full min-w-[250px]">
-	<div>
-		{#if displayHeader}
-			<FieldHeader {label} {required} {type} {contentEncoding} {format} />
-		{/if}
-		{#if editableSchema}
-			<div class="p-2 my-1 text-xs border-solid border border-gray-400">
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<span
-					class="underline"
-					on:click={() => {
-						seeEditable = !seeEditable
-					}}
-				>
-					Customize property
-					<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
-				</span>
-
-				{#if seeEditable}
-					<div class="mt-2">
-						<label class="text-gray-700">
-							Description
-							<textarea
-								class="mb-1"
-								use:autosize
-								rows="1"
-								bind:value={description}
-								on:keydown|stopPropagation
-								placeholder="Field description"
-							/>
-							{#if type == 'string' && format != 'date-time'}
-								<StringTypeNarrowing bind:format bind:pattern bind:enum_ bind:contentEncoding />
-							{:else if type == 'number'}
-								<NumberTypeNarrowing bind:min={extra['min']} bind:max={extra['max']} />
-							{:else if type == 'object'}
-								<ObjectTypeNarrowing bind:format />
-							{:else if type == 'array'}
-								<select bind:value={itemsType}>
-									<option value={undefined}>No specific item type</option>
-									<option value={{ type: 'string' }}> Items are strings</option>
-									<option value={{ type: 'object' }}> Items are objects (JSON)</option>
-									<option value={{ type: 'number' }}>Items are numbers</option>
-									<option value={{ type: 'string', contentEncoding: 'base64' }}
-										>Items are bytes</option
-									>
-								</select>
-							{/if}
-						</label>
-					</div>
-				{/if}
-			</div>
-			<span class="text-2xs">Input preview:</span>
-		{/if}
-
-		{#if description}
-			<div class="text-sm italic pb-1">
-				{description}
-			</div>
-		{/if}
-
-		<div class="flex space-x-1">
-			{#if inputCat == 'number'}
-				{#if extra['min'] != undefined && extra['max'] != undefined}
-					<div class="flex w-full gap-1">
-						<span>{extra['min']}</span>
-						<div class="grow">
-							<Range bind:value min={extra['min']} max={extra['max']} />
-						</div>
-						<span>{extra['max']}</span>
-						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
-					</div>
-				{:else}
-					<input
-						{autofocus}
-						on:focus={(e) => {
-							dispatch('focus')
-						}}
-						{disabled}
-						type="number"
-						class={valid
-							? ''
-							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-						placeholder={defaultValue ?? ''}
-						bind:value
-						min={extra['min']}
-						max={extra['max']}
-					/>
-				{/if}
-			{:else if inputCat == 'boolean'}
-				<Toggle
-					on:pointerdown={(e) => {
-						e?.stopPropagation()
-					}}
-					{disabled}
-					class={valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-					bind:checked={value}
-				/>
-				{#if type == 'boolean' && value == undefined}
-					<span>&nbsp; Not set</span>
-				{/if}
-			{:else if inputCat == 'list'}
-				<div class="w-full">
-					<div class="w-full">
-						{#key redraw}
-							{#if Array.isArray(value)}
-								{#each value ?? [] as v, i}
-									{#if i < itemsLimit}
-										<div class="flex max-w-md mt-1 w-full items-center">
-											{#if itemsType?.type == 'number'}
-												<input type="number" bind:value={v} />
-											{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-												<input
-													type="file"
-													class="my-6"
-													on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-													multiple={false}
-												/>
-											{:else if itemsType?.type == 'object'}
-												<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-											{:else}
-												<input type="text" bind:value={v} />
-											{/if}
-											<button
-												transition:fade|local={{ duration: 100 }}
-												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
-												aria-label="Clear"
-												on:click={() => {
-													value.splice(i, 1)
-													redraw += 1
-												}}
-											>
-												<X size={14} />
-											</button>
-										</div>
-									{/if}
-								{/each}
-								{#if value.length > itemsLimit}
-									<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
-										>{itemsLimit}/{value.length}: Load 50 more...</button
-									>
-								{/if}
-							{/if}
-						{/key}
-					</div>
-					<Button
-						variant="border"
-						color="dark"
-						size="xs"
-						btnClasses="mt-1"
-						on:click={() => {
-							if (value == undefined || !Array.isArray(value)) {
-								value = []
-							}
-							value = value.concat('')
-						}}
-					>
-						<Icon data={faPlus} class="mr-2" />
-						Add item
-					</Button>
-				</div>
-			{:else if inputCat == 'resource-object'}
-				<ObjectResourceInput {format} bind:value />
-			{:else if inputCat == 'object'}
-				{#if properties && Object.keys(properties).length > 0}
-					<div class="p-4 pl-8 border rounded w-full">
-						<SchemaForm
-							{disabled}
-							schema={{ properties, $schema: '', required: [], type: 'object' }}
-							bind:args={value}
-						/>
-					</div>
-				{:else if disabled}
-					<textarea disabled />
-				{:else}
-					<JsonEditor
-						bind:editor
-						on:focus={(e) => {
-							dispatch('focus')
-						}}
-						code={rawValue}
-						bind:value
-					/>
-				{/if}
-			{:else if inputCat == 'enum'}
-				<select
-					on:focus={(e) => {
-						dispatch('focus')
-					}}
-					{disabled}
-					class="px-6"
-					bind:value
-				>
-					{#each enum_ ?? [] as e}
-						<option>{e}</option>
-					{/each}
-				</select>
-			{:else if inputCat == 'date'}
-				<input {autofocus} class="inline-block" type="datetime-local" bind:value />
-			{:else if inputCat == 'sql' || inputCat == 'yaml'}
-				<div class="border my-1 mb-4 w-full border-gray-400">
-					<SimpleEditor
-						on:focus={(e) => {
-							dispatch('focus')
-						}}
-						bind:this={editor}
-						lang={inputCat}
-						bind:code={value}
-						autoHeight
-					/>
-				</div>
-			{:else if inputCat == 'base64'}
-				<input
-					{autofocus}
-					type="file"
-					class="my-6"
-					on:change={(x) => fileChanged(x, (val) => (value = val))}
-					multiple={false}
-				/>
-			{:else if inputCat == 'resource-string'}
-				<ResourcePicker
-					bind:value
-					resourceType={format.split('-').length > 1
-						? format.substring('resource-'.length)
-						: undefined}
-				/>
-			{:else if inputCat == 'string'}
-				<div class="flex flex-col w-full">
-					<div class="flex flex-row w-full items- justify-between">
-						{#if password}
-							<Password {disabled} bind:password={value} />
-						{:else}
-							<textarea
-								{autofocus}
-								rows="1"
-								bind:this={el}
-								on:focus={(e) => {
-									dispatch('focus')
-								}}
-								use:autosize
-								on:keydown|stopPropagation
-								type="text"
-								{disabled}
-								class="col-span-10 {valid
-									? ''
-									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-								placeholder={defaultValue ?? ''}
-								bind:value
-							/>
-							{#if itemPicker}
-								<div class="ml-1 relative">
-									<!-- svelte-ignore a11y-click-events-have-key-events -->
-									<div
-										class="min-w-min min-h-[34px] items-center leading-4 px-3 text-blue-500 cursor-pointer border border-blue-500 rounded center-center"
-										on:click={() => {
-											pickForField = label
-											itemPicker?.openDrawer?.()
-										}}><Icon data={faDollarSign} /></div
-									>
-								</div>
-							{/if}
-						{/if}
-					</div>
-					{#if variableEditor}
-						<div class="text-sm text-gray-600">
-							{#if value && typeof value == 'string' && value?.startsWith('$var:')}
-								Linked to variable <button
-									class="text-blue-500 underline"
-									on:click={() => variableEditor?.editVariable?.(value.slice(5))}
-									>{value.slice(5)}</button
-								>
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{/if}
-			<slot name="actions" />
-		</div>
-		{#if !compact || (error && error != '')}
-			<div class="text-right text-xs text-red-600">
-				{#if error === ''}
-					&nbsp;
-				{:else}
-					{error}
-				{/if}
-			</div>
-		{:else if !noMargin}
-			<div class="mb-2" />
-		{/if}
-	</div>
-</div>

package/components/CenteredModal.svelte

@@ -1,39 +0,0 @@
-<script>import { SettingsService } from '../gen';
-import { onMount } from 'svelte';
-import WindmillIcon from './icons/WindmillIcon.svelte';
-export let subtitle = undefined;
-export let title = 'Windmill';
-export let disableLogo = false;
-let version = '';
-onMount(async () => {
-    version = await SettingsService.backendVersion();
-});
-</script>
-
-<div class="center-center min-h-screen p-4 relative bg-[#3b4252]">
-	<div class="border rounded-md shadow-md bg-white w-full max-w-[640px] 
-	p-4 sm:py-8 sm:px-10 mb-6 md:mb-20 z-10">
-		<div class="mb-10">
-			<h1 class="text-center">
-				{title}
-			</h1>
-			{#if subtitle}
-				<p class="text-sm text-center text-gray-600 mt-2">
-					{subtitle}
-				</p>
-			{/if}
-		</div>
-		<slot />
-	</div>
-	{#if !disableLogo}
-		<div class="hidden lg:block absolute top-10 right-50">
-			<div class="animate-[spin_100s_linear_infinite] ">
-				<WindmillIcon white height="100px" width="100px" />
-			</div>
-			<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
-		</div>
-	{/if}
-	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
-		<span class="font-mono">{version}</span>
-	</div>
-</div>

package/components/CronInput.svelte

@@ -1,89 +0,0 @@
-<script context="module">
-	export const OFFSET = new Date().getTimezoneOffset()
-</script>
-
-<script>import { ScheduleService } from '../gen';
-import { displayDate, emptyString, formatCron } from '../utils';
-import CollapseLink from './CollapseLink.svelte';
-export let validCRON = true;
-let preview = [];
-let cronError = '';
-export let schedule = '0 0 12 * *';
-export let disabled = false;
-let limit = 3;
-$: !emptyString(schedule) && handleScheduleInput(schedule);
-async function handleScheduleInput(input) {
-    try {
-        preview = await ScheduleService.previewSchedule({
-            requestBody: { schedule: formatCron(input), offset: OFFSET }
-        });
-        cronError = '';
-        validCRON = true;
-    }
-    catch (err) {
-        if (err.status == 400 && err.body.includes('cron')) {
-            cronError = `Invalid cron expression`;
-            validCRON = false;
-        }
-        else {
-            validCRON = false;
-        }
-    }
-}
-</script>
-
-<div class="max-w-xl">
-	<div class="w-full text-right text-red-600 text-2xs grow">{cronError}</div>
-	<div class="flex flex-row items-end max-w-5xl">
-		<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
-		<input
-			class="inline-block"
-			type="text"
-			id="cron-schedule"
-			name="cron-schedule"
-			bind:value={schedule}
-			{disabled}
-		/>
-	</div>
-	{#if !disabled}
-		<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28 mb-2">
-			<button
-				on:click={() => {
-					schedule = '0 */15 * * *'
-					cronError = ''
-				}}>every 15 min</button
-			>
-			<button
-				on:click={() => {
-					schedule = '0 0 * * * *'
-					cronError = ''
-				}}>every hour</button
-			>
-			<button
-				on:click={() => {
-					schedule = '0 0 8 * * *'
-					cronError = ''
-				}}>once a day at 8AM</button
-			>
-		</div>
-	{/if}
-
-	<CollapseLink text="preview next runs" open={true}>
-		{#if preview && preview.length > 0}
-			<div class="text-sm text-gray-700 border p-2 rounded-md">
-				<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
-				<ul class="list-disc mx-12">
-					{#each preview.slice(0, limit) as p}
-						<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
-					{/each}
-					<li class="text-sm mx-2">...</li>
-					{#if limit != 10}
-						<button class="underline text-gray-400" on:click={() => (limit = 10)}>Load more</button>
-					{:else}
-						<button class="underline text-gray-400" on:click={() => (limit = 3)}>Load less</button>
-					{/if}
-				</ul>
-			</div>
-		{/if}
-	</CollapseLink>
-</div>

package/components/CronInput.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-export declare const OFFSET: number;
-declare const __propDef: {
-    props: {
-        validCRON?: boolean | undefined;
-        schedule?: string | undefined;
-        disabled?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CronInputProps = typeof __propDef.props;
-export type CronInputEvents = typeof __propDef.events;
-export type CronInputSlots = typeof __propDef.slots;
-export default class CronInput extends SvelteComponentTyped<CronInputProps, CronInputEvents, CronInputSlots> {
-}
-export {};