Merge branch 'master' into kaelwd/resolve-directives

Author: KaelWD

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.8.4"
+  "version": "3.8.6"
 }

package.json

@@ -89,6 +89,7 @@
     "overrides": {
       "@testing-library/dom": "npm:@vuetify/[email protected]",
       "@types/node": "22.15.12",
+      "@vue/babel-plugin-jsx": "npm:@vuetify/[email protected]",
       "tough-cookie": "5.1.2"
     },
     "peerDependencyRules": {

packages/api-generator/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "private": true,
   "description": "",
   "scripts": {
     "build": "node --import tsx src/index.ts",
     "lint": "eslint --ext .ts,.json src -f codeframe --max-warnings 0",
-    "lint:fix": "node --run lint -- --fix"
+    "lint:fix": "pnpm lint --fix"
   },
   "author": "",
   "license": "ISC",

packages/api-generator/src/helpers/sass.ts

@@ -1,10 +1,10 @@
 import fs from 'node:fs'
 
-function processVariableFile (filePath: string) {
+function processVariableFile (filePath: string, tagUse: string | string[]) {
   if (fs.existsSync(filePath)) {
     const varFile = fs.readFileSync(filePath, 'utf8')
     const vars = varFile.replace(/\/\/.+[\r\n]+/g, '').split(/;[\n]*/g)
-    const varValues: Record<string, { default: string }> = {}
+    const varValues: Record<string, { default: string, use?: string }> = {}
     for (const [index, variable] of vars.entries()) {
       const varArr = variable.split(':')
       if (varArr.length >= 2 && varArr[0].startsWith('$')) {
@@ -14,6 +14,7 @@ function processVariableFile (filePath: string) {
           : varArr.join(':')
         varValues[varName] = {
           default: varDefault.replace('!default', '').trim(),
+          ...(tagUse) && { use: tagUse === 'all' || tagUse?.includes(varName) ? 'vuetify' : 'vuetify/settings' },
         }
       }
     }
@@ -25,19 +26,13 @@ function processVariableFile (filePath: string) {
 
 export const parseSassVariables = (componentName: string) => {
   const rootDir = './../vuetify/src/components'
-  return processVariableFile(`${rootDir}/${componentName}/_variables.scss`)
+  return processVariableFile(`${rootDir}/${componentName}/_variables.scss`, '')
 }
 
-// export function parseGlobalSassVariables () {
-//   return [
-//     './../vuetify/src/styles/settings/_colors.scss',
-//     './../vuetify/src/styles/settings/_dark.scss',
-//     './../vuetify/src/styles/settings/_elevations.scss',
-//     './../vuetify/src/styles/settings/_light.scss',
-//     './../vuetify/src/styles/settings/_theme.scss',
-//     './../vuetify/src/styles/settings/_variables.scss',
-//   ].reduce((acc, path) => {
-//     acc.push(...processVariableFile(path))
-//     return acc
-//   }, []).sort((a, b) => a.name.localeCompare(b.name))
-// }
+export function parseGlobalSassVariables () {
+  return {
+    ...processVariableFile(`./../vuetify/src/styles/settings/_variables.scss`, ['$reset', '$color-pack', '$utilities']),
+    ...processVariableFile(`./../vuetify/src/styles/settings/_colors.scss`, 'all'),
+    ...processVariableFile(`./../vuetify/src/styles/settings/_elevations.scss`, []),
+  }
+}

packages/api-generator/src/index.ts

@@ -7,15 +7,15 @@ import { kebabCase } from './helpers/text'
 import type { ComponentData, DirectiveData } from './types'
 import { generateComposableDataFromTypes, generateDirectiveDataFromTypes } from './types'
 import Piscina from 'piscina'
-import { addDescriptions, addDirectiveDescriptions, addPropData, reportMissingDescriptions, stringifyProps } from './utils'
+import { addDescriptions, addDirectiveDescriptions, addPropData, reportMissingDescriptions, sortByKey, stringifyProps } from './utils'
 import * as os from 'os'
 import { mkdirp } from 'mkdirp'
 import { createVeturApi } from './vetur'
 import { rimraf } from 'rimraf'
 import { createWebTypesApi } from './web-types'
 import inspector from 'inspector'
 import yargs from 'yargs'
-import { parseSassVariables } from './helpers/sass'
+import { parseGlobalSassVariables, parseSassVariables } from './helpers/sass'
 
 const yar = yargs(process.argv.slice(2))
   .option('components', {
@@ -40,6 +40,10 @@ const componentsInfo: Record<string, { from: string }> = {
 type Truthy<T> = Exclude<T, null | undefined | 0 | '' | false>;
 const BooleanFilter = <T>(x: T): x is Truthy<T> => Boolean(x)
 
+function clamp (v: number, min: number, max: number) {
+  return Math.max(min, Math.floor(Math.min(max, v)))
+}
+
 const run = async () => {
   const argv = await yar.argv
 
@@ -49,7 +53,9 @@ const run = async () => {
   const pool = new Piscina({
     filename: path.resolve('./src/worker.ts'),
     niceIncrement: 10,
-    maxThreads: inspector.url() ? 1 : Math.max(1, Math.floor(Math.min(os.cpus().length / 2, os.freemem() / (1.1 * 1024 ** 3)))),
+    maxThreads: inspector.url()
+      ? 1
+      : clamp(os.freemem() / (1.1 * 1024 ** 3), 1, os.cpus().length / 2),
   })
 
   const template = await fs.readFile('./templates/component.d.ts', 'utf-8')
@@ -76,7 +82,7 @@ const run = async () => {
       const componentProps = stringifyProps(componentInstance.props)
       const sources = addPropData(componentName, data, componentProps)
       await addDescriptions(componentName, data, locales, sources)
-      const sass = parseSassVariables(componentName)
+      const sass = sortByKey(parseSassVariables(componentName))
 
       const component = {
         displayName: componentName,
@@ -91,6 +97,15 @@ const run = async () => {
     })
   )).filter(BooleanFilter)
 
+  // globalSass
+  const globalSass = {
+    fileName: 'globals',
+    displayName: 'globals',
+    pathName: 'globals',
+    sass: sortByKey(parseGlobalSassVariables()),
+  }
+  await fs.writeFile(path.resolve(outPath, `globals.json`), JSON.stringify(globalSass, null, 2))
+
   // Composables
   if (!argv.skipComposables) {
     const composables = await Promise.all((await generateComposableDataFromTypes()).map(async composable => {

packages/api-generator/src/utils.ts

@@ -229,6 +229,15 @@ export async function addDirectiveDescriptions (
   }
 }
 
+export function sortByKey (data: Record<string, any>) {
+  return Object.keys(data)
+    .sort()
+    .reduce((obj: Record<string, any>, key: string) => {
+      obj[key] = data[key]
+      return obj
+    }, {})
+}
+
 export function stripLinks (str: string): [string, Record<string, string>] {
   let out = str.slice()
   const obj: Record<string, string> = {}

packages/docs/auto-imports.d.ts

@@ -19,6 +19,7 @@ declare global {
   const camelCase: typeof import('lodash-es')['camelCase']
   const camelize: typeof import('vue')['camelize']
   const cleanCache: typeof import('./src/utils/pwa')['cleanCache']
+  const compressAndEncode: typeof import('./src/composables/bin')['compressAndEncode']
   const computed: typeof import('vue')['computed']
   const configureMarkdown: typeof import('./src/utils/markdown-it')['configureMarkdown']
   const copyElementContent: typeof import('./src/utils/helpers')['copyElementContent']
@@ -28,6 +29,7 @@ declare global {
   const createOne: typeof import('@vuetify/one')['createOne']
   const createPinia: typeof import('pinia')['createPinia']
   const customRef: typeof import('vue')['customRef']
+  const decodeAndDecompress: typeof import('./src/composables/bin')['decodeAndDecompress']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
   const defineStore: typeof import('pinia')['defineStore']
@@ -117,6 +119,7 @@ declare global {
   const useAppStore: typeof import('./src/stores/app')['useAppStore']
   const useAttrs: typeof import('vue')['useAttrs']
   const useAuthStore: typeof import('@vuetify/one')['useAuthStore']
+  const useBin: typeof import('./src/composables/bin')['useBin']
   const useCommitsStore: typeof import('./src/stores/commits')['useCommitsStore']
   const useCosmic: typeof import('./src/composables/cosmic')['useCosmic']
   const useCssModule: typeof import('vue')['useCssModule']
@@ -206,6 +209,7 @@ declare module 'vue' {
     readonly camelCase: UnwrapRef<typeof import('lodash-es')['camelCase']>
     readonly camelize: UnwrapRef<typeof import('vue')['camelize']>
     readonly cleanCache: UnwrapRef<typeof import('./src/utils/pwa')['cleanCache']>
+    readonly compressAndEncode: UnwrapRef<typeof import('./src/composables/bin')['compressAndEncode']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
     readonly configureMarkdown: UnwrapRef<typeof import('./src/utils/markdown-it')['configureMarkdown']>
     readonly copyElementContent: UnwrapRef<typeof import('./src/utils/helpers')['copyElementContent']>
@@ -214,6 +218,7 @@ declare module 'vue' {
     readonly createOne: UnwrapRef<typeof import('@vuetify/one')['createOne']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly decodeAndDecompress: UnwrapRef<typeof import('./src/composables/bin')['decodeAndDecompress']>
     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
@@ -298,6 +303,7 @@ declare module 'vue' {
     readonly useAppStore: UnwrapRef<typeof import('./src/stores/app')['useAppStore']>
     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
     readonly useAuthStore: UnwrapRef<typeof import('@vuetify/one')['useAuthStore']>
+    readonly useBin: UnwrapRef<typeof import('./src/composables/bin')['useBin']>
     readonly useCommitsStore: UnwrapRef<typeof import('./src/stores/commits')['useCommitsStore']>
     readonly useCosmic: UnwrapRef<typeof import('./src/composables/cosmic')['useCosmic']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -15,8 +15,8 @@
     "build": "vite build",
     "preview": "vite preview",
     "preview-https": "HTTPS=true vite preview",
-    "lint": "concurrently 'vue-tsc --noEmit --pretty' 'node --run lint:md' 'jest --no-cache' -n 'tsc,md,eslint' --kill-others-on-fail -gr",
-    "lint:fix": "node --run fix:md && JEST_FIX=true jest --no-cache",
+    "lint": "concurrently 'vue-tsc --noEmit --pretty' 'pnpm lint:md' 'jest --no-cache' -n 'tsc,md,eslint' --kill-others-on-fail -gr",
+    "lint:fix": "pnpm fix:md && JEST_FIX=true jest --no-cache",
     "lint:md": "markdownlint --config .markdownlintrc src/pages/en",
     "fix:md": "markdownlint --config .markdownlintrc src/pages/en --fix"
   },
@@ -26,7 +26,7 @@
     "@vue/compiler-dom": "^3.5.13",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^2.2.0",
+    "@vuetify/one": "^2.2.4",
     "algoliasearch": "^4.24.0",
     "fflate": "^0.8.2",
     "isomorphic-fetch": "^3.0.0",

packages/docs/src/App.vue

@@ -21,8 +21,16 @@
   const path = computed(() => route.path.replace(`/${locale.value}/`, ''))
 
   const meta = computed(() => {
+    let title = route.meta.title
+
+    // API pages
+    if (route.meta.title === 'API') {
+      const name = route.params.name as string
+      title = `${name.charAt(0).toUpperCase()}${camelize(name.slice(1))} API`
+    }
+
     return genAppMetaInfo({
-      title: `${route.meta.title}${path.value === '' ? '' : ' — Vuetify'}`,
+      title: `${title}${path.value === '' ? '' : ' — Vuetify'}`,
       description: frontmatter.value?.meta.description,
       keywords: frontmatter.value?.meta.keywords,
       assets: frontmatter.value?.assets,

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

@@ -15,6 +15,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>({})