windmill-components 1.89.0 → 1.103.0

package/dist/components/common/popup/Popup.svelte

@@ -1,160 +0,0 @@
-<svelte:options accessors />
-
-<script>import { createEventDispatcher, onDestroy } from 'svelte';
-import { slide } from 'svelte/transition';
-import { createPopperActions } from 'svelte-popperjs';
-import { clickOutside } from '../../../utils';
-import { createStateMachine } from '../../../stateMachine';
-export let ref;
-export let options = { placement: 'auto', strategy: 'fixed' };
-/** Events on the reference element */
-export let openOn = ['focus'];
-/** Events on the reference element */
-export let closeOn = ['blur'];
-export let innerClasses = '';
-export let outerClasses = '';
-export let wrapperClasses = '';
-export let transition = slide;
-export { openFocusIn as open, closed as close };
-const states = ['closed', 'open-focus-in', 'open-focus-out'];
-const stateMachine = createStateMachine(states, {
-    to: {
-        closed: ({ previousState, currentState }) => {
-            return isFocusContained() ? previousState : currentState;
-        }
-    }
-});
-const [popperRef, popperContent, getInstance] = createPopperActions();
-const dispatch = createEventDispatcher();
-let popup;
-let focusableElements;
-function getFocusableElements() {
-    let elements = [];
-    popup
-        ?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
-        .forEach((elem) => elements.push(elem));
-    focusableElements = elements.filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
-    focusableElements.forEach((el) => {
-        el.tabIndex = -1;
-        el.addEventListener('click', openFocusIn);
-        el.addEventListener('blur', conditionalClosed);
-    });
-}
-function isFocusContained() {
-    const activeElem = document.activeElement;
-    return popup?.contains(activeElem) || ref?.contains(activeElem);
-}
-function closed() {
-    if ($stateMachine.currentState === 'open-focus-out') {
-        setTimeout(() => {
-            stateMachine.setState('closed');
-            dispatch('close');
-        }, 0);
-    }
-    else {
-        stateMachine.setState('closed');
-        dispatch('close');
-    }
-}
-function conditionalClosed() {
-    setTimeout(() => {
-        if (isFocusContained())
-            return;
-        closed();
-    }, 0);
-}
-function openFocusOut() {
-    stateMachine.setState('open-focus-out');
-}
-function openFocusIn() {
-    stateMachine.setState('open-focus-in');
-}
-function keyDown(event) {
-    const modifiers = ['Shift', 'Control', 'Command', 'Alt', 'Meta'];
-    // Prevent closing the popup when the only key pressed is a modifier key
-    if (modifiers.includes(event.key) || $stateMachine.currentState === 'closed')
-        return;
-    if (event.key === 'Escape') {
-        ;
-        document.activeElement?.blur();
-        return conditionalClosed();
-    }
-    const prev = ['Up', 'Left'];
-    const next = ['Down', 'Right'];
-    if (![...prev, ...next].some((dir) => `Arrow${dir}` === event.key))
-        return;
-    event.preventDefault();
-    if (popup?.contains(document.activeElement)) {
-        const index = focusableElements.findIndex((elem) => elem === document.activeElement);
-        if (index === -1)
-            return;
-        let targetIndex = undefined;
-        if (prev.some((dir) => `Arrow${dir}` === event.key)) {
-            targetIndex = index === 0 ? focusableElements.length - 1 : index - 1;
-        }
-        else if (next.some((dir) => `Arrow${dir}` === event.key)) {
-            targetIndex = index + 1 === focusableElements.length ? 0 : index + 1;
-        }
-        if (targetIndex !== undefined) {
-            focusableElements[targetIndex].focus();
-            stateMachine.setState('open-focus-in');
-        }
-    }
-    else {
-        const elem = focusableElements[event.key === 'ArrowUp' ? focusableElements.length - 1 : 0];
-        if (elem) {
-            elem.focus();
-            stateMachine.setState('open-focus-in');
-        }
-    }
-}
-function addRefListeners() {
-    if (!ref)
-        return;
-    openOn.forEach((action) => ref.addEventListener(action, openFocusOut));
-    closeOn.forEach((action) => ref.addEventListener(action, closed));
-}
-function removeAllListeners() {
-    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
-    focusableElements?.forEach((el) => el.removeEventListener('blur', conditionalClosed));
-    if (!ref)
-        return;
-    openOn.forEach((action) => ref.removeEventListener(action, openFocusOut));
-    closeOn.forEach((action) => ref.removeEventListener(action, closed));
-}
-$: if ($stateMachine.currentState === 'closed') {
-    focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
-}
-else {
-    setTimeout(() => {
-        getFocusableElements();
-        getInstance()?.update();
-    }, 0);
-}
-$: if (ref) {
-    popperRef(ref);
-    addRefListeners();
-}
-$: $$slots.default && getInstance()?.update();
-onDestroy(removeAllListeners);
-</script>
-
-<svelte:window on:keydown={keyDown} />
-
-<div
-	class="z-50 {wrapperClasses}"
-	bind:this={popup}
-	use:popperContent={options}
-	use:clickOutside
-	on:click_outside={closed}
-	aria-haspopup="true"
-	aria-expanded={$stateMachine.currentState !== 'closed'}
->
-	{#if $stateMachine.currentState !== 'closed'}
-		<div transition:transition|local={{ duration: 100 }} class={outerClasses}>
-			<div class={innerClasses}>
-				<slot open={openFocusIn} close={closed} />
-			</div>
-		</div>
-	{/if}
-</div>

package/dist/components/common/popup/Popup.svelte.d.ts

@@ -1,64 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type TransitionConfig } from 'svelte/transition';
-import { type PopperOptions } from 'svelte-popperjs';
-declare const __propDef: {
-    props: {
-        ref: HTMLElement | undefined;
-        options?: PopperOptions<any>;
-        /** Events on the reference element */ openOn?: (keyof HTMLElementEventMap)[] | undefined;
-        /** Events on the reference element */ closeOn?: (keyof HTMLElementEventMap)[] | undefined;
-        innerClasses?: string | undefined;
-        outerClasses?: string | undefined;
-        wrapperClasses?: string | undefined;
-        transition?: ((node: Element, params?: Record<string, any>) => TransitionConfig) | undefined;
-        open?: (() => void) | undefined;
-        close?: (() => void) | undefined;
-    }; /**accessor*/
-    events: {
-        close: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {
-            open: () => void;
-            close: () => void;
-        };
-    };
-};
-export type PopupProps = typeof __propDef.props;
-export type PopupEvents = typeof __propDef.events;
-export type PopupSlots = typeof __propDef.slots;
-export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
-    get ref(): HTMLElement | undefined;
-    /**accessor*/
-    set ref(_: HTMLElement | undefined);
-    get options(): PopperOptions<any>;
-    /**accessor*/
-    set options(_: PopperOptions<any>);
-    get openOn(): (keyof HTMLElementEventMap)[] | undefined;
-    /**accessor*/
-    set openOn(_: (keyof HTMLElementEventMap)[] | undefined);
-    get closeOn(): (keyof HTMLElementEventMap)[] | undefined;
-    /**accessor*/
-    set closeOn(_: (keyof HTMLElementEventMap)[] | undefined);
-    get innerClasses(): string | undefined;
-    /**accessor*/
-    set innerClasses(_: string | undefined);
-    get outerClasses(): string | undefined;
-    /**accessor*/
-    set outerClasses(_: string | undefined);
-    get wrapperClasses(): string | undefined;
-    /**accessor*/
-    set wrapperClasses(_: string | undefined);
-    get transition(): ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined;
-    /**accessor*/
-    set transition(_: ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined);
-    get open(): (() => void) | undefined;
-    /**accessor*/
-    set open(_: (() => void) | undefined);
-    get close(): (() => void) | undefined;
-    /**accessor*/
-    set close(_: (() => void) | undefined);
-}
-export {};

package/dist/components/common/skeleton/Skeleton.svelte

@@ -1,37 +0,0 @@
-<script>import { fade } from 'svelte/transition';
-import { HEIGHT_UNIT } from './model';
-import SkeletonElement from './SkeletonElement.svelte';
-export let layout;
-export let loading = true;
-export let overlay = false;
-</script>
-
-{#if loading}
-	<div class="relative flex justify-center">
-		<div
-			in:fade|local={{ duration: 1000 }}
-			class="flex grow flex-col overflow-hidden {overlay
-				? 'absolute w-full h-full z-[1000]'
-				: ''} {$$props.class}"
-		>
-			{#each layout as row}
-				<div class="flex justify-between items-start gap-4">
-					{#if typeof row === 'number'}
-						<div style="height: {row * HEIGHT_UNIT}px;" />
-					{:else if Array.isArray(row)}
-						{#each row as el}
-							{@const element =
-								typeof el === 'number' ? { h: el, w: 100 / row.length, minW: 0 } : el}
-							<SkeletonElement {element} />
-						{/each}
-					{:else}
-						{@const { elements, h } = row}
-						{#each new Array(elements) as _}
-							<SkeletonElement element={{ h, w: 100 / elements }} />
-						{/each}
-					{/if}
-				</div>
-			{/each}
-		</div>
-	</div>
-{/if}

package/dist/components/common/skeleton/Skeleton.svelte.d.ts

@@ -1,20 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type SkeletonLayout } from './model';
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        layout: SkeletonLayout;
-        loading?: boolean | undefined;
-        overlay?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SkeletonProps = typeof __propDef.props;
-export type SkeletonEvents = typeof __propDef.events;
-export type SkeletonSlots = typeof __propDef.slots;
-export default class Skeleton extends SvelteComponentTyped<SkeletonProps, SkeletonEvents, SkeletonSlots> {
-}
-export {};

package/dist/components/common/skeleton/SkeletonElement.svelte

@@ -1,8 +0,0 @@
-<script>import { HEIGHT_UNIT } from './model';
-export let element;
-</script>
-
-<div
-	class="animate-skeleton [animation-delay:1000ms]"
-	style="height: {element.h * HEIGHT_UNIT}px; width: {element.w}%; min-width: {element.minW}px;"
-/>

package/dist/components/common/skeleton/SkeletonElement.svelte.d.ts

@@ -1,17 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { type ISkeletonElement } from './model';
-declare const __propDef: {
-    props: {
-        element: ISkeletonElement;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type SkeletonElementProps = typeof __propDef.props;
-export type SkeletonElementEvents = typeof __propDef.events;
-export type SkeletonElementSlots = typeof __propDef.slots;
-export default class SkeletonElement extends SvelteComponentTyped<SkeletonElementProps, SkeletonElementEvents, SkeletonElementSlots> {
-}
-export {};

package/dist/components/common/skeleton/model.d.ts

@@ -1,21 +0,0 @@
-export declare const HEIGHT_UNIT: 16;
-export type SkeletonLayout = (SkeletonGap | SkeletonRow)[];
-/** **Gap**: number of height units. *(1 unit = 16px)* */
-export type SkeletonGap = number;
-export type SkeletonRow = SkeletonElement[] | ISkeletonRow;
-export interface ISkeletonRow {
-    /** Number of elements in the row.
-     * All elements will have the same width and height of the row. */
-    elements: number;
-    /** **Height**: number of height units. *(1 unit = 16px)* */
-    h: number;
-}
-export type SkeletonElement = number | ISkeletonElement;
-export interface ISkeletonElement {
-    /** **Height**: number of height units. *(1 unit = 16px)* */
-    h: number;
-    /** **Width**: percentage of the row width. *(80 means 80%)* */
-    w: number;
-    /** **Min Width**: minimum width in pixels. */
-    minW?: number;
-}

package/dist/components/common/skeleton/model.js

@@ -1 +0,0 @@
-export const HEIGHT_UNIT = 16;

package/dist/components/common/table/AppRow.svelte

@@ -1,126 +0,0 @@
-<script>import Dropdown from '../../Dropdown.svelte';
-import SharedBadge from '../../SharedBadge.svelte';
-import { AppService } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
-import { faCodeFork, faEdit, faEye, faFileExport, faPen, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
-import Button from '../button/Button.svelte';
-import Row from './Row.svelte';
-export let app;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deleteConfirmedCallback;
-let { summary, path, extra_perms, canWrite, workspace_id } = app;
-const dispatch = createEventDispatcher();
-</script>
-
-<Row
-	href={`/apps/get/${path}`}
-	kind="app"
-	{marked}
-	{path}
-	{summary}
-	workspaceId={workspace_id ?? $workspaceStore ?? ''}
-	{starred}
-	on:change
->
-	<svelte:fragment slot="badges">
-		<SharedBadge {canWrite} extraPerms={extra_perms} />
-	</svelte:fragment>
-	<svelte:fragment slot="actions">
-		<span class="hidden md:inline-flex gap-x-1">
-			{#if !$userStore?.operator}
-				{#if canWrite}
-					<div>
-						<Button
-							color="light"
-							size="xs"
-							variant="border"
-							startIcon={{ icon: faEdit }}
-							href="/apps/edit/{path}?nodraft=true"
-						>
-							Edit
-						</Button>
-					</div>
-				{:else}
-					<div>
-						<Button
-							color="light"
-							size="xs"
-							variant="border"
-							startIcon={{ icon: faCodeFork }}
-							href="/apps/add?template={path}"
-						>
-							Fork
-						</Button>
-					</div>
-				{/if}
-			{/if}
-
-			<Button
-				href="/apps/get/{path}"
-				color="dark"
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faEye }}
-			>
-				View
-			</Button>
-		</span>
-		<Dropdown
-			placement="bottom-end"
-			dropdownItems={[
-				{
-					displayName: 'View',
-					icon: faEye,
-					href: `/apps/get/${path}`
-				},
-				{
-					displayName: 'Edit',
-					icon: faPen,
-					href: `/apps/edit/${path}?nodraft=true`,
-					disabled: !canWrite
-				},
-				{
-					displayName: 'Use as template',
-					icon: faCodeFork,
-					href: `/apps/add?template=${path}`
-				},
-				{
-					displayName: 'Move/Rename',
-					icon: faFileExport,
-					action: () => {
-						moveDrawer.openDrawer(path, summary, 'app')
-					},
-					disabled: !canWrite
-				},
-				{
-					displayName: canWrite ? 'Share' : 'See Permissions',
-					icon: faShare,
-					action: () => {
-						shareModal.openDrawer && shareModal.openDrawer(path, 'app')
-					}
-				},
-				{
-					displayName: 'Delete',
-					icon: faTrashAlt,
-					action: async (event) => {
-						if (event?.shiftKey) {
-							await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
-							dispatch('change')
-						} else {
-							deleteConfirmedCallback = async () => {
-								await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
-								dispatch('change')
-							}
-						}
-					},
-					type: 'delete',
-					disabled: !canWrite
-				}
-			]}
-		/>
-	</svelte:fragment>
-</Row>

package/dist/components/common/table/FlowRow.svelte

@@ -1,194 +0,0 @@
-<script>import { goto } from '$app/navigation';
-import Dropdown from '../../Dropdown.svelte';
-import ScheduleEditor from '../../ScheduleEditor.svelte';
-import SharedBadge from '../../SharedBadge.svelte';
-import { FlowService } from '../../../gen';
-import { userStore, workspaceStore } from '../../../stores';
-import { isOwner, sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
-import Badge from '../badge/Badge.svelte';
-import Button from '../button/Button.svelte';
-import Row from './Row.svelte';
-export let flow;
-export let marked;
-export let starred;
-export let shareModal;
-export let moveDrawer;
-export let deleteConfirmedCallback;
-let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow;
-const dispatch = createEventDispatcher();
-async function archiveFlow(path, archived) {
-    try {
-        await FlowService.archiveFlowByPath({
-            workspace: $workspaceStore,
-            path,
-            requestBody: { archived }
-        });
-        dispatch('change');
-        sendUserToast(`Archived flow ${path}`);
-    }
-    catch (err) {
-        sendUserToast(`Could not archive this flow ${err.body}`, true);
-    }
-}
-async function deleteFlow(path) {
-    try {
-        await FlowService.deleteFlowByPath({ workspace: $workspaceStore, path });
-        dispatch('change');
-        sendUserToast(`Deleted flow ${path}`);
-    }
-    catch (err) {
-        sendUserToast(`Could not delete this flow ${err.body}`, true);
-    }
-}
-let scheduleEditor;
-</script>
-
-<ScheduleEditor on:update={() => goto('/schedules')} bind:this={scheduleEditor} />
-<Row
-	href={`/flows/run/${path}`}
-	kind="flow"
-	workspaceId={workspace_id ?? $workspaceStore ?? ''}
-	{marked}
-	{path}
-	{summary}
-	{starred}
-	on:change
->
-	<svelte:fragment slot="badges">
-		<SharedBadge {canWrite} extraPerms={extra_perms} />
-
-		{#if archived}
-			<Badge color="red" baseClass="border">archived</Badge>
-		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="actions">
-		<span class="hidden md:inline-flex gap-x-1">
-			{#if !$userStore?.operator}
-				{#if canWrite && !archived}
-					<div>
-						<Button
-							color="light"
-							size="xs"
-							variant="border"
-							startIcon={{ icon: faEdit }}
-							href="/flows/edit/{path}?nodraft=true"
-						>
-							Edit
-						</Button>
-					</div>
-				{:else}
-					<div>
-						<Button
-							color="light"
-							size="xs"
-							variant="border"
-							startIcon={{ icon: faCodeFork }}
-							href="/flows/add?template={path}"
-						>
-							Fork
-						</Button>
-					</div>
-				{/if}
-			{/if}
-
-			<Button
-				href="/flows/get/{path}?workspace={$workspaceStore}"
-				color="light"
-				variant="border"
-				size="xs"
-				spacingSize="md"
-				startIcon={{ icon: faEye }}
-			>
-				Detail
-			</Button>
-			<Button
-				href="/flows/run/{path}"
-				color="dark"
-				size="xs"
-				spacingSize="md"
-				endIcon={{ icon: faPlay }}
-			>
-				Run
-			</Button>
-		</span>
-
-		<Dropdown
-			placement="bottom-end"
-			dropdownItems={() => {
-				let owner = isOwner(path, $userStore, $workspaceStore)
-				return [
-					{
-						displayName: 'View flow',
-						icon: faEye,
-						href: `/flows/get/${path}?workspace=${$workspaceStore}`
-					},
-					{
-						displayName: 'Edit',
-						icon: faEdit,
-						href: `/flows/edit/${path}?nodraft=true`,
-						disabled: !canWrite || archived
-					},
-					{
-						displayName: 'Use as template/Fork',
-						icon: faCodeFork,
-						href: `/flows/add?template=${path}`
-					},
-					{
-						displayName: 'View runs',
-						icon: faList,
-						href: `/runs/${path}`
-					},
-					{
-						displayName: 'Move/Rename',
-						icon: faFileExport,
-						action: () => {
-							moveDrawer.openDrawer(path, summary, 'flow')
-						},
-						disabled: !owner || archived
-					},
-					{
-						displayName: 'Schedule',
-						icon: faCalendarAlt,
-						action: () => {
-							scheduleEditor.openNew(true, path)
-						},
-						disabled: archived
-					},
-					{
-						displayName: owner ? 'Share' : 'See Permissions',
-						icon: faShare,
-						action: () => {
-							shareModal.openDrawer && shareModal.openDrawer(path, 'flow')
-						}
-					},
-					{
-						displayName: archived ? 'Unarchive' : 'Archive',
-						icon: faArchive,
-						action: () => {
-							path && archiveFlow(path, !archived)
-						},
-						type: 'delete',
-						disabled: !owner
-					},
-					{
-						displayName: 'Delete',
-						icon: faTrashAlt,
-						action: (event) => {
-							if (event?.shiftKey) {
-								deleteFlow(path)
-							} else {
-								deleteConfirmedCallback = () => {
-									deleteFlow(path)
-								}
-							}
-						},
-						type: 'delete',
-						disabled: !owner
-					}
-				]
-			}}
-		/>
-	</svelte:fragment>
-</Row>

package/dist/components/common/table/FlowRow.svelte.d.ts

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type MoveDrawer from '../../MoveDrawer.svelte';
-import type ShareModal from '../../ShareModal.svelte';
-import { type Flow } from '../../../gen';
-declare const __propDef: {
-    props: {
-        flow: import("../../../gen").OpenFlow & import("../../../gen").FlowMetadata & {
-            canWrite: boolean;
-        };
-        marked: string | undefined;
-        starred: boolean;
-        shareModal: ShareModal;
-        moveDrawer: MoveDrawer;
-        deleteConfirmedCallback: (() => void) | undefined;
-    };
-    events: {
-        change: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FlowRowProps = typeof __propDef.props;
-export type FlowRowEvents = typeof __propDef.events;
-export type FlowRowSlots = typeof __propDef.slots;
-export default class FlowRow extends SvelteComponentTyped<FlowRowProps, FlowRowEvents, FlowRowSlots> {
-}
-export {};