windmill-components 1.472.1 → 1.472.3

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { GridItem } from '../../types';
+declare const __propDef: {
+    props: {
+        item: GridItem;
+        ownId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EventHandlersProps = typeof __propDef.props;
+export type EventHandlersEvents = typeof __propDef.events;
+export type EventHandlersSlots = typeof __propDef.slots;
+export default class EventHandlers extends SvelteComponent<EventHandlersProps, EventHandlersEvents, EventHandlersSlots> {
+}
+export {};

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

@@ -0,0 +1,13 @@
+<script>export let license;
+let initial = license;
+</script>
+
+<div class="p-2">
+	<span class="text-xs font-semibold">AgCharts EE License Key</span>
+	<input type="text" bind:value={license} placeholder="AgCharts Enterprise" />
+	{#if initial != license}
+		<div class="text-yellow-500 text-xs"
+			>Please reload the page to see the effect of the new license key</div
+		>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        license: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridAgChartsLicenseKeProps = typeof __propDef.props;
+export type GridAgChartsLicenseKeEvents = typeof __propDef.events;
+export type GridAgChartsLicenseKeSlots = typeof __propDef.slots;
+export default class GridAgChartsLicenseKe extends SvelteComponent<GridAgChartsLicenseKeProps, GridAgChartsLicenseKeEvents, GridAgChartsLicenseKeSlots> {
+}
+export {};

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

@@ -0,0 +1,26 @@
+<script>import Badge from '../../../common/badge/Badge.svelte';
+export let license;
+let valid = false;
+$: license && checkLicenseKey(license);
+async function checkLicenseKey(key) {
+    try {
+        const { LicenseManager } = await import('ag-grid-enterprise');
+        let details = LicenseManager.getLicenseDetails(key);
+        valid = details.valid;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+</script>
+
+<div class="p-2">
+	<span class="text-xs font-semibold">AgGrid EE License Key</span>
+	<input type="text" bind:value={license} placeholder="AgGrid Enterprise" />
+
+	{#if valid}
+		<Badge color="green">Valid</Badge>
+	{:else}
+		<Badge color="red">Invalid</Badge>
+	{/if}
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        license: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridAgGridLicenseKeyProps = typeof __propDef.props;
+export type GridAgGridLicenseKeyEvents = typeof __propDef.events;
+export type GridAgGridLicenseKeySlots = typeof __propDef.slots;
+export default class GridAgGridLicenseKey extends SvelteComponent<GridAgGridLicenseKeyProps, GridAgGridLicenseKeyEvents, GridAgGridLicenseKeySlots> {
+}
+export {};

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

@@ -0,0 +1,176 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import PanelSection from './common/PanelSection.svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { GripVertical, Plus, X } from 'lucide-svelte';
+import InputsSpecEditor from './InputsSpecEditor.svelte';
+import { generateRandomString } from '../../../../utils';
+import Alert from '../../../common/alert/Alert.svelte';
+import { twMerge } from 'tailwind-merge';
+import { getContext, tick } from 'svelte';
+import { deleteGridItem } from '../appUtils';
+export let conditions = [];
+export let component;
+let items = conditions.slice(0, -1).map((condition, index) => {
+    return { value: condition, id: generateRandomString(), originalIndex: index };
+});
+$: conditions = items
+    .map((item) => item.value)
+    .concat([
+    {
+        type: 'evalv2',
+        expr: 'true',
+        fieldType: 'boolean',
+        connections: []
+    }
+]);
+const { app, runnableComponents, componentControl } = getContext('AppViewerContext');
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+    // if the originalIndex are not in order, we should swap the subgrids
+    if (items.some((item, index) => item.originalIndex !== index)) {
+        const newSubgrids = {};
+        for (let i = 0; i < items.length; i++) {
+            newSubgrids[`${component.id}-${i}`] =
+                $app.subgrids[`${component.id}-${items[i].originalIndex}`] ?? [];
+        }
+        // update originalIndex
+        items.forEach((item, i) => {
+            item.originalIndex = i;
+        });
+        $app.subgrids = {
+            ...$app.subgrids,
+            ...newSubgrids
+        };
+        $app = $app;
+        tick().then(() => {
+            const targetIndex = items.findIndex((i) => i.id === e.detail.info.id);
+            $componentControl[component.id]?.setTab?.(targetIndex);
+        });
+    }
+}
+function deleteSubgrid(index) {
+    let subgrid = `${component.id}-${index}`;
+    for (const item of $app.subgrids[subgrid]) {
+        const components = deleteGridItem($app, item.data, subgrid);
+        for (const key in components) {
+            delete $runnableComponents[key];
+        }
+    }
+    $runnableComponents = $runnableComponents;
+    for (let i = index; i < items.length; i++) {
+        $app.subgrids[`${component.id}-${i}`] = $app.subgrids[`${component.id}-${i + 1}`];
+    }
+    // Remove the corresponding item from the items array
+    const nitems = items.filter((item) => item.originalIndex !== index);
+    component.numberOfSubgrids = nitems.length + 1;
+    // Update the originalIndex of the remaining items
+    nitems.forEach((item, i) => {
+        item.originalIndex = i;
+    });
+    items = nitems;
+    delete $app.subgrids[`${component.id}-${items.length + 1}`];
+    $app = $app;
+}
+function addCondition() {
+    const numberOfConditions = conditions.length;
+    if (!$app.subgrids) {
+        $app.subgrids = {};
+    }
+    $app.subgrids[`${component.id}-${numberOfConditions}`] =
+        $app.subgrids[`${component.id}-${numberOfConditions - 1}`];
+    $app.subgrids[`${component.id}-${numberOfConditions - 1}`] = [];
+    const newCondition = {
+        type: 'evalv2',
+        expr: 'false',
+        fieldType: 'boolean',
+        connections: []
+    };
+    items.splice(conditions.length - 1, 0, {
+        value: newCondition,
+        id: generateRandomString(),
+        originalIndex: items.length
+    });
+    component.numberOfSubgrids = items.length + 1;
+}
+</script>
+
+<PanelSection title={'Conditions'}>
+	<Alert title="Evaluation" size="xs">
+		Conditions are evaluated in order. The first condition that evaluates to true will render its
+		subgrid.
+	</Alert>
+	{#if items.length == 0}
+		<span class="text-xs text-tertiary">No Tabs</span>
+	{/if}
+	<div class="w-full flex flex-col mt-2">
+		<section
+			use:dragHandleZone={{
+				items: items,
+				flipDurationMs: 200,
+				dropTargetStyle: {}
+			}}
+			on:consider={handleConsider}
+			on:finalize={handleFinalize}
+		>
+			{#each items as item, index (item.id)}
+				{@const condition = item.value}
+				<div class="w-full flex flex-row gap-2 items-center relative">
+					<div class={twMerge('grow border p-3 my-2 rounded-md bg-surface relative')}>
+						<InputsSpecEditor
+							key={`condition${index + 1}`}
+							bind:componentInput={item.value}
+							id={component.id}
+							userInputEnabled={false}
+							shouldCapitalize={true}
+							resourceOnly={false}
+							fieldType={condition?.['fieldType']}
+							subFieldType={condition?.['subFieldType']}
+							format={condition?.['format']}
+							selectOptions={condition?.['selectOptions']}
+							tooltip={condition?.['tooltip']}
+							fileUpload={condition?.['fileUpload']}
+							placeholder={condition?.['placeholder']}
+							customTitle={condition?.['customTitle']}
+							displayType={false}
+						/>
+					</div>
+
+					<div class="flex flex-col justify-center gap-2">
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div on:click={() => deleteSubgrid(index)}>
+							<X size={16} />
+						</div>
+
+						<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div use:dragHandle class="w-4 h-4 handle" aria-label="drag-handle">
+							<GripVertical size={16} />
+						</div>
+					</div>
+				</div>
+			{/each}
+		</section>
+		<div class="border rounded-md p-3 mb-2">
+			<div class="flex">
+				<span class="font-bold text-xs">Default</span>
+			</div>
+			<Alert title="Default" size="xs">
+				The default container is rendered if no other conditions evaluate to true.
+			</Alert>
+		</div>
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: Plus }}
+			on:click={addCondition}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { RichConfiguration } from '../../types';
+import type { AppComponent } from '../component';
+declare const __propDef: {
+    props: {
+        conditions?: RichConfiguration[] | undefined;
+        component: AppComponent;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridConditionProps = typeof __propDef.props;
+export type GridConditionEvents = typeof __propDef.events;
+export type GridConditionSlots = typeof __propDef.slots;
+export default class GridCondition extends SvelteComponent<GridConditionProps, GridConditionEvents, GridConditionSlots> {
+}
+export {};

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

@@ -0,0 +1,124 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import PanelSection from './common/PanelSection.svelte';
+import Toggle from '../../../Toggle.svelte';
+import InputsSpecsEditor from './InputsSpecsEditor.svelte';
+import GroupManagementDrawer from '../componentsPanel/GroupManagementDrawer.svelte';
+import { Plus } from 'lucide-svelte';
+import { Alert } from '../../../common';
+export let groupFields;
+export let item;
+let groupManagementDrawer = undefined;
+// const { app, runnableComponents } = getContext<AppViewerContext>('AppViewerContext')
+let fieldName = '';
+function addField(name) {
+    if (name == '')
+        return;
+    groupFields = {
+        ...(groupFields ?? {}),
+        [name]: {
+            type: 'static',
+            value: '',
+            fieldType: 'object'
+        }
+    };
+}
+</script>
+
+<div class="flex p-2 gap-1 items-center">
+	<Toggle
+		size="xs"
+		checked={groupFields != undefined}
+		on:change={(e) => {
+			if (e.detail) {
+				groupFields = {}
+			} else {
+				groupFields = undefined
+			}
+			console.log(groupFields)
+		}}
+		options={{
+			right: 'container is a component group',
+			rightTooltip: `Group fields allow inner components to depend on the group fields which make the container a
+		group of component that is encapsulated. Inside the group, it is possible to retrieve the values
+		using \`group.x\` where x is the group field name.
+
+		Group fields are mutable by frontend scripts, so  \`group.x = 42\` can be used to set the value inside the group and
+			 \`a.group.x = 42\` outside of it.`
+		}}
+	/>
+</div>
+{#if groupFields != undefined}
+	<div class="p-2">
+		<Button
+			on:click={() => {
+				groupManagementDrawer?.openDrawer()
+			}}
+			size="xs"
+			color="light"
+		>
+			Save group to workspace
+		</Button>
+	</div>
+	<PanelSection
+		title={`Group Fields ${
+			Object.keys(groupFields ?? {}).length > 0
+				? `(${Object.keys(groupFields ?? {}).length ?? 0})`
+				: ''
+		}`}
+	>
+		{#if Object.keys(groupFields ?? {}).length == 0}
+			<span class="text-xs text-tertiary">No group fields</span>
+		{/if}
+		<div class="w-full flex gap-2 flex-col mt-2">
+			<InputsSpecsEditor
+				on:delete={(e) => {
+					if (!groupFields) {
+						return
+					}
+					delete groupFields[e.detail]
+					groupFields = groupFields
+				}}
+				id={item.id}
+				shouldCapitalize={false}
+				displayType
+				deletable
+				bind:inputSpecs={groupFields}
+			/>
+			<div class="flex flex-row gap-2 items-center relative">
+				<input
+					type="text"
+					on:keydown|stopPropagation={(event) => {
+						switch (event.key) {
+							case 'Enter':
+								event.preventDefault()
+								addField(fieldName)
+								break
+						}
+					}}
+					placeholder="Group Field Name"
+					bind:value={fieldName}
+				/>
+
+				<Button
+					disabled={fieldName == ''}
+					size="sm"
+					color="light"
+					variant="border"
+					startIcon={{ icon: Plus }}
+					on:click={() => addField(fieldName)}
+					iconOnly
+				/>
+			</div>
+		</div>
+
+		<div class="mt-2" />
+		<Alert size="xs" title="Group fields are mutable" type="info">
+			You may set the value of a group field in a frontend script within the group using: <code
+				>group.x = 42</code
+			>
+			and externally using <code>{item.id}.group.x = 42</code>
+		</Alert>
+	</PanelSection>
+{/if}
+
+<GroupManagementDrawer bind:this={groupManagementDrawer} {item} />

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { GridItem, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        groupFields: RichConfigurations | undefined;
+        item: GridItem;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridGroupProps = typeof __propDef.props;
+export type GridGroupEvents = typeof __propDef.events;
+export type GridGroupSlots = typeof __propDef.slots;
+export default class GridGroup extends SvelteComponent<GridGroupProps, GridGroupEvents, GridGroupSlots> {
+}
+export {};

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

@@ -0,0 +1,192 @@
+<script>import Button from '../../../common/button/Button.svelte';
+import CloseButton from '../../../common/CloseButton.svelte';
+import PanelSection from './common/PanelSection.svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { generateRandomString } from '../../../../utils';
+import { GripVertical, Plus, Settings } from 'lucide-svelte';
+import NavbarWizard from '../../../wizards/NavbarWizard.svelte';
+import Badge from '../../../common/badge/Badge.svelte';
+import ResolveConfig from '../../components/helpers/ResolveConfig.svelte';
+import { getContext } from 'svelte';
+import Tooltip from '../../../Tooltip.svelte';
+import ResolveNavbarItemPath from '../../components/display/ResolveNavbarItemPath.svelte';
+export let navbarItems = [];
+export let id;
+const { appPath } = getContext('AppViewerContext');
+let items = navbarItems.map((tab, index) => {
+    return { value: tab, id: generateRandomString(), originalIndex: index };
+});
+$: navbarItems = items.map((item) => item.value);
+function addPath() {
+    const emptyAppPath = {
+        disabled: {
+            type: 'static',
+            value: false,
+            fieldType: 'boolean'
+        },
+        label: {
+            type: 'static',
+            value: undefined,
+            fieldType: 'text'
+        },
+        path: {
+            type: 'oneOf',
+            selected: 'app',
+            labels: {
+                href: 'Navigate to an external URL',
+                app: 'Navigate to an app'
+            },
+            configuration: {
+                href: {
+                    href: {
+                        type: 'static',
+                        value: undefined,
+                        fieldType: 'text',
+                        tooltip: "The URL to navigate to when the item is clicked. Will be opened in a new tab. If you want to navigate to an other app, use the 'App' option."
+                    }
+                },
+                app: {
+                    path: {
+                        type: 'static',
+                        value: '',
+                        fieldType: 'app-path',
+                        allowTypeChange: false,
+                        tooltip: 'The app to navigate to when the item is clicked. Will be opened in the same tab. If you want to navigate to an external URL, use the "Href" option.'
+                    },
+                    queryParamsOrHash: {
+                        type: 'static',
+                        value: undefined,
+                        fieldType: 'text',
+                        tooltip: 'Query parameters or hash to append to the URL. For example, `?key=value` or `#hash`.',
+                        placeholder: '?key=value#hash'
+                    }
+                }
+            }
+        },
+        hidden: {
+            type: 'static',
+            value: false,
+            fieldType: 'boolean'
+        }
+    };
+    items = [
+        ...items,
+        {
+            value: emptyAppPath,
+            id: generateRandomString(),
+            originalIndex: items.length
+        }
+    ];
+}
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+let resolvedPaths = [];
+let resolvedLabels = [];
+</script>
+
+<PanelSection
+	title={`Items ${navbarItems && navbarItems.length > 0 ? `(${navbarItems.length})` : ''}`}
+>
+	{#if !navbarItems || navbarItems.length == 0}
+		<span class="text-xs text-tertiary">No items</span>
+	{/if}
+	<div class="w-full flex gap-2 flex-col mt-2">
+		<section
+			use:dragHandleZone={{
+				items,
+				flipDurationMs: 200,
+				dropTargetStyle: {}
+			}}
+			on:consider={handleConsider}
+			on:finalize={handleFinalize}
+		>
+			{#each items as item, index (item.id)}
+				{#key item.id}
+					<div class="border rounded-md p-2 mb-2 bg-surface">
+						<ResolveConfig
+							{id}
+							key={'label'}
+							extraKey={item.id}
+							bind:resolvedConfig={resolvedLabels[item.originalIndex]}
+							configuration={item.value.label}
+						/>
+
+						<div class="w-full flex flex-row gap-2 items-center relative my-1">
+							<div
+								class="text-xs px-2 border-y flex flex-row items-center border rounded-md h-8 w-full"
+							>
+								{resolvedLabels[item.originalIndex] ?? 'No label'}
+							</div>
+
+							<div class="absolute right-[4.5rem]">
+								<CloseButton
+									noBg
+									small
+									on:close={() => {
+										items = items.filter((_, i) => i !== index)
+									}}
+								/>
+							</div>
+							<NavbarWizard bind:value={items[index].value}>
+								<svelte:fragment slot="trigger">
+									<Button color="light" size="xs2" nonCaptureEvent={true}>
+										<div class="flex flex-row items-center gap-2 text-xs font-normal">
+											<Settings size={16} />
+										</div>
+									</Button>
+								</svelte:fragment>
+							</NavbarWizard>
+
+							<div class="flex flex-col justify-center gap-2">
+								<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+								<!-- svelte-ignore a11y-no-static-element-interactions -->
+								<div use:dragHandle class="handle w-4 h-4" aria-label="drag-handle">
+									<GripVertical size={16} />
+								</div>
+							</div>
+						</div>
+
+						<ResolveNavbarItemPath
+							navbarItem={item.value}
+							{id}
+							{index}
+							bind:resolvedPath={resolvedPaths[item.originalIndex]}
+						/>
+
+						{#if resolvedPaths[item.originalIndex]}
+							<div class="text-xs text-tertiary flex gap-2 flex-row flex-wrap">
+								Path: <Badge small>{resolvedPaths[item.originalIndex]}</Badge>
+								{#if $appPath && resolvedPaths[item.originalIndex]?.includes($appPath)}
+									<Badge small color="blue"
+										>Current app
+
+										<Tooltip class="ml-2 !text-blue-900">
+											Clicking on those items will keep you in the current tab and change the output
+											of the component.
+										</Tooltip>
+									</Badge>
+								{/if}
+							</div>
+						{:else}
+							<div class="text-xs text-red-500">No app path or url selected</div>
+						{/if}
+					</div>
+				{/key}
+			{/each}
+		</section>
+		<Button
+			size="xs"
+			color="light"
+			variant="border"
+			startIcon={{ icon: Plus }}
+			on:click={addPath}
+			iconOnly
+		/>
+	</div>
+</PanelSection>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+import type { NavbarItem } from '../component';
+declare const __propDef: {
+    props: {
+        navbarItems?: NavbarItem[] | undefined;
+        id: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type GridNavbarProps = typeof __propDef.props;
+export type GridNavbarEvents = typeof __propDef.events;
+export type GridNavbarSlots = typeof __propDef.slots;
+export default class GridNavbar extends SvelteComponent<GridNavbarProps, GridNavbarEvents, GridNavbarSlots> {
+}
+export {};