windmill-components 1.83.0 → 1.83.2

package/components/apps/editor/component/ComponentWrapper.svelte

@@ -0,0 +1,59 @@
+<script>import { getContext } from 'svelte';
+import { selectId } from '../../utils';
+import { dfs } from '../appUtils';
+export let id;
+export let type;
+const { app, connectingInput, selectedComponent, focusedGrid } = getContext('AppViewerContext');
+const { manuallyOpened } = getContext('ContextPanel');
+function selectComponent(e, id) {
+    if (!$connectingInput.opened) {
+        selectId(e, id, selectedComponent, $app);
+        if ($focusedGrid?.parentComponentId != id) {
+            $focusedGrid = undefined;
+        }
+    }
+}
+// Prevent interaction with the component when connecting an input
+// We let the event bubble up if the component is a container, so we can select a tab for example
+function preventInteraction(event, isContainer = false) {
+    if ($connectingInput.opened && !isContainer) {
+        event.stopPropagation();
+    }
+}
+function onPointerDown(e) {
+    if (!$connectingInput.opened) {
+        selectComponent(e, id);
+    }
+    else {
+        const allIdsInPath = dfs($app.grid, id, $app.subgrids ?? {}) ?? [];
+        allIdsInPath.forEach((id) => {
+            $manuallyOpened[id] = true;
+        });
+        e.stopPropagation();
+    }
+}
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<div
+	class={$$props.class}
+	on:pointerover={(e) => {
+		if ($connectingInput.opened && $connectingInput.hoveredComponent !== id) {
+			$connectingInput.hoveredComponent = id
+		}
+		e.stopPropagation()
+	}}
+	on:pointerleave={(e) => {
+		if ($connectingInput.opened) {
+			$connectingInput.hoveredComponent = undefined
+			e.stopPropagation()
+		}
+	}}
+	on:pointerdown={onPointerDown}
+	on:click|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+	on:drag|capture={preventInteraction}
+	on:pointerup|capture={(event) => preventInteraction(event, type === 'tabscomponent')}
+>
+	<slot />
+</div>

package/components/apps/editor/component/ComponentWrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        id: string;
+        type: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ComponentWrapperProps = typeof __propDef.props;
+export type ComponentWrapperEvents = typeof __propDef.events;
+export type ComponentWrapperSlots = typeof __propDef.slots;
+export default class ComponentWrapper extends SvelteComponentTyped<ComponentWrapperProps, ComponentWrapperEvents, ComponentWrapperSlots> {
+}
+export {};

package/components/apps/editor/component/components.d.ts

@@ -90,7 +90,7 @@ export interface InitialAppComponent extends Partial<Aligned> {
     panes?: number[];
 }
 export declare const selectOptions: {
-    buttonColorOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light" | "none")[];
+    buttonColorOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
     tabsKindOptions: string[];
     buttonSizeOptions: string[];
     tableSearchOptions: string[];
@@ -213,7 +213,7 @@ export declare const components: {
                     readonly fieldType: "select";
                     readonly type: "static";
                     readonly onlyStatic: true;
-                    readonly selectOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light" | "none")[];
+                    readonly selectOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
                     readonly value: "blue";
                 };
                 readonly size: {
@@ -341,7 +341,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly value: "dark";
-                    readonly selectOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light" | "none")[];
+                    readonly selectOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
                 };
                 readonly size: {
                     readonly fieldType: "select";
@@ -438,7 +438,7 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly value: "dark";
-                    readonly selectOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light" | "none")[];
+                    readonly selectOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
                 };
                 readonly size: {
                     readonly fieldType: "select";
@@ -768,14 +768,34 @@ export declare const components: {
                     readonly type: "static";
                     readonly onlyStatic: true;
                     readonly selectOptions: string[];
-                    readonly value: "Disabled";
+                    readonly value: string;
                 };
-                readonly manualPagination: {
-                    readonly fieldType: "boolean";
-                    readonly type: "static";
-                    readonly onlyStatic: true;
-                    readonly value: false;
-                    readonly tooltip: "Pagination would not be handled by the component but by the script itself. Connect to the pagination output";
+                readonly pagination: {
+                    readonly type: "oneOf";
+                    readonly selected: "auto";
+                    readonly labels: {
+                        readonly auto: "Auto";
+                        readonly manual: "Manual";
+                    };
+                    readonly configuration: {
+                        readonly auto: {
+                            readonly pageSize: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: 20;
+                                readonly onlyStatic: true;
+                                readonly tooltip: "Number of rows per page";
+                            };
+                        };
+                        readonly manual: {
+                            readonly pageCount: {
+                                readonly type: "static";
+                                readonly fieldType: "number";
+                                readonly value: -1;
+                                readonly tooltip: "Number of pages (-1 if you do not know)";
+                            };
+                        };
+                    };
                 };
             };
             readonly componentInput: StaticAppInput;
@@ -803,13 +823,6 @@ export declare const components: {
                     readonly value: false;
                     readonly onlyStatic: true;
                 };
-                readonly pageSize: {
-                    readonly type: "static";
-                    readonly fieldType: "number";
-                    readonly value: 10;
-                    readonly onlyStatic: true;
-                    readonly tooltip: "Number of rows per page";
-                };
             };
             readonly componentInput: StaticAppInput;
         };
@@ -1499,7 +1512,7 @@ export declare const components: {
                     readonly fieldType: "select";
                     readonly type: "static";
                     readonly onlyStatic: true;
-                    readonly selectOptions: ("blue" | "gray" | "red" | "green" | "dark" | "light" | "none")[];
+                    readonly selectOptions: ("none" | "blue" | "gray" | "red" | "green" | "dark" | "light")[];
                     readonly value: "blue";
                 };
                 readonly size: {

package/components/apps/editor/component/components.js

@@ -76,6 +76,33 @@ const onSuccessClick = {
         }
     }
 };
+const paginationOneOf = {
+    type: 'oneOf',
+    selected: 'auto',
+    labels: {
+        auto: 'Auto',
+        manual: 'Manual'
+    },
+    configuration: {
+        auto: {
+            pageSize: {
+                type: 'static',
+                fieldType: 'number',
+                value: 20,
+                onlyStatic: true,
+                tooltip: 'Number of rows per page'
+            }
+        },
+        manual: {
+            pageCount: {
+                type: 'static',
+                fieldType: 'number',
+                value: -1,
+                tooltip: 'Number of pages (-1 if you do not know)'
+            }
+        }
+    }
+};
 export const components = {
     displaycomponent: {
         name: 'Rich Result',
@@ -593,13 +620,7 @@ Hello \${ctx.username}
                     selectOptions: selectOptions.tableSearchOptions,
                     value: 'Disabled'
                 },
-                manualPagination: {
-                    fieldType: 'boolean',
-                    type: 'static',
-                    onlyStatic: true,
-                    value: false,
-                    tooltip: 'Pagination would not be handled by the component but by the script itself. Connect to the pagination output'
-                }
+                pagination: paginationOneOf
             },
             componentInput: {
                 type: 'static',
@@ -646,13 +667,6 @@ Hello \${ctx.username}
                     fieldType: 'boolean',
                     value: false,
                     onlyStatic: true
-                },
-                pageSize: {
-                    type: 'static',
-                    fieldType: 'number',
-                    value: 10,
-                    onlyStatic: true,
-                    tooltip: 'Number of rows per page'
                 }
             },
             componentInput: {

package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -1,7 +1,7 @@
-<script>import { Forward, Paintbrush2 } from 'lucide-svelte';
-import { createEventDispatcher, getContext } from 'svelte';
+<script>import { Paintbrush2 } from 'lucide-svelte';
+import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
-import { addWhitespaceBeforeCapitals, sendUserToast } from '../../../../utils';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
 import { Button, ClearableInput } from '../../../common';
 import Popover from '../../../Popover.svelte';
 import QuickStyleMenu from './QuickStyleMenu.svelte';
@@ -10,7 +10,7 @@ export let value = {};
 export let forceStyle = false;
 export let forceClass = false;
 export let quickStyleProperties = undefined;
-const { app } = getContext('AppViewerContext');
+export let componentType = undefined;
 const dispatch = createEventDispatcher();
 let isQuickMenuOpen = false;
 $: dispatch('change', value);
@@ -20,12 +20,12 @@ function toggleQuickMenu() {
 </script>
 
 <div
-	class="sticky top-0 z-20 text-lg bg-white font-semibold [font-variant:small-caps] text-gray-700 pt-2 pb-1"
+	class="sticky top-0 z-20 text-lg bg-gray-100 font-semibold lowercase leading-none [font-variant:small-caps] text-gray-700 px-3 pb-1 mt-4 mb-1"
 >
 	{addWhitespaceBeforeCapitals(name)}
 </div>
 {#if value}
-	<div class="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
+	<div class="px-3">
 		{#if value.style !== undefined || forceStyle}
 			<div class="pb-2">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
@@ -48,7 +48,7 @@ function toggleQuickMenu() {
 										color="light"
 										size="xs"
 										btnClasses="!p-1 !w-[34px] !h-[34px] {isQuickMenuOpen
-											? '!bg-gray-200/60 hover:!bg-gray-200'
+											? '!bg-gray-200/60 hover:!bg-gray-200 focus:!bg-gray-200'
 											: ''}"
 										aria-label="{isQuickMenuOpen ? 'Close' : 'Open'} styling menu"
 										on:click={toggleQuickMenu}
@@ -65,7 +65,12 @@ function toggleQuickMenu() {
 				</label>
 				{#if quickStyleProperties?.length && isQuickMenuOpen}
 					<div transition:fade|local={{ duration: 200 }} class="w-full pt-1">
-						<QuickStyleMenu bind:value={value.style} properties={quickStyleProperties} />
+						<QuickStyleMenu
+							bind:value={value.style}
+							properties={quickStyleProperties}
+							{componentType}
+							componentProperty={name}
+						/>
 					</div>
 				{/if}
 			</div>

package/components/apps/editor/componentsPanel/CssProperty.svelte.d.ts

@@ -1,13 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { ComponentCssProperty } from '../../types';
-import type { StylePropertyKey } from './quickStyleProperties';
+import type { TypedComponent } from '../component';
+import type { PropertyGroup } from './quickStyleProperties';
 declare const __propDef: {
     props: {
         name: string;
         value?: ComponentCssProperty | undefined;
         forceStyle?: boolean | undefined;
         forceClass?: boolean | undefined;
-        quickStyleProperties?: StylePropertyKey[] | undefined;
+        quickStyleProperties?: PropertyGroup[] | undefined;
+        componentType?: TypedComponent['type'] | undefined;
     };
     events: {
         change: CustomEvent<any>;

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

@@ -1,21 +1,31 @@
 <script>import { slide } from 'svelte/transition';
 import { ChevronDown } from 'lucide-svelte';
 import { isOpenStore } from './store';
-import { createEventDispatcher } from 'svelte';
+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">
+<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"
+			rounded-sm duration-200 hover:bg-gray-100 {toggleClasses}"
 		>
 			<h1 class="text-sm font-semibold text-left">
 				<slot name="title">
@@ -25,7 +35,7 @@ $: dispatch('open', isOpen);
 			<ChevronDown class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
 		</button>
 		{#if isOpen}
-			<div transition:slide|local={{ duration: 300 }} class="px-2">
+			<div transition:slide|local={{ duration: 300 }} class="px-2 {contentWrapperClasses}">
 				<slot />
 			</div>
 		{/if}

package/components/apps/editor/componentsPanel/ListItem.svelte.d.ts

@@ -3,6 +3,11 @@ declare const __propDef: {
     props: {
         title: string;
         prefix?: string | undefined;
+        openByDefault?: boolean | undefined;
+        wrapperClasses?: string | undefined;
+        toggleClasses?: string | undefined;
+        contentWrapperClasses?: string | undefined;
+        isOpen?: boolean | undefined;
     };
     events: {
         open: CustomEvent<any>;

package/components/apps/editor/componentsPanel/QuickStyleMenu.svelte

@@ -3,13 +3,17 @@ import parse from 'style-to-object';
 import { isValidHexColor } from '../../../../utils';
 import { createStyleStore, StylePropertyType, StylePropertyUnits, STYLE_STORE_KEY } from './quickStyleProperties';
 import QuickStyleProperty from './QuickStyleProperty.svelte';
+import ListItem from './ListItem.svelte';
 export let value = '';
 export let properties;
+export let componentType = undefined;
+export let componentProperty = undefined;
 const { app } = getContext('AppViewerContext');
 const styleStore = createStyleStore(properties);
 setContext(STYLE_STORE_KEY, styleStore);
 let multiValues = initiateMultiValues();
 let mounted = false;
+let isOpen = {};
 $: mounted && $styleStore && writeStyle();
 $: mounted && (!value || value) && parseStyle();
 $: $app && setTopColors();
@@ -139,32 +143,69 @@ function setMultiValueProperty(index) {
     });
     $styleStore.style[index].value = values.join(' ').trim();
 }
+function formatKebabCase(text) {
+    text = text.toLowerCase().replace(/-/, ' ');
+    if (text.length) {
+        text = text[0].toUpperCase() + text.slice(1);
+    }
+    return text;
+}
 onMount(() => {
     parseStyle();
     mounted = true;
 });
 </script>
 
-<div class="bg-gray-200/60 rounded-md p-2">
-	{#each $styleStore.style as { prop }, index}
-		<div class="pb-3 last:pb-0">
-			<div class="text-sm font-medium text-gray-600 pb-0.5"> {prop.key} </div>
-			<div class="flex items-center gap-1 w-full">
-				{#if Array.isArray(prop.value)}
-					<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1">
-						{#each prop.value as value, i}
-							<QuickStyleProperty
-								prop={{ ...prop, value }}
-								inline
-								bind:value={multiValues[index][i]}
-								on:change={() => setMultiValueProperty(index)}
-							/>
-						{/each}
-					</div>
-				{:else}
-					<QuickStyleProperty {prop} bind:value={$styleStore.style[index].value} />
-				{/if}
-			</div>
-		</div>
+<div class="pb-2 pt-1">
+	{#each properties as property, i}
+		{#each Object.keys(property) as group, j}
+			{@const prefix = `${componentType}_${componentProperty}_${group}`}
+			<ListItem
+				bind:isOpen={isOpen[prefix]}
+				title={group}
+				{prefix}
+				openByDefault={true}
+				wrapperClasses="!px-0 !pt-0"
+				toggleClasses="border-b border-gray-300 !rounded-b-none !py-0
+				{isOpen[prefix] ? '!bg-gray-100 hover:!bg-gray-200' : ''}"
+			>
+				<svelte:fragment slot="title">
+					<span class="font-semibold text-gray-600 capitalize">
+						{group}
+					</span>
+				</svelte:fragment>
+				<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1 pt-3">
+					{#each property[group] as p}
+						{@const {
+							prop: { prop },
+							index
+						} = styleStore.getProp(p)}
+						{#if prop !== undefined && index !== undefined}
+							<div class="pb-2 pt-1">
+								<div class="text-sm font-medium text-gray-600 pb-0.5">
+									{formatKebabCase(prop.key)}
+								</div>
+								<div class="flex items-center gap-1">
+									{#if Array.isArray(prop.value)}
+										<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1">
+											{#each prop.value as value, i}
+												<QuickStyleProperty
+													prop={{ ...prop, value }}
+													inline
+													bind:value={multiValues[index][i]}
+													on:change={() => setMultiValueProperty(index)}
+												/>
+											{/each}
+										</div>
+									{:else}
+										<QuickStyleProperty {prop} inline bind:value={$styleStore.style[index].value} />
+									{/if}
+								</div>
+							</div>
+						{/if}
+					{/each}
+				</div>
+			</ListItem>
+		{/each}
 	{/each}
 </div>

package/components/apps/editor/componentsPanel/QuickStyleMenu.svelte.d.ts

@@ -1,9 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-import { type StylePropertyKey } from './quickStyleProperties';
+import { type PropertyGroup } from './quickStyleProperties';
+import type { TypedComponent } from '../component';
 declare const __propDef: {
     props: {
         value?: string | undefined;
-        properties: StylePropertyKey[];
+        properties: PropertyGroup[];
+        componentType?: TypedComponent['type'] | undefined;
+        componentProperty?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/editor/componentsPanel/QuickStyleProperty.svelte

@@ -49,6 +49,7 @@ function updateUnit(next) {
 		{:else if type === StylePropertyType.number}
 			<ClearableInput
 				type="number"
+				inputClass={inline ? '!w-[90px]' : ''}
 				bind:value
 				step={prop.value?.['step'] || 1}
 				min={prop.value?.['min']}