windmill-components 1.85.0 → 1.87.0

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -1,81 +0,0 @@
-<script>import RangeSlider from 'svelte-range-slider-pips';
-import { getContext } from 'svelte';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-import { twMerge } from 'tailwind-merge';
-import { concatCustomCss } from '../../utils';
-import { initOutput } from '../../editor/appUtils';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-export let initializing = true;
-const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
-let min = 0;
-let max = 42;
-let step = 1;
-let slider;
-let outputs = initOutput($worldStore, id, {
-    result: 0 || null
-});
-let values = [outputs?.result.peak() ?? 0];
-$: values && handleValues();
-function handleValues() {
-    // Disallow 'e' character in numbers
-    // if(value && value.toString().includes('e')) {
-    // 	value = +value.toString().replaceAll('e', '')
-    // }
-    const num = isNaN(+values[0]) ? null : +values[0];
-    outputs?.result.set(num);
-}
-$: css = concatCustomCss($app.css?.slidercomponent, customCss);
-let lastStyle = undefined;
-$: if (css && slider && lastStyle !== css?.handle?.style) {
-    const handle = slider.querySelector('.rangeNub');
-    if (handle) {
-        lastStyle = css?.handle?.style;
-        handle.style.cssText = css?.handle?.style ?? '';
-    }
-}
-</script>
-
-<InputValue {id} input={configuration.step} bind:value={step} />
-<InputValue {id} input={configuration.min} bind:value={min} />
-<InputValue {id} input={configuration.max} bind:value={max} />
-<InputValue
-	on:done={() => (initializing = false)}
-	{id}
-	input={configuration.defaultValue}
-	bind:value={values[0]}
-/>
-
-<AlignWrapper {render} {verticalAlignment}>
-	<div class="flex items-center w-full gap-1 px-1">
-		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{+min}
-		</span>
-		<div
-			class="grow"
-			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
-				''}"
-			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
-		>
-			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
-		</div>
-		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
-			{+max}
-		</span>
-		<span class="mx-2">
-			<span
-				class={twMerge(
-					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.value?.class ?? ''
-				)}
-				style={css?.value?.style ?? ''}
-			>
-				{values[0]}
-			</span>
-		</span>
-	</div>
-</AlignWrapper>

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,87 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { twMerge } from 'tailwind-merge';
-import { initOutput, selectId } from '../../editor/appUtils';
-import { concatCustomCss } from '../../utils';
-import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
-export let id;
-export let configuration;
-export let inputType = 'text';
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let appCssKey = 'textinputcomponent';
-export let render;
-const { app, worldStore, selectedComponent, connectingInput } = getContext('AppViewerContext');
-let placeholder = undefined;
-let defaultValue = undefined;
-let value = undefined;
-let outputs = initOutput($worldStore, id, {
-    result: ''
-});
-$: handleDefault(defaultValue);
-$: outputs?.result.set(value ?? '');
-function handleDefault(defaultValue) {
-    value = defaultValue;
-}
-$: css = concatCustomCss($app.css?.[appCssKey], customCss);
-</script>
-
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-
-{#if inputType === 'textarea'}
-	<textarea
-		class={twMerge(
-			'windmillapp w-full h-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-			css?.input?.class ?? ''
-		)}
-		style="resize:none; {css?.input?.style ?? ''}"
-		on:pointerdown|stopPropagation={(e) =>
-			!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-		bind:value
-		{placeholder}
-	/>
-{:else}
-	<AlignWrapper {render} {verticalAlignment}>
-		{#if inputType === 'password'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) =>
-					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-				type="password"
-				bind:value
-				{placeholder}
-			/>
-		{:else if inputType === 'text'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) =>
-					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-				type="text"
-				bind:value
-				{placeholder}
-			/>
-		{:else if inputType === 'email'}
-			<input
-				class={twMerge(
-					'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 ',
-					css?.input?.class ?? ''
-				)}
-				style={css?.input?.style ?? ''}
-				on:pointerdown|stopPropagation={(e) =>
-					!$connectingInput.opened && selectId(e, id, selectedComponent, $app)}
-				type="email"
-				bind:value
-				{placeholder}
-			/>
-		{/if}
-	</AlignWrapper>
-{/if}

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

@@ -1,60 +0,0 @@
-<script>import { initOutput } from '../../../editor/appUtils';
-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';
-export let id;
-export let configuration;
-export let verticalAlignment = undefined;
-export let customCss = undefined;
-export let render;
-const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
-const outputs = initOutput($worldStore, id, {
-    result: null
-});
-let defaultValue = undefined;
-let isNegativeAllowed = undefined;
-let currency = undefined;
-let locale = undefined;
-let value = undefined;
-function handleInput() {
-    outputs?.result.set(value ?? null);
-}
-function handleDefault() {
-    value = defaultValue;
-    handleInput();
-}
-$: value != undefined && handleInput();
-$: defaultValue != undefined && handleDefault();
-$: css = concatCustomCss($app.css?.currencycomponent, customCss);
-</script>
-
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} input={configuration.isNegativeAllowed} bind:value={isNegativeAllowed} />
-<InputValue {id} input={configuration.currency} bind:value={currency} />
-<InputValue {id} input={configuration.locale} bind:value={locale} />
-
-<AlignWrapper {render} {verticalAlignment}>
-	{#key isNegativeAllowed}
-		{#key locale}
-			{#key currency}
-				<div class="w-full" on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}>
-					<CurrencyInput
-						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}
-						{isNegativeAllowed}
-					/>
-				</div>
-			{/key}
-		{/key}
-	{/key}
-</AlignWrapper>

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

@@ -1,38 +0,0 @@
-<script>import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
-import SubGridEditor from '../../editor/SubGridEditor.svelte';
-import { concatCustomCss } from '../../utils';
-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>
-
-<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/components/apps/components/layout/AppDivider.svelte

@@ -1,43 +0,0 @@
-<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';
-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} />
-
-<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/AppDrawer.svelte

@@ -1,108 +0,0 @@
-<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';
-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} />
-
-<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/components/apps/components/layout/AppSplitpanes.svelte

@@ -1,93 +0,0 @@
-<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';
-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>
-
-<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/components/apps/components/layout/AppTabs.svelte

@@ -1,115 +0,0 @@
-<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';
-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];
-    }
-};
-$: 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} />
-
-<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>