@stubber/form-fields 2.2.6 → 3.0.0

package/dist/form-fields/sub/field-builder-field.svelte

@@ -1,657 +0,0 @@
-<script context="module">import { writable } from "svelte/store";
-import {
-  fields,
-  validation_types
-} from "../interfaces";
-import { text_field_param_spec } from "./text-field.svelte";
-const field_params_spec_lookup = {
-  text: text_field_param_spec,
-  checkbox: checkbox_field_param_spec,
-  smart_text: smart_text_field_param_spec,
-  file: file_field_param_spec,
-  heading: heading_field_param_spec,
-  hidden: hidden_field_param_spec,
-  html: html_field_param_spec,
-  map: map_field_param_spec,
-  checkbox_autocomplete: merge({}, checkbox_field_param_spec, smart_text_field_param_spec),
-  code: code_field_param_spec,
-  currency: currency_field_param_spec,
-  dataindication: null,
-  telephone: null,
-  email: null,
-  arraybuilder: array_builder_field_param_spec,
-  contactselector: contact_selector_field_param_spec,
-  date: null,
-  datetime: null,
-  fieldbuilder: null,
-  grid: grid_field_param_spec,
-  hiddenlocation: null,
-  jsoneditor: jsoneditor_field_param_spec,
-  multicheckbox: multi_checkbox_field_param_spec,
-  multistep: null,
-  // todo: fields for multistep
-  note: null,
-  number: number_field_param_spec,
-  objectbuilder: object_builder_field_param_spec,
-  qrcodescanner: null,
-  radio: radio_field_param_spec,
-  screenrecorder: basic_files_field_param_spec,
-  screenshot: basic_files_field_param_spec,
-  voicenote: basic_files_field_param_spec,
-  signature: signature_field_param_spec,
-  scrollandreaddisplay: scroll_and_read_display_field_param_spec,
-  section: null,
-  // todo: fields for section
-  select: select_field_param_spec,
-  slider: number_field_param_spec,
-  selectresource: select_resource_field_param_spec,
-  unknown: null
-};
-</script>
-
-<script>import Form from "../Form.svelte";
-import { Button } from "@stubber/ui/button";
-import { Checkbox } from "@stubber/ui/checkbox";
-import * as Collapsible from "@stubber/ui/collapsible";
-import * as Command from "@stubber/ui/command";
-import { Input } from "@stubber/ui/input";
-import { Label } from "@stubber/ui/label";
-import * as Popover from "@stubber/ui/popover";
-import * as Select from "@stubber/ui/select";
-import { Textarea } from "@stubber/ui/textarea";
-import { cloneDeep, isEmpty, isEqual, isUndefined, merge, omitBy } from "lodash-es";
-import { tick } from "svelte";
-import FieldLabel from "../FieldLabel.svelte";
-import FieldMessage from "../FieldMessage.svelte";
-import { checkbox_field_param_spec } from "./checkbox-field.svelte";
-import { file_field_param_spec } from "./file-field.svelte";
-import { heading_field_param_spec } from "./heading-field.svelte";
-import { hidden_field_param_spec } from "./hidden-field.svelte";
-import { html_field_param_spec } from "./html-field.svelte";
-import { map_field_param_spec } from "./map-field.svelte";
-import { smart_text_field_param_spec } from "./smart-text-field.svelte";
-import { code_field_param_spec } from "./code-field.svelte";
-import { currency_field_param_spec } from "./currency-field.svelte";
-import { array_builder_field_param_spec } from "./array-builder-field.svelte";
-import { contact_selector_field_param_spec } from "./contact-selector-field.svelte";
-import { grid_field_param_spec } from "./grid-field.svelte";
-import { jsoneditor_field_param_spec } from "./jsoneditor-field.svelte";
-import { multi_checkbox_field_param_spec } from "./multi-checkbox-field.svelte";
-import { number_field_param_spec } from "./number-field.svelte";
-import { object_builder_field_param_spec } from "./object-builder-field.svelte";
-import { radio_field_param_spec } from "./radio-field.svelte";
-import { scroll_and_read_display_field_param_spec } from "./scroll-and-read-display-field.svelte";
-import { select_field_param_spec } from "./select-field.svelte";
-import { select_resource_field_param_spec } from "./selectresource-field.svelte";
-import { handle_editor_change_setter, handle_store_change } from "../../utils/json-editor-sync";
-import { basic_files_field_param_spec } from "../file_creation_options";
-import { signature_field_param_spec } from "./signature-field.svelte";
-export let fieldStore;
-let value = cloneDeep($fieldStore.value) || {
-  details: {},
-  initvalue: {}
-};
-if (!value.details) {
-  value.details = {};
-}
-if (!value.initvalue) {
-  value.initvalue = {};
-}
-let default_initvalue_editor;
-let override_initvalue_editor;
-$: update_fieldStore(value);
-function update_fieldStore(new_value) {
-  const cleaned_value = omitBy(
-    cloneDeep(new_value),
-    (v) => isUndefined(v) || typeof v === "object" && isEmpty(v)
-  );
-  if (!isEqual($fieldStore, cleaned_value)) {
-    $fieldStore.value = cleaned_value;
-  }
-}
-$: update_value($fieldStore.value);
-function update_value(new_value) {
-  if (!isEqual(value, new_value)) {
-    value = {
-      details: {},
-      initvalue: {},
-      ...cloneDeep(new_value)
-    };
-    update_params_from_value(value.params);
-    update_subfields_from_value(value.fields);
-    handle_store_change(value.initvalue.default, default_initvalue_editor);
-    handle_store_change(value.initvalue.override, override_initvalue_editor);
-  }
-}
-const field_types = Object.keys(fields).map((key) => ({
-  label: key,
-  value: key
-}));
-let open = false;
-$: selectedValue = field_types.find((f) => f.value === value.fieldtype)?.label ?? "Select a fieldtype";
-function closeAndFocusTrigger(trigger_id) {
-  open = false;
-  tick().then(() => {
-    document.getElementById(trigger_id)?.focus();
-  });
-}
-function add_condition() {
-  if (!value.conditions) {
-    value.conditions = [];
-  }
-  value.conditions = [...value.conditions, ""];
-}
-function move_condition_up(index) {
-  if (index > 0 && value.conditions) {
-    const temp = value.conditions[index];
-    value.conditions[index] = value.conditions[index - 1];
-    value.conditions[index - 1] = temp;
-    value.conditions = [...value.conditions];
-  }
-}
-function move_condition_down(index) {
-  if (value.conditions && index < value.conditions.length - 1) {
-    const temp = value.conditions[index];
-    value.conditions[index] = value.conditions[index + 1];
-    value.conditions[index + 1] = temp;
-    value.conditions = [...value.conditions];
-  }
-}
-function remove_condition(index) {
-  if (value.conditions) {
-    value.conditions = value.conditions.filter((_, i) => i !== index);
-  }
-}
-function add_validation() {
-  if (!value.validations) {
-    value.validations = [];
-  }
-  value.validations = [...value.validations, { validationtype: "required", invalid_message: "" }];
-}
-function move_validation_up(index) {
-  if (index > 0 && value.validations) {
-    const temp = value.validations[index];
-    value.validations[index] = value.validations[index - 1];
-    value.validations[index - 1] = temp;
-    value.validations = [...value.validations];
-  }
-}
-function move_validation_down(index) {
-  if (value.validations && index < value.validations.length - 1) {
-    const temp = value.validations[index];
-    value.validations[index] = value.validations[index + 1];
-    value.validations[index + 1] = temp;
-    value.validations = [...value.validations];
-  }
-}
-function remove_validation(index) {
-  if (value.validations) {
-    value.validations = value.validations.filter((_, i) => i !== index);
-  }
-}
-function handle_validation_selected(val, index) {
-  if (val && value.validations) {
-    let current_validation;
-    let prev_validation = value.validations[index];
-    if (val.value === "required") {
-      current_validation = {
-        validationtype: "required",
-        invalid_message: prev_validation.invalid_message
-      };
-    } else if (val.value === "regex") {
-      current_validation = {
-        validationtype: "regex",
-        invalid_message: prev_validation.invalid_message,
-        params: { regex: prev_validation.params?.regex ?? "" }
-      };
-    } else {
-      current_validation = {
-        validationtype: "jsonata",
-        invalid_message: prev_validation.invalid_message,
-        params: { jsonata: prev_validation.params?.jsonata ?? "" }
-      };
-    }
-    value.validations[index] = current_validation;
-  }
-}
-const params_store = writable({});
-$: update_params($params_store);
-function update_params(new_params) {
-  const cloned_new_params = cloneDeep(new_params);
-  if (!isEqual(value.params, cloned_new_params) && !isEmpty(cloned_new_params)) {
-    value.params = cloned_new_params;
-    update_fieldStore(value);
-  }
-}
-function update_params_from_value(new_value) {
-  if (!isEqual(new_value, $params_store)) {
-    params_store.set(cloneDeep(new_value) || {});
-  }
-}
-function select_field_type(newValue, trigger) {
-  value.fieldtype = newValue;
-  field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
-  closeAndFocusTrigger(trigger);
-}
-let field_param_spec = cloneDeep(field_params_spec_lookup[value.fieldtype ?? "unknown"]);
-const subfields_store = writable({});
-$: update_subfields($subfields_store.fields);
-function update_subfields(new_subfields) {
-  const cloned_new_subfields = cloneDeep(new_subfields);
-  if (!isEqual(value.fields, cloned_new_subfields) && !isEmpty(cloned_new_subfields)) {
-    value.fields = cloned_new_subfields;
-    update_fieldStore(value);
-  }
-}
-function update_subfields_from_value(new_value) {
-  if (!isEqual(new_value, $subfields_store)) {
-    subfields_store.set({ fields: cloneDeep(new_value) || {} });
-  }
-}
-let basic_info_open = true;
-let sub_fields_open = true;
-let params_open = false;
-let details_open = false;
-let initial_value_open = false;
-let conditions_open = false;
-let validations_open = false;
-</script>
-
-<FieldLabel {fieldStore} />
-<div class="flex flex-col gap-y-2">
-  <!-- fieldtype picker -->
-  <Popover.Root bind:open let:ids>
-    <Popover.Trigger asChild let:builder>
-      <Button
-        builders={[builder]}
-        variant="outline"
-        role="combobox"
-        aria-expanded={open}
-        class="flex h-10 w-full justify-between rounded-md border border-input bg-white bg-opacity-[15] px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        {selectedValue}
-        <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </Button>
-    </Popover.Trigger>
-    <Popover.Content class="max-h-[50vh] overflow-y-scroll p-0" sameWidth>
-      <Command.Root>
-        <Command.Input placeholder="Search framework..." />
-        <Command.Empty>No fieldtype found.</Command.Empty>
-        <Command.Group>
-          {#each field_types as fieldtype_item}
-            <Command.Item
-              value={fieldtype_item.value}
-              onSelect={(newValue) => select_field_type(newValue, ids.trigger)}
-              class={value.fieldtype === fieldtype_item.value ? "bg-primary-100" : ""}
-            >
-              {fieldtype_item.label}
-            </Command.Item>
-          {/each}
-        </Command.Group>
-      </Command.Root>
-    </Popover.Content>
-  </Popover.Root>
-  <!-- basic props -->
-  <Collapsible.Root bind:open={basic_info_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Basic Info</Label>
-
-        <div class="flex items-center">
-          {#if basic_info_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
-      <div>
-        <Label for="title">Title</Label>
-        <Input
-          id="title"
-          placeholder="Optional custom title for the field"
-          bind:value={value.title}
-        />
-      </div>
-      <div class="flex w-full items-center space-x-2">
-        <Checkbox id="without_value_details" bind:checked={value.without_value_details} />
-        <Label for="without_value_details">Without Value Details</Label>
-      </div>
-      <div class="flex w-full items-center space-x-2">
-        <Checkbox id="hide_label" bind:checked={value.hide_label} />
-        <Label for="hide_label">Hide Label</Label>
-      </div>
-      <div>
-        <Label for="help">Help</Label>
-        <Textarea
-          id="help"
-          placeholder="Optional help text for the field"
-          bind:value={value.help}
-        />
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-  <!-- subfields -->
-  {#if value.fieldtype === "section" || value.fieldtype === "multistep"}
-    <Collapsible.Root bind:open={sub_fields_open} class="w-full">
-      <Collapsible.Trigger asChild let:builder>
-        <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-          <Label>Fields</Label>
-
-          <div class="flex items-center">
-            {#if sub_fields_open}
-              <i class="fa fa-caret-down" />
-            {:else}
-              <i class="fa fa-caret-right" />
-            {/if}
-          </div>
-        </Button>
-      </Collapsible.Trigger>
-
-      <Collapsible.Content class="flex flex-col gap-y-2 pl-2 pt-2">
-        <Form
-          form={subfields_store}
-          initial_form={{
-            spec: {
-              fields: {
-                fields: {
-                  hide_label: true,
-                  fieldtype: "objectbuilder",
-                  help: "Fields within this section/multistep",
-                  params: {
-                    value_field_spec: {
-                      fieldtype: "fieldbuilder",
-                      initvalue: {
-                        has_default: true,
-                        default: {
-                          fieldtype: "text",
-                        },
-                      },
-                    },
-                  },
-                },
-              },
-            },
-          }}
-        />
-      </Collapsible.Content>
-    </Collapsible.Root>
-    <hr />
-  {/if}
-
-  <!-- params -->
-  <Collapsible.Root bind:open={params_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Params</Label>
-
-        <div class="flex items-center">
-          {#if params_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2 pt-2">
-      {#if field_param_spec}
-        {#key value.fieldtype}
-          <Form
-            initial_form={field_param_spec}
-            form={params_store}
-            attachments={$fieldStore.attachmentsStore}
-          />
-        {/key}
-      {:else}
-        <span class="text-xs text-muted-foreground">No params available for this fieldtype.</span>
-      {/if}
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-  <!-- details -->
-  <Collapsible.Root bind:open={details_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Details</Label>
-
-        <div class="flex items-center">
-          {#if details_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
-      <div>
-        <Label for="keyname">Keyname</Label>
-        <Input
-          id="keyname"
-          placeholder="Custom key underwhich to store the value"
-          bind:value={value.details.keyname}
-        />
-      </div>
-      <div>
-        <Label for="datapath">Data Path</Label>
-        <Input
-          id="datapath"
-          placeholder="Optional custom data path for the field"
-          bind:value={value.details.datapath}
-        />
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-  <!-- initial value -->
-  <Collapsible.Root bind:open={initial_value_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Initial Value</Label>
-
-        <div class="flex items-center">
-          {#if initial_value_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
-      <div>
-        <div class="flex w-full items-center space-x-2">
-          <Checkbox id="has_default" bind:checked={value.initvalue.has_default} />
-          <Label for="has_default">Has Default</Label>
-        </div>
-        {#await import("svelte-jsoneditor") then JSONEditorModule}
-          <JSONEditorModule.JSONEditor
-            bind:this={default_initvalue_editor}
-            onChange={(content) =>
-              handle_editor_change_setter(
-                content,
-                (new_val) => (value.initvalue.default = new_val)
-              )}
-          />
-        {/await}
-      </div>
-      <div>
-        <div class="flex w-full items-center space-x-2">
-          <Checkbox id="has_override" bind:checked={value.initvalue.has_override} />
-          <Label for="has_override">Has Override</Label>
-        </div>
-        {#await import("svelte-jsoneditor") then JSONEditorModule}
-          <JSONEditorModule.JSONEditor
-            bind:this={override_initvalue_editor}
-            onChange={(content) =>
-              handle_editor_change_setter(
-                content,
-                (new_val) => (value.initvalue.override = new_val)
-              )}
-          />
-        {/await}
-      </div>
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-  <!-- conditions -->
-  <Collapsible.Root bind:open={conditions_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Conditions</Label>
-
-        <div class="flex items-center">
-          {#if conditions_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
-      <Button variant="outline" size="icon" class="self-start" on:click={add_condition}>
-        <i class="fa fa-plus" />
-      </Button>
-
-      {#if value.conditions && value.conditions.length > 0}
-        {#each value.conditions as condition, index}
-          <div class="flex w-full items-center space-x-2">
-            <!-- up and down sort buttons -->
-            <div class="flex flex-col items-center">
-              <Button
-                variant="ghost"
-                class="h-5 w-5 p-2"
-                disabled={index === 0}
-                on:click={() => move_condition_up(index)}
-              >
-                <i class="fa fa-chevron-up" />
-              </Button>
-              <Button
-                variant="ghost"
-                class="h-5 w-5 p-2"
-                disabled={index === value.conditions.length - 1}
-                on:click={() => move_condition_down(index)}
-              >
-                <i class="fa fa-chevron-down" />
-              </Button>
-            </div>
-            <Input
-              placeholder="JSONata condition"
-              class="w-full"
-              bind:value={value.conditions[index]}
-            />
-            <Button
-              variant="destructive"
-              class="h-5 w-5 p-2"
-              on:click={() => remove_condition(index)}
-            >
-              <i class="fa fa-trash" />
-            </Button>
-          </div>
-        {/each}
-      {/if}
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-  <!-- validations -->
-  <Collapsible.Root bind:open={validations_open} class="w-full">
-    <Collapsible.Trigger asChild let:builder>
-      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
-        <Label>Validations</Label>
-
-        <div class="flex items-center">
-          {#if validations_open}
-            <i class="fa fa-caret-down" />
-          {:else}
-            <i class="fa fa-caret-right" />
-          {/if}
-        </div>
-      </Button>
-    </Collapsible.Trigger>
-
-    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
-      <Button variant="outline" size="icon" class="self-start" on:click={add_validation}>
-        <i class="fa fa-plus" />
-      </Button>
-
-      {#if value.validations && value.validations.length > 0}
-        {#each value.validations as validation, index}
-          <div class="flex w-full items-start space-x-2">
-            <!-- up and down sort buttons -->
-            <div class="flex flex-col items-center">
-              <Button
-                variant="ghost"
-                class="h-5 w-5 p-2"
-                disabled={index === 0}
-                on:click={() => move_validation_up(index)}
-              >
-                <i class="fa fa-chevron-up" />
-              </Button>
-              <Button
-                variant="ghost"
-                class="h-5 w-5 p-2"
-                disabled={index === value.validations.length - 1}
-                on:click={() => move_validation_down(index)}
-              >
-                <i class="fa fa-chevron-down" />
-              </Button>
-            </div>
-            <div class="flex w-full flex-col items-stretch gap-1">
-              <Select.Root
-                selected={{
-                  label: value.validations[index].validationtype,
-                  value: value.validations[index].validationtype,
-                }}
-                onSelectedChange={(v) => handle_validation_selected(v, index)}
-              >
-                <Select.Trigger class="w-full">
-                  <Select.Value placeholder="Validation Type" />
-                </Select.Trigger>
-                <Select.Content>
-                  {#each validation_types as vt}
-                    <Select.Item value={vt}>{vt}</Select.Item>
-                  {/each}
-                </Select.Content>
-              </Select.Root>
-              <Input
-                placeholder="Invalid Message"
-                bind:value={value.validations[index].invalid_message}
-              />
-              {#if value.validations[index].validationtype === "regex"}
-                <Input
-                  placeholder="Regex Pattern"
-                  bind:value={value.validations[index].params.regex}
-                />
-              {/if}
-              {#if value.validations[index].validationtype === "jsonata"}
-                <Input
-                  placeholder="JSONata Expression"
-                  bind:value={value.validations[index].params.jsonata}
-                />
-              {/if}
-            </div>
-            <Button
-              variant="destructive"
-              class="h-5 w-5 p-2"
-              on:click={() => remove_validation(index)}
-            >
-              <i class="fa fa-trash" />
-            </Button>
-          </div>
-        {/each}
-      {/if}
-    </Collapsible.Content>
-  </Collapsible.Root>
-  <hr />
-</div>
-<FieldMessage {fieldStore} />