@samline/forms 1.0.2 → 2.0.0

package/dist/svelte/index.cjs

@@ -1,760 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/svelte/index.ts
-var svelte_exports = {};
-__export(svelte_exports, {
-  createFormStore: () => createFormStore,
-  formAction: () => formAction
-});
-module.exports = __toCommonJS(svelte_exports);
-
-// src/svelte/form-store.ts
-var import_store = require("svelte/store");
-
-// src/core/serialize.ts
-var isEmptyFile = (value) => value instanceof File && value.size === 0 && value.name === "";
-var appendValue = (data, key, value) => {
-  const current = data[key];
-  if (current === void 0) {
-    data[key] = value;
-    return;
-  }
-  if (Array.isArray(current)) {
-    current.push(value);
-    return;
-  }
-  data[key] = [current, value];
-};
-var parseFormData = (formElement) => {
-  const rawFormData = new FormData(formElement);
-  const formData = new FormData();
-  const data = {};
-  rawFormData.forEach((value, key) => {
-    if (isEmptyFile(value)) {
-      return;
-    }
-    formData.append(key, value);
-    appendValue(data, key, value);
-  });
-  return { data, formData };
-};
-
-// src/core/state.ts
-var createEmptyFormState = () => ({
-  values: {},
-  errors: {},
-  filledFields: [],
-  isValid: true,
-  isValidated: false,
-  autoSubmit: false,
-  submitCount: 0
-});
-
-// src/core/validation.ts
-var resolveRule = (rule) => {
-  if (rule === void 0) {
-    return { value: void 0, message: void 0 };
-  }
-  if (typeof rule === "object" && rule !== null && "value" in rule) {
-    return { value: rule.value, message: rule.message };
-  }
-  return { value: rule, message: void 0 };
-};
-var hasValue = (value) => {
-  if (Array.isArray(value)) {
-    return value.length > 0;
-  }
-  return typeof value === "string" ? value.trim().length > 0 : value !== void 0;
-};
-var getValueLength = (value) => {
-  if (Array.isArray(value)) {
-    return value.length;
-  }
-  if (typeof value === "string") {
-    return value.length;
-  }
-  return 0;
-};
-var toPatternTarget = (value) => {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (Array.isArray(value)) {
-    return value.map((entry) => typeof entry === "string" ? entry : entry.name).join(",");
-  }
-  return "";
-};
-var validateFieldValue = (field, value, rules, values) => {
-  const errors = [];
-  const context = { field, value, values };
-  const required = resolveRule(rules.required);
-  const minLength = resolveRule(rules.minLength);
-  const maxLength = resolveRule(rules.maxLength);
-  const pattern = resolveRule(rules.pattern);
-  if (required.value && !hasValue(value)) {
-    errors.push(required.message ?? "This field is required.");
-  }
-  if (minLength.value !== void 0 && getValueLength(value) < minLength.value) {
-    errors.push(minLength.message ?? `Minimum length is ${minLength.value}.`);
-  }
-  if (maxLength.value !== void 0 && getValueLength(value) > maxLength.value) {
-    errors.push(maxLength.message ?? `Maximum length is ${maxLength.value}.`);
-  }
-  if (pattern.value && hasValue(value) && !pattern.value.test(toPatternTarget(value))) {
-    errors.push(pattern.message ?? "Value does not match the required pattern.");
-  }
-  const customValidators = rules.validate ? Array.isArray(rules.validate) ? rules.validate : [rules.validate] : [];
-  for (const validator of customValidators) {
-    const result = validator(context);
-    if (typeof result === "string" && result.length > 0) {
-      errors.push(result);
-    }
-    if (result === false) {
-      errors.push("Validation failed.");
-    }
-  }
-  return errors;
-};
-
-// src/internal/dom.ts
-var isFormFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
-var resolveFormElement = (target) => {
-  if (!target) {
-    return null;
-  }
-  if (target instanceof HTMLFormElement) {
-    return target;
-  }
-  if (typeof target === "string") {
-    const element = document.getElementById(target);
-    return element instanceof HTMLFormElement ? element : null;
-  }
-  if ("current" in target) {
-    return target.current instanceof HTMLFormElement ? target.current : null;
-  }
-  return null;
-};
-var getNamedFields = (form) => Array.from(form.querySelectorAll("input[name], select[name], textarea[name]")).filter(
-  isFormFieldElement
-);
-var queryNamedFields = (form, name) => getNamedFields(form).filter((field) => field.name === name);
-var isFieldFilled = (field) => {
-  if (field instanceof HTMLInputElement) {
-    if (field.type === "checkbox" || field.type === "radio") {
-      return field.checked;
-    }
-    if (field.type === "file") {
-      return Boolean(field.files && field.files.length > 0);
-    }
-    return field.value.trim() !== "";
-  }
-  return field.value !== "";
-};
-var applyBooleanAttribute = (field, attribute, enabled) => {
-  if (enabled) {
-    field.setAttribute(attribute, "");
-    return;
-  }
-  field.removeAttribute(attribute);
-};
-var readFieldValue = (fields) => {
-  if (fields.length === 0) {
-    return void 0;
-  }
-  const firstField = fields[0];
-  if (!firstField) {
-    return void 0;
-  }
-  if (firstField instanceof HTMLSelectElement || firstField instanceof HTMLTextAreaElement) {
-    return firstField.value;
-  }
-  if (firstField.type === "radio") {
-    const checked = fields.find(
-      (field) => field instanceof HTMLInputElement && field.checked
-    );
-    return checked?.value ?? "";
-  }
-  if (firstField.type === "checkbox") {
-    const values = fields.filter((field) => field instanceof HTMLInputElement && field.checked).map((field) => field.value);
-    return values.length > 1 ? values : values[0] ?? "";
-  }
-  if (firstField.type === "file") {
-    return firstField.files ? Array.from(firstField.files) : [];
-  }
-  return firstField.value;
-};
-var writeFieldValue = (fields, value) => {
-  const normalizedArray = Array.isArray(value) ? value.map((item) => String(item)) : null;
-  const normalizedValue = value === void 0 || value === null ? "" : String(value);
-  for (const field of fields) {
-    if (field instanceof HTMLInputElement) {
-      if (field.type === "checkbox") {
-        field.checked = normalizedArray ? normalizedArray.includes(field.value) : normalizedValue === field.value;
-        continue;
-      }
-      if (field.type === "radio") {
-        field.checked = field.value === normalizedValue;
-        continue;
-      }
-      if (field.type === "file") {
-        if (Array.isArray(value) && value.length === 0) {
-          field.value = "";
-        }
-        continue;
-      }
-      field.value = normalizedValue;
-      continue;
-    }
-    field.value = normalizedValue;
-  }
-};
-var clearAttributes = (form, attributes) => {
-  for (const attribute of attributes) {
-    form.querySelectorAll(`[${attribute}]`).forEach((element) => {
-      element.removeAttribute(attribute);
-    });
-  }
-};
-var submitForm = (form) => {
-  if (typeof form.requestSubmit === "function") {
-    form.requestSubmit();
-    return;
-  }
-  const submitButton = form.querySelector(
-    'button[type="submit"], input[type="submit"]'
-  );
-  if (submitButton) {
-    submitButton.click();
-    return;
-  }
-  form.submit();
-};
-
-// src/internal/controller.ts
-var DEFAULT_ATTRIBUTES = {
-  filled: "css-filled",
-  error: "css-error"
-};
-var DEFAULT_OPTIONS = {
-  autoValidate: true,
-  clearErrorsOnSubmit: true
-};
-var mergeErrors = (left, right) => {
-  const merged = { ...left };
-  for (const [field, messages] of Object.entries(right)) {
-    merged[field] = merged[field] ? [...merged[field], ...messages] : [...messages];
-  }
-  return merged;
-};
-var cloneErrors = (errors) => Object.fromEntries(
-  Object.entries(errors).map(([field, messages]) => [field, [...messages]])
-);
-var createFormController = (target, options = {}) => {
-  const element = resolveFormElement(target);
-  const attributes = { ...DEFAULT_ATTRIBUTES, ...options.attributes };
-  const normalizedOptions = {
-    ...DEFAULT_OPTIONS,
-    ...options,
-    attributes
-  };
-  const validators = normalizedOptions.validators ?? {};
-  const watchedFields = /* @__PURE__ */ new Map();
-  const listeners = [];
-  const subscribers = /* @__PURE__ */ new Set();
-  const submitHandlers = /* @__PURE__ */ new Set();
-  const fieldCache = /* @__PURE__ */ new Map();
-  let manualErrors = {};
-  let validationErrors = {};
-  let isValidated = Boolean(normalizedOptions.autoValidate);
-  let autoSubmitEnabled = false;
-  let autoSubmitDebounce = 0;
-  let submitCount = 0;
-  let autoSubmitTimer = null;
-  let mutationObserver = null;
-  let isDestroyed = false;
-  const notifySubscribers = () => {
-    const state = api.getState();
-    subscribers.forEach((listener) => listener(state));
-  };
-  const addListener = (listenerTarget, type, handler) => {
-    listenerTarget.addEventListener(type, handler);
-    listeners.push({ element: listenerTarget, type, handler });
-  };
-  const clearFieldCache = () => {
-    fieldCache.clear();
-  };
-  const getFieldsByName = (name) => {
-    if (!element) {
-      return [];
-    }
-    if (!fieldCache.has(name)) {
-      fieldCache.set(name, queryNamedFields(element, name));
-    }
-    return fieldCache.get(name) ?? [];
-  };
-  const getTrackedFieldNames = () => {
-    if (!element) {
-      return Object.keys(validators);
-    }
-    const names = new Set(Object.keys(validators));
-    for (const field of getNamedFields(element)) {
-      names.add(field.name);
-    }
-    return Array.from(names);
-  };
-  const getValues = () => {
-    const values = {};
-    for (const name of getTrackedFieldNames()) {
-      values[name] = api.getValue(name);
-    }
-    return values;
-  };
-  const getMergedErrors = () => mergeErrors(validationErrors, manualErrors);
-  const syncVisualState = (names) => {
-    if (!element) {
-      return;
-    }
-    const targetNames = names ?? getTrackedFieldNames();
-    const errors = getMergedErrors();
-    for (const name of targetNames) {
-      const fields = getFieldsByName(name);
-      const hasError = Boolean(errors[name]?.length);
-      for (const field of fields) {
-        applyBooleanAttribute(field, attributes.filled, isFieldFilled(field));
-        applyBooleanAttribute(field, attributes.error, hasError);
-      }
-    }
-  };
-  const validateNames = (names) => {
-    const targetNames = names ?? Object.keys(validators);
-    const values = getValues();
-    const nextValidationErrors = names ? cloneErrors(validationErrors) : {};
-    for (const name of targetNames) {
-      const rules = validators[name];
-      if (!rules) {
-        delete nextValidationErrors[name];
-        continue;
-      }
-      const errors = validateFieldValue(name, values[name], rules, values);
-      if (errors.length > 0) {
-        nextValidationErrors[name] = errors;
-      } else {
-        delete nextValidationErrors[name];
-      }
-    }
-    validationErrors = nextValidationErrors;
-    syncVisualState(names);
-    return {
-      isValid: Object.keys(getMergedErrors()).length === 0,
-      errors: cloneErrors(getMergedErrors())
-    };
-  };
-  const emitFieldWatchers = (name) => {
-    if (!element) {
-      return;
-    }
-    const callbacks = watchedFields.get(name);
-    if (!callbacks || callbacks.size === 0) {
-      return;
-    }
-    const value = api.getValue(name);
-    const state = api.getState();
-    callbacks.forEach((callback) => callback(value, element, state));
-  };
-  const scheduleAutoSubmit = () => {
-    if (!element || !autoSubmitEnabled) {
-      return;
-    }
-    if (autoSubmitTimer) {
-      clearTimeout(autoSubmitTimer);
-    }
-    if (autoSubmitDebounce > 0) {
-      autoSubmitTimer = setTimeout(() => submitForm(element), autoSubmitDebounce);
-      return;
-    }
-    submitForm(element);
-  };
-  const handleDelegatedEvent = (event) => {
-    const target2 = event.target;
-    if (!(target2 instanceof Element) || !isFieldElement(target2)) {
-      return;
-    }
-    const name = target2.name;
-    if (!name) {
-      return;
-    }
-    clearFieldCache();
-    syncVisualState([name]);
-    if (isValidated && validators[name]) {
-      validateNames([name]);
-    }
-    emitFieldWatchers(name);
-    notifySubscribers();
-    scheduleAutoSubmit();
-  };
-  const handleSubmitEvent = (event) => {
-    if (!element || isDestroyed) {
-      return;
-    }
-    if (normalizedOptions.clearErrorsOnSubmit) {
-      manualErrors = {};
-    }
-    const validation = api.validate();
-    const handlers = Array.from(submitHandlers);
-    const shouldPrevent = validation.isValid ? handlers.some((handler) => handler.preventDefault) : true;
-    if (shouldPrevent) {
-      event.preventDefault();
-    }
-    submitCount += 1;
-    notifySubscribers();
-    if (!validation.isValid) {
-      return;
-    }
-    const { data, formData } = api.getData();
-    const state = api.getState();
-    handlers.forEach((handler) => handler.callback(element, data, formData, state));
-  };
-  const startMutationObserver = () => {
-    if (!element || typeof MutationObserver === "undefined") {
-      return;
-    }
-    mutationObserver = new MutationObserver(() => {
-      clearFieldCache();
-      if (isValidated) {
-        syncVisualState();
-        validateNames();
-      }
-      notifySubscribers();
-    });
-    mutationObserver.observe(element, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["name", "type"]
-    });
-  };
-  const isFieldElement = (value) => value instanceof HTMLInputElement || value instanceof HTMLSelectElement || value instanceof HTMLTextAreaElement;
-  const api = {
-    element,
-    f: element,
-    options: normalizedOptions,
-    onSubmit(callback, preventDefault = true) {
-      submitHandlers.add({ callback, preventDefault });
-      return api;
-    },
-    watch(field, callback) {
-      api.observe(field, callback);
-      return api;
-    },
-    observe(field, callback) {
-      const callbacks = watchedFields.get(field) ?? /* @__PURE__ */ new Set();
-      callbacks.add(callback);
-      watchedFields.set(field, callbacks);
-      if (element) {
-        callback(api.getValue(field), element, api.getState());
-      }
-      return () => {
-        const currentCallbacks = watchedFields.get(field);
-        currentCallbacks?.delete(callback);
-        if (currentCallbacks && currentCallbacks.size === 0) {
-          watchedFields.delete(field);
-        }
-      };
-    },
-    unwatch(field, callback) {
-      if (!field) {
-        watchedFields.clear();
-        return api;
-      }
-      if (!callback) {
-        watchedFields.delete(field);
-        return api;
-      }
-      const callbacks = watchedFields.get(field);
-      callbacks?.delete(callback);
-      if (callbacks && callbacks.size === 0) {
-        watchedFields.delete(field);
-      }
-      return api;
-    },
-    subscribe(listener) {
-      subscribers.add(listener);
-      listener(api.getState());
-      return () => {
-        subscribers.delete(listener);
-      };
-    },
-    prefill(fieldName) {
-      if (!element) {
-        return api;
-      }
-      const queryParams = new URLSearchParams(window.location.search);
-      queryParams.forEach((value, key) => {
-        if (fieldName && fieldName !== key) {
-          return;
-        }
-        api.setValue(key, value);
-      });
-      return api;
-    },
-    append({ tag, content, class: className, atStart = false }) {
-      if (!element) {
-        return null;
-      }
-      clearFieldCache();
-      if (className) {
-        const classSelector = className.trim().split(/\s+/)[0];
-        element.querySelector(`.${classSelector}`)?.remove();
-      }
-      const node = document.createElement(tag);
-      if (className) {
-        node.className = className;
-      }
-      node.innerHTML = content;
-      if (atStart && element.firstChild) {
-        element.insertBefore(node, element.firstChild);
-      } else {
-        element.appendChild(node);
-      }
-      return node;
-    },
-    setErrors(fields) {
-      if (Array.isArray(fields)) {
-        manualErrors = {
-          ...manualErrors,
-          ...Object.fromEntries(fields.map((field) => [field, ["Invalid value."]]))
-        };
-      } else {
-        manualErrors = {
-          ...manualErrors,
-          ...cloneErrors(fields)
-        };
-      }
-      syncVisualState(Array.isArray(fields) ? fields : Object.keys(fields));
-      notifySubscribers();
-      return api;
-    },
-    clearErrors(fields) {
-      if (!fields) {
-        manualErrors = {};
-        syncVisualState();
-        notifySubscribers();
-        return api;
-      }
-      for (const field of fields) {
-        delete manualErrors[field];
-      }
-      syncVisualState(fields);
-      notifySubscribers();
-      return api;
-    },
-    setValue(name, value) {
-      const fields = getFieldsByName(name);
-      if (fields.length === 0) {
-        return api;
-      }
-      writeFieldValue(fields, value);
-      const firstField = fields[0];
-      if (!firstField) {
-        return api;
-      }
-      const eventType = firstField instanceof HTMLSelectElement || firstField instanceof HTMLInputElement && (firstField.type === "checkbox" || firstField.type === "radio") ? "change" : "input";
-      firstField.dispatchEvent(new Event(eventType, { bubbles: true }));
-      return api;
-    },
-    validate(fields) {
-      isValidated = true;
-      syncVisualState(fields);
-      return validateNames(fields);
-    },
-    revalidate(fields) {
-      return api.validate(fields);
-    },
-    reset() {
-      if (!element) {
-        return api;
-      }
-      element.reset();
-      manualErrors = {};
-      validationErrors = {};
-      clearAttributes(element, [attributes.error, attributes.filled]);
-      if (isValidated) {
-        syncVisualState();
-      }
-      notifySubscribers();
-      return api;
-    },
-    autoSubmit(nextOptions = true) {
-      autoSubmitEnabled = nextOptions !== false;
-      autoSubmitDebounce = typeof nextOptions === "object" && nextOptions ? nextOptions.debounce ?? 0 : 0;
-      notifySubscribers();
-      return api;
-    },
-    disableAutoSubmit() {
-      autoSubmitEnabled = false;
-      if (autoSubmitTimer) {
-        clearTimeout(autoSubmitTimer);
-        autoSubmitTimer = null;
-      }
-      notifySubscribers();
-      return api;
-    },
-    getValue(name) {
-      return readFieldValue(getFieldsByName(name));
-    },
-    getField(name) {
-      const fields = getFieldsByName(name);
-      if (fields.length === 0) {
-        return null;
-      }
-      const [firstField] = fields;
-      if (!firstField) {
-        return null;
-      }
-      return fields.length === 1 ? firstField : fields;
-    },
-    getData() {
-      if (!element) {
-        return { data: {}, formData: new FormData() };
-      }
-      return parseFormData(element);
-    },
-    getState() {
-      const values = getValues();
-      const errors = cloneErrors(getMergedErrors());
-      const filledFields = getTrackedFieldNames().filter((name) => {
-        const value = values[name];
-        return Array.isArray(value) ? value.length > 0 : typeof value === "string" ? value.trim().length > 0 : value !== void 0;
-      });
-      return {
-        ...createEmptyFormState(),
-        values,
-        errors,
-        filledFields,
-        isValid: Object.keys(errors).length === 0,
-        isValidated,
-        autoSubmit: autoSubmitEnabled,
-        submitCount
-      };
-    },
-    destroy() {
-      if (isDestroyed) {
-        return;
-      }
-      isDestroyed = true;
-      for (const listener of listeners) {
-        listener.element.removeEventListener(listener.type, listener.handler);
-      }
-      listeners.length = 0;
-      if (autoSubmitTimer) {
-        clearTimeout(autoSubmitTimer);
-        autoSubmitTimer = null;
-      }
-      mutationObserver?.disconnect();
-      mutationObserver = null;
-      watchedFields.clear();
-      subscribers.clear();
-      submitHandlers.clear();
-      clearFieldCache();
-      manualErrors = {};
-      validationErrors = {};
-    }
-  };
-  if (element) {
-    addListener(element, "input", handleDelegatedEvent);
-    addListener(element, "change", handleDelegatedEvent);
-    addListener(element, "submit", handleSubmitEvent);
-    startMutationObserver();
-  }
-  if (normalizedOptions.autoSubmit) {
-    const autoSubmitOption = normalizedOptions.autoSubmit;
-    api.autoSubmit(autoSubmitOption);
-  }
-  if (isValidated) {
-    syncVisualState();
-    validateNames();
-  }
-  return api;
-};
-
-// src/svelte/form-store.ts
-var createFormStore = (target, options = {}) => {
-  const state = (0, import_store.writable)(createEmptyFormState());
-  const ready = (0, import_store.writable)(false);
-  let controller = null;
-  let unsubscribe = null;
-  const mount = () => {
-    if (controller) {
-      return;
-    }
-    const element = resolveFormElement(target);
-    if (!element) {
-      return;
-    }
-    controller = createFormController(element, options);
-    state.set(controller.getState());
-    ready.set(true);
-    unsubscribe = controller.subscribe((nextState) => {
-      state.set(nextState);
-    });
-  };
-  const destroy = () => {
-    unsubscribe?.();
-    unsubscribe = null;
-    controller?.destroy();
-    controller = null;
-    ready.set(false);
-    state.set(createEmptyFormState());
-  };
-  mount();
-  return {
-    state: { subscribe: state.subscribe },
-    ready: { subscribe: ready.subscribe },
-    getController: () => controller,
-    mount,
-    destroy
-  };
-};
-var formAction = (node, options = {}) => {
-  let controller = createFormController(node, options);
-  let unsubscribe = controller.subscribe((state) => {
-    options.onStateChange?.(state);
-  });
-  return {
-    update(nextOptions) {
-      unsubscribe();
-      controller.destroy();
-      controller = createFormController(node, nextOptions);
-      unsubscribe = controller.subscribe((state) => {
-        nextOptions.onStateChange?.(state);
-      });
-    },
-    destroy() {
-      unsubscribe();
-      controller.destroy();
-    }
-  };
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createFormStore,
-  formAction
-});
-//# sourceMappingURL=index.cjs.map