feat(display): port to v3 (#13318)

Co-authored-by: Glen <glen.84@gmail.com>
Co-authored-by: Andrew Henry <AMajesticPotatoe@gmail.com>
Co-authored-by: nekosaur <albert@kaaman.nu>
Co-authored-by: Kael <kaelwd@gmail.com>

packages/api-generator/src/index.js

@@ -76,6 +76,31 @@ const addComponentApiDescriptions = (componentName, api, locales) => {
   return api
 }
 
+const addComposableApiDescriptions = (componentName, api, locales) => {
+  for (const localeName of locales) {
+    const sources = [
+      loadLocale(componentName, localeName),
+      loadLocale('generic', localeName),
+    ]
+
+    for (const category of ['props']) {
+      for (const item of api[category]) {
+        const name = category === 'props' ? camelize(item.name) : item.name
+        const description = sources.reduce((str, source) => {
+          if (str) return str
+          return source[category] && source[category][name]
+        }, null)
+
+        if (!item.description) item.description = {}
+
+        item.description[localeName] = description || ''
+      }
+    }
+  }
+
+  return api
+}
+
 const addDirectiveApiDescriptions = (directiveName, api, locales) => {
   if (api.argument.length) {
     for (const localeName of locales) {
@@ -145,6 +170,14 @@ const getComponentApi = (componentName, locales) => {
   return addComponentApiDescriptions(componentName, api, locales)
 }
 
+const getComposableApi = (composableName, locales) => {
+  // if (!composable) throw new Error(`Could not find composable: ${composableName}`)
+
+  const api = deepmerge(loadMap(composableName, 'composables'), { name: composableName, composable: true })
+
+  return addComposableApiDescriptions(composableName, api, locales)
+}
+
 const getDirectiveApi = (directiveName, locales) => {
   // if (!directive) throw new Error(`Could not find directive: ${directiveName}`)
 
@@ -172,11 +205,13 @@ const getInternationalizationApi = locales => {
 const DIRECTIVES = ['v-mutate', 'v-intersect', 'v-ripple', 'v-resize', 'v-scroll', 'v-touch', 'v-click-outside']
 */
 
+const COMPOSABLES = ['display']
 const DIRECTIVES = ['v-intersect', 'v-ripple', 'v-resize', 'v-scroll', 'v-touch']
 
 const getApi = (name, locales) => {
   // if (name === '$vuetify') return getVuetifyApi(locales)
   // if (name === 'internationalization') return getInternationalizationApi(locales)
+  if (COMPOSABLES.includes(name)) return getComposableApi(name, locales)
   if (DIRECTIVES.includes(name)) return getDirectiveApi(name, locales)
   else return getComponentApi(capitalize(camelize(name)), locales)
 }
@@ -194,6 +229,16 @@ const getComponentsApi = locales => {
   return components
 }
 
+const getComposablesApi = locales => {
+  const composables = []
+
+  for (const composableName of COMPOSABLES) {
+    composables.push(getComposableApi(composableName, locales))
+  }
+
+  return composables
+}
+
 const getDirectivesApi = locales => {
   const directives = []
 
@@ -209,6 +254,7 @@ const getCompleteApi = locales => {
     // getVuetifyApi(locales),
     // getInternationalizationApi(locales),
     ...getComponentsApi(locales),
+    ...getComposablesApi(locales),
     ...getDirectivesApi(locales),
   ].sort((a, b) => a.name.localeCompare(b.name))
 }
@@ -222,6 +268,7 @@ module.exports = {
   getApi,
   getCompleteApi,
   getComponentsApi,
+  getComposablesApi,
   getDirectivesApi,
   getHeaderLocale,
 }

packages/api-generator/src/locale/en/display.json

@@ -0,0 +1,25 @@
+{
+  "props": {
+    "height": "This value is the current window height.",
+    "lg": "This value indicates that the device width is between the **md** and **lg** threshold values.",
+    "lgAndDown": "This value indicates that the device width is less than the **lg** threshold value.",
+    "lgAndUp": "This value indicates that the device width is greater than the **lg** threshold value.",
+    "md": "This value indicates that the device width is between the **sm** and **md** threshold values.",
+    "mdAndDown": "This value indicates that the device width is less than the **md** threshold value.",
+    "mdAndUp": "This value indicates that the device width is greater than the **md** threshold value.",
+    "mobile": "This value indicates whether the current display width is less than the defined [mobileBreakpoint](#mobile-breakpoint)",
+    "mobileBreakpoint": "This value indicates whether the current display width is less than the defined [mobileBreakpoint](#mobile-breakpoint)",
+    "name": "The name key correlates to the currently active breakpoint; e.g. **xs**, **sm**, **md**, **lg**, **xl**, **xxl**.",
+    "platform": "This object contains information from the detected device's [userAgent](https://developer.mozilla.org/en-US/docs/Web/API/NavigatorID/userAgent) and whether it supports **touch**.",
+    "sm": "This value indicates that the device width is between the **xs** and **sm** threshold values.",
+    "smAndDown": "This value indicates that the device width is less than the **sm** threshold value.",
+    "smAndUp": "This value indicates that the device width is greater than the **sm** threshold value.",
+    "thresholds": "This object is used for device viewport calculations.",
+    "width": "This value is the current window width.",
+    "xl": "This value indicates that the device width is between the **lg** and **xl** threshold values.",
+    "xlAndDown": "This value indicates that the device width is less than the **xl** threshold value.",
+    "xlAndUp": "This value indicates that the device width is greater than the **xl** threshold value.",
+    "xs": "This value indicates that the device width greater than the **xs** threshold value.",
+    "xxl": "This value indicates that the device width is greater than the **xl** threshold value."
+  }
+}

packages/api-generator/src/maps/composables/display.js

@@ -0,0 +1,145 @@
+module.exports = {
+  display: {
+    props: [
+      {
+        name: 'height',
+        type: 'number',
+        default: 0,
+      },
+      {
+        name: 'lg',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'lgAndDown',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'lgAndUp',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'md',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'mdAndDown',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'mdAndUp',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'mobile',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'mobileBreakpoint',
+        type: 'number | string',
+        default: 'md',
+      },
+      {
+        name: 'name',
+        type: 'string',
+        default: '',
+      },
+      {
+        name: 'platform',
+        type: 'object',
+        default: {
+          android: false,
+          ios: false,
+          cordova: false,
+          electron: false,
+          edge: false,
+          firefox: false,
+          opera: false,
+          win: false,
+          mac: false,
+          linux: false,
+          touch: false,
+          ssr: false,
+        },
+      },
+      {
+        name: 'sm',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'smAndDown',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'smAndUp',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'thresholds',
+        type: 'object',
+        default: {
+          xs: 0,
+          sm: 600,
+          md: 960,
+          lg: 1280,
+          xl: 1920,
+          xxl: 2560,
+        },
+        snippet: `
+// Composables
+import { useDisplay } from 'vuetify/lib/composables/display'
+
+export default {
+  mounted () {
+    const display = useDisplay()
+
+    // display thresholds are not reactive
+    // and do not need to use .value
+    console.log(display.thresholds.md) // 1280
+  }
+}
+        `,
+      },
+      {
+        name: 'width',
+        type: 'number',
+        default: 0,
+      },
+      {
+        name: 'xl',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'xlAndDown',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'xlAndUp',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'xs',
+        type: 'boolean',
+        default: 'false',
+      },
+      {
+        name: 'xxl',
+        type: 'boolean',
+        default: 'false',
+      },
+    ],
+  },
+}

packages/docs/src/data/nav-alpha.json

@@ -21,7 +21,7 @@
     "title": "features",
     "icon": "$mdiImageEditOutline:$mdiImageEdit",
     "items": [
-      "breakpoints",
+      "display-and-platform",
       "global-config",
       "icon-fonts",
       "theme"

packages/docs/src/data/page-to-api.json

@@ -195,6 +195,7 @@
   "features/internationalization": ["internationalization"],
   "features/scrolling": ["$vuetify"],
   "features/theme": ["v-theme-provider"],
+  "features/display-and-platform": ["display"],
   "styles/transitions": [
     "v-fab-transition",
     "v-fade-transition",