windmill-components 1.86.0 → 1.89.0

package/package/components/common/button/Button.svelte

@@ -0,0 +1,159 @@
+<script>import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { ButtonType } from './model';
+import { goto } from '$app/navigation';
+import { Loader2 } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+import ButtonDropdown from './ButtonDropdown.svelte';
+import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import { classNames } from '../../../utils';
+export let size = 'md';
+export let spacingSize = size;
+export let color = 'blue';
+export let variant = 'contained';
+export let btnClasses = '';
+export let wrapperClasses = '';
+export let disabled = false;
+export let href = undefined;
+export let target = '_self';
+export let iconOnly = false;
+export let startIcon = undefined;
+export let endIcon = undefined;
+export let element = undefined;
+export let id = '';
+export let nonCaptureEvent = false;
+export let buttonType = 'button';
+export let loading = false;
+export let title = undefined;
+export let style = '';
+export let dropdownItems = undefined;
+function computeDropdowns() {
+    if (typeof dropdownItems === 'function') {
+        return dropdownItems();
+    }
+    else {
+        return dropdownItems;
+    }
+}
+const dispatch = createEventDispatcher();
+// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
+const colorVariants = {
+    none: {
+        border: '',
+        contained: '',
+        divider: ''
+    },
+    blue: {
+        border: 'border-frost-500 hover:border-frost-700 focus:border-frost-700 bg-white hover:bg-frost-100 focus:bg-frost-100 text-frost-500 hover:text-frost-700 focus:text-frost-700 focus:ring-frost-300',
+        contained: 'bg-frost-500 hover:bg-frost-700 focus:bg-frost-700 text-white focus:ring-frost-300',
+        divider: 'divide-x divide-frost-600'
+    },
+    red: {
+        border: 'border-red-600 hover:border-red-700 bg-white hover:bg-red-100 text-red-600 hover:text-red-700 focus:ring-red-300',
+        contained: 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-300',
+        divider: 'divide-x divide-red-700'
+    },
+    green: {
+        border: 'border-green-600 hover:border-green-700 bg-white hover:bg-green-100 text-green-600 hover:text-green-700 focus:ring-green-300',
+        contained: 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-300',
+        divider: 'divide-x divide-green-700'
+    },
+    dark: {
+        border: 'border-gray-800 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+        contained: 'bg-gray-700 hover:bg-gray-900 focus:bg-gray-900 text-white focus:ring-gray-300',
+        divider: 'divide-x divide-gray-800'
+    },
+    gray: {
+        border: 'border-gray-600 hover:border-gray-900 focus:border-gray-900 bg-white hover:bg-gray-200 focus:bg-gray-200 text-gray-800 hover:text-gray-900 focus:text-gray-900 focus:ring-gray-300',
+        contained: 'bg-gray-700/90 hover:bg-gray-900/90 focus:bg-gray-900/90 text-white focus:ring-gray-300',
+        divider: 'divide-x divide-gray-700'
+    },
+    light: {
+        border: 'border border-gray-300 bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-700 hover:text-gray-800 focus:text-gray-800 focus:ring-gray-300',
+        contained: 'bg-white border-gray-300  hover:bg-gray-100 focus:bg-gray-100 text-gray-700 focus:ring-gray-300',
+        divider: 'divide-x divide-gray-100'
+    }
+};
+$: buttonProps = {
+    id,
+    href,
+    target,
+    tabindex: disabled ? -1 : 0,
+    type: buttonType,
+    title,
+    ...$$restProps
+};
+async function onClick(event) {
+    if (!nonCaptureEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+        dispatch('click', event);
+        if (href) {
+            if (href.startsWith('http') || target == '_blank') {
+                window.open(href, target);
+            }
+            else {
+                loading = true;
+                await goto(href);
+                loading = false;
+            }
+        }
+    }
+}
+$: isSmall = size === 'xs' || size === 'sm';
+$: startIconClass = twMerge(iconOnly ? undefined : isSmall ? 'mr-1' : 'mr-2', startIcon?.classes);
+$: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endIcon?.classes);
+$: buttonClass = twMerge('w-full', colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, 'transition-all ');
+</script>
+
+<div class="{dropdownItems ? colorVariants[color].divider : ''} {wrapperClasses} flex flex-row">
+	<svelte:element
+		this={href ? 'a' : 'button'}
+		bind:this={element}
+		on:pointerdown
+		on:click={onClick}
+		on:focus
+		on:blur
+		class={twMerge(buttonClass, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '')}
+		{...buttonProps}
+		disabled={disabled || loading}
+		type="submit"
+		{style}
+	>
+		{#if loading}
+			<Loader2 class="animate-spin mr-1" size={14} />
+		{:else if startIcon}
+			<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
+		{/if}
+
+		{#if !iconOnly}
+			<slot />
+		{/if}
+		{#if endIcon}
+			<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
+		{/if}
+	</svelte:element>
+
+	{#if dropdownItems}
+		<div class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>
+			<ButtonDropdown>
+				<svelte:fragment slot="items">
+					{#each computeDropdowns() ?? [] as item}
+						<MenuItem on:click={item.onClick} href={item.href}>
+							<div
+								class={classNames(
+									'!text-gray-600 text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
+								)}
+							>
+								{#if item.icon}
+									<svelte:component this={item.icon} class="w-4 h-4" />
+								{/if}
+								{item.label}
+							</div>
+						</MenuItem>
+					{/each}
+				</svelte:fragment>
+			</ButtonDropdown>
+		</div>
+	{/if}
+</div>

package/package/components/common/button/Button.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+import Icon from 'svelte-awesome';
+import { ButtonType } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        size?: ButtonType.Size | undefined;
+        spacingSize?: ButtonType.Size | undefined;
+        color?: "blue" | "red" | "dark" | "light" | "green" | "gray" | "none" | undefined;
+        variant?: ButtonType.Variant | undefined;
+        btnClasses?: string | undefined;
+        wrapperClasses?: string | undefined;
+        disabled?: boolean | undefined;
+        href?: string | undefined;
+        target?: ButtonType.Target | undefined;
+        iconOnly?: boolean | undefined;
+        startIcon?: ButtonType.Icon | undefined;
+        endIcon?: ButtonType.Icon | undefined;
+        element?: ButtonType.Element | undefined;
+        id?: string | undefined;
+        nonCaptureEvent?: boolean | undefined;
+        buttonType?: "button" | "submit" | "reset" | undefined;
+        loading?: boolean | undefined;
+        title?: string | undefined;
+        style?: string | undefined;
+        dropdownItems?: {
+            label: string;
+            onClick?: (() => void) | undefined;
+            href?: string | undefined;
+            icon?: any;
+        }[] | (() => {
+            label: string;
+            onClick?: (() => void) | undefined;
+            href?: string | undefined;
+            icon?: any;
+        }[]) | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+        focus: FocusEvent;
+        blur: FocusEvent;
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/package/components/common/button/ButtonDropdown.svelte

@@ -0,0 +1,27 @@
+<script>
+	import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui'
+	import { ChevronDown } from 'lucide-svelte'
+</script>
+
+<Menu let:open as="div" class="relative z-50 flex w-full h-full">
+	<MenuButton class="h-full w-full px-2">
+		<ChevronDown class="w-5 h-5" />
+	</MenuButton>
+	<Transition
+		show={open}
+		enter="transition ease-out duration-75"
+		enterFrom="transform opacity-0 scale-95"
+		enterTo="transform opacity-100 scale-100"
+		leave="transition ease-in duration-75"
+		leaveFrom="transform opacity-100 scale-100"
+		leaveTo="transform opacity-0 scale-95"
+	>
+		<MenuItems
+			class="absolute border right-0 z-50 mt-2 w-56 origin-top-right top-8 rounded-md bg-white shadow-md focus:outline-none"
+		>
+			<div class="my-1">
+				<slot name="items" />
+			</div>
+		</MenuItems>
+	</Transition>
+</Menu>

package/package/components/common/button/ButtonDropdown.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ButtonDropdownProps */
+/** @typedef {typeof __propDef.events}  ButtonDropdownEvents */
+/** @typedef {typeof __propDef.slots}  ButtonDropdownSlots */
+export default class ButtonDropdown extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    items: {};
+}> {
+}
+export type ButtonDropdownProps = typeof __propDef.props;
+export type ButtonDropdownEvents = typeof __propDef.events;
+export type ButtonDropdownSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        items: {};
+    };
+};
+export {};

package/package/components/common/button/UndoRedo.svelte

@@ -0,0 +1,32 @@
+<script>import { Redo, Undo } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
+import { Button } from '..';
+export let undoProps = {};
+export let redoProps = {};
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex">
+	<Button
+		title="Undo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-r-none"
+		on:click={() => dispatch('undo')}
+		{...undoProps}
+	>
+		<Undo size={14} />
+	</Button>
+	<Button
+		title="Redo"
+		variant="border"
+		color="light"
+		size="xs"
+		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
+		on:click={() => dispatch('redo')}
+		{...redoProps}
+	>
+		<Redo size={14} />
+	</Button>
+</div>

package/package/components/common/button/UndoRedo.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        undoProps?: Record<string, any> | undefined;
+        redoProps?: Record<string, any> | undefined;
+    };
+    events: {
+        undo: CustomEvent<any>;
+        redo: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UndoRedoProps = typeof __propDef.props;
+export type UndoRedoEvents = typeof __propDef.events;
+export type UndoRedoSlots = typeof __propDef.slots;
+export default class UndoRedo extends SvelteComponentTyped<UndoRedoProps, UndoRedoEvents, UndoRedoSlots> {
+}
+export {};

package/package/components/common/button/model.d.ts

@@ -0,0 +1,19 @@
+export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
+export declare namespace ButtonType {
+    type Size = 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    type Color = (typeof BUTTON_COLORS)[number];
+    type Variant = 'contained' | 'border' | 'divider';
+    type Target = '_self' | '_blank';
+    type Element = HTMLButtonElement | HTMLAnchorElement;
+    interface Icon {
+        icon: any;
+        classes?: string;
+    }
+    const FontSizeClasses: Record<ButtonType.Size, string>;
+    const SpacingClasses: Record<ButtonType.Size, Record<ButtonType.Variant, string>>;
+    const IconScale: Record<ButtonType.Size, number>;
+    interface ItemProps {
+        size: Size;
+        color: Color;
+    }
+}

package/package/components/common/button/model.js

@@ -0,0 +1,52 @@
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'];
+export var ButtonType;
+(function (ButtonType) {
+    ButtonType.FontSizeClasses = {
+        xs2: 'text-xs',
+        xs: 'text-xs',
+        sm: 'text-sm',
+        md: 'text-md',
+        lg: 'text-lg',
+        xl: 'text-xl'
+    };
+    ButtonType.SpacingClasses = {
+        xs2: {
+            border: 'px-2 py-[4px]',
+            contained: 'px-2 py-[4px]',
+            divider: ''
+        },
+        xs: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]',
+            divider: ''
+        },
+        sm: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]',
+            divider: ''
+        },
+        md: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]',
+            divider: ''
+        },
+        lg: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]',
+            divider: ''
+        },
+        xl: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]',
+            divider: ''
+        }
+    };
+    ButtonType.IconScale = {
+        xs2: 0.6,
+        xs: 0.7,
+        sm: 0.8,
+        md: 1,
+        lg: 1.1,
+        xl: 1.2
+    };
+})(ButtonType || (ButtonType = {}));

package/package/components/common/clearableInput/ClearableInput.svelte

@@ -0,0 +1,56 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import { X } from 'lucide-svelte';
+export let value = '';
+export let placeholder = '';
+export let type = 'text';
+export let inputClass = '';
+export let wrapperClass = '';
+export let buttonClass = '';
+const dispatch = createEventDispatcher();
+$: isNumeric = ['number', 'range'].includes(type);
+$: dispatch('change', value);
+function handleInput(e) {
+    value = isNumeric ? +e.target.value : e.target.value;
+}
+function clear() {
+    value = '';
+}
+</script>
+
+<div class="relative grow {wrapperClass}">
+	{#if type === 'textarea'}
+		<textarea
+			{value}
+			{placeholder}
+			rows="1"
+			class="resize-y duration-200 {inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{:else}
+		<input
+			{type}
+			{value}
+			{placeholder}
+			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			{...$$restProps}
+			on:input={handleInput}
+			on:focus
+			on:blur
+		/>
+	{/if}
+	{#if value}
+		<button
+			transition:fade|local={{ duration: 100 }}
+			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			aria-label="Clear"
+			on:click|preventDefault|stopPropagation={clear}
+		>
+			<X size={14} />
+		</button>
+	{/if}
+	<slot />
+</div>

package/package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        placeholder?: string | undefined;
+        type?: "number" | "text" | "textarea" | undefined;
+        inputClass?: string | undefined;
+        wrapperClass?: string | undefined;
+        buttonClass?: string | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ClearableInputProps = typeof __propDef.props;
+export type ClearableInputEvents = typeof __propDef.events;
+export type ClearableInputSlots = typeof __propDef.slots;
+export default class ClearableInput extends SvelteComponentTyped<ClearableInputProps, ClearableInputEvents, ClearableInputSlots> {
+}
+export {};

package/package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -0,0 +1,81 @@
+<script>import { classNames } from '../../../utils';
+import { faWarning } from '@fortawesome/free-solid-svg-icons';
+import { createEventDispatcher } from 'svelte';
+import Icon from 'svelte-awesome';
+import { fade } from 'svelte/transition';
+import Button from '../button/Button.svelte';
+import Badge from '../badge/Badge.svelte';
+export let title;
+export let confirmationText;
+export let open = false;
+const dispatch = createEventDispatcher();
+function onKeyDown(event) {
+    if (open) {
+        event.stopPropagation();
+        event.preventDefault();
+        switch (event.key) {
+            case 'Enter':
+                dispatch('confirmed');
+                break;
+            case 'Escape':
+                dispatch('canceled');
+                break;
+        }
+    }
+}
+function fadeFast(node) {
+    return fade(node, { duration: 100 });
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if open}
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
+		<div
+			class={classNames(
+				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
+			)}
+		/>
+
+		<div class="fixed inset-0 z-10 overflow-y-auto">
+			<div class="flex min-h-full items-center justify-center p-4">
+				<div
+					class={classNames(
+						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						open
+							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+					)}
+				>
+					<div class="flex">
+						<div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+							<Icon data={faWarning} class="text-red-500" />
+						</div>
+						<div class="ml-4 text-left flex-1">
+							<h3 class="text-lg font-medium text-gray-900">
+								{title}
+							</h3>
+							<div class="mt-2 text-sm text-gray-500">
+								<slot />
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+						<Button on:click={() => dispatch('confirmed')} color="red" size="sm">
+							<span>{confirmationText} <Badge>Enter</Badge></span>
+						</Button>
+						<Button on:click={() => dispatch('canceled')} color="light" size="sm">
+							<span>Cancel <Badge color="dark-gray">Escape</Badge></span>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

package/package/components/common/confirmationModal/ConfirmationModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        confirmationText: string;
+        open?: boolean | undefined;
+    };
+    events: {
+        confirmed: CustomEvent<any>;
+        canceled: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ConfirmationModalProps = typeof __propDef.props;
+export type ConfirmationModalEvents = typeof __propDef.events;
+export type ConfirmationModalSlots = typeof __propDef.slots;
+export default class ConfirmationModal extends SvelteComponentTyped<ConfirmationModalProps, ConfirmationModalEvents, ConfirmationModalSlots> {
+}
+export {};

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -0,0 +1,49 @@
+<script>import ConfirmationModal from './ConfirmationModal.svelte';
+import { beforeNavigate, goto } from '$app/navigation';
+import { onDestroy } from 'svelte/internal';
+import { dirtyStore } from './dirtyStore';
+let navigationState = undefined;
+$: open = Boolean(navigationState);
+beforeNavigate((newNavigationState) => {
+    if (!navigationState &&
+        $dirtyStore &&
+        newNavigationState.to &&
+        newNavigationState.to.url.pathname !== newNavigationState.from?.url.pathname) {
+        navigationState = {
+            to: newNavigationState.to.url,
+            from: newNavigationState.from?.url,
+            cancel: newNavigationState.cancel
+        };
+        newNavigationState.cancel();
+    }
+});
+onDestroy(() => {
+    $dirtyStore = false;
+});
+</script>
+
+<ConfirmationModal
+	{open}
+	title="Unsaved changes detected"
+	confirmationText="Discard changes"
+	on:canceled={() => {
+		if (navigationState) {
+			navigationState.cancel()
+		}
+		navigationState = undefined
+	}}
+	on:confirmed={() => {
+		if (navigationState?.to) {
+			goto(navigationState.to)
+		}
+		$dirtyStore = false
+		navigationState = undefined
+	}}
+>
+	<div class="flex flex-col w-full space-y-4">
+		<span>
+			Are you sure you want to discard change you have made? (A draft has been temporarily and
+			locally saved)
+		</span>
+	</div>
+</ConfirmationModal>

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UnsavedConfirmationModalProps = typeof __propDef.props;
+export type UnsavedConfirmationModalEvents = typeof __propDef.events;
+export type UnsavedConfirmationModalSlots = typeof __propDef.slots;
+export default class UnsavedConfirmationModal extends SvelteComponentTyped<UnsavedConfirmationModalProps, UnsavedConfirmationModalEvents, UnsavedConfirmationModalSlots> {
+}
+export {};

package/package/components/common/confirmationModal/dirtyStore.d.ts

@@ -0,0 +1 @@
+export declare const dirtyStore: import("svelte/store").Writable<boolean>;

package/package/components/common/confirmationModal/dirtyStore.js

@@ -0,0 +1,2 @@
+import { writable } from 'svelte/store';
+export const dirtyStore = writable(false);