windmill-components 1.352.9 → 1.362.0

package/package/components/Summary.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SummaryProps = typeof __propDef.props;
+export type SummaryEvents = typeof __propDef.events;
+export type SummarySlots = typeof __propDef.slots;
+export default class Summary extends SvelteComponent<SummaryProps, SummaryEvents, SummarySlots> {
+}
+export {};

package/package/components/apps/components/display/AppMarkdown.svelte

@@ -7,6 +7,7 @@ import { classNames } from '../../../../utils';
 import { components } from '../../editor/component';
 import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import { gfmPlugin } from 'svelte-exmarkdown/gfm';
 export let id;
 export let componentInput;
 export let initializing = undefined;
@@ -54,7 +55,7 @@ const proseMapping = {
 		e?.preventDefault()
 	}}
 	class={classNames(
-		'h-full w-full overflow-y-auto prose',
+		'h-full w-full overflow-y-auto prose max-w-full',
 		resolvedConfig?.size ? proseMapping[resolvedConfig.size] : '',
 		css?.container?.class,
 		' dark:prose-invert',
@@ -73,7 +74,7 @@ const proseMapping = {
 	>
 		{#if result}
 			{#key result}
-				<Markdown md={result} />
+				<Markdown md={result} plugins={[gfmPlugin()]} />
 			{/key}
 		{/if}
 	</RunnableWrapper>

package/package/components/apps/components/display/AppMenu.svelte

@@ -72,12 +72,12 @@ async function handleAfterIcon() {
 					btnClasses={twMerge(
 						css?.button?.class,
 						'wm-button',
-						'wm-download-button',
+						'wm-menu-button',
 						resolvedConfig.fillContainer ? 'w-full h-full' : ''
 					)}
 					wrapperClasses={twMerge(
 						'wm-button-container',
-						'wm-download-button-container',
+						'wm-menu-button-container',
 						resolvedConfig.fillContainer ? 'w-full h-full' : ''
 					)}
 					style={css?.button?.style}

package/package/components/apps/components/display/AppNavbar.svelte

@@ -0,0 +1,94 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import Popover from '../../../Popover.svelte';
+import { twMerge } from 'tailwind-merge';
+import AppNavbarItem from './AppNavbarItem.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+export let navbarItems = [];
+const { app, worldStore } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['navbarcomponent'].initialData.configuration, configuration);
+let output = initOutput($worldStore, id, {
+    result: {
+        currentPath: undefined
+    }
+});
+let css = initCss($app.css?.navbarcomponent, customCss);
+</script>
+
+{#each Object.keys(components['navbarcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.navbarcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+{#if render}
+	<div
+		class={twMerge(
+			resolvedConfig?.orientation === 'horizontal'
+				? 'flex flex-row w-full items-center border-b px-4 gap-4 h-12'
+				: 'flex flex-col h-full items-start border-r px-8 gap-2 w-56 mt-4'
+		)}
+	>
+		{#if resolvedConfig.logo?.selected === 'yes'}
+			<img
+				on:pointerdown|preventDefault
+				src={resolvedConfig.logo?.configuration?.yes?.sourceKind == 'png encoded as base64'
+					? 'data:image/png;base64,' + resolvedConfig.logo?.configuration?.yes?.source
+					: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'jpeg encoded as base64'
+					? 'data:image/jpeg;base64,' + resolvedConfig.logo?.configuration?.yes?.source
+					: resolvedConfig.logo?.configuration?.yes?.sourceKind == 'svg encoded as base64'
+					? 'data:image/svg+xml;base64,' + resolvedConfig.logo?.configuration?.yes?.source
+					: resolvedConfig.logo?.configuration?.yes?.source}
+				alt={resolvedConfig.logo?.configuration?.yes?.altText}
+				style={css?.image?.style ?? ''}
+				class={twMerge(`w-auto h-8`, css?.image?.class, 'wm-image')}
+			/>
+		{/if}
+		<div class="font-semibold">
+			{resolvedConfig?.title ?? 'No Title'}
+		</div>
+		<div
+			class={twMerge(
+				resolvedConfig?.orientation === 'horizontal'
+					? 'flex flex-row gap-4 overflow-x-auto'
+					: 'flex flex-col gap-4 overflow-y-auto'
+			)}
+		>
+			{#each navbarItems ?? [] as navbarItem, index (index)}
+				<Popover notClickable disablePopup={!Boolean(navbarItem.caption)}>
+					<svelte:fragment slot="text">{navbarItem.caption}</svelte:fragment>
+					<AppNavbarItem
+						{navbarItem}
+						{id}
+						borderColor={resolvedConfig?.borderColor}
+						{index}
+						bind:output
+						orientation={resolvedConfig?.orientation}
+					/>
+				</Popover>
+			{/each}
+		</div>
+	</div>
+{/if}

package/package/components/apps/components/display/AppNavbar.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+import { type NavbarItem } from '../../editor/component';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'navbarcomponent'> | undefined;
+        render: boolean;
+        navbarItems?: NavbarItem[] | undefined;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppNavbarProps = typeof __propDef.props;
+export type AppNavbarEvents = typeof __propDef.events;
+export type AppNavbarSlots = typeof __propDef.slots;
+export default class AppNavbar extends SvelteComponent<AppNavbarProps, AppNavbarEvents, AppNavbarSlots> {
+}
+export {};

package/package/components/apps/components/display/AppNavbarItem.svelte

@@ -0,0 +1,146 @@
+<script context="module">import { writable } from 'svelte/store';
+let selected = writable(undefined);
+</script>
+
+<script>import { getContext, onMount } from 'svelte';
+import {} from '../../editor/component';
+import Button from '../../../common/button/Button.svelte';
+import { loadIcon } from '../icon';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { twMerge } from 'tailwind-merge';
+import ResolveNavbarItemPath from './ResolveNavbarItemPath.svelte';
+export let navbarItem;
+export let id;
+export let borderColor = undefined;
+export let index;
+export let output;
+export let orientation = undefined;
+let icon;
+$: navbarItem.icon && icon && handleIcon();
+async function handleIcon() {
+    if (navbarItem.icon) {
+        icon = await loadIcon(navbarItem.icon, icon, 14, undefined, undefined);
+    }
+}
+const { appPath, replaceStateFn, gotoFn, isEditor, worldStore } = getContext('AppViewerContext');
+let resolvedPath = undefined;
+let resolvedLabel = undefined;
+let resolvedDisabled = undefined;
+let resolvedHidden = undefined;
+function extractPathDetails() {
+    const url = window.location.pathname + window.location.search + window.location.hash;
+    const processedUrl = url.replace('/apps/edit/', '').replace('/apps/get/', '');
+    return processedUrl;
+}
+onMount(() => {
+    $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
+});
+let initialized = false;
+function initSelection() {
+    initialized = true;
+    if ($selected)
+        return;
+    $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
+}
+$: !initialized && resolvedPath && initSelection();
+function getButtonProps(resolvedPath) {
+    if (appPath && resolvedPath?.includes(appPath)) {
+        return {
+            onClick: () => {
+                output.result.set({ currentPath: resolvedPath ?? '' });
+                if (!resolvedPath)
+                    return;
+                const url = new URL(resolvedPath, window.location.origin);
+                const queryParams = url.search;
+                const hash = url.hash;
+                replaceStateFn?.(`${window.location.pathname}${queryParams}${hash}`);
+                $worldStore.outputsById['ctx'].query.set(Object.fromEntries(new URLSearchParams(queryParams).entries()));
+                $worldStore.outputsById['ctx'].hash.set(url.hash);
+                $selected = resolvedPath === extractPathDetails() ? resolvedPath : undefined;
+            },
+            href: undefined,
+            target: undefined
+        };
+    }
+    else if (navbarItem.path.selected === 'app') {
+        if (isEditor) {
+            return {
+                href: `/apps/get/${resolvedPath}`,
+                target: '_blank',
+                onClick: undefined
+            };
+        }
+        else {
+            return {
+                onClick: () => {
+                    if (resolvedPath) {
+                        gotoFn?.(`/apps/get/${resolvedPath}`);
+                    }
+                },
+                href: undefined,
+                target: undefined
+            };
+        }
+    }
+    else {
+        return {
+            href: resolvedPath,
+            target: '_blank',
+            onClick: undefined
+        };
+    }
+}
+$: buttonProps = getButtonProps(resolvedPath);
+</script>
+
+<ResolveNavbarItemPath {navbarItem} {id} {index} bind:resolvedPath />
+
+<ResolveConfig
+	{id}
+	key={'label'}
+	extraKey={String(index)}
+	bind:resolvedConfig={resolvedLabel}
+	configuration={navbarItem.label}
+/>
+
+<ResolveConfig
+	{id}
+	key={'disabled'}
+	extraKey={String(index)}
+	bind:resolvedConfig={resolvedDisabled}
+	configuration={navbarItem.disabled}
+/>
+
+<ResolveConfig
+	{id}
+	key={'hidden'}
+	extraKey={String(index)}
+	bind:resolvedConfig={resolvedHidden}
+	configuration={navbarItem.hidden}
+/>
+
+{#if !resolvedHidden}
+	<div
+		class={twMerge('py-2 border-b-2')}
+		style={`border-color: ${
+			$selected === resolvedPath ? borderColor ?? 'transparent' : 'transparent'
+		}`}
+	>
+		<Button
+			on:click={buttonProps.onClick}
+			href={buttonProps.href}
+			target={buttonProps.target ?? '_self'}
+			color="light"
+			size="xs"
+			disabled={resolvedDisabled}
+			btnClasses={orientation === 'vertical' ? '!justify-start !whitespace-normal !text-left' : ''}
+		>
+			{#if navbarItem.icon}
+				{#key navbarItem.icon}
+					<div class="min-w-4" bind:this={icon} />
+				{/key}
+			{/if}
+			{resolvedLabel ?? 'No Label'}
+		</Button>
+	</div>
+{/if}

package/package/components/apps/components/display/AppNavbarItem.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import { type NavbarItem } from '../../editor/component';
+import type { Output } from '../../rx';
+declare const __propDef: {
+    props: {
+        navbarItem: NavbarItem;
+        id: string;
+        borderColor?: string | undefined;
+        index: number;
+        output: {
+            result: Output<{
+                currentPath: string;
+            }>;
+        };
+        orientation?: 'horizontal' | 'vertical' | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppNavbarItemProps = typeof __propDef.props;
+export type AppNavbarItemEvents = typeof __propDef.events;
+export type AppNavbarItemSlots = typeof __propDef.slots;
+export default class AppNavbarItem extends SvelteComponent<AppNavbarItemProps, AppNavbarItemEvents, AppNavbarItemSlots> {
+}
+export {};

package/package/components/apps/components/display/ResolveNavbarItemPath.svelte

@@ -0,0 +1,21 @@
+<script>import {} from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { initConfig } from '../../editor/appUtils';
+export let navbarItem;
+export let id;
+export let index;
+export let resolvedPath = undefined;
+let resolvedConfig = initConfig({ path: navbarItem.path }, { path: navbarItem.path });
+$: resolvedPath = (resolvedConfig?.path?.selected === 'href'
+    ? resolvedConfig?.path?.configuration?.href?.href
+    : resolvedConfig?.path?.configuration?.app?.path +
+        (resolvedConfig?.path?.configuration?.app?.queryParamsOrHash ?? ''));
+</script>
+
+<ResolveConfig
+	{id}
+	key={'path'}
+	extraKey={String(index)}
+	bind:resolvedConfig={resolvedConfig.path}
+	configuration={navbarItem.path}
+/>

package/package/components/apps/components/display/ResolveNavbarItemPath.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type NavbarItem } from '../../editor/component';
+declare const __propDef: {
+    props: {
+        navbarItem: NavbarItem;
+        id: string;
+        index: number;
+        resolvedPath?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ResolveNavbarItemPathProps = typeof __propDef.props;
+export type ResolveNavbarItemPathEvents = typeof __propDef.events;
+export type ResolveNavbarItemPathSlots = typeof __propDef.slots;
+export default class ResolveNavbarItemPath extends SvelteComponent<ResolveNavbarItemPathProps, ResolveNavbarItemPathEvents, ResolveNavbarItemPathSlots> {
+}
+export {};

package/package/components/apps/components/display/dbtable/AppDbExplorer.svelte

@@ -37,6 +37,9 @@ function clearColumns() {
     if (lastTable && !table) {
         lastTable = undefined;
     }
+    clearColumnDefs();
+}
+function clearColumnDefs() {
     const gridItem = findGridItem($app, id);
     if (!gridItem) {
         return;
@@ -170,6 +173,10 @@ let datasource = {
         if (!render) {
             return;
         }
+        if (!runnableComponent) {
+            params.successCallback([], 0);
+            return;
+        }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
             done: (items) => {
                 let lastRow = -1;
@@ -298,6 +305,10 @@ async function listColumnsIfAvailable() {
         return o;
     });
     state = undefined;
+    // If in the mean time the table has changed, we don't want to update the columnDefs
+    if (lastTable !== table) {
+        return;
+    }
     //@ts-ignore
     gridItem.data.configuration.columnDefs = { value: ncols, type: 'static', loading: false };
     gridItem.data = gridItem.data;
@@ -489,6 +500,11 @@ let loading = false;
 					on:update={onUpdate}
 					on:delete={onDelete}
 					allowColumnDefsActions={false}
+					on:recompute={() => {
+						lastTable = undefined
+						clearColumnDefs()
+						listColumnsIfAvailable()
+					}}
 					{actions}
 				/>
 			{/key}

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte

@@ -26,6 +26,7 @@ export let result = undefined;
 export let allowColumnDefsActions = true;
 let inputs = {};
 const context = getContext('AppViewerContext');
+const contextPanel = getContext('ContextPanel');
 const { app, selectedComponent, componentControl, darkMode } = context;
 let css = initCss($app.css?.aggridcomponent, customCss);
 let selectedRowIndex = -1;
@@ -90,6 +91,10 @@ $: actions && refreshActions(actions);
 const tableActionsFactory = cellRendererFactory((c, p) => {
     const rowIndex = p.node.rowIndex ?? 0;
     const row = p.data;
+    const componentContext = new Map([
+        ['AppViewerContext', context],
+        ['ContextPanel', contextPanel]
+    ]);
     new AppAggridTableActions({
         target: c.eGui,
         props: {
@@ -125,7 +130,7 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
                 outputs?.inputs.set(inputs, true);
             }
         },
-        context: new Map([['AppViewerContext', context]])
+        context: componentContext
     });
 });
 function transformColumnDefs(columnDefs) {
@@ -170,7 +175,9 @@ function transformColumnDefs(columnDefs) {
     }
     if (actions && actions.length > 0) {
         r.push({
-            headerName: 'Actions',
+            headerName: resolvedConfig?.customActionsHeader
+                ? resolvedConfig?.customActionsHeader
+                : 'Actions',
             cellRenderer: tableActionsFactory,
             autoHeight: true,
             cellStyle: { textAlign: 'center' },
@@ -251,6 +258,9 @@ function mountGrid() {
                     agGrid: { api: e.api, columnApi: e.columnApi },
                     setSelectedIndex: (index) => {
                         e.api.getRowNode(index.toString())?.setSelected(true);
+                    },
+                    recompute: () => {
+                        dispatch('recompute');
                     }
                 };
                 api = e.api;
@@ -382,17 +392,3 @@ function updateOptions() {
 		{/if}
 	</div>
 </SyncColumnDefs>
-
-<style>
-	.ag-theme-alpine {
-		--ag-row-border-style: solid;
-		--ag-border-color: rgb(209 213 219);
-		--ag-header-border-style: solid;
-		--ag-border-radius: 0;
-		--ag-alpine-active-color: #d1d5db;
-	}
-
-	.ag-theme-alpine-dark {
-		--ag-border-color: #4b5563;
-		--ag-alpine-active-color: #64748b;
-	}</style>

package/package/components/apps/components/display/table/AppAggridExplorerTable.svelte.d.ts

@@ -25,6 +25,7 @@ declare const __propDef: {
     events: {
         update: CustomEvent<any>;
         delete: CustomEvent<any>;
+        recompute: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/components/display/table/AppAggridInfiniteTable.svelte

@@ -66,6 +66,11 @@ const datasource = {
         outputs.params.set(currentParams);
         if (!runnableComponent && result) {
             params.successCallback(result, result.length);
+            return;
+        }
+        if (!runnableComponent && !result) {
+            params.successCallback([], 0);
+            return;
         }
         runnableComponent?.runComponent(undefined, undefined, undefined, currentParams, {
             done: (items) => {

package/package/components/apps/components/display/table/AppAggridTable.svelte

@@ -27,6 +27,7 @@ export let render;
 export let customCss = undefined;
 export let actions = undefined;
 const context = getContext('AppViewerContext');
+const contextPanel = getContext('ContextPanel');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
 const { app, worldStore, selectedComponent, componentControl, darkMode } = context;
@@ -142,6 +143,10 @@ let inputs = {};
 const tableActionsFactory = cellRendererFactory((c, p) => {
     const rowIndex = p.node.rowIndex ?? 0;
     const row = p.data;
+    const componentContext = new Map([
+        ['AppViewerContext', context],
+        ['ContextPanel', contextPanel]
+    ]);
     new AppAggridTableActions({
         target: c.eGui,
         props: {
@@ -177,7 +182,7 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
                 outputs?.inputs.set(inputs, true);
             }
         },
-        context: new Map([['AppViewerContext', context]])
+        context: componentContext
     });
 });
 function mountGrid() {
@@ -189,7 +194,9 @@ function mountGrid() {
             // Add the action column if actions are defined
             if (actions && actions.length > 0) {
                 columnDefs.push({
-                    headerName: 'Actions',
+                    headerName: resolvedConfig?.customActionsHeader
+                        ? resolvedConfig?.customActionsHeader
+                        : 'Actions',
                     cellRenderer: tableActionsFactory,
                     autoHeight: true,
                     cellStyle: { textAlign: 'center' },
@@ -316,7 +323,9 @@ function updateOptions() {
         // Add the action column if actions are defined
         if (actions && actions.length > 0) {
             columnDefs.push({
-                headerName: 'Actions',
+                headerName: resolvedConfig?.customActionsHeader
+                    ? resolvedConfig?.customActionsHeader
+                    : 'Actions',
                 cellRenderer: tableActionsFactory,
                 autoHeight: true,
                 cellStyle: { textAlign: 'center' },
@@ -516,8 +525,8 @@ let footerRenderCount = 0;
 	</SyncColumnDefs>
 </RunnableWrapper>
 
-<style>
-	.ag-theme-alpine {
+<style global>
+	:global(.ag-theme-alpine) {
 		--ag-row-border-style: solid;
 		--ag-border-color: rgb(209 213 219);
 		--ag-header-border-style: solid;
@@ -525,7 +534,20 @@ let footerRenderCount = 0;
 		--ag-alpine-active-color: #d1d5db;
 	}
 
-	.ag-theme-alpine-dark {
+	:global(.ag-theme-alpine-dark) {
 		--ag-border-color: #4b5563;
 		--ag-alpine-active-color: #64748b;
+	}
+
+	:global(.grid-cell-centered) {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	:global(.grid-cell-centered) :global(.svelte-select) {
+		height: 32px !important;
+	}
+
+	:global(.grid-cell-centered) :global(.selected-item) {
+		margin-top: -4px;
 	}</style>