@stubber/form-fields 1.7.10 → 2.0.0

package/dist/fields/components/Scrollandreaddisplay.svelte

@@ -1,122 +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";
-  import { Checkbox } from "@stubber/ui/checkbox";
-
-  export let field;
-
-  const internal = writable();
-  let outer;
-
-  $: 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;
-  $: displaytext = $field.spec?.params?.displaytext || "";
-  $: checkedvalue =
-    $field.spec?.params?.checkedvalue !== undefined ? $field.spec?.params?.checkedvalue : true;
-  $: uncheckedvalue =
-    $field.spec?.params?.uncheckedvalue !== undefined ? $field.spec?.params?.uncheckedvalue : false;
-
-  function handleScroll() {
-    let scroll_percentage = Math.ceil(
-      (outer?.scrollTop * 100) / (outer?.scrollHeight - outer.clientHeight)
-    );
-    if (outer?.scrollHeight - outer.clientHeight === 0) scroll_percentage = 100;
-    if (!$internal.scrolled_to_bottom) $internal.scrolled_to_bottom = scroll_percentage >= 99;
-  }
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let checked = deepEqual(f?.data?.base, checkedvalue);
-    let initial_data = {
-      ...f?.data,
-      base: checked ? checkedvalue : uncheckedvalue,
-    };
-    if (!f?.spec?.without_value_details) initial_data.base_label = label;
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      checked,
-      scrolled_to_bottom: checked,
-    };
-    _.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.checked = deepEqual(a?.data?.base, checkedvalue);
-        if (_clone.checked) _clone.scrolled_to_bottom = true;
-
-        // 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?.checked ? checkedvalue : uncheckedvalue);
-        return _clone;
-      }
-    );
-  });
-
-  $: if (outer) handleScroll();
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900 my-2">
-    <!-- div with inner shadow -->
-    <div
-      bind:this={outer}
-      class="border max-h-[300px] overflow-y-scroll shadow-inner rounded-md"
-      on:scroll={handleScroll}
-    >
-      <div class="p-6 px-2">
-        {@html displaytext}
-      </div>
-    </div>
-    <div
-      class="{!$internal.scrolled_to_bottom
-        ? 'opacity-20'
-        : ''} flex space-x-3 relative mt-2 items-center {!isValid
-        ? 'border-b border-warning-500'
-        : ''}"
-    >
-      <Checkbox
-        disabled={!$internal.scrolled_to_bottom}
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        id="input_{state_key}"
-        name={state_key}
-        bind:checked={$internal.checked}
-      />
-      <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-        {label}
-      </Label>
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

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

@@ -1,87 +0,0 @@
-<script>
-  import * as Accordion from "@stubber/ui/accordion";
-  import { Label } from "@stubber/ui/label";
-  import Field from "../../Field.svelte";
-  import * as utils from "../../utils/index.js";
-
-  export let form;
-  export let field;
-
-  let collapsed = $field.spec?.params?.collapsed ?? 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;
-  $: collapsible = $field.spec?.params?.collapsible ?? false;
-  $: fields = utils.getFieldsToRender($field.spec?.fields);
-
-  $: allChildrenConditionsChecked = Object.values($form?.state || {})
-    ?.filter((s) => s && s.parent_field_state_key === state_key)
-    ?.reduce((acc, child_state) => {
-      if (!child_state?.conditions_checked) acc = false;
-      return acc;
-    }, true);
-
-  $: section_class = $field.spec?.params?.section_class ?? "pl-4";
-  $: label_class = $field.spec?.params?.label_class ?? "font-regular text-sm";
-
-  // Hook the Accordion's value up to collapse logic
-  let accordionValue = collapsed ? "" : "item-1";
-
-  function handleValueChange(value) {
-    // console.log("Accordion value changed to:", value);
-    collapsed = value !== "item-1";
-  }
-
-  // Debug: Track changes in your reactive variables.
-  // $: console.log("allChildrenConditionsChecked =>", allChildrenConditionsChecked);
-  // $: console.log("collapsed =>", collapsed);
-  // $: console.log("accordionValue =>", accordionValue);
-</script>
-
-<div class="fade-container {!allChildrenConditionsChecked ? 'fade-hidden' : ''}">
-  <Accordion.Root
-    bind:value={accordionValue}
-    on:valueChange={handleValueChange}
-    type="single"
-    {collapsible}
-    class="flex flex-col w-full text-surface-900"
-  >
-    <Accordion.Item value="item-1">
-      <Accordion.Trigger class="flex items-center justify-between py-1">
-        <Label for="input_{state_key}" class="block {label_class} {hide_label ? 'hidden' : ''}">
-          {label}
-        </Label>
-      </Accordion.Trigger>
-      <Accordion.Content class="{section_class} -pl-4 pt-2">
-        {#if fields}
-          {#each fields as initial_field_spec (initial_field_spec.__key)}
-            <Field {form} {initial_field_spec} parent_field={field} />
-          {/each}
-        {/if}
-
-        {#if validationMessage}
-          <Label class={!isValid ? `text-danger-500` : `text-success-500`}
-            >{validationMessage}</Label
-          >
-        {/if}
-      </Accordion.Content>
-    </Accordion.Item>
-  </Accordion.Root>
-</div>
-
-<style>
-  /* 
-    1. .fade-container: By default visible, but transitions changes in opacity.
-    2. .fade-hidden: Sets opacity to 0, so it fades out over 0.3s.
-  */
-  .fade-container {
-    transition: opacity 0.5s ease-in-out;
-    opacity: 1; /* fully visible by default */
-  }
-  .fade-hidden {
-    opacity: 0; /* hidden via fade */
-  }
-</style>

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  SectionProps */
-/** @typedef {typeof __propDef.events}  SectionEvents */
-/** @typedef {typeof __propDef.slots}  SectionSlots */
-export default class Section extends SvelteComponent<{
-    form: any;
-    field: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type SectionProps = typeof __propDef.props;
-export type SectionEvents = typeof __propDef.events;
-export type SectionSlots = 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/Select.svelte

@@ -1,161 +0,0 @@
-<script>
-  import { onMount, tick } from "svelte";
-  import { createState } from "cmdk-sv";
-  import { Label } from "@stubber/ui/label";
-  import * as Command from "@stubber/ui/command";
-  import * as Popover from "@stubber/ui/popover";
-  import { Button } from "@stubber/ui/button";
-  import { debounce, isArray, isEqual } from "lodash-es";
-
-  export let field;
-
-  // instead of contactselector and resourceselector being separate components,
-  // form fields should expose this through form.dependencies so people can dynamically load things as they whish.
-  // for now though, contactselector and resourceselector just tie into this function
-  export let load_options;
-
-  $: 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 items = [];
-
-  $: {
-    if (isArray($field.spec?.params?.options)) {
-      items = $field.spec?.params?.options?.map((o, index) => {
-        let { label, value } = o || {};
-        let _value = value !== undefined ? value : label;
-        let _label = label ?? value;
-        let _key = `${state_key}${label}${index}`;
-        return { _key, _label, _value };
-      });
-    }
-  }
-
-  onMount(() => {
-    if ($field.data.base && !$field.spec?.without_value_details) {
-      // If the field has a base value, we need to find the corresponding label
-      const item = items.find((i) => isEqual(i._value, $field.data.base));
-      if (item) {
-        $field.data.base_label = item._label;
-      }
-    }
-  });
-
-  function simpleSetSelected(item_key) {
-    const item = items.find((i) => i._key === item_key);
-    if (!item) {
-      return;
-    }
-
-    field.update((f) => {
-      f.data.base = item?._value;
-      if (!f.spec?.without_value_details) {
-        f.data.base_label = item?._label;
-      }
-      return f;
-    });
-  }
-
-  let open = false;
-  let loading = false;
-
-  $: dropdownLabel =
-    items.find((i) => isEqual(i._value, $field.data.base))?._label ??
-    $field.data?.base_label ??
-    "Select...";
-  // We want to refocus the trigger button when the user selects
-  // an item from the list so users can continue navigating the
-  // rest of the form with the keyboard.
-  function closeAndFocusTrigger(triggerId) {
-    open = false;
-    tick().then(() => {
-      document.getElementById(triggerId)?.focus();
-    });
-  }
-
-  const state = createState();
-
-  let last_search = undefined;
-  const handle_search = async (search) => {
-    if (search === last_search) return;
-    last_search = search;
-
-    if (load_options) {
-      loading = true;
-      const remote_results = await load_options($state.search);
-      loading = false;
-
-      items = remote_results.map((o, index) => {
-        let { label, value } = o || {};
-        let _value = value !== undefined ? value : label;
-        let _label = label ?? value;
-        let _key = `${state_key}${label}${index}`;
-        return { _key, _label, _value };
-      });
-    }
-  };
-
-  let debounced_handle_search = null;
-  if (load_options) {
-    debounced_handle_search = debounce(handle_search, 300);
-  }
-
-  $: if (load_options && $state.search !== undefined) {
-    debounced_handle_search($state.search);
-  }
-</script>
-
-<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>
-  <Popover.Root bind:open let:ids>
-    <Popover.Trigger asChild let:builder>
-      <Button
-        builders={[builder]}
-        variant="outline"
-        role="combobox"
-        aria-expanded={open}
-        class="w-full border-input bg-white bg-opacity-[15] ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex 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 justify-between"
-        style="box-shadow: inset 0px 16px 16px -16px rgba(0, 0, 0, 0.1333);"
-      >
-        {dropdownLabel}
-        <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </Popover.Trigger>
-    <Popover.Content sameWidth class="p-0 z-[100]">
-      <Command.Root shouldFilter={!load_options} {state}>
-        <Command.Input class="border-none outline-none focus:ring-0" placeholder="Search..." />
-        <Command.List>
-          {#if loading}
-            <Command.Loading class="py-6 text-sm text-center">Loading…</Command.Loading>
-          {:else}
-            <Command.Empty>No results found.</Command.Empty>
-
-            {#each items as item}
-              <Command.Item
-                value={item._key}
-                onSelect={(item_key) => {
-                  simpleSetSelected(item_key);
-                  closeAndFocusTrigger(ids.trigger);
-                }}
-                class={$field.data.base === item._value ? "bg-primary-100" : ""}
-              >
-                {item._label}
-              </Command.Item>
-            {/each}
-          {/if}
-        </Command.List>
-      </Command.Root>
-    </Popover.Content>
-  </Popover.Root>
-
-  <!-- slot used by ContactSelector to place a create button above the validation error -->
-  <slot />
-
-  {#if validationMessage}
-    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-  {/if}
-</div>

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

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

package/dist/fields/components/Selectresource.svelte

@@ -1,57 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import _ from "lodash-es";
-
-  import Select from "./Select.svelte";
-
-  export let form;
-  export let field;
-
-  $: resource_name = $field.spec?.params?.resource_name;
-
-  let dependencies = form.dependencies;
-  let clienthub = dependencies?.clienthub;
-  let stubber = dependencies?.stubber;
-  let socket = clienthub?.socket;
-  let stubref = stubber?.stubref;
-  let orguuid = stubber?.orguuid;
-
-  onMount(() => {});
-
-  const load_options = async (search_term) => {
-    if (!clienthub) return [];
-
-    const 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 = search_term;
-    if (details.params.limit === undefined) {
-      details.params.limit = 50;
-    }
-
-    return new Promise((resolve, reject) => {
-      socket.emit("request", { type: "resource", details }, (res) => {
-        if (res.success) {
-          const resources = res.payload?.[resource_name] || [];
-          // console.log("Loaded resources:", resources);
-          const result = resources.map((resource) => ({
-            value: resource,
-            label:
-              resource[$field.spec?.params?.label || $field.spec.label] ?? resource._default_label,
-          }));
-          resolve(result);
-        } else {
-          console.error("Failed to load resource:", res);
-          resolve([]);
-        }
-      });
-    });
-  };
-</script>
-
-<Select {field} {load_options} />

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  SelectresourceProps */
-/** @typedef {typeof __propDef.events}  SelectresourceEvents */
-/** @typedef {typeof __propDef.slots}  SelectresourceSlots */
-export default class Selectresource extends SvelteComponent<{
-    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 { 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/Signature.svelte

@@ -1,152 +0,0 @@
-<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";
-
-  import { Label } from "@stubber/ui/label";
-  import { Button } from "@stubber/ui/button";
-
-  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?.data) ? $field.data?.base?.data : [];
-      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) {
-      if ($internal.value.file && $internal.value.file.fileuuid) {
-        form.removeAttachment($internal.value.file);
-      }
-
-      $internal.value.file = uploaded_files[0];
-      form.appendAttachment(uploaded_files[0]);
-    } else {
-      console.warn("Failed to upload file");
-    }
-
-    return true;
-  }
-
-  const debounced_upload = _.debounce(uploadFile, 1000);
-
-  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;
-      debounced_upload();
-    }
-  }
-
-  $: canvasWidth = canvasContainer?.clientWidth;
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full text-surface-900">
-    <Label for="input_{state_key}" class=" {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-1">
-        <Button variant="ghost" on:click={clear} type="button">Clear</Button>
-      </div>
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}