windmill-components 1.87.0 → 1.89.0

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

@@ -0,0 +1,160 @@
+<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/package/components/common/popup/Popup.svelte.d.ts

@@ -0,0 +1,64 @@
+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/package/components/common/seconds/SecondsInput.svelte

@@ -0,0 +1,95 @@
+<script>const ONE_DAY_IN_SECONDS = 86400;
+const ONE_HOUR_IN_SECONDS = 3600;
+const ONE_MINUTE_IN_SECONDS = 60;
+export let seconds = 0;
+export let hideDisplay = false;
+export let disabled = false;
+let day = undefined;
+let hour = undefined;
+let min = undefined;
+let sec = undefined;
+$: convertSecondsToTime(seconds);
+function convertSecondsToTime(seconds) {
+    day = Math.floor(seconds / ONE_DAY_IN_SECONDS);
+    seconds -= day * ONE_DAY_IN_SECONDS;
+    day = day || undefined;
+    hour = Math.floor(seconds / ONE_HOUR_IN_SECONDS);
+    seconds -= hour * ONE_HOUR_IN_SECONDS;
+    hour = hour || undefined;
+    min = Math.floor(seconds / ONE_MINUTE_IN_SECONDS);
+    seconds -= min * ONE_MINUTE_IN_SECONDS;
+    min = min || undefined;
+    sec = seconds || undefined;
+}
+function convertUnitsToSeconds() {
+    seconds =
+        (day || 0) * ONE_DAY_IN_SECONDS +
+            (hour || 0) * ONE_HOUR_IN_SECONDS +
+            (min || 0) * ONE_MINUTE_IN_SECONDS +
+            (sec || 0);
+    if (seconds < 0)
+        seconds = 0;
+}
+</script>
+
+<div>
+	{#if !hideDisplay}
+		<input
+			value={disabled ? '' : seconds + ' second' + (seconds === 1 ? '' : 's')}
+			{disabled}
+			readonly
+			type="text"
+			class="max-w-[248px] bg-gray-50 mb-2"
+		/>
+	{/if}
+	<div class="flex flex-wrap items-center gap-2 text-xs font-medium">
+		<div class="flex items-center gap-2">
+			<label>
+				Sec
+				<input
+					type="number"
+					class="!w-14"
+					{disabled}
+					bind:value={sec}
+					on:change={convertUnitsToSeconds}
+					on:focus
+				/>
+			</label>
+			<label>
+				Min
+				<input
+					type="number"
+					class="!w-14"
+					{disabled}
+					bind:value={min}
+					on:change={convertUnitsToSeconds}
+					on:focus
+				/>
+			</label>
+		</div>
+		<div class="flex items-center gap-2">
+			<label>
+				Hour
+				<input
+					type="number"
+					class="!w-14"
+					{disabled}
+					bind:value={hour}
+					on:change={convertUnitsToSeconds}
+					on:focus
+				/>
+			</label>
+			<label>
+				Day
+				<input
+					type="number"
+					class="!w-14"
+					{disabled}
+					bind:value={day}
+					on:change={convertUnitsToSeconds}
+					on:focus
+				/>
+			</label>
+		</div>
+	</div>
+</div>

package/package/components/common/seconds/SecondsInput.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        seconds?: number | undefined;
+        hideDisplay?: boolean | undefined;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SecondsInputProps = typeof __propDef.props;
+export type SecondsInputEvents = typeof __propDef.events;
+export type SecondsInputSlots = typeof __propDef.slots;
+export default class SecondsInput extends SvelteComponentTyped<SecondsInputProps, SecondsInputEvents, SecondsInputSlots> {
+}
+export {};

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

@@ -0,0 +1,37 @@
+<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/package/components/common/skeleton/Skeleton.svelte.d.ts

@@ -0,0 +1,20 @@
+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/package/components/common/skeleton/SkeletonElement.svelte

@@ -0,0 +1,8 @@
+<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/package/components/common/skeleton/SkeletonElement.svelte.d.ts

@@ -0,0 +1,17 @@
+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/package/components/common/skeleton/model.d.ts

@@ -0,0 +1,21 @@
+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/package/components/common/skeleton/model.js

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

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

@@ -0,0 +1,126 @@
+<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/package/components/common/table/AppRow.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type MoveDrawer from '../../MoveDrawer.svelte';
+import type ShareModal from '../../ShareModal.svelte';
+import { type ListableApp } from '../../../gen';
+declare const __propDef: {
+    props: {
+        app: ListableApp & {
+            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 AppRowProps = typeof __propDef.props;
+export type AppRowEvents = typeof __propDef.events;
+export type AppRowSlots = typeof __propDef.slots;
+export default class AppRow extends SvelteComponentTyped<AppRowProps, AppRowEvents, AppRowSlots> {
+}
+export {};