windmill-components 1.339.2 → 1.352.0

package/package/components/schema/AddProperty.svelte

@@ -0,0 +1,149 @@
+<script>import { modalToSchema } from '../../common';
+import { emptySchema, sendUserToast } from '../../utils';
+import { createEventDispatcher } from 'svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+import AddPropertyForm from './AddPropertyForm.svelte';
+export let schema = emptySchema();
+export const DEFAULT_PROPERTY = {
+    selectedType: 'string',
+    description: '',
+    name: '',
+    required: false
+};
+const dispatch = createEventDispatcher();
+if (!schema) {
+    schema = emptySchema();
+}
+let schemaString = '';
+// Internal state: bound to args builder modal
+let argError = '';
+let editing = false;
+let oldArgName; // when editing argument and changing name
+let jsonEditor;
+reorder();
+function reorder() {
+    if (schema.order && Array.isArray(schema.order)) {
+        const n = {};
+        schema.order.forEach((x) => {
+            if (schema.properties && schema.properties[x] != undefined) {
+                n[x] = schema.properties[x];
+            }
+        });
+        Object.keys(schema.properties ?? {})
+            .filter((x) => !schema.order?.includes(x))
+            .forEach((x) => {
+            n[x] = schema.properties[x];
+        });
+        schema.properties = n;
+    }
+}
+function syncOrders() {
+    if (schema) {
+        schema.order = Object.keys(schema.properties ?? {});
+    }
+}
+function handleAddOrEditArgument(modalProperty) {
+    // If editing the arg's name, oldName containing the old argument name must be provided
+    argError = '';
+    modalProperty.name = modalProperty.name.trim();
+    if (modalProperty.name.length === 0) {
+        argError = 'Arguments need to have a name';
+    }
+    else if (Object.keys(schema.properties ?? {}).includes(modalProperty.name) &&
+        (!editing || (editing && oldArgName && oldArgName !== modalProperty.name))) {
+        argError = 'There is already an argument with this name';
+    }
+    else {
+        if (!schema.properties) {
+            schema.properties = {};
+        }
+        if (!schema.required) {
+            schema.required = [];
+        }
+        if (!schema.order || !Array.isArray(schema.order)) {
+            syncOrders();
+        }
+        schema.properties[modalProperty.name] = modalToSchema(modalProperty);
+        if (modalProperty.required) {
+            if (!schema.required.includes(modalProperty.name)) {
+                schema.required.push(modalProperty.name);
+            }
+        }
+        else if (schema.required.includes(modalProperty.name)) {
+            const index = schema.required.indexOf(modalProperty.name, 0);
+            if (index > -1) {
+                schema.required.splice(index, 1);
+            }
+        }
+        if (editing && oldArgName && oldArgName !== modalProperty.name) {
+            let oldPosition = schema.order.indexOf(oldArgName);
+            schema.order[oldPosition] = modalProperty.name;
+            reorder();
+            handleDeleteArgument([oldArgName]);
+        }
+        if (!schema.order?.includes(modalProperty.name)) {
+            schema.order.push(modalProperty.name);
+        }
+        modalProperty = Object.assign({}, DEFAULT_PROPERTY);
+        editing = false;
+        oldArgName = undefined;
+    }
+    schema = schema;
+    schemaString = JSON.stringify(schema, null, '\t');
+    jsonEditor?.setCode(schemaString);
+    if (argError !== '') {
+        sendUserToast(argError, true);
+    }
+    dispatch('change', schema);
+}
+export function handleDeleteArgument(argPath) {
+    try {
+        let modifiedObject = schema;
+        let modifiedProperties = modifiedObject.properties;
+        let argName = argPath.pop();
+        argPath.forEach((property) => {
+            if (Object.keys(modifiedProperties).includes(property)) {
+                modifiedObject = modifiedProperties[property];
+                modifiedProperties = modifiedObject.properties;
+            }
+            else {
+                throw Error('Nested argument not found!');
+            }
+        });
+        if (Object.keys(modifiedProperties).includes(argName)) {
+            delete modifiedProperties[argName];
+            modifiedObject.required = schema.required.filter((arg) => arg !== argName);
+            if (modifiedObject.order) {
+                modifiedObject.order = modifiedObject.order.filter((arg) => arg !== argName);
+            }
+            schema = schema;
+            schemaString = JSON.stringify(schema, null, '\t');
+            dispatch('change', schema);
+        }
+        else {
+            throw Error('Argument not found!');
+        }
+        syncOrders();
+        dispatch('change', schema);
+    }
+    catch (err) {
+        sendUserToast(`Could not delete argument: ${err}`, true);
+    }
+}
+</script>
+
+<div class="flex">
+	<AddPropertyForm
+		on:add={(e) => {
+			try {
+				handleAddOrEditArgument({
+					...DEFAULT_PROPERTY,
+					selectedType: 'string',
+					name: e.detail.name
+				})
+			} catch (err) {
+				sendUserToast(`Could not add argument: ${err}`, true)
+			}
+		}}
+	/>
+</div>

package/package/components/schema/AddProperty.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Schema, type ModalSchemaProperty } from '../../common';
+declare const __propDef: {
+    props: {
+        schema?: Schema | any;
+        DEFAULT_PROPERTY?: ModalSchemaProperty | undefined;
+        handleDeleteArgument?: ((argPath: string[]) => void) | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddPropertyProps = typeof __propDef.props;
+export type AddPropertyEvents = typeof __propDef.events;
+export type AddPropertySlots = typeof __propDef.slots;
+export default class AddProperty extends SvelteComponent<AddPropertyProps, AddPropertyEvents, AddPropertySlots> {
+    get DEFAULT_PROPERTY(): ModalSchemaProperty;
+    get handleDeleteArgument(): (argPath: string[]) => void;
+}
+export {};

package/package/components/schema/AddPropertyForm.svelte

@@ -0,0 +1,33 @@
+<script>import { createEventDispatcher } from 'svelte';
+import { Button } from '../common';
+import { Plus } from 'lucide-svelte';
+let name = '';
+const dispatch = createEventDispatcher();
+function addField() {
+    dispatch('add', { name });
+    name = '';
+}
+</script>
+
+<div class="flex flex-row gap-2">
+	<input
+		bind:value={name}
+		placeholder="Field name"
+		on:keydown={(event) => {
+			if (event.key === 'Enter') {
+				addField()
+			}
+		}}
+	/>
+	<Button
+		variant="contained"
+		color="dark"
+		size="xs"
+		startIcon={{ icon: Plus }}
+		id="flow-editor-add-property"
+		on:click={addField}
+		disabled={!name}
+	>
+		Add field
+	</Button>
+</div>

package/package/components/schema/AddPropertyForm.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        add: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AddPropertyFormProps = typeof __propDef.props;
+export type AddPropertyFormEvents = typeof __propDef.events;
+export type AddPropertyFormSlots = typeof __propDef.slots;
+export default class AddPropertyForm extends SvelteComponent<AddPropertyFormProps, AddPropertyFormEvents, AddPropertyFormSlots> {
+}
+export {};

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -0,0 +1,198 @@
+<script>import { GripVertical, Pen, Trash } from 'lucide-svelte';
+import EditableSchemaForm from '../EditableSchemaForm.svelte';
+import { Drawer, DrawerContent } from '../common';
+import AddProperty from './AddProperty.svelte';
+import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
+import { flip } from 'svelte/animate';
+import { emptyString, generateRandomString } from '../../utils';
+import Button from '../common/button/Button.svelte';
+import { createEventDispatcher, tick } from 'svelte';
+import Label from '../Label.svelte';
+import Toggle from '../Toggle.svelte';
+import SimpleEditor from '../SimpleEditor.svelte';
+export let schema;
+export let parentId = undefined;
+const flipDurationMs = 200;
+const dispatch = createEventDispatcher();
+let addProperty = undefined;
+let schemaFormDrawer = undefined;
+let editableSchemaForm = undefined;
+$: items = ((schema?.order ?? Object.keys(schema.properties ?? {}))?.map((item, index) => {
+    return { value: item, id: generateRandomString() };
+}) ?? []);
+function handleConsider(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+}
+function handleFinalize(e) {
+    const { items: newItems } = e.detail;
+    items = newItems;
+    const keys = items.map((item) => item.value);
+    schema.properties = keys.reduce((acc, key) => {
+        acc[key] = schema.properties[key];
+        return acc;
+    }, {});
+    schema.order = keys;
+    schema = { ...schema };
+    dispatch('change', schema);
+}
+const yOffset = 49;
+export let jsonView = false;
+let schemaString = JSON.stringify(schema, null, '\t');
+let editor = undefined;
+let error = undefined;
+</script>
+
+<div class="flex flex-col items-end mb-2 w-full">
+	<Toggle
+		bind:checked={jsonView}
+		label="JSON View"
+		size="xs"
+		options={{
+			right: 'JSON Editor',
+			rightTooltip:
+				'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+		}}
+		lightMode
+		on:change={() => {
+			schemaString = JSON.stringify(schema, null, '\t')
+			editor?.setCode(schemaString)
+		}}
+	/>
+</div>
+
+<AddProperty
+	on:change={() => {
+		if (jsonView) {
+			schemaString = JSON.stringify(schema, null, '\t')
+			editor?.setCode(schemaString)
+		}
+		dispatch('change', schema)
+	}}
+	bind:schema
+	bind:this={addProperty}
+/>
+
+{#if !jsonView}
+	<div
+		use:dragHandleZone={{
+			items,
+			flipDurationMs,
+			dropTargetStyle: {},
+			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
+		}}
+		on:consider={handleConsider}
+		on:finalize={handleFinalize}
+		class="gap-1 flex flex-col mt-2"
+	>
+		{#if items?.length > 0}
+			{#each items as item (item.id)}
+				<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+				<div
+					animate:flip={{ duration: 200 }}
+					class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
+				>
+					{#if schema.properties?.[item.value]}
+						<div class="flex flex-row justify-between items-center w-full">
+							{`${item.value}${
+								schema.properties?.[item.value]?.title
+									? ` (title: ${schema.properties?.[item.value]?.title})`
+									: ''
+							} `}
+							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div class="flex flex-row gap-1 item-center h-full justify-center">
+								<Button
+									iconOnly
+									size="xs2"
+									color="light"
+									startIcon={{ icon: Trash }}
+									on:click={() => {
+										addProperty?.handleDeleteArgument([item.value])
+									}}
+								/>
+								<Button
+									iconOnly
+									size="xs2"
+									color="light"
+									startIcon={{ icon: Pen }}
+									on:click={() => {
+										schemaFormDrawer?.openDrawer()
+
+										tick().then(() => {
+											editableSchemaForm?.openField(item.value)
+										})
+									}}
+								/>
+
+								<div class="cursor-move flex items-center handle" use:dragHandle>
+									<GripVertical size={16} />
+								</div>
+							</div>
+						</div>
+
+						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
+							<div class="flex flex-col w-full mt-2">
+								<Label label="Nested Properties">
+									<svelte:self
+										on:change={() => (schema = schema)}
+										schema={schema.properties[item.value]}
+										parentId={item.value}
+									/>
+								</Label>
+							</div>
+						{/if}
+					{:else}
+						<div class="text-tertiary"> Value is undefined </div>
+					{/if}
+				</div>
+			{/each}
+		{/if}
+	</div>
+
+	<Drawer bind:this={schemaFormDrawer} size="1200px">
+		<DrawerContent noPadding title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<AddProperty bind:schema />
+			</svelte:fragment>
+			<EditableSchemaForm
+				bind:this={editableSchemaForm}
+				bind:schema
+				isAppInput
+				on:edit={(e) => {
+					addProperty?.openDrawer(e.detail)
+				}}
+				on:delete={(e) => {
+					addProperty?.handleDeleteArgument([e.detail])
+				}}
+				offset={yOffset}
+				lightweightMode
+				dndType="drawer"
+			/>
+		</DrawerContent>
+	</Drawer>
+{:else}
+	<div class="mt-2" />
+	<SimpleEditor
+		bind:this={editor}
+		small
+		fixedOverflowWidgets={false}
+		on:change={() => {
+			try {
+				schema = JSON.parse(schemaString)
+				error = ''
+			} catch (err) {
+				error = err.message
+			}
+		}}
+		bind:code={schemaString}
+		lang="json"
+		autoHeight
+		automaticLayout
+	/>
+	{#if !emptyString(error)}
+		<div class="text-red-400 text-xs">{error}</div>
+	{:else}
+		<div><br /> </div>
+	{/if}
+{/if}

package/package/components/schema/EditableSchemaDrawer.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | undefined | any;
+        parentId?: string | undefined;
+        jsonView?: boolean | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditableSchemaDrawerProps = typeof __propDef.props;
+export type EditableSchemaDrawerEvents = typeof __propDef.events;
+export type EditableSchemaDrawerSlots = typeof __propDef.slots;
+export default class EditableSchemaDrawer extends SvelteComponent<EditableSchemaDrawerProps, EditableSchemaDrawerEvents, EditableSchemaDrawerSlots> {
+}
+export {};

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -0,0 +1,31 @@
+<script>import { twMerge } from 'tailwind-merge';
+import EditableSchemaForm from '../EditableSchemaForm.svelte';
+import AddProperty from './AddProperty.svelte';
+export let schema;
+export let offset = 0;
+export let uiOnly = false;
+export let noPreview = false;
+export let fullHeight = true;
+export let lightweightMode = false;
+let addProperty = undefined;
+</script>
+
+<div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
+	<div class="p-4 border-b">
+		<AddProperty bind:schema bind:this={addProperty} />
+	</div>
+	<EditableSchemaForm
+		bind:schema
+		isFlowInput
+		on:edit={(e) => {
+			addProperty?.openDrawer(e.detail)
+		}}
+		on:delete={(e) => {
+			addProperty?.handleDeleteArgument([e.detail])
+		}}
+		{offset}
+		{uiOnly}
+		{noPreview}
+		{lightweightMode}
+	/>
+</div>

package/package/components/schema/EditableSchemaWrapper.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | undefined | any;
+        offset?: number | undefined;
+        uiOnly?: boolean | undefined;
+        noPreview?: boolean | undefined;
+        fullHeight?: boolean | undefined;
+        lightweightMode?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EditableSchemaWrapperProps = typeof __propDef.props;
+export type EditableSchemaWrapperEvents = typeof __propDef.events;
+export type EditableSchemaWrapperSlots = typeof __propDef.slots;
+export default class EditableSchemaWrapper extends SvelteComponent<EditableSchemaWrapperProps, EditableSchemaWrapperEvents, EditableSchemaWrapperSlots> {
+}
+export {};