@stubber/form-fields 1.4.6 → 1.5.0

package/dist/fields2/sub/email-field.svelte

@@ -0,0 +1,40 @@
+<script context="module"></script>
+
+<script>import { Input } from "@stubber/ui/input";
+import FieldLabel from "../FieldLabel.svelte";
+import FieldMessage from "../FieldMessage.svelte";
+import { set_value_details } from "../utils";
+export let fieldStore;
+const field = $fieldStore;
+const formStore = field.formStore;
+$: value = $fieldStore.value;
+$: {
+  const regex = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
+  const is_valid_email = regex.test(value);
+  const username = is_valid_email ? value.split("@")[0] : null;
+  const domain = is_valid_email ? value.split("@")[1] : null;
+  const email_details = {
+    is_valid_email,
+    username,
+    domain,
+    raw: value
+  };
+  if (value) set_value_details(field, "details", email_details);
+}
+function on_input(event) {
+  const input = event.target;
+  const new_value = input.value.trim().toLowerCase();
+  field.value = new_value;
+}
+</script>
+
+<FieldLabel {fieldStore} />
+<Input
+  id={$fieldStore.id}
+  {value}
+  placeholder={$fieldStore.label}
+  on:input={on_input}
+  aria-invalid={$fieldStore.validation_result?.type == "error" ? true : undefined}
+  aria-describedby="message-{$fieldStore.id}"
+/>
+<FieldMessage {fieldStore} />

package/dist/fields2/sub/email-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import type { Writable } from "svelte/store";
+import type { IBaseField, IBuiltField } from "../interfaces";
+export interface IEmailField extends IBaseField<{}> {
+    fieldtype: "email";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type EmailFieldProps = typeof __propDef.props;
+export type EmailFieldEvents = typeof __propDef.events;
+export type EmailFieldSlots = typeof __propDef.slots;
+export default class EmailField extends SvelteComponent<EmailFieldProps, EmailFieldEvents, EmailFieldSlots> {
+}
+export {};

package/dist/fields2/sub/field-builder-field.svelte

@@ -0,0 +1,525 @@
+<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: max_files_param_spec,
+  screenshot: max_files_param_spec,
+  voicenote: max_files_param_spec,
+  signature: null,
+  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 JsonEditorBound from "./json-editor-bound.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 { max_files_param_spec } from "./screenrecorder-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";
+export let fieldStore;
+let value = cloneDeep($fieldStore.value) || {
+  details: {},
+  initvalue: {}
+};
+if (!value.details) {
+  value.details = {};
+}
+if (!value.initvalue) {
+  value.initvalue = {};
+}
+$: 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);
+  }
+}
+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;
+  closeAndFocusTrigger(trigger);
+}
+</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="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"
+      >
+        {selectedValue}
+        <i class="fas fa-sort ml-2 h-4 w-4 shrink-0 opacity-50" />
+      </Button>
+    </Popover.Trigger>
+    <Popover.Content class="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 open={true} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Basic Info</Label>
+
+        <i class="fa fa-sort" />
+      </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="w-full flex 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="w-full flex 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 />
+  <!-- params -->
+  <Collapsible.Root open={true} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Params</Label>
+
+        <i class="fa fa-sort" />
+      </Button>
+    </Collapsible.Trigger>
+
+    <Collapsible.Content class="flex flex-col gap-y-2 pl-2 pt-2">
+      {@const field_param_spec = field_params_spec_lookup[value.fieldtype ?? "unknown"]}
+      {#if field_param_spec}
+        <Form
+          initial_form={field_param_spec}
+          form={params_store}
+          attachments={$fieldStore.attachmentsStore}
+        />
+      {:else}
+        <span class="text-muted-foreground text-xs">No params available for this fieldtype.</span>
+      {/if}
+    </Collapsible.Content>
+  </Collapsible.Root>
+  <hr />
+  <!-- details -->
+  <Collapsible.Root open={false} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Details</Label>
+
+        <i class="fa fa-sort" />
+      </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="data_path">Data Path</Label>
+        <Input
+          id="data_path"
+          placeholder="Optional custom data path for the field"
+          bind:value={value.details.data_path}
+        />
+      </div>
+    </Collapsible.Content>
+  </Collapsible.Root>
+  <hr />
+  <!-- initial value -->
+  <Collapsible.Root open={false} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Initial Value</Label>
+
+        <i class="fa fa-sort" />
+      </Button>
+    </Collapsible.Trigger>
+
+    <Collapsible.Content class="flex flex-col gap-y-2 pl-2">
+      <div>
+        <div class="w-full flex items-center space-x-2">
+          <Checkbox id="has_default" bind:checked={value.initvalue.has_default} />
+          <Label for="has_default">Has Default</Label>
+        </div>
+        <JsonEditorBound bind:value={value.initvalue.default} />
+      </div>
+      <div>
+        <div class="w-full flex items-center space-x-2">
+          <Checkbox id="has_override" bind:checked={value.initvalue.has_override} />
+          <Label for="has_override">Has Override</Label>
+        </div>
+        <JsonEditorBound bind:value={value.initvalue.override} />
+      </div>
+    </Collapsible.Content>
+  </Collapsible.Root>
+  <hr />
+  <!-- conditions -->
+  <Collapsible.Root open={false} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Conditions</Label>
+
+        <i class="fa fa-sort" />
+      </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 items-center space-x-2 w-full">
+            <!-- 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 open={false} class="w-full">
+    <Collapsible.Trigger asChild let:builder>
+      <Button builders={[builder]} variant="ghost" class="w-full justify-between pl-0">
+        <Label>Validations</Label>
+
+        <i class="fa fa-sort" />
+      </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 items-start space-x-2 w-full">
+            <!-- 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="w-full flex 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} />

package/dist/fields2/sub/field-builder-field.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type Writable } from "svelte/store";
+import { type IBaseField, type IBuiltField } from "../interfaces";
+export interface IFieldBuilderField extends IBaseField<{}> {
+    fieldtype: "fieldbuilder";
+}
+declare const __propDef: {
+    props: {
+        fieldStore: Writable<IBuiltField>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldBuilderFieldProps = typeof __propDef.props;
+export type FieldBuilderFieldEvents = typeof __propDef.events;
+export type FieldBuilderFieldSlots = typeof __propDef.slots;
+export default class FieldBuilderField extends SvelteComponent<FieldBuilderFieldProps, FieldBuilderFieldEvents, FieldBuilderFieldSlots> {
+}
+export {};