@stubber/form-fields 1.0.0

package/dist/fields/components/Contactselector.svelte

@@ -0,0 +1,348 @@
+<script>
+  import { onMount, onDestroy } from "svelte";
+  import _ from "lodash-es";
+  import * as utils from "../../utils/index.js";
+  import { deepEqual } from "fast-equals";
+  import { writable } from "svelte/store";
+  import { syncStoreToStore } from "../../utils/syncing";
+
+  export let form;
+  export let field;
+
+  const internal = writable();
+
+  let filter_text = "";
+  let is_focused = false;
+  let input;
+
+  let dependencies = form.dependencies;
+  let clienthub = dependencies?.clienthub;
+  let createWantToModal = dependencies?.createWantToModal;
+  let stubber = dependencies?.stubber;
+  let socket = clienthub?.socket;
+  let stubref = stubber?.stubref;
+  let orguuid = stubber?.orguuid;
+
+  let clickOutside = utils.clickOutside;
+
+  $: state_key = $field.state?.state_key;
+  $: label = $field.spec?.title;
+  $: hide_label = $field.spec?.hide_label;
+
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let initial_state_internal = {
+      selected_item: null,
+      raw_items: [],
+      focused_index: -1,
+    };
+    let initial_data = {
+      base: f?.data?.base,
+      base_label: f?.data?.base_label,
+    };
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        if (a?.data?.base) {
+          _.set(_clone, "selected_item._value", a?.data?.base);
+          _.set(_clone, "selected_item._label", a?.data?.base_label);
+        }
+        filter_text = a?.data?.base_label ?? "";
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+        }
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        // update the state
+        _.set(_clone, "state.internal", _.cloneDeep(b));
+        // update the data
+        _.set(_clone, "data.base", b?.selected_item?._value);
+        _.set(_clone, "data.base_label", b?.selected_item?._label ?? "");
+        return _clone;
+      }
+    );
+  });
+
+  $: items = _.isArray($internal?.raw_items)
+    ? $internal?.raw_items
+        .sort((a, b) => {
+          // show all is_personal items last
+          if (a.is_personal && !b.is_personal) return 1;
+          if (!a.is_personal && b.is_personal) return -1;
+          return 0;
+        })
+        .map((item) => {
+          let _label = item[$field.spec?.params?.label || $field.spec.label] ?? item._default_label;
+          let _value = item;
+          return { _label, _value };
+        })
+    : [];
+
+  let debounceLoad = utils.debounce(loadResults, 200);
+  $: debounceLoad(filter_text);
+  async function loadResults(ft) {
+    let comparison = _.cloneDeep($internal);
+
+    if (!clienthub) return;
+    let details = {
+      resource_name: "contacts",
+    };
+
+    details.params = structuredClone($field.spec.params) || {};
+    // add required/dynamic params (orguuid, stubref, input, and limit)
+    details.params.orguuid = orguuid;
+    details.params.stubref = stubref;
+    details.params.input = ft;
+    if (details.params.limit === undefined) {
+      details.params.limit = 50;
+    }
+
+    // emit join page event
+    socket.emit(
+      "request",
+      {
+        type: "resource",
+        details,
+      },
+      (res) => {
+        // TODO : handle failure
+        if (res.success) {
+          comparison.raw_items = res.payload?.contacts;
+
+          if (!deepEqual(comparison, $internal)) {
+            $internal = _.cloneDeep(comparison);
+          }
+        }
+      }
+    );
+  }
+
+  let teleportedNode = null;
+  onDestroy(() => {
+    if (teleportedNode) {
+      teleportedNode.remove();
+      teleportedNode = null;
+    }
+  });
+
+  // used to show the dropdown panel in the body instead of inside the component
+  // fixes an issue where the dropdown panel would be cut off by the parent container
+  function teleport(node) {
+    // Get the original position and width
+    let rect = node.getBoundingClientRect();
+    let originalWidth = node.offsetWidth;
+    let originalHeight = node.offsetHeight;
+
+    // Teleport to the body
+    let teleportContainer = document.body;
+    teleportContainer.appendChild(node);
+
+    teleportedNode = node;
+
+    // Apply the original width and position to the teleported element
+    node.style.width = originalWidth + "px";
+    node.style.height = originalHeight + "px";
+    node.style.position = "absolute";
+    node.style.top = rect.top + window.scrollY + "px";
+    node.style.left = rect.left + "px";
+
+    // set z-index to 1000
+    node.style.zIndex = 1000;
+  }
+
+  const setSelected = (item) => {
+    if (item?.is_personal) {
+      initImport(selectedItem);
+      return;
+    }
+    filter_text = item._label;
+    let comparison = _.cloneDeep($internal);
+    comparison.focused_index = -1;
+    comparison.selected_item = item;
+
+    if (!deepEqual(comparison, $internal)) {
+      $internal = _.cloneDeep(comparison);
+    }
+
+    is_focused = false;
+    input.blur();
+  };
+
+  function handleDeselect() {
+    let comparison = _.cloneDeep($internal);
+    comparison.selected_item = null;
+
+    if (!deepEqual(comparison, $internal)) {
+      $internal = _.cloneDeep(comparison);
+    }
+    filter_text = "";
+  }
+
+  let createNew = false;
+  const toggleCreateNew = () => {
+    createNew = !createNew;
+    if (createNew) {
+      createWantToModal("_create_new_contact", stubref, orguuid);
+    }
+  };
+
+  const handleCloseModal = async (contact) => {
+    let res = await loadResults(contact.descname);
+    if (res.success) {
+      let firstItem = items[0];
+      if (!firstItem?.is_personal) firstItem && setSelected(firstItem);
+      else {
+        loadResults(filter_text);
+        is_focused = true;
+      }
+    }
+  };
+
+  const initImport = (contact) => {
+    createWantToModal(
+      "_copy_personal_contact",
+      stubref,
+      orguuid,
+      { _personal_contact_copy: contact },
+      () => {
+        handleCloseModal(contact);
+        return true;
+      } // need to do it like this because cb must not be async
+    );
+  };
+</script>
+
+{#if $internal}
+  <div
+    use:clickOutside={() => {
+      if (is_focused) {
+        is_focused = false;
+        filter_text = $field?.data?.base_label ?? "";
+      }
+    }}
+    class="relative flex flex-col w-full text-surface-900"
+  >
+    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      {label}
+    </label>
+    <div class="relative flex mt-2 rounded-md">
+      <input
+        on:keydown={(e) => {
+          switch (e.key) {
+            case "Enter":
+              if ($internal.focused_index >= 0 && $internal.focused_index < items.length) {
+                setSelected(items[$internal.focused_index]);
+              }
+              e.preventDefault();
+              break;
+            case "ArrowDown":
+              $internal.focused_index = ($internal.focused_index + 1) % items.length;
+              e.preventDefault();
+              break;
+            case "ArrowUp":
+              $internal.focused_index = ($internal.focused_index - 1 + items.length) % items.length;
+              e.preventDefault();
+              break;
+          }
+        }}
+        on:focus={() => {
+          if (!is_focused) {
+            is_focused = true;
+            filter_text = "";
+          }
+        }}
+        bind:this={input}
+        type="select"
+        id="input_mask{state_key}"
+        placeholder={label}
+        class="block w-full rounded-md border-0 py-1.5 pl-3 pr-9 text-field text-surface-900 ring-1 ring-inset {!isValid
+          ? 'ring-danger-500'
+          : 'ring-surface-300 focus:ring-primary-400'} focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+        bind:value={filter_text}
+        autocomplete="off"
+      />
+      {#if !$internal.selected_item}
+        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <i class="text-surface-300 fa-regular fa-arrows-up-down fa-fw" />
+        </div>
+      {/if}
+      {#if $internal.selected_item}
+        <button
+          on:click={handleDeselect}
+          class="absolute inset-y-0 right-0 flex items-center pr-2 text-surface-300 hover:text-danger-500"
+        >
+          <i class="fa-regular fa-x fa-fw" />
+        </button>
+      {/if}
+    </div>
+    {#if is_focused}
+      <div use:teleport class="z-10 w-full absolute inset-y-[70px]">
+        {#if items?.length > 0}
+          <ul
+            class="block max-h-[200px] overflow-y-auto w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
+          >
+            {#each items as item, index (item?._value?._key)}
+              <li
+                class="group {$internal.focused_index === index
+                  ? 'bg-primary-400'
+                  : ''} hover:bg-primary-400 focus-within:bg-primary-400 text-field cursor-default"
+              >
+                <button
+                  on:click|preventDefault={() => setSelected(item)}
+                  class="selectitem text-surface-900 group-hover:text-white focus:text-white focus:outline-none px-4 py-1.5 w-full flex items-center"
+                >
+                  {item._label}
+                  {#if item.is_personal}
+                    <div class="mx-2 bg-surface-300 rounded-full text-xs p-0.5 px-2 text-white">
+                      Import from personal
+                    </div>
+                  {/if}
+                  {#if item?._value?._key == $internal?.selected_item?._value?._key}
+                    <i class="text-primary-400 ml-auto fa-regular fa-check" />
+                  {/if}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {:else}
+          <div
+            class="h-[100px] flex items-center justify-center w-full bg-white shadow-lg rounded-md ring-1 ring-surface-300"
+          >
+            <span class="text-paragraph text-surface-400">Start typing to search...</span>
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <div class="mt-0 ml-auto">
+      <button
+        on:click={toggleCreateNew}
+        type="button"
+        class="text-surface-500 text-sm hover:text-surface-700"
+      >
+        <i class="fa-regular fa-plus" />
+        Create new contact
+      </button>
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

package/dist/fields/components/Contactselector.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  ContactselectorProps */
+/** @typedef {typeof __propDef.events}  ContactselectorEvents */
+/** @typedef {typeof __propDef.slots}  ContactselectorSlots */
+export default class Contactselector extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type ContactselectorProps = typeof __propDef.props;
+export type ContactselectorEvents = typeof __propDef.events;
+export type ContactselectorSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Currency.svelte

@@ -0,0 +1,258 @@
+<script>
+  import { syncStoreToStore } from "../../utils/syncing";
+  import { deepEqual } from "fast-equals";
+  import _ from "lodash-es";
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+  import currency from "currency.js";
+  import getSymbolFromCurrency from "currency-symbol-map";
+  import * as utils from "../../utils/index.js";
+
+  export let field;
+
+  let { clickOutside, inputRegexMask } = utils;
+
+  const currencyRegex = /^([0-9]+(\.?[0-9]?[0-9]?)?)$/;
+  const currencyName = new Intl.DisplayNames("en-US", {
+    type: "currency",
+  });
+
+  const internal = writable();
+  let show_currency_list;
+
+  function toggleCurrencySelectorPopout() {
+    show_currency_list = !show_currency_list;
+  }
+
+  function handleFocusOut(e) {
+    let targetIsOption = e.relatedTarget?.classList?.contains("selectitem");
+    if (!targetIsOption) {
+      show_currency_list = false;
+    }
+  }
+
+  $: state_key = $field.state?.state_key;
+  $: label = $field.spec?.title;
+  $: hide_label = $field.spec?.hide_label;
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+  $: currencyFixed = $field.spec?.params?.currency;
+  $: currencyWhitelist = $field.spec?.params?.currency_whitelist ?? [];
+  $: currencyBlacklist = $field.spec?.params?.currency_blacklist ?? [];
+  $: currencyList =
+    currencyWhitelist.length > 0
+      ? currencyWhitelist.filter(Boolean).map((c) => {
+          let name;
+          try {
+            name = currencyName.of(c);
+          } catch (err) {
+            console.warn(err);
+          }
+          return {
+            value: c,
+            symbol: getSymbolFromCurrency(c),
+            name,
+          };
+        })
+      : Intl.supportedValuesOf("currency")
+          .filter((c) => {
+            return !currencyBlacklist.includes(c);
+          })
+          .map((c) => {
+            return {
+              value: c,
+              symbol: getSymbolFromCurrency(c),
+              name: currencyName.of(c),
+            };
+          });
+
+  function setSelectedCurrency(c) {
+    let _clone = _.cloneDeep($internal) || {};
+    _.set(_clone, "currencycode", c?.value);
+    _.set(_clone, "currencysymbol", c?.symbol);
+    $internal = _clone;
+    show_currency_list = false;
+  }
+
+  $: onRawChange($internal?.raw);
+  function onRawChange(val) {
+    if (!$internal) return;
+    let _clone = _.cloneDeep($internal) || {};
+    _clone.cents = currency(val).intValue;
+    _clone.amount = currency(val).value;
+    if (!deepEqual(_clone, $internal)) $internal = _clone;
+  }
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+    let data_currencycode =
+      f?.data?.base_details?.currencycode &&
+      currencyList.find((c) => c.value === f?.data?.base_details?.currencycode)
+        ? f?.data?.base_details?.currencycode
+        : null;
+    let fixed_currencycode = currencyList.find((c) => c.value === currencyFixed)
+      ? currencyFixed
+      : null;
+    let currencycode = data_currencycode || fixed_currencycode || currencyList?.[0]?.value || "USD";
+    let currencysymbol = getSymbolFromCurrency(currencycode);
+    let cents = currency(f?.data?.base).intValue;
+    let amount = currency(f?.data?.base).value;
+    let initial_value = amount?.toFixed(2).toString() ?? "0.00";
+    let initial_data = {
+      ...f?.data,
+      base: initial_value,
+    };
+    if (!f?.spec?.without_value_details) {
+      initial_data.base_details = {
+        currencycode,
+        currencysymbol,
+        cents,
+        amount,
+      };
+    }
+
+    let initial_state_internal = {
+      ...f?.state?.internal,
+      currencycode,
+      currencysymbol,
+      cents,
+      amount,
+      raw: initial_value,
+    };
+
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        _clone.raw = a?.data?.base;
+        if (!a?.spec?.without_value_details) {
+          _clone.cents = a?.data?.base_details?.cents;
+          _clone.amount = a?.data?.base_details?.amount;
+          _clone.currencycode = a?.data?.base_details?.currencycode;
+          _clone.currencysymbol = a?.data?.base_details?.currencysymbol;
+        }
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+        }
+
+        return _clone;
+      },
+      (a, b) => {
+        let _clone = _.cloneDeep(a) || {};
+        // update the state
+        _.set(_clone, "state.internal", _.cloneDeep(b));
+        // update the data
+        _.set(_clone, "data.base", b?.raw);
+        if (!a?.spec?.without_value_details) {
+          _.set(_clone, "data.base_details.amount", b?.amount);
+          _.set(_clone, "data.base_details.cents", b?.cents);
+          _.set(_clone, "data.base_details.currencycode", b?.currencycode);
+          _.set(_clone, "data.base_details.currencysymbol", b?.currencysymbol);
+        }
+        return _clone;
+      },
+      null,
+      300
+    );
+  });
+</script>
+
+{#if $internal}
+  <div
+    use:clickOutside={() => {
+      if (show_currency_list) {
+        show_currency_list = false;
+      }
+    }}
+    class="flex flex-col w-full text-surface-900"
+  >
+    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+      {label}
+    </label>
+    <div
+      class="flex relative mt-2 rounded-md border-0 ring-1 {!isValid
+        ? 'ring-danger-500'
+        : 'ring-surface-300 focus:ring-primary-400'} focus-within:ring-2"
+    >
+      <div class="pointer-events-none flex items-center pl-3">
+        <span class="text-label text-surface-600">
+          {getSymbolFromCurrency($internal?.currencycode)}
+        </span>
+      </div>
+      <input
+        on:keydown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+          }
+        }}
+        use:inputRegexMask={currencyRegex}
+        id="input_{state_key}"
+        placeholder={label}
+        class="block w-full rounded-md py-2 px-3 focus:outline-none text-surface-900 placeholder:text-surface-400"
+        name={state_key}
+        inputmode="decimal"
+        bind:value={$internal.raw}
+        on:focus={(e) => e.target.select()}
+      />
+      <!-- Here be selector stuff -->
+      {#if currencyList && !currencyFixed}
+        <button
+          type="button"
+          on:click={toggleCurrencySelectorPopout}
+          class="w-20 pl-3 space-x-2 flex items-center bg-white hover:bg-surface-50 focus:outline-none focus:bg-surface-100 rounded-r-md"
+        >
+          <span class="text-field text-surface-700">{$internal?.currencycode}</span>
+          <i
+            class="text-surface-700 fa fa-solid fa-xs fa-caret-{show_currency_list ? 'up' : 'down'}"
+          />
+        </button>
+      {/if}
+      {#if show_currency_list && currencyList}
+        <div class="z-10 absolute inset-y-[42px] right-0">
+          <ul
+            class="items block max-h-[250px] overflow-y-auto w-[250px] md:w-[450px] bg-white shadow-lg ring-1 ring-surface-300"
+          >
+            {#each currencyList as item}
+              <!-- {#if currencyWhitelist.contains(item.value) && !currencyBlacklist.contains(item.value)} -->
+              <li
+                class="{item.value == $internal?.currencycode
+                  ? 'selecteditem'
+                  : ''} group hover:bg-surface-100 focus-within:bg-surface-100 text-field cursor-default"
+              >
+                <button
+                  on:click|preventDefault={() => setSelectedCurrency(item)}
+                  on:focusout={(e) => handleFocusOut(e)}
+                  class="px-4 py-1 w-full flex items-center space-x-3 selectitem focus:outline-none"
+                >
+                  <span class="text-surface-900 text-field">{item.value}</span>
+                  <span class="text-surface-700 text-field">{item.symbol}</span>
+                  <span class="text-surface-500 text-field">{item.name}</span>
+                  {#if item.value == $internal?.currencycode}
+                    <i class="text-primary-400 ml-auto fa-regular fa-check" />
+                  {/if}
+                </button>
+              </li>
+              <!-- {/if} -->
+            {/each}
+          </ul>
+        </div>
+      {/if}
+      <!-- Here end selector stuff -->
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

package/dist/fields/components/Currency.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  CurrencyProps */
+/** @typedef {typeof __propDef.events}  CurrencyEvents */
+/** @typedef {typeof __propDef.slots}  CurrencySlots */
+export default class Currency extends SvelteComponentTyped<{
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type CurrencyProps = typeof __propDef.props;
+export type CurrencyEvents = typeof __propDef.events;
+export type CurrencySlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Dataindication.svelte

@@ -0,0 +1,35 @@
+<script>
+  import _ from "lodash-es";
+
+  export let field;
+
+  $: state_key = $field.state?.state_key;
+  $: label = $field.spec?.title;
+  $: hide_label = $field.spec?.hide_label;
+  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
+  $: validationMessage = $field.state?.validation?.message;
+  $: value_is_string = _.isString($field.data?.base);
+  $: value = !value_is_string ? JSON.stringify($field.data?.base, null, 2) : $field.data?.base;
+</script>
+
+<div class="flex flex-col w-full text-surface-900">
+  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    {label}
+  </label>
+  <div class="relative mt-2 rounded-md">
+    <div
+      class="block bg-surface-50 w-full text-field rounded-md border-0 py-2 pl-3 text-surface-900 ring-1 ring-inset ring-surface-100 focus:ring-primary-400 focus:outline-none placeholder:text-surface-400 focus:ring-2 focus:ring-inset"
+    >
+      {#if value_is_string}
+        {value}
+      {:else}
+        <pre>{value}</pre>
+      {/if}
+    </div>
+  </div>
+  {#if validationMessage}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+</div>