windmill-components 1.87.0 → 1.89.0

package/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'], Partial<Record<'deno' | 'python3' | 'go' | 'bash' | 'pgsql' | 'mysql', string>>>>;

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

@@ -0,0 +1,457 @@
+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
+		}
+	]`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return query.rows;
+}`
+    },
+    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"
+		]
+	}`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return {
+		data: query.rows.map((row) => row['0']),
+		labels: query.rows.map((row) => row['1']?.slice(0, 6))
+	};
+}`
+    },
+    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" },
+		},
+	}`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return {
+		data: {
+			values: query.rows.map((row) => {
+				row['1'] = row['1']?.slice(0, 6);
+				return row;
+			})
+		},
+		mark: "bar",
+		encoding: {
+			x: { field: "1", type: "ordinal" },
+			y: { field: "0", 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				  
+			}
+		}
+	}`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return {
+		type: 'bar',
+		x: query.rows.map((row) => row['1']?.slice(0, 6)),
+		y: query.rows.map((row) => row['0']),
+		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"
+		]
+	}`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql"> = "$res:f/examples/demodb") {
+	const query = await pgSql(db)\`SELECT * FROM demo;\`;
+	return {
+		data: query.rows.map((row) => row['0']),
+		labels: query.rows.map((row) => row['1']?.slice(0, 6))
+	};
+}`
+    },
+    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"
+		}
+	]`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v${__pkg__.version}/mod.ts";
+
+export async function main(db: Resource<"postgresql">) {
+	try {
+		const query = await pgSql(db)\`SELECT * FROM demo;\`;
+    const rows = query.rows.map((row, i) => ({
+      x: row['0'],
+      y: query.rows[query.rows.length - (i + 1)]['0']
+    }))
+		return [
+      {
+				label: "foo",
+				data: rows,
+				backgroundColor: "rgb(255, 12, 137)"
+			},
+			{
+				label: "bar",
+				data: rows.map(({x, y}) => ({
+          x: x * 2,
+          y: y * 1.5
+        })),
+				backgroundColor: "orange"
+			}
+    ];
+	} catch (e) {
+		return [];
+	}
+}`
+    },
+    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"
+		}
+	]`,
+        pgsql: `import {
+	pgSql,
+	type Resource,
+} from "https://deno.land/x/windmill@v1.88.1/mod.ts";
+
+export async function main(db: Resource<"postgresql">) {
+  try {
+    const query = await pgSql(db)\`SELECT * FROM demo;\`;
+    const rows = query.rows.map((row, i) => ({
+      x: new Date(Date.now() - (i * 1000 * 60 * 60 * 24)).toISOString(),
+      y: row['0']
+    }))
+    return [
+      {
+        label: "foo",
+        data: rows,
+        backgroundColor: "rgb(255, 12, 137)"
+      },
+      {
+        label: "bar",
+        data: rows.map(({x, y}) => ({
+          x,
+          y: y * 2
+        })),
+        backgroundColor: "orange"
+      }
+    ];
+  } catch(e) {
+    return [];
+  }
+}`
+    },
+    iconcomponent: {
+        deno: `export async function main() {
+	return "Smile";
+}`,
+        python3: `def main():
+	return "Smile"`
+    }
+};

package/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/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/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/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/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -0,0 +1,87 @@
+<script>import { getContext } from 'svelte';
+import { fade, slide } from 'svelte/transition';
+import { dirtyStore } from '../../../common/confirmationModal/dirtyStore';
+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 } = getContext('AppViewerContext');
+const { history } = getContext('AppEditorContext');
+function addComponent(appComponentType) {
+    push(history, $app);
+    $dirtyStore = true;
+    const id = insertNewGridItem($app, appComponentFromType(appComponentType), $focusedGrid);
+    $selectedComponent = [id];
+    $app = $app;
+}
+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>
+
+<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 !pr-6"
+			placeholder="Search components..."
+		/>
+
+		{#if search !== ''}
+			<button
+				class="absolute right-2 top-1/2 transform -translate-y-1/2 hover:bg-gray-500 bg-gray-300 transition-all rounded-full p-0.5"
+				on:click|stopPropagation|preventDefault={() => (search = '')}
+			>
+				<X size="10" color="white" />
+			</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"
+		>
+			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 transition:slide|local={{ duration: 100 }}>
+						<ListItem title={`${title} (${components.length})`}>
+							<div class="flex flex-wrap gap-3 py-2">
+								{#each components as item (item)}
+									<div animate:flip={{ duration: 100 }} class="w-20">
+										<button
+											on:click={() => addComponent(item)}
+											title={componentsRecord[item].name}
+											class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+											justify-center bg-white rounded-md hover:bg-blue-50 duration-200 hover:border-blue-500"
+										>
+											<svelte:component this={componentsRecord[item].icon} class="text-gray-600" />
+										</button>
+										<div class="text-xs text-center flex-wrap text-gray-600 mt-1">
+											{componentsRecord[item].name}
+										</div>
+									</div>
+								{/each}
+							</div>
+						</ListItem>
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,14 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ComponentListProps = typeof __propDef.props;
+export type ComponentListEvents = typeof __propDef.events;
+export type ComponentListSlots = typeof __propDef.slots;
+export default class ComponentList extends SvelteComponentTyped<ComponentListProps, ComponentListEvents, ComponentListSlots> {
+}
+export {};