windmill-components 1.85.0 → 1.87.0

package/dist/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -0,0 +1,86 @@
+<script>import { getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
+import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+import { components as componentsRecord, COMPONENT_SETS } from '../component';
+import ListItem from './ListItem.svelte';
+import { appComponentFromType, insertNewGridItem } from '../appUtils';
+import { X } from 'lucide-svelte';
+import { push } from '../../../../history';
+import { flip } from 'svelte/animate';
+const { app, selectedComponent, focusedGrid } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+function addComponent(appComponentType) {
+    push(history, $app);
+    $dirtyStore = true;
+    const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
+    $selectedComponent = [id];
+    $app = $app;
+}
+let search = '';
+// Filter COMPONENT_SETS by search
+$: componentsFiltered = COMPONENT_SETS.map((set) => ({
+    ...set,
+    components: set.components.filter((component) => {
+        const name = componentsRecord[component].name.toLowerCase();
+        return name.includes(search.toLowerCase());
+    })
+}));
+</script>
+
+<section class="p-2 sticky bg-white w-full z-10 top-0">
+	<div class="relative">
+		<input
+			bind:value={search}
+			class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+			placeholder="Search components..."
+		/>
+		{#if search}
+			<button
+				class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+				on:click|stopPropagation|preventDefault={() => (search = '')}
+			>
+				<X size="14" />
+			</button>
+		{/if}
+	</div>
+</section>
+
+<div class="relative">
+	{#if componentsFiltered.reduce((acc, { components }) => acc + components.length, 0) === 0}
+		<div
+			in:fade|local={{ duration: 50, delay: 50 }}
+			out:fade|local={{ duration: 50 }}
+			class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-6 px-2"
+		>
+			No components found
+		</div>
+	{:else}
+		<div in:fade|local={{ duration: 50, delay: 50 }} out:fade|local={{ duration: 50 }}>
+			{#each componentsFiltered as { title, components }, index (index)}
+				{#if components.length}
+					<div transition:slide|local={{ duration: 100 }}>
+						<ListItem title={`${title} (${components.length})`}>
+							<div class="flex flex-wrap gap-3 py-2">
+								{#each components as item (item)}
+									<div animate:flip={{ duration: 100 }} class="w-20">
+										<button
+											on:click={() => addComponent(item)}
+											title={componentsRecord[item].name}
+											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+											justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+										>
+											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+										</button>
+										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+											{componentsRecord[item].name}
+										</div>
+									</div>
+								{/each}
+							</div>
+						</ListItem>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

package/dist/components/apps/editor/componentsPanel/CssSettings.svelte

@@ -0,0 +1,145 @@
+<script>import { getContext } from 'svelte';
+import { LayoutDashboardIcon, MousePointer2, CurlyBraces, X } from 'lucide-svelte';
+import SimpleEditor from '../../../SimpleEditor.svelte';
+import { emptyString } from '../../../../utils';
+import { Tab, TabContent, Tabs } from '../../../common';
+import ListItem from './ListItem.svelte';
+import CssProperty from './CssProperty.svelte';
+import { ccomponents, components } from '../component';
+const STATIC_ELEMENTS = ['app'];
+const TITLE_PREFIX = 'Css.';
+const { app } = getContext('AppViewerContext');
+let rawCode = '';
+$: rawCode && parseJson();
+let jsonError = '';
+function parseJson() {
+    try {
+        $app.css = JSON.parse(rawCode ?? '');
+        jsonError = '';
+    }
+    catch (e) {
+        jsonError = e.message;
+    }
+}
+function switchTab(asJson) {
+    if (asJson) {
+        rawCode = JSON.stringify($app.css, null, 2);
+    }
+    else {
+        parseJson();
+    }
+}
+const entries = [
+    {
+        type: 'app',
+        name: 'App',
+        icon: LayoutDashboardIcon,
+        ids: ['viewer', 'grid', 'component'].map((id) => ({ id, forceStyle: true, forceClass: true }))
+    },
+    ...Object.entries(ccomponents).map(([type, { name, icon, customCss }]) => ({
+        type: type,
+        name,
+        icon,
+        ids: Object.entries(customCss).map(([id, v]) => ({
+            id,
+            forceStyle: v?.style != undefined,
+            forceClass: v?.['class'] != undefined
+        }))
+    }))
+];
+entries.sort((a, b) => a.name.localeCompare(b.name));
+let search = '';
+</script>
+
+<div class="w-full text-lg font-semibold text-center text-gray-600 p-2">Global Styling</div>
+<Tabs selected="ui" on:selected={(e) => switchTab(e.detail === 'json')} class="relative">
+	<Tab value="ui" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<MousePointer2 size={16} />
+			<span class="pl-1">UI</span>
+		</div>
+	</Tab>
+	<Tab value="json" size="xs" class="grow">
+		<div class="m-1 center-center">
+			<CurlyBraces size={16} />
+			<span class="pl-1">JSON</span>
+		</div>
+	</Tab>
+	<div slot="content" class="h-full overflow-y-auto">
+		<TabContent value="ui">
+			<div class="sticky top-0 left-0 w-full bg-white p-2">
+				<div class="relative">
+					<input
+						bind:value={search}
+						class="px-2 pb-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+						placeholder="Search..."
+					/>
+					{#if search}
+						<button
+							class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+							on:click|stopPropagation|preventDefault={() => (search = '')}
+						>
+							<X size="14" />
+						</button>
+					{/if}
+				</div>
+			</div>
+			{#each search != '' ? entries.filter((x) => x.name
+							.toLowerCase()
+							.includes(search.toLowerCase())) : entries as { type, name, icon, ids } (name)}
+				{#if ids.length > 0}
+					<ListItem
+						title={name}
+						prefix={TITLE_PREFIX}
+						on:open={(e) => {
+							if ($app.css != undefined) {
+								if (e.detail && $app.css[type] == undefined) {
+									$app.css[type] = Object.fromEntries(ids.map(({ id }) => [id, {}]))
+								}
+							}
+						}}
+					>
+						<div slot="title" class="flex items-center">
+							<svelte:component this={icon} size={18} />
+							<span class="ml-1">
+								{name}
+							</span>
+						</div>
+						<div class="pb-2">
+							{#each ids as { id, forceStyle, forceClass }}
+								<div class="mb-3">
+									{#if $app?.css?.[type]}
+										<CssProperty
+											{forceClass}
+											{forceStyle}
+											name={id}
+											bind:value={$app.css[type][id]}
+										/>
+									{/if}
+								</div>
+							{/each}
+						</div>
+					</ListItem>
+				{/if}
+			{/each}
+		</TabContent>
+		<TabContent value="json">
+			{#if !emptyString(jsonError)}
+				<span class="text-red-400 text-xs mb-1 flex flex-row-reverse">
+					{jsonError}
+				</span>
+			{:else}
+				<div class="py-2" />
+			{/if}
+			<div class="h-full w-full py-1">
+				<SimpleEditor
+					autoHeight
+					class="editor"
+					lang="json"
+					bind:code={rawCode}
+					fixedOverflowWidgets={false}
+				/>
+			</div>
+		</TabContent>
+	</div>
+</Tabs>

package/dist/components/apps/editor/componentsPanel/ListItem.svelte

@@ -0,0 +1,52 @@
+<script>import { slide } from 'svelte/transition';
+import { ChevronDown } from 'lucide-svelte';
+import { isOpenStore } from './store';
+import { createEventDispatcher, onMount } from 'svelte';
+export let title;
+export let prefix = undefined;
+export let openByDefault = false;
+export let wrapperClasses = '';
+export let toggleClasses = '';
+export let contentWrapperClasses = '';
+export let isOpen = false;
+const dispatch = createEventDispatcher();
+$: storeTitle = prefix + title;
+$: isOpen = prefix ? $isOpenStore[storeTitle] : true;
+$: dispatch('open', isOpen);
+onMount(() => {
+    if (prefix !== undefined && !(prefix + title in $isOpenStore)) {
+        $isOpenStore[prefix + title] = openByDefault;
+    }
+});
+</script>
+
+<section class="pt-1 pb-2 px-1 {wrapperClasses}">
+	{#if prefix !== undefined}
+		<button
+			on:click|preventDefault={() => isOpenStore.toggle(storeTitle)}
+			class="w-full flex justify-between items-center text-gray-700 px-2 py-1
+			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
+		>
+			<h1 class="text-sm font-semibold text-left">
+				<slot name="title">
+					{title}
+				</slot>
+			</h1>
+			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
+		</button>
+		{#if isOpen}
+			<div transition:slide|local={{ duration: 300 }} class="px-2 {contentWrapperClasses}">
+				<slot />
+			</div>
+		{/if}
+	{:else}
+		<h1 class="text-sm font-semibold text-left px-2 py-1 text-gray-600">
+			<slot name="title">
+				{title}
+			</slot>
+		</h1>
+		<div class="px-2">
+			<slot />
+		</div>
+	{/if}
+</section>

package/dist/components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte

@@ -0,0 +1,18 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let name;
+export let first = false;
+</script>
+
+<OutputHeader renamable={false} selectable={true} {id} {name} color="blue" {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>

package/dist/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -0,0 +1,205 @@
+<script>import { allItems } from '../../../utils';
+import { classNames } from '../../../../../utils';
+import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
+import { getContext } from 'svelte';
+import { allsubIds, findGridItem } from '../../appUtils';
+import IdEditor from './IdEditor.svelte';
+export let id;
+export let name;
+export let first = false;
+export let nested = false;
+export let color = 'indigo';
+export let selectable = true;
+export let renamable = true;
+const { manuallyOpened, search, hasResult } = getContext('ContextPanel');
+const { selectedComponent, app, hoverStore, allIdsInPath, connectingInput } = getContext('AppViewerContext');
+$: subids = $search != '' ? allsubIds($app, id) : [];
+$: inSearch =
+    $search != '' &&
+        ($hasResult[id] ||
+            Object.entries($hasResult).some(([key, value]) => value && subids.includes(key)));
+$: open = $allIdsInPath.includes(id) || $manuallyOpened[id] || inSearch;
+const hoverColor = {
+    blue: 'hover:bg-blue-300 hover:text-blue-600',
+    indigo: 'hover:bg-indigo-300 hover:text-indigo-600'
+};
+const openBackground = {
+    blue: 'bg-blue-50',
+    indigo: 'bg-indigo-50'
+};
+const manuallyOpenColor = {
+    blue: 'text-blue-600',
+    indigo: 'text-indigo-600'
+};
+const idClass = {
+    blue: 'bg-blue-500 text-white',
+    indigo: 'bg-indigo-500 text-white'
+};
+function renameId(newId) {
+    const item = findGridItem($app, id);
+    if (!item) {
+        return;
+    }
+    item.data.id = newId;
+    item.id = newId;
+    const oldSubgrids = Object.keys($app.subgrids ?? {}).filter((subgrid) => subgrid.startsWith(id + '-'));
+    oldSubgrids.forEach((subgrid) => {
+        if ($app.subgrids) {
+            $app.subgrids[subgrid.replace(id, newId)] = $app.subgrids[subgrid];
+            delete $app.subgrids[subgrid];
+        }
+    });
+    function propagateRename(from, to) {
+        allItems($app.grid, $app.subgrids).forEach((item) => {
+            renameComponent(from, to, item.data);
+        });
+        $app.hiddenInlineScripts.forEach((x) => {
+            console.log('process', x.name, id);
+            processRunnable(from, to, {
+                name: x.name,
+                inlineScript: x.inlineScript,
+                type: 'runnableByName'
+            });
+        });
+    }
+    propagateRename(id, newId);
+    if (item?.data.type == 'tablecomponent') {
+        for (let c of item.data.actionButtons) {
+            let old = c.id;
+            c.id = c.id.replace(id + '_', newId + '_');
+            propagateRename(old, c.id);
+        }
+    }
+    $app = $app;
+    $selectedComponent = [newId];
+}
+function renameComponent(from, to, data) {
+    if (data.type == 'tablecomponent') {
+        for (let c of data.actionButtons) {
+            renameComponent(from, to, c);
+        }
+    }
+    let componentInput = data.componentInput;
+    if (componentInput?.type == 'connected') {
+        if (componentInput.connection?.componentId === from) {
+            componentInput.connection.componentId = to;
+        }
+    }
+    else if (componentInput?.type == 'runnable') {
+        processRunnable(from, to, componentInput.runnable);
+    }
+    Object.values(data.configuration ?? {}).forEach((config) => {
+        if (config.type === 'connected') {
+            if (config.connection?.componentId === from) {
+                config.connection.componentId = to;
+            }
+        }
+        else if (config.type == 'oneOf') {
+            Object.values(config.configuration ?? {}).forEach((choices) => {
+                Object.values(choices).forEach((c) => {
+                    if (c.type === 'connected') {
+                        if (c.connection?.componentId === id) {
+                            c.connection.componentId = to;
+                        }
+                    }
+                });
+            });
+        }
+    });
+}
+function processRunnable(from, to, runnable) {
+    if (runnable?.type === 'runnableByName' &&
+        runnable?.inlineScript?.refreshOn?.find((x) => x.id === from)) {
+        runnable.inlineScript.refreshOn = runnable.inlineScript.refreshOn.map((x) => {
+            if (x.id === from) {
+                return {
+                    id: to,
+                    key: x.key
+                };
+            }
+            return x;
+        });
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class={$search == '' || inSearch ? '' : 'invisible h-0 overflow-hidden'}>
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<div
+		on:mouseenter|stopPropagation={() => {
+			if (id !== $hoverStore) {
+				$hoverStore = id
+			}
+		}}
+		on:mouseleave|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class={classNames(
+			'flex items-center justify-between p-1 cursor-pointer border-b gap-1 truncate',
+			hoverColor[color],
+			$selectedComponent?.includes(id)
+				? openBackground[color]
+				: $connectingInput.hoveredComponent === id
+				? 'bg-orange-300 '
+				: 'bg-white',
+			first ? 'border-t' : '',
+			nested ? 'border-l' : ''
+		)}
+		on:click={() => {
+			$manuallyOpened[id] = $manuallyOpened[id] != undefined ? !$manuallyOpened[id] : true
+		}}
+	>
+		<div class="flex">
+			<button
+				disabled={!(selectable && !$selectedComponent?.includes(id)) || $connectingInput?.opened}
+				title="Select component"
+				on:click|stopPropagation={() => ($selectedComponent = [id])}
+				class="flex items-center ml-0.5 rounded-sm bg-gray-100 hover:text-black text-gray-600"
+			>
+				<div
+					class={classNames(
+						'text-2xs  font-bold px-2 py-0.5 rounded-sm',
+						$selectedComponent?.includes(id) ? idClass[color] : ''
+					)}
+				>
+					{id}
+				</div>
+				{#if selectable && !$selectedComponent?.includes(id)}
+					<div class="px-1">
+						<Pointer size={14} />
+					</div>
+				{/if}
+			</button>
+			{#if selectable && renamable && ($selectedComponent?.includes(id) || $hoverStore === id)}
+				<IdEditor
+					{id}
+					on:selected={() => ($selectedComponent = [id])}
+					on:change={({ detail }) => renameId(detail)}
+				/>
+			{/if}
+		</div>
+		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+			{name}
+			{#if !open}
+				<ChevronDown size={14} />
+			{:else if $manuallyOpened[id]}
+				<ChevronUp size={14} class={manuallyOpenColor[color]} strokeWidth={4} />
+			{:else}
+				<ChevronUp size={14} />
+			{/if}
+		</div>
+	</div>
+	<div
+		class="border-b {open ? 'h-full' : 'h-0 overflow-hidden'} {$connectingInput.hoveredComponent ===
+			id && !$selectedComponent?.includes(id)
+			? '  bg-orange-100/40'
+			: ''}"
+	>
+		<div class={classNames(nested ? 'border-l ml-2' : '')}>
+			<slot />
+		</div>
+	</div>
+</div>

package/dist/components/apps/editor/contextPanel/components/OutputHeader.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        name: string;
+        first?: boolean | undefined;
+        nested?: boolean | undefined;
+        color?: "blue" | "indigo" | undefined;
+        selectable?: boolean | undefined;
+        renamable?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type OutputHeaderProps = typeof __propDef.props;
+export type OutputHeaderEvents = typeof __propDef.events;
+export type OutputHeaderSlots = typeof __propDef.slots;
+export default class OutputHeader extends SvelteComponentTyped<OutputHeaderProps, OutputHeaderEvents, OutputHeaderSlots> {
+}
+export {};

package/dist/components/apps/editor/contextPanel/components/TableActionOutput.svelte

@@ -0,0 +1,17 @@
+<script>import { getContext } from 'svelte';
+import { connectInput } from '../../appUtils';
+import ComponentOutputViewer from '../ComponentOutputViewer.svelte';
+import OutputHeader from './OutputHeader.svelte';
+const { connectingInput } = getContext('AppViewerContext');
+export let id;
+export let first = false;
+</script>
+
+<OutputHeader renamable={false} {id} name={'Table action'} {first}>
+	<ComponentOutputViewer
+		componentId={id}
+		on:select={({ detail }) => {
+			$connectingInput = connectInput($connectingInput, id, detail)
+		}}
+	/>
+</OutputHeader>