windmill-components 1.448.50 → 1.472.2

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

@@ -1,6 +1,6 @@
 import { BUTTON_COLORS } from '../../../common';
 import { defaultAlignement } from '../componentsPanel/componentDefaultProps';
-import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw } from 'lucide-svelte';
+import { BarChart4, Binary, FormInput, Inspect, List, Monitor, PieChart, Table2, TextCursorInput, Type, Lock, Calendar, ToggleLeft, GripHorizontal, Code2, SlidersHorizontal, PlusSquare, ListOrdered, BoxSelect, Smile, DollarSign, SeparatorHorizontal, SeparatorVertical, Paperclip, Image, SidebarClose, MapPin, FlipHorizontal, FlipVertical, FileText, AtSignIcon, Split, Download, PanelLeft, PanelTopInactive, ListIcon, Heading1, FileBarChart, Menu, Network, Database, UploadCloud, AlertTriangle, Clock, CalendarClock, AppWindow, PanelTop, RefreshCw, ListCollapse, GalleryThumbnails } from 'lucide-svelte';
 export function getRecommendedDimensionsByComponent(componentType, column) {
     return processDimension(components[componentType].dims, column);
 }
@@ -14,8 +14,8 @@ export function processDimension(dimension, column) {
 const buttonColorOptions = [...BUTTON_COLORS];
 export const selectOptions = {
     buttonColorOptions,
-    tabsKindOptions: ['tabs', 'sidebar', 'invisibleOnView'],
-    buttonSizeOptions: ['xs', 'sm', 'md', 'lg', 'xl'],
+    tabsKindOptions: ['tabs', 'sidebar', 'accordion', 'invisibleOnView'],
+    buttonSizeOptions: ['xs2', 'xs', 'sm', 'md', 'lg', 'xl'],
     tableSearchOptions: ['By Component', 'By Runnable', 'Disabled'],
     chartThemeOptions: ['theme1', 'theme2', 'theme3'],
     textStyleOptions: ['Title', 'Subtitle', 'Body', 'Label', 'Caption'],
@@ -2341,7 +2341,7 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
     },
     carousellistcomponent: {
         name: 'Carousel List',
-        icon: ListIcon,
+        icon: GalleryThumbnails,
         documentationLink: `${documentationBaseUrl}/carousel`,
         dims: '3:8-12:8',
         customCss: {
@@ -2366,6 +2366,25 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
             numberOfSubgrids: 1
         }
     },
+    accordionlistcomponent: {
+        name: 'Accordion List',
+        icon: ListCollapse,
+        documentationLink: `${documentationBaseUrl}/accordion`,
+        dims: '3:8-12:8',
+        customCss: {
+            container: { class: '', style: '' }
+        },
+        initialData: {
+            configuration: {},
+            componentInput: {
+                type: 'static',
+                fieldType: 'array',
+                subFieldType: 'object',
+                value: [{ header: 'First', foo: 1 }, { header: 'Second', foo: 2 }, { header: 'Third', foo: 3 }]
+            },
+            numberOfSubgrids: 1
+        }
+    },
     iconcomponent: {
         name: 'Icon',
         icon: Smile,
@@ -3126,6 +3145,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
                                 fieldType: 'boolean',
                                 tooltip: 'If allowed, the user will be able to select more than one file'
                             },
+                            allowDelete: {
+                                type: 'static',
+                                value: false,
+                                fieldType: 'boolean',
+                                tooltip: 'If allowed, the user will be able to delete files'
+                            },
                             text: {
                                 type: 'static',
                                 value: 'Drag and drop files or click to select them',
@@ -3587,7 +3612,22 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
         initialData: {
             ...defaultAlignement,
             componentInput: undefined,
-            configuration: {},
+            configuration: {
+                defaultRefreshInterval: {
+                    fieldType: 'select',
+                    type: 'static',
+                    selectOptions: [
+                        { value: '0', label: 'Once' },
+                        { value: '5', label: 'Every 5 seconds' },
+                        { value: '10', label: 'Every 10 seconds' },
+                        { value: '15', label: 'Every 15 seconds' },
+                        { value: '20', label: 'Every 20 seconds' },
+                        { value: '25', label: 'Every 25 seconds' },
+                        { value: '30', label: 'Every 30 seconds' }
+                    ],
+                    value: '0'
+                }
+            },
             menuItems: true
         }
     }
@@ -3596,6 +3636,7 @@ export const presetComponents = {
     sidebartabscomponent: {
         name: 'Sidebar Tabs',
         icon: PanelLeft,
+        dims: '3:8-12:8',
         targetComponent: 'tabscomponent',
         configuration: {
             tabsKind: {
@@ -3604,9 +3645,22 @@ export const presetComponents = {
         },
         type: 'sidebartabscomponent'
     },
+    accordiontabcomponent: {
+        name: 'Accordion Tabs',
+        icon: ListCollapse,
+        dims: '3:8-12:8',
+        targetComponent: 'tabscomponent',
+        configuration: {
+            tabsKind: {
+                value: 'accordion'
+            }
+        },
+        type: 'accordiontabcomponent'
+    },
     invisibletabscomponent: {
         name: 'Invisible Tabs',
         icon: PanelTopInactive,
+        dims: '3:8-12:8',
         targetComponent: 'tabscomponent',
         configuration: {
             tabsKind: {

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

@@ -1,7 +1,7 @@
 const tabs = {
     title: 'Tabs',
     components: ['tabscomponent', 'conditionalwrapper'],
-    presets: ['sidebartabscomponent', 'invisibletabscomponent']
+    presets: ['sidebartabscomponent', 'accordiontabcomponent', 'invisibletabscomponent']
 };
 const layout = {
     title: 'Layout',
@@ -16,6 +16,7 @@ const layout = {
         'modalcomponent',
         'steppercomponent',
         'carousellistcomponent',
+        'accordionlistcomponent',
         'decisiontreecomponent',
         'navbarcomponent',
         'recomputeallcomponent'

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

@@ -115,27 +115,31 @@ let render = 0;
 								{/if}
 								{#if quickStyleProperties?.length}
 									<ToggleButtonGroup
-										bind:selected={richEditorOpen}
-										on:selected={() => {
+										selected={richEditorOpen ? 'true' : 'false'}
+										on:selected={({ detail }) => {
+											richEditorOpen = detail === 'true'
 											if (richEditorOpen !== isQuickMenuOpen) {
 												toggleQuickMenu()
 												richEditorOpen = isQuickMenuOpen
 											}
 										}}
+										let:item
 									>
 										<ToggleButton
 											small
 											light
-											value={false}
+											value={'false'}
 											icon={Code}
 											tooltip="Edit the CSS directly"
+											{item}
 										/>
 										<ToggleButton
 											small
 											light
-											value={true}
+											value={'true'}
 											icon={Paintbrush2}
 											tooltip="Open the rich editor to style the component with a visual interface"
+											{item}
 										/>
 									</ToggleButtonGroup>
 								{/if}

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

@@ -2,12 +2,9 @@
 import Cell from '../../../table/Cell.svelte';
 import { Trash } from 'lucide-svelte';
 import { sendUserToast } from '../../../../toast';
-import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
 import NameEditor from './NameEditor.svelte';
-import ButtonDropdown from '../../../common/button/ButtonDropdown.svelte';
-import { classNames } from '../../../../utils';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import Dropdown from '../../../DropdownV2.svelte';
 import { ResourceService } from '../../../../gen';
 export let row;
 const dispatch = createEventDispatcher();
@@ -42,6 +39,16 @@ async function updateName(name) {
     dispatch('reload');
     sendUserToast('Component name updated:\n' + name);
 }
+function getItems() {
+    return [
+        {
+            action: toggleDelete,
+            icon: Trash,
+            displayName: 'Delete',
+            type: 'delete'
+        }
+    ];
+}
 </script>
 
 <tr>
@@ -59,23 +66,6 @@ async function updateName(name) {
 	</Cell>
 
 	<Cell last>
-		<div class={twMerge('flex flex-row gap-1 justify-end  z-[10000]')}>
-			<button on:pointerdown|stopPropagation>
-				<ButtonDropdown target="#cc_portal" hasPadding={false}>
-					<svelte:fragment slot="items">
-						<MenuItem on:click={toggleDelete}>
-							<div
-								class={classNames(
-									'!text-red-600 flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-								)}
-							>
-								<Trash size={16} />
-								Delete
-							</div>
-						</MenuItem>
-					</svelte:fragment>
-				</ButtonDropdown>
-			</button>
-		</div>
+		<Dropdown items={getItems()} />
 	</Cell>
 </tr>

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         };
     };
     events: {
-        pointerdown: PointerEvent;
         reload: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -55,8 +55,6 @@ let useReact = true;
 getCustomComponents();
 </script>
 
-<div id="cc_portal" />
-
 <div class="p-2 flex flex-col items-start w-auto gap-2 relative">
 	<div class="w-full flex flex-col gap-y-2 pb-8">
 		<div>

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

@@ -1,14 +1,11 @@
 <script>import { deleteGroup, getGroup, updateGroup } from './groupUtils';
 import { workspaceStore } from '../../../../stores';
 import Cell from '../../../table/Cell.svelte';
+import Dropdown from '../../../DropdownV2.svelte';
 import { Trash } from 'lucide-svelte';
 import { sendUserToast } from '../../../../toast';
-import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
 import GroupNameEditor from './NameEditor.svelte';
-import ButtonDropdown from '../../../common/button/ButtonDropdown.svelte';
-import { classNames } from '../../../../utils';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
 export let row;
 const dispatch = createEventDispatcher();
 async function toggleDelete() {
@@ -18,6 +15,16 @@ async function toggleDelete() {
     dispatch('reloadGroups');
     sendUserToast('Group deleted:\n' + row.name);
 }
+function getItems() {
+    return [
+        {
+            action: toggleDelete,
+            icon: Trash,
+            displayName: 'Delete',
+            type: 'delete'
+        }
+    ];
+}
 </script>
 
 <tr>
@@ -45,23 +52,6 @@ async function toggleDelete() {
 	</Cell>
 
 	<Cell last>
-		<div class={twMerge('flex flex-row gap-1 justify-end  z-[10000]')}>
-			<button on:pointerdown|stopPropagation>
-				<ButtonDropdown target="#group_portal" hasPadding={false}>
-					<svelte:fragment slot="items">
-						<MenuItem on:click={toggleDelete}>
-							<div
-								class={classNames(
-									'!text-red-600 flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-								)}
-							>
-								<Trash size={16} />
-								Delete
-							</div>
-						</MenuItem>
-					</svelte:fragment>
-				</ButtonDropdown>
-			</button>
-		</div>
+		<Dropdown items={getItems()} />
 	</Cell>
 </tr>

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         };
     };
     events: {
-        pointerdown: PointerEvent;
         reloadGroups: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -1,5 +1,5 @@
 <script>import Button from '../../../common/button/Button.svelte';
-import { Popup } from '../../../common';
+import Popover from '../../../meltComponents/Popover.svelte';
 import { Pen } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 export let kind;
@@ -13,29 +13,30 @@ function onkeydown(e) {
 }
 </script>
 
-<Popup
-	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-	let:close
->
-	<svelte:fragment slot="button">
+<Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
+	<svelte:fragment slot="trigger">
 		<Button color="light" size="xs2" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center">
 				<Pen size={16} />
 			</div>
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-80 gap-2">
-		<div class="leading-6 font-semibold text-xs">Edit {kind} name</div>
-		<div class="flex flex-row gap-2">
-			<input on:keydown={onkeydown} bind:value={editedName} />
-			<Button
-				color="dark"
-				size="xs"
-				on:click={() => dispatch('update', { path: row.path, name: editedName }) && close(null)}
-			>
-				Update
-			</Button>
+	<svelte:fragment slot="content" let:close>
+		<div class="flex flex-col w-80 gap-2 p-4">
+			<div class="leading-6 font-semibold text-xs">Edit {kind} name</div>
+			<div class="flex flex-row gap-2">
+				<input on:keydown={onkeydown} bind:value={editedName} />
+				<Button
+					color="dark"
+					size="xs"
+					on:click={() => {
+						dispatch('update', { path: row.path, name: editedName })
+						close()
+					}}
+				>
+					Update
+				</Button>
+			</div>
 		</div>
-	</div>
-</Popup>
+	</svelte:fragment>
+</Popover>

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

@@ -1,7 +1,7 @@
 <script>import { updateTheme } from './themeUtils';
 import { workspaceStore } from '../../../../stores';
 import Button from '../../../common/button/Button.svelte';
-import { Popup } from '../../../common';
+import Popover from '../../../meltComponents/Popover.svelte';
 import { Pen } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import { sendUserToast } from '../../../../toast';
@@ -10,19 +10,19 @@ let editedName = row.name;
 const dispatch = createEventDispatcher();
 </script>
 
-<Popup
+<Popover
 	floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-	containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-	let:close
+	closeOnOtherPopoverOpen
+	contentClasses="flex flex-col w-80 gap-2 p-4"
 >
-	<svelte:fragment slot="button">
+	<svelte:fragment slot="trigger">
 		<Button color="light" size="xs2" nonCaptureEvent={true}>
 			<div class="flex flex-row gap-1 items-center">
 				<Pen size={16} />
 			</div>
 		</Button>
 	</svelte:fragment>
-	<div class="flex flex-col w-80 gap-2">
+	<svelte:fragment slot="content" let:close>
 		<div class="leading-6 font-semibold text-xs">Edit theme name</div>
 		<div class="flex flex-row gap-2">
 			<input bind:value={editedName} />
@@ -38,12 +38,12 @@ const dispatch = createEventDispatcher();
 						}
 					})
 					dispatch('reloadThemes')
-					close(null)
+					close()
 					sendUserToast('Theme name updated:\n' + editedName)
 				}}
 			>
 				Update
 			</Button>
 		</div>
-	</div>
-</Popup>
+	</svelte:fragment>
+</Popover>

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

@@ -10,9 +10,7 @@ import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
 import ThemeNameEditor from './ThemeNameEditor.svelte';
 import ThemeDrawer from './ThemeDrawer.svelte';
-import ButtonDropdown from '../../../common/button/ButtonDropdown.svelte';
-import { classNames } from '../../../../utils';
-import { MenuItem } from '@rgossiaux/svelte-headlessui';
+import Dropdown from '../../../DropdownV2.svelte';
 export let previewThemePath = undefined;
 export let row;
 const { previewTheme, app } = getContext('AppViewerContext');
@@ -101,6 +99,36 @@ function apply() {
         path: row.path ?? ''
     };
 }
+async function getDropdownItems() {
+    return [
+        {
+            action: () => themeDrawer?.openDrawer(),
+            icon: Code,
+            displayName: 'View code',
+            type: 'action'
+        },
+        {
+            action: () => fork(row.path),
+            icon: GitBranch,
+            displayName: 'Fork',
+            type: 'action'
+        },
+        {
+            action: () => makeDefaultTheme(row.path),
+            icon: Pin,
+            displayName: 'Make default',
+            type: 'action',
+            disabled: row.path === DEFAULT_THEME
+        },
+        {
+            action: toggleDelete,
+            icon: Trash,
+            displayName: 'Delete',
+            type: 'delete',
+            disabled: row.path === DEFAULT_THEME
+        }
+    ];
+}
 let themeDrawer;
 </script>
 
@@ -139,55 +167,7 @@ let themeDrawer;
 				<Button color="dark" size="xs2" on:click={apply}>Apply</Button>
 			{/if}
 
-			<button on:pointerdown|stopPropagation>
-				<ButtonDropdown hasPadding={false}>
-					<svelte:fragment slot="items">
-						<MenuItem on:click={() => themeDrawer?.openDrawer()}>
-							<div
-								class={classNames(
-									'!text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-								)}
-							>
-								<Code size={16} />
-								View code
-							</div>
-						</MenuItem>
-						<MenuItem on:click={() => fork(row.path)}>
-							<div
-								class={classNames(
-									'!text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-								)}
-							>
-								<GitBranch size={16} />
-								Fork
-							</div>
-						</MenuItem>
-						{#if row.path !== DEFAULT_THEME}
-							<MenuItem on:click={() => makeDefaultTheme(row.path)}>
-								<div
-									class={classNames(
-										'!text-primary flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-									)}
-								>
-									<Pin size={16} />
-									Make default
-								</div>
-							</MenuItem>
-
-							<MenuItem on:click={toggleDelete}>
-								<div
-									class={classNames(
-										'!text-red-600 flex flex-row items-center text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
-									)}
-								>
-									<Trash size={16} />
-									Delete
-								</div>
-							</MenuItem>
-						{/if}
-					</svelte:fragment>
-				</ButtonDropdown>
-			</button>
+			<Dropdown items={getDropdownItems} class="w-fit" />
 		</div>
 	</Cell>
 </tr>

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

@@ -9,7 +9,6 @@ declare const __propDef: {
     };
     events: {
         reloadThemes: CustomEvent<any>;
-        pointerdown: PointerEvent;
         setCodeTab: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

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

@@ -268,6 +268,13 @@ export const customisationByComponent = [
         ],
         variables: []
     },
+    {
+        components: ['accordionlistcomponent'],
+        selectors: [
+            { selector: '.wm-accordion', comment: 'Accordion component', customCssKey: 'container' }
+        ],
+        variables: []
+    },
     {
         components: ['formcomponent'],
         selectors: [

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

@@ -562,6 +562,9 @@ export const quickStyleProperties = {
         header: [...containerDefaultProps, typographyGrouping],
         container: containerDefaultProps
     },
+    accordionlistcomponent: {
+        container: containerDefaultProps
+    },
     carousellistcomponent: {
         container: containerDefaultProps
     },

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

@@ -0,0 +1,46 @@
+<script>import { getContext } from 'svelte';
+import Alert from '../../../common/alert/Alert.svelte';
+import Toggle from '../../../Toggle.svelte';
+import JsonEditor from '../../../JsonEditor.svelte';
+import Section from '../../../Section.svelte';
+const { app } = getContext('AppViewerContext');
+let code = JSON.stringify($app.lazyInitRequire);
+</script>
+
+<div class="flex flex-col gap-8" style="all:none;">
+	<Alert type="info" title="Lazy mode for large apps performance">
+		Lazy mode is a feature that allows you to lazy render components which is ideal for apps with
+		many components where most are not directly visible to the user.
+		<br />
+		When lazy mode is enabled, components are not rendered until they are needed. This can significantly
+		improve the performance of your app, especially on mobile devices.
+		<br />
+		You can enable lazy mode below, but you will need to declare the list of components whose initialization
+		is expected to see initialized before the initial refresh of the app happens.
+	</Alert>
+
+	<Toggle
+		label="Lazy mode"
+		checked={Boolean($app.lazyInitRequire != undefined)}
+		on:change={(e) => {
+			$app.lazyInitRequire = e.detail ? [] : undefined
+			code = JSON.stringify($app.lazyInitRequire)
+		}}
+		options={{
+			right: 'Lazy mode'
+		}}
+	/>
+
+	<Section label="Component ids to wait the initialization of before the initial refresh">
+		{#if $app.lazyInitRequire != undefined}
+			<JsonEditor bind:value={$app.lazyInitRequire} {code} />
+			<span class="text-tertiary text-xs">
+				{'e.g: ["a", "b"]'}, no need to put background runnables ids
+			</span>
+		{:else}
+			<span class="text-tertiary"
+				>Without lazy mode, all components' initialization will be waited on the initial refresh.</span
+			>
+		{/if}
+	</Section>
+</div>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LazyModePanelProps = typeof __propDef.props;
+export type LazyModePanelEvents = typeof __propDef.events;
+export type LazyModePanelSlots = typeof __propDef.slots;
+export default class LazyModePanel extends SvelteComponent<LazyModePanelProps, LazyModePanelEvents, LazyModePanelSlots> {
+}
+export {};