docs(api): readd globals, fix selection

Author: MajesticPotatoe

packages/docs/src/components/api/View.vue

@@ -14,6 +14,7 @@
     const name = route.params.name as string
     if (name.endsWith('-directive')) return name.replace('-directive', '')
     else if (name.startsWith('use-')) return camelCase(name)
+    else if (name === 'globals') return name
     else return `${name.charAt(0).toUpperCase()}${camelize(name.slice(1))}`
   })
   const component = shallowRef<any>({})

packages/docs/src/components/doc/Explorer.vue

@@ -75,6 +75,9 @@
     } else if (name.startsWith('use')) {
       prependIcon = '$vuetify'
       subtitle = 'Composable'
+    } else if (name.startsWith('global')) {
+      prependIcon = '$vuetify'
+      subtitle = 'Global SASS'
     } else {
       return acc
     }

packages/docs/src/components/features/SassApi.vue

@@ -4,6 +4,7 @@
     :custom-filter="customFilter"
     :items="variables"
     base-color="disabled"
+    item-value="id"
     placeholder="Search SASS API"
     prepend-inner-icon="mdi-database-search-outline"
     variant="outlined"
@@ -37,15 +38,15 @@
 <script setup>
   const files = import.meta.glob('../../../../api-generator/dist/api/*.json')
 
-  const variables = shallowRef([])
+  const variables = ref([])
   const model = shallowRef([])
 
   const code = computed(() => {
     const $parsed = model.value.map(variable => {
-      return `  ${variable.title}: ${variable.value}`
+      return `  ${variable.title}: ${variable.default}`
     }).join(',\n')
 
-    return `@use 'vuetify' with (\n${$parsed},\n);`
+    return `@use 'vuetify/settings' with (\n${$parsed},\n);`
   })
 
   async function getVariables (name) {
@@ -65,15 +66,16 @@
       for (const file in files) {
         const name = file.split('/').pop().split('.')[0]
 
-        if (!name.startsWith('V')) continue
+        if (!name.startsWith('V') && name !== 'globals') continue
 
         const component = await getVariables(name)
 
         for (const variable in component.sass) {
           variables.value.push({
+            default: component.sass[variable]?.default || null,
             title: variable,
-            value: component.sass[variable]?.default || null,
             subtitle: name,
+            value: `${variable}-${name}`,
           })
         }
       }

packages/docs/src/pages/en/features/sass-variables.md

@@ -56,7 +56,7 @@ For additional details about css-pre-processors, please refer to the official vi
 
 ## Usage
 
-There are many SASS variables such as **font size**, **font family**, and **line height** that can be configured globally. An extensive list of configurable global SASS variables can be found [here](https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss). To start, Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options:
+There are many SASS variables such as **font size**, **font family**, and **line height** that can be configured globally. An extensive list of configurable global SASS variables can be found [here](/api/globals/). To start, Follow the plugin setup guide from [treeshaking](/features/treeshaking/) then add `styles.configFile` to the plugin options:
 
 ```js { resource="vite.config.js" }
 vuetify({
@@ -100,7 +100,7 @@ Available SASS variables are located on each component's API page.
 
 ## Usage in templates
 
-You can access [global](/api/vuetify/) and per-component variables in Vue templates simply by importing the settings file:
+You can access [global](/api/globals/) and per-component variables in Vue templates simply by importing the settings file:
 
 ```html { resource="Comp1.vue" }
 <style lang="scss">