Merge branch 'master' into dev

.eslintrc.js

@@ -94,6 +94,14 @@ module.exports = {
     'vue/require-prop-types': 'off',
     'vue/one-component-per-file': 'off',
     'vue/custom-event-name-casing': ['error', { ignores: ['/^[a-z]+(?:-[a-z]+)*:[a-z]+(?:-[a-z]+)*$/u'] }],
+
+    'vue/attributes-order': ['error', {
+      order: [
+        'DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'UNIQUE', 'GLOBAL', 'SLOT',
+        'TWO_WAY_BINDING', 'ATTR_DYNAMIC', 'ATTR_STATIC', 'ATTR_SHORTHAND_BOOL', 'OTHER_DIRECTIVES', 'EVENTS', 'CONTENT',
+      ],
+      alphabetical: true,
+    }],
   },
   overrides: [
     {

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+name: 'Close stale issues'
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '08 11 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          days-before-stale: 180
+          days-before-close: 14
+          only-labels: 'S: triage'
+          stale-issue-label: 'S: stale'
+          stale-pr-label: 'S: stale'
+          exempt-all-milestones: true
+          exempt-draft-pr: true

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "useWorkspaces": true
 }

package.json

@@ -43,12 +43,12 @@
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "@unhead/vue": "^1.8.9",
-    "@vue/compiler-sfc": "^3.4.7",
+    "@vue/compiler-sfc": "^3.4.19",
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
     "conventional-changelog-cli": "^4.1.0",
-    "conventional-changelog-vuetify": "^1.1.0",
+    "conventional-changelog-vuetify": "^1.2.1",
     "conventional-github-releaser": "^3.1.5",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
@@ -82,10 +82,14 @@
     "upath": "^2.0.1",
     "vite-plugin-inspect": "^0.7.42",
     "vite-plugin-warmup": "^0.1.0",
-    "vue": "^3.4.7",
+    "vue": "^3.4.19",
     "vue-analytics": "^5.16.1",
     "vue-router": "^4.2.5",
     "vue-tsc": "^1.8.27",
     "yargs": "^17.7.2"
+  },
+  "resolutions": {
+    "conventional-changelog": "4.0.0",
+    "conventional-changelog-preset-loader": "3.0.0"
   }
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.3",
+  "version": "3.5.8",
   "private": true,
   "description": "",
   "scripts": {
@@ -16,8 +16,8 @@
     "prettier": "^3.1.1",
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
-    "vue": "^3.4.7",
-    "vuetify": "^3.5.3"
+    "vue": "^3.4.19",
+    "vuetify": "^3.5.8"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

packages/api-generator/src/index.ts

@@ -4,6 +4,7 @@ import { components } from 'vuetify/dist/vuetify-labs.js'
 import importMap from 'vuetify/dist/json/importMap.json' assert { type: 'json' }
 import importMapLabs from 'vuetify/dist/json/importMap-labs.json' assert { type: 'json' }
 import { kebabCase } from './helpers/text'
+import type { BaseData, ComponentData, DirectiveData } from './types'
 import { generateComposableDataFromTypes, generateDirectiveDataFromTypes } from './types'
 import Piscina from 'piscina'
 import { addDescriptions, addDirectiveDescriptions, addPropData, stringifyProps } from './utils'
@@ -36,6 +37,9 @@ const componentsInfo: Record<string, { from: string }> = {
   ...importMapLabs.components,
 }
 
+type Truthy<T> = Exclude<T, null | undefined | 0 | '' | false>;
+const BooleanFilter = <T>(x: T): x is Truthy<T> => Boolean(x)
+
 const run = async () => {
   const argv = await yar.argv
 
@@ -64,7 +68,7 @@ const run = async () => {
   const outPath = path.resolve('./dist/api')
   await mkdirp(outPath)
 
-  const componentData = await Promise.all(
+  const componentData = (await Promise.all(
     Object.entries(components).map(async ([componentName, componentInstance]) => {
       if (argv.components && !argv.components.includes(componentName)) return null
 
@@ -74,40 +78,50 @@ const run = async () => {
       await addDescriptions(componentName, data, locales, sources)
       const sass = parseSassVariables(componentName)
 
-      const component = { displayName: componentName, fileName: kebabCase(componentName), ...data, sass }
-      await fs.writeFile(path.resolve(outPath, `${componentName}.json`), JSON.stringify(component, null, 2))
+      const component = {
+        displayName: componentName,
+        fileName: componentName,
+        pathName: kebabCase(componentName),
+        ...data,
+        sass,
+      } satisfies ComponentData
+      await fs.writeFile(path.resolve(outPath, `${component.fileName}.json`), JSON.stringify(component, null, 2))
 
       return component
-    }).filter(Boolean)
-  )
+    })
+  )).filter(BooleanFilter)
 
   // Composables
   if (!argv.skipComposables) {
     const composables = await Promise.all((await generateComposableDataFromTypes()).map(async composable => {
-      console.log(blue, composable.name, reset)
-      const kebabName = kebabCase(composable.name)
-      await addDescriptions(composable.name, composable.data, locales)
-      return { fileName: kebabName, displayName: composable.name, ...composable }
+      console.log(blue, composable.displayName, reset)
+      await addDescriptions(composable.fileName, composable, locales)
+      return composable
     }))
 
-    for (const { displayName, fileName, data } of composables) {
-      await fs.writeFile(path.resolve(outPath, `${displayName}.json`), JSON.stringify({ displayName, fileName, ...data }, null, 2))
+    for (const composable of composables) {
+      await fs.writeFile(
+        path.resolve(outPath, `${composable.fileName}.json`),
+        JSON.stringify(composable, null, 2)
+      )
     }
   }
 
   // Directives
-  let directives: any[] = []
+  let directives: DirectiveData[] = []
   if (!argv.skipDirectives) {
-    directives = await Promise.all((await generateDirectiveDataFromTypes()).map(async directive => {
-      const name = `v-${kebabCase(directive.name)}`
-      console.log(blue, name, reset)
-      await addDirectiveDescriptions(name, directive, locales)
+    directives = await Promise.all((await generateDirectiveDataFromTypes()).map(async data => {
+      console.log(blue, data.fileName, reset)
+      await addDirectiveDescriptions(data.fileName, data, locales)
 
-      return { fileName: name, displayName: name, ...directive }
+      return data
     }))
 
-    for (const { displayName, fileName, ...directive } of directives) {
-      await fs.writeFile(path.resolve(outPath, `${fileName}.json`), JSON.stringify({ displayName, fileName, ...directive }, null, 2))
+    for (const directive of directives) {
+      await fs.writeFile(
+        path.resolve(outPath, `${directive.fileName}.json`),
+        JSON.stringify(directive, null, 2)
+      )
     }
   }
 

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

@@ -5,6 +5,7 @@
     "closableChips": "Enables the [closable](/api/v-chip/#props-closable) prop on all [v-chip](/components/chips/) components.",
     "hideSelected": "Do not display in the select menu items that are already selected.",
     "itemColor": "Sets color of selected items.",
+    "listProps": "Pass props through to the `v-list` component. Accepts an object with anything from [v-list](/api/v-list/#props) props, camelCase keys are recommended.",
     "menuProps": "Pass props through to the `v-menu` component. Accepts an object with anything from [v-menu](/api/v-menu/#props) props, camelCase keys are recommended.",
     "multiple": "Changes select to multiple. Accepts array for value.",
     "openOnClear": "Open's the menu whenever the clear icon is clicked.",

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

@@ -6,5 +6,8 @@
     "plain": "Removes the default background change applied when hovering over the button.",
     "stacked": "Displays the button as a flex-column.",
     "slim": "Reduces padding to 0 8px."
+  },
+  "exposed": {
+    "group": "Internal representation when used in VBtnToggle."
   }
 }

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

@@ -3,7 +3,6 @@
     "centerActive": "Forces the selected chip to be centered.",
     "column": "Remove horizontal pagination and wrap items as needed.",
     "filter": "Applies an checkmark icon in front of every chip for using it like a filter.",
-    "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "nextIcon": "Specify the icon to use for the next icon.",
     "prependIcon": "This icon used in the prepend slot (if shown).",
     "prevIcon": "Specify the icon to use for the prev icon.",

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

@@ -0,0 +1,6 @@
+{
+  "props": {
+    "cancelText": "Text for the cancel button",
+    "okText": "Text for the ok button"
+  }
+}

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

@@ -1,8 +1,10 @@
 {
   "props": {
+    "cellProps": "An object of additional props to be passed to each `<td>` in the table body. Also accepts a function that will be called for each cell. If the same prop is defined both here and in `cellProps` in a headers object, the value from the headers object will be used.",
     "loading": "Displays `loading` slot if set to `true`",
     "loadingText": "Text shown when the data is loading.",
-    "multiSort": "Allows sorting by multiple columns."
+    "multiSort": "Allows sorting by multiple columns.",
+    "rowProps": "An object of additional props to be passed to each `<tr>` in the table body. Also accepts a function that will be called for each row."
   },
   "events": {
     "click:row": "Emitted when a row is clicked. Native event is passed as the first argument, row data as the second."

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

@@ -1,6 +1,5 @@
 {
   "props": {
-    "activePicker": "Determines which picker in the date or month picker is being displayed. Allowed values: `'DATE'`, `'MONTH'`, `'YEAR'`.",
     "allowedDates": "Restricts which dates can be selected.",
     "calendarIcon": "The icon shown in the header when in 'input' **input-mode**.",
     "dayFormat": "Allows you to customize the format of the day string that appears in the date table. Called with date (ISO 8601 **date** string) arguments.",
@@ -18,6 +17,7 @@
     "localeFirstDayOfYear": "Sets the day that determines the first week of the year, starting with 0 for **Sunday**. For ISO 8601 this should be 4.",
     "max": "Maximum allowed date/month (ISO 8601 format).",
     "min": "Minimum allowed date/month (ISO 8601 format).",
+    "modeIcon": "Icon displayed next to the current month and year, toggles year selection when clicked.",
     "monthFormat": "Formatting function used for displaying months in the months table. Called with date (ISO 8601 **date** string) arguments.",
     "multiple": "Allow the selection of multiple dates. The **range** value selects all dates between two selections.",
     "nextIcon": "Sets the icon for next month/year button.",
@@ -33,6 +33,7 @@
     "titleDateFormat": "Allows you to customize the format of the date string that appears in the title of the date picker. Called with date (ISO 8601 **date** string) arguments.",
     "type": "Determines the type of the picker - `date` for date picker, `month` for month picker.",
     "value": "Date picker model (ISO 8601 format, YYYY-mm-dd or YYYY-mm).",
+    "viewMode": "Determines which picker in the date or month picker is being displayed. Allowed values: `'month'`, `'months'`, `'year'`.",
     "weekdayFormat": "Allows you to customize the format of the weekday string that appears in the body of the calendar. Called with date (ISO 8601 **date** string) arguments.",
     "width": "Width of the picker.",
     "yearFormat": "Allows you to customize the format of the year string that appears in the header of the calendar. Called with date (ISO 8601 **date** string) arguments.",
@@ -43,7 +44,6 @@
     "<domevent>:month": "Emitted when the specified DOM event occurs on the month button.",
     "<domevent>:year": "Emitted when the specified DOM event occurs on the year button.",
     "change": "Reactive date picker emits `input` even when any part of the date (year/month/day) changes, but `change` event is emitted only when the day (for date pickers) or month (for month pickers) changes. If `range` prop is set, date picker emits `change` when both [from, to] are selected.",
-    "update:activePicker": "The `.sync` event for `active-picker` prop.",
     "update:pickerDate": "The `.sync` event for `picker-date` prop."
   }
 }

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

@@ -0,0 +1,18 @@
+{
+  "props": {
+    "actionText": "The text used for the action button.",
+    "headline": "A large headline often used for 404 pages.",
+    "href": "The URL the action button links to.",
+    "justify": "Control the justification of the text.",
+    "textWidth": "Sets the width of the text container.",
+    "to": "The URL the action button links to."
+  },
+  "events": {
+    "click:action": "Event emitted when the action button is clicked."
+  },
+  "slots": {
+    "actions": "Slot for the action button.",
+    "headline": "Slot for the component's headline.",
+    "media": "Slot for the component's media."
+  }
+}

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

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "app": "If true, attaches to the closest layout and positions according to the value of **location**.",
+    "appear": "Used to control the animation of the FAB.",
+    "extended": "An alternate style for the FAB that expects text.",
+    "location": "The location of the fab relative to the layout. Only works when using **app**.",
+    "offset": "Translates the Fab up or down, depending on if location is set to **top** or **bottom**."
+  }
+}

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

@@ -1,6 +1,7 @@
 {
   "props": {
     "attach": "Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or `true` to disable teleporting. Uses `body` by default. Generally not recommended except as a last resort: the default positioning algorithm should handle most scenarios better than is possible without teleporting, and you may have unexpected behavior if the menu ends up as child of its activator.",
+    "id": "The unique identifier of the component.",
     "closeOnClick": "Designates if menu should close on outside-activator click.",
     "closeOnContentClick": "Designates if menu should close when its content is clicked.",
     "closeDelay": "Milliseconds to wait before closing component. Only works with the **open-on-hover** prop.",

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

@@ -1,6 +1,7 @@
 {
   "props": {
     "centerActive": "Forces the selected component to be centered.",
+    "direction": "Switch between horizontal and vertical modes.",
     "mobileBreakpoint": "Sets the designated mobile breakpoint for the component.",
     "nextIcon": "The appended slot when arrows are shown.",
     "prevIcon": "The prepended slot when arrows are shown.",

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

@@ -0,0 +1,5 @@
+{
+  "props": {
+    "mobileBreakpoint": "Sets the designated mobile breakpoint for the component."
+  }
+}

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

@@ -1,5 +1,6 @@
 {
   "props": {
-    "rounded": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius)."
+    "rounded": "Designates the **border-radius** applied to the component. You can find more information on the [Border Radius page](/styles/border-radius).",
+    "tile": "Removes any applied **border-radius** from the component."
   }
 }