@stubber/form-fields 1.0.0

package/dist/fields/components/Fieldbuilder.svelte

@@ -0,0 +1,340 @@
+<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";
+
+  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">
+  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    {label}
+  </label>
+  <div class="border">
+    <div class="bg-surface-50">
+      {#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 border-b bg-surface-50">
+        {#if !$field?.spec?.params?.hide_demo}
+          <button type="button" on:click={() => (views.demo = !views.demo)}>
+            <div class="p-2 hover:bg-primary-100">
+              <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-primary-100">
+            <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-primary-100">
+            <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-primary-100">
+            <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}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  FieldbuilderProps */
+/** @typedef {typeof __propDef.events}  FieldbuilderEvents */
+/** @typedef {typeof __propDef.slots}  FieldbuilderSlots */
+export default class Fieldbuilder extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/fields/components/Fieldsbuilder.svelte

@@ -0,0 +1,122 @@
+<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";
+
+  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">
+  <label for="input_{state_key}" class="block text-label {hide_label ? 'hidden' : ''}">
+    {label}
+  </label>
+  {#if initial_form}
+    <Form bind:form={settings_form} {initial_form} {dependencies} />
+  {/if}
+  {#if validationMessage}
+    <p class="text-label {!isValid ? `text-danger-500` : `text-success-500`}">
+      {validationMessage}
+    </p>
+  {/if}
+</div>

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

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  FieldsbuilderProps */
+/** @typedef {typeof __propDef.events}  FieldsbuilderEvents */
+/** @typedef {typeof __propDef.slots}  FieldsbuilderSlots */
+export default class Fieldsbuilder extends SvelteComponentTyped<{
+    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 { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        form: any;
+        field: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};