@formkit/inertia/dist/index.mjs

FormKit + Inertia = ❤️

// src/inertia.ts
import { router } from "@inertiajs/vue3";
import { toRefs } from "vue";

// src/eventManager.ts
var createEventManager = () => {
  const events = {};
  const on = (name, cb) => {
    if (typeof events[name] === "undefined")
      events[name] = [];
    events[name]?.push(cb);
  };
  const run = (name, ...args) => {
    let promiseResolver = Promise.resolve();
    for (const event of events[name] || []) {
      const res = event(...args);
      if (name === "before" && typeof res === "boolean")
        return res;
      else if (name === "success" || name === "finish") {
        if (res instanceof Promise) {
          promiseResolver = res;
        } else {
          promiseResolver = Promise.resolve(res);
        }
      }
    }
    if (name === "success" || name === "finish")
      return promiseResolver;
  };
  return {
    events,
    on,
    run
  };
};

// src/addons/formkit.ts
import { reactive, watchEffect } from "vue";
import { createMessage } from "@formkit/core";
var formkit_default = (initialFields, formLevelErrorName) => {
  const state = reactive({
    node: null,
    dirty: false,
    errors: false,
    valid: false
  });
  return {
    state,
    addon: (on) => {
      on("start", (_, node) => {
        node.store.set(createMessage({
          key: "loading",
          visible: false,
          value: true
        }));
        if (node.props.submitBehavior !== "live")
          node.props.disabled = true;
      });
      on("error", (errors, node) => {
        const _formLevelErrorName = formLevelErrorName ? formLevelErrorName : node.name;
        let formErrorMessages;
        if (_formLevelErrorName in errors) {
          formErrorMessages = errors[_formLevelErrorName];
          delete errors[_formLevelErrorName];
        }
        node.setErrors(_formLevelErrorName, errors);
      });
      on("finish", (_, node) => {
        node.store.remove("loading");
        if (node.props.submitBehavior !== "live")
          node.props.disabled = false;
      });
    },
    plugin: (node) => {
      if (node.props.type !== "form")
        return;
      state.node = node;
      if (initialFields)
        node.input(initialFields);
      node.on("created", () => {
        watchEffect(() => {
          state.dirty = node.context.state.dirty;
          state.valid = node.context.state.valid;
          state.errors = node.context.state.errors;
        });
      });
      return false;
    }
  };
};

// src/addons/state.ts
import { reactive as reactive2 } from "vue";
var state_default = (recentlySuccessfulTimeoutTime = 2e3) => {
  let _recentlySuccessfulTimeoutId = void 0;
  const state = reactive2({
    processing: false,
    progress: 0,
    recentlySuccessful: false,
    wasSuccessful: false
  });
  return {
    state,
    addon: (on) => {
      on("before", () => {
        state.processing = false;
        state.progress = 0;
        state.recentlySuccessful = false;
        state.wasSuccessful = false;
        clearInterval(_recentlySuccessfulTimeoutId);
      });
      on("start", () => {
        state.processing = true;
      });
      on("progress", (progress) => {
        state.progress = progress?.percentage || 0;
      });
      on("success", () => {
        state.recentlySuccessful = true;
        state.wasSuccessful = true;
        _recentlySuccessfulTimeoutId = setTimeout(() => {
          state.recentlySuccessful = false;
        }, recentlySuccessfulTimeoutTime);
      });
      on("finish", () => {
        state.processing = false;
        state.progress = 0;
      });
    }
  };
};

// src/inertia.ts
var useForm = (initialFields, options) => {
  const eventManager = createEventManager();
  const { state: addonState, addon: stateAddon } = state_default(options?.recentlySuccessfulTimeoutTime);
  const { state: formkitState, addon: formkitAddon, plugin } = formkit_default(initialFields, options?.formLevelErrorName);
  const addon = (addons) => {
    if (Array.isArray(addons))
      addons.forEach((cb) => cb(eventManager.on));
    else
      addons(eventManager.on);
  };
  addon(stateAddon);
  addon(formkitAddon);
  let _cancelToken = void 0;
  addon((on) => {
    on("cancelToken", (token) => {
      _cancelToken = token;
    });
    on("finish", () => {
      _cancelToken = void 0;
    });
  });
  const submit = (method, url, options2) => (data, node) => {
    const callbackEvents = Object.keys(eventManager.events).map((name) => ({
      [`on${name.charAt(0).toUpperCase() + name.slice(1)}`]: (arg) => {
        if (name === "cancel")
          return eventManager.run(name, arg);
        return eventManager.run(name, arg, node);
      }
    })).reduce((p, c) => ({ ...p, ...c }), {});
    if (method === "delete") {
      router.delete(url, {
        ...callbackEvents,
        ...options2,
        data
      });
    } else {
      router[method](url, data, {
        ...callbackEvents,
        ...options2
      });
    }
  };
  return {
    submit,
    get: (url, options2) => submit("get", url, options2),
    post: (url, options2) => submit("post", url, options2),
    put: (url, options2) => submit("put", url, options2),
    patch: (url, options2) => submit("patch", url, options2),
    delete: (url, options2) => submit("delete", url, options2),
    cancel: () => {
      if (_cancelToken)
        _cancelToken.cancel();
    },
    ...toRefs(addonState),
    ...toRefs(formkitState),
    on: eventManager.on,
    addon,
    plugin
  };
};
export {
  useForm
};
//# sourceMappingURL=index.mjs.map