windmill-components 1.60.3 → 1.83.1

package/components/apps/components/display/AppHtml.svelte

@@ -0,0 +1,56 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
+export let id;
+export let componentInput;
+export let initializing = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
+const outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let result = undefined;
+let h = undefined;
+let w = undefined;
+$: css = concatCustomCss($app.css?.htmlcomponent, customCss);
+</script>
+
+<div
+	on:pointerdown={(e) => {
+		e?.preventDefault()
+	}}
+	class="h-full w-full"
+	bind:clientHeight={h}
+	bind:clientWidth={w}
+>
+	<button
+		class="absolute bottom-0 left-0 text-xs border px-2 py-0.5 bg-white/80"
+		on:click={() => ($selectedComponent = [id])}>Select</button
+	>
+	<RunnableWrapper
+		{outputs}
+		{render}
+		autoRefresh
+		{componentInput}
+		{id}
+		bind:initializing
+		bind:result
+	>
+		{#key result}
+			<iframe
+				frameborder="0"
+				style="height: {h}px; width: {w}px; {css?.container?.style ?? ''}"
+				class="p-0 {css?.container?.class ?? ''}"
+				title="sandbox"
+				srcdoc={result
+					? '<scr' + `ipt type="application/javascript" src="/tailwind.js"></script>` + result
+					: 'No html'}
+			/>
+		{/key}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div on:click|stopPropagation class="absolute top-0 h-full w-full" />
+	</RunnableWrapper>
+</div>

package/components/apps/components/{dataDisplay → display}/AppHtml.svelte.d.ts

@@ -1,15 +1,17 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: Record<string, AppInput>;
-        staticOutputs?: string[] | undefined;
+        initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'htmlcomponent'> | undefined;
+        render: boolean;
     };
     events: {
+        click: MouseEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
@@ -18,6 +20,5 @@ export type AppHtmlProps = typeof __propDef.props;
 export type AppHtmlEvents = typeof __propDef.events;
 export type AppHtmlSlots = typeof __propDef.slots;
 export default class AppHtml extends SvelteComponentTyped<AppHtmlProps, AppHtmlEvents, AppHtmlSlots> {
-    get staticOutputs(): string[];
 }
 export {};

package/components/apps/components/display/AppIcon.svelte

@@ -0,0 +1,49 @@
+<script>import { getContext } from 'svelte';
+import { initOutput } from '../../editor/appUtils';
+import { concatCustomCss } from '../../utils';
+import { AlignWrapper, InputValue } from '../helpers';
+import { loadIcon } from '../icon';
+export let id;
+export let horizontalAlignment = 'left';
+export let verticalAlignment = undefined;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+let icon = undefined;
+let size;
+let color;
+let strokeWidth;
+let iconComponent;
+$: handleIcon(icon);
+async function handleIcon(i) {
+    iconComponent = i ? await loadIcon(i) : undefined;
+}
+$: css = concatCustomCss($app.css?.iconcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.icon} bind:value={icon} />
+<InputValue {id} input={configuration.size} bind:value={size} />
+<InputValue {id} input={configuration.color} bind:value={color} />
+<InputValue {id} input={configuration.strokeWidth} bind:value={strokeWidth} />
+
+<AlignWrapper
+	{render}
+	{horizontalAlignment}
+	{verticalAlignment}
+	class={css?.container?.class ?? ''}
+	style={css?.container?.style ?? ''}
+>
+	{#if icon && iconComponent}
+		<svelte:component
+			this={iconComponent}
+			size={size || 24}
+			color={color || 'currentColor'}
+			strokeWidth={strokeWidth || 2}
+			class={css?.icon?.class ?? ''}
+			style={css?.icon?.style ?? ''}
+		/>
+	{/if}
+</AlignWrapper>

package/components/apps/components/display/AppIcon.svelte.d.ts

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

package/components/apps/components/display/AppImage.svelte

@@ -0,0 +1,46 @@
+<script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components, selectOptions } from '../../editor/component';
+import { concatCustomCss } from '../../utils';
+import Loader from '../helpers/Loader.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+let resolvedConfig = initConfig(components['imagecomponent'].initialData.configuration, configuration);
+const { app, worldStore } = getContext('AppViewerContext');
+const fit = {
+    cover: 'object-cover',
+    contain: 'object-contain',
+    fill: 'object-fill'
+};
+//used so that we can count number of outputs setup for first refresh
+initOutput($worldStore, id, {});
+$: css = concatCustomCss($app.css?.imagecomponent, customCss);
+</script>
+
+{#each Object.keys(components['imagecomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#if render}
+	<Loader loading={resolvedConfig.source == undefined}>
+		<img
+			on:pointerdown|preventDefault
+			src={resolvedConfig.source}
+			alt={resolvedConfig.altText}
+			style={css?.image?.style ?? ''}
+			class={twMerge(
+				`w-full h-full ${fit[resolvedConfig.imageFit || 'cover']}`,
+				css?.image?.class ?? ''
+			)}
+		/>
+	</Loader>
+{/if}

package/components/apps/components/display/AppImage.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'imagecomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppImageProps = typeof __propDef.props;
+export type AppImageEvents = typeof __propDef.events;
+export type AppImageSlots = typeof __propDef.slots;
+export default class AppImage extends SvelteComponentTyped<AppImageProps, AppImageEvents, AppImageSlots> {
+}
+export {};

package/components/apps/components/display/AppMap.svelte

@@ -0,0 +1,221 @@
+<script>import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
+import { InputValue } from '../helpers';
+import { twMerge } from 'tailwind-merge';
+import { Map, View, Feature } from 'ol';
+import { useGeographic } from 'ol/proj';
+import { OSM, Vector as VectorSource } from 'ol/source';
+import { Vector as VectorLayer, Tile as TileLayer } from 'ol/layer';
+import { Point } from 'ol/geom';
+import { defaults as defaultControls } from 'ol/control';
+import { findGridItem, initOutput } from '../../editor/appUtils';
+const LAYER_NAME = {
+    MARKER: 'Marker'
+};
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent, connectingInput, focusedGrid, mode } = getContext('AppViewerContext');
+let outputs = initOutput($worldStore, id, {
+    mapRegion: {
+        topLeft: { lat: 0, lon: 0 },
+        bottomRight: { lat: 0, lon: 0 }
+    }
+});
+let map;
+let mapElement;
+let longitude = undefined;
+let latitude = undefined;
+let zoom = undefined;
+// If string, it's a JSON file read as text
+let markers = undefined;
+$: if (map && longitude && latitude) {
+    map.getView().setCenter([longitude, latitude]);
+}
+$: if (map && zoom) {
+    map.getView().setZoom(zoom);
+}
+$: if (map && markers) {
+    updateMarkers();
+}
+function selectComponent() {
+    if (!$connectingInput.opened) {
+        $selectedComponent = [id];
+        $focusedGrid = undefined;
+    }
+}
+function getLayersByName(name) {
+    return map
+        .getLayers()
+        .getArray()
+        .filter((l) => l.getProperties().name === LAYER_NAME[name]);
+}
+function getMarkerArray() {
+    let array = undefined;
+    if (typeof markers === 'string') {
+        try {
+            array = JSON.parse(markers);
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+    else {
+        array = markers;
+    }
+    return array?.filter((m) => !isNaN(+m.lat) && !isNaN(+m.lon));
+}
+function createMarkerLayers() {
+    const markerArray = getMarkerArray();
+    return markerArray?.map((m) => {
+        return new VectorLayer({
+            properties: {
+                name: LAYER_NAME.MARKER
+            },
+            source: new VectorSource({
+                features: [
+                    new Feature({
+                        geometry: new Point([+m.lon, +m.lat]),
+                        name: m.title
+                    })
+                ]
+            }),
+            style: {
+                'circle-radius': m.radius ?? 7,
+                'circle-fill-color': m.color ?? '#dc2626',
+                'circle-stroke-width': m.strokeWidth ?? 3,
+                'circle-stroke-color': m.strokeColor ?? '#fca5a5'
+            }
+        });
+    });
+}
+function updateMarkers() {
+    const layers = getLayersByName('MARKER');
+    if (layers?.length) {
+        layers.forEach((l) => map.removeLayer(l));
+    }
+    createMarkerLayers()?.forEach((l) => map.addLayer(l));
+}
+$: if (!map && mapElement) {
+    useGeographic();
+    map = new Map({
+        target: mapElement,
+        layers: [
+            new TileLayer({
+                source: new OSM()
+            }),
+            ...(createMarkerLayers() || [])
+        ],
+        view: new View({
+            center: [longitude ?? 0, latitude ?? 0],
+            zoom: zoom ?? 2
+        }),
+        controls: defaultControls({
+            attribution: false
+        })
+    });
+    updateRegionOutput();
+}
+$: css = concatCustomCss($app.css?.mapcomponent, customCss);
+function updateRegionOutput() {
+    if (map) {
+        let extent = map.getView().calculateExtent(map.getSize());
+        const [left, bottom, right, top] = extent;
+        if (outputs?.mapRegion) {
+            outputs.mapRegion.set({
+                topLeft: { lat: top, lon: left },
+                bottomRight: { lat: bottom, lon: right }
+            });
+        }
+    }
+}
+function handleSyncRegion() {
+    const gridItem = findGridItem($app, id);
+    if (!map || !gridItem) {
+        return;
+    }
+    const z = map.getView().getZoom();
+    updateRegionOutput();
+    if (z) {
+        //@ts-ignore
+        gridItem.data.configuration.zoom.value = z;
+    }
+    const center = map.getView().getCenter();
+    if (!center) {
+        return;
+    }
+    if (gridItem) {
+        //@ts-ignore
+        gridItem.data.configuration.longitude.value = center[0];
+        //@ts-ignore
+        gridItem.data.configuration.latitude.value = center[1];
+    }
+}
+</script>
+
+<InputValue {id} input={configuration.longitude} bind:value={longitude} />
+<InputValue {id} input={configuration.latitude} bind:value={latitude} />
+<InputValue {id} input={configuration.zoom} bind:value={zoom} />
+<InputValue {id} input={configuration.markers} bind:value={markers} />
+
+{#if render}
+	<div class="relative h-full w-full">
+		<div
+			on:pointerdown|stopPropagation={selectComponent}
+			bind:this={mapElement}
+			class={twMerge(`w-full h-full`, css?.map?.class ?? '')}
+			style={css?.map?.style ?? ''}
+		/>
+
+		{#if $mode !== 'preview'}
+			<div
+				class="absolute bottom-0 left-0 px-1 py-0.5 bg-indigo-500 text-white text-2xs"
+				on:pointerdown={handleSyncRegion}
+			>
+				Set region
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style global>
+	:global(.ol-overlaycontainer-stopevent) {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-start
+}
+	:global(.ol-control) :global(button) {
+    margin-top: 0.25rem;
+    margin-right: 0.25rem;
+    height: 1.75rem;
+    width: 1.75rem;
+    border-radius: 0.25rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(209 213 219 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    --tw-text-opacity: 1;
+    color: rgb(55 65 81 / var(--tw-text-opacity));
+    --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    transition-duration: 200ms;
+    display: flex;
+    justify-content: center;
+    align-items: center
+}
+	:global(.ol-control) :global(button:hover) {
+    --tw-border-opacity: 1;
+    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+}
+	:global(.ol-control) :global(button:focus) {
+    --tw-border-opacity: 1;
+    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: rgb(243 244 246 / var(--tw-bg-opacity))
+}</style>

package/components/apps/components/display/AppMap.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'mapcomponent'> | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMapProps = typeof __propDef.props;
+export type AppMapEvents = typeof __propDef.events;
+export type AppMapSlots = typeof __propDef.slots;
+export default class AppMap extends SvelteComponentTyped<AppMapProps, AppMapEvents, AppMapSlots> {
+}
+export {};