windmill-components 1.89.0 → 1.103.0

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

@@ -1,27 +0,0 @@
-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;
-        disapperTimoout?: 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/dist/components/RadioButton.svelte

@@ -1,39 +0,0 @@
-<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/dist/components/RadioButton.svelte.d.ts

@@ -1,26 +0,0 @@
-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/dist/components/Range.svelte

@@ -1,301 +0,0 @@
-<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/dist/components/Range.svelte.d.ts

@@ -1,40 +0,0 @@
-/** @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/dist/components/Required.svelte

@@ -1,11 +0,0 @@
-<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/dist/components/Required.svelte.d.ts

@@ -1,18 +0,0 @@
-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/dist/components/ResourceEditor.svelte

@@ -1,203 +0,0 @@
-<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/dist/components/ResourceEditor.svelte.d.ts

@@ -1,19 +0,0 @@
-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 {};