windmill-components 1.86.0 → 1.89.0

package/package/components/Popover.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { PopoverPlacement } from './Popover.model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        placement?: PopoverPlacement | undefined;
+        notClickable?: boolean | undefined;
+        popupClass?: string | undefined;
+        disablePopup?: boolean | undefined;
+        disappearTimeout?: number | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        text: {};
+    };
+};
+export type PopoverProps = typeof __propDef.props;
+export type PopoverEvents = typeof __propDef.events;
+export type PopoverSlots = typeof __propDef.slots;
+export default class Popover extends SvelteComponentTyped<PopoverProps, PopoverEvents, PopoverSlots> {
+}
+export {};

package/package/components/RadioButton.svelte

@@ -0,0 +1,39 @@
+<script>export let label = '';
+export let options;
+export let value;
+export let disabled = false;
+export let labelClass = '';
+export let inputClass = '';
+import { createEventDispatcher } from 'svelte';
+import Tooltip from './Tooltip.svelte';
+const dispatch = createEventDispatcher();
+</script>
+
+<fieldset class="w-full">
+	<legend class="sr-only {labelClass}">{label}</legend>
+	<div class="flex flex-row flex-wrap gap-2 items-center mb-2 w-full">
+		{#each options as [label, val]}
+			<label
+				class="text-center text-sm border border-gray-300 h-full rounded-sm cursor-pointer p-2 
+				grow whitespace-nowrap duration-200 hover:border-gray-600 hover:bg-gray-100
+				{val === value ? '!bg-blue-50 !border-blue-500' : ''} {inputClass}"
+			>
+				<input
+					{disabled}
+					type="radio"
+					value={val}
+					class="sr-only"
+					bind:group={value}
+					aria-labelledby="memory-option-0-label"
+					on:click={() => dispatch('change', val)}
+				/>
+				<p>
+					{#if typeof label !== 'string'}
+						{label.title}
+						<Tooltip>{label.desc}</Tooltip>
+					{:else}{label}{/if}
+				</p>
+			</label>
+		{/each}
+	</div>
+</fieldset>

package/package/components/RadioButton.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        options: [string | {
+            title: string;
+            desc: string;
+        }, any][];
+        value: any;
+        disabled?: boolean | undefined;
+        labelClass?: string | undefined;
+        inputClass?: string | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RadioButtonProps = typeof __propDef.props;
+export type RadioButtonEvents = typeof __propDef.events;
+export type RadioButtonSlots = typeof __propDef.slots;
+export default class RadioButton extends SvelteComponentTyped<RadioButtonProps, RadioButtonEvents, RadioButtonSlots> {
+}
+export {};

package/package/components/Range.svelte

@@ -0,0 +1,301 @@
+<script>
+	import { createEventDispatcher } from 'svelte'
+	import { fly, fade } from 'svelte/transition'
+
+	// Props
+	export let min = 0
+	export let max = 100
+	export let initialValue = 0
+	export let id = null
+	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
+
+	// Node Bindings
+	let container = null
+	let thumb = null
+	let progressBar = null
+	let element = null
+
+	// Internal State
+	let elementX = null
+	let currentThumb = null
+	let holding = false
+	let thumbHover = false
+	let keydownAcceleration = 0
+	let accelerationTimer = null
+
+	// Dispatch 'change' events
+	const dispatch = createEventDispatcher()
+
+	// Mouse shield used onMouseDown to prevent any mouse events penetrating other elements,
+	// ie. hover events on other elements while dragging. Especially for Safari
+	const mouseEventShield = document.createElement('div')
+	mouseEventShield.setAttribute('class', 'mouse-over-shield')
+	mouseEventShield.addEventListener('mouseover', (e) => {
+		e.preventDefault()
+		e.stopPropagation()
+	})
+
+	function resizeWindow() {
+		elementX = element.getBoundingClientRect().left
+	}
+
+	// Allows both bind:value and on:change for parent value retrieval
+	function setValue(val) {
+		value = val
+		dispatch('change', { value })
+	}
+
+	function onTrackEvent(e) {
+		// Update value immediately before beginning drag
+		updateValueOnEvent(e)
+		onDragStart(e)
+	}
+
+	function onDragStart(e) {
+		// If mouse event add a pointer events shield
+		if (e.type === 'mousedown') document.body.append(mouseEventShield)
+		currentThumb = thumb
+	}
+
+	function onDragEnd(e) {
+		// If using mouse - remove pointer event shield
+		if (e.type === 'mouseup') {
+			if (document.body.contains(mouseEventShield)) document.body.removeChild(mouseEventShield)
+			// Needed to check whether thumb and mouse overlap after shield removed
+			if (isMouseInElement(e, thumb)) thumbHover = true
+		}
+		currentThumb = null
+	}
+
+	// Check if mouse event cords overlay with an element's area
+	function isMouseInElement(event, element) {
+		let rect = element.getBoundingClientRect()
+		let { clientX: x, clientY: y } = event
+		if (x < rect.left || x >= rect.right) return false
+		if (y < rect.top || y >= rect.bottom) return false
+		return true
+	}
+
+	// Accessible keypress handling
+	function onKeyPress(e) {
+		// Max out at +/- 10 to value per event (50 events / 5)
+		// 100 below is to increase the amount of events required to reach max velocity
+		if (keydownAcceleration < 50) keydownAcceleration++
+		let throttled = Math.ceil(keydownAcceleration / 5)
+
+		if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+			if (value + throttled > max || value >= max) {
+				setValue(max)
+			} else {
+				setValue(value + throttled)
+			}
+		}
+		if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+			if (value - throttled < min || value <= min) {
+				setValue(min)
+			} else {
+				setValue(value - throttled)
+			}
+		}
+
+		// Reset acceleration after 100ms of no events
+		clearTimeout(accelerationTimer)
+		accelerationTimer = setTimeout(() => (keydownAcceleration = 1), 100)
+	}
+
+	function calculateNewValue(clientX) {
+		// Find distance between cursor and element's left cord (20px / 2 = 10px) - Center of thumb
+		let delta = clientX - (elementX + 10)
+
+		// Use width of the container minus (5px * 2 sides) offset for percent calc
+		let percent = (delta * 100) / (container.clientWidth - 10)
+
+		// Limit percent 0 -> 100
+		percent = percent < 0 ? 0 : percent > 100 ? 100 : percent
+
+		// Limit value min -> max
+		setValue(Math.round((percent * (max - min)) / 100 + min))
+	}
+
+	// Handles both dragging of touch/mouse as well as simple one-off click/touches
+	function updateValueOnEvent(e) {
+		// touchstart && mousedown are one-off updates, otherwise expect a currentPointer node
+		if (!currentThumb && e.type !== 'touchstart' && e.type !== 'mousedown') return false
+
+		if (e.stopPropagation) e.stopPropagation()
+		if (e.preventDefault) e.preventDefault()
+
+		// Get client's x cord either touch or mouse
+		const clientX =
+			e.type === 'touchmove' || e.type === 'touchstart' ? e.touches[0].clientX : e.clientX
+
+		calculateNewValue(clientX)
+	}
+
+	// React to left position of element relative to window
+	$: if (element) elementX = element.getBoundingClientRect().left
+
+	// Set a class based on if dragging
+	$: holding = Boolean(currentThumb)
+
+	// Update progressbar and thumb styles to represent value
+	$: if (progressBar && thumb) {
+		// Limit value min -> max
+		value = value > min ? value : min
+		value = value < max ? value : max
+
+		let percent = ((value - min) * 100) / (max - min)
+		let offsetLeft = (container.clientWidth - 10) * (percent / 100) + 5
+
+		// Update thumb position + active range track width
+		thumb.style.left = `${offsetLeft}px`
+		progressBar.style.width = `${offsetLeft}px`
+	}
+</script>
+
+<svelte:window
+	on:touchmove|nonpassive={updateValueOnEvent}
+	on:touchcancel={onDragEnd}
+	on:touchend={onDragEnd}
+	on:mousemove={updateValueOnEvent}
+	on:mouseup={onDragEnd}
+	on:resize={resizeWindow}
+/>
+<div class="range">
+	<div
+		class="range__wrapper"
+		tabindex="0"
+		on:keydown={onKeyPress}
+		bind:this={element}
+		role="slider"
+		aria-valuemin={min}
+		aria-valuemax={max}
+		aria-valuenow={value}
+		{id}
+		on:pointerdown|stopPropagation
+		on:mousedown|stopPropagation={onTrackEvent}
+		on:touchstart|stopPropagation={onTrackEvent}
+	>
+		<div class="range__track" bind:this={container}>
+			<div class="range__track--highlighted" bind:this={progressBar} />
+			<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+			<div
+				class="range__thumb"
+				class:range__thumb--holding={holding}
+				bind:this={thumb}
+				on:touchstart={onDragStart}
+				on:mousedown={onDragStart}
+				on:mouseover={() => (thumbHover = true)}
+				on:mouseout={() => (thumbHover = false)}
+			>
+				{#if holding || thumbHover}
+					<div class="range__tooltip" in:fly={{ y: 7, duration: 200 }} out:fade={{ duration: 100 }}>
+						{value}
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<style>
+		.mouse-over-shield {
+			position: fixed;
+			top: 0px;
+			left: 0px;
+			height: 100%;
+			width: 100%;
+			background-color: rgba(255, 0, 0, 0);
+			z-index: 10000;
+			cursor: grabbing;
+		}</style>
+</svelte:head>
+
+<style>
+	.range {
+		position: relative;
+		flex: 1;
+	}
+
+	.range__wrapper {
+		min-width: 100%;
+		position: relative;
+		padding: 0.5rem;
+		box-sizing: border-box;
+		outline: none;
+	}
+
+	.range__wrapper:focus-visible > .range__track {
+		box-shadow: 0 0 0 2px white, 0 0 0 3px var(--track-focus, #6185ff);
+	}
+
+	.range__track {
+		height: 6px;
+		background-color: var(--track-bgcolor, #d0d0d0);
+		border-radius: 999px;
+	}
+
+	.range__track--highlighted {
+		background-color: var(--track-highlight-bgcolor, #6185ff);
+		background: var(--track-highlight-bg, linear-gradient(90deg, #6185ff, #9c65ff));
+		width: 0;
+		height: 6px;
+		position: absolute;
+		border-radius: 999px;
+	}
+
+	.range__thumb {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		width: 20px;
+		height: 20px;
+		background-color: var(--thumb-bgcolor, white);
+		cursor: pointer;
+		border-radius: 999px;
+		margin-top: -8px;
+		transition: box-shadow 100ms;
+		-webkit-user-select: none;
+		   -moz-user-select: none;
+		        user-select: none;
+		box-shadow: var(
+			--thumb-boxshadow,
+			0 1px 1px 0 rgba(0, 0, 0, 0.14),
+			0 0px 2px 1px rgba(0, 0, 0, 0.2)
+		);
+	}
+
+	.range__thumb--holding {
+		box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 1px rgba(0, 0, 0, 0.2),
+			0 0 0 6px var(--thumb-holding-outline, rgba(113, 119, 250, 0.3));
+	}
+
+	.range__tooltip {
+		pointer-events: none;
+		position: absolute;
+		top: -33px;
+		color: var(--tooltip-text, white);
+		width: 38px;
+		padding: 4px 0;
+		border-radius: 4px;
+		text-align: center;
+		background-color: var(--tooltip-bgcolor, #6185ff);
+		background: var(--tooltip-bg, linear-gradient(45deg, #6185ff, #9c65ff));
+	}
+
+	.range__tooltip::after {
+		content: '';
+		display: block;
+		position: absolute;
+		height: 7px;
+		width: 7px;
+		background-color: var(--tooltip-bgcolor, #6185ff);
+		bottom: -3px;
+		left: calc(50% - 3px);
+		-webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+		        clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+		transform: rotate(-45deg);
+		border-radius: 0 0 0 3px;
+	}</style>

package/package/components/Range.svelte.d.ts

@@ -0,0 +1,40 @@
+/** @typedef {typeof __propDef.props}  RangeProps */
+/** @typedef {typeof __propDef.events}  RangeEvents */
+/** @typedef {typeof __propDef.slots}  RangeSlots */
+export default class Range extends SvelteComponentTyped<{
+    value?: number | undefined;
+    id?: null | undefined;
+    max?: number | undefined;
+    min?: number | undefined;
+    initialValue?: number | undefined;
+}, {
+    pointerdown: PointerEvent;
+    change: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type RangeProps = typeof __propDef.props;
+export type RangeEvents = typeof __propDef.events;
+export type RangeSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: number | undefined;
+        id?: null | undefined;
+        max?: number | undefined;
+        min?: number | undefined;
+        initialValue?: number | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    /** @typedef {typeof __propDef.props}  RangeProps */
+    /** @typedef {typeof __propDef.events}  RangeEvents */
+    /** @typedef {typeof __propDef.slots}  RangeSlots */
+    slots: {};
+};
+export {};

package/package/components/Required.svelte

@@ -0,0 +1,11 @@
+<script>export let required;
+export let detail = '';
+</script>
+
+{#if required}
+	<span class="text-red-700 font-normal {$$props.class}">*</span>
+{:else if detail || detail != ''}
+	<span class="text-sm text-gray-500 ml-2 font-normal {$$props.class}"
+		>({detail != '' ? `${detail}` : ''})</span
+	>
+{/if}

package/package/components/Required.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        required: boolean;
+        detail?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type RequiredProps = typeof __propDef.props;
+export type RequiredEvents = typeof __propDef.events;
+export type RequiredSlots = typeof __propDef.slots;
+export default class Required extends SvelteComponentTyped<RequiredProps, RequiredEvents, RequiredSlots> {
+}
+export {};

package/package/components/ResourceEditor.svelte

@@ -0,0 +1,203 @@
+<script>import { ResourceService } from '../gen';
+import { canWrite, emptyString, isOwner, sendUserToast } from '../utils';
+import { createEventDispatcher } from 'svelte';
+import { Alert, Button, Drawer, Skeleton } from './common';
+import Path from './Path.svelte';
+import Required from './Required.svelte';
+import { userStore, workspaceStore } from '../stores';
+import { faSave } from '@fortawesome/free-solid-svg-icons';
+import autosize from 'svelte-autosize';
+import DrawerContent from './common/drawer/DrawerContent.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
+import Toggle from './Toggle.svelte';
+let path = '';
+let initialPath = '';
+let resourceToEdit;
+let description = '';
+let DESCRIPTION_PLACEHOLDER = `Describe what this resource is for`;
+let selectedResourceType;
+let resourceSchema;
+let args = {};
+let can_write = true;
+let loadingSchema = false;
+let linkedVars = [];
+let drawer;
+let rawCode = undefined;
+const dispatch = createEventDispatcher();
+export async function initEdit(p) {
+    initialPath = p;
+    path = p;
+    resourceToEdit = undefined;
+    resourceSchema = undefined;
+    viewJsonSchema = false;
+    loadingSchema = true;
+    drawer.openDrawer?.();
+    resourceToEdit = await ResourceService.getResource({ workspace: $workspaceStore, path: p });
+    description = resourceToEdit.description ?? '';
+    selectedResourceType = resourceToEdit.resource_type;
+    loadResourceType();
+    args = resourceToEdit.value;
+    can_write =
+        resourceToEdit.workspace_id == $workspaceStore &&
+            canWrite(p, resourceToEdit.extra_perms ?? {}, $userStore);
+    linkedVars = Object.entries(args)
+        .filter(([_, v]) => typeof v == 'string' && v == `$var:${initialPath}`)
+        .map(([k, _]) => k);
+}
+async function editResource() {
+    if (resourceToEdit) {
+        await ResourceService.updateResource({
+            workspace: $workspaceStore,
+            path: resourceToEdit.path,
+            requestBody: { path, value: args, description }
+        });
+        sendUserToast(`Updated resource at ${path}`);
+        dispatch('refresh', path);
+        drawer.closeDrawer?.();
+    }
+    else {
+        throw Error('Cannot edit undefined resourceToEdit');
+    }
+}
+async function loadResourceType() {
+    if (selectedResourceType) {
+        try {
+            const resourceType = await ResourceService.getResourceType({
+                workspace: $workspaceStore,
+                path: selectedResourceType
+            });
+            if (resourceType.schema) {
+                resourceSchema = resourceType.schema;
+            }
+        }
+        catch (err) {
+            resourceSchema = undefined;
+            loadingSchema = false;
+            rawCode = JSON.stringify(args, null, 2);
+        }
+    }
+    else {
+        sendUserToast(`ResourceType cannot be undefined.`, true);
+    }
+    loadingSchema = false;
+}
+let isValid = true;
+let jsonError = '';
+$: rawCode && parseJson();
+function parseJson() {
+    try {
+        args = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+$: linkedVars.length > 0 && path && updateArgsFromLinkedVars();
+function updateArgsFromLinkedVars() {
+    linkedVars.forEach((k) => {
+        args[k] = `$var:${path}`;
+    });
+}
+let viewJsonSchema = false;
+function switchTab(asJson) {
+    viewJsonSchema = asJson;
+    if (asJson) {
+        rawCode = JSON.stringify(args, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+</script>
+
+<Drawer bind:this={drawer} size="800px">
+	<DrawerContent
+		title={resourceToEdit ? 'Edit ' + resourceToEdit.path : 'Add a resource'}
+		on:close={drawer.closeDrawer}
+	>
+		<div>
+			<div class="flex flex-col gap-3 py-3 text-gray-700">
+				<div>
+					{#if !can_write}
+						<div class="m-2">
+							<Alert type="warning" title="Only read access"
+								>You only have read access to this resource and cannot edit it</Alert
+							>
+						</div>
+					{/if}
+					<Path
+						disabled={initialPath != '' && !isOwner(initialPath, $userStore, $workspaceStore)}
+						bind:path
+						{initialPath}
+						namePlaceholder="resource"
+						kind="resource"
+					/>
+				</div>
+				<div class="flex w-full justify-between max-w-lg items-center mt-4">
+					<h3>Value</h3>
+					<Toggle
+						on:change={(e) => switchTab(e.detail)}
+						options={{
+							right: 'As JSON'
+						}}
+					/>
+				</div>
+				<div class="text-sm">
+					{#if loadingSchema}
+						<Skeleton layout={[[4]]} />
+					{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
+						<SchemaForm
+							noDelete
+							disabled={!can_write}
+							compact
+							schema={resourceSchema}
+							bind:args
+							bind:isValid
+						/>
+					{:else if !can_write}
+						<input type="text" disabled value={rawCode} />
+					{:else}
+						{#if !viewJsonSchema}
+							<p class="italic text-gray-500 text-xs mb-4"
+								>No corresponding resource type found in your workspace for {selectedResourceType}.
+								Define the value in JSON directly</p
+							>
+						{/if}
+
+						{#if !emptyString(jsonError)}<span
+								class="text-red-400 text-xs mb-1 flex flex-row-reverse">{jsonError}</span
+							>{:else}<div class="py-2" />{/if}
+						<div class="h-full w-full border p-1 rounded">
+							<SimpleEditor
+								autoHeight
+								class="editor"
+								lang="json"
+								bind:code={rawCode}
+								fixedOverflowWidgets={false}
+							/>
+						</div>
+					{/if}
+				</div>
+				<h3 class="mt-4">Description <Required required={false} /> </h3>
+				<textarea
+					type="text"
+					disabled={!can_write}
+					use:autosize
+					bind:value={description}
+					placeholder={DESCRIPTION_PLACEHOLDER}
+				/>
+			</div>
+		</div>
+		<svelte:fragment slot="actions">
+			<Button
+				startIcon={{ icon: faSave }}
+				on:click={editResource}
+				disabled={!can_write || !isValid || jsonError != ''}
+			>
+				Save
+			</Button>
+		</svelte:fragment>
+	</DrawerContent>
+</Drawer>

package/package/components/ResourceEditor.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        initEdit?: ((p: string) => Promise<void>) | undefined;
+    };
+    events: {
+        refresh: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResourceEditorProps = typeof __propDef.props;
+export type ResourceEditorEvents = typeof __propDef.events;
+export type ResourceEditorSlots = typeof __propDef.slots;
+export default class ResourceEditor extends SvelteComponentTyped<ResourceEditorProps, ResourceEditorEvents, ResourceEditorSlots> {
+    get initEdit(): (p: string) => Promise<void>;
+}
+export {};