windmill-components 1.383.9 → 1.389.2

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import './theme/windmill-theme.css';
@@ -13,6 +13,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridinfinitecomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -13,6 +13,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = [];
+export let actionsOrder = undefined;
 let loaded = false;
 async function load() {
     await import('ag-grid-enterprise');
@@ -32,6 +33,7 @@ load();
 		{render}
 		{customCss}
 		{actions}
+		{actionsOrder}
 	/>
 {:else}
 	<Loader2 class="animate-spin" />

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { TableAction } from '../../../editor/component';
@@ -14,6 +14,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridinfinitecomponentee'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -18,6 +18,7 @@ import AppAggridTableActions from './AppAggridTableActions.svelte';
 import { cellRendererFactory, defaultCellRenderer } from './utils';
 import Popover from '../../../../Popover.svelte';
 import { Button } from '../../../../common';
+import InputValue from '../../helpers/InputValue.svelte';
 // import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 export let id;
 export let componentInput;
@@ -26,11 +27,12 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = undefined;
+export let actionsOrder = undefined;
 const context = getContext('AppViewerContext');
 const contextPanel = getContext('ContextPanel');
 const iterContext = getContext('ListWrapperContext');
 const listInputs = getContext('ListInputs');
-const { app, worldStore, selectedComponent, componentControl, darkMode } = context;
+const { app, worldStore, selectedComponent, componentControl, darkMode, mode } = context;
 const rowHeights = {
     normal: 40,
     compact: 30,
@@ -139,6 +141,19 @@ function refreshActions(actions) {
 }
 let lastActions = undefined;
 $: actions && refreshActions(actions);
+let lastActionsOrder = undefined;
+$: computedOrder && refreshActionsOrder(computedOrder);
+function clearActionOrder() {
+    computedOrder = undefined;
+    updateOptions();
+}
+$: computedOrder && computedOrder.length > 0 && actionsOrder === undefined && clearActionOrder();
+function refreshActionsOrder(actionsOrder) {
+    if (Array.isArray(actionsOrder) && !deepEqual(actionsOrder, lastActionsOrder)) {
+        lastActionsOrder = [...actionsOrder];
+        updateOptions();
+    }
+}
 let inputs = {};
 const tableActionsFactory = cellRendererFactory((c, p) => {
     const rowIndex = p.node.rowIndex ?? 0;
@@ -147,12 +162,17 @@ const tableActionsFactory = cellRendererFactory((c, p) => {
         ['AppViewerContext', context],
         ['ContextPanel', contextPanel]
     ]);
+    const sortedActions = computedOrder
+        ? computedOrder
+            .map((key) => actions?.find((a) => a.id === key))
+            .filter(Boolean)
+        : actions;
     let ta = new AppAggridTableActions({
         target: c.eGui,
         props: {
             p,
             id: id,
-            actions,
+            actions: sortedActions,
             rowIndex,
             row,
             render,
@@ -381,8 +401,13 @@ function updateOptions() {
 let loading = false;
 let refreshCount = 0;
 let footerRenderCount = 0;
+let computedOrder = undefined;
 </script>
 
+{#if actionsOrder}
+	<InputValue key="actionsOrder" {id} input={actionsOrder} bind:value={computedOrder} />
+{/if}
+
 {#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
 	<ResolveConfig
 		{id}
@@ -440,7 +465,24 @@ let footerRenderCount = 0;
 			>
 				{#key resolvedConfig?.pagination}
 					{#if loaded}
-						<div bind:this={eGui} style:height="100%" />
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							bind:this={eGui}
+							style:height="100%"
+							on:keydown={(e) => {
+								if ((e.ctrlKey || e.metaKey) && e.key === 'c' && $mode !== 'dnd') {
+									const selectedCell = api?.getFocusedCell()
+									if (selectedCell) {
+										const rowIndex = selectedCell.rowIndex
+										const colId = selectedCell.column?.getId()
+										const rowNode = api?.getDisplayedRowAtIndex(rowIndex)
+										const selectedValue = rowNode?.data?.[colId]
+										navigator.clipboard.writeText(selectedValue)
+										sendUserToast('Copied cell value to clipboard', false)
+									}
+								}
+							}}
+						/>
 					{:else}
 						<Loader2 class="animate-spin" />
 					{/if}

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import { type TableAction } from '../../../editor/component';
 import 'ag-grid-community/styles/ag-grid.css';
 import './theme/windmill-theme.css';
@@ -13,6 +13,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -13,6 +13,7 @@ export let initializing = undefined;
 export let render;
 export let customCss = undefined;
 export let actions = [];
+export let actionsOrder = undefined;
 let loaded = false;
 async function load() {
     await import('ag-grid-enterprise');
@@ -32,6 +33,7 @@ load();
 		{render}
 		{customCss}
 		{actions}
+		{actionsOrder}
 	/>
 {:else}
 	<Loader2 class="animate-spin" />

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { AppInput } from '../../../inputType';
-import type { ComponentCustomCSS, RichConfigurations } from '../../../types';
+import type { ComponentCustomCSS, RichConfiguration, RichConfigurations } from '../../../types';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-alpine.css';
 import type { TableAction } from '../../../editor/component';
@@ -14,6 +14,7 @@ declare const __propDef: {
         render: boolean;
         customCss?: ComponentCustomCSS<'aggridcomponent'> | undefined;
         actions?: TableAction[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/AppEditor.svelte

@@ -14,7 +14,6 @@ import { classNames, encodeState, sendUserToast } from '../../../utils';
 import AppPreview from './AppPreview.svelte';
 import ComponentList from './componentsPanel/ComponentList.svelte';
 import ContextPanel from './contextPanel/ContextPanel.svelte';
-import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
 import { page } from '$app/stores';
 import ItemPicker from '../../ItemPicker.svelte';
 import VariableEditor from '../../VariableEditor.svelte';
@@ -34,6 +33,8 @@ import { getTheme } from './componentsPanel/themeUtils';
 import StylePanel from './settingsPanel/StylePanel.svelte';
 import RunnableJobPanel from './RunnableJobPanel.svelte';
 import { goto, replaceState } from '$app/navigation';
+import HideButton from './settingsPanel/HideButton.svelte';
+import AppEditorBottomPanel from './AppEditorBottomPanel.svelte';
 export let app;
 export let path;
 export let policy;
@@ -238,7 +239,7 @@ function onThemeChange() {
 let runnablePanelSize = 30;
 let gridPanelSize = 70;
 let leftPanelSize = 22;
-let centerPanelSize = 63;
+let centerPanelSize = 56;
 let rightPanelSize = 22;
 let tmpRunnablePanelSize = -1;
 let tmpGridPanelSize = -1;
@@ -407,11 +408,96 @@ function setGridPanelSize(x) {
 }
 let runnableJobEnterTimeout = undefined;
 let stillInJobEnter = false;
+let storedLeftPanelSize = 0;
+let storedRightPanelSize = 0;
+let storedBottomPanelSize = 0;
+let centerPanelWidth = 0;
+function hideLeftPanel() {
+    storedLeftPanelSize = leftPanelSize;
+    leftPanelSize = 0;
+    centerPanelSize = centerPanelSize + storedLeftPanelSize;
+}
+function hideRightPanel() {
+    storedRightPanelSize = rightPanelSize;
+    rightPanelSize = 0;
+    centerPanelSize = centerPanelSize + storedRightPanelSize;
+}
+function hideBottomPanel() {
+    storedBottomPanelSize = runnablePanelSize;
+    gridPanelSize = 99;
+    runnablePanelSize = 0;
+}
+function showLeftPanel() {
+    leftPanelSize = storedLeftPanelSize;
+    centerPanelSize = centerPanelSize - storedLeftPanelSize;
+    storedLeftPanelSize = 0;
+}
+function showRightPanel() {
+    rightPanelSize = storedRightPanelSize;
+    centerPanelSize = centerPanelSize - storedRightPanelSize;
+    storedRightPanelSize = 0;
+}
+function showBottomPanel() {
+    runnablePanelSize = storedBottomPanelSize;
+    gridPanelSize = gridPanelSize - storedBottomPanelSize;
+    storedBottomPanelSize = 0;
+}
+function keydown(event) {
+    let classes = event.target?.['className'];
+    if ((typeof classes === 'string' && classes.includes('inputarea')) ||
+        ['INPUT', 'TEXTAREA'].includes(document.activeElement?.tagName)) {
+        return;
+    }
+    switch (event.key) {
+        case 'b': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (leftPanelSize !== 0) {
+                    hideLeftPanel();
+                }
+                else {
+                    showLeftPanel();
+                }
+            }
+            break;
+        }
+        case 'u': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (rightPanelSize !== 0) {
+                    hideRightPanel();
+                }
+                else {
+                    showRightPanel();
+                }
+            }
+            break;
+        }
+        case 'l': {
+            if (event.ctrlKey || event.metaKey) {
+                event.preventDefault();
+                if (runnablePanelSize !== 0) {
+                    hideBottomPanel();
+                }
+                else {
+                    showBottomPanel();
+                }
+            }
+            break;
+        }
+    }
+}
+let testJob = undefined;
+let jobToWatch = undefined;
 </script>
 
+<svelte:head>
+	<link rel="stylesheet" href="/tailwind_full.css" />
+</svelte:head>
+
 <DarkModeObserver on:change={onThemeChange} />
 
-<svelte:window on:hashchange={hashchange} />
+<svelte:window on:hashchange={hashchange} on:keydown={keydown} />
 
 {#if !$userStore?.operator}
 	{#if $appStore}
@@ -423,6 +509,15 @@ let stillInJobEnter = false;
 			{diffDrawer}
 			bind:savedApp
 			{version}
+			leftPanelHidden={leftPanelSize === 0}
+			rightPanelHidden={rightPanelSize === 0}
+			bottomPanelHidden={runnablePanelSize === 0}
+			on:showLeftPanel={() => showLeftPanel()}
+			on:showRightPanel={() => showRightPanel()}
+			on:hideLeftPanel={() => hideLeftPanel()}
+			on:hideRightPanel={() => hideRightPanel()}
+			on:hideBottomPanel={() => hideBottomPanel()}
+			on:showBottomPanel={() => showBottomPanel()}
 		/>
 		{#if $mode === 'preview'}
 			<SplitPanesWrapper>
@@ -468,7 +563,7 @@ let stillInJobEnter = false;
 							<!-- {yTop} -->
 
 							<SecondaryMenu right={false} />
-							<ContextPanel />
+							<ContextPanel on:hidePanel={() => hideLeftPanel()} />
 						</div>
 					</Pane>
 					<Pane bind:size={centerPanelSize}>
@@ -485,7 +580,39 @@ let stillInJobEnter = false;
 										'wm-app-viewer h-full overflow-visible'
 									)}
 									style={$appStore.css?.['app']?.['viewer']?.style}
+									bind:clientWidth={centerPanelWidth}
 								>
+									{#if leftPanelSize === 0}
+										<div class="absolute top-0.5 left-0.5 z-50">
+											<HideButton
+												on:click={() => showLeftPanel()}
+												direction="right"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+									{#if rightPanelSize === 0}
+										<div class="absolute top-0.5 right-0.5 z-50">
+											<HideButton
+												on:click={() => showRightPanel()}
+												direction="left"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+									{#if runnablePanelSize === 0}
+										<div class="absolute bottom-0.5 right-0.5 z-50">
+											<HideButton
+												on:click={() => showBottomPanel()}
+												direction="bottom"
+												hidden
+												btnClasses="border bg-surface"
+											/>
+										</div>
+									{/if}
+
 									<div class="absolute bottom-2 left-2 z-50 border bg-surface">
 										<div class="flex flex-row gap-2 text-xs items-center h-8 px-1">
 											<Button
@@ -573,9 +700,7 @@ let stillInJobEnter = false;
 							</Pane>
 							{#if $connectingInput?.opened == false && !$componentActive}
 								<Pane bind:size={runnablePanelSize}>
-									<!-- svelte-ignore a11y-no-static-element-interactions -->
-									<div
-										class="relative h-full w-full overflow-x-visible"
+									<AppEditorBottomPanel
 										on:mouseenter={() => {
 											runnableJobEnterTimeout && clearTimeout(runnableJobEnterTimeout)
 											stillInJobEnter = true
@@ -585,6 +710,7 @@ let stillInJobEnter = false;
 												}
 											}, 200)
 										}}
+										on:hidePanel={() => hideBottomPanel()}
 										on:mouseleave={() => {
 											stillInJobEnter = false
 											runnableJobEnterTimeout = setTimeout(
@@ -592,98 +718,119 @@ let stillInJobEnter = false;
 												200
 											)
 										}}
+										{rightPanelSize}
+										{centerPanelWidth}
+										{runnablePanelSize}
 									>
-										<InlineScriptsPanel />
-										<RunnableJobPanel />
-									</div>
+										<RunnableJobPanel
+											float={rightPanelSize !== 0}
+											hidden={runnablePanelSize === 0}
+											bind:testJob
+											bind:jobToWatch
+										/>
+									</AppEditorBottomPanel>
 								</Pane>
 							{/if}
 						</Splitpanes>
 					</Pane>
-					<Pane bind:size={rightPanelSize} minSize={15} maxSize={33}>
-						<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
-							<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Component library</svelte:fragment>
-									<Tab
-										value="insert"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if ($cssEditorOpen) {
-												$cssEditorOpen = false
-												selectedTab = 'insert'
-											}
-										}}
-										id="app-editor-component-library-tab"
-									>
-										<div class="m-1 center-center">
-											<Plus size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Component settings</svelte:fragment>
-									<Tab
-										value="settings"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if ($cssEditorOpen) {
-												$cssEditorOpen = false
-												selectedTab = 'settings'
-											}
-										}}
-									>
-										<div class="m-1 center-center">
-											<Component size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<Popover disappearTimeout={0} notClickable placement="bottom">
-									<svelte:fragment slot="text">Global styling</svelte:fragment>
-									<Tab
-										value="css"
-										size="xs"
-										class="h-full"
-										on:pointerdown={() => {
-											if (!$cssEditorOpen) {
-												$cssEditorOpen = true
-												selectedTab = 'css'
-											}
-										}}
-									>
-										<div class="m-1 center-center">
-											<Paintbrush size={18} />
-										</div>
-									</Tab>
-								</Popover>
-								<div slot="content" class="h-full overflow-y-auto">
-									<TabContent class="overflow-auto h-full" value="settings">
-										{#if $selectedComponent !== undefined}
-											<SettingsPanel
-												on:delete={() => {
-													befSelected = undefined
+					{#if rightPanelSize === 0}
+						<div class="relative flex flex-col h-full" />
+					{:else}
+						<Pane bind:size={rightPanelSize} minSize={15} maxSize={33}>
+							<div bind:clientWidth={$runnableJob.width} class="relative flex flex-col h-full">
+								<Tabs bind:selected={selectedTab} wrapperClass="!min-h-[42px]" class="!h-full">
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Component library</svelte:fragment>
+										<Tab
+											value="insert"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if ($cssEditorOpen) {
+													$cssEditorOpen = false
 													selectedTab = 'insert'
-												}}
-											/>
-											<SecondaryMenu right />
-										{:else}
-											<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
-												Select a component to see the settings&nbsp;for&nbsp;it
+												}
+											}}
+											id="app-editor-component-library-tab"
+										>
+											<div class="m-1 center-center">
+												<Plus size={18} />
 											</div>
-										{/if}
-									</TabContent>
-									<TabContent value="insert">
-										<ComponentList />
-									</TabContent>
-									<TabContent value="css" class="h-full">
-										<CssSettings />
-									</TabContent>
-								</div>
-							</Tabs>
-						</div>
-					</Pane>
+										</Tab>
+									</Popover>
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Component settings</svelte:fragment>
+										<Tab
+											value="settings"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if ($cssEditorOpen) {
+													$cssEditorOpen = false
+													selectedTab = 'settings'
+												}
+											}}
+										>
+											<div class="m-1 center-center">
+												<Component size={18} />
+											</div>
+										</Tab>
+									</Popover>
+									<Popover disappearTimeout={0} notClickable placement="bottom">
+										<svelte:fragment slot="text">Global styling</svelte:fragment>
+										<Tab
+											value="css"
+											size="xs"
+											class="h-full"
+											on:pointerdown={() => {
+												if (!$cssEditorOpen) {
+													$cssEditorOpen = true
+													selectedTab = 'css'
+												}
+											}}
+										>
+											<div class="m-1 center-center">
+												<Paintbrush size={18} />
+											</div>
+										</Tab>
+									</Popover>
+									<div class="h-full w-full flex justify-end px-1">
+										<HideButton
+											on:click={() => {
+												storedRightPanelSize = rightPanelSize
+												rightPanelSize = 0
+												centerPanelSize = centerPanelSize + storedRightPanelSize
+											}}
+											direction="right"
+										/>
+									</div>
+									<div slot="content" class="h-full overflow-y-auto">
+										<TabContent class="overflow-auto h-full" value="settings">
+											{#if $selectedComponent !== undefined}
+												<SettingsPanel
+													on:delete={() => {
+														befSelected = undefined
+														selectedTab = 'insert'
+													}}
+												/>
+												<SecondaryMenu right />
+											{:else}
+												<div class="min-w-[150px] text-sm !text-secondary text-center py-8 px-2">
+													Select a component to see the settings&nbsp;for&nbsp;it
+												</div>
+											{/if}
+										</TabContent>
+										<TabContent value="insert">
+											<ComponentList />
+										</TabContent>
+										<TabContent value="css" class="h-full">
+											<CssSettings />
+										</TabContent>
+									</div>
+								</Tabs>
+							</div>
+						</Pane>
+					{/if}
 				</Splitpanes>
 			</SplitPanesWrapper>
 		{/if}

package/package/components/apps/editor/AppEditorBottomPanel.svelte

@@ -0,0 +1,22 @@
+<script>import { twMerge } from 'tailwind-merge';
+import InlineScriptsPanel from './inlineScriptsPanel/InlineScriptsPanel.svelte';
+import RunnableJobPanel from './RunnableJobPanel.svelte';
+export let rightPanelSize = 0;
+export let centerPanelWidth = 0;
+export let runnablePanelSize = 0;
+</script>
+
+{#if rightPanelSize !== 0}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class={twMerge('relative h-full w-full overflow-x-visible')} on:mouseenter on:mouseleave>
+		<InlineScriptsPanel on:hidePanel />
+		<RunnableJobPanel hidden={runnablePanelSize === 0} />
+		<slot />
+	</div>
+{:else}
+	<div class="flex flex-row relative w-full h-full">
+		<InlineScriptsPanel width={centerPanelWidth - 400} on:hidePanel />
+
+		<slot />
+	</div>
+{/if}

package/package/components/apps/editor/AppEditorBottomPanel.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        rightPanelSize?: number | undefined;
+        centerPanelWidth?: number | undefined;
+        runnablePanelSize?: number | undefined;
+    };
+    events: {
+        mouseenter: MouseEvent;
+        mouseleave: MouseEvent;
+        hidePanel: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AppEditorBottomPanelProps = typeof __propDef.props;
+export type AppEditorBottomPanelEvents = typeof __propDef.events;
+export type AppEditorBottomPanelSlots = typeof __propDef.slots;
+export default class AppEditorBottomPanel extends SvelteComponent<AppEditorBottomPanelProps, AppEditorBottomPanelEvents, AppEditorBottomPanelSlots> {
+}
+export {};