windmill-components 1.60.4 → 1.75.0

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,55 @@
+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',
+        '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,118 +1,85 @@
-<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',
-            'vegalitecomponent'
-        ],
-        '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 { insertNewGridItem } from '../appUtils';
+import { X } from 'lucide-svelte';
+import { push } from '../../../../history';
+import { flip } from 'svelte/animate';
+const { app, selectedComponent, focusedGrid } = 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];
+    const data = componentsRecord[appComponentType].data;
+    const id = insertNewGridItem($app, data, $focusedGrid);
     $selectedComponent = id;
 }
-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-20 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>
+</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: 300 }}>
+						<ListItem title={`${title} (${components.length})`}>
+							<div class="flex flex-wrap gap-2 py-2">
+								{#each components as item (item)}
+									<button
+										animate:flip={{ duration: 300 }}
+										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,67 @@
+<script>import { X } from 'lucide-svelte';
+import { fade } from 'svelte/transition';
+import { addWhitespaceBeforeCapitals } from '../../../../utils';
+export let name;
+export let value;
+function reset(property) {
+    if (value) {
+        value[property] = '';
+    }
+}
+</script>
+
+<div class="text-sm font-semibold text-gray-500 capitalize pt-2">
+	{addWhitespaceBeforeCapitals(name)}
+</div>
+{#if value}
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
+		{#if value.style !== undefined}
+			<label class="block pb-2">
+				<div class="text-xs font-medium pb-0.5"> Style </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.style}
+						on:focus
+					/>
+					{#if value?.style}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove styles"
+							on:click|preventDefault|stopPropagation={() => reset('style')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
+		{/if}
+		{#if value.class !== undefined}
+			<label class="block">
+				<div class="text-xs font-medium pb-0.5"> Tailwind classes </div>
+				<div class="relative">
+					<input
+						on:keydown|stopPropagation
+						type="text"
+						class="!pr-7"
+						bind:value={value.class}
+						on:focus
+					/>
+					{#if value?.class}
+						<button
+							transition:fade|local={{ duration: 100 }}
+							class="absolute z-10 top-1.5 right-1 rounded-full p-1 duration-200 hover:bg-gray-200"
+							aria-label="Remove classes"
+							on:click|preventDefault|stopPropagation={() => reset('class')}
+						>
+							<X size={14} />
+						</button>
+					{/if}
+				</div>
+			</label>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCssProperty } from '../../types';
+declare const __propDef: {
+    props: {
+        name: string;
+        value: ComponentCssProperty | undefined;
+    };
+    events: {
+        keydown: KeyboardEvent;
+        focus: FocusEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CssPropertyProps = typeof __propDef.props;
+export type CssPropertyEvents = typeof __propDef.events;
+export type CssPropertySlots = typeof __propDef.slots;
+export default class CssProperty extends SvelteComponentTyped<CssPropertyProps, CssPropertyEvents, CssPropertySlots> {
+}
+export {};