windmill-components 1.85.0 → 1.87.0

package/components/apps/utils.js

@@ -1,195 +0,0 @@
-import { FlowService, ScriptService } from '../../gen';
-import { inferArgs } from '../../infer';
-import { emptySchema } from '../../utils';
-import { twMerge } from 'tailwind-merge';
-export function allItems(grid, subgrids) {
-    if (subgrids == undefined) {
-        return grid;
-    }
-    return [...grid, ...Object.values(subgrids).flat()];
-}
-export async function loadSchema(workspace, path, runType) {
-    if (runType === 'script') {
-        const script = await ScriptService.getScriptByPath({
-            workspace,
-            path
-        });
-        return script.schema;
-    }
-    else if (runType === 'flow') {
-        const flow = await FlowService.getFlowByPath({
-            workspace,
-            path
-        });
-        return flow.schema;
-    }
-    else {
-        const script = await ScriptService.getHubScriptByPath({
-            path
-        });
-        if (script.schema == undefined ||
-            Object.keys(script.schema).length == 0 ||
-            typeof script.schema != 'object') {
-            script.schema = emptySchema();
-        }
-        await inferArgs(script.language, script.content, script.schema);
-        return script.schema;
-    }
-}
-export function schemaToInputsSpec(schema, defaultUserInput) {
-    if (schema?.properties == undefined) {
-        return {};
-    }
-    return Object.keys(schema.properties).reduce((accu, key) => {
-        const property = schema.properties[key];
-        accu[key] = {
-            type: defaultUserInput && !property.format?.startsWith('resource-') ? 'user' : 'static',
-            value: property.default,
-            fieldType: property.type,
-            format: property.format
-        };
-        return accu;
-    }, {});
-}
-export function accessPropertyByPath(object, path) {
-    // convert indexes to properties
-    path = path.replace(/\[(\w+)\]/g, '.$1');
-    // strip a leading dot
-    path = path.replace(/^\./, '');
-    let a = path.split('.');
-    for (let i = 0, depth = a.length; i < depth; ++i) {
-        let key = a[i];
-        if (object[key] != undefined) {
-            object = object[key];
-        }
-        else {
-            // Value not found
-            return;
-        }
-    }
-    return object;
-}
-export function fieldTypeToTsType(inputType) {
-    switch (inputType) {
-        case 'number':
-            return 'number';
-        case 'integer':
-            return 'number';
-        case 'boolean':
-            return 'boolean';
-        case 'object':
-            return 'object';
-        case 'array':
-            return 'array';
-        case 'any':
-            return 'any';
-        case 'tab-select':
-            return 'Tab';
-        default:
-            return 'string';
-    }
-}
-export function isScriptByNameDefined(appInput) {
-    if (!appInput) {
-        return false;
-    }
-    if (appInput.type === 'runnable' && appInput.runnable?.type == 'runnableByName') {
-        return appInput.runnable?.name != undefined;
-    }
-    return false;
-}
-export function isScriptByPathDefined(appInput) {
-    if (!appInput) {
-        return false;
-    }
-    if (appInput.type === 'runnable' && appInput.runnable?.type == 'runnableByPath') {
-        return Boolean(appInput.runnable?.path);
-    }
-    return false;
-}
-export function clearResultAppInput(appInput) {
-    appInput.runnable = undefined;
-    if (Object.keys(appInput.fields ?? {}).length > 0) {
-        appInput.fields = {};
-    }
-    return appInput;
-}
-export function toStatic(app, staticExporter, summary) {
-    const newApp = JSON.parse(JSON.stringify(app));
-    newApp.grid.forEach((x) => {
-        let c = x.data;
-        if (c.componentInput?.type == 'runnable') {
-            c.componentInput.value = staticExporter[x.id]();
-        }
-    });
-    return { app: newApp, summary };
-}
-export function buildExtraLib(components, idToExclude, hasRows, state, goto) {
-    const cs = Object.entries(components)
-        .filter(([k, v]) => k != idToExclude)
-        .map(([k, v]) => [k, Object.fromEntries(Object.entries(v).map(([k, v]) => [k, v.peak()]))])
-        .map(([k, v]) => `declare const ${k}: ${JSON.stringify(v)};
-`)
-        .join('\n');
-    return `${cs}
-${hasRows ? 'declare const row: Record<string, any>;' : ''}
-${goto
-        ? `declare async function goto(path: string, newTab?: boolean): Promise<void>;
-declare function setTab(id: string, index: string): void;
-declare function recompute(id: string): void;
-declare function getAgGrid(id: string): {api: any, columnApi: any} | undefined;
-`
-        : ''}
-declare const state: ${JSON.stringify(state)};
-`;
-}
-export function getAllScriptNames(app) {
-    const names = app.grid.reduce((acc, gridItem) => {
-        const { componentInput } = gridItem.data;
-        if (componentInput?.type === 'runnable' &&
-            componentInput?.runnable?.type === 'runnableByName') {
-            acc.push(componentInput.runnable.name);
-        }
-        if (gridItem.data.type === 'tablecomponent') {
-            gridItem.data.actionButtons.forEach((actionButton) => {
-                if (actionButton.componentInput?.type === 'runnable') {
-                    if (actionButton.componentInput.runnable?.type === 'runnableByName') {
-                        acc.push(actionButton.componentInput.runnable.name);
-                    }
-                }
-            });
-        }
-        return acc;
-    }, []);
-    const unusedNames = app.unusedInlineScripts.map((x) => x.name);
-    const backgroundNames = app.hiddenInlineScripts?.map((x) => x.name) ?? [];
-    return [...names, ...unusedNames, ...backgroundNames];
-}
-function clearAndUpper(text) {
-    return text.replace(/-/, '').toUpperCase();
-}
-export function toPascalCase(text) {
-    return text.replace(/(^\w|-\w)/g, clearAndUpper);
-}
-export function toKebabCase(text) {
-    return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-}
-export function concatCustomCss(appCss, componentCss) {
-    if (!componentCss)
-        return undefined;
-    return Object.fromEntries(Object.entries(componentCss).map(([key, v]) => {
-        // This is the general style of the component type
-        const appStyle = appCss?.[key]?.style?.trim() || '';
-        const appEnding = appStyle?.endsWith(';') || !appStyle ? ' ' : '; ';
-        // This is the custom style of the component instance
-        const compStyle = v?.style?.trim() || '';
-        const compEnding = compStyle?.endsWith(';') || !compStyle ? ' ' : ';';
-        return [
-            key,
-            {
-                style: (appStyle + appEnding + compStyle + compEnding).trim(),
-                class: twMerge(appCss?.[key]?.class, v?.class)
-            }
-        ];
-    }));
-}

package/components/common/actionRow/ActionRow.svelte

@@ -1,32 +0,0 @@
-<script>export let applyPageWidth = false;
-export let stickToTop = false;
-$: wide = applyPageWidth ? 'max-w-6xl mx-auto px-4 sm:px-6 md:px-8' : '';
-let scrollY = 0;
-</script>
-
-<svelte:window bind:scrollY />
-
-<div
-	class={'bg-white py-3 ' +
-		(stickToTop ? 'lg:sticky lg:top-0 z-[500] border-b border-gray-200 border-opacity-0 duration-300 '
-			+ (scrollY >= 30 ? 'border-opacity-100 ' : '') : '')
-			+ ($$props.class || '')}
->
-	<div class={'w-full flex flex-wrap justify-between items-center gap-4 ' + wide}>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.left}
-				<slot name="left" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.middle}
-				<slot name="middle" />
-			{/if}
-		</div>
-		<div class="flex flex-wrap items-center gap-2">
-			{#if $$slots.right}
-				<slot name="right" />
-			{/if}
-		</div>
-	</div>
-</div>

package/components/common/button/Button.svelte

@@ -1,113 +0,0 @@
-<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';
-export let size = 'md';
-export let spacingSize = size;
-export let color = 'blue';
-export let variant = 'contained';
-export let btnClasses = '';
-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 = '';
-const dispatch = createEventDispatcher();
-// Order of classes: border, border modifier, bg, bg modifier, text, text modifier, everything else
-const colorVariants = {
-    none: {
-        border: '',
-        contained: ''
-    },
-    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'
-    },
-    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'
-    },
-    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'
-    },
-    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'
-    },
-    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'
-    },
-    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'
-    }
-};
-$: buttonProps = {
-    id,
-    class: twMerge(colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''),
-    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);
-</script>
-
-<svelte:element
-	this={href ? 'a' : 'button'}
-	bind:this={element}
-	on:pointerdown
-	on:click={onClick}
-	on:focus
-	on:blur
-	{...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>

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

@@ -1,43 +0,0 @@
-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?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
-        variant?: ButtonType.Variant | undefined;
-        btnClasses?: 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?: "reset" | "submit" | "button" | undefined;
-        loading?: boolean | undefined;
-        title?: string | undefined;
-        style?: string | 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/components/common/button/ButtonPopup.svelte

@@ -1,78 +0,0 @@
-<script>import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import { setContext } from 'svelte';
-import Icon from 'svelte-awesome';
-import { Button, ButtonType, Popup } from '..';
-export let size = 'md';
-export let color = 'blue';
-export let variant = 'contained';
-export let mainClasses = '';
-export let toggleClasses = '';
-export let listClasses = '';
-export let disabled = false;
-export let href = undefined;
-export let target = '_self';
-export let startIcon = undefined;
-export let endIcon = undefined;
-export let spacingSize = size;
-export let loading = false;
-let ref;
-setContext(ButtonType.ItemContextKey, { size, color });
-$: separator = color === 'red' || color === 'blue' ? 'border-gray-200' : 'border-gray-400';
-</script>
-
-<div class="flex justy-start items-center">
-	{#if $$slots.main}
-		<Button
-			{loading}
-			{size}
-			{color}
-			{variant}
-			{disabled}
-			{spacingSize}
-			{href}
-			{target}
-			{startIcon}
-			{endIcon}
-			btnClasses="!rounded-r-none !border-r-0 {mainClasses}"
-			on:click
-		>
-			<slot name="main" />
-		</Button>
-	{/if}
-	<span class={$$slots.main && variant === 'contained' ? 'border-l ' + separator : ''}>
-		<Button
-			bind:element={ref}
-			{size}
-			{color}
-			{variant}
-			{disabled}
-			{spacingSize}
-			btnClasses="{$$slots.main ? '!rounded-l-none' : ''} {toggleClasses}"
-			on:click={() => {}}
-		>
-			<slot name="toggle">
-				<!-- Invisible, but needed to match the height of the 'main' button -->
-				<span class="!opacity-0 !w-0">A</span>
-				<Icon data={faChevronDown} scale={ButtonType.IconScale[size]} />
-			</slot>
-		</Button>
-	</span>
-</div>
-{#if ref}
-	<Popup
-		{ref}
-		let:open
-		let:close
-		options={{
-			placement: $$slots.main ? 'bottom-end' : 'bottom',
-			strategy: 'absolute',
-			modifiers: [{ name: 'offset', options: { offset: [0, 0] } }]
-		}}
-	>
-		<ul
-			class="bg-white rounded-t border-black shadow border pt-1 pb-2 max-h-40 overflow-auto {listClasses}"
-		>
-			<slot {open} {close} />
-		</ul>
-	</Popup>
-{/if}

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

@@ -1,39 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import Icon from 'svelte-awesome';
-import { ButtonType } from '..';
-declare const __propDef: {
-    props: {
-        size?: ButtonType.Size | undefined;
-        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
-        variant?: ButtonType.Variant | undefined;
-        mainClasses?: string | undefined;
-        toggleClasses?: string | undefined;
-        listClasses?: string | undefined;
-        disabled?: boolean | undefined;
-        href?: string | undefined;
-        target?: ButtonType.Target | undefined;
-        startIcon?: ButtonType.Icon | undefined;
-        endIcon?: ButtonType.Icon | undefined;
-        spacingSize?: ButtonType.Size | undefined;
-        loading?: boolean | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        main: {};
-        toggle: {};
-        default: {
-            open: () => void;
-            close: () => void;
-        };
-    };
-};
-export type ButtonPopupProps = typeof __propDef.props;
-export type ButtonPopupEvents = typeof __propDef.events;
-export type ButtonPopupSlots = typeof __propDef.slots;
-export default class ButtonPopup extends SvelteComponentTyped<ButtonPopupProps, ButtonPopupEvents, ButtonPopupSlots> {
-}
-export {};

package/components/common/button/ButtonPopupItem.svelte

@@ -1,48 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { Button, ButtonType } from '..';
-import { classNames } from '../../../utils';
-export let btnClasses = '';
-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 wrapperClasses = '';
-const props = getContext(ButtonType.ItemContextKey);
-const iconWidthClass = {
-    xs: '!w-[12px]',
-    sm: '!w-[14px]',
-    md: '!w-[16px]',
-    lg: '!w-[18px]',
-    xl: '!w-[20px]'
-};
-const getWidthClass = () => (props?.size ? iconWidthClass[props.size] : undefined);
-$: buttonProps = {
-    ...props,
-    variant: 'border',
-    btnClasses: classNames(btnClasses, '!justify-start !border-0 !rounded-none !w-full'),
-    disabled,
-    href,
-    target,
-    iconOnly,
-    startIcon: startIcon
-        ? {
-            icon: startIcon.icon,
-            classes: classNames(startIcon?.classes, getWidthClass())
-        }
-        : undefined,
-    endIcon: endIcon
-        ? {
-            icon: endIcon.icon,
-            classes: classNames(endIcon?.classes, getWidthClass())
-        }
-        : undefined
-};
-</script>
-
-<li class="mt-1 {wrapperClasses}">
-	<Button {...buttonProps} on:click>
-		<slot />
-	</Button>
-</li>

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

@@ -1,28 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import { ButtonType } from '..';
-declare const __propDef: {
-    props: {
-        btnClasses?: string | undefined;
-        disabled?: boolean | undefined;
-        href?: string | undefined;
-        target?: ButtonType.Target | undefined;
-        iconOnly?: boolean | undefined;
-        startIcon?: ButtonType.Icon | undefined;
-        endIcon?: ButtonType.Icon | undefined;
-        wrapperClasses?: string | undefined;
-    };
-    events: {
-        click: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ButtonPopupItemProps = typeof __propDef.props;
-export type ButtonPopupItemEvents = typeof __propDef.events;
-export type ButtonPopupItemSlots = typeof __propDef.slots;
-export default class ButtonPopupItem extends SvelteComponentTyped<ButtonPopupItemProps, ButtonPopupItemEvents, ButtonPopupItemSlots> {
-}
-export {};

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

@@ -1,20 +0,0 @@
-export declare const BUTTON_COLORS: readonly ["blue", "red", "dark", "light", "green", "gray", "none"];
-export declare namespace ButtonType {
-    type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    type Color = typeof BUTTON_COLORS[number];
-    type Variant = 'contained' | 'border';
-    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>;
-    const ItemContextKey: "popupItemProps";
-    interface ItemProps {
-        size: Size;
-        color: Color;
-    }
-}

package/components/common/button/model.js

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