windmill-components 1.87.0 → 1.89.0

package/package/components/apps/components/inputs/index.d.ts

@@ -0,0 +1,9 @@
+export { default as AppCheckbox } from './AppCheckbox.svelte';
+export { default as AppCurrencyInput } from './currency/AppCurrencyInput.svelte';
+export { default as AppDateInput } from './AppDateInput.svelte';
+export { default as AppFileInput } from './AppFileInput.svelte';
+export { default as AppNumberInput } from './AppNumberInput.svelte';
+export { default as AppRangeInput } from './AppRangeInput.svelte';
+export { default as AppSelect } from './AppSelect.svelte';
+export { default as AppSliderInputs } from './AppSliderInputs.svelte';
+export { default as AppTextInput } from './AppTextInput.svelte';

package/package/components/apps/components/inputs/index.js

@@ -0,0 +1,9 @@
+export { default as AppCheckbox } from './AppCheckbox.svelte';
+export { default as AppCurrencyInput } from './currency/AppCurrencyInput.svelte';
+export { default as AppDateInput } from './AppDateInput.svelte';
+export { default as AppFileInput } from './AppFileInput.svelte';
+export { default as AppNumberInput } from './AppNumberInput.svelte';
+export { default as AppRangeInput } from './AppRangeInput.svelte';
+export { default as AppSelect } from './AppSelect.svelte';
+export { default as AppSliderInputs } from './AppSliderInputs.svelte';
+export { default as AppTextInput } from './AppTextInput.svelte';

package/package/components/apps/components/layout/AppContainer.svelte

@@ -0,0 +1,41 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let componentContainerHeight;
+export let customCss = undefined;
+export let render;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+</script>
+
+<InitializeComponent {id} />
+
+<div class="w-full h-full">
+	{#if $app.subgrids?.[`${id}-0`]}
+		<SubGridEditor
+			visible={render}
+			{id}
+			class={css?.container?.class}
+			style={css?.container?.style}
+			subGridId={`${id}-0`}
+			containerHeight={componentContainerHeight}
+			on:focus={() => {
+				if (!$connectingInput.opened) {
+					$selectedComponent = [id]
+				}
+				onFocus()
+			}}
+		/>
+	{/if}
+</div>

package/package/components/apps/components/layout/AppContainer.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentContainerHeight: number;
+        customCss?: ComponentCustomCSS<'containercomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppContainerProps = typeof __propDef.props;
+export type AppContainerEvents = typeof __propDef.events;
+export type AppContainerSlots = typeof __propDef.slots;
+export default class AppContainer extends SvelteComponentTyped<AppContainerProps, AppContainerEvents, AppContainerSlots> {
+}
+export {};

package/package/components/apps/components/layout/AppDivider.svelte

@@ -0,0 +1,46 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let position;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+let size = 2;
+let color = '#00000060';
+$: css = concatCustomCss($app.css?.[position + 'dividercomponent'], customCss);
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+</script>
+
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+
+<InitializeComponent {id} />
+
+<AlignWrapper
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={twMerge(css?.container?.class, 'h-full')}
+	style={css?.container?.style}
+	{render}
+>
+	<div
+		class={twMerge(
+			`rounded-full ${position === 'horizontal' ? 'w-full' : 'h-full'}`,
+			css?.divider?.class ?? ''
+		)}
+		style="
+			{position === 'horizontal' ? 'height' : 'width'}: {size}px;
+			background-color: {color};
+			{css?.divider?.style ?? ''}
+		"
+	/>
+</AlignWrapper>

package/package/components/apps/components/layout/AppDivider.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, HorizontalAlignment, RichConfigurations, VerticalAlignment } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
+        customCss?: ComponentCustomCSS<'verticaldividercomponent' | 'horizontaldividercomponent'> | undefined;
+        position: 'horizontal' | 'vertical';
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDividerProps = typeof __propDef.props;
+export type AppDividerEvents = typeof __propDef.events;
+export type AppDividerSlots = typeof __propDef.slots;
+export default class AppDivider extends SvelteComponentTyped<AppDividerProps, AppDividerEvents, AppDividerSlots> {
+}
+export {};

package/package/components/apps/components/layout/AppDrawer.svelte

@@ -0,0 +1,111 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import InputValue from '../helpers/InputValue.svelte';
+import Portal from 'svelte-portal';
+import { concatCustomCss } from '../../utils';
+import { Button, ButtonType, Drawer, DrawerContent } from '../../../common';
+import { twMerge } from 'tailwind-merge';
+import { AlignWrapper } from '../helpers';
+import { initOutput } from '../../editor/appUtils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let customCss = undefined;
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let noWFull = false;
+export let render;
+const { app, focusedGrid, selectedComponent, worldStore, connectingInput } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let gridContent = undefined;
+let drawerTitle = undefined;
+let appDrawer;
+let labelValue;
+let color;
+let size;
+let disabled = undefined;
+let fillContainer = undefined;
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+</script>
+
+<div class="h-full w-full">
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
+		<Button
+			btnClasses={twMerge(
+				$app.css?.['buttoncomponent']?.['button']?.class,
+				fillContainer ? 'w-full h-full' : ''
+			)}
+			{disabled}
+			on:pointerdown={(e) => {
+				e?.stopPropagation()
+			}}
+			on:click={async (e) => {
+				$focusedGrid = {
+					parentComponentId: id,
+					subGridIndex: 0
+				}
+				appDrawer.toggleDrawer()
+			}}
+			{size}
+			{color}
+		>
+			<div>{labelValue}</div>
+		</Button>
+	</AlignWrapper>
+</div>
+
+<InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
+<InputValue {id} input={configuration.drawerTitle} bind:value={drawerTitle} />
+<InputValue {id} input={configuration.label} bind:value={labelValue} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.fillContainer} bind:value={fillContainer} />
+
+<InitializeComponent {id} />
+
+<Portal target="#app-editor-top-level-drawer">
+	<Drawer let:open bind:this={appDrawer} size="800px" alwaysOpen positionClass="!absolute">
+		<DrawerContent
+			title={drawerTitle}
+			on:close={() => {
+				appDrawer?.toggleDrawer()
+				$focusedGrid = undefined
+			}}
+		>
+			<div
+				class="h-full"
+				on:pointerdown={(e) => {
+					e?.stopPropagation()
+					if (!$connectingInput.opened) {
+						$selectedComponent = [id]
+						$focusedGrid = {
+							parentComponentId: id,
+							subGridIndex: 0
+						}
+					}
+				}}
+			>
+				{#if $app.subgrids?.[`${id}-0`]}
+					<SubGridEditor
+						visible={open && render}
+						{id}
+						class={css?.container?.class}
+						style={css?.container?.style}
+						subGridId={`${id}-0`}
+						containerHeight={1200}
+						on:focus={() => {
+							if (!$connectingInput.opened) {
+								$selectedComponent = [id]
+								$focusedGrid = {
+									parentComponentId: id,
+									subGridIndex: 0
+								}
+							}
+						}}
+					/>
+				{/if}
+			</div>
+		</DrawerContent>
+	</Drawer>
+</Portal>

package/package/components/apps/components/layout/AppDrawer.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        customCss?: ComponentCustomCSS<'drawercomponent'> | undefined;
+        id: string;
+        configuration: RichConfigurations;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppDrawerProps = typeof __propDef.props;
+export type AppDrawerEvents = typeof __propDef.events;
+export type AppDrawerSlots = typeof __propDef.slots;
+export default class AppDrawer extends SvelteComponentTyped<AppDrawerProps, AppDrawerEvents, AppDrawerSlots> {
+}
+export {};

package/package/components/apps/components/layout/AppSplitpanes.svelte

@@ -0,0 +1,96 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { deepEqual } from 'fast-equals';
+import { initOutput } from '../../editor/appUtils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let componentContainerHeight;
+export let customCss = undefined;
+export let horizontal = false;
+export let panes;
+export let render;
+const { app, focusedGrid, selectedComponent, componentControl, worldStore, connectingInput } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+$componentControl[id] = {
+    left: () => {
+        if ($focusedGrid?.subGridIndex) {
+            const index = $focusedGrid?.subGridIndex ?? 0;
+            if (index > 0) {
+                $focusedGrid.subGridIndex = index - 1;
+                return true;
+            }
+        }
+        return false;
+    },
+    right: () => {
+        // subGridIndex can be 0
+        if ($focusedGrid?.subGridIndex !== undefined) {
+            const index = $focusedGrid?.subGridIndex ?? 0;
+            if (index < panes.length - 1) {
+                $focusedGrid.subGridIndex = index + 1;
+                return true;
+            }
+        }
+        return false;
+    }
+};
+let sumedup = [50, 50];
+$: {
+    let ns = panes.map((x) => (x / panes.reduce((a, b) => a + b, 0)) * 100);
+    if (!deepEqual(ns, sumedup)) {
+        sumedup = ns;
+    }
+}
+</script>
+
+<InitializeComponent {id} />
+
+<div class="h-full w-full border" on:pointerdown={onFocus}>
+	<Splitpanes {horizontal}>
+		{#each sumedup as paneSize, index (index)}
+			<Pane size={paneSize} minSize={20}>
+				<div
+					class="w-full h-full"
+					on:pointerdown|stopPropagation={() => {
+						$selectedComponent = [id]
+						$focusedGrid = {
+							parentComponentId: id,
+							subGridIndex: index
+						}
+					}}
+				>
+					{#if $app.subgrids?.[`${id}-${index}`]}
+						<SubGridEditor
+							visible={render}
+							{id}
+							shouldHighlight={$focusedGrid?.subGridIndex === index}
+							class={css?.container?.class}
+							style={css?.container?.style}
+							subGridId={`${id}-${index}`}
+							containerHeight={horizontal ? undefined : componentContainerHeight - 8}
+							on:focus={() => {
+								if (!$connectingInput.opened) {
+									$selectedComponent = [id]
+									$focusedGrid = {
+										parentComponentId: id,
+										subGridIndex: index
+									}
+								}
+							}}
+						/>
+					{/if}
+				</div>
+			</Pane>
+		{/each}
+	</Splitpanes>
+</div>

package/package/components/apps/components/layout/AppSplitpanes.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        componentContainerHeight: number;
+        customCss?: ComponentCustomCSS<'horizontalsplitpanescomponent' | 'verticalsplitpanescomponent'> | undefined;
+        horizontal?: boolean | undefined;
+        panes: number[];
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSplitpanesProps = typeof __propDef.props;
+export type AppSplitpanesEvents = typeof __propDef.events;
+export type AppSplitpanesSlots = typeof __propDef.slots;
+export default class AppSplitpanes extends SvelteComponentTyped<AppSplitpanesProps, AppSplitpanesEvents, AppSplitpanesSlots> {
+}
+export {};

package/package/components/apps/components/layout/AppTabs.svelte

@@ -0,0 +1,119 @@
+<script>import { Tab, Tabs } from '../../../common';
+import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let tabs;
+export let customCss = undefined;
+export let render;
+let resolvedConfig = initConfig(components['tabscomponent'].initialData.configuration, configuration);
+const { app, worldStore, focusedGrid, selectedComponent, mode, componentControl, connectingInput } = getContext('AppViewerContext');
+let selected = tabs[0];
+let tabHeight = 0;
+let outputs = initOutput($worldStore, id, {
+    selectedTabIndex: 0
+});
+function handleTabSelection() {
+    selectedIndex = tabs?.indexOf(selected);
+    outputs?.selectedTabIndex.set(selectedIndex);
+    if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+        $focusedGrid = {
+            parentComponentId: id,
+            subGridIndex: selectedIndex
+        };
+    }
+}
+$componentControl[id] = {
+    left: () => {
+        const index = tabs.indexOf(selected);
+        if (index > 0) {
+            selected = tabs[index - 1];
+            return true;
+        }
+        return false;
+    },
+    right: () => {
+        const index = tabs.indexOf(selected);
+        if (index < tabs.length - 1) {
+            selected = tabs[index + 1];
+            return true;
+        }
+        return false;
+    },
+    setTab: (tab) => {
+        selected = tabs[tab];
+        handleTabSelection();
+    }
+};
+$: selected != undefined && handleTabSelection();
+let selectedIndex = tabs?.indexOf(selected) ?? -1;
+$: css = concatCustomCss($app.css?.tabscomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.tabsKind} bind:value={resolvedConfig.tabsKind} />
+
+<InitializeComponent {id} />
+
+<div class={resolvedConfig.tabsKind == 'sidebar' ? 'flex gap-4 w-full' : 'w-full'}>
+	{#if !resolvedConfig.tabsKind || resolvedConfig.tabsKind == 'tabs' || (resolvedConfig.tabsKind == 'invisibleOnView' && $mode == 'dnd')}
+		<div bind:clientHeight={tabHeight}>
+			<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+				{#each tabs ?? [] as res}
+					<Tab
+						value={res}
+						class={css?.allTabs?.class}
+						style={css?.allTabs?.style}
+						selectedClass={css?.selectedTab?.class}
+						selectedStyle={css?.selectedTab?.style}
+					>
+						<span class="font-semibold">{res}</span>
+					</Tab>
+				{/each}
+			</Tabs>
+		</div>
+	{:else if resolvedConfig.tabsKind == 'sidebar'}
+		<div
+			class="flex gap-y-2 flex-col w-1/6 max-w-[160px] bg-white text-[#2e3440] opacity-80 px-4 pt-4 border-r border-gray-400"
+		>
+			{#each tabs ?? [] as res}
+				<button
+					class="rounded-sm !truncate text-sm hover:bg-gray-100 hover:border hover:text-black px-1 py-2 {selected ==
+					res
+						? 'outline outline-gray-500 outline-1 bg-white text-black'
+						: ''}"
+					on:pointerdown|stopPropagation
+					on:click={() => (selected = res)}>{res}</button
+				>
+			{/each}
+		</div>
+	{/if}
+
+	<div class="w-full">
+		{#if $app.subgrids}
+			{#each tabs ?? [] as _res, i}
+				<SubGridEditor
+					{id}
+					visible={render && i === selectedIndex}
+					subGridId={`${id}-${i}`}
+					class={css?.container?.class}
+					style={css?.container?.style}
+					containerHeight={resolvedConfig.tabsKind !== 'sidebar' && $mode !== 'preview'
+						? componentContainerHeight - tabHeight
+						: componentContainerHeight}
+					on:focus={() => {
+						if (!$connectingInput.opened) {
+							$selectedComponent = [id]
+							handleTabSelection()
+						}
+					}}
+				/>
+			{/each}
+		{/if}
+	</div>
+</div>

package/package/components/apps/components/layout/AppTabs.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        componentContainerHeight: number;
+        tabs: string[];
+        customCss?: ComponentCustomCSS<'tabscomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppTabsProps = typeof __propDef.props;
+export type AppTabsEvents = typeof __propDef.events;
+export type AppTabsSlots = typeof __propDef.slots;
+export default class AppTabs extends SvelteComponentTyped<AppTabsProps, AppTabsEvents, AppTabsSlots> {
+}
+export {};

package/package/components/apps/components/layout/index.d.ts

@@ -0,0 +1,5 @@
+export { default as AppContainer } from './AppContainer.svelte';
+export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppDrawer } from './AppDrawer.svelte';
+export { default as AppSplitpanes } from './AppSplitpanes.svelte';
+export { default as AppTabs } from './AppTabs.svelte';

package/package/components/apps/components/layout/index.js

@@ -0,0 +1,5 @@
+export { default as AppContainer } from './AppContainer.svelte';
+export { default as AppDivider } from './AppDivider.svelte';
+export { default as AppDrawer } from './AppDrawer.svelte';
+export { default as AppSplitpanes } from './AppSplitpanes.svelte';
+export { default as AppTabs } from './AppTabs.svelte';

package/package/components/apps/editor/AppComponentInput.svelte

@@ -0,0 +1,34 @@
+<script>import { components } from './component';
+import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+export let component;
+export let resourceOnly = false;
+</script>
+
+{#if component?.componentInput?.type === 'runnable' && Object.keys(component?.componentInput?.fields ?? {}).length > 0}
+	<div class="mb-8 border p-2">
+		<div class="flex justify-between mb-4">
+			<span class="text-sm font-bold">{component.id}</span>
+			<span class="text-sm font-bold">{components[component.type].name}</span>
+		</div>
+
+		{#if resourceOnly && Object.keys(component.componentInput.fields).filter((fieldKey) => {
+				if (component?.componentInput?.type === 'runnable') {
+					const fields = component.componentInput?.fields
+					const field = fields[fieldKey]
+					return field.fieldType === 'object' && field.format?.startsWith('resource-')
+				}
+				return false
+			}).length === 0}
+			<span class="text-sm text-gray-600">No resource input</span>
+		{:else}
+			<InputsSpecsEditor
+				id={component.id}
+				shouldCapitalize={false}
+				bind:inputSpecs={component.componentInput.fields}
+				userInputEnabled={component.type === 'formcomponent' ||
+					component.type === 'formbuttoncomponent'}
+				{resourceOnly}
+			/>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import { type AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        resourceOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppComponentInputProps = typeof __propDef.props;
+export type AppComponentInputEvents = typeof __propDef.events;
+export type AppComponentInputSlots = typeof __propDef.slots;
+export default class AppComponentInput extends SvelteComponentTyped<AppComponentInputProps, AppComponentInputEvents, AppComponentInputSlots> {
+}
+export {};