windmill-components 1.60.4 → 1.75.0

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

@@ -0,0 +1,40 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let customCss = undefined;
+export let render;
+let noPadding = undefined;
+export const staticOutputs = [];
+const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: $selectedComponent === id && onFocus();
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div>
+	{#if $app.subgrids?.[`${id}-0`]}
+		<SubGridEditor
+			visible={render}
+			{noPadding}
+			{id}
+			class={css?.container.class}
+			style={css?.container.style}
+			bind:subGrid={$app.subgrids[`${id}-0`]}
+			containerHeight={componentContainerHeight}
+			on:focus={() => {
+				$selectedComponent = id
+			}}
+		/>
+	{/if}
+</div>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
+        staticOutputs?: string[] | undefined;
+    };
+    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> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -0,0 +1,40 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InputValue from '../helpers/InputValue.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 } = getContext('AppViewerContext');
+let size = 2;
+let color = '#00000060';
+$: css = concatCustomCss($app.css?.[position + 'dividercomponent'], customCss);
+</script>
+
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+
+<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/components/apps/components/layout/AppDivider.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS, HorizontalAlignment, VerticalAlignment } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: HorizontalAlignment | undefined;
+        verticalAlignment?: VerticalAlignment | undefined;
+        customCss?: ComponentCustomCSS<'container' | 'divider'> | 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/components/apps/components/layout/AppDrawer.svelte

@@ -0,0 +1,89 @@
+<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';
+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 } = getContext('AppViewerContext');
+let gridContent = undefined;
+let noPadding = 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()
+				window.dispatchEvent(new Event('pointerup'))
+			}}
+			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.noPadding} bind:value={noPadding} />
+<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} />
+
+<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
+			}}
+		>
+			{#if $app.subgrids?.[`${id}-0`]}
+				<SubGridEditor
+					visible={open && render}
+					{noPadding}
+					{id}
+					class={css?.container.class}
+					style={css?.container.style}
+					bind:subGrid={$app.subgrids[`${id}-0`]}
+					containerHeight={1200}
+					on:focus={() => {
+						$selectedComponent = id
+					}}
+				/>
+			{/if}
+		</DrawerContent>
+	</Drawer>
+</Portal>

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

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        id: string;
+        configuration: Record<string, AppInput>;
+        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/components/apps/components/layout/AppSplitpanes.svelte

@@ -0,0 +1,88 @@
+<script>import { getContext } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+import { Pane, Splitpanes } from 'svelte-splitpanes';
+import { deepEqual } from 'fast-equals';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let customCss = undefined;
+export let horizontal = false;
+export let panes;
+export let render;
+const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+let noPadding = undefined;
+function onFocus() {
+    $focusedGrid = {
+        parentComponentId: id,
+        subGridIndex: 0
+    };
+}
+$: $selectedComponent === id && onFocus();
+$: 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>
+
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div class="h-full w-full border" on:pointerdown|stopPropagation>
+	<Splitpanes {horizontal}>
+		{#each sumedup as paneSize, index (index)}
+			<Pane size={paneSize} minSize={20}>
+				{#if $app.subgrids?.[`${id}-${index}`]}
+					<SubGridEditor
+						visible={render}
+						noYPadding
+						{noPadding}
+						{id}
+						shouldHighlight={$focusedGrid?.subGridIndex === index}
+						class={css?.container.class}
+						style={css?.container.style}
+						bind:subGrid={$app.subgrids[`${id}-${index}`]}
+						containerHeight={horizontal
+							? (componentContainerHeight * paneSize) / 100 - 1
+							: componentContainerHeight - 8}
+						on:focus={() => {
+							$selectedComponent = id
+							$focusedGrid = {
+								parentComponentId: id,
+								subGridIndex: index
+							}
+						}}
+					/>
+				{/if}
+			</Pane>
+		{/each}
+	</Splitpanes>
+</div>

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        horizontal?: boolean | undefined;
+        panes: number[];
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [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/components/apps/components/layout/AppTabs.svelte

@@ -0,0 +1,99 @@
+<script>import { Tab, Tabs } from '../../../common';
+import { getContext, onMount } from 'svelte';
+import SubGridEditor from '../../editor/SubGridEditor.svelte';
+import { concatCustomCss } from '../../utils';
+import InputValue from '../helpers/InputValue.svelte';
+export let id;
+export let configuration;
+export let componentContainerHeight;
+export let tabs;
+export let customCss = undefined;
+export let render;
+export const staticOutputs = ['selectedTabIndex'];
+const { app, worldStore, focusedGrid, selectedComponent } = getContext('AppViewerContext');
+const { componentControl } = getContext('AppEditorContext');
+let selected = tabs[0];
+let noPadding = undefined;
+let tabHeight = 0;
+function handleTabSelection() {
+    const selectedIndex = tabs?.indexOf(selected);
+    outputs?.selectedTabIndex.set(selectedIndex, true);
+    if ($selectedComponent != id) {
+        $selectedComponent = id;
+    }
+    if ($focusedGrid?.parentComponentId != id || $focusedGrid?.subGridIndex != selectedIndex) {
+        $focusedGrid = {
+            parentComponentId: id,
+            subGridIndex: selectedIndex
+        };
+    }
+}
+$: $selectedComponent === id && focusGrid();
+function focusGrid() {
+    const selectedIndex = tabs?.indexOf(selected);
+    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;
+    }
+};
+$: selected && handleTabSelection();
+$: outputs = $worldStore?.outputsById[id];
+$: selectedIndex = tabs?.indexOf(selected) ?? -1;
+$: css = concatCustomCss($app.css?.tabscomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
+
+<div>
+	<div bind:clientHeight={tabHeight} on:pointerdown|stopPropagation>
+		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+			{#each tabs ?? [] as res}
+				<Tab
+					value={res}
+					class={css?.tabs?.class}
+					style={css?.tabs?.style}
+					selectedClass={css?.selectedTab?.class}
+					selectedStyle={css?.selectedTab?.style}
+				>
+					<span class="font-semibold">{res}</span>
+				</Tab>
+			{/each}
+		</Tabs>
+	</div>
+	{#if $app.subgrids}
+		{#each tabs ?? [] as res, i}
+			<SubGridEditor
+				{id}
+				visible={render && i === selectedIndex}
+				bind:subGrid={$app.subgrids[`${id}-${i}`]}
+				{noPadding}
+				class={css?.container?.class}
+				style={css?.container?.style}
+				containerHeight={componentContainerHeight - tabHeight}
+				on:focus={() => {
+					$selectedComponent = id
+				}}
+			/>
+		{/each}
+	{/if}
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: Record<string, AppInput>;
+        componentContainerHeight: number;
+        tabs: string[];
+        customCss?: ComponentCustomCSS<'tabRow' | 'tabs' | 'selectedTab' | 'container'> | undefined;
+        render: boolean;
+        staticOutputs?: string[] | undefined;
+    };
+    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> {
+    get staticOutputs(): string[];
+}
+export {};

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/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/components/apps/editor/AppComponentInput.svelte

@@ -0,0 +1,33 @@
+<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 !== 'buttoncomponent'}
+				{resourceOnly}
+			/>
+		{/if}
+	</div>
+{/if}

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 {};

package/components/apps/editor/AppComponentInputs.svelte

@@ -0,0 +1,13 @@
+<script>import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
+export let fields;
+export let component;
+export let resourceOnly = false;
+$: fields = resourceOnly ? fields : fields;
+</script>
+
+<InputsSpecsEditor
+	id={component.id}
+	shouldCapitalize={false}
+	bind:inputSpecs={fields}
+	userInputEnabled={component.type !== 'buttoncomponent'}
+/>

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ConnectedAppInput, RowAppInput, StaticAppInput, UserAppInput } from '../inputType';
+import type { AppComponent } from './component';
+declare const __propDef: {
+    props: {
+        fields: Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput>;
+        component: AppComponent;
+        resourceOnly?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppComponentInputsProps = typeof __propDef.props;
+export type AppComponentInputsEvents = typeof __propDef.events;
+export type AppComponentInputsSlots = typeof __propDef.slots;
+export default class AppComponentInputs extends SvelteComponentTyped<AppComponentInputsProps, AppComponentInputsEvents, AppComponentInputsSlots> {
+}
+export {};