@stubber/form-fields 1.6.3 → 1.6.4

package/dist/fields2/FieldMessage.svelte

@@ -8,7 +8,7 @@ $: type = validation_result?.type;
 
 <Label
   id="message-{$fieldStore.id}"
-  class="ml-2 text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
+  class="ml-2 truncate text-xs {!$fieldStore.validation_result ? 'invisible' : ''} {type == 'error'
     ? 'text-red-500'
     : 'text-muted-foreground'}"
 >

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/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.6.4",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",