@stubber/form-fields 1.7.10 → 2.0.0

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

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

package/dist/fields/components/Slider.svelte

@@ -1,101 +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";
-
-  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;
-  $: min = $field.spec?.params?.min ?? 0;
-  $: max = $field.spec?.params?.max ?? 100;
-  $: step = $field.spec?.params?.step ?? 1;
-
-  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 = {
-      ...f?.state?.internal,
-      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;
-
-        // 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">
-    <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
-      {label}
-    </label>
-    <div class="relative">
-      <div class="flex justify-between items-end text-sm text-surface-300">
-        <div>{min}</div>
-        <div class="text-md text-surface-700">{$internal.raw}</div>
-        <div>{max}</div>
-      </div>
-      <input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        {min}
-        {max}
-        {step}
-        type="range"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full text-field rounded-md border-0 mb-2 focus:outline-none"
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </p>
-    {/if}
-  </div>
-{/if}

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  SliderProps */
-/** @typedef {typeof __propDef.events}  SliderEvents */
-/** @typedef {typeof __propDef.slots}  SliderSlots */
-export default class Slider extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SliderProps = typeof __propDef.props;
-export type SliderEvents = typeof __propDef.events;
-export type SliderSlots = 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/SmartText.svelte

@@ -1,351 +0,0 @@
-<script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import {
-    acceptCompletion,
-    autocompletion,
-    completionKeymap,
-    startCompletion,
-  } from "@codemirror/autocomplete";
-  import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-  import { EditorState, StateField } from "@codemirror/state";
-  import {
-    Decoration,
-    EditorView,
-    MatchDecorator,
-    ViewPlugin,
-    keymap,
-    placeholder,
-  } from "@codemirror/view";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onDestroy, 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;
-  $: parse_string = $field.spec?.params?.parse_string;
-  $: auto_completions = $field.spec?.params?.auto_completions || [];
-  $: code_language = $field.spec?.params?.code_language;
-
-  let store_sync_sub;
-
-  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 = {
-      ...f?.state?.internal,
-      raw: initial_value,
-    };
-    _.set(f, "data", initial_data);
-    _.set(f, "state.internal", initial_state_internal);
-    if (!deepEqual(f, $field)) $field = f;
-
-    store_sync_sub = 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;
-
-          // update the editor content if it's different
-          if (editor_view?.state.doc.toString() !== _clone.raw) {
-            editor_view?.dispatch({
-              changes: {
-                from: 0,
-                to: editor_view.state.doc.length,
-                insert: _clone.raw,
-              },
-            });
-          }
-        }
-
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        // update the state
-        _.set(_clone, "state.internal", _.cloneDeep(b));
-        // update the data
-        const final_value = parse_string ? parse_string_value(b?.raw) : b?.raw;
-        _.set(_clone, "data.base", final_value);
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-
-  onDestroy(() => {
-    store_sync_sub?.destroy();
-  });
-
-  function parse_string_value(value) {
-    if (value === "true") return true;
-    if (value === "false") return false;
-
-    // convert to number if possible
-    if (!isNaN(value) && value !== "") {
-      return Number(value);
-    }
-
-    return value;
-  }
-
-  // --------------------------------- CodeMirror Setup ---------------------------------
-  function myCompletions(context) {
-    /*
-      "auto_completions": [
-        {
-          "match_before": "\{",
-          "options": [
-            {
-              "label": "{{customer_name}}"
-            },
-            {
-              "label": "{{stub.data.payment_amount}}"
-            },
-            {
-              "label": "{{stub.subject}}"
-            },
-            {
-              "label": "{{#sugartime 'now'}}{{/sugartime}}"
-            },
-            {
-              "label": "{{#currency stub.data.cost}}{{/currency}}",
-              "apply": "{{#currency "
-            }
-          ],
-        }
-      ],
-    */
-
-    // go through the completions and find the first one that matches the before
-    // i.e. if match_before is \{, it means the completion should be shown when the user types {
-    for (let completion of auto_completions) {
-      if (!completion.match_before) continue;
-
-      let before = context.matchBefore(new RegExp(completion.match_before));
-      if (!before) continue;
-      return {
-        from: before.from,
-        options: completion.options,
-        validFor: /^.*$/,
-      };
-    }
-
-    // use lodash to find the first auto_completion that has explicit set to true
-    let explicit_completions = _.find(auto_completions, { explicit: true });
-    // if the panel was explicitly opened, show the explicit completions
-    if (explicit_completions && context.explicit) {
-      return {
-        from: context.pos,
-        options: explicit_completions.options,
-        validFor: /^.*$/,
-      };
-    }
-
-    return null;
-  }
-
-  // right now, this is the only supported decoration by setting the code_language to 'handlebars'
-  // in future, we could do away with this and use an actual language package for handlebars and our custom syntax
-  function fake_handlebars_lang() {
-    // Define a decorator for {{...}} and ~~ pattern
-    const curly_decorator = new MatchDecorator({
-      regexp: /(\{\{[^}]*\}\})|(~~[^\s]*)/g,
-      decoration: Decoration.mark({ class: "curly-braces-highlight" }),
-    });
-
-    // Create the extension to add decorations
-    return ViewPlugin.fromClass(
-      class {
-        curlies;
-        blocks;
-        constructor(view) {
-          this.curlies = curly_decorator.createDeco(view);
-        }
-        update(update) {
-          this.curlies = curly_decorator.updateDeco(update, this.curlies);
-        }
-      },
-      {
-        decorations: (instance) => instance.curlies,
-      }
-    );
-  }
-
-  // Define a state field to sync the doc with the internal svelte store
-  const contentField = StateField.define({
-    create() {
-      return "";
-    },
-    update(value, transaction) {
-      if (transaction.docChanged) {
-        $internal.raw = transaction.newDoc.toString();
-        return transaction.newDoc.toString();
-      }
-      return value;
-    },
-  });
-
-  let editor_parent;
-  /**
-   * @type {EditorView}
-   */
-  let editor_view;
-
-  $: is_string = typeof $internal?.raw === "string";
-
-  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,
-      },
-    ]);
-
-  $: {
-    // check if internal.raw is not a string
-    if (is_string) {
-      if (editor_parent && !editor_view) {
-        const extensions = [
-          history({ newGroupDelay: 150 }),
-          EditorView.lineWrapping,
-          contentField,
-          autocompletion({ override: [myCompletions], defaultKeymap: false }),
-          placeholder(label),
-          EditorView.contentAttributes.of({
-            spellcheck: "true",
-          }),
-          keymap.of([...defaultKeymap, ...historyKeymap, ...custom_completion_keymap]),
-        ];
-
-        if (code_language === "handlebars") {
-          // see https://codemirror.net/try/?example=Markdown%20code%20block%20highlighting for a better future implementation
-          // we'd need a proper implementation of handlebars as a language package though
-          extensions.push(fake_handlebars_lang());
-        }
-
-        editor_view = new EditorView({
-          state: EditorState.create({
-            doc: $internal.raw,
-            extensions,
-          }),
-          parent: editor_parent,
-        });
-      }
-    }
-  }
-  // --------------------------------- CodeMirror Setup ---------------------------------
-</script>
-
-{#if $internal && is_string}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <div
-      bind:this={editor_parent}
-      class=" stubber-cm text-sm {isValid ? 'stubber-valid' : 'stubber-invalid'}"
-    />
-    {#if validationMessage}
-      <Label class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </Label>
-    {/if}
-  </div>
-{:else}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-      {label}
-    </Label>
-    <p class="text-surface-400">The value of this field is not a string.</p>
-  </div>
-{/if}
-
-<style>
-  .stubber-cm :global(.cm-editor) {
-    /* Base styles */
-    background-color: rgba(255, 255, 255, 0.85);
-    border-radius: 0.375rem;
-    --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);
-
-    /* Top inset shadow only */
-    box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);
-  }
-
-  .stubber-cm :global(.cm-editor.cm-focused) {
-    outline: none;
-    border-width: 1px;
-    border-color: hsl(var(--input) / var(--tw-border-opacity, 1));
-  }
-
-  .stubber-cm.stubber-valid :global(.cm-editor.cm-focused) {
-    border-color: rgb(170, 170, 170, 0.5);
-  }
-
-  .stubber-cm.stubber-invalid :global(.cm-editor) {
-    border-color: rgb(225 45 57);
-  }
-
-  .stubber-cm :global(.cm-editor .cm-scroller) {
-    font-family: inherit;
-    line-height: inherit;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-content) {
-    padding: 0;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-line) {
-    padding: 0;
-    padding-left: 0.75rem;
-  }
-
-  .stubber-cm :global(.cm-editor .cm-placeholder) {
-    color: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
-  }
-
-  .stubber-cm :global(.curly-braces-highlight) {
-    color: rgb(9 103 210);
-  }
-</style>

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

@@ -1,25 +0,0 @@
-/** @typedef {typeof __propDef.props}  SmartTextProps */
-/** @typedef {typeof __propDef.events}  SmartTextEvents */
-/** @typedef {typeof __propDef.slots}  SmartTextSlots */
-export default class SmartText extends SvelteComponent<{
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SmartTextProps = typeof __propDef.props;
-export type SmartTextEvents = typeof __propDef.events;
-export type SmartTextSlots = 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/Telephone.svelte

@@ -1,156 +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 intlTelInput from "intl-tel-input";
-  import "intl-tel-input/build/css/intlTelInput.css";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let field;
-
-  const internal = writable();
-  let input;
-  let iti;
-
-  $: 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;
-
-  function handleCountryChange() {
-    $internal.selected_country = iti.getSelectedCountryData();
-  }
-
-  $: onRawChange($internal?.raw);
-  function onRawChange(r) {
-    // update fieldStateStore.data.is_valid_number
-    if (!iti) return;
-    let _clone = _.cloneDeep($internal) || {};
-    _.set(_clone, "formatted", iti.getNumber());
-    _.set(_clone, "is_valid_number", iti.isValidNumber());
-    $internal = _clone;
-  }
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let formatted = f?.data?.base ?? "";
-    let raw = formatted;
-    let is_valid_number = false;
-    let selected_country = {};
-    let initial_data = {
-      ...f?.data,
-      base: formatted,
-    };
-    if (!f?.spec?.without_value_details) {
-      initial_data.base_details = {
-        is_valid_number,
-        selected_country,
-      };
-    }
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      raw,
-      formatted,
-      is_valid_number,
-      selected_country,
-    };
-    _.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;
-        _clone.formatted = a?.data?.base;
-        if (!a?.spec?.without_value_details) {
-          _clone.selected_country = a?.data?.base_details?.selected_country;
-          _clone.is_valid_number = a?.data?.base_details?.is_valid_number;
-        }
-
-        // 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?.formatted);
-        if (!a?.spec?.without_value_details) {
-          _.set(_clone, "data.base_details.is_valid_number", b?.is_valid_number);
-          _.set(_clone, "data.base_details.selected_country", b?.selected_country);
-        }
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-
-  $: if (input) setupInput(); // setup the input as soon as it's available
-  function setupInput() {
-    iti = intlTelInput(input, {
-      initialCountry: "auto",
-      geoIpLookup: (callback) => {
-        fetch("https://ipapi.co/json")
-          .then((res) => res.json())
-          .then((data) => callback(data.country_code))
-          .catch(() => callback("us"));
-      },
-      utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js",
-    });
-
-    //override width bc base style is not responsive
-    let itis = document.querySelectorAll(".iti");
-    itis.forEach((iti) => {
-      iti.style["width"] = "100%";
-    });
-
-    // listen for countrychange
-    input.addEventListener("countrychange", handleCountryChange);
-
-    // set initial country
-    handleCountryChange();
-  }
-</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="w-full bg-surface-100 flex space-x-4 focus:outline-primary-400 relative mt-2 rounded-md"
-    >
-      <input
-        bind:this={input}
-        bind:value={$internal.raw}
-        type="tel"
-        id="input_{state_key}"
-        class="w-full pl-12 border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring h-10 rounded-md border 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'}"
-        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-      />
-    </div>
-    {#if validationMessage}
-      <div class="mt-1">
-        <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-      </div>
-    {/if}
-  </div>
-{/if}