@poirazis/supercomponents-shared 1.0.11 → 1.0.18

package/src/lib/SuperForm/InnerForm.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
-  import { setContext, getContext } from "svelte";
+  import { setContext, getContext, createEventDispatcher } from "svelte";
   import type { Readable, Writable } from "svelte/store";
   import { derived, get, writable } from "svelte/store";
-  const { createValidatorFromConstraints } = getContext("sdk");
-  import type { FieldSchema, FieldType, UIFieldValidationRule } from "./types";
+  import type {
+    DataFetchDatasource,
+    FieldSchema,
+    FieldType,
+    Table,
+    TableSchema,
+    UIFieldValidationRule,
+  } from "@budibase/types";
+
+  const dispatch = createEventDispatcher();
 
   type FieldInfo<T = any> = {
     name: string;
     step: number;
-    type: FieldType;
+    type: `${FieldType}`;
     fieldState: {
       fieldId: string;
       value: T;
@@ -27,28 +35,23 @@
     fieldSchema: FieldSchema | {};
   };
 
-  export let dataSource: any | undefined = undefined;
+  export let dataSource: DataFetchDatasource | undefined = undefined;
   export let disabled: boolean = false;
   export let readonly: boolean = false;
   export let initialValues: Record<string, any> | undefined = undefined;
   export let size: "Medium" | "Large" | undefined = undefined;
-  export let schema: Record<string, FieldSchema> | undefined = undefined;
-  export let definition: any | undefined = undefined;
+  export let schema: TableSchema | undefined = undefined;
+  export let definition: Table | undefined = undefined;
   export let disableSchemaValidation: boolean = false;
   export let editAutoColumns: boolean = false;
-
-  // For internal use only, to disable context when being used with standalone fields
   export let provideContext: boolean = true;
-
-  // We export this store so that when we remount the inner form we can still
-  // persist what step we're on
   export let currentStep: Writable<number>;
 
-  const component = getContext("component");
-  const { styleable, Provider, ActionTypes } = getContext("sdk");
+  const { Provider, ActionTypes, createValidatorFromConstraints } =
+    getContext("sdk");
 
   let fields: Writable<FieldInfo>[] = [];
-  const formState = writable({
+  export const formState = writable({
     values: {},
     errors: {},
     valid: true,
@@ -56,23 +59,12 @@
     currentStep: get(currentStep),
   });
 
-  // Reactive derived stores to derive form state from field array
   $: values = deriveFieldProperty(fields, (f) => f.fieldState.value);
   $: errors = deriveFieldProperty(fields, (f) => f.fieldState.error);
   $: enrichments = deriveBindingEnrichments(fields);
   $: valid = !Object.values($errors).some((error) => error != null);
-  // Track if any field has been modified from its default value
-  $: dirty = derived(
-    fields,
-    (fieldsValue) => fieldsValue.some((field) => {
-      const { value, defaultValue } = field.fieldState;
-      // Compare current value with default value to determine if field is dirty
-      // Using JSON.stringify for deep comparison of objects and arrays
-      return JSON.stringify(value) !== JSON.stringify(defaultValue);
-    })
-  );
+  $: dirty = deriveDirtyStatus(fields, initialValues);
 
-  // Derive whether the current form step is valid
   $: currentStepValid = derived(
     [currentStep, ...fields],
     ([currentStepValue, ...fieldsValue]) => {
@@ -82,7 +74,14 @@
     }
   );
 
-  // Update form state store from derived stores
+  // Offer the form as a bindable property so it can be puppeteered by parent components
+  export let form;
+  $: form = {
+    formState,
+    formApi,
+    dataSource,
+  };
+
   $: {
     formState.set({
       values: $values,
@@ -93,14 +92,10 @@
     });
   }
 
-  // Derive value of whole form
   $: formValue = deriveFormValue(initialValues, $values, $enrichments);
 
-  // Create data context to provide
   $: dataContext = {
     ...formValue,
-
-    // These static values are prefixed to avoid clashes with actual columns
     __value: formValue,
     __valid: valid,
     __dirty: $dirty,
@@ -108,8 +103,6 @@
     __currentStepValid: $currentStepValid,
   };
 
-  // Generates a derived store from an array of fields, comprised of a map of
-  // extracted values from the field array
   const deriveFieldProperty = (
     fieldStores: Readable<FieldInfo>[],
     getProp: (_field: FieldInfo) => any
@@ -122,8 +115,19 @@
     });
   };
 
-  // Derives any enrichments which need to be made so that bindings work for
-  // special data types like attachments
+  const deriveDirtyStatus = (
+    fieldStores: Readable<FieldInfo>[],
+    initialValues: Record<string, any> | undefined
+  ) => {
+    return derived(fieldStores, (fieldValues) => {
+      return fieldValues.some((field) => {
+        const initial =
+          deepGet(initialValues, field.name) ?? field.fieldState.defaultValue;
+        return field.fieldState.value !== initial;
+      });
+    });
+  };
+
   const deriveBindingEnrichments = (fieldStores: Readable<FieldInfo>[]) => {
     return derived(fieldStores, (fieldValues) => {
       const enrichments: Record<string, string> = {};
@@ -141,16 +145,12 @@
     });
   };
 
-  // Derive the overall form value and deeply set all field paths so that we
-  // can support things like JSON fields.
   const deriveFormValue = (
     initialValues: Record<string, any> | undefined,
     values: Record<string, any>,
     enrichments: Record<string, string>
   ) => {
     let formValue = cloneDeep(initialValues || {});
-
-    // We need to sort the keys to avoid a JSON field overwriting a nested field
     const sortedFields = Object.entries(values || {})
       .map(([key, value]) => {
         const field = getField(key);
@@ -164,7 +164,6 @@
         return a.lastUpdate - b.lastUpdate;
       });
 
-    // Merge all values and enrichments into a single value
     sortedFields.forEach(({ key, value }) => {
       deepSet(formValue, key, value);
     });
@@ -174,19 +173,15 @@
     return formValue;
   };
 
-  // Searches the field array for a certain field
   const getField = (name: string) => {
     return fields.find((field) => get(field).name === name)!;
   };
 
-  // Sanitises a value by ensuring it doesn't contain any invalid data
   const sanitiseValue = (
     value: any,
     schema: FieldSchema | undefined,
-    type: FieldType
+    type: `${FieldType}`
   ) => {
-    // Check arrays - remove any values not present in the field schema and
-    // convert any values supplied to strings
     if (Array.isArray(value) && type === "array" && schema) {
       const options = schema?.constraints?.inclusion || [];
       return value
@@ -209,7 +204,6 @@
       if (!field) {
         return;
       }
-      // Create validation function based on field schema
       const schemaConstraints = disableSchemaValidation
         ? null
         : schema?.[field]?.constraints;
@@ -220,10 +214,8 @@
         definition
       );
 
-      // Sanitise the default value to ensure it doesn't contain invalid data
       defaultValue = sanitiseValue(defaultValue, schema?.[field], type);
 
-      // If we've already registered this field then keep some existing state
       let initialValue = deepGet(initialValues, field) ?? defaultValue;
       let initialError = null;
       let fieldId = `id-${uuid()}`;
@@ -231,24 +223,16 @@
       if (existingField) {
         const { fieldState } = get(existingField);
         fieldId = fieldState.fieldId;
-
-        // Determine the initial value for this field, reusing the current
-        // value if one exists
         if (fieldState.value != null && fieldState.value !== "") {
           initialValue = fieldState.value;
         }
-
-        // If this field has already been registered and we previously had an
-        // error set, then re-run the validator to see if we can unset it
         if (fieldState.error) {
           initialError = validator?.(initialValue);
         }
       }
 
-      // Auto columns are always disabled
       const isAutoColumn = !!schema?.[field]?.autocolumn;
 
-      // Construct field info
       const fieldInfo = writable<FieldInfo>({
         name: field,
         type,
@@ -269,7 +253,6 @@
         fieldSchema: schema?.[field] ?? {},
       });
 
-      // Add this field
       if (existingField) {
         const otherFields = fields.filter((info) => get(info).name !== field);
         fields = [...otherFields, fieldInfo];
@@ -283,8 +266,6 @@
       const stepFields = fields.filter(
         (field) => get(field).step === get(currentStep)
       );
-      // We want to validate every field (even if validation fails early) to
-      // ensure that all fields are populated with errors if invalid
       let valid = true;
       let hasScrolled = false;
       stepFields.forEach((field) => {
@@ -295,14 +276,13 @@
           hasScrolled = true;
         }
       });
-
       return valid;
     },
     reset: () => {
-      // Reset the form by resetting each individual field
       fields.forEach((field) => {
         get(field).fieldApi.reset();
       });
+      dispatch("reset");
     },
     changeStep: ({
       type,
@@ -344,20 +324,16 @@
     },
   };
 
-  // Creates an API for a specific field
   const makeFieldApi = (field: string) => {
-    // Sets the value for a certain field and invokes validation
     const setValue = (value: any, skipCheck = false) => {
       const fieldInfo = getField(field);
       const { fieldState } = get(fieldInfo);
       const { validator } = fieldState;
 
-      // Skip if the value is the same
       if (!skipCheck && fieldState.value === value) {
         return false;
       }
 
-      // Update field state
       const error = validator?.(value);
       fieldInfo.update((state) => {
         state.fieldState.value = value;
@@ -365,17 +341,15 @@
         state.fieldState.lastUpdate = Date.now();
         return state;
       });
-
+      dispatch("change", { field, value });
       return true;
     };
 
-    // Clears the value of a certain field back to the default value
     const reset = () => {
       const fieldInfo = getField(field);
       const { fieldState } = get(fieldInfo);
       const newValue = fieldState.defaultValue;
 
-      // Update field state
       fieldInfo.update((state) => {
         state.fieldState.value = newValue;
         state.fieldState.error = null;
@@ -384,8 +358,6 @@
       });
     };
 
-    // We don't want to actually remove the field state when deregistering, just
-    // remove any errors and validation
     const deregister = () => {
       const fieldInfo = getField(field);
       fieldInfo.update((state) => {
@@ -395,14 +367,9 @@
       });
     };
 
-    // Updates the disabled state of a certain field
     const setDisabled = (fieldDisabled: boolean) => {
       const fieldInfo = getField(field);
-
-      // Auto columns are always disabled
       const isAutoColumn = !!schema?.[field]?.autocolumn;
-
-      // Update disabled state
       fieldInfo.update((state) => {
         state.fieldState.disabled = disabled || fieldDisabled || isAutoColumn;
         return state;
@@ -415,7 +382,6 @@
       setDisabled,
       deregister,
       validate: () => {
-        // Validate the field by force setting the same value again
         const fieldInfo = getField(field);
         setValue(get(fieldInfo).fieldState.value, true);
         return !get(fieldInfo).fieldState.error;
@@ -423,18 +389,12 @@
     };
   };
 
-  // Provide form state and api for full control by children
   setContext("form", {
     formState,
     formApi,
-
-    // Datasource is needed by attachment fields to be able to upload files
-    // to the correct table ID
     dataSource,
   });
 
-  // Provide form step context so that forms without any step components
-  // register their fields to step 1
   setContext("form-step", writable(1));
 
   const handleUpdateFieldValue = ({
@@ -474,7 +434,6 @@
     }
   };
 
-  // Action context to pass to children
   const actions = [
     { type: ActionTypes.ValidateForm, callback: formApi.validate },
     { type: ActionTypes.ClearForm, callback: formApi.reset },
@@ -483,27 +442,23 @@
     { type: ActionTypes.ScrollTo, callback: handleScrollToField },
   ];
 
-  // Helper functions
-  function uuid() {
-    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
-      /[xy]/g,
-      function (c) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      }
-    );
+  // Generate a UUID (simplified version for brevity)
+  function uuid(): string {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === "x" ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
   }
 
-  function cloneDeep(obj: any) {
-    if (obj === null || typeof obj !== "object") {
+  // Deep clone an object
+  function cloneDeep<T>(obj: T): T {
+    if (obj == null || typeof obj !== "object") {
       return obj;
     }
-
     if (Array.isArray(obj)) {
-      return obj.map((item) => cloneDeep(item));
+      return obj.map(cloneDeep) as any;
     }
-
     const cloned: any = {};
     for (const key in obj) {
       if (Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -513,46 +468,44 @@
     return cloned;
   }
 
-  function deepGet(obj: any, path: string) {
-    if (!obj) return undefined;
-    const parts = path.split(".");
+  // Get a value from an object using a dot-notation path
+  function deepGet(obj: any, path: string | string[]): any {
+    if (!obj || !path) {
+      return undefined;
+    }
+    const pathArray = Array.isArray(path) ? path : path.split(".");
     let current = obj;
-
-    for (let i = 0; i < parts.length; i++) {
-      if (current === null || current === undefined) {
+    for (const key of pathArray) {
+      if (current == null) {
         return undefined;
       }
-      current = current[parts[i]];
+      current = current[key];
     }
-
     return current;
   }
 
-  function deepSet(obj: any, path: string, value: any) {
-    if (!obj) return;
-    const parts = path.split(".");
+  // Set a value in an object using a dot-notation path
+  function deepSet(obj: any, path: string | string[], value: any): void {
+    if (!obj || !path) {
+      return;
+    }
+    const pathArray = Array.isArray(path) ? path : path.split(".");
     let current = obj;
-
-    for (let i = 0; i < parts.length - 1; i++) {
-      const part = parts[i];
-      if (!current[part] || typeof current[part] !== "object") {
-        current[part] = {};
+    for (let i = 0; i < pathArray.length - 1; i++) {
+      const key = pathArray[i];
+      if (!current[key] || typeof current[key] !== "object") {
+        current[key] = {};
       }
-      current = current[part];
+      current = current[key];
     }
-
-    current[parts[parts.length - 1]] = value;
+    current[pathArray[pathArray.length - 1]] = value;
   }
 </script>
 
 {#if provideContext}
   <Provider {actions} data={dataContext}>
-    <div class={size}>
-      <slot />
-    </div>
+    <slot />
   </Provider>
 {:else}
-  <div class={size}>
-    <slot />
-  </div>
+  <slot />
 {/if}

package/src/lib/SuperForm/SuperForm.svelte

@@ -2,23 +2,37 @@
   import { getContext } from "svelte";
   import InnerForm from "./InnerForm.svelte";
   import { writable } from "svelte/store";
-  import type { FieldSchema } from "@budibase/types";
+  import type {
+    DataFetchDatasource,
+    Table,
+    TableSchema,
+  } from "@budibase/types";
 
-  export let dataSource: any;
-  export let size: "Medium" | "Large" = "Medium";
+  // Local utility function
+  const hashString = (str: string): string => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash; // Convert to 32-bit integer
+    }
+    return hash.toString(16);
+  };
+
+  export let dataSource: DataFetchDatasource;
+  export let size: "Medium" | "Large";
   export let disabled: boolean = false;
   export let readonly: boolean = false;
-  export let actionType: "Create" | "Update" | "View" = "Create";
+  export let actionType: "Create" = "Create";
   export let initialFormStep: string | number = 1;
-
-  // Not exposed as a builder setting. Used internally to disable validation
-  // for fields rendered in things like search blocks.
   export let disableSchemaValidation: boolean = false;
-
-  // Not exposed as a builder setting. Used internally to allow searching on
-  // auto columns.
   export let editAutoColumns: boolean = false;
 
+  // Export the full form API to be used by parents
+  export let form;
+  export let formState;
+  export let row;
+
   const context = getContext("context");
   const component = getContext("component");
   const { fetchDatasourceSchema, fetchDatasourceDefinition } =
@@ -32,8 +46,8 @@
     return parsedFormStep;
   };
 
-  let definition: any | undefined;
-  let schema: Record<string, FieldSchema> | undefined;
+  let definition: Table | undefined;
+  let schema: TableSchema | undefined;
   let loaded = false;
   let currentStep =
     getContext("current-step") || writable(getInitialFormStep());
@@ -50,34 +64,30 @@
     schemaKey + JSON.stringify(initialValues) + disabled + readonly
   );
 
-  // Returns the closes data context which isn't a built in context
   const getInitialValues = (
     type: string,
-    dataSource: any,
+    dataSource: DataFetchDatasource,
     path: string[],
     context: Record<string, any>
   ) => {
-    // Only inherit values for update forms
     if (type !== "Update") {
       return {};
     }
-    // Only inherit values for forms targeting internal tables
     const dsType = dataSource?.type;
     if (dsType !== "table" && dsType !== "viewV2") {
       return {};
     }
-    // Look up the component tree and find something that is provided by an
-    // ancestor that matches our datasource. This is for backwards compatibility
-    // as previously we could use the "closest" context.
-    for (let id of [...path].reverse().slice(1)) {
-      // Check for matching view datasource
+
+    if (row && dsType === "table" && row?.tableId === dataSource.tableId) {
+      return row;
+    }
+    for (let id of path.toReversed().slice(1)) {
       if (
         dataSource.type === "viewV2" &&
         context[id]?._viewId === dataSource.id
       ) {
         return context[id];
       }
-      // Check for matching table datasource
       if (
         dataSource.type === "table" &&
         context[id]?.tableId === dataSource.tableId
@@ -88,8 +98,7 @@
     return {};
   };
 
-  // Fetches the form schema from this form's dataSource
-  const fetchSchema = async (dataSource: any) => {
+  const fetchSchema = async (dataSource: DataFetchDatasource) => {
     try {
       definition = await fetchDatasourceDefinition(dataSource);
     } catch (error) {
@@ -102,12 +111,7 @@
     }
   };
 
-  // Generates a predictable string that uniquely identifies a schema. We can't
-  // simply stringify the whole schema as there are array fields which have
-  // random order.
-  const generateSchemaKey = (
-    schema: Record<string, FieldSchema> | undefined
-  ) => {
+  const generateSchemaKey = (schema: TableSchema | undefined) => {
     if (!schema) {
       return null;
     }
@@ -115,23 +119,13 @@
     fields.sort();
     return fields.map((field) => `${field}:${schema[field].type}`).join("-");
   };
-
-  // Helper function to generate a hash string from input
-  function hashString(str: string) {
-    let hash = 0;
-    if (str.length === 0) return hash.toString();
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i);
-      hash = (hash << 5) - hash + char;
-      hash = hash & hash; // Convert to 32bit integer
-    }
-    return hash.toString();
-  }
 </script>
 
 {#if loaded}
   {#key resetKey}
     <InnerForm
+      bind:form
+      bind:formState
       {dataSource}
       {size}
       {disabled}
@@ -142,6 +136,8 @@
       {disableSchemaValidation}
       {editAutoColumns}
       {currentStep}
+      on:change
+      on:reset
     >
       <slot />
     </InnerForm>