windmill-components 1.70.0 → 1.77.0

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte

@@ -1,4 +1,6 @@
 <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';
 import CurrencyInput from './CurrencyInput.svelte';
@@ -6,7 +8,9 @@ export let id;
 export let configuration;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
 let defaultValue = undefined;
 let isNegativeAllowed = undefined;
 let currency = undefined;
@@ -22,6 +26,7 @@ function handleDefault() {
 }
 $: value != undefined && handleInput();
 $: defaultValue != undefined && handleDefault();
+$: css = concatCustomCss($app.css?.currencycomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
@@ -29,12 +34,17 @@ $: defaultValue != undefined && handleDefault();
 <InputValue {id} input={configuration.currency} bind:value={currency} />
 <InputValue {id} input={configuration.locale} bind:value={locale} />
 
-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	{#key isNegativeAllowed}
 		{#key locale}
 			{#key currency}
 				<CurrencyInput
-					inputClasses={{ formatted: 'p-0', wrapper: 'w-full', formattedZero: 'text-black' }}
+					inputClasses={{
+						formatted: twMerge('px-2 w-full py-1.5 windmillapp', css?.input?.class),
+						wrapper: 'w-full windmillapp',
+						formattedZero: twMerge('text-black windmillapp ', css?.input?.class)
+					}}
+					style={css?.input?.style}
 					bind:value
 					{currency}
 					{locale}

package/components/apps/components/inputs/currency/AppCurrencyInput.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../../inputType';
+import type { ComponentCustomCSS } from '../../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/inputs/currency/CurrencyInput.svelte

@@ -22,6 +22,7 @@ export let placeholder = DEFAULT_VALUE;
 export let isNegativeAllowed = true;
 export let fractionDigits = DEFAULT_FRACTION_DIGITS;
 export let inputClasses = null;
+export let style = '';
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     return new Intl.NumberFormat(locale, {
@@ -139,6 +140,7 @@ $: value, setFormattedValue();
 			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
 			: ''}
 		"
+		{style}
 		type="text"
 		inputmode="numeric"
 		name={`formatted-${name}`}

package/components/apps/components/inputs/currency/CurrencyInput.svelte.d.ts

@@ -18,6 +18,7 @@ declare const __propDef: {
             formattedNegative?: string | undefined;
             formattedZero?: string | undefined;
         } | null | undefined;
+        style?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,13 +1,13 @@
 <script>import { getContext } from 'svelte';
 import SubGridEditor from '../../editor/SubGridEditor.svelte';
-import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let configuration;
 export let componentContainerHeight;
-let noPadding = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = [];
-const { app, focusedGrid, selectedComponent } = getContext('AppEditorContext');
-let gridContent = undefined;
+const { app, focusedGrid, selectedComponent } = getContext('AppViewerContext');
 function onFocus() {
     $focusedGrid = {
         parentComponentId: id,
@@ -15,18 +15,21 @@ function onFocus() {
     };
 }
 $: $selectedComponent === id && onFocus();
+$: css = concatCustomCss($app.css?.containercomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.noPadding} bind:value={noPadding} />
-<InputValue {id} input={configuration.gridContent} bind:value={gridContent} />
-
-{#if $app.subgrids?.[`${id}-0`]}
-	<SubGridEditor
-		{noPadding}
-		bind:subGrid={$app.subgrids[`${id}-0`]}
-		containerHeight={componentContainerHeight}
-		on:focus={() => {
-			$selectedComponent = id
-		}}
-	/>
-{/if}
+<div class="w-full h-full">
+	{#if $app.subgrids?.[`${id}-0`]}
+		<SubGridEditor
+			visible={render}
+			{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

@@ -1,10 +1,13 @@
 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: {

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

@@ -1,20 +1,40 @@
-<script>import AlignWrapper from '../helpers/AlignWrapper.svelte';
+<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="h-full">
+<AlignWrapper
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={twMerge(css?.container?.class, 'h-full')}
+	style={css?.container?.style}
+	{render}
+>
 	<div
-		class="rounded-full {position === 'horizontal' ? 'w-full' : 'h-full'}"
-		style="{position === 'horizontal' ? 'height' : 'width'}: {size}px; background-color: {color}"
+		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

@@ -1,13 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
-import type { HorizontalAlignment, VerticalAlignment } from '../../types';
+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>;

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

@@ -0,0 +1,86 @@
+<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 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.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}
+					{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,83 @@
+<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, componentControl } = getContext('AppViewerContext');
+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>
+
+<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
+						{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

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

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

@@ -1,11 +1,15 @@
 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;
+        initializing?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -1,3 +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

@@ -1,3 +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';