windmill-components 1.87.0 → 1.89.1

package/package/components/apps/utils.js

@@ -0,0 +1,221 @@
+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
+        };
+        if (Array.isArray(property.enum)) {
+            accu[key] = {
+                ...accu[key],
+                selectOptions: property.enum,
+                fieldType: 'select'
+            };
+        }
+        return accu;
+    }, {});
+}
+export function accessPropertyByPath(object, path) {
+    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));
+    allItems(newApp.grid, newApp.subgrids).forEach((x) => {
+        let c = x.data;
+        if (c.componentInput?.type == 'runnable') {
+            c.componentInput.value = staticExporter[x.id]();
+        }
+    });
+    newApp.hiddenInlineScripts?.forEach((x, i) => {
+        x.noBackendValue = staticExporter[`bg_` + i]();
+    });
+    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)
+            }
+        ];
+    }));
+}
+export function tailwindHorizontalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        left: 'justify-start',
+        center: 'justify-center',
+        right: 'justify-end'
+    };
+    return classes[alignment];
+}
+export function tailwindVerticalAlignment(alignment) {
+    if (!alignment)
+        return '';
+    const classes = {
+        top: 'items-start',
+        center: 'items-center',
+        bottom: 'items-end'
+    };
+    return classes[alignment];
+}

package/package/components/build_workers.d.ts

@@ -0,0 +1,14 @@
+export interface Environment {
+    globalAPI?: boolean;
+    baseUrl?: string;
+    getWorker?(workerId: string, label: string): Promise<Worker> | Worker;
+    getWorkerUrl?(workerId: string, label: string): string;
+    workerOverrideGlobals: WorkerOverrideGlobals;
+}
+type WorkerOverrideGlobals = {
+    basePath: string;
+    workerPath: string;
+    workerOptions: WorkerOptions;
+};
+export declare function buildWorkerDefinition(workerPath: string, basePath: string, useModuleWorker: boolean): void;
+export {};

package/package/components/build_workers.js

@@ -0,0 +1,45 @@
+export function buildWorkerDefinition(workerPath, basePath, useModuleWorker) {
+    const monWin = self;
+    const workerOverrideGlobals = {
+        basePath: basePath,
+        workerPath: workerPath,
+        workerOptions: {
+            type: useModuleWorker ? 'module' : 'classic'
+        }
+    };
+    if (!monWin.MonacoEnvironment) {
+        monWin.MonacoEnvironment = {
+            workerOverrideGlobals: workerOverrideGlobals
+        };
+    }
+    const getWorker = (_, label) => {
+        console.log('getWorker: workerId: ' + _ + ' label: ' + label);
+        const buildWorker = (globals, label, workerName, editorType) => {
+            globals.workerOptions.name = label;
+            const workerFilename = globals.workerOptions.type === 'module' ? `${workerName}-es.js` : `${workerName}-iife.js`;
+            const workerPathLocal = `${globals.workerPath}/${workerFilename}`;
+            const workerUrl = new URL(workerPathLocal, globals.basePath);
+            console.log(`${editorType}: url: ${workerUrl.href} created from basePath: ${globals.basePath} and file: ${workerPathLocal}`);
+            return new Worker(workerUrl.href, globals.workerOptions);
+        };
+        switch (label) {
+            case 'template':
+            case 'typescript':
+            case 'javascript':
+                return buildWorker(workerOverrideGlobals, label, 'tsWorker', 'TS Worker');
+            case 'html':
+            case 'handlebars':
+            case 'razor':
+                return buildWorker(workerOverrideGlobals, label, 'htmlWorker', 'HTML Worker');
+            case 'css':
+            case 'scss':
+            case 'less':
+                return buildWorker(workerOverrideGlobals, label, 'cssWorker', 'CSS Worker');
+            case 'json':
+                return buildWorker(workerOverrideGlobals, label, 'jsonWorker', 'JSON Worker');
+            default:
+                return buildWorker(workerOverrideGlobals, label, 'editorWorker', 'Editor Worker');
+        }
+    };
+    monWin.MonacoEnvironment.getWorker = getWorker;
+}

package/package/components/common/CloseButton.svelte

@@ -0,0 +1,18 @@
+<script>
+	import { faClose } from '@fortawesome/free-solid-svg-icons'
+	import { createEventDispatcher } from 'svelte'
+
+	import { Icon } from 'svelte-awesome'
+
+	export let noBg = false
+	const dispatch = createEventDispatcher()
+</script>
+
+<button
+	on:click={() => dispatch('close')}
+	class="hover:bg-gray-200 {noBg
+		? ''
+		: 'bg-gray-100'} rounded-full w-8 h-8 flex items-center justify-center transition-all"
+>
+	<Icon data={faClose} class="text-gray-500" />
+</button>

package/package/components/common/CloseButton.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  CloseButtonProps */
+/** @typedef {typeof __propDef.events}  CloseButtonEvents */
+/** @typedef {typeof __propDef.slots}  CloseButtonSlots */
+export default class CloseButton extends SvelteComponentTyped<{
+    noBg?: boolean | undefined;
+}, {
+    close: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CloseButtonProps = typeof __propDef.props;
+export type CloseButtonEvents = typeof __propDef.events;
+export type CloseButtonSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        noBg?: boolean | undefined;
+    };
+    events: {
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/package/components/common/actionRow/ActionRow.svelte

@@ -0,0 +1,34 @@
+<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 lg:gap-4">
+			{#if $$slots.right}
+				<slot name="right" />
+			{/if}
+		</div>
+	</div>
+</div>

package/package/components/common/actionRow/ActionRow.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        applyPageWidth?: boolean | undefined;
+        stickToTop?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        left: {};
+        middle: {};
+        right: {};
+    };
+};
+export type ActionRowProps = typeof __propDef.props;
+export type ActionRowEvents = typeof __propDef.events;
+export type ActionRowSlots = typeof __propDef.slots;
+export default class ActionRow extends SvelteComponentTyped<ActionRowProps, ActionRowEvents, ActionRowSlots> {
+}
+export {};

package/package/components/common/alert/Alert.svelte

@@ -0,0 +1,76 @@
+<script>import { classNames } from '../../../utils';
+import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+export let type = 'info';
+export let title;
+export let notRounded = false;
+export let size = 'sm';
+const icons = {
+    info: faInfoCircle,
+    warning: faWarning,
+    error: faWarning,
+    success: faCheckCircle
+};
+const classes = {
+    info: {
+        bgClass: 'bg-blue-50 border-blue-200 border',
+        iconClass: 'text-blue-500',
+        titleClass: 'text-blue-800',
+        descriptionClass: 'text-blue-700'
+    },
+    warning: {
+        bgClass: 'bg-yellow-50 border-yellow-200 border',
+        iconClass: 'text-yellow-500',
+        titleClass: 'text-yellow-800',
+        descriptionClass: 'text-yellow-700'
+    },
+    error: {
+        bgClass: 'bg-red-50 border-red-200 border',
+        iconClass: 'text-red-500',
+        titleClass: 'text-red-800',
+        descriptionClass: 'text-red-700'
+    },
+    success: {
+        bgClass: 'bg-green-50 border-green-200 border',
+        iconClass: 'text-green-500',
+        titleClass: 'text-green-800',
+        descriptionClass: 'text-green-700'
+    }
+};
+</script>
+
+<div
+	class={classNames(
+		notRounded ? '' : 'rounded-md',
+		size === 'sm' ? 'p-4' : 'p-2 ',
+		classes[type].bgClass,
+		$$props.class
+	)}
+>
+	<div class="flex">
+		<div class="flex h-8 w-8 items-center justify-center rounded-full">
+			<Icon data={icons[type]} class={classes[type].iconClass} />
+		</div>
+
+		<div class="ml-2 w-full">
+			<span
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'font-medium',
+					classes[type].titleClass
+				)}
+			>
+				{title}
+			</span>
+			<div
+				class={classNames(
+					size === 'sm' ? 'text-sm' : 'text-xs ',
+					'mt-2',
+					classes[type].descriptionClass
+				)}
+			>
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>

package/package/components/common/alert/Alert.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AlertType } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        type?: AlertType | undefined;
+        title: string;
+        notRounded?: boolean | undefined;
+        size?: "xs" | "sm" | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlertProps = typeof __propDef.props;
+export type AlertEvents = typeof __propDef.events;
+export type AlertSlots = typeof __propDef.slots;
+export default class Alert extends SvelteComponentTyped<AlertProps, AlertEvents, AlertSlots> {
+}
+export {};

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

@@ -0,0 +1 @@
+export type AlertType = 'success' | 'error' | 'warning' | 'info';

package/package/components/common/alert/model.js

@@ -0,0 +1 @@
+export {};

package/package/components/common/badge/Badge.svelte

@@ -0,0 +1,71 @@
+<script>import { classNames } from '../../../utils';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import Icon from 'svelte-awesome';
+import { ColorModifier } from './model';
+export let color = 'gray';
+export let large = false;
+export let href = '';
+export let rounded = false;
+export let dismissable = false;
+export let wrapperClass = '';
+export let baseClass = 'text-center';
+export let capitalize = false;
+export let icon = undefined;
+let defaulIconProps = {
+    position: 'left',
+    scale: 0.7
+};
+let hidden = false;
+const colors = {
+    gray: 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300',
+    blue: 'bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800',
+    red: 'bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-900',
+    green: 'bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-900',
+    yellow: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+    indigo: 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900',
+    ['dark-gray']: 'bg-gray-500 text-gray-100',
+    ['dark-blue']: 'bg-blue-500 text-blue-100',
+    ['dark-red']: 'bg-red-500 text-white',
+    ['dark-green']: 'bg-green-500 text-green-100',
+    ['dark-yellow']: 'bg-yellow-300 text-yellow-800',
+    ['dark-indigo']: 'bg-indigo-500 text-indigo-100'
+};
+const hovers = {
+    gray: 'hover:bg-gray-200 dark:hover:bg-gray-300',
+    blue: 'hover:bg-blue-200 dark:hover:bg-blue-300',
+    red: 'hover:bg-red-200 dark:hover:bg-red-300',
+    green: 'hover:bg-green-200 dark:hover:bg-green-300',
+    yellow: 'hover:bg-yellow-200 dark:hover:bg-yellow-300',
+    indigo: 'hover:bg-indigo-200 dark:hover:bg-indigo-300'
+};
+$: badgeClass = classNames(baseClass, large ? 'text-sm font-medium' : 'text-xs font-semibold', colors[color], href &&
+    (color.startsWith(ColorModifier) ? hovers[color.replace(ColorModifier, '')] : hovers[color]), rounded ? 'rounded-full px-2 py-1' : 'rounded px-2.5 py-0.5', $$props.class);
+$: iconProps = icon ? { ...defaulIconProps, ...icon } : { data: undefined };
+const handleHide = () => (hidden = !hidden);
+</script>
+
+<span
+	on:click
+	on:keydown
+	class="inline-flex justify-center items-center whitespace-nowrap {wrapperClass}"
+>
+	<svelte:element
+		this={href ? 'a' : 'span'}
+		{href}
+		{...$$restProps}
+		class={badgeClass}
+		class:hidden
+		class:capitalize
+	>
+		{#if iconProps.data && iconProps.position === 'left'}
+			<Icon {...iconProps} />
+		{/if}
+		<slot />
+		{#if iconProps.data && iconProps.position === 'right'}
+			<Icon {...iconProps} />
+		{/if}
+		{#if dismissable}
+			<Icon data={faClose} on:click={handleHide} class={classNames('mx-0.5')} />
+		{/if}
+	</svelte:element>
+</span>

package/package/components/common/badge/Badge.svelte.d.ts

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+import { type BadgeColor, type BadgeIconProps } from './model';
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        color?: BadgeColor | undefined;
+        large?: boolean | undefined;
+        href?: string | undefined;
+        rounded?: boolean | undefined;
+        dismissable?: boolean | undefined;
+        wrapperClass?: string | undefined;
+        baseClass?: string | undefined;
+        capitalize?: boolean | undefined;
+        icon?: BadgeIconProps | undefined;
+    };
+    events: {
+        click: MouseEvent;
+        keydown: KeyboardEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
+export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
+}
+export {};

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

@@ -0,0 +1,8 @@
+import type { IconProps } from 'svelte-awesome/components/Icon.svelte';
+type BaseColor = 'blue' | 'gray' | 'red' | 'green' | 'yellow' | 'indigo';
+export declare const ColorModifier = "dark-";
+export type BadgeColor = BaseColor | `${typeof ColorModifier}${BaseColor}`;
+export interface BadgeIconProps extends IconProps {
+    position?: 'left' | 'right';
+}
+export {};

package/package/components/common/badge/model.js

@@ -0,0 +1 @@
+export const ColorModifier = 'dark-';

package/package/components/common/breadcrumb/Breadcrumb.svelte

@@ -0,0 +1,24 @@
+<script>import { createEventDispatcher } from 'svelte';
+import Button from '../button/Button.svelte';
+export let items;
+export let selectedIndex;
+export let disabled = false;
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex items-center justify-center">
+	{#each items as item, index}
+		{#if index > 0}
+			<slot name="separator" />
+		{/if}
+		<Button
+			size="sm"
+			color="light"
+			btnClasses={selectedIndex - 1 === index ? 'text-gray-800 !font-bold' : '!text-gray-500'}
+			on:click={() => dispatch('select', { index })}
+			disabled={selectedIndex - 1 === index ? disabled : false}
+		>
+			{item}
+		</Button>
+	{/each}
+</div>

package/package/components/common/breadcrumb/Breadcrumb.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        items: string[];
+        selectedIndex: number;
+        disabled?: boolean | undefined;
+    };
+    events: {
+        select: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        separator: {};
+    };
+};
+export type BreadcrumbProps = typeof __propDef.props;
+export type BreadcrumbEvents = typeof __propDef.events;
+export type BreadcrumbSlots = typeof __propDef.slots;
+export default class Breadcrumb extends SvelteComponentTyped<BreadcrumbProps, BreadcrumbEvents, BreadcrumbSlots> {
+}
+export {};