@inertiajs/vue3 2.1.10 → 2.2.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 // src/index.ts
-import { router as router10 } from "@inertiajs/core";
+import { progress, router as router10 } from "@inertiajs/core";
 
 // src/app.ts
 import { createHeadManager, router as router3 } from "@inertiajs/core";
@@ -361,6 +361,7 @@ function usePage() {
     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),
@@ -376,7 +377,7 @@ async function createInertiaApp({
   resolve,
   setup,
   title,
-  progress = {},
+  progress: progress2 = {},
   page: page2,
   render
 }) {
@@ -403,8 +404,8 @@ async function createInertiaApp({
       plugin
     });
   });
-  if (!isServer && progress) {
-    setupProgress(progress);
+  if (!isServer && progress2) {
+    setupProgress(progress2);
   }
   if (isServer) {
     const body = await render(
@@ -788,6 +789,222 @@ var Head = defineComponent4({
 });
 var head_default = Head;
 
+// src/infiniteScroll.ts
+import {
+  getScrollableParent,
+  useInfiniteScroll
+} from "@inertiajs/core";
+import { computed as computed3, defineComponent as defineComponent5, Fragment, h as h4, onMounted as onMounted2, onUnmounted, ref as ref3, watch as watch2 } from "vue";
+var resolveHTMLElement = (value, fallback) => {
+  if (!value) {
+    return fallback;
+  }
+  if (typeof value === "string") {
+    return document.querySelector(value);
+  }
+  if (typeof value === "function") {
+    return value() || null;
+  }
+  return fallback;
+};
+var InfiniteScroll = defineComponent5({
+  name: "InfiniteScroll",
+  props: {
+    data: {
+      type: String
+    },
+    buffer: {
+      type: Number,
+      default: 0
+    },
+    onlyNext: {
+      type: Boolean,
+      default: false
+    },
+    onlyPrevious: {
+      type: Boolean,
+      default: false
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    },
+    manualAfter: {
+      type: Number,
+      default: 0
+    },
+    preserveUrl: {
+      type: Boolean,
+      default: false
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    autoScroll: {
+      type: Boolean,
+      default: void 0
+    },
+    itemsElement: {
+      type: [String, Function, Object],
+      default: null
+    },
+    startElement: {
+      type: [String, Function, Object],
+      default: null
+    },
+    endElement: {
+      type: [String, Function, Object],
+      default: null
+    }
+  },
+  inheritAttrs: false,
+  setup(props, { slots, attrs, expose }) {
+    const itemsElementRef = ref3(null);
+    const startElementRef = ref3(null);
+    const endElementRef = ref3(null);
+    const itemsElement = computed3(
+      () => resolveHTMLElement(props.itemsElement, itemsElementRef.value)
+    );
+    const scrollableParent = computed3(() => getScrollableParent(itemsElement.value));
+    const startElement = computed3(
+      () => resolveHTMLElement(props.startElement, startElementRef.value)
+    );
+    const endElement = computed3(() => resolveHTMLElement(props.endElement, endElementRef.value));
+    const loadingPrevious = ref3(false);
+    const loadingNext = ref3(false);
+    const requestCount = ref3(0);
+    const autoLoad = computed3(() => !manualMode.value);
+    const manualMode = computed3(
+      () => props.manual || props.manualAfter > 0 && requestCount.value >= props.manualAfter
+    );
+    const { dataManager, elementManager } = useInfiniteScroll({
+      // Data
+      getPropName: () => props.data,
+      inReverseMode: () => props.reverse,
+      shouldFetchNext: () => !props.onlyPrevious,
+      shouldFetchPrevious: () => !props.onlyNext,
+      shouldPreserveUrl: () => props.preserveUrl,
+      // Elements
+      getTriggerMargin: () => props.buffer,
+      getStartElement: () => startElement.value,
+      getEndElement: () => endElement.value,
+      getItemsElement: () => itemsElement.value,
+      getScrollableParent: () => scrollableParent.value,
+      // Request callbacks
+      onBeforePreviousRequest: () => loadingPrevious.value = true,
+      onBeforeNextRequest: () => loadingNext.value = true,
+      onCompletePreviousRequest: () => {
+        requestCount.value += 1;
+        loadingPrevious.value = false;
+      },
+      onCompleteNextRequest: () => {
+        requestCount.value += 1;
+        loadingNext.value = false;
+      }
+    });
+    const scrollToBottom = () => {
+      if (scrollableParent.value) {
+        scrollableParent.value.scrollTo({
+          top: scrollableParent.value.scrollHeight,
+          behavior: "instant"
+        });
+      } else {
+        window.scrollTo({
+          top: document.body.scrollHeight,
+          behavior: "instant"
+        });
+      }
+    };
+    onMounted2(() => {
+      elementManager.setupObservers();
+      elementManager.processServerLoadedElements(dataManager.getLastLoadedPage());
+      const shouldAutoScroll = props.autoScroll !== void 0 ? props.autoScroll : props.reverse;
+      if (shouldAutoScroll) {
+        scrollToBottom();
+      }
+      if (autoLoad.value) {
+        elementManager.enableTriggers();
+      }
+    });
+    onUnmounted(elementManager.flushAll);
+    watch2(
+      () => [autoLoad.value, props.onlyNext, props.onlyPrevious],
+      ([enabled]) => {
+        enabled ? elementManager.enableTriggers() : elementManager.disableTriggers();
+      }
+    );
+    expose({
+      fetchNext: dataManager.fetchNext,
+      fetchPrevious: dataManager.fetchPrevious,
+      hasPrevious: dataManager.hasPrevious,
+      hasNext: dataManager.hasNext
+    });
+    return () => {
+      const renderElements = [];
+      const sharedExposed = {
+        loadingPrevious: loadingPrevious.value,
+        loadingNext: loadingNext.value,
+        hasPrevious: dataManager.hasPrevious(),
+        hasNext: dataManager.hasNext()
+      };
+      if (!props.startElement) {
+        const headerAutoMode = autoLoad.value && !props.onlyNext;
+        const exposedPrevious = {
+          loading: loadingPrevious.value,
+          fetch: dataManager.fetchPrevious,
+          autoMode: headerAutoMode,
+          manualMode: !headerAutoMode,
+          hasMore: dataManager.hasPrevious(),
+          ...sharedExposed
+        };
+        renderElements.push(
+          h4(
+            "div",
+            { ref: startElementRef },
+            slots.previous ? slots.previous(exposedPrevious) : loadingPrevious.value ? slots.loading?.(exposedPrevious) : null
+          )
+        );
+      }
+      renderElements.push(
+        h4(
+          props.as,
+          { ...attrs, ref: itemsElementRef },
+          slots.default?.({
+            loading: loadingPrevious.value || loadingNext.value,
+            loadingPrevious: loadingPrevious.value,
+            loadingNext: loadingNext.value
+          })
+        )
+      );
+      if (!props.endElement) {
+        const footerAutoMode = autoLoad.value && !props.onlyPrevious;
+        const exposedNext = {
+          loading: loadingNext.value,
+          fetch: dataManager.fetchNext,
+          autoMode: footerAutoMode,
+          manualMode: !footerAutoMode,
+          hasMore: dataManager.hasNext(),
+          ...sharedExposed
+        };
+        renderElements.push(
+          h4(
+            "div",
+            { ref: endElementRef },
+            slots.next ? slots.next(exposedNext) : loadingNext.value ? slots.loading?.(exposedNext) : null
+          )
+        );
+      }
+      return h4(Fragment, {}, props.reverse ? [...renderElements].reverse() : renderElements);
+    };
+  }
+});
+var infiniteScroll_default = InfiniteScroll;
+
 // src/link.ts
 import {
   isUrlMethodPair as isUrlMethodPair2,
@@ -796,10 +1013,10 @@ import {
   shouldIntercept,
   shouldNavigate
 } from "@inertiajs/core";
-import { computed as computed3, defineComponent as defineComponent5, h as h4, onMounted as onMounted2, onUnmounted, ref as ref3 } from "vue";
+import { computed as computed4, defineComponent as defineComponent6, h as h5, onMounted as onMounted3, onUnmounted as onUnmounted2, ref as ref4 } from "vue";
 var noop2 = () => {
 };
-var Link = defineComponent5({
+var Link = defineComponent6({
   name: "Link",
   props: {
     as: {
@@ -904,9 +1121,9 @@ var Link = defineComponent5({
     }
   },
   setup(props, { slots, attrs }) {
-    const inFlightCount = ref3(0);
-    const hoverTimeout = ref3(null);
-    const prefetchModes = computed3(() => {
+    const inFlightCount = ref4(0);
+    const hoverTimeout = ref4(null);
+    const prefetchModes = computed4(() => {
       if (props.prefetch === true) {
         return ["hover"];
       }
@@ -918,7 +1135,7 @@ var Link = defineComponent5({
       }
       return [props.prefetch];
     });
-    const cacheForValue = computed3(() => {
+    const cacheForValue = computed4(() => {
       if (props.cacheFor !== 0) {
         return props.cacheFor;
       }
@@ -927,24 +1144,24 @@ var Link = defineComponent5({
       }
       return 3e4;
     });
-    onMounted2(() => {
+    onMounted3(() => {
       if (prefetchModes.value.includes("mount")) {
         prefetch();
       }
     });
-    onUnmounted(() => {
+    onUnmounted2(() => {
       clearTimeout(hoverTimeout.value);
     });
-    const method = computed3(
+    const method = computed4(
       () => isUrlMethodPair2(props.href) ? props.href.method : props.method.toLowerCase()
     );
-    const as = computed3(() => {
+    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 = computed3(
+    const mergeDataArray = computed4(
       () => mergeDataIntoQueryString2(
         method.value,
         isUrlMethodPair2(props.href) ? props.href.url : props.href,
@@ -952,9 +1169,9 @@ var Link = defineComponent5({
         props.queryStringArrayFormat
       )
     );
-    const href = computed3(() => mergeDataArray.value[0]);
-    const data = computed3(() => mergeDataArray.value[1]);
-    const elProps = computed3(() => {
+    const href = computed4(() => mergeDataArray.value[0]);
+    const data = computed4(() => mergeDataArray.value[1]);
+    const elProps = computed4(() => {
       if (as.value === "button") {
         return { type: "button" };
       }
@@ -963,7 +1180,7 @@ var Link = defineComponent5({
       }
       return {};
     });
-    const baseParams = computed3(() => ({
+    const baseParams = computed4(() => ({
       data: data.value,
       method: method.value,
       replace: props.replace,
@@ -974,7 +1191,7 @@ var Link = defineComponent5({
       headers: props.headers,
       async: props.async
     }));
-    const visitParams = computed3(() => ({
+    const visitParams = computed4(() => ({
       ...baseParams.value,
       onCancelToken: props.onCancelToken,
       onBefore: props.onBefore,
@@ -1054,7 +1271,7 @@ var Link = defineComponent5({
       }
     };
     return () => {
-      return h4(
+      return h5(
         as.value,
         {
           ...attrs,
@@ -1079,7 +1296,7 @@ var link_default = Link;
 
 // src/usePoll.ts
 import { router as router6 } from "@inertiajs/core";
-import { onMounted as onMounted3, onUnmounted as onUnmounted2 } from "vue";
+import { onMounted as onMounted4, onUnmounted as onUnmounted3 } from "vue";
 function usePoll(interval, requestOptions = {}, options = {
   keepAlive: false,
   autoStart: true
@@ -1088,12 +1305,12 @@ function usePoll(interval, requestOptions = {}, options = {
     ...options,
     autoStart: false
   });
-  onMounted3(() => {
+  onMounted4(() => {
     if (options.autoStart ?? true) {
       start();
     }
   });
-  onUnmounted2(() => {
+  onUnmounted3(() => {
     stop();
   });
   return {
@@ -1104,11 +1321,11 @@ function usePoll(interval, requestOptions = {}, options = {
 
 // src/usePrefetch.ts
 import { router as router7 } from "@inertiajs/core";
-import { onMounted as onMounted4, onUnmounted as onUnmounted3, ref as ref4 } from "vue";
+import { onMounted as onMounted5, onUnmounted as onUnmounted4, ref as ref5 } from "vue";
 function usePrefetch(options = {}) {
-  const isPrefetching = ref4(false);
-  const lastUpdatedAt = ref4(null);
-  const isPrefetched = ref4(false);
+  const isPrefetching = ref5(false);
+  const lastUpdatedAt = ref5(null);
+  const isPrefetched = ref5(false);
   const cached = typeof window === "undefined" ? null : router7.getCached(window.location.pathname, options);
   const inFlight = typeof window === "undefined" ? null : router7.getPrefetching(window.location.pathname, options);
   lastUpdatedAt.value = cached?.staleTimestamp || null;
@@ -1116,7 +1333,7 @@ function usePrefetch(options = {}) {
   isPrefetched.value = cached !== null;
   let onPrefetchedListener;
   let onPrefetchingListener;
-  onMounted4(() => {
+  onMounted5(() => {
     onPrefetchingListener = router7.on("prefetching", (e) => {
       if (e.detail.visit.url.pathname === window.location.pathname) {
         isPrefetching.value = true;
@@ -1129,7 +1346,7 @@ function usePrefetch(options = {}) {
       }
     });
   });
-  onUnmounted3(() => {
+  onUnmounted4(() => {
     onPrefetchedListener();
     onPrefetchingListener();
   });
@@ -1144,16 +1361,16 @@ function usePrefetch(options = {}) {
 // src/useRemember.ts
 import { router as router8 } from "@inertiajs/core";
 import { cloneDeep as cloneDeep3 } from "lodash-es";
-import { isReactive, reactive as reactive3, ref as ref5, watch as watch2 } from "vue";
+import { isReactive, reactive as reactive3, ref as ref6, watch as watch3 } from "vue";
 function useRemember(data, key2) {
   if (typeof data === "object" && data !== null && data.__rememberable === false) {
     return data;
   }
   const restored = router8.restore(key2);
-  const type = isReactive(data) ? reactive3 : ref5;
+  const type = isReactive(data) ? reactive3 : ref6;
   const hasCallbacks = typeof data.__remember === "function" && typeof data.__restore === "function";
   const remembered = type(restored === void 0 ? data : hasCallbacks ? data.__restore(restored) : restored);
-  watch2(
+  watch3(
     remembered,
     (newValue) => {
       router8.remember(cloneDeep3(hasCallbacks ? data.__remember() : newValue), key2);
@@ -1165,8 +1382,8 @@ function useRemember(data, key2) {
 
 // src/whenVisible.ts
 import { router as router9 } from "@inertiajs/core";
-import { defineComponent as defineComponent6, h as h5 } from "vue";
-var whenVisible_default = defineComponent6({
+import { defineComponent as defineComponent7, h as h6 } from "vue";
+var whenVisible_default = defineComponent7({
   name: "WhenVisible",
   props: {
     data: {
@@ -1247,7 +1464,7 @@ var whenVisible_default = defineComponent6({
   render() {
     const els = [];
     if (this.$props.always || !this.loaded) {
-      els.push(h5(this.$props.as));
+      els.push(h6(this.$props.as));
     }
     if (!this.loaded) {
       els.push(this.$slots.fallback ? this.$slots.fallback() : null);
@@ -1261,9 +1478,11 @@ export {
   deferred_default as Deferred,
   form_default as Form,
   head_default as Head,
+  infiniteScroll_default as InfiniteScroll,
   link_default as Link,
   whenVisible_default as WhenVisible,
   createInertiaApp,
+  progress,
   router10 as router,
   useForm,
   usePage,