@warkypublic/svelix 0.1.46 → 0.2.1

package/dist/components/Former/Former.svelte

@@ -1,427 +1,309 @@
-<script lang="ts">
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  import { untrack } from "svelte";
-  import type { Snippet } from "svelte";
-  import type {
-    FormRequestType,
-    FormerAPICallType,
-    FormerLayout,
-    FormerState,
-    FormerStateAndProps,
-  } from "./types";
-  import FormerButtonArea from "./FormerButtonArea.svelte";
-  import { getUUID } from "@warkypublic/artemis-kit/strings";
-  export interface Props<T = any> {
-    // Called before the GET request is made; can transform the outgoing payload.
-    beforeGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
-    afterGet?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | void;
-    afterSave?: (
-      data: T,
-      state: Partial<FormerState<T>>,
-    ) => Promise<void> | void;
-    beforeSave?: (data: T, state: Partial<FormerState<T>>) => Promise<T> | T;
-    children?: Snippet<[FormerState<T>]>;
-    id?: string;
-    keepOpen?: boolean;
-    layout?: FormerLayout<T>;
-    mounted?: boolean;
-    onAPICall?: FormerAPICallType<T>;
-    onChange?: (value: T, state: Partial<FormerState<T>>) => void;
-    onClose?: (data?: T) => void;
-    onConfirmDelete?: (values?: T) => Promise<boolean>;
-    onError?: (error: Error | string, state: Partial<FormerState<T>>) => void;
-    onOpen?: (data?: T) => void;
-    opened?: boolean;
-    primeData?: T;
-    request?: FormRequestType;
-    uniqueKeyField?: string;
-    values?: T;
-  }
-
-  let {
-    afterGet,
-    afterSave,
-    beforeGet,
-    beforeSave,
-    children,
-    id = getUUID(),
-    keepOpen = $bindable(false),
-    layout,
-    mounted = true,
-    onAPICall,
-    onChange,
-    onClose,
-    onConfirmDelete,
-    onError,
-    onOpen,
-    opened = $bindable(false),
-    primeData,
-    request = $bindable<FormRequestType>("insert"),
-    uniqueKeyField = "id",
-    values = $bindable<any>(undefined),
-  }: Props = $props();
-
-  // Internal state
-  let loading = $state(false);
-  let error = $state<string | undefined>(undefined);
-  let dirty = $state(false);
-  let deleteConfirmed = $state(false);
-
-  // Track initial values for dirty detection
-  let initialValues = $state<any>(undefined);
-
-  // Snapshot initial values once when the form opens.
-  // untrack() prevents values/primeData reads from being tracked — only the
-  // opened transition should trigger re-initialization.
-  $effect(() => {
-    if (!mounted) {
-      return;
-    }
-    if (opened) {
-      untrack(() => {
-        if (initialValues === undefined) {
-          if (values !== undefined) {
-            initialValues = JSON.parse(JSON.stringify(values));
-          } else if (primeData !== undefined) {
-            initialValues = JSON.parse(JSON.stringify(primeData));
-          }
-        }
-      });
-    } else {
-      // Reset when form closes so re-opens start fresh.
-      initialValues = undefined;
-      dirty = false;
-      deleteConfirmed = false;
-      error = undefined;
-    }
-  });
-
-  // Track dirty state
-  $effect(() => {
-    if (!mounted) {
-      return;
-    }
-    if (initialValues !== undefined && values !== undefined) {
-      dirty = JSON.stringify(values) !== JSON.stringify(initialValues);
-    }
-  });
-
-  function getState<K extends keyof FormerStateAndProps>(
-    key: K,
-  ): FormerStateAndProps[K] {
-    const state = getAllState();
-    return state[key];
-  }
-
-  function getAllState(): FormerStateAndProps {
-    return {
-      afterGet,
-      afterSave,
-      beforeGet,
-      beforeSave,
-      deleteConfirmed,
-      dirty,
-      error,
-      getAllState,
-      getState,
-      keepOpen,
-      layout,
-      load,
-      loading,
-      onAPICall,
-      onChange,
-      onClose: handleClose,
-      onConfirmDelete,
-      onError,
-      onOpen,
-      opened,
-      primeData,
-      request,
-      reset,
-      save,
-      setRequest,
-      setState,
-      uniqueKeyField,
-      validate,
-      values,
-    };
-  }
-
-  function setState<K extends keyof FormerStateAndProps>(
-    key: K,
-    value: FormerStateAndProps[K],
-  ) {
-    if (key === "opened") opened = value as boolean;
-    else if (key === "values") values = value as any;
-    else if (key === "request") request = value as FormRequestType;
-    else if (key === "keepOpen") keepOpen = value as boolean;
-    else if (key === "loading") loading = value as boolean;
-    else if (key === "error") error = value as string | undefined;
-    else if (key === "dirty") dirty = value as boolean;
-    else if (key === "deleteConfirmed") deleteConfirmed = value as boolean;
-  }
-
-  function setRequest(r: FormRequestType) {
-    request = r;
-  }
-
-  async function validate(): Promise<boolean> {
-    if (!mounted) {
-      return true;
-    }
-    // With native HTML form validation, check validity
-    const form = document.getElementById(
-      `former_f${id}`,
-    ) as HTMLFormElement | null;
-    if (form) {
-      return form.reportValidity();
-    }
-    return true;
-  }
-
-  async function load(reset?: boolean): Promise<void> {
-    if (!mounted) {
-      return;
-    }
-    try {
-      loading = true;
-      error = undefined;
-
-      // Base data for "load" comes from existing values or primeData.
-      // If `beforeGet` is provided, it can normalize/augment this data even
-      // when no API call is configured.
-      let inData =
-        values !== undefined
-          ? { ...values }
-          : primeData !== undefined
-            ? { ...primeData }
-            : values;
-      if (beforeGet) {
-        const modified = await beforeGet(inData, getAllState());
-        if (modified !== undefined) inData = modified;
-      }
-      const keyValue =
-        (inData as any)?.[uniqueKeyField] ??
-        (primeData as any)?.[uniqueKeyField];
-      if (onAPICall && keyValue !== undefined) {
-        let data = await onAPICall(
-          "read",
-          request ?? "insert",
-          inData,
-          keyValue,
-        );
-        if (afterGet) {
-          const result = await afterGet(data, getAllState());
-          if (result !== undefined) data = result;
-        }
-        values = data;
-        onChange?.(data, getAllState());
-      } else if (beforeGet) {
-        // No API call: still apply `beforeGet` output to the form values.
-        values = inData;
-        onChange?.(inData, getAllState());
-      }
-      if (reset) {
-        initialValues = values ? JSON.parse(JSON.stringify(values)) : undefined;
-        dirty = false;
-      }
-    } catch (e) {
-      const msg = (e as Error)?.message ?? String(e);
-      error = msg;
-      onError?.(msg, getAllState());
-    } finally {
-      loading = false;
-    }
-  }
-
-  async function save(): Promise<any> {
-    if (!mounted) {
-      return undefined;
-    }
-    try {
-      loading = true;
-      error = undefined;
-
-      let data = values ? { ...values } : {};
-
-      if (beforeSave) {
-        const modified = await beforeSave(data, getAllState());
-        if (modified !== undefined) data = modified;
-      }
-
-      if (request === "delete" && !deleteConfirmed) {
-        const confirmed = onConfirmDelete
-          ? await onConfirmDelete(data)
-          : confirm("Are you sure you want to delete this item?");
-        if (!confirmed) {
-          loading = false;
-          return undefined;
-        }
-        deleteConfirmed = true;
-      }
-
-      if (onAPICall) {
-        const keyValue =
-          (values as any)?.[uniqueKeyField] ??
-          (primeData as any)?.[uniqueKeyField];
-        const savedData = await onAPICall(
-          "mutate",
-          request ?? "insert",
-          data,
-          keyValue,
-        );
-        const newData = { ...data, ...savedData };
-
-        if (afterSave) {
-          await afterSave(newData, getAllState());
-        }
-
-        if (keepOpen) {
-          const clearedData = { ...newData };
-          delete (clearedData as any)[uniqueKeyField];
-          values = clearedData;
-          initialValues = JSON.parse(JSON.stringify(clearedData));
-          dirty = false;
-          deleteConfirmed = false;
-          onChange?.(clearedData, getAllState());
-          return newData;
-        }
-
-        values = newData;
-        initialValues = JSON.parse(JSON.stringify(newData));
-        dirty = false;
-        onChange?.(newData, getAllState());
-        handleClose(newData);
-        return newData;
-      }
-
-      if (keepOpen) {
-        const clearedData = { ...data };
-        delete (clearedData as any)[uniqueKeyField];
-        values = clearedData;
-        initialValues = JSON.parse(JSON.stringify(clearedData));
-        dirty = false;
-        onChange?.(clearedData, getAllState());
-        return data;
-      }
-
-      values = data;
-      initialValues = JSON.parse(JSON.stringify(data));
-      dirty = false;
-      onChange?.(data, getAllState());
-      handleClose(data);
-      return data;
-    } catch (e) {
-      const msg = (e as Error)?.message ?? String(e);
-      error = msg;
-      onError?.(msg, getAllState());
-    } finally {
-      loading = false;
-    }
-    return undefined;
-  }
-
-  async function reset(): Promise<void> {
-    if (request !== "insert") {
-      await load(true);
-    } else {
-      values = initialValues
-        ? JSON.parse(JSON.stringify(initialValues))
-        : undefined;
-      dirty = false;
-    }
-  }
-
-  function handleClose(data?: any) {
-    if (dirty) {
-      if (
-        !confirm("You have unsaved changes. Are you sure you want to close?")
-      ) {
-        return;
-      }
-    }
-    if (onClose) {
-      onClose(data);
-    } else {
-      opened = false;
-    }
-  }
-
-  // Load data when opened changes (for non-insert modes).
-  // untrack() prevents reactive reads inside load() (values, onAPICall, etc.)
-  // from being tracked by this effect, which would cause a re-fetch every time
-  // load() writes back to values after a successful GET.
-  $effect(() => {
-    if (mounted && opened && request && request !== "insert") {
-      untrack(() => load(true));
-    }
-  });
-
-  const formerState: FormerState = {
-    get deleteConfirmed() {
-      return deleteConfirmed;
-    },
-    get dirty() {
-      return dirty;
-    },
-    get error() {
-      return error;
-    },
-    getAllState,
-    getState,
-    load,
-    get loading() {
-      return loading;
-    },
-    get opened() {
-      return opened;
-    },
-    get primeData() {
-      return primeData;
-    },
-    get request() {
-      return request;
-    },
-    reset,
-    save,
-    setRequest,
-    setState,
-    validate,
-    get values() {
-      return values;
-    },
-  };
-
-  // Exposed methods for bind:this
-  export async function show(): Promise<void> {
-    opened = true;
-    onOpen?.(values);
-  }
-
-  export async function close(): Promise<void> {
-    handleClose(values);
-  }
-
-  export async function saveForm(): Promise<any> {
-    return save();
-  }
-
-  export async function validateForm(): Promise<boolean> {
-    return validate();
-  }
-
-  export function resetForm(): void {
-    reset();
-  }
-
-  export function getValue(): any {
-    return values;
-  }
-
-  export function setValue(val: any): void {
-    values = val;
-    onChange?.(val, getAllState());
-  }
+<script lang="ts">/* eslint-disable @typescript-eslint/no-explicit-any */
+import { untrack } from "svelte";
+import FormerButtonArea from "./FormerButtonArea.svelte";
+import { getUUID } from "@warkypublic/artemis-kit/strings";
+let { afterGet, afterSave, beforeGet, beforeSave, children, id = getUUID(), keepOpen = $bindable(false), layout, mounted = true, onAPICall, onChange, onClose, onConfirmDelete, onError, onOpen, opened = $bindable(false), primeData, request = $bindable("insert"), uniqueKeyField = "id", values = $bindable(undefined) } = $props();
+// Internal state
+let loading = $state(false);
+let error = $state(undefined);
+let dirty = $state(false);
+let deleteConfirmed = $state(false);
+// Track initial values for dirty detection
+let initialValues = $state(undefined);
+// Snapshot initial values once when the form opens.
+// untrack() prevents values/primeData reads from being tracked — only the
+// opened transition should trigger re-initialization.
+$effect(() => {
+	if (!mounted) {
+		return;
+	}
+	if (opened) {
+		untrack(() => {
+			if (initialValues === undefined) {
+				if (values !== undefined) {
+					initialValues = JSON.parse(JSON.stringify(values));
+				} else if (primeData !== undefined) {
+					initialValues = JSON.parse(JSON.stringify(primeData));
+				}
+			}
+		});
+	} else {
+		// Reset when form closes so re-opens start fresh.
+		initialValues = undefined;
+		dirty = false;
+		deleteConfirmed = false;
+		error = undefined;
+	}
+});
+// Track dirty state
+$effect(() => {
+	if (!mounted) {
+		return;
+	}
+	if (initialValues !== undefined && values !== undefined) {
+		dirty = JSON.stringify(values) !== JSON.stringify(initialValues);
+	}
+});
+function getState(key) {
+	const state = getAllState();
+	return state[key];
+}
+function getAllState() {
+	return {
+		afterGet,
+		afterSave,
+		beforeGet,
+		beforeSave,
+		deleteConfirmed,
+		dirty,
+		error,
+		getAllState,
+		getState,
+		keepOpen,
+		layout,
+		load,
+		loading,
+		onAPICall,
+		onChange,
+		onClose: handleClose,
+		onConfirmDelete,
+		onError,
+		onOpen,
+		opened,
+		primeData,
+		request,
+		reset,
+		save,
+		setRequest,
+		setState,
+		uniqueKeyField,
+		validate,
+		values
+	};
+}
+function setState(key, value) {
+	if (key === "opened") opened = value;
+	else if (key === "values") values = value;
+	else if (key === "request") request = value;
+	else if (key === "keepOpen") keepOpen = value;
+	else if (key === "loading") loading = value;
+	else if (key === "error") error = value;
+	else if (key === "dirty") dirty = value;
+	else if (key === "deleteConfirmed") deleteConfirmed = value;
+}
+function setRequest(r) {
+	request = r;
+}
+async function validate() {
+	if (!mounted) {
+		return true;
+	}
+	// With native HTML form validation, check validity
+	const form = document.getElementById(`former_f${id}`);
+	if (form) {
+		return form.reportValidity();
+	}
+	return true;
+}
+async function load(reset) {
+	if (!mounted) {
+		return;
+	}
+	try {
+		loading = true;
+		error = undefined;
+		// Base data for "load" comes from existing values or primeData.
+		// If `beforeGet` is provided, it can normalize/augment this data even
+		// when no API call is configured.
+		let inData = values !== undefined ? { ...values } : primeData !== undefined ? { ...primeData } : values;
+		if (beforeGet) {
+			const modified = await beforeGet(inData, getAllState());
+			if (modified !== undefined) inData = modified;
+		}
+		const keyValue = inData?.[uniqueKeyField] ?? primeData?.[uniqueKeyField];
+		if (onAPICall && keyValue !== undefined) {
+			let data = await onAPICall("read", request ?? "insert", inData, keyValue);
+			if (afterGet) {
+				const result = await afterGet(data, getAllState());
+				if (result !== undefined) data = result;
+			}
+			values = data;
+			onChange?.(data, getAllState());
+		} else if (beforeGet) {
+			// No API call: still apply `beforeGet` output to the form values.
+			values = inData;
+			onChange?.(inData, getAllState());
+		}
+		if (reset) {
+			initialValues = values ? JSON.parse(JSON.stringify(values)) : undefined;
+			dirty = false;
+		}
+	} catch (e) {
+		const msg = e?.message ?? String(e);
+		error = msg;
+		onError?.(msg, getAllState());
+	} finally {
+		loading = false;
+	}
+}
+async function save() {
+	if (!mounted) {
+		return undefined;
+	}
+	try {
+		loading = true;
+		error = undefined;
+		let data = values ? { ...values } : {};
+		if (beforeSave) {
+			const modified = await beforeSave(data, getAllState());
+			if (modified !== undefined) data = modified;
+		}
+		if (request === "delete" && !deleteConfirmed) {
+			const confirmed = onConfirmDelete ? await onConfirmDelete(data) : confirm("Are you sure you want to delete this item?");
+			if (!confirmed) {
+				loading = false;
+				return undefined;
+			}
+			deleteConfirmed = true;
+		}
+		if (onAPICall) {
+			const keyValue = values?.[uniqueKeyField] ?? primeData?.[uniqueKeyField];
+			const savedData = await onAPICall("mutate", request ?? "insert", data, keyValue);
+			const newData = {
+				...data,
+				...savedData
+			};
+			if (afterSave) {
+				await afterSave(newData, getAllState());
+			}
+			if (keepOpen) {
+				const clearedData = { ...newData };
+				delete clearedData[uniqueKeyField];
+				values = clearedData;
+				initialValues = JSON.parse(JSON.stringify(clearedData));
+				dirty = false;
+				deleteConfirmed = false;
+				onChange?.(clearedData, getAllState());
+				return newData;
+			}
+			values = newData;
+			initialValues = JSON.parse(JSON.stringify(newData));
+			dirty = false;
+			onChange?.(newData, getAllState());
+			handleClose(newData);
+			return newData;
+		}
+		if (keepOpen) {
+			const clearedData = { ...data };
+			delete clearedData[uniqueKeyField];
+			values = clearedData;
+			initialValues = JSON.parse(JSON.stringify(clearedData));
+			dirty = false;
+			onChange?.(clearedData, getAllState());
+			return data;
+		}
+		values = data;
+		initialValues = JSON.parse(JSON.stringify(data));
+		dirty = false;
+		onChange?.(data, getAllState());
+		handleClose(data);
+		return data;
+	} catch (e) {
+		const msg = e?.message ?? String(e);
+		error = msg;
+		onError?.(msg, getAllState());
+	} finally {
+		loading = false;
+	}
+	return undefined;
+}
+async function reset() {
+	if (request !== "insert") {
+		await load(true);
+	} else {
+		values = initialValues ? JSON.parse(JSON.stringify(initialValues)) : undefined;
+		dirty = false;
+	}
+}
+function handleClose(data) {
+	if (dirty) {
+		if (!confirm("You have unsaved changes. Are you sure you want to close?")) {
+			return;
+		}
+	}
+	if (onClose) {
+		onClose(data);
+	} else {
+		opened = false;
+	}
+}
+// Load data when opened changes (for non-insert modes).
+// untrack() prevents reactive reads inside load() (values, onAPICall, etc.)
+// from being tracked by this effect, which would cause a re-fetch every time
+// load() writes back to values after a successful GET.
+$effect(() => {
+	if (mounted && opened && request && request !== "insert") {
+		untrack(() => load(true));
+	}
+});
+const formerState = {
+	get deleteConfirmed() {
+		return deleteConfirmed;
+	},
+	get dirty() {
+		return dirty;
+	},
+	get error() {
+		return error;
+	},
+	getAllState,
+	getState,
+	load,
+	get loading() {
+		return loading;
+	},
+	get opened() {
+		return opened;
+	},
+	get primeData() {
+		return primeData;
+	},
+	get request() {
+		return request;
+	},
+	reset,
+	save,
+	setRequest,
+	setState,
+	validate,
+	get values() {
+		return values;
+	}
+};
+// Exposed methods for bind:this
+export async function show() {
+	opened = true;
+	onOpen?.(values);
+}
+export async function close() {
+	handleClose(values);
+}
+export async function saveForm() {
+	return save();
+}
+export async function validateForm() {
+	return validate();
+}
+export function resetForm() {
+	reset();
+}
+export function getValue() {
+	return values;
+}
+export function setValue(val) {
+	values = val;
+	onChange?.(val, getAllState());
+}
 </script>
 
 {#if mounted}