@stubber/form-fields 1.7.10 → 2.0.0

package/dist/fields/components/Currency.svelte

@@ -1,264 +0,0 @@
-<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";
-
-  import { Button } from "@stubber/ui/button";
-  import { Label } from "@stubber/ui/label";
-
-  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 py-2{hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div
-      class="w-full flex items-center gap-2 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-within:ring-ring h-10 rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {!isValid
-        ? 'focus-within:ring-danger-500'
-        : 'ring-surface-300'}"
-      style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-    >
-      <div class="pointer-events-none flex items-center pl-2">
-        <span class="text-sm text-surface-600">
-          {getSymbolFromCurrency($internal?.currencycode)}
-        </span>
-      </div>
-      <input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        class="w-full focus-within:outline-none"
-        use:inputRegexMask={currencyRegex}
-        id="input_{state_key}"
-        placeholder={label}
-        name={state_key}
-        inputmode="decimal"
-        bind:value={$internal.raw}
-        on:focus={(e) => e.target.select()}
-      />
-      <!-- Here be selector stuff -->
-      {#if currencyList && !currencyFixed}
-        <Button
-          variant="ghost"
-          type="button"
-          on:click={toggleCurrencySelectorPopout}
-          class="w-20 pl-3 space-x-2 flex items-center"
-        >
-          <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-popover text-popover-foreground relative z-50 min-w-[8rem] overflow-hidden rounded border shadow-md outline-none p-1"
-          >
-            {#each currencyList as item}
-              <!-- {#if currencyWhitelist.contains(item.value) && !currencyBlacklist.contains(item.value)} -->
-              <li
-                class="{item.value == $internal?.currencycode
-                  ? 'selecteditem'
-                  : ''} group relative flex w-full cursor-default select-none items-center rounded-sm py-1 pl-8 pr-2 text-sm outline-none
-                      hover:bg-accent hover:text-accent-foreground"
-              >
-                <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                  {#if item.value == $internal?.currencycode}
-                    <i class="fa-regular fa-check h-4 w-4" />
-                  {/if}
-                </span>
-                <button
-                  on:click|preventDefault={() => setSelectedCurrency(item)}
-                  on:focusout={(e) => handleFocusOut(e)}
-                  class=" 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>
-                </button>
-              </li>
-              <!-- {/if} -->
-            {/each}
-          </ul>
-        </div>
-      {/if}
-      <!-- Here end selector stuff -->
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  CurrencyProps */
-/** @typedef {typeof __propDef.events}  CurrencyEvents */
-/** @typedef {typeof __propDef.slots}  CurrencySlots */
-export default class Currency extends SvelteComponent<{
-    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 { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Dataindication.svelte

@@ -1,31 +0,0 @@
-<script>
-  import _ from "lodash-es";
-
-  import { Label } from "@stubber/ui/label";
-  import { Input } from "@stubber/ui/input";
-
-  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 my-2">
-  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  <div class="relative mt-2 rounded-md bg-surface-100 p-2">
-    <pre class="rounded-md">{value}</pre>
-  </div>
-
-  {#if validationMessage}
-    <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
-      {validationMessage}
-    </Label>
-  {/if}
-</div>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  DataindicationProps */
-/** @typedef {typeof __propDef.events}  DataindicationEvents */
-/** @typedef {typeof __propDef.slots}  DataindicationSlots */
-export default class Dataindication extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DataindicationProps = typeof __propDef.props;
-export type DataindicationEvents = typeof __propDef.events;
-export type DataindicationSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Date.svelte

@@ -1,97 +0,0 @@
-<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 { Label } from "@stubber/ui/label";
-
-  export let field;
-
-  const internal = writable();
-
-  $: 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_value = f?.data?.base ?? "";
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = _.merge(
-      {
-        raw: initial_value,
-      },
-      f?.state?.internal
-    );
-    _.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;
-
-        // 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);
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative mt-2 rounded-md">
-      <input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        type="date"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring 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
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
-         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
-        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  DateProps */
-/** @typedef {typeof __propDef.events}  DateEvents */
-/** @typedef {typeof __propDef.slots}  DateSlots */
-export default class Date extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DateProps = typeof __propDef.props;
-export type DateEvents = typeof __propDef.events;
-export type DateSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};

package/dist/fields/components/Datetime.svelte

@@ -1,97 +0,0 @@
-<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 { Label } from "@stubber/ui/label";
-
-  export let field;
-
-  const internal = writable();
-
-  $: 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_value = f?.data?.base ?? "";
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    let initial_state_internal = _.merge(
-      {
-        raw: initial_value,
-      },
-      f?.state?.internal
-    );
-    _.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;
-
-        // 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);
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <Label for="input_{state_key}" class="block  {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div class="relative mt-2 rounded-md">
-      <input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        type="datetime-local"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full border-input bg-white bg-opacity-[15] ring-0 ring-offset-background focus-visible:ring-ring 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
-         {!isValid ? 'ring-danger-500' : 'ring-surface-300'}
-         {$internal?.raw ? 'text-surface-900' : 'text-muted-foreground'}"
-        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>
-        {validationMessage}
-      </Label>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  DatetimeProps */
-/** @typedef {typeof __propDef.events}  DatetimeEvents */
-/** @typedef {typeof __propDef.slots}  DatetimeSlots */
-export default class Datetime extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type DatetimeProps = typeof __propDef.props;
-export type DatetimeEvents = typeof __propDef.events;
-export type DatetimeSlots = typeof __propDef.slots;
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: undefined;
-    bindings?: undefined;
-};
-export {};