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

package/CHANGELOG.md

@@ -1,8 +1,8 @@
-# [](https://github.com/vuetifyjs/vuetify/compare/v4.0.0-dev-20230421.0...v) (2023-04-21)
+# [](https://github.com/vuetifyjs/vuetify/compare/v4.0.0-dev-20230426.0...v) (2023-04-26)
 
 
 
-# [4.0.0-dev-20230421.0](https://github.com/vuetifyjs/vuetify/compare/v3.1.15...v4.0.0-dev-20230421.0) (2023-04-21)
+# [4.0.0-dev-20230426.0](https://github.com/vuetifyjs/vuetify/compare/v3.1.15...v4.0.0-dev-20230426.0) (2023-04-26)
 
 
 ### Bug Fixes
@@ -19,6 +19,7 @@
 * **VBtn:** resize height of button when override $spacer ([#17097](https://github.com/vuetifyjs/vuetify/issues/17097)) ([6169fc8](https://github.com/vuetifyjs/vuetify/commit/6169fc8d92f6a41ed8e83543f4e61c2c8f3b4d66))
 * **VBtn/VTab:** add text property ([753d444](https://github.com/vuetifyjs/vuetify/commit/753d444ebb1884b46479da6daf27be9b50de4f64))
 * **VField:** add solo-inverted variant ([#16794](https://github.com/vuetifyjs/vuetify/issues/16794)) ([d0b41e4](https://github.com/vuetifyjs/vuetify/commit/d0b41e409139567ce69b334c52df3e6bc45b0715))
+* **VInfiniteScroll:** initial implementation ([#15590](https://github.com/vuetifyjs/vuetify/issues/15590)) ([229a440](https://github.com/vuetifyjs/vuetify/commit/229a440e3d5b778c3ad9cba0a575b9835970c7d7)), closes [#3538](https://github.com/vuetifyjs/vuetify/issues/3538)
 * **VSlider:** add start and end events ([#16514](https://github.com/vuetifyjs/vuetify/issues/16514)) ([be71818](https://github.com/vuetifyjs/vuetify/commit/be71818a01f5f8f35d6e665320f2d0bfae9642d1))
 * **VTooltip:** add eager prop support ([#16752](https://github.com/vuetifyjs/vuetify/issues/16752)) ([d0761be](https://github.com/vuetifyjs/vuetify/commit/d0761be12dc9f1ce4833613ff5a7e37bca37662d))
 * **VVirtualScroll:** promote from labs ([f8c5746](https://github.com/vuetifyjs/vuetify/commit/f8c57464d35c14fc31c81143936c37457e406c76))

package/dist/_component-variables-labs.sass

@@ -1,2 +1,3 @@
 @forward '../lib/labs/VDataTable/_variables.scss'
+@forward '../lib/labs/VInfiniteScroll/_variables.scss'
 @forward '../lib/labs/VSkeletonLoader/_variables.scss'

package/dist/json/attributes.json

@@ -3539,6 +3539,58 @@
     "type": "string | { src: string; srcset: string; lazySrc: string; aspect: number }",
     "description": "The image URL. This prop is mandatory."
   },
+  "v-infinite-scroll/height": {
+    "type": "string | number",
+    "description": "Sets the height for the component."
+  },
+  "v-infinite-scroll/max-height": {
+    "type": "string | number",
+    "description": "Sets the maximum height for the component."
+  },
+  "v-infinite-scroll/max-width": {
+    "type": "string | number",
+    "description": "Sets the maximum width for the component."
+  },
+  "v-infinite-scroll/min-height": {
+    "type": "string | number",
+    "description": "Sets the minimum height for the component."
+  },
+  "v-infinite-scroll/min-width": {
+    "type": "string | number",
+    "description": "Sets the minimum width for the component."
+  },
+  "v-infinite-scroll/width": {
+    "type": "string | number",
+    "description": "Sets the width for the component."
+  },
+  "v-infinite-scroll/color": {
+    "type": "string",
+    "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)"
+  },
+  "v-infinite-scroll/direction": {
+    "type": "\"horizontal\" | \"vertical\"",
+    "description": "Specifies if scroller is **vertical** or **horizontal**."
+  },
+  "v-infinite-scroll/mode": {
+    "type": "\"intersect\" | \"manual\"",
+    "description": "Specifies if content should load automatically when scrolling (**intersect**) or manually (**manual**)."
+  },
+  "v-infinite-scroll/side": {
+    "type": "\"end\" | \"start\" | \"both\"",
+    "description": "Specifies the side where new content should appear. Either the **start**, **end**, or **both** sides."
+  },
+  "v-infinite-scroll/margin": {
+    "type": "string | number",
+    "description": "Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied."
+  },
+  "v-infinite-scroll/load-more-text": {
+    "type": "string",
+    "description": "Text shown in default load more button, when in manual mode."
+  },
+  "v-infinite-scroll/empty-text": {
+    "type": "string",
+    "description": "Text shown when there is no more content to load."
+  },
   "v-input/model-value": {
     "type": "any",
     "description": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array"
@@ -7263,6 +7315,10 @@
     "type": "\"horizontal\" | \"vertical\"",
     "description": "Display timeline in a **vertical** or **horizontal** direction"
   },
+  "v-timeline/side": {
+    "type": "\"end\" | \"start\"",
+    "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))"
+  },
   "v-timeline/align": {
     "type": "\"start\" | \"center\"",
     "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))"
@@ -7283,10 +7339,6 @@
     "type": "string | number",
     "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))"
   },
-  "v-timeline/side": {
-    "type": "\"end\" | \"start\"",
-    "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))"
-  },
   "v-timeline/truncate-line": {
     "type": "\"end\" | \"start\" | \"both\"",
     "description": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends"

package/dist/json/importMap-labs.json

@@ -24,6 +24,10 @@
       "from": "labs/VDataTable/index.mjs",
       "styles": []
     },
+    "VInfiniteScroll": {
+      "from": "labs/VInfiniteScroll/index.mjs",
+      "styles": []
+    },
     "VSkeletonLoader": {
       "from": "labs/VSkeletonLoader/index.mjs",
       "styles": []

package/dist/json/importMap.json

@@ -68,6 +68,10 @@
       "from": "components/VBtn/index.mjs",
       "styles": []
     },
+    "VBtnToggle": {
+      "from": "components/VBtnToggle/index.mjs",
+      "styles": []
+    },
     "VBtnGroup": {
       "from": "components/VBtnGroup/index.mjs",
       "styles": []
@@ -96,10 +100,6 @@
       "from": "components/VCard/index.mjs",
       "styles": []
     },
-    "VBtnToggle": {
-      "from": "components/VBtnToggle/index.mjs",
-      "styles": []
-    },
     "VCarousel": {
       "from": "components/VCarousel/index.mjs",
       "styles": []
@@ -120,6 +120,10 @@
       "from": "components/VChip/index.mjs",
       "styles": []
     },
+    "VChipGroup": {
+      "from": "components/VChipGroup/index.mjs",
+      "styles": []
+    },
     "VCode": {
       "from": "components/VCode/index.mjs",
       "styles": []
@@ -128,22 +132,18 @@
       "from": "components/VColorPicker/index.mjs",
       "styles": []
     },
-    "VChipGroup": {
-      "from": "components/VChipGroup/index.mjs",
-      "styles": []
-    },
     "VCombobox": {
       "from": "components/VCombobox/index.mjs",
       "styles": []
     },
-    "VDialog": {
-      "from": "components/VDialog/index.mjs",
-      "styles": []
-    },
     "VCounter": {
       "from": "components/VCounter/index.mjs",
       "styles": []
     },
+    "VDialog": {
+      "from": "components/VDialog/index.mjs",
+      "styles": []
+    },
     "VDivider": {
       "from": "components/VDivider/index.mjs",
       "styles": []
@@ -164,10 +164,6 @@
       "from": "components/VExpansionPanel/index.mjs",
       "styles": []
     },
-    "VFileInput": {
-      "from": "components/VFileInput/index.mjs",
-      "styles": []
-    },
     "VField": {
       "from": "components/VField/index.mjs",
       "styles": []
@@ -176,6 +172,10 @@
       "from": "components/VField/index.mjs",
       "styles": []
     },
+    "VFileInput": {
+      "from": "components/VFileInput/index.mjs",
+      "styles": []
+    },
     "VFooter": {
       "from": "components/VFooter/index.mjs",
       "styles": []
@@ -268,14 +268,14 @@
       "from": "components/VMenu/index.mjs",
       "styles": []
     },
-    "VNavigationDrawer": {
-      "from": "components/VNavigationDrawer/index.mjs",
-      "styles": []
-    },
     "VMessages": {
       "from": "components/VMessages/index.mjs",
       "styles": []
     },
+    "VNavigationDrawer": {
+      "from": "components/VNavigationDrawer/index.mjs",
+      "styles": []
+    },
     "VOverlay": {
       "from": "components/VOverlay/index.mjs",
       "styles": []
@@ -316,14 +316,6 @@
       "from": "components/VSheet/index.mjs",
       "styles": []
     },
-    "VSlideGroup": {
-      "from": "components/VSlideGroup/index.mjs",
-      "styles": []
-    },
-    "VSlideGroupItem": {
-      "from": "components/VSlideGroup/index.mjs",
-      "styles": []
-    },
     "VSlider": {
       "from": "components/VSlider/index.mjs",
       "styles": []
@@ -396,6 +388,10 @@
       "from": "components/VDefaultsProvider/index.mjs",
       "styles": []
     },
+    "VForm": {
+      "from": "components/VForm/index.mjs",
+      "styles": []
+    },
     "VContainer": {
       "from": "components/VGrid/index.mjs",
       "styles": []
@@ -416,10 +412,6 @@
       "from": "components/VHover/index.mjs",
       "styles": []
     },
-    "VForm": {
-      "from": "components/VForm/index.mjs",
-      "styles": []
-    },
     "VLayout": {
       "from": "components/VLayout/index.mjs",
       "styles": []
@@ -428,26 +420,26 @@
       "from": "components/VLayout/index.mjs",
       "styles": []
     },
-    "VLocaleProvider": {
-      "from": "components/VLocaleProvider/index.mjs",
-      "styles": []
-    },
     "VLazy": {
       "from": "components/VLazy/index.mjs",
       "styles": []
     },
-    "VNoSsr": {
-      "from": "components/VNoSsr/index.mjs",
+    "VLocaleProvider": {
+      "from": "components/VLocaleProvider/index.mjs",
       "styles": []
     },
-    "VRadio": {
-      "from": "components/VRadio/index.mjs",
+    "VNoSsr": {
+      "from": "components/VNoSsr/index.mjs",
       "styles": []
     },
     "VParallax": {
       "from": "components/VParallax/index.mjs",
       "styles": []
     },
+    "VRadio": {
+      "from": "components/VRadio/index.mjs",
+      "styles": []
+    },
     "VRangeSlider": {
       "from": "components/VRangeSlider/index.mjs",
       "styles": []
@@ -531,6 +523,14 @@
     "VDialogTransition": {
       "from": "components/transitions/index.mjs",
       "styles": []
+    },
+    "VSlideGroup": {
+      "from": "components/VSlideGroup/index.mjs",
+      "styles": []
+    },
+    "VSlideGroupItem": {
+      "from": "components/VSlideGroup/index.mjs",
+      "styles": []
     }
   },
   "directives": [

package/dist/json/tags.json

@@ -1216,6 +1216,24 @@
     ],
     "description": ""
   },
+  "v-infinite-scroll": {
+    "attributes": [
+      "color",
+      "direction",
+      "empty-text",
+      "height",
+      "load-more-text",
+      "margin",
+      "max-height",
+      "max-width",
+      "min-height",
+      "min-width",
+      "mode",
+      "side",
+      "width"
+    ],
+    "description": ""
+  },
   "v-input": {
     "attributes": [
       "append-icon",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "http://json.schemastore.org/web-types",
   "framework": "vue",
   "name": "vuetify",
-  "version": "4.0.0-dev-20230421.0",
+  "version": "4.0.0-dev-20230426.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -13710,6 +13710,233 @@
             "event": "update:modelValue"
           }
         },
+        {
+          "name": "v-infinite-scroll",
+          "source": {
+            "module": "./src/components/index.ts",
+            "symbol": "v-infinite-scroll"
+          },
+          "description": "",
+          "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll",
+          "attributes": [
+            {
+              "name": "height",
+              "description": "Sets the height for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "maxHeight",
+              "description": "Sets the maximum height for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "maxWidth",
+              "description": "Sets the maximum width for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "minHeight",
+              "description": "Sets the minimum height for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "minWidth",
+              "description": "Sets the minimum width for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "width",
+              "description": "Sets the width for the component.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "color",
+              "description": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors)",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "direction",
+              "description": "Specifies if scroller is **vertical** or **horizontal**.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "default": "'vertical'",
+              "value": {
+                "kind": "expression",
+                "type": "\"horizontal\" | \"vertical\""
+              }
+            },
+            {
+              "name": "mode",
+              "description": "Specifies if content should load automatically when scrolling (**intersect**) or manually (**manual**).",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "default": "'intersect'",
+              "value": {
+                "kind": "expression",
+                "type": "\"intersect\" | \"manual\""
+              }
+            },
+            {
+              "name": "side",
+              "description": "Specifies the side where new content should appear. Either the **start**, **end**, or **both** sides.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "default": "'end'",
+              "value": {
+                "kind": "expression",
+                "type": "\"end\" | \"start\" | \"both\""
+              }
+            },
+            {
+              "name": "margin",
+              "description": "Value sent to the intersection observer. Will make the observer trigger earlier, by the margin (px) value supplied.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "value": {
+                "kind": "expression",
+                "type": "string | number"
+              }
+            },
+            {
+              "name": "loadMoreText",
+              "description": "Text shown in default load more button, when in manual mode.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "default": "'$vuetify.infiniteScroll.loadMore'",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            },
+            {
+              "name": "emptyText",
+              "description": "Text shown when there is no more content to load.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#props",
+              "default": "'$vuetify.infiniteScroll.empty'",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "description": "Emitted when reaching the start / end threshold, or if triggered when using manual mode.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#events",
+              "arguments": [
+                {
+                  "name": "argument",
+                  "type": "[{ side: \"end\" | \"start\" | \"both\"; done: (status: \"error\" | \"loading\" | \"empty\" | \"ok\") => void }]"
+                }
+              ]
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "The default Vue slot.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#slots",
+              "vue-properties": [
+                {
+                  "name": "side",
+                  "type": "\"end\" | \"start\" | \"both\""
+                },
+                {
+                  "name": "props",
+                  "type": "{ onClick: () => (side: \"end\" | \"start\" | \"both\") => void; color: string }"
+                }
+              ]
+            },
+            {
+              "name": "loading",
+              "description": "Shown when content is loading.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#slots",
+              "vue-properties": [
+                {
+                  "name": "side",
+                  "type": "\"end\" | \"start\" | \"both\""
+                },
+                {
+                  "name": "props",
+                  "type": "{ onClick: () => (side: \"end\" | \"start\" | \"both\") => void; color: string }"
+                }
+              ]
+            },
+            {
+              "name": "error",
+              "description": "Shown when load returned status 'error'",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#slots",
+              "vue-properties": [
+                {
+                  "name": "side",
+                  "type": "\"end\" | \"start\" | \"both\""
+                },
+                {
+                  "name": "props",
+                  "type": "{ onClick: () => (side: \"end\" | \"start\" | \"both\") => void; color: string }"
+                }
+              ]
+            },
+            {
+              "name": "empty",
+              "description": "Shown when load returned status 'empty'",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#slots",
+              "vue-properties": [
+                {
+                  "name": "side",
+                  "type": "\"end\" | \"start\" | \"both\""
+                },
+                {
+                  "name": "props",
+                  "type": "{ onClick: () => (side: \"end\" | \"start\" | \"both\") => void; color: string }"
+                }
+              ]
+            },
+            {
+              "name": "load-more",
+              "description": "Shown when scrolled to either side of the content, in manual mode.",
+              "doc-url": "https://vuetifyjs.com/api/v-infinite-scroll#slots",
+              "vue-properties": [
+                {
+                  "name": "side",
+                  "type": "\"end\" | \"start\" | \"both\""
+                },
+                {
+                  "name": "props",
+                  "type": "{ onClick: () => (side: \"end\" | \"start\" | \"both\") => void; color: string }"
+                }
+              ]
+            }
+          ],
+          "vue-model": {
+            "prop": "modelValue",
+            "event": "update:modelValue"
+          }
+        },
         {
           "name": "v-input",
           "source": {
@@ -27420,6 +27647,15 @@
                 "type": "\"horizontal\" | \"vertical\""
               }
             },
+            {
+              "name": "side",
+              "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))",
+              "doc-url": "https://vuetifyjs.com/api/v-timeline#props",
+              "value": {
+                "kind": "expression",
+                "type": "\"end\" | \"start\""
+              }
+            },
             {
               "name": "align",
               "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))",
@@ -27469,15 +27705,6 @@
                 "type": "string | number"
               }
             },
-            {
-              "name": "side",
-              "description": "MISSING DESCRIPTION ([edit in github](https://github.com/vuetifyjs/vuetify/tree/master/packages/api-generator/src/locale/en/v-timeline.json))",
-              "doc-url": "https://vuetifyjs.com/api/v-timeline#props",
-              "value": {
-                "kind": "expression",
-                "type": "\"end\" | \"start\""
-              }
-            },
             {
               "name": "truncateLine",
               "description": "Truncate timeline directly at the **start** or **end** of the line, or on **both** ends",