windmill-components 1.13.25 → 1.22.0

package/components/SchemaForm.svelte

@@ -1,150 +1,141 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setArgs = exports.editableSchema = exports.isValid = exports.args = exports.schema = exports.inputTransform = void 0;
-const utils_1 = require("$lib/utils");
-const transition_1 = require("svelte/transition");
-const ArgInput_svelte_1 = __importDefault(require("./ArgInput.svelte"));
-const RadioButton_svelte_1 = __importDefault(require("./RadioButton.svelte"));
-const Editor_svelte_1 = __importDefault(require("./Editor.svelte"));
-const FieldHeader_svelte_1 = __importDefault(require("./FieldHeader.svelte"));
-const svelte_awesome_1 = __importDefault(require("svelte-awesome"));
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-exports.inputTransform = false;
-exports.args = {};
-exports.isValid = true;
-exports.editableSchema = false;
+<script>import { InputTransform } from '../gen';
+import { allTrue } from '../utils';
+import ArgInput from './ArgInput.svelte';
+import Editor from './Editor.svelte';
+import FieldHeader from './FieldHeader.svelte';
+import DynamicInputHelpBox from './flows/DynamicInputHelpBox.svelte';
+import { getCodeInjectionExpr, getDefaultExpr, isCodeInjection } from './flows/utils';
+import OverlayPropertyPicker from './propertyPicker/OverlayPropertyPicker.svelte';
+import Toggle from './Toggle.svelte';
+export let inputTransform = false;
+export let schema;
+export let args = {};
+export let editableSchema = false;
+export let extraLib = 'missing extraLib';
+export let isValid = true;
+export let i = undefined;
+export let previousSchema = undefined;
 let inputCheck = {};
-let seeHelp = {};
-function setArgs(nargs) {
-    exports.args = nargs;
+$: isValid = allTrue(inputCheck) ?? false;
+let propertiesTypes = {};
+let inputCats = {};
+function setPropertyType(id, rawValue, isRaw) {
+    const arg = args[id];
+    if (!arg) {
+        return;
+    }
+    if (isCodeInjection(rawValue)) {
+        args[id].expr = getCodeInjectionExpr(rawValue, isRaw);
+        args[id].type = InputTransform.type.JAVASCRIPT;
+        propertiesTypes[id] = InputTransform.type.STATIC;
+    }
+    else {
+        if (args[id].type === InputTransform.type.JAVASCRIPT &&
+            propertiesTypes[id] === InputTransform.type.STATIC) {
+            args[id].type = InputTransform.type.STATIC;
+            if (inputCats[id] == 'number') {
+                args[id].value = Number(args[id].value);
+            }
+        }
+        if (arg.type) {
+            propertiesTypes[id] = arg.type;
+        }
+    }
+}
+function hasOverlay(inputCat) {
+    return inputCat === 'string' || inputCat === 'number';
 }
-exports.setArgs = setArgs;
-$: exports.isValid = (0, utils_1.allTrue)(inputCheck) ?? false;
 </script>
 
 <div class="w-full">
 	{#if Object.keys(schema?.properties ?? {}).length > 0}
-		{#each Object.keys(schema?.properties ?? {}) as argName}
+		{#each Object.keys(schema?.properties ?? {}) as argName, index}
 			{#if inputTransform && args[argName] != undefined}
-				<div class="mt-10" />
-				<FieldHeader
-					label={argName}
-					format={schema.properties[argName].format}
-					contentEncoding={schema.properties[argName].contentEncoding}
-					required={schema.required.includes(argName)}
-					type={schema.properties[argName].type}
-					itemsType={schema.properties[argName].items}
-				/>
-				<div class="max-w-xs">
-					<RadioButton
-						options={[
-							['Static', 'static'],
-							['Dynamic (JS)', 'javascript']
-						]}
-						small={true}
-						bind:value={args[argName].type}
+				<div class={index > 0 ? 'mt-8' : ''} />
+				<div class="flex justify-between items-center">
+					<div class="flex items-center">
+						<FieldHeader
+							label={argName}
+							format={schema.properties[argName].format}
+							contentEncoding={schema.properties[argName].contentEncoding}
+							required={schema.required.includes(argName)}
+							type={schema.properties[argName].type}
+							itemsType={schema.properties[argName].items}
+						/>
+						{#if propertiesTypes[argName] === InputTransform.type.STATIC && args[argName].type === InputTransform.type.JAVASCRIPT}
+							<span
+								class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded ml-2"
+							>
+								{'${...}'}
+							</span>
+						{/if}
+					</div>
+					<Toggle
+						options={{
+							left: { label: '', value: InputTransform.type.STATIC },
+							right: { label: 'Raw Javascript Editor', value: InputTransform.type.JAVASCRIPT }
+						}}
+						bind:value={propertiesTypes[argName]}
 						on:change={(e) => {
-							console.log(e.detail)
-							args[argName].expr =
-								e.detail == 'javascript'
-									? `import { previous_result, flow_input, step, variable, resource, params } from 'windmill'
+							if (e.detail === InputTransform.type.JAVASCRIPT) {
+								args[argName].expr = getDefaultExpr(i ?? -1, argName)
+								args[argName].value = undefined
+							} else {
+								args[argName].expr = undefined
+								args[argName].value = undefined
+							}
 
-previous_result.myfield`
-									: undefined
+							args[argName].type = e.detail
 						}}
 					/>
 				</div>
-				{#if args[argName].type == 'static'}
-					<ArgInput
-						label={argName}
-						bind:description={schema.properties[argName].description}
-						bind:value={args[argName].value}
-						type={schema.properties[argName].type}
-						required={schema.required.includes(argName)}
-						bind:pattern={schema.properties[argName].pattern}
-						bind:valid={inputCheck[argName]}
-						defaultValue={schema.properties[argName].default}
-						bind:enum_={schema.properties[argName].enum}
-						bind:format={schema.properties[argName].format}
-						contentEncoding={schema.properties[argName].contentEncoding}
-						bind:itemsType={schema.properties[argName].items}
-						displayHeader={false}
-					/>
-				{:else if args[argName].type == 'javascript'}
+				<div class="max-w-xs" />
+
+				{#if propertiesTypes[argName] === undefined || propertiesTypes[argName] === InputTransform.type.STATIC}
+					<OverlayPropertyPicker
+						{previousSchema}
+						disabled={!hasOverlay(inputCats[argName])}
+						on:select={(event) => {
+							const toAppend = `\$\{previous_result.${event.detail}}`
+							args[argName].value = `${args[argName].value ?? ''}${toAppend}`
+							setPropertyType(argName, args[argName].value, false)
+						}}
+					>
+						<ArgInput
+							label={argName}
+							bind:description={schema.properties[argName].description}
+							bind:value={args[argName].value}
+							type={schema.properties[argName].type}
+							required={schema.required.includes(argName)}
+							bind:pattern={schema.properties[argName].pattern}
+							bind:valid={inputCheck[argName]}
+							defaultValue={schema.properties[argName].default}
+							bind:enum_={schema.properties[argName].enum}
+							bind:format={schema.properties[argName].format}
+							contentEncoding={schema.properties[argName].contentEncoding}
+							bind:itemsType={schema.properties[argName].items}
+							displayHeader={false}
+							bind:inputCat={inputCats[argName]}
+							numberAsString={true}
+							on:input={(e) => {
+								if (hasOverlay(inputCats[argName])) {
+									setPropertyType(argName, e.detail.rawValue, e.detail.isRaw)
+								}
+							}}
+						/>
+					</OverlayPropertyPicker>
+				{:else if propertiesTypes[argName] === InputTransform.type.JAVASCRIPT}
 					{#if args[argName].expr != undefined}
-						<div class="border rounded p-2 mt-2 border-gray-500">
-							<Editor bind:code={args[argName].expr} lang="typescript" class="few-lines-editor" />
+						<div class="border rounded p-2 mt-2 border-gray-300">
+							<Editor
+								bind:code={args[argName].expr}
+								lang="typescript"
+								class="few-lines-editor"
+								{extraLib}
+								extraLibPath="file:///node_modules/@types/windmill@{i}/index.d.ts"
+							/>
 						</div>
-						<div class="text-xs flex flex-row-reverse">
-							<span
-								class="underline mr-4"
-								on:click={() => {
-									seeHelp[argName] = seeHelp[argName] == undefined ? true : !seeHelp[argName]
-								}}
-								>Help<Icon
-									class="ml-2"
-									data={seeHelp[argName] ? faChevronUp : faChevronDown}
-									scale={0.7}
-								/></span
-							>
-						</div>
-						{#if seeHelp[argName]}
-							<div
-								transition:slide
-								class="bg-gray-100 border-l-4 border-gray-600 text-gray-700 p-4 m-4"
-								role="alert"
-							>
-								<p class="font-bold">Dynamic arg help</p>
-								<p>
-									When a field is "dynamic", its value is computed dynamically as the evaluation of
-									its corresponding typescript snippet.
-								</p>
-								That snippet can be single line:
-								<pre><code>last_result.myarg</code></pre>
-								or multiline:
-								<pre><code
-										>let x = 5;
-x + 2</code
-									></pre>
-								<p>
-									If it is multiline, the last statement before the final expression<b
-										>MUST END WITH ; and a newline</b
-									>
-								</p>
-								The snippet can also be a string template:
-								<pre><code
-										>`Hello $&#123;params.name&#125;, all your base $&#123;previous_result.base_name&#125;
-belong to us`</code
-									></pre>
-								However, the last line must always be the final expression.
-								<p>
-									The snippet can use any typescript primitives, and the following flow specific
-									objects and functions:
-								</p>
-								<ul class="ml-4">
-									<li>
-										<b>previous_result</b>: the object containing the result of the previous step
-									</li>
-									<li><b>flow_input</b>: the object containing the flow input arguments</li>
-									<li><b>params</b>: the object containing the current step static values</li>
-									<li>
-										<b>step(n)</b>: the function returning the result of step number n. One can also
-										use a negative n. step(0) == flow_input , step(-1) == previous_result
-									</li>
-									<li>
-										<b>variable(path)</b>: the function returning the variable (including secrets)
-										at given path as a string
-									</li>
-									<li>
-										<b>resource(path)</b>: the function returning the resource at a given path as an
-										object
-									</li>
-								</ul>
-							</div>
-						{/if}
+						<DynamicInputHelpBox />
 					{/if}
 				{:else}
 					<p>Not recognized arg type {args[argName].type}</p>
@@ -164,7 +155,8 @@ belong to us`</code
 					contentEncoding={schema.properties[argName].contentEncoding}
 					bind:itemsType={schema.properties[argName].items}
 					{editableSchema}
-				/>{/if}
+				/>
+			{/if}
 		{/each}
 	{:else}
 		<p class="italic text-sm">No settable input</p>

package/components/SchemaForm.svelte.d.ts

@@ -1,13 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
 import type { Schema } from '../common';
+import { InputTransform } from '../gen';
 declare const __propDef: {
     props: {
         inputTransform?: boolean | undefined;
         schema: Schema;
-        args?: Record<string, any> | undefined;
-        isValid?: boolean | undefined;
+        args?: Record<string, InputTransform> | undefined;
         editableSchema?: boolean | undefined;
-        setArgs?: ((nargs: Record<string, any>) => void) | undefined;
+        extraLib?: string | undefined;
+        isValid?: boolean | undefined;
+        i?: number | undefined;
+        previousSchema?: Object | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,6 +21,5 @@ export declare type SchemaFormProps = typeof __propDef.props;
 export declare type SchemaFormEvents = typeof __propDef.events;
 export declare type SchemaFormSlots = typeof __propDef.slots;
 export default class SchemaForm extends SvelteComponentTyped<SchemaFormProps, SchemaFormEvents, SchemaFormSlots> {
-    get setArgs(): (nargs: Record<string, any>) => void;
 }
 export {};

package/components/SchemaModal.svelte

@@ -1,12 +1,6 @@
-<script context="module">"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.closeModal = exports.openModal = exports.oldArgName = exports.editing = exports.error = exports.property = exports.DEFAULT_PROPERTY = exports.schemaToModal = exports.modalToSchema = exports.ARG_TYPES = void 0;
-const Modal_svelte_1 = __importDefault(require("./Modal.svelte"));
-exports.ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
-function modalToSchema(schema) {
+<script context="module">import Modal from './Modal.svelte';
+export const ARG_TYPES = ['integer', 'number', 'string', 'boolean', 'object', 'array'];
+export function modalToSchema(schema) {
     return {
         type: schema.selectedType,
         description: schema.description,
@@ -16,8 +10,7 @@ function modalToSchema(schema) {
         items: schema.items
     };
 }
-exports.modalToSchema = modalToSchema;
-function schemaToModal(schema, name, required) {
+export function schemaToModal(schema, name, required) {
     return {
         name,
         selectedType: schema.type,
@@ -27,8 +20,7 @@ function schemaToModal(schema, name, required) {
         required
     };
 }
-exports.schemaToModal = schemaToModal;
-exports.DEFAULT_PROPERTY = {
+export const DEFAULT_PROPERTY = {
     selectedType: 'string',
     description: '',
     name: '',
@@ -36,39 +28,32 @@ exports.DEFAULT_PROPERTY = {
 };
 </script>
 
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_PROPERTY = exports.schemaToModal = exports.modalToSchema = exports.ARG_TYPES = exports.closeModal = exports.openModal = exports.oldArgName = exports.editing = exports.error = exports.property = void 0;
-const Switch_svelte_1 = __importDefault(require("./Switch.svelte"));
-const svelte_1 = require("svelte");
-const ArgInput_svelte_1 = __importDefault(require("./ArgInput.svelte"));
-const StringTypeNarrowing_svelte_1 = __importDefault(require("./StringTypeNarrowing.svelte"));
-const Required_svelte_1 = __importDefault(require("./Required.svelte"));
-exports.property = exports.DEFAULT_PROPERTY;
-exports.error = '';
-exports.editing = false;
-const dispatch = (0, svelte_1.createEventDispatcher)();
+<script>import Switch from './Switch.svelte';
+import { createEventDispatcher } from 'svelte';
+import ArgInput from './ArgInput.svelte';
+import StringTypeNarrowing from './StringTypeNarrowing.svelte';
+import Required from './Required.svelte';
+export let property = DEFAULT_PROPERTY;
+export let error = '';
+export let editing = false;
+export let oldArgName = undefined;
+const dispatch = createEventDispatcher();
 let modal;
-function openModal() {
+export function openModal() {
     modal.openModal();
 }
-exports.openModal = openModal;
-function closeModal() {
+export function closeModal() {
     modal.closeModal();
 }
-exports.closeModal = closeModal;
 function clearModal() {
-    exports.error = '';
-    exports.editing = false;
-    exports.oldArgName = undefined;
-    exports.property.name = exports.DEFAULT_PROPERTY.name;
-    exports.property.default = exports.DEFAULT_PROPERTY.default;
-    exports.property.description = exports.DEFAULT_PROPERTY.description;
-    exports.property.required = exports.DEFAULT_PROPERTY.required;
-    exports.property.selectedType = exports.DEFAULT_PROPERTY.selectedType;
+    error = '';
+    editing = false;
+    oldArgName = undefined;
+    property.name = DEFAULT_PROPERTY.name;
+    property.default = DEFAULT_PROPERTY.default;
+    property.description = DEFAULT_PROPERTY.description;
+    property.required = DEFAULT_PROPERTY.required;
+    property.selectedType = DEFAULT_PROPERTY.selectedType;
 }
 </script>
 

package/components/SchemaModal.svelte.d.ts

@@ -23,7 +23,7 @@ declare const __propDef: {
         property?: ModalSchemaProperty | undefined;
         error?: string | undefined;
         editing?: boolean | undefined;
-        oldArgName: string | undefined;
+        oldArgName?: string | undefined;
         openModal?: (() => void) | undefined;
         closeModal?: (() => void) | undefined;
     };

package/components/SchemaViewer.svelte

@@ -1,15 +1,9 @@
-<script>"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.schema = void 0;
-const utils_1 = require("$lib/utils");
-const svelte_highlight_1 = __importDefault(require("svelte-highlight"));
-const json_1 = __importDefault(require("svelte-highlight/languages/json"));
-const github_1 = __importDefault(require("svelte-highlight/styles/github"));
-const TableCustom_svelte_1 = __importDefault(require("./TableCustom.svelte"));
-exports.schema = (0, utils_1.emptySchema)();
+<script>import { emptySchema } from '../utils';
+import Highlight from 'svelte-highlight';
+import json from 'svelte-highlight/languages/json';
+import github from 'svelte-highlight/styles/github';
+import TableCustom from './TableCustom.svelte';
+export let schema = emptySchema();
 let viewJsonSchema = false;
 </script>