@uipath/apollo-wind 2.62.0 → 2.64.0

package/dist/components/forms/form-designer.cjs

@@ -41,6 +41,7 @@ const separator_cjs_namespaceObject = require("../ui/separator.cjs");
 const switch_cjs_namespaceObject = require("../ui/switch.cjs");
 const tabs_cjs_namespaceObject = require("../ui/tabs.cjs");
 const textarea_cjs_namespaceObject = require("../ui/textarea.cjs");
+const external_field_actions_cjs_namespaceObject = require("./field-actions.cjs");
 const external_metadata_form_cjs_namespaceObject = require("./metadata-form.cjs");
 const external_schema_serializer_cjs_namespaceObject = require("./schema-serializer.cjs");
 const FIELD_TYPE_METADATA = [
@@ -135,6 +136,93 @@ const FIELD_TYPE_METADATA = [
         description: 'Custom field component'
     }
 ];
+const ANATOMY_FIELD_TYPES = [
+    'text',
+    'email',
+    'textarea',
+    'number',
+    'select',
+    'multiselect',
+    'switch',
+    'checkbox',
+    'boolean'
+];
+const VALUE_MODE_OPTIONS = [
+    {
+        label: 'Fixed value',
+        value: 'literal'
+    },
+    {
+        label: 'Expression',
+        value: 'expression'
+    },
+    {
+        label: 'Variable',
+        value: 'variable'
+    },
+    {
+        label: 'Prompt',
+        value: 'prompt'
+    }
+];
+const PREVIEW_PLUGINS = [
+    {
+        name: 'designer-preview',
+        variables: [
+            {
+                id: 'vars',
+                label: '$vars',
+                children: [
+                    {
+                        id: 'customerName',
+                        label: 'customerName',
+                        value: '$vars.customerName',
+                        type: 'string'
+                    },
+                    {
+                        id: 'orderId',
+                        label: 'orderId',
+                        value: '$vars.orderId',
+                        type: 'string'
+                    },
+                    {
+                        id: 'total',
+                        label: 'total',
+                        value: '$vars.total',
+                        type: 'number'
+                    }
+                ]
+            }
+        ],
+        fieldActions: {
+            header: {
+                'insert-variable': (0, external_field_actions_cjs_namespaceObject.createInsertVariableAction)({}),
+                'ai-assist': (0, external_field_actions_cjs_namespaceObject.createAiAssistAction)({
+                    generate: ({ prompt })=>new Promise((resolve)=>setTimeout(()=>resolve({
+                                    value: `Generated from "${prompt}"`
+                                }), 600))
+                })
+            }
+        }
+    }
+];
+function toValueModes(values) {
+    const modes = values?.modes ?? [];
+    if (0 === modes.length) return;
+    const defaultMode = values?.defaultMode;
+    return {
+        modes,
+        ...defaultMode && modes.includes(defaultMode) && {
+            defaultMode
+        },
+        ...values?.switchable === false && {
+            switchable: false
+        }
+    };
+}
+function nonEmpty(list) {
+    return Array.isArray(list) && list.length > 0 ? list : void 0;
+}
 function buildValidationConfig(field) {
     const { type, validation, rules } = field;
     const config = {};
@@ -481,6 +569,102 @@ const createFieldConfigSchema = (field)=>({
                         is: 'file'
                     }
                 ]
+            },
+            {
+                id: 'value-modes',
+                title: 'Value modes and actions',
+                description: 'A field with modes takes its value as a fixed value, an expression, a variable or a prompt. Any of these settings renders the field anatomy.',
+                fields: [
+                    {
+                        name: 'valueModes.modes',
+                        type: 'multiselect',
+                        label: 'Modes',
+                        placeholder: 'No modes',
+                        options: VALUE_MODE_OPTIONS
+                    },
+                    {
+                        name: 'valueModes.defaultMode',
+                        type: 'select',
+                        label: 'Default mode',
+                        placeholder: 'The first mode',
+                        options: VALUE_MODE_OPTIONS,
+                        rules: [
+                            {
+                                id: 'show-with-modes',
+                                conditions: [
+                                    {
+                                        when: 'valueModes.modes',
+                                        custom: 'valueModes.modes.length > 0'
+                                    }
+                                ],
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: 'valueModes.switchable',
+                        type: 'switch',
+                        label: 'Users can switch modes',
+                        rules: [
+                            {
+                                id: 'show-with-modes',
+                                conditions: [
+                                    {
+                                        when: 'valueModes.modes',
+                                        custom: 'valueModes.modes.length > 0'
+                                    }
+                                ],
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: 'headerActions',
+                        type: 'multiselect',
+                        label: 'Header actions',
+                        placeholder: 'None',
+                        options: [
+                            {
+                                label: 'Insert variable',
+                                value: 'insert-variable'
+                            },
+                            {
+                                label: 'AI assist',
+                                value: 'ai-assist'
+                            }
+                        ]
+                    },
+                    {
+                        name: 'menuActions',
+                        type: 'multiselect',
+                        label: 'Menu actions',
+                        placeholder: 'None',
+                        options: [
+                            {
+                                label: 'Clear value',
+                                value: 'clear'
+                            }
+                        ]
+                    },
+                    {
+                        name: 'badge',
+                        type: 'text',
+                        label: 'Badge',
+                        placeholder: 'e.g. Beta'
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        in: [
+                            ...ANATOMY_FIELD_TYPES
+                        ]
+                    }
+                ]
             }
         ],
         initialData: {
@@ -494,6 +678,14 @@ const createFieldConfigSchema = (field)=>({
             step: field.step,
             accept: field.accept || '',
             multiple: field.multiple || false,
+            valueModes: {
+                modes: field.valueModes?.modes ?? [],
+                defaultMode: field.valueModes?.defaultMode ?? '',
+                switchable: field.valueModes?.switchable ?? true
+            },
+            headerActions: field.headerActions ?? [],
+            menuActions: field.menuActions ?? [],
+            badge: field.badge ?? '',
             validation: {
                 minLength: field.validation?.minLength,
                 maxLength: field.validation?.maxLength,
@@ -611,6 +803,11 @@ function FieldConfigForm({ field, onUpdate, allFields, existingFieldNames }) {
                         placeholder: values.placeholder || void 0,
                         description: values.description || void 0
                     };
+                    const anatomy = ANATOMY_FIELD_TYPES.includes(newType);
+                    updates.valueModes = anatomy ? toValueModes(values.valueModes) : void 0;
+                    updates.headerActions = anatomy ? nonEmpty(values.headerActions) : void 0;
+                    updates.menuActions = anatomy ? nonEmpty(values.menuActions) : void 0;
+                    updates.badge = anatomy && values.badge || void 0;
                     const requiredMessage = validationValues?.requiredMessage || void 0;
                     if ('number' === newType || 'slider' === newType) {
                         updates.min = values.min;
@@ -1183,9 +1380,12 @@ function FormDesigner() {
                                                                                 })
                                                                             ]
                                                                         }),
-                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                                                                             className: "text-[9px] text-muted-foreground",
-                                                                            children: field.type
+                                                                            children: [
+                                                                                field.type,
+                                                                                field.valueModes && ` · ${field.valueModes.modes.length} modes`
+                                                                            ]
                                                                         })
                                                                     ]
                                                                 }),
@@ -1400,13 +1600,14 @@ function FormDesigner() {
                                         }),
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_metadata_form_cjs_namespaceObject.MetadataForm, {
                                             schema: generatedSchema,
+                                            plugins: PREVIEW_PLUGINS,
                                             onSubmit: (data)=>{
                                                 console.log('Form submitted:', data);
                                                 alert('Form submitted! Check console for data.');
                                             },
                                             disabled: previewDisabled,
                                             autoComplete: "off"
-                                        }, sections.map((s)=>`${s.id}:${s.collapsible}:${s.defaultExpanded}:${s.fields.map((f)=>`${f.id}:${f.type}:${f.name}:${JSON.stringify(f.rules || [])}:${JSON.stringify(f.validation || {})}`).join('-')}`).join(','))
+                                        }, sections.map((s)=>`${s.id}:${s.collapsible}:${s.defaultExpanded}:${s.fields.map((f)=>`${f.id}:${f.type}:${f.name}:${JSON.stringify(f.rules || [])}:${JSON.stringify(f.validation || {})}:${JSON.stringify(f.valueModes || {})}`).join('-')}`).join(','))
                                     ]
                                 }),
                                 /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(tabs_cjs_namespaceObject.TabsContent, {

package/dist/components/forms/form-designer.js

@@ -13,6 +13,7 @@ import { Separator } from "../ui/separator.js";
 import { Switch } from "../ui/switch.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs.js";
 import { Textarea } from "../ui/textarea.js";
+import { createAiAssistAction, createInsertVariableAction } from "./field-actions.js";
 import { MetadataForm } from "./metadata-form.js";
 import { schemaToJson } from "./schema-serializer.js";
 const FIELD_TYPE_METADATA = [
@@ -107,6 +108,93 @@ const FIELD_TYPE_METADATA = [
         description: 'Custom field component'
     }
 ];
+const ANATOMY_FIELD_TYPES = [
+    'text',
+    'email',
+    'textarea',
+    'number',
+    'select',
+    'multiselect',
+    'switch',
+    'checkbox',
+    'boolean'
+];
+const VALUE_MODE_OPTIONS = [
+    {
+        label: 'Fixed value',
+        value: 'literal'
+    },
+    {
+        label: 'Expression',
+        value: 'expression'
+    },
+    {
+        label: 'Variable',
+        value: 'variable'
+    },
+    {
+        label: 'Prompt',
+        value: 'prompt'
+    }
+];
+const PREVIEW_PLUGINS = [
+    {
+        name: 'designer-preview',
+        variables: [
+            {
+                id: 'vars',
+                label: '$vars',
+                children: [
+                    {
+                        id: 'customerName',
+                        label: 'customerName',
+                        value: '$vars.customerName',
+                        type: 'string'
+                    },
+                    {
+                        id: 'orderId',
+                        label: 'orderId',
+                        value: '$vars.orderId',
+                        type: 'string'
+                    },
+                    {
+                        id: 'total',
+                        label: 'total',
+                        value: '$vars.total',
+                        type: 'number'
+                    }
+                ]
+            }
+        ],
+        fieldActions: {
+            header: {
+                'insert-variable': createInsertVariableAction({}),
+                'ai-assist': createAiAssistAction({
+                    generate: ({ prompt })=>new Promise((resolve)=>setTimeout(()=>resolve({
+                                    value: `Generated from "${prompt}"`
+                                }), 600))
+                })
+            }
+        }
+    }
+];
+function toValueModes(values) {
+    const modes = values?.modes ?? [];
+    if (0 === modes.length) return;
+    const defaultMode = values?.defaultMode;
+    return {
+        modes,
+        ...defaultMode && modes.includes(defaultMode) && {
+            defaultMode
+        },
+        ...values?.switchable === false && {
+            switchable: false
+        }
+    };
+}
+function nonEmpty(list) {
+    return Array.isArray(list) && list.length > 0 ? list : void 0;
+}
 function buildValidationConfig(field) {
     const { type, validation, rules } = field;
     const config = {};
@@ -453,6 +541,102 @@ const createFieldConfigSchema = (field)=>({
                         is: 'file'
                     }
                 ]
+            },
+            {
+                id: 'value-modes',
+                title: 'Value modes and actions',
+                description: 'A field with modes takes its value as a fixed value, an expression, a variable or a prompt. Any of these settings renders the field anatomy.',
+                fields: [
+                    {
+                        name: 'valueModes.modes',
+                        type: 'multiselect',
+                        label: 'Modes',
+                        placeholder: 'No modes',
+                        options: VALUE_MODE_OPTIONS
+                    },
+                    {
+                        name: 'valueModes.defaultMode',
+                        type: 'select',
+                        label: 'Default mode',
+                        placeholder: 'The first mode',
+                        options: VALUE_MODE_OPTIONS,
+                        rules: [
+                            {
+                                id: 'show-with-modes',
+                                conditions: [
+                                    {
+                                        when: 'valueModes.modes',
+                                        custom: 'valueModes.modes.length > 0'
+                                    }
+                                ],
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: 'valueModes.switchable',
+                        type: 'switch',
+                        label: 'Users can switch modes',
+                        rules: [
+                            {
+                                id: 'show-with-modes',
+                                conditions: [
+                                    {
+                                        when: 'valueModes.modes',
+                                        custom: 'valueModes.modes.length > 0'
+                                    }
+                                ],
+                                effects: {
+                                    visible: true
+                                }
+                            }
+                        ]
+                    },
+                    {
+                        name: 'headerActions',
+                        type: 'multiselect',
+                        label: 'Header actions',
+                        placeholder: 'None',
+                        options: [
+                            {
+                                label: 'Insert variable',
+                                value: 'insert-variable'
+                            },
+                            {
+                                label: 'AI assist',
+                                value: 'ai-assist'
+                            }
+                        ]
+                    },
+                    {
+                        name: 'menuActions',
+                        type: 'multiselect',
+                        label: 'Menu actions',
+                        placeholder: 'None',
+                        options: [
+                            {
+                                label: 'Clear value',
+                                value: 'clear'
+                            }
+                        ]
+                    },
+                    {
+                        name: 'badge',
+                        type: 'text',
+                        label: 'Badge',
+                        placeholder: 'e.g. Beta'
+                    }
+                ],
+                conditions: [
+                    {
+                        when: 'type',
+                        in: [
+                            ...ANATOMY_FIELD_TYPES
+                        ]
+                    }
+                ]
             }
         ],
         initialData: {
@@ -466,6 +650,14 @@ const createFieldConfigSchema = (field)=>({
             step: field.step,
             accept: field.accept || '',
             multiple: field.multiple || false,
+            valueModes: {
+                modes: field.valueModes?.modes ?? [],
+                defaultMode: field.valueModes?.defaultMode ?? '',
+                switchable: field.valueModes?.switchable ?? true
+            },
+            headerActions: field.headerActions ?? [],
+            menuActions: field.menuActions ?? [],
+            badge: field.badge ?? '',
             validation: {
                 minLength: field.validation?.minLength,
                 maxLength: field.validation?.maxLength,
@@ -583,6 +775,11 @@ function FieldConfigForm({ field, onUpdate, allFields, existingFieldNames }) {
                         placeholder: values.placeholder || void 0,
                         description: values.description || void 0
                     };
+                    const anatomy = ANATOMY_FIELD_TYPES.includes(newType);
+                    updates.valueModes = anatomy ? toValueModes(values.valueModes) : void 0;
+                    updates.headerActions = anatomy ? nonEmpty(values.headerActions) : void 0;
+                    updates.menuActions = anatomy ? nonEmpty(values.menuActions) : void 0;
+                    updates.badge = anatomy && values.badge || void 0;
                     const requiredMessage = validationValues?.requiredMessage || void 0;
                     if ('number' === newType || 'slider' === newType) {
                         updates.min = values.min;
@@ -1155,9 +1352,12 @@ function FormDesigner() {
                                                                                 })
                                                                             ]
                                                                         }),
-                                                                        /*#__PURE__*/ jsx("div", {
+                                                                        /*#__PURE__*/ jsxs("div", {
                                                                             className: "text-[9px] text-muted-foreground",
-                                                                            children: field.type
+                                                                            children: [
+                                                                                field.type,
+                                                                                field.valueModes && ` · ${field.valueModes.modes.length} modes`
+                                                                            ]
                                                                         })
                                                                     ]
                                                                 }),
@@ -1372,13 +1572,14 @@ function FormDesigner() {
                                         }),
                                         /*#__PURE__*/ jsx(MetadataForm, {
                                             schema: generatedSchema,
+                                            plugins: PREVIEW_PLUGINS,
                                             onSubmit: (data)=>{
                                                 console.log('Form submitted:', data);
                                                 alert('Form submitted! Check console for data.');
                                             },
                                             disabled: previewDisabled,
                                             autoComplete: "off"
-                                        }, sections.map((s)=>`${s.id}:${s.collapsible}:${s.defaultExpanded}:${s.fields.map((f)=>`${f.id}:${f.type}:${f.name}:${JSON.stringify(f.rules || [])}:${JSON.stringify(f.validation || {})}`).join('-')}`).join(','))
+                                        }, sections.map((s)=>`${s.id}:${s.collapsible}:${s.defaultExpanded}:${s.fields.map((f)=>`${f.id}:${f.type}:${f.name}:${JSON.stringify(f.rules || [])}:${JSON.stringify(f.validation || {})}:${JSON.stringify(f.valueModes || {})}`).join('-')}`).join(','))
                                     ]
                                 }),
                                 /*#__PURE__*/ jsx(TabsContent, {