@stubber/form-fields 1.7.8 → 1.8.0

package/dist/fields/components/Arraybuilder.svelte

@@ -1,98 +0,0 @@
-<script>
-  import _ from "lodash-es";
-  import FieldWrapper from "../component_parts/arraybuilder/FieldWrapper.svelte";
-  import Field from "../../Field.svelte";
-  import { onMount } from "svelte";
-  import { deepEqual } from "fast-equals";
-
-  import { Button } from "@stubber/ui/button";
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  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;
-  $: new_entry = {
-    ...$field.spec?.params?.new_entry_field,
-    hide_label: true,
-    title: $field.spec?.params?.new_entry_field?.title || "New Entry",
-    details: {
-      ...$field.spec?.params?.new_entry_field?.details,
-      datapath: "",
-      keyname: "",
-    },
-  };
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = _.isArray(f?.data?.base) ? f?.data?.base : [];
-    let initial_data = _.merge(
-      {
-        base: initial_value,
-      },
-      f?.data
-    );
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
-  });
-
-  function addEntry() {
-    field.update((f) => {
-      let new_data_base = _.cloneDeep($field?.data?.base);
-      if (!_.isArray(new_data_base)) new_data_base = [];
-      new_data_base.push(null);
-      _.set(f, `data.base`, new_data_base);
-      return f;
-    });
-  }
-
-  let rendered_fields;
-  $: updateRenderedFields($field?.data?.base, new_entry);
-  function updateRenderedFields(d, e) {
-    let update = [];
-
-    if (!_.isArray(d)) return;
-
-    d?.forEach((element, i) => {
-      update.push(
-        _.merge({}, _.cloneDeep(e), {
-          __order: i,
-          __key: i.toString(),
-          without_value_details: true,
-        })
-      );
-    });
-
-    if (!deepEqual(rendered_fields, update)) {
-      rendered_fields = _.cloneDeep(update);
-    }
-  }
-</script>
-
-{#if new_entry}
-  <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">
-      {#if rendered_fields}
-        {#each rendered_fields as initial_field_spec (initial_field_spec?.__key)}
-          <Field {form} {initial_field_spec} parent_field={field} field_wrapper={FieldWrapper} />
-        {/each}
-      {/if}
-      <div>
-        <Button type="button" size="icon" variant="outline" on:click={() => addEntry()} class="">
-          <i class="fa-regular fa-plus" />
-        </Button>
-      </div>
-    </div>
-    {#if validationMessage}
-      <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-    {/if}
-  </div>
-{/if}

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

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

@@ -1,89 +0,0 @@
-<script>
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { deepEqual } from "fast-equals";
-  import _ from "lodash-es";
-  import { onMount, onDestroy } from "svelte";
-  import { writable } from "svelte/store";
-
-  import { Checkbox } from "@stubber/ui/checkbox";
-  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;
-  $: checkedvalue =
-    $field.spec?.params?.checkedvalue !== undefined ? $field.spec?.params?.checkedvalue : true;
-  $: uncheckedvalue =
-    $field.spec?.params?.uncheckedvalue !== undefined ? $field.spec?.params?.uncheckedvalue : false;
-  $: isValid = !$field.state?.validation || $field.state?.validation?.valid;
-  $: validationMessage = $field.state?.validation?.message;
-
-  let store_sync_sub;
-
-  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,
-    };
-    _.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.checked = deepEqual(a?.data?.base, checkedvalue);
-
-        // 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;
-      }
-    );
-  });
-
-  onDestroy(() => {
-    store_sync_sub?.destroy();
-  });
-</script>
-
-{#if $internal}
-  <div class="flex flex-col w-full {!isValid ? `text-danger-500` : `text-surface-900`}">
-    <div class="flex space-x-3 relative my-1 items-center">
-      <Checkbox 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/Checkbox.svelte.d.ts

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

@@ -1,95 +0,0 @@
-<script>
-  import _ from "lodash-es";
-  import Checkbox from "./Checkbox.svelte";
-  import SmartText from "./SmartText.svelte";
-  import * as utils from "../../utils/index.js";
-
-  import { Label } from "@stubber/ui/label";
-
-  let clickOutside = utils.clickOutside;
-
-  export let field;
-
-  $field.spec.without_value_details = true;
-
-  $field.spec.params = $field.spec?.params || {};
-  $field.spec.params = {
-    ...$field.spec.params,
-    code_language: "handlebars",
-  };
-
-  // this field picks the best field to render based on the data
-  let selected_option = typeof $field.data.base === "boolean" ? "Checkbox" : "Smart Text";
-
-  let menu_open = false;
-
-  const open_menu = () => {
-    menu_open = !menu_open;
-  };
-
-  const options = ["Checkbox", "Smart Text"];
-
-  function select_option(option) {
-    selected_option = option;
-    switch (selected_option) {
-      case "Checkbox":
-        $field.data.base = false;
-        break;
-      case "Smart Text":
-        $field.data.base = "";
-        break;
-      default:
-        break;
-    }
-
-    menu_open = false;
-  }
-</script>
-
-<div>
-  <div class="flex gap-1 items-center">
-    <div
-      class="relative"
-      use:clickOutside={() => {
-        if (menu_open) {
-          menu_open = false;
-        }
-      }}
-    >
-      <button
-        type="button"
-        on:click={open_menu}
-        class="flex items-center justify-center border border-dashed bg-surface-0 border-surface-300 hover:bg-surface-500 hover:text-surface-0 active:bg-surface-600 active:text-surface-0 rounded text-surface-500"
-      >
-        <i class="fa-regular fa-chevron-down" />
-      </button>
-      {#if menu_open}
-        <div
-          class="absolute z-10 left-0 top-6 w-48 bg-white shadow-lg rounded-md ring-1 ring-surface-300"
-        >
-          <div class="p-2">
-            {#each options as option}
-              <div class="flex items-center gap-1">
-                <input
-                  id="fieldtype_radio_{option}"
-                  type="radio"
-                  name="fieldtype"
-                  checked={option === selected_option}
-                  on:change={() => {
-                    select_option(option);
-                  }}
-                />
-                <Label for="fieldtype_radio_{option}">{option}</Label>
-              </div>
-            {/each}
-          </div>
-        </div>
-      {/if}
-    </div>
-    {#if selected_option === "Checkbox"}
-      <Checkbox {field} />
-    {:else}
-      <SmartText {field} />
-    {/if}
-  </div>
-</div>

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

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

@@ -1,133 +0,0 @@
-<script>import {
-  acceptCompletion,
-  autocompletion,
-  CompletionContext,
-  completionKeymap,
-  startCompletion
-} from "@codemirror/autocomplete";
-import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap } from "@codemirror/view";
-import { Label } from "@stubber/ui/label";
-import { basicSetup } from "codemirror";
-export let field;
-let value = $field.data.base || "";
-let editor_view;
-$: 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;
-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
-  }
-]);
-function keysFor(obj) {
-  return Object.keys(obj ?? {});
-}
-function globalCompletions(ctx) {
-  const m = ctx.matchBefore(/[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*)*\.?/);
-  if (!m && !ctx.explicit) return null;
-  const text = m?.text ?? "";
-  const trailingDot = text.endsWith(".");
-  const parts = (trailingDot ? text.slice(0, -1) : text).split(".").filter(Boolean);
-  let container = $field.spec?.params?.globals || {};
-  for (let i = 0; i < Math.max(0, parts.length - (trailingDot ? 0 : 1)); i++) {
-    container = container?.[parts[i]];
-    if (!container) break;
-  }
-  const last = trailingDot ? "" : parts[parts.length - 1] ?? "";
-  const from = ctx.pos - last.length;
-  return {
-    from,
-    options: keysFor(container).map((key) => ({
-      label: key,
-      type: "property"
-      // 👈 simplified
-    })),
-    validFor: /^\w*$/
-    // keep suggestions stable while typing
-  };
-}
-const stubber_completions = javascriptLanguage.data.of({
-  autocomplete: globalCompletions
-});
-function bind_codemirror(el) {
-  const min_height_editor = EditorView.theme({
-    ".cm-content, .cm-gutter": { minHeight: "200px" },
-    "&": { maxHeight: "300px" },
-    ".cm-scroller": { overflow: "auto" }
-  });
-  editor_view = new EditorView({
-    state: EditorState.create({
-      doc: value,
-      extensions: [
-        basicSetup,
-        javascript(),
-        stubber_completions,
-        autocompletion({ defaultKeymap: false }),
-        keymap.of(custom_completion_keymap),
-        min_height_editor,
-        update_listener
-      ]
-    }),
-    parent: el
-  });
-}
-const update_listener = EditorView.updateListener.of((update) => {
-  if (update.docChanged) {
-    const new_value = update.state.doc.toString();
-    if (new_value !== value) {
-      value = new_value;
-    }
-  }
-});
-$: sync_field_to_editor(value);
-const sync_field_to_editor = (new_value) => {
-  if (editor_view && editor_view.state.doc.toString() !== new_value) {
-    editor_view.dispatch({
-      changes: {
-        from: 0,
-        to: editor_view.state.doc.length,
-        insert: new_value
-      }
-    });
-  }
-  if ($field.data.base !== new_value) {
-    $field.data.base = new_value;
-  }
-};
-$: sync_field_to_value($field.data.base);
-const sync_field_to_value = (new_value) => {
-  if (new_value !== value) {
-    value = new_value;
-  }
-};
-</script>
-
-<div class="flex flex-col w-full my-2">
-  <Label for="input_{state_key}" class="block py-2 {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  <div class="relative rounded-md">
-    <div use:bind_codemirror />
-  </div>
-  {#if validationMessage}
-    <Label class="mt-1.5 {!isValid ? `text-danger-500` : `text-success-500`}"
-      >{validationMessage}</Label
-    >
-  {/if}
-</div>

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

@@ -1,18 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        field: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type CodeProps = typeof __propDef.props;
-export type CodeEvents = typeof __propDef.events;
-export type CodeSlots = typeof __propDef.slots;
-export default class Code extends SvelteComponent<CodeProps, CodeEvents, CodeSlots> {
-}
-export {};

package/dist/fields/components/Contactselector.svelte

@@ -1,71 +0,0 @@
-<script>
-  import { onMount } from "svelte";
-  import _ from "lodash-es";
-
-  import { Button } from "@stubber/ui/button";
-  import Select from "./Select.svelte";
-
-  export let form;
-  export let field;
-
-  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;
-
-  onMount(() => {});
-
-  const show_create_contact_modal = () => {
-    createWantToModal("_create_new_contact", stubref, orguuid);
-  };
-
-  const load_options = async (search_term) => {
-    if (!clienthub) return [];
-
-    const details = {
-      resource_name: "contacts",
-    };
-
-    details.params = $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 contacts = res.payload?.contacts || [];
-          const result = contacts.map((contact) => ({
-            value: contact,
-            label:
-              contact[$field.spec?.params?.label || $field.spec.label] ?? contact._default_label,
-          }));
-          resolve(result);
-        } else {
-          console.error("Failed to load contacts:", res);
-          resolve([]);
-        }
-      });
-    });
-  };
-</script>
-
-<Select {field} {load_options}>
-  <div class="ml-auto pt-1">
-    <Button
-      on:click={show_create_contact_modal}
-      variant="ghost"
-      class="text-surface-500 text-sm hover:text-surface-700"
-    >
-      <i class="fa-regular fa-plus" />
-      Create new contact
-    </Button>
-  </div>
-</Select>

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

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