@stubber/form-fields 1.7.10 → 2.0.0

package/dist/fields/components/Email.svelte

@@ -1,125 +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 { Input } from "@stubber/ui/input";
-
-  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;
-
-  $: onRawChange($internal?.raw);
-  function onRawChange(r) {
-    let _clone = _.cloneDeep($internal) || {};
-    let formatted = r?.toLowerCase()?.trim();
-
-    // use regex to check valid email address and to get the username and domain parts
-    let regex =
-      /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
-    let is_valid_email = regex.test(formatted);
-    let username = is_valid_email ? formatted.split("@")[0] : null;
-    let domain = is_valid_email ? formatted.split("@")[1] : null;
-    _.set(_clone, "formatted", formatted);
-    _.set(_clone, "is_valid_email", is_valid_email);
-    _.set(_clone, "username", username);
-    _.set(_clone, "domain", domain);
-    $internal = _clone;
-  }
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let raw = f?.data?.base ?? "";
-    let formatted = raw?.toLowerCase()?.trim();
-    let initial_data = {
-      ...f?.data,
-      base: formatted,
-    };
-    let initial_state_internal = {
-      ...f?.state?.internal,
-      raw,
-      formatted,
-    };
-    _.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.formatted = a?.data?.base;
-        _clone.raw = _clone.formatted;
-        if (!a?.spec?.without_value_details) {
-          _clone.is_valid_email = a?.data?.base_details?.is_valid_email ?? _clone?.is_valid_email;
-          _clone.username = a?.data?.base_details?.username ?? _clone?.username;
-          _clone.domain = a?.data?.base_details?.domain ?? _clone?.domain;
-        }
-
-        // 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?.formatted);
-        if (!a?.spec?.without_value_details) {
-          _.set(_clone, "data.base_details.is_valid_email", b?.is_valid_email);
-          _.set(_clone, "data.base_details.domain", b?.domain);
-          _.set(_clone, "data.base_details.username", b?.username);
-          _.set(_clone, "data.base_details.raw", b?.raw);
-        }
-        return _clone;
-      },
-      null,
-      300
-    );
-  });
-</script>
-
-{#if $internal}
-  <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>
-    <div class="relative rounded-md">
-      <Input
-        on:keydown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-        type="text"
-        id="input_{state_key}"
-        placeholder={label}
-        class="block w-full {!isValid ? 'ring-danger-500' : 'ring-surface-300'}"
-        name={state_key}
-        bind:value={$internal.raw}
-      />
-    </div>
-    {#if validationMessage}
-      <Label class=" {!isValid ? `text-danger-500` : `text-success-500`}">
-        {validationMessage}
-      </Label>
-    {/if}
-  </div>
-{/if}

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

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

@@ -1,343 +0,0 @@
-<script>
-  import { Form } from "../..";
-  import _ from "lodash-es";
-  import { selectableFieldtypes, definitions } from "../definitions/index.js";
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { writable } from "svelte/store";
-  import { onMount, getContext } from "svelte";
-  import { deepEqual } from "fast-equals";
-  import FieldWrapper from "../component_parts/fieldbuilder/FieldWrapper.svelte";
-  import * as utils from "../../utils/index.js";
-
-  import { Checkbox } from "@stubber/ui/checkbox";
-  import { Label } from "@stubber/ui/label";
-  import { Button } from "@stubber/ui/button";
-  import * as Accordion from "@stubber/ui/accordion";
-
-  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;
-  $: spec_fieldtype_editable = $field.spec?.params?.spec_fieldtype_editable ?? true;
-  $: spec_name_editable = $field.spec?.params?.spec_name_editable ?? true;
-  $: spec_fieldtype = $field.spec?.params?.spec_fieldtype;
-  $: spec_name = $field.spec?.params?.spec_name;
-
-  let views = {
-    demo: !$field.spec?.params?.hide_demo && !$field.spec?.params?.demo_collapsed,
-    settings: true,
-  };
-  let dependencies = form.dependencies;
-  let default_field_wrapper = getContext("stubber-form-fields-default-wrapper");
-
-  let all_form = writable();
-  let initial_all_form;
-  $: updateInitialAllForm(spec_fieldtype, spec_name, spec_fieldtype_editable, spec_name_editable);
-  function updateInitialAllForm(ft, n, fte, ne) {
-    let update_all_form = _.cloneDeep(initial_all_form || {});
-    _.set(update_all_form, "spec.fields.name", {
-      fieldtype: "dataindication",
-    });
-    _.set(update_all_form, "spec.fields.fieldtype", {
-      fieldtype: "dataindication",
-    });
-    if (ne) {
-      _.set(update_all_form, "spec.fields.name.fieldtype", "text");
-    }
-    if (fte) {
-      _.set(update_all_form, "spec.fields.fieldtype.fieldtype", "select");
-      _.set(update_all_form, "spec.fields.fieldtype.params.options", selectableFieldtypes);
-    }
-    if (!deepEqual(initial_all_form, update_all_form)) {
-      let fieldtype = $field?.data?.base?.fieldtype ?? ft;
-      if (!fte) fieldtype = ft ?? fieldtype ?? "text";
-      let name = $field?.data?.base?.name ?? n;
-      if (!ne) name = n ?? name ?? "field";
-      _.set(update_all_form, "data.name", name);
-      _.set(update_all_form, "data.fieldtype", fieldtype);
-      initial_all_form = _.cloneDeep(update_all_form);
-    }
-  }
-
-  let settings_form = writable();
-  let initial_settings_form;
-  $: updateInitialSettingsForm($all_form);
-  function updateInitialSettingsForm(af) {
-    let fieldtype = af?.data?.fieldtype;
-    let name = af?.data?.name;
-    if (!definitions[fieldtype]?.settings_form) return;
-
-    let update_settings_form = _.cloneDeep(initial_settings_form || {});
-
-    let settings_form_spec = _.cloneDeep(definitions[fieldtype]?.settings_form);
-    let valid_fieldtype_settings_form = _.cloneDeep(definitions?._valid_fieldtype?.settings_form);
-    let spec = _.merge({}, settings_form_spec, valid_fieldtype_settings_form);
-    _.set(update_settings_form, "spec", spec);
-
-    if (!deepEqual(initial_settings_form, update_settings_form)) {
-      let data = _.cloneDeep(_.cloneDeep($settings_form?.data));
-      _.set(data, "spec.fieldtype", fieldtype);
-      _.set(data, "spec.name", name);
-      _.set(update_settings_form, "data", data);
-      initial_settings_form = _.cloneDeep(update_settings_form);
-    }
-  }
-
-  let advanced_form = writable();
-  let initial_advanced_form = {
-    spec: {
-      fields: {
-        spec: {
-          fieldtype: "jsoneditor",
-        },
-      },
-    },
-    data: {
-      spec: $field?.data?.base,
-    },
-  };
-
-  let demo_data_form = writable();
-  let demo_form = writable();
-  let initial_demo_form;
-  $: debounceUpdateInitialDemoForm($settings_form?.data?.spec);
-  const debounceUpdateInitialDemoForm = utils.debounce(updateInitialDemoForm, 100);
-  function updateInitialDemoForm(s) {
-    let fieldname = s?.name ?? "";
-    let spec = _.cloneDeep(s);
-    _.unset(spec, "conditions");
-    let update = {
-      spec: {
-        fields: {
-          [fieldname]: spec,
-        },
-      },
-    };
-
-    if (!deepEqual(initial_demo_form, update)) initial_demo_form = update;
-  }
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = !_.isObject(f?.data?.base) ? {} : f?.data?.base;
-    let initial_data = {
-      ...f?.data,
-      base: initial_value,
-    };
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
-
-    syncStoreToStore(
-      field,
-      all_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-        let spec = _.cloneDeep(a?.data?.base);
-
-        // lowercase and remove all whitespace and replace with _
-        let name = a?.data?.base?.name?.toLowerCase().replace(/\s/g, "_");
-        let fieldtype = a?.data?.base?.fieldtype?.toLowerCase().replace(/\s/g, "_");
-        if (name !== a?.data?.base?.name) $field.data.base.name = name;
-        if (fieldtype !== a?.data?.base?.fieldtype) $field.data.base.fieldtype = fieldtype;
-
-        _.set(_clone, "data.name", name);
-        _.set(_clone, "data.fieldtype", fieldtype);
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        _.set(_clone, "data.base.name", b?.data?.name);
-        _.set(_clone, "data.base.fieldtype", b?.data?.fieldtype);
-        return _clone;
-      }
-    );
-
-    syncStoreToStore(
-      field,
-      settings_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-        let spec = _.cloneDeep(a?.data?.base);
-        spec.__key = spec.name;
-        _.set(_clone, "data.spec", spec);
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        let spec = _.cloneDeep(b?.data?.spec);
-        spec.__key = spec.name;
-        _.set(_clone, "data.base", spec);
-        return _clone;
-      }
-    );
-
-    syncStoreToStore(
-      field,
-      advanced_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-        let spec = _.cloneDeep(a?.data?.base);
-        spec.__key = spec.name;
-        _.set(_clone, "data.spec", spec);
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-        let spec = _.cloneDeep(b?.data?.spec);
-        spec.__key = spec.name;
-        if (spec.__key !== b?.data?.spec?.__key) {
-          $advanced_form.data.spec.__key = spec.__key;
-        }
-        _.set(_clone, "data.base", spec);
-        return _clone;
-      }
-    );
-
-    syncStoreToStore(
-      demo_form,
-      demo_data_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-        _.set(_clone, "data.data", a?.data);
-        return _clone;
-      },
-      (a, b) => {
-        return a;
-      }
-    );
-  });
-</script>
-
-<div class="flex flex-col w-full text-surface-900 my-2">
-  <Label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  <div class>
-    <div class="bg-white">
-      {#if $field?.data?.base?.name}
-        <div class="text-xs text-surface-700 p-1 border-b">
-          {$field.data.base.name}
-        </div>
-      {/if}
-      <div class="flex items-center justify-start">
-        {#if !$field?.spec?.params?.hide_demo}
-          <button type="button" on:click={() => (views.demo = !views.demo)}>
-            <div class="p-2 hover:bg-surface-100 rounded-sm">
-              <div class="text-sm italic text-surface-500 flex justify-between items-center">
-                <i class="fa-regular fa-input-pipe {views.demo ? 'text-primary-500' : ''}" />
-              </div>
-            </div>
-          </button>
-        {/if}
-        <button type="button" on:click={() => (views.settings = !views.settings)}>
-          <div class="p-2 hover:bg-surface-100 rounded-sm">
-            <div class="text-sm italic text-surface-500 flex justify-between items-center">
-              <i class="fa-regular fa-gear {views.settings ? 'text-primary-500' : ''}" />
-            </div>
-          </div>
-        </button>
-        <button type="button" on:click={() => (views.demo_data = !views.demo_data)}>
-          <div class="p-2 hover:bg-surface-100 rounded-sm">
-            <div class="text-sm italic text-surface-500 flex justify-between items-center">
-              <i class="fa-regular fa-database {views.demo_data ? 'text-primary-500' : ''}" />
-            </div>
-          </div>
-        </button>
-        <button type="button" on:click={() => (views.advanced = !views.advanced)}>
-          <div class="p-2 hover:bg-surface-100 rounded-sm">
-            <div class="text-sm italic text-surface-500 flex justify-between items-center">
-              <i class="fa-regular fa-brackets-curly {views.advanced ? 'text-primary-500' : ''}" />
-            </div>
-          </div>
-        </button>
-      </div>
-    </div>
-    {#if initial_demo_form}
-      <div
-        class="{views.demo && !$field.spec?.params?.hide_demo
-          ? 'p-2'
-          : 'invisible absolute'} min-h-[100px]"
-      >
-        {#if !$settings_form?.data?.spec?.name || !$settings_form?.data?.spec?.fieldtype}
-          <div class="text-surface-500 text-xs italic">
-            Cannot show field without a field name and field type
-          </div>
-        {:else}
-          <div class="p-2">
-            <Form
-              bind:form={demo_form}
-              initial_form={initial_demo_form}
-              {dependencies}
-              field_wrapper={default_field_wrapper}
-            />
-          </div>
-        {/if}
-      </div>
-    {:else}
-      <div class="p-2 text-sm text-surface-500 italic min-h-[100px]">Initializing...</div>
-    {/if}
-    <div class={views.settings ? "border-t p-2" : "invisible absolute"}>
-      <div class="text-surface-500 text-xs pb-2 italic">
-        <button type="button" on:click={() => (views.settings = false)}
-          ><i class="fa-regular fa-circle-xmark text-sm" /></button
-        > Field Settings
-      </div>
-      <div class="p-2">
-        {#if initial_all_form}
-          <Form
-            bind:form={all_form}
-            initial_form={initial_all_form}
-            {dependencies}
-            field_wrapper={FieldWrapper}
-          />
-        {/if}
-        {#if initial_settings_form}
-          <Form
-            bind:form={settings_form}
-            initial_form={initial_settings_form}
-            {dependencies}
-            field_wrapper={FieldWrapper}
-          />
-        {/if}
-      </div>
-    </div>
-    <div class={views.demo_data ? "border-t p-2" : "invisible absolute"}>
-      <div class="text-surface-500 text-xs pb-2 italic">
-        <button type="button" on:click={() => (views.demo_data = false)}
-          ><i class="fa-regular fa-circle-xmark text-sm" /></button
-        > Demo Field Data
-      </div>
-      {#if initial_demo_form}
-        <Form
-          bind:form={demo_data_form}
-          initial_form={{
-            spec: {
-              fields: {
-                data: { fieldtype: "jsoneditor", hide_label: true, params: { readonly: true } },
-              },
-            },
-          }}
-          {dependencies}
-        />
-      {/if}
-    </div>
-    <div class={views.advanced ? "border-t p-2" : "invisible absolute"}>
-      <div class="text-surface-500 text-xs pb-2 italic">
-        <button type="button" on:click={() => (views.advanced = false)}
-          ><i class="fa-regular fa-circle-xmark text-sm" /></button
-        > Advanced Field Settings
-      </div>
-      {#if initial_advanced_form}
-        <Form bind:form={advanced_form} initial_form={initial_advanced_form} {dependencies} />
-      {/if}
-    </div>
-  </div>
-  {#if validationMessage}
-    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-  {/if}
-</div>

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

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

@@ -1,122 +0,0 @@
-<script>
-  import { Form } from "../..";
-  import _ from "lodash-es";
-  import { syncStoreToStore } from "../../utils/syncing";
-  import { writable } from "svelte/store";
-  import { onMount } from "svelte";
-  import { deepEqual } from "fast-equals";
-
-  import { Label } from "@stubber/ui/label";
-
-  export let form;
-  export let field;
-
-  let dependencies = form.dependencies;
-
-  $: 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 settings_form = writable();
-
-  let initial_form;
-
-  onMount(() => {
-    // set field values that aren't set yet
-    let f = _.cloneDeep($field);
-    let initial_value = f?.data?.base ?? {};
-    let initial_data = _.merge(
-      {
-        base: initial_value,
-      },
-      f?.data
-    );
-    _.set(f, "data", initial_data);
-    if (!deepEqual(f, $field)) $field = f;
-
-    initial_form = {
-      spec: {
-        fields: {
-          fields: {
-            fieldtype: "arraybuilder",
-            hide_label: true,
-            params: {
-              new_entry_field: {
-                fieldtype: "fieldbuilder",
-                params: {
-                  spec_fieldtype_editable: true,
-                  spec_name_editable: true,
-                  hide_demo: f.spec?.params?.hide_demo,
-                  demo_collapsed: f.spec?.params?.demo_collapsed,
-                },
-              },
-            },
-          },
-        },
-      },
-      data: {
-        fields: _.cloneDeep(
-          Object.entries(initial_value)
-            .sort((a, b) => a[1]?.__order - b[1]?.__order)
-            .map((e) => {
-              return {
-                ...e[1],
-                name: e[0],
-                __key: e[0],
-              };
-            })
-        ),
-      },
-    };
-
-    syncStoreToStore(
-      field,
-      settings_form,
-      (a, b) => {
-        let _clone = _.cloneDeep(b) || {};
-
-        let fields = Object.entries(a?.data?.base)
-          .sort((a, b) => a[1]?.__order - b[1]?.__order)
-          .map((e) => {
-            return {
-              ...e[1],
-              name: e[0],
-              __key: e[0],
-            };
-          });
-
-        _.set(_clone, "data.fields", fields);
-
-        return _clone;
-      },
-      (a, b) => {
-        let _clone = _.cloneDeep(a) || {};
-
-        let base = b.data.fields.reduce((acc, curr, index) => {
-          acc[curr.name] = {
-            ...curr,
-            __order: index,
-          };
-          return acc;
-        }, {});
-
-        _.set(_clone, "data.base", base);
-        return _clone;
-      }
-    );
-  });
-</script>
-
-<div class="flex flex-col w-full text-surface-900 my-2">
-  <Label for="input_{state_key}" class="block {hide_label ? 'hidden' : ''}">
-    {label}
-  </Label>
-  {#if initial_form}
-    <Form bind:form={settings_form} {initial_form} {dependencies} />
-  {/if}
-  {#if validationMessage}
-    <Label class={!isValid ? `text-danger-500` : `text-success-500`}>{validationMessage}</Label>
-  {/if}
-</div>

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

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