@vuetify/nightly 4.0.0-dev-20230422.0 → 4.0.0-dev-20230426.0

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v4.0.0-dev-20230422.0
+* Vuetify v4.0.0-dev-20230426.0
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -1939,7 +1939,11 @@
         item: 'Rating {0} of {1}'
       }
     },
-    loading: 'Loading...'
+    loading: 'Loading...',
+    infiniteScroll: {
+      loadMore: 'Load more',
+      empty: 'No more'
+    }
   };
 
   const LANG_PREFIX = '$vuetify.';
@@ -4139,14 +4143,14 @@
   });
 
   // Utilities
-  function useIntersectionObserver(callback) {
+  function useIntersectionObserver(callback, options) {
     const intersectionRef = vue.ref();
     const isIntersecting = vue.ref(false);
     if (SUPPORTS_INTERSECTION) {
       const observer = new IntersectionObserver(entries => {
         callback?.(entries, observer);
         isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
-      });
+      }, options);
       vue.onBeforeUnmount(() => {
         observer.disconnect();
       });
@@ -20641,6 +20645,211 @@
 
   // Types
 
+  const VInfiniteScrollIntersect = defineComponent({
+    name: 'VInfiniteScrollIntersect',
+    props: {
+      side: {
+        type: String,
+        required: true
+      },
+      rootRef: null,
+      rootMargin: String
+    },
+    emits: {
+      intersect: side => true
+    },
+    setup(props, _ref) {
+      let {
+        emit
+      } = _ref;
+      const {
+        intersectionRef,
+        isIntersecting
+      } = useIntersectionObserver(entries => {}, props.rootMargin ? {
+        root: props.rootRef,
+        rootMargin: props.rootMargin
+      } : undefined);
+      vue.watch(isIntersecting, async val => {
+        if (val) emit('intersect', props.side);
+      });
+      useRender(() => vue.createVNode("div", {
+        "class": "v-infinite-scroll-intersect",
+        "ref": intersectionRef
+      }, [vue.createTextVNode("\xA0")]));
+      return {};
+    }
+  });
+  const VInfiniteScroll = genericComponent()({
+    name: 'VInfiniteScroll',
+    props: {
+      color: String,
+      direction: {
+        type: String,
+        default: 'vertical',
+        validator: v => ['vertical', 'horizontal'].includes(v)
+      },
+      side: {
+        type: String,
+        default: 'end',
+        validator: v => ['start', 'end', 'both'].includes(v)
+      },
+      mode: {
+        type: String,
+        default: 'intersect',
+        validator: v => ['intersect', 'manual'].includes(v)
+      },
+      margin: [Number, String],
+      loadMoreText: {
+        type: String,
+        default: '$vuetify.infiniteScroll.loadMore'
+      },
+      emptyText: {
+        type: String,
+        default: '$vuetify.infiniteScroll.empty'
+      },
+      ...makeDimensionProps()
+    },
+    emits: {
+      load: options => true
+    },
+    setup(props, _ref2) {
+      let {
+        slots,
+        emit
+      } = _ref2;
+      const rootEl = vue.ref();
+      const startStatus = vue.ref('ok');
+      const endStatus = vue.ref('ok');
+      const margin = vue.computed(() => convertToUnit(props.margin));
+      function setScrollAmount(amount) {
+        if (!rootEl.value) return;
+        const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+        rootEl.value[property] = amount;
+      }
+      function getScrollAmount() {
+        if (!rootEl.value) return 0;
+        const property = props.direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+        return rootEl.value[property];
+      }
+      function getScrollSize() {
+        if (!rootEl.value) return 0;
+        const property = props.direction === 'vertical' ? 'scrollHeight' : 'scrollWidth';
+        return rootEl.value[property];
+      }
+      function getContainerSize() {
+        if (!rootEl.value) return 0;
+        const property = props.direction === 'vertical' ? 'clientHeight' : 'clientWidth';
+        return rootEl.value[property];
+      }
+      vue.onMounted(() => {
+        if (!rootEl.value) return;
+        if (props.side === 'start') {
+          setScrollAmount(getScrollSize());
+        } else if (props.side === 'both') {
+          setScrollAmount(getScrollSize() / 2 - getContainerSize() / 2);
+        }
+      });
+      function setStatus(side, status) {
+        if (side === 'start') {
+          startStatus.value = status;
+        } else if (side === 'end') {
+          endStatus.value = status;
+        }
+      }
+      function getStatus(side) {
+        return side === 'start' ? startStatus.value : endStatus.value;
+      }
+      let previousScrollSize = 0;
+      function handleIntersect(side) {
+        const status = getStatus(side);
+        if (!rootEl.value || status === 'loading') return;
+        previousScrollSize = getScrollSize();
+        setStatus(side, 'loading');
+        function done(status) {
+          setStatus(side, status);
+          vue.nextTick(() => {
+            if (status === 'ok' && side === 'start') {
+              setScrollAmount(getScrollSize() - previousScrollSize + getScrollAmount());
+            }
+          });
+        }
+        emit('load', {
+          side,
+          done
+        });
+      }
+      const {
+        t
+      } = useLocale();
+      function renderSide(side, status) {
+        if (props.side !== side && props.side !== 'both') return;
+        const onClick = () => handleIntersect(side);
+        const slotProps = {
+          side,
+          props: {
+            onClick,
+            color: props.color
+          }
+        };
+        if (status === 'error') return slots.error?.(slotProps);
+        if (status === 'empty') return slots.empty?.(slotProps) ?? vue.createVNode("div", null, [t(props.emptyText)]);
+        if (props.mode === 'manual') {
+          if (status === 'loading') {
+            return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
+              "indeterminate": true,
+              "color": props.color
+            }, null);
+          }
+          return slots['load-more']?.(slotProps) ?? vue.createVNode(VBtn, {
+            "variant": "outlined",
+            "color": props.color,
+            "onClick": onClick
+          }, {
+            default: () => [t(props.loadMoreText)]
+          });
+        }
+        return slots.loading?.(slotProps) ?? vue.createVNode(VProgressCircular, {
+          "indeterminate": true,
+          "color": props.color
+        }, null);
+      }
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      useRender(() => {
+        const hasStartIntersect = props.side === 'start' || props.side === 'both';
+        const hasEndIntersect = props.side === 'end' || props.side === 'both';
+        const intersectMode = props.mode === 'intersect';
+        return vue.createVNode("div", {
+          "ref": rootEl,
+          "class": ['v-infinite-scroll', `v-infinite-scroll--${props.direction}`, {
+            'v-infinite-scroll--start': hasStartIntersect,
+            'v-infinite-scroll--end': hasEndIntersect
+          }],
+          "style": dimensionStyles.value
+        }, [vue.createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('start', startStatus.value)]), rootEl.value && hasStartIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          "key": "start",
+          "side": "start",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), slots.default?.(), rootEl.value && hasEndIntersect && intersectMode && vue.createVNode(VInfiniteScrollIntersect, {
+          "key": "end",
+          "side": "end",
+          "onIntersect": handleIntersect,
+          "rootRef": rootEl.value,
+          "rootMargin": margin.value
+        }, null), vue.createVNode("div", {
+          "class": "v-infinite-scroll__side"
+        }, [renderSide('end', endStatus.value)])]);
+      });
+    }
+  });
+
+  // Types
+
   const rootTypes = {
     actions: 'button@2',
     article: 'heading, paragraph',
@@ -20840,6 +21049,7 @@
     VHover: VHover,
     VIcon: VIcon,
     VImg: VImg,
+    VInfiniteScroll: VInfiniteScroll,
     VInput: VInput,
     VItem: VItem,
     VItemGroup: VItemGroup,
@@ -21127,7 +21337,7 @@
       date
     };
   }
-  const version$1 = "4.0.0-dev-20230422.0";
+  const version$1 = "4.0.0-dev-20230426.0";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -21139,7 +21349,7 @@
     }
   }
 
-  const version = "4.0.0-dev-20230422.0";
+  const version = "4.0.0-dev-20230426.0";
 
   const createVuetify = function () {
     let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};