@inertiajs/vue3 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/index.js

@@ -9,8 +9,8 @@ import {
   router as router4
 } from "@inertiajs/core";
 import {
-  computed as computed2,
-  defineComponent as defineComponent2,
+  computed,
+  defineComponent,
   h,
   markRaw,
   reactive as reactive2,
@@ -19,8 +19,8 @@ import {
 } from "vue";
 
 // src/layoutProps.ts
-import { createLayoutPropsStore, mergeLayoutProps } from "@inertiajs/core";
-import { computed, defineComponent, inject, provide, ref, useAttrs } from "vue";
+import { createLayoutPropsStore } from "@inertiajs/core";
+import { ref } from "vue";
 var store = createLayoutPropsStore();
 var state = ref(store.get());
 store.subscribe(() => {
@@ -34,31 +34,12 @@ function setLayoutPropsFor(name, props) {
 }
 function resetLayoutProps() {
   store.reset();
-}
-var LAYOUT_CONTEXT_KEY = /* @__PURE__ */ Symbol("inertia-layout");
-var LayoutProvider = defineComponent({
-  inheritAttrs: false,
-  props: {
-    layoutName: String
-  },
-  setup(props, { slots }) {
-    provide(LAYOUT_CONTEXT_KEY, props.layoutName);
-    return () => slots.default?.();
-  }
-});
-function useLayoutProps(defaults) {
-  const attrs = useAttrs();
-  const name = inject(LAYOUT_CONTEXT_KEY, void 0);
-  return computed(() => {
-    const { shared, named } = state.value;
-    const dynamicProps = name ? { ...shared, ...named[name] } : shared;
-    return mergeLayoutProps(defaults, attrs, dynamicProps);
-  });
+  state.value = store.get();
 }
 
 // src/remember.ts
 import { router } from "@inertiajs/core";
-import { cloneDeep } from "lodash-es";
+import { cloneDeep } from "es-toolkit";
 var remember = {
   created() {
     if (!this.$options.remember) {
@@ -111,19 +92,20 @@ import {
   router as router3,
   UseFormUtils as UseFormUtils2
 } from "@inertiajs/core";
-import { cloneDeep as cloneDeep3 } from "lodash-es";
+import { cloneDeep as cloneDeep3 } from "es-toolkit";
 
 // src/useFormState.ts
 import {
   router as router2,
   UseFormUtils
 } from "@inertiajs/core";
+import { cloneDeep as cloneDeep2, isEqual } from "es-toolkit";
+import { get, has, set } from "es-toolkit/compat";
 import {
   createValidator,
   resolveName,
   toSimpleValidationErrors
 } from "laravel-precognition";
-import { cloneDeep as cloneDeep2, get, has, isEqual, set } from "lodash-es";
 import { reactive, watch } from "vue";
 function useFormState(options) {
   const { data: dataOption, rememberKey } = options;
@@ -525,7 +507,7 @@ var pageAccessor = null;
 var layout = shallowRef(null);
 var key = ref2(void 0);
 var headManager;
-var App = defineComponent2({
+var App = defineComponent({
   name: "Inertia",
   props: {
     initialPage: {
@@ -602,7 +584,13 @@ var App = defineComponent2({
         if (component.value.layout && isRenderFunction(component.value.layout)) {
           return component.value.layout(h, child);
         }
-        const effectiveLayout = component.value.layout ?? defaultLayout?.(page.value.component, page.value);
+        let effectiveLayout;
+        const layoutValue = component.value.layout;
+        if (typeof layoutValue === "function" && layoutValue.length <= 1 && typeof layoutValue.prototype === "undefined") {
+          effectiveLayout = layoutValue(page.value.props);
+        } else {
+          effectiveLayout = layoutValue ?? defaultLayout?.(page.value.component, page.value);
+        }
         if (effectiveLayout) {
           const layouts = normalizeLayouts(
             effectiveLayout,
@@ -610,13 +598,19 @@ var App = defineComponent2({
             component.value.layout ? isRenderFunction : void 0
           );
           if (layouts.length > 0) {
+            const dynamicProps = isServer ? { shared: {}, named: {} } : state.value;
             return layouts.reduceRight((childNode, layout2) => {
               const layoutComponent = layout2.component;
               layoutComponent.inheritAttrs = !!layoutComponent.inheritAttrs;
               return h(
-                LayoutProvider,
-                { layoutName: layout2.name },
-                () => h(layoutComponent, { ...page.value.props, ...layout2.props }, () => childNode)
+                layoutComponent,
+                {
+                  ...page.value.props,
+                  ...layout2.props,
+                  ...dynamicProps.shared,
+                  ...layout2.name ? dynamicProps.named[layout2.name] || {} : {}
+                },
+                () => childNode
               );
             }, child);
           }
@@ -639,19 +633,20 @@ var plugin = {
 function usePage() {
   if (!pageAccessor) {
     pageAccessor = reactive2({
-      props: computed2(() => page.value?.props),
-      url: computed2(() => page.value?.url),
-      component: computed2(() => page.value?.component),
-      version: computed2(() => page.value?.version),
-      clearHistory: computed2(() => page.value?.clearHistory),
-      deferredProps: computed2(() => page.value?.deferredProps),
-      mergeProps: computed2(() => page.value?.mergeProps),
-      prependProps: computed2(() => page.value?.prependProps),
-      deepMergeProps: computed2(() => page.value?.deepMergeProps),
-      matchPropsOn: computed2(() => page.value?.matchPropsOn),
-      rememberedState: computed2(() => page.value?.rememberedState),
-      encryptHistory: computed2(() => page.value?.encryptHistory),
-      flash: computed2(() => page.value?.flash)
+      props: computed(() => page.value?.props),
+      url: computed(() => page.value?.url),
+      component: computed(() => page.value?.component),
+      version: computed(() => page.value?.version),
+      clearHistory: computed(() => page.value?.clearHistory),
+      deferredProps: computed(() => page.value?.deferredProps),
+      mergeProps: computed(() => page.value?.mergeProps),
+      prependProps: computed(() => page.value?.prependProps),
+      deepMergeProps: computed(() => page.value?.deepMergeProps),
+      matchPropsOn: computed(() => page.value?.matchPropsOn),
+      rememberedState: computed(() => page.value?.rememberedState),
+      encryptHistory: computed(() => page.value?.encryptHistory),
+      scrollProps: computed(() => page.value?.scrollProps),
+      flash: computed(() => page.value?.flash)
     });
   }
   return pageAccessor;
@@ -676,7 +671,8 @@ async function createInertiaApp({
   render,
   defaults = {},
   http: http3,
-  layout: layout2
+  layout: layout2,
+  withApp
 } = {}) {
   config.replace(defaults);
   if (http3) {
@@ -707,6 +703,9 @@ async function createInertiaApp({
       } else {
         vueApp2 = createSSRApp({ render: () => h2(app_default, props) });
         vueApp2.use(plugin);
+        if (withApp) {
+          withApp(vueApp2, { ssr: true });
+        }
       }
       const html = await renderToString(vueApp2);
       const body = buildSSRBody(id, page3, html);
@@ -748,10 +747,16 @@ async function createInertiaApp({
     if (el.hasAttribute("data-server-rendered")) {
       const app = createSSRApp({ render: () => h2(app_default, props) });
       app.use(plugin);
+      if (withApp) {
+        withApp(app, { ssr: false });
+      }
       app.mount(el);
     } else {
       const app = createApp({ render: () => h2(app_default, props) });
       app.use(plugin);
+      if (withApp) {
+        withApp(app, { ssr: false });
+      }
       app.mount(el);
     }
   });
@@ -767,8 +772,8 @@ async function createInertiaApp({
 
 // src/deferred.ts
 import { isSameUrlWithoutQueryOrHash, router as router6 } from "@inertiajs/core";
-import { get as get2 } from "lodash-es";
-import { defineComponent as defineComponent3, onMounted, onUnmounted, ref as ref3 } from "vue";
+import { get as get2 } from "es-toolkit/compat";
+import { defineComponent as defineComponent2, onMounted, onUnmounted, ref as ref3 } from "vue";
 var keysAreBeingReloaded = (only, except, keys) => {
   if (only.length === 0 && except.length === 0) {
     return true;
@@ -778,7 +783,7 @@ var keysAreBeingReloaded = (only, except, keys) => {
   }
   return keys.some((key2) => !except.includes(key2));
 };
-var deferred_default = defineComponent3({
+var deferred_default = defineComponent2({
   name: "Deferred",
   props: {
     data: {
@@ -790,6 +795,7 @@ var deferred_default = defineComponent3({
   setup(props, { slots }) {
     const reloading = ref3(false);
     const activeReloads = /* @__PURE__ */ new Set();
+    const page2 = usePage();
     let removeStartListener = null;
     let removeFinishListener = null;
     onMounted(() => {
@@ -814,14 +820,13 @@ var deferred_default = defineComponent3({
       removeFinishListener?.();
       activeReloads.clear();
     });
-    return { reloading, slots };
-  },
-  render() {
-    const keys = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
-    if (!this.$slots.fallback) {
-      throw new Error("`<Deferred>` requires a `<template #fallback>` slot");
-    }
-    return keys.every((key2) => get2(this.$page.props, key2) !== void 0) ? this.$slots.default?.({ reloading: this.reloading }) : this.$slots.fallback({});
+    return () => {
+      const keys = Array.isArray(props.data) ? props.data : [props.data];
+      if (!slots.fallback) {
+        throw new Error("`<Deferred>` requires a `<template #fallback>` slot");
+      }
+      return keys.every((key2) => get2(page2.props, key2) !== void 0) ? slots.default?.({ reloading: reloading.value }) : slots.fallback({});
+    };
   }
 });
 
@@ -836,21 +841,21 @@ import {
   resolveUrlMethodPairComponent,
   UseFormUtils as UseFormUtils3
 } from "@inertiajs/core";
-import { isEqual as isEqual2 } from "lodash-es";
+import { isEqual as isEqual2 } from "es-toolkit";
 import {
-  computed as computed3,
-  defineComponent as defineComponent4,
+  computed as computed2,
+  defineComponent as defineComponent3,
   h as h3,
-  inject as inject2,
+  inject,
   onBeforeUnmount,
   onMounted as onMounted2,
-  provide as provide2,
+  provide,
   ref as ref4,
   watch as watch2
 } from "vue";
 var noop = () => void 0;
 var FormContextKey = /* @__PURE__ */ Symbol("InertiaFormContext");
-var Form = defineComponent4({
+var Form = defineComponent3({
   name: "Form",
   slots: Object,
   props: {
@@ -983,10 +988,10 @@ var Form = defineComponent4({
       form.withAllErrors();
     }
     const formElement = ref4();
-    const method = computed3(
+    const method = computed2(
       () => isUrlMethodPair(props.action) ? props.action.method : props.method.toLowerCase()
     );
-    const resolvedComponent = computed3(() => {
+    const resolvedComponent = computed2(() => {
       if (props.component) {
         return props.component;
       }
@@ -1133,7 +1138,7 @@ var Form = defineComponent4({
       validator: () => form.validator()
     };
     expose(exposed);
-    provide2(FormContextKey, exposed);
+    provide(FormContextKey, exposed);
     return () => {
       return h3(
         "form",
@@ -1154,7 +1159,7 @@ var Form = defineComponent4({
   }
 });
 function useFormContext() {
-  return inject2(FormContextKey);
+  return inject(FormContextKey);
 }
 function createForm() {
   return Form;
@@ -1162,131 +1167,127 @@ function createForm() {
 var form_default = Form;
 
 // src/head.ts
-import { escape } from "lodash-es";
-import { defineComponent as defineComponent5 } from "vue";
-var Head = defineComponent5({
+import { escape } from "es-toolkit/compat";
+import { defineComponent as defineComponent4, onBeforeUnmount as onBeforeUnmount2 } from "vue";
+function isUnaryTag(node) {
+  return typeof node.type === "string" && [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "keygen",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ].indexOf(node.type) > -1;
+}
+function renderTagStart(node) {
+  node.props = node.props || {};
+  node.props["data-inertia"] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
+  const attrs = Object.keys(node.props).reduce((carry, name) => {
+    const value = String(node.props[name]);
+    if (["key", "head-key"].includes(name)) {
+      return carry;
+    } else if (value === "") {
+      return carry + ` ${name}`;
+    } else {
+      return carry + ` ${name}="${escape(value)}"`;
+    }
+  }, "");
+  return `<${String(node.type)}${attrs}>`;
+}
+function renderTagChildren(node) {
+  const { children } = node;
+  if (typeof children === "string") {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.reduce((html, child) => {
+      return html + renderTag(child);
+    }, "");
+  }
+  return "";
+}
+function isFunctionNode(node) {
+  return typeof node.type === "function";
+}
+function isComponentNode(node) {
+  return typeof node.type === "object";
+}
+function isCommentNode(node) {
+  return /(comment|cmt)/i.test(node.type.toString());
+}
+function isFragmentNode(node) {
+  return /(fragment|fgt|symbol\(\))/i.test(node.type.toString());
+}
+function isTextNode(node) {
+  return /(text|txt)/i.test(node.type.toString());
+}
+function renderTag(node) {
+  if (isTextNode(node)) {
+    return String(node.children);
+  } else if (isFragmentNode(node)) {
+    return "";
+  } else if (isCommentNode(node)) {
+    return "";
+  }
+  let html = renderTagStart(node);
+  if (node.children) {
+    html += renderTagChildren(node);
+  }
+  if (!isUnaryTag(node)) {
+    html += `</${String(node.type)}>`;
+  }
+  return html;
+}
+function addTitleElement(elements, title) {
+  if (title && !elements.find((tag) => tag.startsWith("<title"))) {
+    elements.push(`<title data-inertia="">${title}</title>`);
+  }
+  return elements;
+}
+function renderNodes(nodes, title) {
+  const elements = nodes.flatMap((node) => resolveNode(node)).map((node) => renderTag(node)).filter((node) => node);
+  return addTitleElement(elements, title);
+}
+function resolveNode(node) {
+  if (isFunctionNode(node)) {
+    return resolveNode(node.type());
+  } else if (isComponentNode(node)) {
+    console.warn(`Using components in the <Head> component is not supported.`);
+    return [];
+  } else if (isTextNode(node) && node.children) {
+    return node;
+  } else if (isFragmentNode(node) && node.children) {
+    return node.children.flatMap((child) => resolveNode(child));
+  } else if (isCommentNode(node)) {
+    return [];
+  } else {
+    return node;
+  }
+}
+var Head = defineComponent4({
   props: {
     title: {
       type: String,
       required: false
     }
   },
-  data() {
-    return {
-      provider: this.$headManager.createProvider()
+  setup(props, { slots }) {
+    const provider = headManager.createProvider();
+    onBeforeUnmount2(() => {
+      provider.disconnect();
+    });
+    return () => {
+      provider.update(renderNodes(slots.default ? slots.default() : [], props.title));
     };
-  },
-  beforeUnmount() {
-    this.provider.disconnect();
-  },
-  methods: {
-    isUnaryTag(node) {
-      return typeof node.type === "string" && [
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "keygen",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ].indexOf(node.type) > -1;
-    },
-    renderTagStart(node) {
-      node.props = node.props || {};
-      node.props["data-inertia"] = node.props["head-key"] !== void 0 ? node.props["head-key"] : "";
-      const attrs = Object.keys(node.props).reduce((carry, name) => {
-        const value = String(node.props[name]);
-        if (["key", "head-key"].includes(name)) {
-          return carry;
-        } else if (value === "") {
-          return carry + ` ${name}`;
-        } else {
-          return carry + ` ${name}="${escape(value)}"`;
-        }
-      }, "");
-      return `<${String(node.type)}${attrs}>`;
-    },
-    renderTagChildren(node) {
-      const { children } = node;
-      if (typeof children === "string") {
-        return children;
-      }
-      if (Array.isArray(children)) {
-        return children.reduce((html, child) => {
-          return html + this.renderTag(child);
-        }, "");
-      }
-      return "";
-    },
-    isFunctionNode(node) {
-      return typeof node.type === "function";
-    },
-    isComponentNode(node) {
-      return typeof node.type === "object";
-    },
-    isCommentNode(node) {
-      return /(comment|cmt)/i.test(node.type.toString());
-    },
-    isFragmentNode(node) {
-      return /(fragment|fgt|symbol\(\))/i.test(node.type.toString());
-    },
-    isTextNode(node) {
-      return /(text|txt)/i.test(node.type.toString());
-    },
-    renderTag(node) {
-      if (this.isTextNode(node)) {
-        return String(node.children);
-      } else if (this.isFragmentNode(node)) {
-        return "";
-      } else if (this.isCommentNode(node)) {
-        return "";
-      }
-      let html = this.renderTagStart(node);
-      if (node.children) {
-        html += this.renderTagChildren(node);
-      }
-      if (!this.isUnaryTag(node)) {
-        html += `</${String(node.type)}>`;
-      }
-      return html;
-    },
-    addTitleElement(elements) {
-      if (this.title && !elements.find((tag) => tag.startsWith("<title"))) {
-        elements.push(`<title data-inertia="">${this.title}</title>`);
-      }
-      return elements;
-    },
-    renderNodes(nodes) {
-      const elements = nodes.flatMap((node) => this.resolveNode(node)).map((node) => this.renderTag(node)).filter((node) => node);
-      return this.addTitleElement(elements);
-    },
-    resolveNode(node) {
-      if (this.isFunctionNode(node)) {
-        return this.resolveNode(node.type());
-      } else if (this.isComponentNode(node)) {
-        console.warn(`Using components in the <Head> component is not supported.`);
-        return [];
-      } else if (this.isTextNode(node) && node.children) {
-        return node;
-      } else if (this.isFragmentNode(node) && node.children) {
-        return node.children.flatMap((child) => this.resolveNode(child));
-      } else if (this.isCommentNode(node)) {
-        return [];
-      } else {
-        return node;
-      }
-    }
-  },
-  render() {
-    this.provider.update(this.renderNodes(this.$slots.default ? this.$slots.default() : []));
   }
 });
 var head_default = Head;
@@ -1296,7 +1297,7 @@ import {
   getScrollableParent,
   useInfiniteScroll
 } from "@inertiajs/core";
-import { computed as computed4, defineComponent as defineComponent6, Fragment, h as h4, onMounted as onMounted3, onUnmounted as onUnmounted2, ref as ref5, watch as watch3 } from "vue";
+import { computed as computed3, defineComponent as defineComponent5, Fragment, h as h4, onMounted as onMounted3, onUnmounted as onUnmounted2, ref as ref5, watch as watch3 } from "vue";
 var resolveHTMLElement = (value, fallback) => {
   if (!value) {
     return fallback;
@@ -1309,7 +1310,7 @@ var resolveHTMLElement = (value, fallback) => {
   }
   return fallback;
 };
-var InfiniteScroll = defineComponent6({
+var InfiniteScroll = defineComponent5({
   name: "InfiniteScroll",
   slots: Object,
   props: {
@@ -1375,14 +1376,14 @@ var InfiniteScroll = defineComponent6({
     const itemsElementRef = ref5(null);
     const startElementRef = ref5(null);
     const endElementRef = ref5(null);
-    const itemsElement = computed4(
+    const itemsElement = computed3(
       () => resolveHTMLElement(props.itemsElement, itemsElementRef.value)
     );
-    const scrollableParent = computed4(() => getScrollableParent(itemsElement.value));
-    const startElement = computed4(
+    const scrollableParent = computed3(() => getScrollableParent(itemsElement.value));
+    const startElement = computed3(
       () => resolveHTMLElement(props.startElement, startElementRef.value)
     );
-    const endElement = computed4(() => resolveHTMLElement(props.endElement, endElementRef.value));
+    const endElement = computed3(() => resolveHTMLElement(props.endElement, endElementRef.value));
     const loadingPrevious = ref5(false);
     const loadingNext = ref5(false);
     const requestCount = ref5(0);
@@ -1425,8 +1426,15 @@ var InfiniteScroll = defineComponent6({
       onDataReset: syncStateFromDataManager
     });
     syncStateFromDataManager();
-    const autoLoad = computed4(() => !manualMode.value);
-    const manualMode = computed4(
+    if (typeof window === "undefined") {
+      const scrollProp = usePage().scrollProps?.[props.data];
+      if (scrollProp) {
+        hasPreviousPage.value = !!scrollProp.previousPage;
+        hasNextPage.value = !!scrollProp.nextPage;
+      }
+    }
+    const autoLoad = computed3(() => !manualMode.value);
+    const manualMode = computed3(
       () => props.manual || props.manualAfter > 0 && requestCount.value >= props.manualAfter
     );
     const scrollToBottom = () => {
@@ -1536,10 +1544,10 @@ import {
   shouldIntercept,
   shouldNavigate
 } from "@inertiajs/core";
-import { computed as computed5, defineComponent as defineComponent7, h as h5, onMounted as onMounted4, onUnmounted as onUnmounted3, ref as ref6 } from "vue";
+import { computed as computed4, defineComponent as defineComponent6, h as h5, onMounted as onMounted4, onUnmounted as onUnmounted3, ref as ref6 } from "vue";
 var noop2 = () => {
 };
-var Link = defineComponent7({
+var Link = defineComponent6({
   name: "Link",
   props: {
     as: {
@@ -1666,7 +1674,7 @@ var Link = defineComponent7({
   setup(props, { slots, attrs }) {
     const inFlightCount = ref6(0);
     const hoverTimeout = ref6();
-    const prefetchModes = computed5(() => {
+    const prefetchModes = computed4(() => {
       if (props.prefetch === true) {
         return ["hover"];
       }
@@ -1678,7 +1686,7 @@ var Link = defineComponent7({
       }
       return [props.prefetch];
     });
-    const cacheForValue = computed5(() => {
+    const cacheForValue = computed4(() => {
       if (props.cacheFor !== 0) {
         return props.cacheFor;
       }
@@ -1695,16 +1703,16 @@ var Link = defineComponent7({
     onUnmounted3(() => {
       clearTimeout(hoverTimeout.value);
     });
-    const method = computed5(
+    const method = computed4(
       () => isUrlMethodPair2(props.href) ? props.href.method : (props.method ?? "get").toLowerCase()
     );
-    const as = computed5(() => {
+    const as = computed4(() => {
       if (typeof props.as !== "string" || props.as.toLowerCase() !== "a") {
         return props.as;
       }
       return method.value !== "get" ? "button" : props.as.toLowerCase();
     });
-    const mergeDataArray = computed5(
+    const mergeDataArray = computed4(
       () => mergeDataIntoQueryString2(
         method.value,
         isUrlMethodPair2(props.href) ? props.href.url : props.href,
@@ -1712,9 +1720,9 @@ var Link = defineComponent7({
         props.queryStringArrayFormat
       )
     );
-    const href = computed5(() => mergeDataArray.value[0]);
-    const data = computed5(() => mergeDataArray.value[1]);
-    const resolvedComponent = computed5(() => {
+    const href = computed4(() => mergeDataArray.value[0]);
+    const data = computed4(() => mergeDataArray.value[1]);
+    const resolvedComponent = computed4(() => {
       if (props.component) {
         return props.component;
       }
@@ -1723,7 +1731,7 @@ var Link = defineComponent7({
       }
       return null;
     });
-    const elProps = computed5(() => {
+    const elProps = computed4(() => {
       if (as.value === "button") {
         return { type: "button" };
       }
@@ -1732,7 +1740,7 @@ var Link = defineComponent7({
       }
       return {};
     });
-    const baseParams = computed5(() => ({
+    const baseParams = computed4(() => ({
       data: data.value,
       method: method.value,
       replace: props.replace,
@@ -1746,7 +1754,7 @@ var Link = defineComponent7({
       component: resolvedComponent.value,
       pageProps: props.pageProps
     }));
-    const visitParams = computed5(() => ({
+    const visitParams = computed4(() => ({
       ...baseParams.value,
       viewTransition: props.viewTransition,
       onCancelToken: props.onCancelToken,
@@ -1862,8 +1870,8 @@ import {
   objectToFormData,
   UseFormUtils as UseFormUtils4
 } from "@inertiajs/core";
+import { cloneDeep as cloneDeep4 } from "es-toolkit";
 import { toSimpleValidationErrors as toSimpleValidationErrors2 } from "laravel-precognition";
-import { cloneDeep as cloneDeep4 } from "lodash-es";
 function useHttp(...args) {
   const { rememberKey, data, precognitionEndpoint } = UseFormUtils4.parseUseFormArguments(...args);
   let abortController = null;
@@ -1949,7 +1957,7 @@ function useHttp(...args) {
           options.onProgress?.(event);
         }
       });
-      const responseData = JSON.parse(response.data);
+      const responseData = response.data ? JSON.parse(response.data) : null;
       if (response.status >= 200 && response.status < 300) {
         markAsSuccessful();
         form.response = responseData;
@@ -2094,7 +2102,7 @@ function usePrefetch(options = {}) {
 
 // src/useRemember.ts
 import { router as router10 } from "@inertiajs/core";
-import { cloneDeep as cloneDeep5 } from "lodash-es";
+import { cloneDeep as cloneDeep5 } from "es-toolkit";
 import { isReactive, reactive as reactive3, ref as ref8, watch as watch4 } from "vue";
 function useRemember(data, key2) {
   if (typeof data === "object" && data !== null && data.__rememberable === false) {
@@ -2118,9 +2126,9 @@ function useRemember(data, key2) {
 
 // src/whenVisible.ts
 import { router as router11 } from "@inertiajs/core";
-import { get as get3 } from "lodash-es";
-import { defineComponent as defineComponent8, h as h6 } from "vue";
-var whenVisible_default = defineComponent8({
+import { get as get3 } from "es-toolkit/compat";
+import { computed as computed5, defineComponent as defineComponent7, h as h6, nextTick, onUnmounted as onUnmounted6, ref as ref9, watch as watch5 } from "vue";
+var whenVisible_default = defineComponent7({
   name: "WhenVisible",
   slots: Object,
   props: {
@@ -2143,95 +2151,90 @@ var whenVisible_default = defineComponent8({
       default: false
     }
   },
-  data() {
-    return {
-      loaded: false,
-      fetching: false,
-      observer: null
-    };
-  },
-  unmounted() {
-    this.observer?.disconnect();
-  },
-  computed: {
-    keys() {
-      return this.data ? Array.isArray(this.data) ? this.data : [this.data] : [];
-    }
-  },
-  created() {
+  setup(props, { slots }) {
+    const loaded = ref9(false);
+    const fetching = ref9(false);
+    const observer = ref9(null);
+    const elementRef = ref9(null);
     const page2 = usePage();
-    this.$watch(
-      () => this.keys.map((key2) => get3(page2.props, key2)),
-      () => {
-        const exists = this.keys.length > 0 && this.keys.every((key2) => get3(page2.props, key2) !== void 0);
-        this.loaded = exists;
-        if (exists && !this.always) {
-          return;
-        }
-        if (!this.observer || !exists) {
-          this.$nextTick(this.registerObserver);
-        }
-      },
-      { immediate: true }
-    );
-  },
-  methods: {
-    registerObserver() {
-      this.observer?.disconnect();
-      this.observer = new IntersectionObserver(
+    const keys = computed5(() => {
+      return props.data ? Array.isArray(props.data) ? props.data : [props.data] : [];
+    });
+    function getReloadParams() {
+      const reloadParams = { preserveErrors: true, ...props.params };
+      if (props.data) {
+        reloadParams.only = Array.isArray(props.data) ? props.data : [props.data];
+      }
+      return reloadParams;
+    }
+    function registerObserver() {
+      observer.value?.disconnect();
+      observer.value = new IntersectionObserver(
         (entries) => {
           if (!entries[0].isIntersecting) {
             return;
           }
-          if (this.fetching) {
+          if (fetching.value) {
             return;
           }
-          if (!this.always && this.loaded) {
+          if (!props.always && loaded.value) {
             return;
           }
-          this.fetching = true;
-          const reloadParams = this.getReloadParams();
+          fetching.value = true;
+          const reloadParams = getReloadParams();
           router11.reload({
             ...reloadParams,
             onStart: (e) => {
-              this.fetching = true;
+              fetching.value = true;
               reloadParams.onStart?.(e);
             },
             onFinish: (e) => {
-              this.loaded = true;
-              this.fetching = false;
+              loaded.value = true;
+              fetching.value = false;
               reloadParams.onFinish?.(e);
-              if (!this.always) {
-                this.observer?.disconnect();
+              if (!props.always) {
+                observer.value?.disconnect();
               }
             }
           });
         },
         {
-          rootMargin: `${this.$props.buffer}px`
+          rootMargin: `${props.buffer}px`
         }
       );
-      this.observer.observe(this.$el.nextSibling);
-    },
-    getReloadParams() {
-      const reloadParams = { preserveErrors: true, ...this.$props.params };
-      if (this.$props.data) {
-        reloadParams.only = Array.isArray(this.$props.data) ? this.$props.data : [this.$props.data];
+      if (elementRef.value) {
+        observer.value.observe(elementRef.value);
       }
-      return reloadParams;
-    }
-  },
-  render() {
-    const els = [];
-    if (this.$props.always || !this.loaded) {
-      els.push(h6(this.$props.as));
     }
-    if (!this.loaded) {
-      els.push(this.$slots.fallback ? this.$slots.fallback({}) : null);
-    } else if (this.$slots.default) {
-      els.push(this.$slots.default({ fetching: this.fetching }));
-    }
-    return els;
+    watch5(
+      () => keys.value.map((key2) => get3(page2.props, key2)),
+      () => {
+        const exists = keys.value.length > 0 && keys.value.every((key2) => get3(page2.props, key2) !== void 0);
+        loaded.value = exists;
+        if (exists && !props.always) {
+          return;
+        }
+        if (!observer.value || !exists) {
+          nextTick(registerObserver);
+        }
+      },
+      { immediate: true }
+    );
+    onUnmounted6(() => {
+      observer.value?.disconnect();
+    });
+    return () => {
+      const els = [];
+      if (props.always || !loaded.value) {
+        els.push(h6(props.as, { ref: elementRef }));
+      }
+      if (!loaded.value) {
+        els.push(slots.fallback ? slots.fallback({}) : null);
+      } else if (slots.default) {
+        els.push(slots.default({ fetching: fetching.value }));
+      }
+      return els;
+    };
   }
 });
 
@@ -2257,7 +2260,6 @@ export {
   useForm,
   useFormContext,
   useHttp,
-  useLayoutProps,
   usePage,
   usePoll,
   usePrefetch,