@stubber/form-fields 1.6.2 → 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/currency-field.svelte

@@ -130,7 +130,7 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
 
 <FieldLabel {fieldStore} />
 <div
-  class="flex-row items-center gap-2 border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground shadow-xs flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base outline-none transition-[color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50"
+  class="flex h-9 w-full min-w-0 flex-row items-center gap-2 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30"
 >
   <!-- currency indicator front left -->
   <div class="pointer-events-none text-gray-500">
@@ -143,7 +143,7 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
     {/if}
   </div>
   <input
-    class="w-full focus-within:outline-none bg-transparent"
+    class="w-full bg-transparent focus-within:outline-none"
     use:inputRegexMask={currencyRegex}
     value={initial_ui_value}
     inputmode="decimal"
@@ -160,13 +160,13 @@ $: selectedValue = currency_list.find((c) => c.value === current_details?.curren
           variant="outline"
           role="combobox"
           aria-expanded={open}
-          class="w-28 border-none bg-transparent px-1 justify-between"
+          class="w-28 justify-between border-none bg-transparent px-1"
         >
           {selectedValue}
           <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </Popover.Trigger>
-      <Popover.Content class="p-0 max-h-[50vh] overflow-y-scroll">
+      <Popover.Content class="max-h-[50vh] overflow-y-scroll p-0">
         <Command.Root>
           <Command.Input placeholder="Search currencies..." />
           <Command.Empty>No currency found.</Command.Empty>

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/smart-text-field.svelte

@@ -121,12 +121,30 @@ const contentField = StateField.define({
   },
   update(value, transaction) {
     if (transaction.docChanged) {
-      $fieldStore.value = parse_string ? parse_string_value(transaction.newDoc.toString()) : transaction.newDoc.toString();
-      return transaction.newDoc.toString();
+      let new_value = transaction.newDoc.toString();
+      if (new_value !== $fieldStore.value) {
+        $fieldStore.value = parse_string ? parse_string_value(new_value) : new_value;
+      }
+      return new_value;
     }
     return value;
   }
 });
+$: update_editor_content($fieldStore.value);
+function update_editor_content(new_value) {
+  if (editor_view) {
+    const current_value = editor_view.state.doc.toString();
+    if (new_value !== current_value && typeof new_value === "string") {
+      editor_view.dispatch({
+        changes: {
+          from: 0,
+          to: current_value.length,
+          insert: new_value
+        }
+      });
+    }
+  }
+}
 function fake_handlebars_lang() {
   const curly_decorator = new MatchDecorator({
     regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
@@ -180,43 +198,63 @@ function parse_string_value(value) {
 
 <FieldLabel {fieldStore} />
 {#if !is_object}
-  <div
-    use:setup_editor
-    class=" stubber-cm text-sm {isValid ? 'stubber-valid' : 'stubber-invalid'}"
-  />
+  <div use:setup_editor class="stubber-cm" aria-invalid={!isValid} />
 {:else}
   <p class="text-surface-400">The value of this field is not a string.</p>
 {/if}
 <FieldMessage {fieldStore} />
 
+<!-- below styles are basically this tailwind string:
+ flex h-9 w-full min-w-0 flex-row items-center gap-2 rounded-md border border-input bg-background px-3 py-1 text-base outline-none ring-offset-background transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid]:border-destructive aria-[invalid]:ring-destructive/50 aria-[invalid]:focus-visible:ring-destructive/50 md:text-sm dark:bg-input/30 -->
+
 <style>
   .stubber-cm :global(.cm-editor) {
-    /* Base styles */
-    background-color: rgba(255, 255, 255, 0.85);
+    width: 100%;
+    min-width: 0;
     border-radius: 0.375rem;
+    border-width: 1px;
     --tw-border-opacity: 1;
     border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
-    border-width: 1px;
-    border-style: solid;
-    width: 100%;
-    color: rgb(31 41 51);
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
 
-    /* Top inset shadow only */
-    box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    --tw-ring-offset-color: hsl(var(--background) / 1);
+    transition-property: color, box-shadow;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
   }
 
-  .stubber-cm :global(.cm-editor.cm-focused) {
-    outline: none;
-    border-width: 1px;
-    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
+  @media (prefers-color-scheme: dark) {
+    .stubber-cm :global(.cm-editor) {
+      background-color: hsl(var(--input) / 0.3);
+    }
+  }
+
+  .stubber-cm[aria-invalid="true"] :global(.cm-editor) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
+    --tw-ring-color: hsl(var(--destructive) / 0.5);
   }
 
-  .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
-    border-color: rgb(170, 170, 170, 0.5);
+  .stubber-cm :global(.cm-editor.cm-focused) {
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--ring) / var(--tw-border-opacity, 1));
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-color: hsl(var(--ring) / 0.5);
   }
 
-  .stubber-cm.stubber-invalid :global(.cm-editor) {
-    border-color: rgb(225 45 57);
+  .stubber-cm[aria-invalid="true"] :global(.cm-editor.cm-focused) {
+    --tw-ring-color: hsl(var(--destructive) / 0.5);
+    --tw-border-opacity: 1;
+    border-color: hsl(var(--destructive) / var(--tw-border-opacity, 1));
   }
 
   .stubber-cm :global(.cm-editor .cm-scroller) {
@@ -236,6 +274,7 @@ function parse_string_value(value) {
   }
 
   .stubber-cm :global(.cm-editor .cm-placeholder) {
+    --tw-text-opacity: 1;
     color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
   }
 

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.2",
+  "version": "1.6.4",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",
@@ -50,6 +50,7 @@
     "postcss": "^8.4.28",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-tailwindcss": "^0.4.1",
     "publint": "^0.2.2",
     "socket.io-client": "^4.8.1",
     "svelte-check": "^3.4.3",
@@ -65,7 +66,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.4",
-    "@stubber/ui": "^1.13.5",
+    "@stubber/ui": "^1.13.6",
     "ag-grid-community": "^31.0.2",
     "ag-grid-enterprise": "^31.0.2",
     "codemirror": "^6.0.2",