@stubber/form-fields 1.4.6 → 1.5.0

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

@@ -0,0 +1,146 @@
+<script context="module">import {} from "../interfaces";
+export const code_field_param_spec = {
+  spec: {
+    fields: {
+      globals: {
+        fieldtype: "jsoneditor",
+        help: "Global variables available in the code editor."
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Textarea } from "@stubber/ui/textarea";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import {
+  acceptCompletion,
+  autocompletion,
+  CompletionContext,
+  completionKeymap,
+  startCompletion
+} from "@codemirror/autocomplete";
+import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+export let fieldStore;
+let value = $fieldStore.value || "";
+let editor_view;
+const custom_completion_keymap = completionKeymap.filter((binding) => binding.key != "Enter").concat([
+  {
+    key: "Enter",
+    run: () => {
+      return false;
+    }
+  },
+  {
+    key: "Tab",
+    run: acceptCompletion
+  },
+  {
+    key: "Ctrl-Space",
+    run: startCompletion,
+    stopPropagation: true
+  }
+]);
+function keysFor(obj) {
+  return Object.keys(obj ?? {});
+}
+function globalCompletions(ctx) {
+  const m = ctx.matchBefore(/[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*\.?/);
+  if (!m && !ctx.explicit) return null;
+  const text = m?.text ?? "";
+  const trailingDot = text.endsWith(".");
+  const parts = (trailingDot ? text.slice(0, -1) : text).split(".").filter(Boolean);
+  let container = $fieldStore.params?.globals || {};
+  for (let i = 0; i < Math.max(0, parts.length - (trailingDot ? 0 : 1)); i++) {
+    container = container?.[parts[i]];
+    if (!container) break;
+  }
+  const last = trailingDot ? "" : parts[parts.length - 1] ?? "";
+  const from = ctx.pos - last.length;
+  return {
+    from,
+    options: keysFor(container).map((key) => ({
+      label: key,
+      type: "property"
+      // 👈 simplified
+    })),
+    validFor: /^\w*$/
+    // keep suggestions stable while typing
+  };
+}
+const stubber_completions = javascriptLanguage.data.of({
+  autocomplete: globalCompletions
+});
+function bind_codemirror(el) {
+  const min_height_editor = EditorView.theme({
+    ".cm-content, .cm-gutter": { minHeight: "200px" },
+    "&": { maxHeight: "300px" },
+    ".cm-scroller": { overflow: "auto" }
+  });
+  editor_view = new EditorView({
+    state: EditorState.create({
+      doc: value,
+      extensions: [
+        basicSetup,
+        javascript(),
+        stubber_completions,
+        autocompletion({ defaultKeymap: false }),
+        keymap.of(custom_completion_keymap),
+        min_height_editor,
+        update_listener
+      ]
+    }),
+    parent: el
+  });
+}
+const update_listener = EditorView.updateListener.of((update) => {
+  if (update.docChanged) {
+    const new_value = update.state.doc.toString();
+    if (new_value !== value) {
+      value = new_value;
+    }
+  }
+});
+$: sync_field_to_editor(value);
+const sync_field_to_editor = (new_value) => {
+  if (editor_view && editor_view.state.doc.toString() !== new_value) {
+    editor_view.dispatch({
+      changes: {
+        from: 0,
+        to: editor_view.state.doc.length,
+        insert: new_value
+      }
+    });
+  }
+  if ($fieldStore.value !== new_value) {
+    $fieldStore.value = new_value;
+  }
+};
+$: sync_field_to_value($fieldStore.value);
+const sync_field_to_value = (new_value) => {
+  if (new_value !== value) {
+    value = new_value;
+    if (editor_view?.state.doc.toString() !== new_value) {
+      editor_view.dispatch({
+        changes: {
+          from: 0,
+          to: editor_view.state.doc.length,
+          insert: new_value
+        }
+      });
+    }
+  }
+};
+</script>
+
+<div class="flex flex-col w-full my-2">
+  <FieldLabel {fieldStore} />
+  <div class="relative rounded-md">
+    <div use:bind_codemirror />
+  </div>
+  <FieldMessage {fieldStore} />
+</div>

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

@@ -0,0 +1,27 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField, type IInitialForm } from "../interfaces";
+interface ICodeFieldParams {
+    globals?: Record<string, any>;
+}
+export declare const code_field_param_spec: IInitialForm;
+export interface ICodeField extends IBaseField<ICodeFieldParams> {
+    fieldtype: "code";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ICodeFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CodeFieldProps = typeof __propDef.props;
+export type CodeFieldEvents = typeof __propDef.events;
+export type CodeFieldSlots = typeof __propDef.slots;
+export default class CodeField extends SvelteComponent<CodeFieldProps, CodeFieldEvents, CodeFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,84 @@
+<script context="module">export const contact_selector_field_param_spec = {
+  spec: {
+    fields: {
+      label: {
+        fieldtype: "text",
+        help: "The contact field to use as the label in the dropdown options."
+      },
+      limit: {
+        fieldtype: "number",
+        help: "Limit the number of contacts returned."
+      }
+    }
+  }
+};
+</script>
+
+<script>import { Button } from "@stubber/ui/button";
+import SelectField, {} from "./select-field.svelte";
+export let fieldStore;
+const params = $fieldStore.params || {};
+const dependencies = $fieldStore.formDependencies;
+const createWantToModal = dependencies?.createWantToModal;
+const show_create_contact_modal = () => {
+  const stubref = dependencies?.stubber?.stubref;
+  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([]);
+        }
+      });
+    });
+  };
+}
+</script>
+
+<SelectField {fieldStore}>
+  <Button
+    on:click={show_create_contact_modal}
+    variant="ghost"
+    class="ml-auto text-surface-500 text-sm hover:text-surface-700"
+  >
+    <i class="fa-regular fa-plus" />
+    Create new contact
+  </Button>
+</SelectField>

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

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
+export interface IContactSelectorFieldParams {
+    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";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<IContactSelectorFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ContactSelectorFieldProps = typeof __propDef.props;
+export type ContactSelectorFieldEvents = typeof __propDef.events;
+export type ContactSelectorFieldSlots = typeof __propDef.slots;
+export default class ContactSelectorField extends SvelteComponent<ContactSelectorFieldProps, ContactSelectorFieldEvents, ContactSelectorFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,197 @@
+<script context="module">const currency_codes = Intl.supportedValuesOf("currency");
+const currency_code_options = currency_codes.map((code) => ({
+  label: code,
+  value: code
+}));
+export const currency_field_param_spec = {
+  spec: {
+    fields: {
+      currency: {
+        fieldtype: "select",
+        without_value_details: true,
+        params: {
+          options: currency_code_options
+        }
+      },
+      currency_whitelist: {
+        fieldtype: "arraybuilder",
+        params: {
+          new_entry_field: {
+            fieldtype: "select",
+            without_value_details: true,
+            params: {
+              options: currency_code_options
+            }
+          }
+        },
+        help: "List of allowed currency codes (ISO 4217)"
+      },
+      currency_blacklist: {
+        fieldtype: "arraybuilder",
+        help: "List of disallowed currency codes (ISO 4217)",
+        params: {
+          new_entry_field: {
+            fieldtype: "select",
+            without_value_details: true,
+            params: {
+              options: currency_code_options
+            }
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<script>import * as utils from "../../utils/index.js";
+import { Button } from "@stubber/ui/button";
+import * as Command from "@stubber/ui/command";
+import * as Popover from "@stubber/ui/popover";
+import getSymbolFromCurrency from "currency-symbol-map";
+import currency from "currency.js";
+import { get } from "lodash-es";
+import { get as get_store_value } from "svelte/store";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { set_value_details } from "../utils";
+export let fieldStore;
+let field = $fieldStore;
+let params = field.params;
+const currencyRegex = /^([0-9]+(\.?[0-9]?[0-9]?)?)$/;
+const currencyName = new Intl.DisplayNames("en-US", {
+  type: "currency"
+});
+let { inputRegexMask } = utils;
+let initial_ui_value = $fieldStore.value || "";
+let currency_list = [];
+const build_currency_list_from_codes = (codes) => {
+  const currencies = [];
+  for (const code of codes) {
+    try {
+      const name = currencyName.of(code);
+      if (!name) continue;
+      const symbol = getSymbolFromCurrency(code);
+      if (!symbol) continue;
+      currencies.push({
+        value: code,
+        symbol,
+        name
+      });
+    } catch (err) {
+      console.warn(err);
+      continue;
+    }
+  }
+  return currencies;
+};
+if (params?.currency_whitelist && params.currency_whitelist.length > 0) {
+  currency_list = build_currency_list_from_codes(params.currency_whitelist);
+} else if (params?.currency_blacklist && params.currency_blacklist.length > 0) {
+  const filtered_currencies = currency_codes.filter(
+    (c) => !params.currency_blacklist?.includes(c)
+  );
+  currency_list = build_currency_list_from_codes(filtered_currencies);
+} else {
+  currency_list = build_currency_list_from_codes(currency_codes);
+}
+const details_data_path = field.data_path + "_details";
+let current_details = get(get_store_value(field.formStore), details_data_path);
+if (!current_details) {
+  current_details = {
+    cents: 0,
+    amount: 0,
+    currencycode: params?.currency || "USD",
+    currencysymbol: getSymbolFromCurrency(params?.currency || "USD") || "$"
+  };
+}
+const on_input = (e) => {
+  const input = e.target;
+  const new_value = input.value;
+  const currencycode_valid = current_details?.currencycode && currency_list.some((c) => c.value === current_details.currencycode);
+  if (!currencycode_valid) {
+    if (params?.currency && currency_list.some((c) => c.value === params.currency)) {
+      current_details.currencycode = params.currency;
+    } else if (currency_list.length > 0) {
+      current_details.currencycode = currency_list[0].value;
+    } else {
+      current_details.currencycode = "USD";
+    }
+  }
+  current_details.currencysymbol = getSymbolFromCurrency(current_details.currencycode) || current_details.currencysymbol || "USD";
+  current_details.cents = currency(new_value).intValue;
+  current_details.amount = currency(new_value).value;
+  field.value = current_details.amount ? current_details.amount.toFixed(2).toString() : "";
+  set_value_details(field, "details", current_details);
+};
+let open = false;
+$: selectedValue = currency_list.find((c) => c.value === current_details?.currencycode)?.value || "Select Currency...";
+</script>
+
+<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"
+>
+  <!-- currency indicator front left -->
+  <div class="pointer-events-none text-gray-500">
+    {#if current_details?.currencysymbol}
+      {current_details.currencysymbol}
+    {:else if params?.currency}
+      {getSymbolFromCurrency(params.currency) || params.currency}
+    {:else}
+      $
+    {/if}
+  </div>
+  <input
+    class="w-full focus-within:outline-none bg-transparent"
+    use:inputRegexMask={currencyRegex}
+    value={initial_ui_value}
+    inputmode="decimal"
+    aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+    on:input={on_input}
+  />
+
+  <!-- currency selector back right -->
+  {#if currency_list.length > 1 && !params?.currency}
+    <Popover.Root bind:open let:ids>
+      <Popover.Trigger asChild let:builder>
+        <Button
+          builders={[builder]}
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          class="w-28 border-none bg-transparent px-1 justify-between"
+        >
+          {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">
+        <Command.Root>
+          <Command.Input placeholder="Search currencies..." />
+          <Command.Empty>No currency found.</Command.Empty>
+          <Command.Group>
+            {#each currency_list as c}
+              <Command.Item
+                value={c.value}
+                onSelect={(currentValue) => {
+                  current_details = {
+                    ...current_details,
+                    currencycode: currentValue,
+                    currencysymbol: getSymbolFromCurrency(currentValue) || "",
+                  };
+                  set_value_details($fieldStore, "details", current_details);
+                  open = false;
+                }}
+                class={selectedValue === c.value ? "bg-primary-100" : ""}
+              >
+                {c.value} - {c.name} ({c.symbol})
+              </Command.Item>
+            {/each}
+          </Command.Group>
+        </Command.Root>
+      </Popover.Content>
+    </Popover.Root>
+  {/if}
+</div>
+<FieldMessage {fieldStore} />

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

@@ -0,0 +1,29 @@
+import { SvelteComponent } from "svelte";
+import type { IBaseField, IBuiltField, IInitialForm } from "../interfaces";
+export interface ICurrencyFieldParams {
+    currency?: string;
+    currency_whitelist?: string[];
+    currency_blacklist?: string[];
+}
+export declare const currency_field_param_spec: IInitialForm;
+export interface ICurrencyField extends IBaseField<ICurrencyFieldParams> {
+    fieldtype: "currency";
+}
+import { type Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField<ICurrencyFieldParams>>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CurrencyFieldProps = typeof __propDef.props;
+export type CurrencyFieldEvents = typeof __propDef.events;
+export type CurrencyFieldSlots = typeof __propDef.slots;
+export default class CurrencyField extends SvelteComponent<CurrencyFieldProps, CurrencyFieldEvents, CurrencyFieldSlots> {
+}
+export {};

package/dist/fields2/sub/data-indication-field.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script>import { isString } from "lodash-es";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+let value;
+$: {
+  const new_value = $fieldStore.value;
+  const is_string = isString(new_value);
+  value = is_string ? new_value : JSON.stringify(new_value, null, 2);
+}
+</script>
+
+<FieldLabel {fieldStore} />
+<div class="relative mt-2 rounded-md bg-surface-100 p-2">
+  <pre class="rounded-md">{value ?? ""}</pre>
+</div>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/data-indication-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField } from "../interfaces";
+export interface IDataIndicationField extends IBaseField<{}> {
+    fieldtype: "dataindication";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DataIndicationFieldProps = typeof __propDef.props;
+export type DataIndicationFieldEvents = typeof __propDef.events;
+export type DataIndicationFieldSlots = typeof __propDef.slots;
+export default class DataIndicationField extends SvelteComponent<DataIndicationFieldProps, DataIndicationFieldEvents, DataIndicationFieldSlots> {
+}
+export {};

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

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>import { Input } from "@stubber/ui/input";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+</script>
+
+<FieldLabel {fieldStore} />
+<Input
+  id={$fieldStore.id}
+  bind:value={$fieldStore.value}
+  type="date"
+  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+  class="w-full date-input {!$fieldStore.value ? 'text-muted-foreground' : ''}"
+  aria-describedby="message-{$fieldStore.id}"
+/>
+<FieldMessage {fieldStore} />
+
+<style>
+  :global(input[type="date"].date-input) {
+    position: relative;
+    padding-right: 2rem;
+  }
+
+  :global(input[type="date"].date-input::-webkit-calendar-picker-indicator) {
+    position: absolute;
+    right: 0.5rem;
+    cursor: pointer;
+  }
+</style>

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

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField } from "../interfaces";
+export interface IDateField extends IBaseField<{}> {
+    fieldtype: "date";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DateFieldProps = typeof __propDef.props;
+export type DateFieldEvents = typeof __propDef.events;
+export type DateFieldSlots = typeof __propDef.slots;
+export default class DateField extends SvelteComponent<DateFieldProps, DateFieldEvents, DateFieldSlots> {
+}
+export {};

package/dist/fields2/sub/date-time-field.svelte

@@ -0,0 +1,31 @@
+<script context="module"></script>
+
+<script>import { Input } from "@stubber/ui/input";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+export let fieldStore;
+</script>
+
+<FieldLabel {fieldStore} />
+<Input
+  id={$fieldStore.id}
+  bind:value={$fieldStore.value}
+  type="datetime-local"
+  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+  class="w-full date-input {!$fieldStore.value ? 'text-muted-foreground' : ''}"
+  aria-describedby="message-{$fieldStore.id}"
+/>
+<FieldMessage {fieldStore} />
+
+<style>
+  :global(input[type="datetime-local"].date-input) {
+    position: relative;
+    padding-right: 2rem;
+  }
+
+  :global(input[type="datetime-local"].date-input::-webkit-calendar-picker-indicator) {
+    position: absolute;
+    right: 0.5rem;
+    cursor: pointer;
+  }
+</style>

package/dist/fields2/sub/date-time-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField } from "../interfaces";
+export interface IDateTimeField extends IBaseField<{}> {
+    fieldtype: "datetime";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DateTimeFieldProps = typeof __propDef.props;
+export type DateTimeFieldEvents = typeof __propDef.events;
+export type DateTimeFieldSlots = typeof __propDef.slots;
+export default class DateTimeField extends SvelteComponent<DateTimeFieldProps, DateTimeFieldEvents, DateTimeFieldSlots> {
+}
+export {};