@stubber/form-fields 1.7.1 → 1.7.3

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

@@ -79,15 +79,23 @@ const move_value_down = (index) => {
     $fieldStore.value = new_value;
   }
 };
+let open = true;
 </script>
 
-<Collapsible.Root open={true} class="w-full">
+<Collapsible.Root bind:open class="w-full">
   <Collapsible.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+    <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
       <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
-      <i class="fa fa-sort" />
+      <div class="flex items-center">
+        {#if open}
+          <i class="fa fa-caret-down pr-1" />
+        {:else}
+          <i class="fa fa-caret-right pr-1" />
+        {/if}
+        <FieldExprToggle {fieldStore} />
+      </div>
     </Button>
   </Collapsible.Trigger>
   <Collapsible.Content class="flex flex-col gap-y-1 pl-2">

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

@@ -11,10 +11,7 @@ export const code_field_param_spec = {
 };
 </script>
 
-<script>import { Textarea } from "@stubber/ui/textarea";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import {
+<script>import {
   acceptCompletion,
   autocompletion,
   CompletionContext,
@@ -25,7 +22,11 @@ import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
 import { EditorState } from "@codemirror/state";
 import { EditorView, keymap } from "@codemirror/view";
 import { basicSetup } from "codemirror";
+import { getContext } from "svelte";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
 export let fieldStore;
+const code_fields_ctx_store = getContext("code_fields_ctx");
 let value = $fieldStore.value || "";
 let editor_view;
 const custom_completion_keymap = completionKeymap.filter((binding) => binding.key != "Enter").concat([
@@ -54,16 +55,21 @@ function globalCompletions(ctx) {
   const text = m?.text ?? "";
   const trailingDot = text.endsWith(".");
   const parts = (trailingDot ? text.slice(0, -1) : text).split(".").filter(Boolean);
-  let container = $fieldStore.params?.globals || {};
+  let global_context = {};
+  if ($code_fields_ctx_store) {
+    global_context = $code_fields_ctx_store;
+  } else {
+    global_context = $fieldStore.params?.globals || {};
+  }
   for (let i = 0; i < Math.max(0, parts.length - (trailingDot ? 0 : 1)); i++) {
-    container = container?.[parts[i]];
-    if (!container) break;
+    global_context = global_context?.[parts[i]];
+    if (!global_context) break;
   }
   const last = trailingDot ? "" : parts[parts.length - 1] ?? "";
   const from = ctx.pos - last.length;
   return {
     from,
-    options: keysFor(container).map((key) => ({
+    options: keysFor(global_context).map((key) => ({
       label: key,
       type: "property"
       // 👈 simplified
@@ -137,7 +143,7 @@ const sync_field_to_value = (new_value) => {
 };
 </script>
 
-<div class="flex flex-col w-full my-2">
+<div class="my-2 flex w-full flex-col">
   <FieldLabel {fieldStore} />
   <div class="relative rounded-md">
     <div use:bind_codemirror />

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

@@ -243,6 +243,13 @@ function update_subfields_from_value(new_value) {
     subfields_store.set({ fields: cloneDeep(new_value) || {} });
   }
 }
+let basic_info_open = true;
+let sub_fields_open = true;
+let params_open = false;
+let details_open = false;
+let initial_value_open = false;
+let conditions_open = false;
+let validations_open = false;
 </script>
 
 <FieldLabel {fieldStore} />
@@ -280,12 +287,18 @@ function update_subfields_from_value(new_value) {
     </Popover.Content>
   </Popover.Root>
   <!-- basic props -->
-  <Collapsible.Root open={true} class="w-full">
+  <Collapsible.Root bind:open={basic_info_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Basic Info</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if basic_info_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 
@@ -319,12 +332,18 @@ function update_subfields_from_value(new_value) {
   <hr />
   <!-- subfields -->
   {#if value.fieldtype === "section" || value.fieldtype === "multistep"}
-    <Collapsible.Root open={false} class="w-full">
+    <Collapsible.Root bind:open={sub_fields_open} 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" />
+          <div class="flex items-center">
+            {#if sub_fields_open}
+              <i class="fa fa-caret-down" />
+            {:else}
+              <i class="fa fa-caret-right" />
+            {/if}
+          </div>
         </Button>
       </Collapsible.Trigger>
 
@@ -360,12 +379,18 @@ function update_subfields_from_value(new_value) {
   {/if}
 
   <!-- params -->
-  <Collapsible.Root open={false} class="w-full">
+  <Collapsible.Root bind:open={params_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Params</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if params_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 
@@ -385,12 +410,18 @@ function update_subfields_from_value(new_value) {
   </Collapsible.Root>
   <hr />
   <!-- details -->
-  <Collapsible.Root open={false} class="w-full">
+  <Collapsible.Root bind:open={details_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Details</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if details_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 
@@ -415,12 +446,18 @@ function update_subfields_from_value(new_value) {
   </Collapsible.Root>
   <hr />
   <!-- initial value -->
-  <Collapsible.Root open={false} class="w-full">
+  <Collapsible.Root bind:open={initial_value_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Initial Value</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if initial_value_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 
@@ -443,12 +480,18 @@ function update_subfields_from_value(new_value) {
   </Collapsible.Root>
   <hr />
   <!-- conditions -->
-  <Collapsible.Root open={false} class="w-full">
+  <Collapsible.Root bind:open={conditions_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Conditions</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if conditions_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 
@@ -498,12 +541,18 @@ function update_subfields_from_value(new_value) {
   </Collapsible.Root>
   <hr />
   <!-- validations -->
-  <Collapsible.Root open={false} class="w-full">
+  <Collapsible.Root bind:open={validations_open} class="w-full">
     <Collapsible.Trigger asChild let:builder>
       <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
         <Label>Validations</Label>
 
-        <i class="fa fa-sort" />
+        <div class="flex items-center">
+          {#if validations_open}
+            <i class="fa fa-caret-down" />
+          {:else}
+            <i class="fa fa-caret-right" />
+          {/if}
+        </div>
       </Button>
     </Collapsible.Trigger>
 

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

@@ -68,15 +68,23 @@ const make_key_unique = (key) => {
   }
   return unique_key;
 };
+let open = true;
 </script>
 
-<Collapsible.Root open={true} class="w-full">
+<Collapsible.Root bind:open class="w-full">
   <Collapsible.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+    <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
       <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
-      <i class="fa fa-sort" />
+      <div class="flex items-center">
+        {#if open}
+          <i class="fa fa-caret-down pr-1" />
+        {:else}
+          <i class="fa fa-caret-right pr-1" />
+        {/if}
+        <FieldExprToggle {fieldStore} />
+      </div>
     </Button>
   </Collapsible.Trigger>
   <Collapsible.Content class="flex flex-col gap-y-1 pl-2">
@@ -121,7 +129,6 @@ const make_key_unique = (key) => {
       <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/section-field.svelte

@@ -3,21 +3,28 @@
 
 <script>import { Button } from "@stubber/ui/button";
 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;
+let open = true;
 </script>
 
-<Collapsible.Root open={true} class="w-full">
+<Collapsible.Root bind:open class="w-full">
   <Collapsible.Trigger asChild let:builder>
-    <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+    <Button builders={[builder]} variant="ghost" class="w-full justify-between px-0">
       <Label>{$fieldStore.label}</Label>
       <FieldMessage {fieldStore} />
 
-      <i class="fa fa-sort" />
+      <div class="flex items-center">
+        {#if open}
+          <i class="fa fa-caret-down pr-1" />
+        {:else}
+          <i class="fa fa-caret-right pr-1" />
+        {/if}
+        <FieldExprToggle {fieldStore} />
+      </div>
     </Button>
   </Collapsible.Trigger>
 
@@ -25,6 +32,5 @@ export let fieldStore;
     {#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/sub/select-field.svelte

@@ -48,7 +48,7 @@ const map_field_options = (options) => {
   if (!options || !Array.isArray(options)) {
     return [];
   }
-  return options.map((option, index) => {
+  return options.filter(Boolean).map((option, index) => {
     const key = `${option.label}${index}`;
     return {
       label: option.label,
@@ -102,19 +102,19 @@ const handle_select = (item_key, 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"
       style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
     >
       {dropdownLabel}
       <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
     </Button>
   </Popover.Trigger>
-  <Popover.Content sameWidth class="p-0 z-[100]">
+  <Popover.Content sameWidth class="z-[100] p-0">
     <Command.Root shouldFilter={!load_options} {state}>
       <Command.Input class="border-none outline-none focus:ring-0" placeholder="Search..." />
       <Command.List>
         {#if loading}
-          <Command.Loading class="py-6 text-sm text-center">Loading…</Command.Loading>
+          <Command.Loading class="py-6 text-center text-sm">Loading…</Command.Loading>
         {:else}
           <Command.Empty>No results found.</Command.Empty>
 

package/dist/fields2/sub/smart-text-field.svelte

@@ -69,14 +69,15 @@ import {
 import { find } from "lodash-es";
 import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
+import { getContext } from "svelte";
 export let fieldStore;
 let editor_view;
 $: validation_result = $fieldStore.validation_result;
 $: type = validation_result?.type;
 $: isValid = type !== "error";
 $: is_object = typeof $fieldStore.value === "object";
+const smart_text_fields_ctx_store = getContext("smart_text_fields_ctx");
 $: parse_string = $fieldStore.params?.parse_string;
-$: auto_completions = $fieldStore.params?.auto_completions || [];
 $: code_language = $fieldStore.params?.code_language;
 const setup_editor = (element) => {
   const extensions = [
@@ -166,6 +167,7 @@ function fake_handlebars_lang() {
   );
 }
 function myCompletions(context) {
+  const auto_completions = $smart_text_fields_ctx_store || $fieldStore.params?.auto_completions || [];
   for (let completion of auto_completions) {
     if (!completion.match_before) continue;
     let before = context.matchBefore(new RegExp(completion.match_before));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "description": "An automatic form builder based on field specifications",
   "keywords": [
     "components",