windmill-components 1.383.9 → 1.389.1

package/package/components/apps/editor/componentsPanel/tailwindUtils.js

@@ -3589,6 +3589,267 @@ export const tailwindClasses = [
     'border-double',
     'border-hidden',
     'border-none',
+    'outline-0',
+    'outline-1',
+    'outline-2',
+    'outline-4',
+    'outline-8',
+    'outline-inherit',
+    'outline-current',
+    'outline-transparent',
+    'outline-black',
+    'outline-white',
+    'outline-slate-50',
+    'outline-slate-100',
+    'outline-slate-200',
+    'outline-slate-300',
+    'outline-slate-400',
+    'outline-slate-500',
+    'outline-slate-600',
+    'outline-slate-700',
+    'outline-slate-800',
+    'outline-slate-900',
+    'outline-slate-950',
+    'outline-gray-50',
+    'outline-gray-100',
+    'outline-gray-200',
+    'outline-gray-300',
+    'outline-gray-400',
+    'outline-gray-500',
+    'outline-gray-600',
+    'outline-gray-700',
+    'outline-gray-800',
+    'outline-gray-900',
+    'outline-gray-950',
+    'outline-zinc-50',
+    'outline-zinc-100',
+    'outline-zinc-200',
+    'outline-zinc-300',
+    'outline-zinc-400',
+    'outline-zinc-500',
+    'outline-zinc-600',
+    'outline-zinc-700',
+    'outline-zinc-800',
+    'outline-zinc-900',
+    'outline-zinc-950',
+    'outline-neutral-50',
+    'outline-neutral-100',
+    'outline-neutral-200',
+    'outline-neutral-300',
+    'outline-neutral-400',
+    'outline-neutral-500',
+    'outline-neutral-600',
+    'outline-neutral-700',
+    'outline-neutral-800',
+    'outline-neutral-900',
+    'outline-neutral-950',
+    'outline-stone-50',
+    'outline-stone-100',
+    'outline-stone-200',
+    'outline-stone-300',
+    'outline-stone-400',
+    'outline-stone-500',
+    'outline-stone-600',
+    'outline-stone-700',
+    'outline-stone-800',
+    'outline-stone-900',
+    'outline-stone-950',
+    'outline-red-50',
+    'outline-red-100',
+    'outline-red-200',
+    'outline-red-300',
+    'outline-red-400',
+    'outline-red-500',
+    'outline-red-600',
+    'outline-red-700',
+    'outline-red-800',
+    'outline-red-900',
+    'outline-red-950',
+    'outline-orange-50',
+    'outline-orange-100',
+    'outline-orange-200',
+    'outline-orange-300',
+    'outline-orange-400',
+    'outline-orange-500',
+    'outline-orange-600',
+    'outline-orange-700',
+    'outline-orange-800',
+    'outline-orange-900',
+    'outline-orange-950',
+    'outline-amber-50',
+    'outline-amber-100',
+    'outline-amber-200',
+    'outline-amber-300',
+    'outline-amber-400',
+    'outline-amber-500',
+    'outline-amber-600',
+    'outline-amber-700',
+    'outline-amber-800',
+    'outline-amber-900',
+    'outline-amber-950',
+    'outline-yellow-50',
+    'outline-yellow-100',
+    'outline-yellow-200',
+    'outline-yellow-300',
+    'outline-yellow-400',
+    'outline-yellow-500',
+    'outline-yellow-600',
+    'outline-yellow-700',
+    'outline-yellow-800',
+    'outline-yellow-900',
+    'outline-yellow-950',
+    'outline-lime-50',
+    'outline-lime-100',
+    'outline-lime-200',
+    'outline-lime-300',
+    'outline-lime-400',
+    'outline-lime-500',
+    'outline-lime-600',
+    'outline-lime-700',
+    'outline-lime-800',
+    'outline-lime-900',
+    'outline-lime-950',
+    'outline-green-50',
+    'outline-green-100',
+    'outline-green-200',
+    'outline-green-300',
+    'outline-green-400',
+    'outline-green-500',
+    'outline-green-600',
+    'outline-green-700',
+    'outline-green-800',
+    'outline-green-900',
+    'outline-green-950',
+    'outline-emerald-50',
+    'outline-emerald-100',
+    'outline-emerald-200',
+    'outline-emerald-300',
+    'outline-emerald-400',
+    'outline-emerald-500',
+    'outline-emerald-600',
+    'outline-emerald-700',
+    'outline-emerald-800',
+    'outline-emerald-900',
+    'outline-emerald-950',
+    'outline-teal-50',
+    'outline-teal-100',
+    'outline-teal-200',
+    'outline-teal-300',
+    'outline-teal-400',
+    'outline-teal-500',
+    'outline-teal-600',
+    'outline-teal-700',
+    'outline-teal-800',
+    'outline-teal-900',
+    'outline-teal-950',
+    'outline-cyan-50',
+    'outline-cyan-100',
+    'outline-cyan-200',
+    'outline-cyan-300',
+    'outline-cyan-400',
+    'outline-cyan-500',
+    'outline-cyan-600',
+    'outline-cyan-700',
+    'outline-cyan-800',
+    'outline-cyan-900',
+    'outline-cyan-950',
+    'outline-sky-50',
+    'outline-sky-100',
+    'outline-sky-200',
+    'outline-sky-300',
+    'outline-sky-400',
+    'outline-sky-500',
+    'outline-sky-600',
+    'outline-sky-700',
+    'outline-sky-800',
+    'outline-sky-900',
+    'outline-sky-950',
+    'outline-blue-50',
+    'outline-blue-100',
+    'outline-blue-200',
+    'outline-blue-300',
+    'outline-blue-400',
+    'outline-blue-500',
+    'outline-blue-600',
+    'outline-blue-700',
+    'outline-blue-800',
+    'outline-blue-900',
+    'outline-blue-950',
+    'outline-indigo-50',
+    'outline-indigo-100',
+    'outline-indigo-200',
+    'outline-indigo-300',
+    'outline-indigo-400',
+    'outline-indigo-500',
+    'outline-indigo-600',
+    'outline-indigo-700',
+    'outline-indigo-800',
+    'outline-indigo-900',
+    'outline-indigo-950',
+    'outline-violet-50',
+    'outline-violet-100',
+    'outline-violet-200',
+    'outline-violet-300',
+    'outline-violet-400',
+    'outline-violet-500',
+    'outline-violet-600',
+    'outline-violet-700',
+    'outline-violet-800',
+    'outline-violet-900',
+    'outline-violet-950',
+    'outline-purple-50',
+    'outline-purple-100',
+    'outline-purple-200',
+    'outline-purple-300',
+    'outline-purple-400',
+    'outline-purple-500',
+    'outline-purple-600',
+    'outline-purple-700',
+    'outline-purple-800',
+    'outline-purple-900',
+    'outline-purple-950',
+    'outline-fuchsia-50',
+    'outline-fuchsia-100',
+    'outline-fuchsia-200',
+    'outline-fuchsia-300',
+    'outline-fuchsia-400',
+    'outline-fuchsia-500',
+    'outline-fuchsia-600',
+    'outline-fuchsia-700',
+    'outline-fuchsia-800',
+    'outline-fuchsia-900',
+    'outline-fuchsia-950',
+    'outline-pink-50',
+    'outline-pink-100',
+    'outline-pink-200',
+    'outline-pink-300',
+    'outline-pink-400',
+    'outline-pink-500',
+    'outline-pink-600',
+    'outline-pink-700',
+    'outline-pink-800',
+    'outline-pink-900',
+    'outline-pink-950',
+    'outline-rose-50',
+    'outline-rose-100',
+    'outline-rose-200',
+    'outline-rose-300',
+    'outline-rose-400',
+    'outline-rose-500',
+    'outline-rose-600',
+    'outline-rose-700',
+    'outline-rose-800',
+    'outline-rose-900',
+    'outline-rose-950',
+    'outline-none',
+    'outline-dashed',
+    'outline-dotted',
+    'outline-double',
+    'outline-offset-0',
+    'outline-offset-1',
+    'outline-offset-2',
+    'outline-offset-4',
+    'outline-offset-8',
     'ring-0',
     'ring-1',
     'ring-2',
@@ -4470,5 +4731,10 @@ export const tailwindClasses = [
     'border-spacing-y-64',
     'border-spacing-y-72',
     'border-spacing-y-80',
-    'border-spacing-y-96'
+    'border-spacing-y-96',
+    'shadow',
+    'border',
+    'ring',
+    'rounded',
+    'outline'
 ];

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -1,5 +1,5 @@
 <script>import { classNames } from '../../../../utils';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import { connectInput } from '../appUtils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
 import ComponentOutput from './ComponentOutput.svelte';
@@ -8,14 +8,22 @@ import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte
 import OutputHeader from './components/OutputHeader.svelte';
 import { ClearableInput } from '../../../common';
 import DocLink from '../settingsPanel/DocLink.svelte';
+import HideButton from '../settingsPanel/HideButton.svelte';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
+const dispatch = createEventDispatcher();
 let hasState = false;
 </script>
 
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
 	<svelte:fragment slot="action">
 		<div class="p-0.5">
+			<HideButton
+				on:click={() => {
+					dispatch('hidePanel')
+				}}
+				direction="left"
+			/>
 			<DocLink docLink="https://www.windmill.dev/docs/apps/outputs" />
 		</div>
 	</svelte:fragment>

package/package/components/apps/editor/contextPanel/ContextPanel.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: Record<string, never>;
     events: {
+        hidePanel: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/inlineScriptsPanel/CacheTtlPopup.svelte

@@ -25,6 +25,7 @@ export let cache_ttl;
 			size="xs2"
 			iconOnly
 			startIcon={{ icon: Database }}
+			title="Cache settings"
 		/>
 	</svelte:fragment>
 	<div class="block text-primary">

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte

@@ -15,6 +15,7 @@ import ScriptGen from '../../../copilot/ScriptGen.svelte';
 import DiffEditor from '../../../DiffEditor.svelte';
 import { userStore } from '../../../../stores';
 import CacheTtlPopup from './CacheTtlPopup.svelte';
+import EditorSettings from '../../../EditorSettings.svelte';
 let inlineScriptEditorDrawer;
 export let inlineScript;
 export let name = undefined;
@@ -210,6 +211,7 @@ async function inferSuggestions(code) {
 					}, {})}
 					{transformer}
 				/>
+				<EditorSettings />
 
 				<Button
 					title="Delete"
@@ -306,6 +308,7 @@ async function inferSuggestions(code) {
 						bind:this={simpleEditor}
 						class="h-full max-w-full"
 						small
+						allowVim
 						{extraLib}
 						bind:code={inlineScript.content}
 						lang="javascript"

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte

@@ -11,6 +11,7 @@ import { sendUserToast } from '../../../../toast';
 import { ScriptService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
 import { findNextAvailablePath } from '../../../../path';
+import { twMerge } from 'tailwind-merge';
 const { app, runnableComponents } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
 function deleteBackgroundScript(index) {
@@ -83,12 +84,16 @@ async function createScriptFromInlineScript(id, runnable) {
     });
     $app = $app;
 }
+export let width = undefined;
 </script>
 
 <SplitPanesWrapper>
-	<Splitpanes class="!overflow-visible">
+	<Splitpanes
+		class={twMerge('!overflow-visible')}
+		style={width !== undefined ? `width:${width}px;` : ''}
+	>
 		<Pane size={25}>
-			<InlineScriptsPanelList />
+			<InlineScriptsPanelList on:hidePanel />
 		</Pane>
 		<Pane size={75}>
 			{#if !$selectedComponentInEditor}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanel.svelte.d.ts

@@ -1,7 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        width?: number | undefined;
+    };
     events: {
+        hidePanel: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -1,6 +1,6 @@
 <script>import { Badge, Button } from '../../../common';
 import { Plus } from 'lucide-svelte';
-import { getContext } from 'svelte';
+import { createEventDispatcher, getContext } from 'svelte';
 import Tooltip from '../../../Tooltip.svelte';
 import { BG_PREFIX, getAllScriptNames } from '../../utils';
 import PanelSection from '../settingsPanel/common/PanelSection.svelte';
@@ -10,6 +10,7 @@ import { tutorialsToDo } from '../../../../stores';
 import { ignoredTutorials } from '../../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../../tutorialUtils';
 import DocLink from '../settingsPanel/DocLink.svelte';
+import HideButton from '../settingsPanel/HideButton.svelte';
 const PREFIX = 'script-selector-';
 const { app, selectedComponent } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
@@ -62,11 +63,22 @@ function createBackgroundScript() {
     selectScript(`${BG_PREFIX}${$app.hiddenInlineScripts.length - 1}`);
 }
 let appTutorials = undefined;
+const dispatch = createEventDispatcher();
 </script>
 
 <PanelSection title="Runnables" id="app-editor-runnable-panel">
 	<svelte:fragment slot="action">
-		<DocLink docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable" />
+		<div class="flex flex-row gap-1">
+			<HideButton
+				direction="bottom"
+				on:click={() => {
+					dispatch('hidePanel')
+				}}
+			/>
+			<DocLink
+				docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable"
+			/>
+		</div>
 	</svelte:fragment>
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: Record<string, never>;
     events: {
         reload: CustomEvent<any>;
+        hidePanel: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -347,7 +347,11 @@ function transformToFrontend() {
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'agchartscomponentee'}
 			<GridAgChartsLicenseKe bind:license={componentSettings.item.data.license} />
 		{:else if componentSettings.item.data.type === 'steppercomponent'}
@@ -378,14 +382,30 @@ function transformToFrontend() {
 				bind:component={componentSettings.item.data}
 			/>
 		{:else if componentSettings.item.data.type === 'aggridcomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'aggridinfinitecomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'aggridinfinitecomponentee'}
 			<GridAgGridLicenseKey bind:license={componentSettings.item.data.license} />
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'dbexplorercomponent'}
-			<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
+			<TableActions
+				id={component.id}
+				bind:components={componentSettings.item.data.actions}
+				bind:actionsOrder={componentSettings.item.data.actionsOrder}
+			/>
 		{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
 			<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />
 		{:else if componentSettings.item.data.type === 'menucomponent' && Array.isArray(componentSettings.item.data.menuItems)}

package/package/components/apps/editor/settingsPanel/HideButton.svelte

@@ -0,0 +1,47 @@
+<script>import Popover from '../../../Popover.svelte';
+import { ButtonType } from '../../../common';
+import Button from '../../../common/button/Button.svelte';
+import { getModifierKey } from '../../../../utils';
+import { PanelBottomClose, PanelLeftClose, PanelRightClose } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let btnClasses = undefined;
+export let size = 'xs';
+export let direction = 'right';
+export let hidden = false;
+const IconMap = {
+    left: PanelLeftClose,
+    right: PanelRightClose,
+    bottom: PanelBottomClose
+};
+const shortcuts = {
+    left: 'B',
+    right: 'U',
+    bottom: 'L'
+};
+</script>
+
+<Popover>
+	<svelte:fragment slot="text">
+		<div class="flex flex-row gap-1">
+			{hidden ? 'Show' : 'Hide '} the {direction} panel.
+
+			<div class="flex flex-row items-center !text-md opacity-60 gap-0 font-normal">
+				{getModifierKey()}{shortcuts[direction]}
+			</div>
+		</div>
+	</svelte:fragment>
+	<Button
+		iconOnly
+		startIcon={{
+			icon: IconMap[direction]
+		}}
+		{size}
+		btnClasses={twMerge(
+			'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent',
+			hidden ? 'bg-surface-selected !text-primary' : '',
+			btnClasses
+		)}
+		on:click
+		color="light"
+	/>
+</Popover>

package/package/components/apps/editor/settingsPanel/HideButton.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import { ButtonType } from '../../../common';
+declare const __propDef: {
+    props: {
+        btnClasses?: string | undefined;
+        size?: ButtonType.Size | undefined;
+        direction?: "bottom" | "right" | "left" | undefined;
+        hidden?: boolean | undefined;
+    };
+    events: {
+        click: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type HideButtonProps = typeof __propDef.props;
+export type HideButtonEvents = typeof __propDef.events;
+export type HideButtonSlots = typeof __propDef.slots;
+export default class HideButton extends SvelteComponent<HideButtonProps, HideButtonEvents, HideButtonSlots> {
+}
+export {};

package/package/components/apps/editor/settingsPanel/TableActions.svelte

@@ -5,11 +5,14 @@ import { classNames, generateRandomString } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
 import { appComponentFromType } from '../appUtils';
 import PanelSection from './common/PanelSection.svelte';
-import { GripVertical, Inspect, List, ToggleRightIcon } from 'lucide-svelte';
+import { GripVertical, Inspect, List, ToggleRightIcon, ListOrdered } from 'lucide-svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import CloseButton from '../../../common/CloseButton.svelte';
 import { flip } from 'svelte/animate';
+import TableActionsWizard from '../../../wizards/TableActionsWizard.svelte';
+import Alert from '../../../common/alert/Alert.svelte';
 export let components;
+export let actionsOrder = undefined;
 // Migration code:
 onMount(() => {
     if (components === undefined) {
@@ -65,6 +68,23 @@ function handleFinalize(e) {
 
 {#if components}
 	<PanelSection title={`Table Actions`}>
+		<svelte:fragment slot="action">
+			<TableActionsWizard bind:actionsOrder selectedId={$selectedComponent?.[0] ?? ''} {components}>
+				<svelte:fragment slot="trigger">
+					<Button
+						color="light"
+						size="xs2"
+						nonCaptureEvent={true}
+						btnClasses={actionsOrder ? 'bg-blue-100 dark:bg-blue-900' : 'text-primary'}
+						title="Edit order programmatically"
+					>
+						<div class="flex flex-row items-center gap-2 text-xs font-normal">
+							<ListOrdered size={16} />
+						</div>
+					</Button>
+				</svelte:fragment>
+			</TableActionsWizard>
+		</svelte:fragment>
 		{#if components.length == 0}
 			<span class="text-xs text-tertiary">No action buttons</span>
 		{/if}
@@ -116,9 +136,11 @@ function handleFinalize(e) {
 								<CloseButton small on:close={() => deleteComponent(component.id, index)} />
 							</div>
 						</div>
-						<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
-							<GripVertical size={16} />
-						</div>
+						{#if actionsOrder === undefined}
+							<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
+								<GripVertical size={16} />
+							</div>
+						{/if}
 					</div>
 				{/each}
 			</section>
@@ -155,5 +177,22 @@ function handleFinalize(e) {
 				+ <List size={14} />
 			</Button>
 		</div>
+		<div class="w-full flex flex-col">
+			{#if actionsOrder}
+				<Alert size="xs" title="Order managed programmatically" type="info">
+					Actions order is managed programmatically. Adding or removing an action will require you
+					to update the order manually.
+					<Button
+						btnClasses="mt-2"
+						size="xs2"
+						on:click={() => {
+							actionsOrder = undefined
+						}}
+					>
+						Disable order management
+					</Button>
+				</Alert>
+			{/if}
+		</div>
 	</PanelSection>
 {/if}

package/package/components/apps/editor/settingsPanel/TableActions.svelte.d.ts

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { BaseAppComponent } from '../../types';
+import type { BaseAppComponent, RichConfiguration } from '../../types';
 import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component';
 declare const __propDef: {
     props: {
         components: (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[] | undefined;
+        actionsOrder?: RichConfiguration | undefined;
         id: string;
     };
     events: {