windmill-components 1.60.3 → 1.83.1

package/components/apps/editor/component/default-codes.d.ts

@@ -0,0 +1,3 @@
+import type { AppComponent } from '.';
+export declare function defaultCode(component: string, language: string): string | undefined;
+export declare const DEFAULT_CODES: Partial<Record<AppComponent['type'], Record<'deno' | 'python3', string>>>;

package/components/apps/editor/component/default-codes.js

@@ -0,0 +1,322 @@
+export function defaultCode(component, language) {
+    return DEFAULT_CODES[component]?.[language];
+}
+export const DEFAULT_CODES = {
+    tablecomponent: {
+        deno: `export async function main() {
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]
+	}`,
+        python3: `def main():
+	return [
+		{
+			"id": 1,
+			"name": "A cell with a long name",
+			"age": 42
+		},
+		{
+			"id": 2,
+			"name": "A briefer cell",
+			"age": 84
+		}
+	]`
+    },
+    textcomponent: {
+        deno: `export async function main() {
+return "foo"
+}`,
+        python3: `def main():
+return "foo"`
+    },
+    barchartcomponent: {
+        deno: `export async function main() {
+return {
+	"data": [
+		25,
+		50,
+		25
+	],
+	"labels": [
+		"Bar",
+		"Charts",
+		"<3"
+	]
+}
+}`,
+        python3: `def main():
+return {
+	"data": [
+		25,
+		50,
+		25
+	],
+	"labels": [
+		"Bar",
+		"Charts",
+		"<3"
+	]
+}`
+    },
+    displaycomponent: {
+        deno: `export async function main() {
+	return {
+		"foo": 42
+	}
+}`,
+        python3: `def main():
+	return {
+		"foo": 42
+	}`
+    },
+    htmlcomponent: {
+        deno: `export async function main() {
+return \`<img
+src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<h1 class="absolute top-4 left-2 text-white">
+Hello world
+</h1>\`
+}`,
+        python3: `def main():
+return '''<img
+src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1024&amp;h=1280&amp;q=80"
+>
+<h1 class="absolute top-4 left-2 text-white">
+Hello world
+</h1>'''`
+    },
+    vegalitecomponent: {
+        deno: `export async function main() {
+return {
+	data: {
+		values: [
+			{ a: "A", b: 28 },
+			{ a: "B", b: 55 },
+			{ a: "C", b: 43 },
+			{ a: "D", b: 91 },
+		],
+	},
+	mark: "bar",
+	encoding: {
+		x: { field: "a", type: "ordinal" },
+		y: { field: "b", type: "quantitative" },
+	},
+}
+}`,
+        python3: `def main():
+return {
+	"data": {
+		"values": [
+			{ "a": "A", "b": 28 },
+			{ "a": "B", "b": 55 },
+			{ "a": "C", "b": 43 },
+			{ "a": "D", "b": 91 },
+		],
+	},
+	"mark": "bar",
+	"encoding": {
+		"x": { "field": "a", "type": "ordinal" },
+		"y": { "field": "b", "type": "quantitative" },
+	},
+}`
+    },
+    plotlycomponent: {
+        deno: `export async function main() {
+return {
+	type: 'bar',
+	x: [1, 2, 3, 4],
+	y: [5, 10, 2, 8],
+	marker: {
+		color: '#C8A2C8',
+		line: {
+			width: 2.5				  
+		}
+	}
+};
+}`,
+        python3: `def main():
+return {
+	"type": "bar",
+	"x": [1, 2, 3, 4],
+	"y": [5, 10, 2, 8],
+	"marker": {
+		"color": "#C8A2C8",
+		"line": {
+			"width": 2.5				  
+		}
+	}
+}`
+    },
+    piechartcomponent: {
+        deno: `export async function main() {
+return {
+	"data": [
+		25,
+		50,
+		25
+	],
+	"labels": [
+		"Pie",
+		"Charts",
+		"<3"
+	]
+}
+}`,
+        python3: `def main():
+return {
+	"data": [
+		25,
+		50,
+		25
+	],
+	"labels": [
+		"Pie",
+		"Charts",
+		"<3"
+	]
+}`
+    },
+    scatterchartcomponent: {
+        deno: `export async function main() {
+return [
+	{
+		"label": "foo",
+		"data": [
+			{ "x": 25, "y": 50 },
+			{ "x": 23, "y": 23 },
+			{ "x": 12, "y": 37 }
+		],
+		"backgroundColor": "rgb(255, 12, 137)"
+	},
+	{
+		"label": "bar",
+		"data": [
+			{ "x": 32, "y": 32 },
+			{ "x": 25, "y": 42 },
+			{ "x": 3, "y": 27 }
+		],
+		"backgroundColor": "orange"
+	}
+]
+}`,
+        python3: `def main():
+return [
+	{
+		"label": "foo",
+		"data": [
+			{ "x": 25, "y": 50 },
+			{ "x": 23, "y": 23 },
+			{ "x": 12, "y": 37 }
+		],
+		"backgroundColor": "rgb(255, 12, 137)"
+	},
+	{
+		"label": "bar",
+		"data": [
+			{ "x": 32, "y": 32 },
+			{ "x": 25, "y": 42 },
+			{ "x": 3, "y": 27 }
+		],
+		"backgroundColor": "orange"
+	}
+]`
+    },
+    timeseriescomponent: {
+        deno: `export async function main() {
+return [
+	{
+		"label": "foo",
+		"data": [
+			{
+				"x": "2021-11-06 23:39:30",
+				"y": 50
+			},
+			{
+				"x": "2021-11-07 01:00:28",
+				"y": 60
+			},
+			{
+				"x": "2021-11-07 09:00:28",
+				"y": 20
+			}
+		],
+		"backgroundColor": "rgb(255, 12, 137)"
+	},
+	{
+		"label": "bar",
+		"data": [
+			{
+				"x": "2021-11-06 23:39:30",
+				"y": 20
+			},
+			{
+				"x": "2021-11-07 01:00:28",
+				"y": 13
+			},
+			{
+				"x": "2021-11-07 09:00:28",
+				"y": 45
+			}
+		],
+		"backgroundColor": "orange"
+	}
+]
+}`,
+        python3: `def main():
+return [
+	{
+		"label": "foo",
+		"data": [
+			{
+				"x": "2021-11-06 23:39:30",
+				"y": 50
+			},
+			{
+				"x": "2021-11-07 01:00:28",
+				"y": 60
+			},
+			{
+				"x": "2021-11-07 09:00:28",
+				"y": 20
+			}
+		],
+		"backgroundColor": "rgb(255, 12, 137)"
+	},
+	{
+		"label": "bar",
+		"data": [
+			{
+				"x": "2021-11-06 23:39:30",
+				"y": 20
+			},
+			{
+				"x": "2021-11-07 01:00:28",
+				"y": 13
+			},
+			{
+				"x": "2021-11-07 09:00:28",
+				"y": 45
+			}
+		],
+		"backgroundColor": "orange"
+	}
+]`
+    },
+    iconcomponent: {
+        deno: `export async function main() {
+return "smile";
+}`,
+        python3: `def main():
+return "smile"`
+    }
+};

package/components/apps/editor/component/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Component } from './Component.svelte';
+export * from './components';
+export * from './default-codes';
+export * from './sets';

package/components/apps/editor/component/index.js

@@ -0,0 +1,4 @@
+export { default as Component } from './Component.svelte';
+export * from './components';
+export * from './default-codes';
+export * from './sets';

package/components/apps/editor/component/sets.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentSet } from '../../types';
+export declare const COMPONENT_SETS: readonly [ComponentSet, ComponentSet, ComponentSet, ComponentSet];

package/components/apps/editor/component/sets.js

@@ -0,0 +1,56 @@
+const layout = {
+    title: 'Layout',
+    components: [
+        'tabscomponent',
+        'containercomponent',
+        'horizontaldividercomponent',
+        'verticaldividercomponent',
+        'drawercomponent',
+        'verticalsplitpanescomponent',
+        'horizontalsplitpanescomponent'
+    ]
+};
+const buttons = {
+    title: 'Buttons',
+    components: ['buttoncomponent', 'formcomponent', 'formbuttoncomponent']
+};
+const inputs = {
+    title: 'Inputs',
+    components: [
+        'textinputcomponent',
+        'textareainputcomponent',
+        'passwordinputcomponent',
+        'emailinputcomponent',
+        'numberinputcomponent',
+        'currencycomponent',
+        'slidercomponent',
+        'rangecomponent',
+        'dateinputcomponent',
+        'fileinputcomponent',
+        'checkboxcomponent',
+        'selectcomponent',
+        'resourceselectcomponent',
+        'multiselectcomponent'
+    ]
+};
+const display = {
+    title: 'Display',
+    components: [
+        'textcomponent',
+        'iconcomponent',
+        'imagecomponent',
+        'mapcomponent',
+        'htmlcomponent',
+        'tablecomponent',
+        'aggridcomponent',
+        'barchartcomponent',
+        'piechartcomponent',
+        'vegalitecomponent',
+        'plotlycomponent',
+        'scatterchartcomponent',
+        'timeseriescomponent',
+        'pdfcomponent',
+        'displaycomponent'
+    ]
+};
+export const COMPONENT_SETS = [layout, buttons, inputs, display];

package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -1,117 +1,101 @@
-<script>import { slide } from 'svelte/transition';
-import Icon from 'svelte-awesome';
-import { displayData } from '../../utils';
-import { componentSets } from './data';
-import gridHelp from 'svelte-grid/build/helper/index.mjs';
-import { getContext, onMount } from 'svelte';
-import { getNextId } from '../../../flows/flowStateUtils';
-import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
-import { isOpenStore } from './store';
-import { gridColumns } from '../../gridUtils';
+<script>import { getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
 import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
-const { app, selectedComponent } = getContext('AppEditorContext');
-function getRecommendedDimensionsByComponent(componentType, column) {
-    // Dimensions key formula: <mobile width>:<mobile height>-<desktop width>:<desktop height>
-    const dimensions = {
-        '1:1-3:1': ['textcomponent'],
-        '1:1-2:1': ['buttoncomponent', 'checkboxcomponent'],
-        '1:2-1:2': ['htmlcomponent'],
-        '2:1-3:1': [
-            'textinputcomponent',
-            'numberinputcomponent',
-            'selectcomponent',
-            'passwordinputcomponent',
-            'dateinputcomponent'
-        ],
-        '3:5-6:5': ['formcomponent'],
-        '2:8-6:8': [
-            'timeseriescomponent',
-            'barchartcomponent',
-            'piechartcomponent',
-            'displaycomponent',
-            'scatterchartcomponent'
-        ],
-        '3:10-6:10': ['tablecomponent']
-    };
-    // Finds the key that is associated with the component type and extracts the dimensions from it
-    const [dimension] = Object.entries(dimensions).find(([_, value]) => value.includes(componentType)) || ['2:1-2:1'];
-    const size = dimension.split('-')[column === 3 ? 0 : 1].split(':');
-    return { w: +size[0], h: +size[1] };
-}
-function addComponent(appComponent) {
+import { components as componentsRecord, COMPONENT_SETS } from '../component';
+import ListItem from './ListItem.svelte';
+import { appComponentFromType, insertNewGridItem } from '../appUtils';
+import { X } from 'lucide-svelte';
+import { push } from '../../../../history';
+import { flip } from 'svelte/animate';
+const { app, selectedComponent, focusedGrid, worldStore } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+function addComponent(appComponentType) {
+    push(history, $app);
     $dirtyStore = true;
-    const grid = $app.grid ?? [];
-    const id = getNextId(grid.map((gridItem) => gridItem.data.id));
-    appComponent.id = id;
-    const newComponent = {
-        fixed: false,
-        resizable: true,
-        draggable: true,
-        customDragger: false,
-        customResizer: false,
-        x: 0,
-        y: 0
-    };
-    let newData = JSON.parse(JSON.stringify(appComponent));
-    const newItem = {
-        data: newData,
-        id: id
-    };
-    gridColumns.forEach((column) => {
-        const rec = getRecommendedDimensionsByComponent(appComponent.type, column);
-        newItem[column] = {
-            ...newComponent,
-            min: { w: 1, h: 1 },
-            max: { w: column, h: 100 },
-            w: rec.w,
-            h: rec.h
-        };
-        const position = gridHelp.findSpace(newItem, grid, column);
-        newItem[column] = { ...newItem[column], ...position };
-    });
-    $app.grid = [...grid, newItem];
-    $selectedComponent = id;
+    const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
+    $selectedComponent = [id];
+    $app = $app;
+    $worldStore = $worldStore;
 }
-onMount(() => {
-    isOpenStore.addItems(componentSets.map((set) => ({ [set.title]: true })));
-});
+let search = '';
+// Filter COMPONENT_SETS by search
+$: componentsFiltered = COMPONENT_SETS.map((set) => ({
+    ...set,
+    components: set.components.filter((component) => {
+        const name = componentsRecord[component].name.toLowerCase();
+        return name.includes(search.toLowerCase());
+    })
+}));
 </script>
 
-{#each componentSets as { title, components }, index (index)}
-	{@const isOpen = $isOpenStore[title]}
-	<section class="mt-1 mb-2 px-2">
-		<button
-			on:click|preventDefault={() => isOpenStore.toggle(title)}
-			class="w-full flex justify-between items-center text-gray-700 px-2 py-1 
-				rounded-sm duration-200 hover:bg-gray-100"
+<section class="p-2 sticky bg-white w-full z-10 top-0">
+	<div class="relative">
+		<input
+			bind:value={search}
+			class="px-2 py-1 border border-gray-300 rounded-sm {search ? 'pr-8' : ''}"
+			placeholder="Search components..."
+		/>
+		{#if search}
+			<button
+				class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-200 rounded-full p-0.5"
+				on:click|stopPropagation|preventDefault={() => (search = '')}
+			>
+				<X size="14" />
+			</button>
+		{/if}
+	</div>
+	<!-- {#if $focusedGrid}
+		<Badge color="indigo" baseClass="w-full">
+			<div class="flex flex-row gap-2 justify-center items-center">
+				<div>{`Subgrid: ${$focusedGrid.parentComponentId} (${$focusedGrid.subGridIndex})`}</div>
+				<button
+					on:click={() => {
+						$selectedComponent = undefined
+						$focusedGrid = undefined
+					}}
+				>
+					<X size={14} />
+				</button>
+			</div>
+		</Badge>
+	{/if} -->
+</section>
+
+<div class="relative">
+	{#if componentsFiltered.reduce((acc, { components }) => acc + components.length, 0) === 0}
+		<div
+			in:fade|local={{ duration: 50, delay: 50 }}
+			out:fade|local={{ duration: 50 }}
+			class="absolute left-0 top-0 w-full text-sm text-gray-500 text-center py-6 px-2"
 		>
-			<h1 class="text-sm font-semibold text-left">{title}</h1>
-			<Icon data={faAngleDown} class="rotate-0 duration-300 {isOpen ? '!rotate-180' : ''}" />
-		</button>
-		{#if isOpen}
-			<div transition:slide|local={{ duration: 300 }}>
+			No components found
+		</div>
+	{:else}
+		<div in:fade|local={{ duration: 50, delay: 50 }} out:fade|local={{ duration: 50 }}>
+			{#each componentsFiltered as { title, components }, index (index)}
 				{#if components.length}
-					<div class="flex flex-wrap gap-2 py-2">
-						{#each components as item}
-							<button
-								on:click={() => addComponent(item)}
-								title={displayData[item.type].name}
-								class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
-									justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
-							>
-								<svelte:component this={displayData[item.type].icon} />
-								<div class="text-xs w-full text-center ellipsize">
-									{displayData[item.type].name}
-								</div>
-							</button>
-						{/each}
-					</div>
-				{:else}
-					<div class="text-xs text-gray-500 py-1 px-2">
-						There are no components in this group yet
+					<div transition:slide|local={{ duration: 100 }}>
+						<ListItem title={`${title} (${components.length})`}>
+							<div class="flex flex-wrap gap-2 py-2">
+								{#each components as item (item)}
+									<button
+										animate:flip={{ duration: 100 }}
+										on:click={() => addComponent(item)}
+										title={componentsRecord[item].name}
+										class="border w-24 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+										justify-center bg-white rounded-md hover:bg-gray-100 duration-200"
+									>
+										<svelte:component this={componentsRecord[item].icon} />
+										<div class="text-xs w-full text-center ellipsize">
+											{componentsRecord[item].name}
+										</div>
+									</button>
+								{/each}
+							</div>
+						</ListItem>
 					</div>
 				{/if}
-			</div>
-		{/if}
-	</section>
-{/each}
+			{/each}
+		</div>
+	{/if}
+</div>

package/components/apps/editor/componentsPanel/CssProperty.svelte

@@ -0,0 +1,83 @@
+<script>import { Paintbrush2 } from 'lucide-svelte';
+import { createEventDispatcher, getContext } from 'svelte';
+import { fade } from 'svelte/transition';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
+import { Button, ClearableInput } from '../../../common';
+import Popover from '../../../Popover.svelte';
+import QuickStyleMenu from './QuickStyleMenu.svelte';
+export let name;
+export let value = {};
+export let forceStyle = false;
+export let forceClass = false;
+export let quickStyleProperties = undefined;
+const { app } = getContext('AppViewerContext');
+const dispatch = createEventDispatcher();
+let isQuickMenuOpen = false;
+$: dispatch('change', value);
+function toggleQuickMenu() {
+    isQuickMenuOpen = !isQuickMenuOpen;
+}
+</script>
+
+<div
+	class="sticky top-0 z-20 text-lg bg-white font-semibold [font-variant:small-caps] text-gray-700 pt-2 pb-1"
+>
+	{addWhitespaceBeforeCapitals(name)}
+</div>
+{#if value}
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 ml-0.5">
+		{#if value.style !== undefined || forceStyle}
+			<div class="pb-2">
+				<!-- svelte-ignore a11y-label-has-associated-control -->
+				<label class="block">
+					<div class="text-sm font-medium text-gray-600 pb-0.5"> Style </div>
+					<div class="flex gap-1">
+						<div class="relative grow">
+							<ClearableInput
+								bind:value={value.style}
+								type="textarea"
+								wrapperClass="h-full min-h-[72px]"
+								inputClass="h-full"
+							/>
+						</div>
+						<div class="flex flex-col gap-1">
+							{#if quickStyleProperties?.length}
+								<Popover placement="bottom" notClickable disapperTimoout={0}>
+									<Button
+										variant="border"
+										color="light"
+										size="xs"
+										btnClasses="!p-1 !w-[34px] !h-[34px] {isQuickMenuOpen
+											? '!bg-gray-200/60 hover:!bg-gray-200'
+											: ''}"
+										aria-label="{isQuickMenuOpen ? 'Close' : 'Open'} styling menu"
+										on:click={toggleQuickMenu}
+									>
+										<Paintbrush2 size={18} />
+									</Button>
+									<svelte:fragment slot="text">
+										{isQuickMenuOpen ? 'Close' : 'Open'} styling menu
+									</svelte:fragment>
+								</Popover>
+							{/if}
+						</div>
+					</div>
+				</label>
+				{#if quickStyleProperties?.length && isQuickMenuOpen}
+					<div transition:fade|local={{ duration: 200 }} class="w-full pt-1">
+						<QuickStyleMenu bind:value={value.style} properties={quickStyleProperties} />
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if value.class !== undefined || forceClass}
+			<!-- svelte-ignore a11y-label-has-associated-control -->
+			<label class="block">
+				<div class="text-sm font-medium text-gray-600 pb-0.5"> Tailwind classes </div>
+				<div class="relative">
+					<ClearableInput bind:value={value.class} />
+				</div>
+			</label>
+		{/if}
+	</div>
+{/if}