@stubber/form-fields 1.6.1 → 1.6.3

package/dist/fields2/sub/contact-selector-field.svelte

@@ -15,7 +15,8 @@
 </script>
 
 <script>import { Button } from "@stubber/ui/button";
-import SelectField, {} from "./select-field.svelte";
+import SelectField, {
+} from "./select-field.svelte";
 export let fieldStore;
 const params = $fieldStore.params || {};
 const dependencies = $fieldStore.formDependencies;
@@ -25,54 +26,51 @@ const show_create_contact_modal = () => {
   const orguuid = dependencies?.stubber?.orguuid;
   createWantToModal("_create_new_contact", stubref, orguuid);
 };
-const field = $fieldStore;
-if (field.params) {
-  field.params.load_options = async (search_term) => {
-    const socket = dependencies?.clienthub?.socket;
-    const orguuid = dependencies?.stubber?.orguuid;
-    const stubref = dependencies?.stubber?.stubref;
-    if (!socket || !orguuid || !stubref) {
-      console.error("ClientHub socket or stubber details not available.");
-      return [];
-    }
-    const details = {
-      resource_name: "contacts"
-    };
-    details.params = $fieldStore.params || {};
-    details.params.orguuid = orguuid;
-    details.params.stubref = stubref;
-    details.params.input = search_term;
-    if (details.params.limit === void 0) {
-      details.params.limit = 50;
-    }
-    console.log("Loading contacts with details:", details);
-    return new Promise((resolve, reject) => {
-      socket.emit("request", { type: "resource", details }, (res) => {
-        if (res.success) {
-          console.log("Contacts loaded:", res);
-          const contacts = res.payload?.contacts || [];
-          const result = contacts.map((contact) => {
-            let label = contact._default_label;
-            if (params.label && contact[params.label]) {
-              label = contact[params.label];
-            }
-            return {
-              value: contact,
-              label
-            };
-          });
-          resolve(result);
-        } else {
-          console.error("Failed to load contacts:", res);
-          resolve([]);
-        }
-      });
-    });
+const load_options = async (search_term) => {
+  const socket = dependencies?.clienthub?.socket;
+  const orguuid = dependencies?.stubber?.orguuid;
+  const stubref = dependencies?.stubber?.stubref;
+  if (!socket || !orguuid || !stubref) {
+    console.error("ClientHub socket or stubber details not available.");
+    return [];
+  }
+  const details = {
+    resource_name: "contacts"
   };
-}
+  details.params = $fieldStore.params || {};
+  details.params.orguuid = orguuid;
+  details.params.stubref = stubref;
+  details.params.input = search_term;
+  if (details.params.limit === void 0) {
+    details.params.limit = 50;
+  }
+  console.log("Loading contacts with details:", details);
+  return new Promise((resolve, reject) => {
+    socket.emit("request", { type: "resource", details }, (res) => {
+      if (res.success) {
+        console.log("Contacts loaded:", res);
+        const contacts = res.payload?.contacts || [];
+        const result = contacts.map((contact) => {
+          let label = contact._default_label;
+          if (params.label && contact[params.label]) {
+            label = contact[params.label];
+          }
+          return {
+            value: contact,
+            label
+          };
+        });
+        resolve(result);
+      } else {
+        console.error("Failed to load contacts:", res);
+        resolve([]);
+      }
+    });
+  });
+};
 </script>
 
-<SelectField {fieldStore}>
+<SelectField {fieldStore} {load_options}>
   <Button
     on:click={show_create_contact_modal}
     variant="ghost"

package/dist/fields2/sub/contact-selector-field.svelte.d.ts

@@ -1,16 +1,15 @@
 import { SvelteComponent } from "svelte";
 import type { Writable } from "svelte/store";
 import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
-export interface IContactSelectorFieldParams {
+export interface IContactSelectorFieldParams extends ISelectFieldParams {
     label?: string;
     limit?: number;
-    load_options?: (search_term: string) => Promise<ISelectFieldOption[]>;
 }
 export declare const contact_selector_field_param_spec: IInitialForm;
 export interface IContactSelectorField extends IBaseField<IContactSelectorFieldParams> {
     fieldtype: "contactselector";
 }
-import { type ISelectFieldOption } from "./select-field.svelte";
+import { type ISelectFieldParams } from "./select-field.svelte";
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField<IContactSelectorFieldParams>>;

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

@@ -33,6 +33,7 @@ import FieldLabel from "../FieldLabel.svelte";
 import FieldMessage from "../FieldMessage.svelte";
 import { set_value_details } from "../utils";
 export let fieldStore;
+export let load_options = void 0;
 let open = false;
 let loading = false;
 let items = [];
@@ -70,19 +71,18 @@ function closeAndFocusTrigger(triggerId) {
 let last_search = void 0;
 const handle_search = async (search) => {
   last_search = search;
-  if (params.load_options) {
+  if (load_options) {
     loading = true;
-    const remote_results = await params.load_options($state.search);
+    const remote_results = await load_options($state.search);
     loading = false;
     items = map_field_options(remote_results);
   }
 };
 let debounced_handle_search = null;
-if (params.load_options) {
+if (load_options) {
   debounced_handle_search = debounce(handle_search, 300);
 }
-$: if (params.load_options && $state.search !== void 0 && $state.search !== last_search) {
-  console.log("doing debounced search", !!debounced_handle_search);
+$: if (load_options && $state.search !== void 0 && $state.search !== last_search) {
   if (debounced_handle_search) debounced_handle_search($state.search);
 }
 const handle_select = (item_key, trigger) => {
@@ -110,7 +110,7 @@ const handle_select = (item_key, trigger) => {
     </Button>
   </Popover.Trigger>
   <Popover.Content sameWidth class="p-0 z-[100]">
-    <Command.Root shouldFilter={!params.load_options} {state}>
+    <Command.Root shouldFilter={!load_options} {state}>
       <Command.Input class="border-none outline-none focus:ring-0" placeholder="Search..." />
       <Command.List>
         {#if loading}

package/dist/fields2/sub/select-field.svelte.d.ts

@@ -7,7 +7,6 @@ export interface ISelectFieldOption {
 }
 export interface ISelectFieldParams {
     options?: ISelectFieldOption[];
-    load_options?: (search_term: string) => Promise<ISelectFieldOption[]>;
 }
 export declare const select_field_param_spec: IInitialForm;
 export interface ISelectField extends IBaseField<ISelectFieldParams> {
@@ -16,6 +15,7 @@ export interface ISelectField extends IBaseField<ISelectFieldParams> {
 declare const __propDef: {
     props: {
         fieldStore: Writable<IBuiltField<ISelectFieldParams>>;
+        load_options?: ((search_term: string) => Promise<ISelectFieldOption[]>) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -61,9 +61,6 @@ const load_options = async (search_term) => {
     });
   });
 };
-if ($fieldStore.params) {
-  $fieldStore.params.load_options = load_options;
-}
 </script>
 
-<SelectField {fieldStore} />
+<SelectField {fieldStore} {load_options} />

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stubber/form-fields",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "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",