@stubber/form-fields 1.6.3 → 1.7.0

package/README.md

@@ -34,58 +34,48 @@ See default ruleset [here](https://github.com/semantic-release/commit-analyzer/b
 
 Conversion Progress:
 
-| Component            | TS DONE    | TESTS DONE |
-| -------------------- | ---------- | ---------- |
-| AgGrid               | x          |            |
-| Arraybuilder         | x          |            |
-| Checkbox             | x          |            |
-| CheckboxAutocomplete | x          |            |
-| Code                 | x          |            |
-| Contactselector      | x          |            |
-| Currency             | x          |            |
-| Dataindication       | x          |            |
-| Date                 | x          |            |
-| Datetime             | x          |            |
-| Email                | x          |            |
-| Fieldbuilder         | x          |            |
-| Fieldsbuilder        | deprecated |            |
-| File                 | x          |            |
-| Heading              | x          |            |
-| Hidden               | x          |            |
-| Hiddenlocation       | x          |            |
-| Html                 | x          |            |
-| Jsoneditor           | x          |            |
-| Map                  | x          |            |
-| Multicheckbox        | x          |            |
-| Multistep            | x          |            |
-| Note                 | x          |            |
-| Number               | x          |            |
-| Objectbuilder        | x          |            |
-| Qrcodescanner        | x          |            |
-| Radio                | x          |            |
-| Renderfield          | deprecated |            |
-| Screenrecorder       | x          |            |
-| Screenshot           | x          |            |
-| Scrollandreaddisplay | x          |            |
-| Section              | x          |            |
-| Select               | x          |            |
-| Selectresource       | x          |            |
-| Signature            | x          |            |
-| Slider               | x          |            |
-| SmartText            | x          |            |
-| Telephone            | x          |            |
-| Text                 | x          |            |
-| Voicenote            | x          |            |
-
-Generate Features
-
-| Feature               | TS DONE | TESTS DONE |
-| --------------------- | ------- | ---------- |
-| hide_label            | x       |            |
-| init_value            | x       |            |
-| without_value_details | x       |            |
-| attachments           | x       |            |
-| fieldbuilder support  | x       |            |
+| Component            | TS DONE    | IS STRING |
+| -------------------- | ---------- | --------- |
+| AgGrid               | x          |           |
+| Arraybuilder         | x          |           |
+| Checkbox             | x          |           |
+| CheckboxAutocomplete | x          |           |
+| Code                 | x          |           |
+| Contactselector      | x          |           |
+| Currency             | x          |           |
+| Dataindication       | x          |           |
+| Date                 | x          |           |
+| Datetime             | x          |           |
+| Email                | x          |           |
+| Fieldbuilder         | x          |           |
+| Fieldsbuilder        | deprecated |           |
+| File                 | x          |           |
+| Heading              | x          |           |
+| Hidden               | x          |           |
+| Hiddenlocation       | x          |           |
+| Html                 | x          |           |
+| Jsoneditor           | x          |           |
+| Map                  | x          |           |
+| Multicheckbox        | x          |           |
+| Multistep            | x          |           |
+| Note                 | x          |           |
+| Number               | x          |           |
+| Objectbuilder        | x          |           |
+| Qrcodescanner        | x          |           |
+| Radio                | x          |           |
+| Renderfield          | deprecated |           |
+| Screenrecorder       | x          |           |
+| Screenshot           | x          |           |
+| Scrollandreaddisplay | x          |           |
+| Section              | x          |           |
+| Select               | x          |           |
+| Selectresource       | x          |           |
+| Signature            | x          |           |
+| Slider               | x          |           |
+| SmartText            | x          |           |
+| Telephone            | x          |           |
+| Text                 | x          |           |
+| Voicenote            | x          |           |
 
 ## TS Refactor
 

package/dist/fields2/FieldExprToggle.svelte

@@ -0,0 +1,29 @@
+<script>import { getContext } from "svelte";
+export let fieldStore;
+const field_component_store = getContext("field_component");
+const show_toggle = getContext("show_field_expr_toggle") ?? false;
+$: selected_fieldtype = $field_component_store.fieldtype;
+$: is_true_field = $fieldStore.fieldtype === selected_fieldtype;
+const handle_fieldtype_click = (ft) => {
+  $field_component_store.fieldtype = ft;
+};
+</script>
+
+{#if show_toggle}
+  <div
+    class="ml-auto flex h-fit w-fit flex-row items-center gap-0.5 rounded bg-gray-300 p-0.5 text-xs"
+  >
+    <button
+      on:click={() => handle_fieldtype_click($fieldStore.fieldtype)}
+      class={is_true_field ? "rounded bg-white px-0.5" : ""}
+    >
+      field
+    </button>
+    <button
+      on:click={() => handle_fieldtype_click("smart_text")}
+      class={!is_true_field ? "rounded bg-white px-0.5" : ""}
+    >
+      expr
+    </button>
+  </div>
+{/if}

package/dist/fields2/FieldExprToggle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBuiltField } from "./interfaces";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldExprToggleProps = typeof __propDef.props;
+export type FieldExprToggleEvents = typeof __propDef.events;
+export type FieldExprToggleSlots = typeof __propDef.slots;
+export default class FieldExprToggle extends SvelteComponent<FieldExprToggleProps, FieldExprToggleEvents, FieldExprToggleSlots> {
+}
+export {};

package/dist/fields2/FieldLabel.svelte

@@ -1,8 +1,12 @@
 <script>import { Label } from "@stubber/ui/label";
+import FieldExprToggle from "./FieldExprToggle.svelte";
 export let fieldStore;
 $: hide_label = $fieldStore.hide_label;
 </script>
 
-{#if !hide_label}
-  <Label for={$fieldStore.id}>{$fieldStore.label}</Label>
-{/if}
+<div class="mb-1 flex flex-row items-center justify-between">
+  {#if !hide_label}
+    <Label for={$fieldStore.id}>{$fieldStore.label}</Label>
+  {/if}
+  <FieldExprToggle {fieldStore} />
+</div>

package/dist/fields2/FieldMessage.svelte

@@ -1,6 +1,4 @@
 <script>import { Label } from "@stubber/ui/label";
-import { get, startCase } from "lodash-es";
-import { get_field_help_message } from "./utils";
 export let fieldStore;
 $: validation_result = $fieldStore.validation_result;
 $: type = validation_result?.type;
@@ -8,7 +6,8 @@ $: type = validation_result?.type;
 
 <Label
   id="message-{$fieldStore.id}"
-  class="ml-2 text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
+  for={$fieldStore.id}
+  class="block truncate text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
     ? 'text-red-500'
     : 'text-muted-foreground'}"
 >

package/dist/fields2/FieldMessage.svelte.d.ts

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
-import type { IBuiltField } from "./interfaces";
 import type { Writable } from "svelte/store";
+import type { IBuiltField } from "./interfaces";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField>;

package/dist/fields2/Form.svelte

@@ -2,11 +2,14 @@
 import FormField from "./form-field.svelte";
 import { build_fields } from "./utils";
 import { validate_field } from "./validations/validate_field";
+import { setContext } from "svelte";
 export let initial_form;
 export let form;
 export let attachments = writable([]);
 export let dependencies = void 0;
 export let form_valid = false;
+export let show_field_expr_toggle = false;
+setContext("show_field_expr_toggle", show_field_expr_toggle);
 if (initial_form.data) {
   form.update((data) => {
     return { ...data, ...initial_form.data };
@@ -28,7 +31,7 @@ const validate_form = async (_) => {
 };
 </script>
 
-<div class="flex flex-col gap-y-1">
+<div class="flex flex-col gap-y-2">
   {#each fields as fieldStore (getStoreValue(fieldStore).id)}
     <FormField {fieldStore} />
   {/each}

package/dist/fields2/Form.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         attachments?: Writable<UploadedFile[]>;
         dependencies?: IFormDependencies | undefined;
         form_valid?: boolean;
+        show_field_expr_toggle?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/fields2/form-field.svelte

@@ -1,6 +1,26 @@
-<script>import { component_for } from "./interfaces";
+<script>import { set } from "lodash-es";
+import { getContext, setContext } from "svelte";
+import { writable } from "svelte/store";
+import { component_for, final_field_type } from "./interfaces";
 export let fieldStore;
-const component = component_for($fieldStore);
+const show_toggle = getContext("show_field_expr_toggle") ?? false;
+let fieldtype = final_field_type($fieldStore, show_toggle);
+let component = component_for(fieldtype);
+const field_component_store = writable({ fieldtype });
+setContext("field_component", field_component_store);
+$: handle_field_type_change($field_component_store.fieldtype);
+const handle_field_type_change = (new_fieldtype) => {
+  if (new_fieldtype === fieldtype) {
+    return;
+  }
+  fieldtype = new_fieldtype;
+  const new_value = new_fieldtype == "smart_text" ? typeof $fieldStore.value === "string" ? $fieldStore.value : "" : new_fieldtype == "checkbox" ? false : new_fieldtype == "number" ? 0 : new_fieldtype == "arraybuilder" ? [] : new_fieldtype == "section" || new_fieldtype == "objectbuilder" ? {} : null;
+  $fieldStore.formStore.update((form) => {
+    set(form, $fieldStore.data_path, new_value);
+    return form;
+  });
+  component = component_for(new_fieldtype);
+};
 </script>
 
 {#if !$fieldStore.hidden}

package/dist/fields2/form-field.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
 import { type IBuiltField } from "./interfaces";
-import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
-        fieldStore: Writable<IBuiltField>;
+        fieldStore: Writable<IBuiltField<any>>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/fields2/interfaces.d.ts

@@ -177,7 +177,8 @@ export interface IBuiltField<T = {}> {
     set value(val: any);
     params?: T;
 }
-export declare const component_for: (f: IBuiltField) => typeof TextField | typeof NumberField | typeof SectionField | typeof CheckboxField | typeof CheckboxAutocomplete | typeof ArrayBuilderField | typeof GridField | typeof SelectField | typeof SelectresourceField | typeof SliderField | typeof ContactSelectorField | typeof CurrencyField | typeof DataIndicationField | typeof DateField | typeof DateTimeField | typeof EmailField | typeof FieldBuilderField | typeof JSONEditorField | typeof FileField | typeof HeadingField | typeof HiddenField | typeof HiddenLocationField | typeof HtmlField | typeof MapField | typeof TelephoneField | typeof NoteField | typeof MultistepField | typeof ObjectBuilderField | typeof RadioField | typeof MultiCheckboxField | typeof QrCodeScannerField | typeof ScrollAndReadDisplayField | typeof VoicenoteField | typeof SignatureField | typeof SmartTextField | typeof ScreenshotField | typeof ScreenrecorderField | typeof CodeField;
+export declare const final_field_type: (f: IBuiltField, allow_dynamic_switching: boolean) => FieldType;
+export declare const component_for: (fieldtype: FieldType) => typeof GridField | typeof TextField | typeof NumberField | typeof SectionField | typeof CheckboxField | typeof CheckboxAutocomplete | typeof ArrayBuilderField | typeof SelectField | typeof SelectresourceField | typeof SliderField | typeof ContactSelectorField | typeof CurrencyField | typeof DataIndicationField | typeof DateField | typeof DateTimeField | typeof EmailField | typeof FieldBuilderField | typeof JSONEditorField | typeof FileField | typeof HeadingField | typeof HiddenField | typeof HiddenLocationField | typeof HtmlField | typeof MapField | typeof TelephoneField | typeof NoteField | typeof MultistepField | typeof ObjectBuilderField | typeof RadioField | typeof MultiCheckboxField | typeof QrCodeScannerField | typeof ScrollAndReadDisplayField | typeof VoicenoteField | typeof SignatureField | typeof SmartTextField | typeof ScreenshotField | typeof ScreenrecorderField | typeof CodeField;
 export interface IBaseValidation {
     invalid_message?: string;
 }

package/dist/fields2/interfaces.js

@@ -76,7 +76,21 @@ export const fields = {
     screenrecorder: ScreenrecorderField,
     code: CodeField,
 };
-export const component_for = (f) => {
-    return fields[f.fieldtype];
+const string_fields = ["text", "email", "telephone", "smart_text", "note", "code"];
+export const final_field_type = (f, allow_dynamic_switching) => {
+    if (!allow_dynamic_switching) {
+        return f.fieldtype;
+    }
+    const is_string = typeof f.value === "string";
+    // if the initial value is a string
+    // but this field isn't typically a string field,
+    // rather render it as a smart_text field
+    if (is_string && !string_fields.includes(f.fieldtype)) {
+        return "smart_text";
+    }
+    return f.fieldtype;
+};
+export const component_for = (fieldtype) => {
+    return fields[fieldtype];
 };
 export const validation_types = ["required", "regex", "jsonata"];

package/dist/fields2/sub/array-builder-field.svelte

@@ -17,11 +17,16 @@ import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
+import FieldExprToggle from "../FieldExprToggle.svelte";
+import { Label } from "@stubber/ui/label";
 export let fieldStore;
 const new_entry_field = $fieldStore?.params?.new_entry_field || {
   fieldtype: "text"
 };
 const update_sub_fields = (new_value) => {
+  if (!Array.isArray(new_value)) {
+    return;
+  }
   const field = $fieldStore;
   field.sub_fields = new_value.map((_value, index) => {
     return build_field(
@@ -79,7 +84,7 @@ const move_value_down = (index) => {
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
@@ -87,7 +92,7 @@ const move_value_down = (index) => {
   </Collapsible.Trigger>
   <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
     {#each $fieldStore.sub_fields || [] as sub_field, index (get_store_value(sub_field).id)}
-      <div class="flex items-center space-x-2 w-full">
+      <div class="flex w-full items-center space-x-2">
         <!-- up and down sort buttons -->
         <div class="flex flex-col items-center space-y-1">
           <Button variant="ghost" class="h-6 w-6 p-2" on:click={() => move_value_up(index)}>
@@ -103,8 +108,11 @@ const move_value_down = (index) => {
         </Button>
       </div>
     {/each}
-    <Button size="icon" variant="outline" on:click={add_value}>
-      <i class="fa fa-plus" />
-    </Button>
+    <div class="flex items-center justify-between">
+      <Button size="icon" variant="outline" on:click={add_value}>
+        <i class="fa fa-plus" />
+      </Button>
+      <FieldExprToggle {fieldStore} />
+    </div>
   </Collapsible.Content>
 </Collapsible.Root>

package/dist/fields2/sub/checkbox-field.svelte

@@ -19,6 +19,7 @@ import { Label } from "@stubber/ui/label";
 import { isEqual } from "lodash-es";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 let field = $fieldStore;
 set_value_details(field, "label", field.label);
@@ -34,8 +35,9 @@ const on_change = (new_value) => {
 };
 </script>
 
-<div class="w-full flex items-center space-x-2">
+<div class="flex w-full items-center gap-x-2">
   <Checkbox {checked} onCheckedChange={on_change} />
   <Label>{field.label}</Label>
+  <FieldExprToggle {fieldStore} />
 </div>
 <FieldMessage {fieldStore} />

package/dist/fields2/sub/field-builder-field.svelte

@@ -115,6 +115,7 @@ function update_value(new_value) {
       ...cloneDeep(new_value)
     };
     update_params_from_value(value.params);
+    update_subfields_from_value(value.fields);
   }
 }
 const field_types = Object.keys(fields).map((key) => ({
@@ -224,8 +225,24 @@ function update_params_from_value(new_value) {
 }
 function select_field_type(newValue, trigger) {
   value.fieldtype = newValue;
+  field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
   closeAndFocusTrigger(trigger);
 }
+let field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
+const subfields_store = writable({});
+$: update_subfields($subfields_store.fields);
+function update_subfields(new_subfields) {
+  const cloned_new_subfields = cloneDeep(new_subfields);
+  if (!isEqual(value.fields, cloned_new_subfields) && !isEmpty(cloned_new_subfields)) {
+    value.fields = cloned_new_subfields;
+    update_fieldStore(value);
+  }
+}
+function update_subfields_from_value(new_value) {
+  if (!isEqual(new_value, $subfields_store)) {
+    subfields_store.set({ fields: cloneDeep(new_value) || {} });
+  }
+}
 </script>
 
 <FieldLabel {fieldStore} />
@@ -238,13 +255,13 @@ function select_field_type(newValue, trigger) {
         variant="outline"
         role="combobox"
         aria-expanded={open}
-        class="w-full border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 justify-between"
+        class="flex h-10 w-full justify-between rounded-md border border-input bg-white bg-opacity-[15] px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {selectedValue}
         <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
       </Button>
     </Popover.Trigger>
-    <Popover.Content class="p-0" sameWidth>
+    <Popover.Content class="max-h-[50vh] overflow-y-scroll p-0" sameWidth>
       <Command.Root>
         <Command.Input placeholder="Search framework..." />
         <Command.Empty>No fieldtype found.</Command.Empty>
@@ -281,11 +298,11 @@ function select_field_type(newValue, trigger) {
           bind:value={value.title}
         />
       </div>
-      <div class="w-full flex items-center space-x-2">
+      <div class="flex w-full items-center space-x-2">
         <Checkbox id="without_value_details" bind:checked={value.without_value_details} />
         <Label for="without_value_details">Without Value Details</Label>
       </div>
-      <div class="w-full flex items-center space-x-2">
+      <div class="flex w-full items-center space-x-2">
         <Checkbox id="hide_label" bind:checked={value.hide_label} />
         <Label for="hide_label">Hide Label</Label>
       </div>
@@ -300,8 +317,50 @@ function select_field_type(newValue, trigger) {
     </Collapsible.Content>
   </Collapsible.Root>
   <hr />
+  <!-- subfields -->
+  {#if value.fieldtype === "section" || value.fieldtype === "multistep"}
+    <Collapsible.Root open={false} class="w-full">
+      <Collapsible.Trigger asChild let:builder>
+        <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+          <Label>Fields</Label>
+
+          <i class="fa fa-sort" />
+        </Button>
+      </Collapsible.Trigger>
+
+      <Collapsible.Content class="flex flex-col gap-y-2 pl-2 pt-2">
+        <Form
+          form={subfields_store}
+          initial_form={{
+            spec: {
+              fields: {
+                fields: {
+                  hide_label: true,
+                  fieldtype: "objectbuilder",
+                  help: "Fields within this section/multistep",
+                  params: {
+                    value_field_spec: {
+                      fieldtype: "fieldbuilder",
+                      initvalue: {
+                        has_default: true,
+                        default: {
+                          fieldtype: "text",
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          }}
+        />
+      </Collapsible.Content>
+    </Collapsible.Root>
+    <hr />
+  {/if}
+
   <!-- params -->
-  <Collapsible.Root open={true} class="w-full">
+  <Collapsible.Root open={false} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Params</Label>
@@ -311,16 +370,16 @@ function select_field_type(newValue, trigger) {
     </Collapsible.Trigger>
 
     <Collapsible.Content class="flex flex-col gap-y-2 pl-2 pt-2">
-      <!-- todo this doesnt update when fieldtype changes -->
-      {@const field_param_spec = field_params_spec_lookup[value.fieldtype ?? "unknown"]}
       {#if field_param_spec}
-        <Form
-          initial_form={field_param_spec}
-          form={params_store}
-          attachments={$fieldStore.attachmentsStore}
-        />
+        {#key value.fieldtype}
+          <Form
+            initial_form={field_param_spec}
+            form={params_store}
+            attachments={$fieldStore.attachmentsStore}
+          />
+        {/key}
       {:else}
-        <span class="text-muted-foreground text-xs">No params available for this fieldtype.</span>
+        <span class="text-xs text-muted-foreground">No params available for this fieldtype.</span>
       {/if}
     </Collapsible.Content>
   </Collapsible.Root>
@@ -367,14 +426,14 @@ function select_field_type(newValue, trigger) {
 
     <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
       <div>
-        <div class="w-full flex items-center space-x-2">
+        <div class="flex w-full items-center space-x-2">
           <Checkbox id="has_default" bind:checked={value.initvalue.has_default} />
           <Label for="has_default">Has Default</Label>
         </div>
         <JsonEditorBound bind:value={value.initvalue.default} />
       </div>
       <div>
-        <div class="w-full flex items-center space-x-2">
+        <div class="flex w-full items-center space-x-2">
           <Checkbox id="has_override" bind:checked={value.initvalue.has_override} />
           <Label for="has_override">Has Override</Label>
         </div>
@@ -400,7 +459,7 @@ function select_field_type(newValue, trigger) {
 
       {#if value.conditions && value.conditions.length > 0}
         {#each value.conditions as condition, index}
-          <div class="flex items-center space-x-2 w-full">
+          <div class="flex w-full items-center space-x-2">
             <!-- up and down sort buttons -->
             <div class="flex flex-col items-center">
               <Button
@@ -455,7 +514,7 @@ function select_field_type(newValue, trigger) {
 
       {#if value.validations && value.validations.length > 0}
         {#each value.validations as validation, index}
-          <div class="flex items-start space-x-2 w-full">
+          <div class="flex w-full items-start space-x-2">
             <!-- up and down sort buttons -->
             <div class="flex flex-col items-center">
               <Button
@@ -475,7 +534,7 @@ function select_field_type(newValue, trigger) {
                 <i class="fa fa-chevron-down" />
               </Button>
             </div>
-            <div class="w-full flex flex-col items-stretch gap-1">
+            <div class="flex w-full flex-col items-stretch gap-1">
               <Select.Root
                 selected={{
                   label: value.validations[index].validationtype,

package/dist/fields2/sub/grid-field.svelte

@@ -2,8 +2,13 @@
   spec: {
     fields: {
       columnDefs: {
-        fieldtype: "jsoneditor",
-        help: "Column Definitions as per https://www.ag-grid.com/javascript-data-grid/column-definitions/"
+        fieldtype: "arraybuilder",
+        params: {
+          new_entry_field: {
+            fieldtype: "jsoneditor"
+          }
+        },
+        help: "See https://www.ag-grid.com/javascript-data-grid/column-definitions/"
       }
     }
   }
@@ -50,5 +55,5 @@ onMount(() => {
 </script>
 
 <FieldLabel {fieldStore} />
-<div bind:this={gridDiv} class="ag-theme-material w-full h-96" />
+<div bind:this={gridDiv} class="ag-theme-material h-96 w-full" />
 <FieldMessage {fieldStore} />

package/dist/fields2/sub/object-builder-field.svelte

@@ -16,9 +16,9 @@ export const object_builder_field_param_spec = {
 <script>import * as Collapsible from "@stubber/ui/collapsible";
 import { Button } from "@stubber/ui/button";
 import { Input } from "@stubber/ui/input";
-import { Separator } from "@stubber/ui/separator";
+import { Label } from "@stubber/ui/label";
 import { cloneDeep } from "lodash-es";
-import FieldLabel from "../FieldLabel.svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
 import { build_field } from "../utils";
@@ -73,7 +73,7 @@ const make_key_unique = (key) => {
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
@@ -102,7 +102,7 @@ const make_key_unique = (key) => {
             </Button>
           </div>
         </div>
-        <Collapsible.Content class="pl-6 mt-2">
+        <Collapsible.Content class="mt-2 pl-6">
           {@const built_value_field = build_field(
             $fieldStore.formStore,
             $fieldStore.attachmentsStore,
@@ -116,8 +116,12 @@ const make_key_unique = (key) => {
       </Collapsible.Root>
       <!-- <Separator class="my-2" /> -->
     {/each}
-    <Button size="icon" variant="outline" on:click={add_value}>
-      <i class="fa fa-plus" />
-    </Button>
+
+    <div class="flex items-center justify-between">
+      <Button size="icon" variant="outline" on:click={add_value}>
+        <i class="fa fa-plus" />
+      </Button>
+      <FieldExprToggle {fieldStore} />
+    </div>
   </Collapsible.Content>
 </Collapsible.Root>

package/dist/fields2/sub/scroll-and-read-display-field.svelte

@@ -23,6 +23,7 @@ import { isEqual } from "lodash-es";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
 import { onMount } from "svelte";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 let params = $fieldStore.params;
 let yes_value = params?.checkedvalue ?? true;
@@ -59,11 +60,11 @@ const update_value_details = (new_value) => {
 };
 </script>
 
-<div class="flex flex-col w-full text-surface-900 my-2">
+<div class="my-2 flex w-full flex-col text-surface-900">
   <!-- div with inner shadow -->
   <div
     bind:this={outer}
-    class="border max-h-[300px] overflow-y-scroll shadow-inner rounded-md"
+    class="max-h-[300px] overflow-y-scroll rounded-md border shadow-inner"
     on:scroll={handle_scroll}
   >
     <div class="p-6 px-2">
@@ -73,9 +74,7 @@ const update_value_details = (new_value) => {
   <div
     class="{!scrolled_to_bottom
       ? 'opacity-20'
-      : ''} flex space-x-3 relative mt-2 items-center {is_error
-      ? 'border-b border-warning-500'
-      : ''}"
+      : ''} relative mt-2 flex items-center gap-x-2 {is_error ? 'border-b border-warning-500' : ''}"
   >
     <Checkbox
       disabled={!scrolled_to_bottom}
@@ -87,6 +86,7 @@ const update_value_details = (new_value) => {
     <Label for="input_{$fieldStore.id}" class="block">
       {$fieldStore.label}
     </Label>
+    <FieldExprToggle {fieldStore} />
   </div>
   <FieldMessage {fieldStore} />
 </div>

package/dist/fields2/sub/section-field.svelte

@@ -6,22 +6,25 @@ import * as Collapsible from "@stubber/ui/collapsible";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import FormField from "../form-field.svelte";
+import { Label } from "@stubber/ui/label";
+import FieldExprToggle from "../FieldExprToggle.svelte";
 export let fieldStore;
 </script>
 
 <Collapsible.Root open={true} class="w-full">
   <Collapsible.Trigger asChild let:builder>
     <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-      <FieldLabel {fieldStore} />
+      <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
       <i class="fa fa-sort" />
     </Button>
   </Collapsible.Trigger>
 
-  <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
+  <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
     {#each $fieldStore.sub_fields || [] as sub_field (get_store_value(sub_field).id)}
       <FormField fieldStore={sub_field} />
     {/each}
+    <FieldExprToggle {fieldStore} />
   </Collapsible.Content>
 </Collapsible.Root>

package/dist/fields2/validations/validate_field.js

@@ -87,8 +87,8 @@ export const regex_validation = (results, value, validation) => {
 export const jsonata_validation = async (results, _value, validation, context = {}) => {
     try {
         let result = await jsonata(validation.params.jsonata).evaluate(context);
-        console.log(`jsonata context:`, context);
-        console.log(`jsonata ${validation.params.jsonata} result:`, result);
+        // console.log(`jsonata context:`, context);
+        // console.log(`jsonata ${validation.params.jsonata} result:`, result);
         if (!result) {
             results.push({
                 message: validation.invalid_message || "This field is invalid.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.6.3",
+  "version": "1.7.0",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -27,7 +27,7 @@
   },
   "scripts": {
     "dev": "vite dev --host",
-    "build": "vite build && npm run package",
+    "build": "vite build",
     "package": "svelte-kit sync && svelte-package && publint",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
@@ -94,7 +94,7 @@
   },
   "release": {
     "branches": [
-      "master"
+      "staging"
     ],
     "plugins": [
       "@semantic-release/commit-analyzer",