windmill-components 1.448.50 → 1.472.2

package/package/components/apps/editor/component/ComponentInner.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { AppComponent } from './components';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        render: boolean;
+        componentContainerHeight: number;
+        errorHandledByComponent: boolean;
+        inlineEditorOpened: boolean;
+        initializing?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentInnerProps = typeof __propDef.props;
+export type ComponentInnerEvents = typeof __propDef.events;
+export type ComponentInnerSlots = typeof __propDef.slots;
+export default class ComponentInner extends SvelteComponent<ComponentInnerProps, ComponentInnerEvents, ComponentInnerSlots> {
+}
+export {};

package/package/components/apps/editor/component/ComponentRendered.svelte

@@ -0,0 +1,195 @@
+<script context="module">"use strict";
+let outTimeout = undefined;
+</script>
+
+<script>import { getContext, onMount } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import ComponentHeader from '../ComponentHeader.svelte';
+import { Anchor } from 'lucide-svelte';
+import { findGridItemParentGrid, isContainer } from '../appUtils';
+import ComponentInner from './ComponentInner.svelte';
+export let component;
+export let selected;
+export let locked = false;
+export let fullHeight;
+export let overlapped = undefined;
+export let moveMode = undefined;
+export let componentDraggedId = undefined;
+export let render = false;
+let initializing;
+const { mode, app, hoverStore, connectingInput } = getContext('AppViewerContext');
+const editorContext = getContext('AppEditorContext');
+const componentActive = editorContext?.componentActive;
+const movingcomponents = editorContext?.movingcomponents;
+$: ismoving =
+    movingcomponents != undefined && $mode == 'dnd' && $movingcomponents?.includes(component.id);
+let errorHandledByComponent = false;
+let componentContainerHeight = 0;
+let componentContainerWidth = 0;
+let inlineEditorOpened = false;
+let showSkeleton = false;
+onMount(() => {
+    setTimeout(() => {
+        showSkeleton = true;
+    }, 100);
+});
+function mouseOut() {
+    outTimeout && clearTimeout(outTimeout);
+    outTimeout = setTimeout(() => {
+        if ($hoverStore !== undefined) {
+            // In order to avoid flickering when hovering over table actions,
+            // we leave the actions to manage the hover state
+            if ($hoverStore.startsWith(`${component.id}_`)) {
+                return;
+            }
+            $hoverStore = undefined;
+        }
+    }, 50);
+}
+function componentDraggedIsNotChild(componentDraggedId, componentId) {
+    let parentGrid = findGridItemParentGrid($app, componentDraggedId);
+    return !parentGrid?.startsWith(`${componentId}-`);
+}
+function areOnTheSameSubgrid(componentDraggedId, componentId) {
+    return (findGridItemParentGrid($app, componentDraggedId) === findGridItemParentGrid($app, componentId));
+}
+let cachedComponentDraggedIsNotChild;
+let cachedAreOnTheSameSubgrid;
+function updateCache(componentDraggedId) {
+    if (componentDraggedId) {
+        cachedComponentDraggedIsNotChild = componentDraggedIsNotChild(componentDraggedId, component.id);
+        cachedAreOnTheSameSubgrid = areOnTheSameSubgrid(componentDraggedId, component.id);
+    }
+    else {
+        cachedComponentDraggedIsNotChild = undefined;
+        cachedAreOnTheSameSubgrid = undefined;
+    }
+}
+$: updateCache(componentDraggedId);
+</script>
+
+<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	on:mouseover|stopPropagation={() => {
+		outTimeout && clearTimeout(outTimeout)
+		if (component.id !== $hoverStore) {
+			$hoverStore = component.id
+		}
+	}}
+	on:mouseout|stopPropagation={mouseOut}
+	class={twMerge(
+		'h-full flex flex-col w-full component relative',
+		initializing ? 'overflow-hidden h-0' : ''
+	)}
+	data-connection-button
+>
+	{#if render}
+		{#if locked && componentActive && $componentActive && moveMode === 'move' && componentDraggedId && componentDraggedId !== component.id && cachedAreOnTheSameSubgrid}
+			<div
+				class={twMerge('absolute inset-0 bg-locked center-center flex-col z-50', 'bg-locked-hover')}
+			>
+				<div class="bg-surface p-2 shadow-sm rounded-md flex center-center flex-col gap-2">
+					<Anchor size={24} class="text-primary " />
+					<div class="text-xs"> Anchored: The component cannot be moved. </div>
+				</div>
+			</div>
+		{:else if moveMode === 'insert' && isContainer(component.type) && componentDraggedId && componentDraggedId !== component.id && cachedComponentDraggedIsNotChild}
+			<div
+				class={twMerge(
+					'absolute inset-0  flex-col rounded-md bg-blue-100 dark:bg-gray-800 bg-opacity-50',
+					'outline-dashed outline-offset-2 outline-2 outline-blue-300 dark:outline-blue-700',
+					overlapped === component?.id ? 'bg-draggedover dark:bg-draggedover-dark' : ''
+				)}
+			/>
+		{/if}
+		{#if $mode !== 'preview'}
+			<ComponentHeader
+				on:mouseover={() => {
+					outTimeout && clearTimeout(outTimeout)
+
+					if (component.id !== $hoverStore) {
+						$hoverStore = component.id
+					}
+				}}
+				hover={$hoverStore === component.id}
+				{component}
+				{selected}
+				{fullHeight}
+				connecting={$connectingInput.opened}
+				on:lock
+				on:expand
+				on:fillHeight
+				{locked}
+				{inlineEditorOpened}
+				hasInlineEditor={component.type === 'textcomponent' &&
+					component.componentInput &&
+					component.componentInput.type !== 'connected'}
+				on:triggerInlineEditor={() => {
+					inlineEditorOpened = !inlineEditorOpened
+				}}
+				{errorHandledByComponent}
+				{componentContainerWidth}
+			/>
+		{/if}
+
+		{#if ismoving}
+			<div class="absolute -top-8 w-40">
+				<button
+					class="border p-0.5 text-xs"
+					on:click={() => {
+						$movingcomponents = undefined
+					}}
+				>
+					Cancel move
+				</button>
+			</div>
+		{/if}
+	{/if}
+	<div
+		class={twMerge(
+			render ? 'h-full outline-1' : 'h-0 overflow-hidden',
+			$mode === 'dnd' ? 'bg-surface/40' : '',
+			$hoverStore === component.id && $mode !== 'preview'
+				? $connectingInput.opened
+					? 'outline outline-[#f8aa4b]'
+					: 'outline outline-blue-400'
+				: '',
+			selected && $mode !== 'preview' ? 'outline outline-blue-600' : '',
+			$mode != 'preview' ? 'cursor-pointer' : '',
+			'relative z-auto',
+			$app.css?.['app']?.['component']?.class,
+			'wm-app-component',
+			ismoving ? 'animate-pulse' : ''
+		)}
+		style={$app.css?.['app']?.['component']?.style}
+		bind:clientHeight={componentContainerHeight}
+		bind:clientWidth={componentContainerWidth}
+	>
+		<ComponentInner
+			{component}
+			{render}
+			{componentContainerHeight}
+			bind:initializing
+			bind:errorHandledByComponent
+			{inlineEditorOpened}
+		/>
+	</div>
+</div>
+{#if initializing && render && showSkeleton}
+	<!-- svelte-ignore a11y-mouse-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		on:mouseover|stopPropagation={() => {
+			if (component.id !== $hoverStore) {
+				$hoverStore = component.id
+			}
+		}}
+		on:mouseout|stopPropagation={() => {
+			if ($hoverStore !== undefined) {
+				$hoverStore = undefined
+			}
+		}}
+		class="absolute inset-0 center-center flex-col border animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms]"
+	/>
+{/if}

package/package/components/apps/editor/component/ComponentRendered.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+import type { AppComponent } from './components';
+declare const __propDef: {
+    props: {
+        component: AppComponent;
+        selected: boolean;
+        locked?: boolean | undefined;
+        fullHeight: boolean;
+        overlapped?: string | undefined;
+        moveMode?: string | undefined;
+        componentDraggedId?: string | undefined;
+        render?: boolean | undefined;
+    };
+    events: {
+        lock: CustomEvent<any>;
+        expand: CustomEvent<any>;
+        fillHeight: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentRenderedProps = typeof __propDef.props;
+export type ComponentRenderedEvents = typeof __propDef.events;
+export type ComponentRenderedSlots = typeof __propDef.slots;
+export default class ComponentRendered extends SvelteComponent<ComponentRenderedProps, ComponentRenderedEvents, ComponentRenderedSlots> {
+}
+export {};