@stubber/form-fields 1.0.0

package/dist/fields/components/Selectresource.svelte

@@ -0,0 +1,291 @@
+<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 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;
+  $: resource_name = $field.spec?.params?.resource_name;
+
+  $: 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.map((item) => {
+        let _label = item[$field.spec?.params?.label || $field.spec.label] ?? item._default_label;
+        let _value = item;
+        return { _label, _value };
+      })
+    : [];
+
+  // $: console.log("items updated", items);
+
+  let debounceLoad = utils.debounce(loadResults, 200);
+  $: debounceLoad(filter_text);
+  async function loadResults(ft) {
+    let comparison = _.cloneDeep($internal);
+    if (!clienthub) return;
+    let details = {
+      resource_name,
+    };
+
+    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) {
+          // console.log("selectresource success", res);
+          comparison.raw_items = res.payload[resource_name];
+
+          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) => {
+    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 = "";
+  }
+</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?._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}
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SelectresourceProps */
+/** @typedef {typeof __propDef.events}  SelectresourceEvents */
+/** @typedef {typeof __propDef.slots}  SelectresourceSlots */
+export default class Selectresource extends SvelteComponentTyped<{
+    form: any;
+    field: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type SelectresourceProps = typeof __propDef.props;
+export type SelectresourceEvents = typeof __propDef.events;
+export type SelectresourceSlots = 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/Signature.svelte

@@ -0,0 +1,153 @@
+<script>
+  import SignaturePad from "signature_pad";
+  import _ from "lodash-es";
+  import { onMount } from "svelte";
+  import { deepEqual } from "fast-equals";
+  import { writable } from "svelte/store";
+  import { syncStoreToStore } from "../../utils/syncing";
+
+  export let form;
+  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;
+
+  let canvasContainer;
+  let pad;
+  let signaturePad;
+
+  onMount(() => {
+    // set field values that aren't set yet
+    let f = _.cloneDeep($field);
+
+    let initial_value = f?.data?.base ?? {
+      data: [],
+      file: undefined,
+    };
+    let initial_data = {
+      ...f?.data,
+      base: initial_value,
+    };
+    let initial_state_internal = {
+      value: initial_value,
+    };
+
+    _.set(f, "data", initial_data);
+    _.set(f, "state.internal", initial_state_internal);
+    if (!deepEqual(f, $field)) $field = f;
+
+    //init signature pad
+    signaturePad = new SignaturePad(pad);
+    signaturePad.addEventListener("endStroke", handleStroke);
+    setTimeout(() => {
+      let d = _.isArray($field.data?.base) ? $field.data?.base : [];
+      signaturePad.fromData(d);
+    }, 0);
+
+    syncStoreToStore(
+      field,
+      internal,
+      (a, b) => {
+        let _clone = _.cloneDeep(a.state?.internal) || {};
+
+        // get parts from data
+        _clone.value = a?.data?.base;
+        _clone.file = a?.data?.base?.file;
+
+        // set field state if changed
+        if (!deepEqual(a?.state?.internal, _clone)) {
+          $field.state.internal = _clone;
+          //update signature pad
+          let d = _.isArray(_clone.value) ? _clone.value : [];
+          signaturePad.fromData(d);
+        }
+        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?.value);
+        return _clone;
+      }
+    );
+  });
+
+  async function uploadFile() {
+    const fileURI = signaturePad.toDataURL();
+    const fileBlob = await (await fetch(fileURI)).blob();
+    const filesForm = new FormData();
+    filesForm.append(label, fileBlob);
+    let upload_res = await form.uploadFiles(null, filesForm);
+    let { uploaded_files } = upload_res;
+    if (uploaded_files?.length) {
+      $internal.value.file = uploaded_files[0];
+      uploaded_files.forEach((a) => {
+        form.appendAttachment(a);
+      });
+    } else {
+      console.warn("Failed to upload file");
+    }
+
+    return true;
+  }
+
+  function clear() {
+    signaturePad.clear();
+    $field.data.base = {
+      data: null,
+    };
+  }
+
+  function handleStroke() {
+    const data = signaturePad.toData();
+    let comparison = _.cloneDeep($internal);
+    comparison.value.data = _.cloneDeep(data);
+    comparison.upload = true;
+
+    if (!deepEqual(comparison, $internal)) {
+      $internal = comparison;
+      uploadFile();
+    }
+  }
+
+  $: canvasWidth = canvasContainer?.clientWidth;
+</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 bind:this={canvasContainer}>
+      <canvas
+        bind:this={pad}
+        id="signature-pad"
+        class="signature-pad mt-2 rounded-md border"
+        width={canvasWidth}
+        height={200}
+      />
+      <div class="mt-0 text-sm">
+        <button
+          on:click={clear}
+          type="button"
+          class="text-surface-500 text-sm hover:text-surface-700"
+        >
+          Clear
+        </button>
+      </div>
+    </div>
+    {#if validationMessage}
+      <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+        {validationMessage}
+      </p>
+    {/if}
+  </div>
+{/if}

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  SignatureProps */
+/** @typedef {typeof __propDef.events}  SignatureEvents */
+/** @typedef {typeof __propDef.slots}  SignatureSlots */
+export default class Signature extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Slider.svelte

@@ -0,0 +1,101 @@
+<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

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  SliderProps */
+/** @typedef {typeof __propDef.events}  SliderEvents */
+/** @typedef {typeof __propDef.slots}  SliderSlots */
+export default class Slider extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};