feat(goTo): port to v3 (#19046)

closes #5732 closes #13538 Co-authored-by: Yuchao <[email protected]>
vuetifyjs · Jan 19, 2024 · 4eeae8c · 4eeae8c
1 parent 7031faa
commit 4eeae8c
Show file tree

Hide file tree

Showing 12 changed files with 679 additions and 162 deletions.
diff --git a/packages/api-generator/src/locale/en/useGoTo.json b/packages/api-generator/src/locale/en/useGoTo.json
@@ -0,0 +1,6 @@
+{
+  "exposed": {
+    "rtl": "The current RTL state.",
+    "options": "The current goTo scrolling options."
+  }
+}
diff --git a/packages/docs/src/components/app/BackToTop.vue b/packages/docs/src/components/app/BackToTop.vue
@@ -15,28 +15,27 @@
           elevation="8"
           icon="mdi-chevron-up"
           size="large"
-          @click="onClick"
+          @click="goTo(0)"
         />
       </v-fab-transition>
     </div>
   </v-layout-item>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
+  // Composables
+  import { useGoTo } from 'vuetify'
 
-  const model = ref(false)
+  // Utilities
+  import { shallowRef } from 'vue'
+
+  const goTo = useGoTo({ layout: true })
+
+  const model = shallowRef(false)
 
   function onScroll () {
     model.value = window.scrollY > 200
   }
-
-  function onClick () {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    })
-  }
 </script>
 
 <style scoped>

diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
@@ -42,6 +42,7 @@
       "global-configuration",
       "icon-fonts",
       "internationalization",
+      "scrolling",
       "sass-variables",
       "theme",
       "treeshaking"

diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
@@ -153,9 +153,9 @@
   "directives/touch": ["v-touch"],
   "features/dates": ["useDate"],
   "features/display-and-platform": ["useDisplay"],
+  "features/scrolling": ["useGoTo"],
   "features/global-configuration": ["VDefaultsProvider"],
   "features/internationalization": ["useLocale", "VLocaleProvider"],
-  "features/scrolling": ["$vuetify"],
   "features/theme": ["VThemeProvider"],
   "styles/transitions": [
     "VDialogBottomTransition",