Merge branch 'master' into fix/forced-colors-sliders

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.17",
+  "version": "3.6.3",
   "useWorkspaces": true
 }

package.json

@@ -43,7 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@unhead/vue": "^1.9.4",
-    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vueuse/head": "^1.3.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
@@ -82,7 +82,7 @@
     "upath": "^2.0.1",
     "vite-plugin-inspect": "^0.8.3",
     "vite-plugin-warmup": "^0.1.0",
-    "vue": "^3.4.21",
+    "vue": "^3.4.27",
     "vue-analytics": "^5.16.1",
     "vue-router": "^4.3.0",
     "vue-tsc": "^1.8.27",

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.17",
+  "version": "3.6.3",
   "private": true,
   "description": "",
   "scripts": {
@@ -16,8 +16,8 @@
     "prettier": "^3.2.5",
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
-    "vue": "^3.4.21",
-    "vuetify": "^3.5.17"
+    "vue": "^3.4.27",
+    "vuetify": "^3.6.3"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

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

@@ -4,6 +4,7 @@
     "flat": "Removes the button box shadow. This is different than using the 'flat' variant.",
     "icon": "Apply a specific icon using the [v-icon](/components/icons/) component. The button will become _round_.",
     "plain": "Removes the default background change applied when hovering over the button.",
+    "readonly": "Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard.",
     "stacked": "Displays the button as a flex-column.",
     "slim": "Reduces padding to 0 8px."
   },

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

@@ -23,7 +23,6 @@
     "itemClass": "Property on supplied `items` that contains item's row class or function that takes an item as an argument and returns the class of corresponding row.",
     "itemsPerPage": "Changes how many items per page should be visible. Can be used with `.sync` modifier. Setting this prop to `-1` will display all items on the page.",
     "locale": "Sets the locale used for sorting. This is passed into [`Intl.Collator()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator) in the default `customSort` function.",
-    "mobileBreakpoint": "Used to set when to toggle between regular table and mobile view.",
     "multiSort": "If `true` then one can sort on multiple properties.",
     "mustSort": "If `true` then one can not disable sorting, it will always switch between ascending and descending.",
     "page": "The current displayed page number (1-indexed).",

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

@@ -0,0 +1,7 @@
+{
+  "props": {
+    "hideWeekdays": "Hide the days of the week letters.",
+    "transition": "The transition used when changing months into the future",
+    "reverseTransition": "The transition used when changing months into the past"
+  }
+}

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

@@ -4,7 +4,7 @@
     "aspectRatio": "Calculated as `width/height`, so for a 1920x1080px image this will be `1.7778`. Will be calculated automatically if omitted.",
     "cover": "Resizes the background image to cover the entire container.",
     "draggable": "Controls the `draggable` behavior of the image. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable).",
-    "lazySrc": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.\n\nUse [vuetify-loader](https://github.com/vuetifyjs/vuetify-loader) to generate automatically. NOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided.",
+    "lazySrc": "Something to show while waiting for the main image to load, typically a small base64-encoded thumbnail. Has a slight blur filter applied.  \nNOTE: This prop has no effect unless either `height` or `aspect-ratio` are provided.",
     "crossorigin": "Specify that images should be fetched with CORS enabled [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#crossorigin)",
     "position": "Applies [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) styles to the image and placeholder elements.",
     "referrerpolicy": "Define which referrer is sent when fetching the resource [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy)",

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

@@ -0,0 +1,6 @@
+{
+  "props": {
+    "landscape": "Puts the picker into landscape mode.",
+    "hideHeader": "Hide the picker header."
+  }
+}

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

@@ -4,10 +4,13 @@
     "active": "Reduce the height to 0, hiding component.",
     "bgOpacity": "Background opacity, if null it defaults to 0.3 if background color is not specified or 1 otherwise.",
     "bottom": "Aligns the component towards the bottom.",
+    "bufferColor": "Sets the color of the buffer bar.",
+    "bufferOpacity": "Set the opacity of the buffer bar.",
     "bufferValue": "The percentage value for the buffer.",
     "clickable": "Clicking on the progress track will automatically set the value.",
     "indeterminate": "Constantly animates, use when loading progress is unknown.",
     "max": "Sets the maximum value the progress can reach.",
+    "opacity": "Set the opacity of the progress bar.",
     "reverse": "Displays reversed progress (right to left in LTR mode and left to right in RTL).",
     "roundedBar": "Applies a border radius to the progress bar.",
     "stream": "An alternative style for portraying loading that works in tandem with **buffer-value**.",

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

@@ -0,0 +1,9 @@
+{
+  "props": {
+    "displayValue": "The value that determines the month to show. This is different from modelValue, which determines the selected value.",
+    "month": "The current month number to show",
+    "weekdays": "An array of weekdays to display.",
+    "weeksInMonth": "A dynamic number of weeks in a month will grow and shrink depending on how many days are in the month. A static number always shows 7 weeks.",
+    "year": "The current year number to show"
+  }
+}

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

@@ -1,5 +1,6 @@
 {
   "props": {
-    "mobileBreakpoint": "Sets the designated mobile breakpoint for the component."
+    "mobile": "Determines the display mode of the component. If true, the component will be displayed in mobile mode. If false, the component will be displayed in desktop mode. If null, will be based on the current mobile-breakpoint",
+    "mobileBreakpoint": "Overrides the display configuration default screen size that the component should be considered in mobile."
   }
 }

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

@@ -37,6 +37,7 @@
     "modelValue": "The v-model value of the component. If component supports the **multiple** prop, this defaults to an empty array.",
     "name": "Sets the component's name attribute.",
     "noDataText": "Text shown when no items are provided to the component.",
+    "opacity": "Sets the component's opacity value",
     "origin": "Sets the transition origin on the element. You can find more information on the MDN documentation [for transition origin](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin).",
     "persistent": "Clicking outside or pressing **esc** key will not dismiss the dialog.",
     "persistentCounter": "Forces counter to always be visible.",

packages/api-generator/src/locale/en/v-click-outside.json

@@ -1,5 +1,3 @@
 {
-  "argument": {
-    "value": "By default takes a function that is invoked when user clicks outside of the element the directive is attached to. It can also be an object, which allows you to provide `closeConditional` and `include` callbacks."
-  }
+  "value": "Takes either a function that is invoked when user clicks outside of the element the directive is attached to, or an object containing `handler`, `closeConditional` and `include` callbacks."
 }

packages/api-generator/src/locale/en/v-intersect.json

@@ -1,9 +1,7 @@
 {
-  "argument": {
-    "value": "By default takes a handler function that is invoked when the element that the directive is attached to enters or leaves the visible browser area. It can also take an object, which allows you to pass along [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver)."
-  },
+  "value": "A handler function that is invoked when the element that the directive is attached to enters or leaves the visible browser area, or an object of [IntersectionObserver options](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver).",
   "modifiers": {
-    "once": "The provided handler function is only invoked once, the first time the element is visible.",
+    "once": "The handler function is only invoked once, the first time the element is visible.",
     "quiet": "Will not invoke the handler function if the element is visible when the IntersectionObserver is created."
   }
 }

packages/api-generator/src/locale/en/v-mutate.json

@@ -1,7 +1,5 @@
 {
-  "argument": {
-    "value": "By default takes a handler function that is invoked when the element that the directive is attached to is mutated. It can also take an object, which allows you to pass along [MutationObserver options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe)."
-  },
+  "value": "A handler function that is invoked when the element that the directive is attached to is mutated, or an object of [MutationObserver options](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe).",
   "modifiers": {
     "attr": "Sets the value of [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) to true.",
     "char": "Sets the value of [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) to true.",

packages/api-generator/src/locale/en/v-resize.json

@@ -1,9 +1,7 @@
 {
-  "argument": {
-    "value": "The provided handler function will be invoked each time the browser window is resized."
-  },
+  "value": "A function that will be invoked each time the browser window is resized.",
   "modifiers": {
     "active": "By default the resize event listener is added to window with the `passive` option. This modifier sets `passive` to **false**.",
-    "quiet": "By default the provided handler function is invoked once when the directive is attached to the element. This modifier disabled that behavior."
+    "quiet": "By default the provided handler function is invoked once when the directive is attached to the element. This modifier disables that behavior."
   }
 }

packages/api-generator/src/locale/en/v-ripple.json

@@ -1,7 +1,5 @@
 {
-  "argument": {
-    "value": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target."
-  },
+  "value": "An object containing options for the ripple effect. `class` applies a custom class to the ripple, and can be used for changing color. `center` forces the ripple to originate from the center of the target instead of the cursor position.",
   "modifiers": {
     "center": "Makes it so that the ripple originates from the center of the element, instead where the user clicked on it.",
     "circle": "Changes the ripple behavior to better match circular elements.",

packages/api-generator/src/locale/en/v-scroll.json

@@ -1,8 +1,6 @@
 {
-  "argument": {
-    "arg": "The argument can be used to specify a query selector to attach the scroll event listener to. If no argument is provided then it is attached to the window object.",
-    "value": "By default takes a handler function that is invoked whenever the target of the directive is scrolled. It can also take an object, which allows you to pass along event listener options as described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)."
-  },
+  "argument": "Specify a query selector to attach the scroll event listener to. If no argument is provided then it is attached to the window object.",
+  "value": "A handler function that is invoked whenever the target element is scrolled, or an object of [event listener options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).",
   "modifiers": {
     "self": "By default the scroll event listener is attached to the argument provided to the directive, interpreted as a query selector. If no argument is provided then it is attached to the window object. If this modifier is used then it is instead attached to the element the directive is used on."
   }

packages/api-generator/src/locale/en/v-tooltip.json

@@ -0,0 +1,4 @@
+{
+  "argument": "Applies the VTooltip location prop.",
+  "value": "**string**: Sets the tooltip content.  \n**boolean**: Controls visibility, tooltip content will be the innerText of the bound element.  \n**object**: Use any [VTooltip props](/api/v-tooltip), content can be set with `text`. Keys are camelCase."
+}

packages/api-generator/src/locale/en/v-touch.json

@@ -1,5 +1,3 @@
 {
-  "argument": {
-    "value": "The value is always an object. The `start`, `end`, `move`, `left`, `right`, `up` and `down` functions can be used to invoke a function when the corresponding touch action occurs. If the `parent` option attaches the touch listeners to the parent element instead of the element the directive is used on. The `options` object is described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)."
-  }
+  "value": "The value is always an object. The `start`, `end`, `move`, `left`, `right`, `up` and `down` functions can be used to invoke a function when the corresponding touch action occurs. If the `parent` option attaches the touch listeners to the parent element instead of the element the directive is used on. The `options` object is described [here](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)."
 }

packages/api-generator/src/shims.d.ts

@@ -1,4 +1,4 @@
-import { ts } from '@ts-morph/common'
+import '@ts-morph/common'
 
 declare module 'ts-morph' {
   export interface Type {
@@ -18,3 +18,5 @@ declare module 'ts-morph' {
     }
   }
 }
+
+export {}

packages/api-generator/src/types.ts

@@ -81,7 +81,8 @@ export async function generateDirectiveDataFromTypes (): Promise<DirectiveData[]
         fileName: `v-${kebabName}`,
         displayName: `v-${kebabName}`,
         pathName: `v-${kebabName}-directive`,
-        argument: { value: await prettifyType(name, (data as ObjectDefinition).properties.value) },
+        value: await prettifyType(name, (data as ObjectDefinition).properties.value),
+        argument: (data as ObjectDefinition).properties.arg,
         modifiers: ((data as ObjectDefinition).properties.modifiers as ObjectDefinition).properties,
       }
     })
@@ -91,10 +92,17 @@ export async function generateDirectiveDataFromTypes (): Promise<DirectiveData[]
 export async function generateComponentDataFromTypes (component: string): Promise<ComponentData> {
   const sourceFile = project.addSourceFileAtPath(`./templates/tmp/${component}.d.ts`)
 
-  const props = await inspect(project, sourceFile.getTypeAlias('ComponentProps'))
-  const events = await inspect(project, sourceFile.getTypeAlias('ComponentEvents'))
-  const slots = await inspect(project, sourceFile.getTypeAlias('ComponentSlots'))
-  const exposed = await inspect(project, sourceFile.getTypeAlias('ComponentExposed'))
+  const [
+    props,
+    events,
+    slots,
+    exposed,
+  ] = await Promise.all([
+    inspect(project, sourceFile.getTypeAlias('ComponentProps')),
+    inspect(project, sourceFile.getTypeAlias('ComponentEvents')),
+    inspect(project, sourceFile.getTypeAlias('ComponentSlots')),
+    inspect(project, sourceFile.getTypeAlias('ComponentExposed')),
+  ])
 
   const sections = [props, events, slots, exposed]
 
@@ -114,6 +122,10 @@ export async function generateComponentDataFromTypes (component: string): Promis
     events: events.properties,
     slots: slots.properties,
     exposed: exposed.properties,
+    displayName: component,
+    fileName: component,
+    pathName: kebabCase(component),
+    sass: {},
   }
 }
 
@@ -217,6 +229,7 @@ export type ComponentData = BaseData & {
   slots: Record<string, Definition>
   events: Record<string, Definition>
   exposed: Record<string, Definition>
+  value?: never
   argument?: never
   modifiers?: never
 }
@@ -226,7 +239,8 @@ export type DirectiveData = BaseData & {
   slots?: never
   events?: never
   exposed?: never
-  argument: { value: Definition }
+  value: Definition
+  argument: Definition
   modifiers: Record<string, Definition>
 }
 export type ComposableData = BaseData & {
@@ -235,6 +249,7 @@ export type ComposableData = BaseData & {
   slots?: never
   events?: never
   exposed: Record<string, Definition>
+  value?: never
   argument?: never
   modifiers?: never
 }
@@ -268,21 +283,21 @@ function getSource (declaration?: Node<ts.Node>) {
   return filePath && startLine ? `${filePath}#L${startLine}-L${endLine}` : undefined
 }
 
-function listFlags (flags: object, value?: number) {
-  if (!value) return []
+// function listFlags (flags: object, value?: number) {
+//   if (!value) return []
 
-  const entries = Object.entries(flags).filter(([_, flag]) => typeof flag === 'number')
+//   const entries = Object.entries(flags).filter(([_, flag]) => typeof flag === 'number')
 
-  return entries.reduce<string[]>((arr, [name, flag]) => {
-    if (value & flag) {
-      arr.push(name)
-    }
-    return arr
-  }, [])
-}
+//   return entries.reduce<string[]>((arr, [name, flag]) => {
+//     if (value & flag) {
+//       arr.push(name)
+//     }
+//     return arr
+//   }, [])
+// }
 
 function getCleanText (text: string) {
-  return text.replaceAll(/import\(.*?\)\./g, '')
+  return text.replace(/import\(.*?\)\./g, '')
 }
 
 function count (arr: string[], needle: string) {
@@ -294,6 +309,7 @@ function count (arr: string[], needle: string) {
 // Types that are displayed as links
 const allowedRefs = [
   'Anchor',
+  'ActiveStrategy',
   'DataIteratorItem',
   'DataTableHeader',
   'DataTableItem',
@@ -304,12 +320,15 @@ const allowedRefs = [
   'ListItem',
   'LocationStrategyFn',
   'OpenSelectStrategyFn',
+  'OpenStrategy',
   'OpenStrategyFn',
   'ScrollStrategyFn',
   'SelectItemKey',
+  'SelectStrategy',
   'SelectStrategyFn',
   'SortItem',
   'SubmitEventPromise',
+  'TemplateRef',
   'TouchHandlers',
   'ValidationRule',
 ]
@@ -607,7 +626,7 @@ function getRecursiveTypes (recursiveTypes: string[], type: Type<ts.Type>) {
 function findPotentialRecursiveTypes (type?: Type<ts.Type>): string[] {
   if (type == null) return []
 
-  const recursiveTypes = []
+  const recursiveTypes: string[] = []
 
   if (type.isUnion()) {
     recursiveTypes.push(...getUnionTypes(type).map(t => t.getText()))