windmill-components 1.60.4 → 1.70.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,47 @@
+const layout = {
+    title: 'Layout',
+    components: [
+        'tabscomponent',
+        'containercomponent',
+        'horizontaldividercomponent',
+        'verticaldividercomponent'
+    ]
+};
+const buttons = {
+    title: 'Buttons',
+    components: ['buttoncomponent', 'formcomponent', 'formbuttoncomponent']
+};
+const inputs = {
+    title: 'Inputs',
+    components: [
+        'textinputcomponent',
+        'passwordinputcomponent',
+        'numberinputcomponent',
+        'currencycomponent',
+        'slidercomponent',
+        'rangecomponent',
+        'dateinputcomponent',
+        'fileinputcomponent',
+        'checkboxcomponent',
+        'selectcomponent'
+    ]
+};
+const display = {
+    title: 'Display',
+    components: [
+        'textcomponent',
+        'iconcomponent',
+        'imagecomponent',
+        'htmlcomponent',
+        'tablecomponent',
+        'aggridcomponent',
+        'barchartcomponent',
+        'piechartcomponent',
+        'vegalitecomponent',
+        'plotlycomponent',
+        'scatterchartcomponent',
+        'timeseriescomponent',
+        'displaycomponent',
+    ]
+};
+export const COMPONENT_SETS = [layout, buttons, inputs, display];

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

@@ -1,118 +1,42 @@
-<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';
+<script>import { getContext, onMount } from 'svelte';
 import { isOpenStore } from './store';
-import { gridColumns } from '../../gridUtils';
 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';
+const TITLE_PREFIX = 'Component.';
+const { app, selectedComponent, focusedGrid } = getContext('AppEditorContext');
+function addComponent(appComponentType) {
     $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 })));
+    isOpenStore.addItems(COMPONENT_SETS.map((set) => ({ [TITLE_PREFIX + set.title]: true })));
 });
 </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"
-		>
-			<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 }}>
-				{#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>
-				{/if}
+{#each COMPONENT_SETS as { title, components }, index (index)}
+	<ListItem {title} prefix={TITLE_PREFIX}>
+		{#if components.length}
+			<div class="flex flex-wrap gap-2 py-2">
+				{#each components as item}
+					<button
+						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>
+		{:else}
+			<div class="text-xs text-gray-500 py-1 px-2"> There are no components in this group yet </div>
 		{/if}
-	</section>
+	</ListItem>
 {/each}

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

@@ -0,0 +1,31 @@
+<script>export let name;
+export let value;
+</script>
+
+<div class="text-sm font-semibold text-gray-500 capitalize pt-2">
+	{name}
+</div>
+{#if value}
+	<div class="border-l border-gray-400/80 py-1 pl-3.5 mt-1 ml-0.5">
+		<label class="block pb-2">
+			<div class="text-xs font-medium pb-0.5">
+				Style
+			</div>
+			<input
+				type="text"
+				bind:value={value.style}
+				on:focus
+			/>
+		</label>
+		<label class="block">
+			<div class="text-xs font-medium pb-0.5">
+				Tailwind classes
+			</div>
+			<input
+				type="text"
+				bind:value={value.class}
+				on:focus
+			/>
+		</label>
+	</div>
+{/if}

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

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ComponentCssProperty } from "../../types";
+declare const __propDef: {
+    props: {
+        name: string;
+        value: ComponentCssProperty | undefined;
+    };
+    events: {
+        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 {};