Merge branch 'master' into dev

Author: KaelWD

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.10.3"
+  "version": "3.10.4"
 }

packages/api-generator/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/api-generator",
   "type": "module",
-  "version": "3.10.3",
+  "version": "3.10.4",
   "private": true,
   "description": "",
   "scripts": {

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

@@ -1,5 +1,6 @@
 {
   "props": {
+    "alwaysFilter": "When enabled, dropdown list will always show items matching non-empty value within the field. Recommended when the list is meant to show suggestions rather than options to choose from. For optimal UX, should be combined with `:menu-icon=\"false\"` and `hide-selected`.",
     "autoSelectFirst": "When searching, will always highlight the first option and select it on blur. `exact` will only highlight and select exact matches.",
     "clearOnSelect": "Reset the search text when a selection is made while using the **multiple** prop.",
     "itemChildren": "This property currently has **no effect**.",

packages/docs/package.json

@@ -4,7 +4,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.10.3",
+  "version": "3.10.4",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",

packages/docs/src/components/introduction/ConsultingServices.vue

@@ -13,22 +13,24 @@
 
     <v-container class="pt-9 px-5" fluid>
       <v-row justify="space-around" dense>
-        <template v-for="({ src, text, href, name}, i) in cards" :key="i">
+        <template v-for="({ text, href, name, btnText, notes }, i) in cards" :key="i">
           <v-col cols="12" md="6">
             <v-responsive class="h-100" content-class="d-flex flex-column">
               <h3 class="d-flex align-center text-h6 font-weight-medium mb-4">
-                <v-avatar :image="src" class="me-3" />
-                <div>
-                  {{ name }}
-                </div>
+                {{ name }}
               </h3>
 
-              <div class="text-caption mb-auto">{{ text }}</div>
+              <div class="mb-auto text-caption">
+                <div class="mb-4">{{ text }}</div>
+                <ul v-if="notes && notes.length" class="mb-0 ml-5">
+                  <li v-for="(item, j) in notes" :key="j">{{ item }}</li>
+                </ul>
+              </div>
 
               <v-btn
                 :href="href"
-                :text="name === 'Frontend Code Audit' ? 'Request Audit' : 'Learn more'"
-                :variant="i === 1 ? 'flat' : 'outlined'"
+                :text="btnText"
+                :variant="i === 3 ? 'flat' : 'outlined'"
                 class="text-none mt-8"
                 color="primary"
                 rel="noopener"
@@ -54,28 +56,30 @@
 <script setup>
   const cards = [
     {
-      name: 'Development and Support',
-      href: 'https://www.epicmax.co/what-we-do?ref=vuetify',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/planetary.png',
-      text: 'Epicmax provides dedicated development and ongoing support for Vuetify-based projects, ensuring your product is built and maintained with best practices for maximum performance and stability.',
+      name: '🧩 Vuetify App Development',
+      href: 'https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ1ICL1_pVx87WpbxCeAKPNljw8Wr8Og4-NuzbUV-RHlxs-c_B8s2nYZ0RAWPcVqTx4Dn568c5OA',
+      text: 'Epicmax helps companies build and improve Vuetify apps of any size - from brand-new products to complex legacy systems. Our senior Vue.js team resolves performance issues, modernizes legacy codebases, and develops scalable frontend architectures with clean, intuitive UI/UX designs. If you need reliable Vuetify experts to optimize, upgrade, or extend your app, we’ve got you covered.',
+      btnText: 'Book a Consultation',
     },
     {
-      name: 'Frontend Code Audit',
-      href: 'https://www.epicmax.co/code-audit?ref=vuetify',
-      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/galaxy.png',
-      text: 'Identify and resolve potential issues in your frontend code with a thorough audit from Epicmax\'s seasoned experts. Their in-depth analysis ensures that your codebase is optimized, clean, and ready for scale. Use code "VUETIFY" to get 20% off.',
+      name: '🔁 Vuetify 2 → Vuetify 3 Migration',
+      href: 'https://epicmax.co/vue-3-migration#migration-form',
+      text: 'Still running on Vuetify 2? Our Vuetify migration experts ensure a smooth upgrade to Vuetify 3 - with zero downtime, clear budget estimates, and long-term support.',
+      notes: ['⚙️ Every migration includes a free audit and upgrade plan.'],
+      btnText: 'Request Migration',
     },
     {
-      name: 'Flexible Consulting',
-      href: 'https://www.epicmax.co/?ref=vuetify',
-      src: 'https://cdn.vuetifyjs.com/docs/images/avatars/multiverse.png',
-      text: 'Whether you need short-term assistance or a long-term strategy, Epicmax provides flexible consulting services that adapt to your specific project needs and timeline.',
+      name: '🔍 Frontend Code Audit Services',
+      href: 'https://epicmax.co/code-audit#request_form',
+      text: 'Ensure your app runs at its best with Epicmax’s Vue.js and Vuetify code audit services. We provide a detailed technical review, highlight performance bottlenecks, and deliver a prioritized roadmap with actionable fixes.',
+      notes: ['💡 Use code VUETIFY for 20% off.'],
+      btnText: 'Request an Audit',
     },
     {
-      name: 'Team Augmentation',
-      href: 'https://www.epicmax.co/?ref=vuetify',
-      src: 'https://cdn.vuetifyjs.com/docs/images/discord/tiers/gold.png',
-      text: 'Epicmax can boost your team with skilled developers who integrate seamlessly into your workflow. Whether for short-term projects or ongoing support, they help you scale and meet your goals efficiently.',
+      name: '👨‍💻 Hire Senior Vuetify Developers',
+      href: 'https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ1ICL1_pVx87WpbxCeAKPNljw8Wr8Og4-NuzbUV-RHlxs-c_B8s2nYZ0RAWPcVqTx4Dn568c5OA',
+      text: 'Scale your team with Epicmax’s senior Vue.js and Vuetify developers. Our engineers seamlessly integrate into your workflow, modernize legacy Vue.js applications, optimize frontend performance, and build scalable web applications with clean, reliable UI/UX.',
+      btnText: 'Hire Developers',
     },
   ]
 </script>

packages/docs/src/data/new-in.json

@@ -60,6 +60,7 @@
   },
   "VCombobox": {
     "props": {
+      "alwaysFilter": "3.10.4",
       "autocomplete": "3.10.0",
       "clearOnSelect": "3.5.0",
       "listProps": "3.5.0"

packages/docs/src/examples/transitions/misc-expand-x-padding.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-btn class="ma-2" color="primary" @click="expand = !expand">
+        Expand Transition
+      </v-btn>
+
+      <v-expand-x-transition>
+        <v-responsive v-show="expand" width="fit-content">
+          <v-alert
+            class="text-no-wrap"
+            text="Smooth transition here"
+            type="info"
+          ></v-alert>
+        </v-responsive>
+      </v-expand-x-transition>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const expand = ref(false)
+</script>
+
+<script>
+  export default {
+    data: () => ({
+      expand: false,
+    }),
+  }
+</script>

packages/docs/src/examples/v-data-table/virtual-custom.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-app>
+    <v-container>
+      <v-chip-group v-model="selectedSize" class="mb-4" mandatory row>
+        <v-chip
+          v-for="size in sizes"
+          :key="size"
+          :value="size"
+          color="primary"
+          variant="outlined"
+        >
+          {{ size }} items
+        </v-chip>
+      </v-chip-group>
+
+      <v-data-table-virtual
+        :headers="headers"
+        :items="items"
+        height="400"
+        item-key="id"
+        fixed-header
+      >
+        <template v-slot:item="{ columns, internalItem, props, itemRef }">
+          <tr v-bind="props" :ref="itemRef">
+            <td v-for="column in columns" :key="column.key">
+              {{ internalItem.raw[column.key] }}
+            </td>
+          </tr>
+        </template>
+      </v-data-table-virtual>
+    </v-container>
+  </v-app>
+</template>
+
+<script setup>
+  import { computed, ref } from 'vue'
+
+  const sizes = [100, 400, 800]
+  const selectedSize = ref(100)
+
+  const headers = [
+    { title: 'ID', value: 'id', sortable: true },
+    { title: 'Title', value: 'title', sortable: true },
+    { title: 'Name', value: 'name', sortable: true },
+    { title: 'Email', value: 'email', sortable: true },
+    { title: 'Role', value: 'role', sortable: true },
+  ]
+
+  const baseItems = [
+    { title: 'Mr.', name: 'James Smith', email: '[email protected]', role: 'Owner' },
+    { title: 'Ms.', name: 'Mary Johnson', email: '[email protected]', role: 'Manager' },
+    { title: 'Dr.', name: 'Robert Williams', email: '[email protected]', role: 'Board Member' },
+    { title: 'Mrs.', name: 'Patricia Brown', email: '[email protected]', role: 'Developer' },
+    { title: 'Mr.', name: 'John Davis', email: '[email protected]', role: 'Designer' },
+    { title: 'Ms.', name: 'Jennifer Garcia', email: '[email protected]', role: 'Manager' },
+    { title: 'Mr.', name: 'Michael Miller', email: '[email protected]', role: 'Owner' },
+    { title: 'Mrs.', name: 'Linda Martinez', email: '[email protected]', role: 'Developer' },
+    { title: 'Dr.', name: 'William Rodriguez', email: '[email protected]', role: 'Board Member' },
+    { title: 'Ms.', name: 'Elizabeth Hernandez', email: '[email protected]', role: 'Designer' },
+    { title: 'Mr.', name: 'David Lopez', email: '[email protected]', role: 'Manager' },
+    { title: 'Mrs.', name: 'Barbara Gonzalez', email: '[email protected]', role: 'Owner' },
+  ]
+
+  const items = computed(() => {
+    return Array.from({ length: selectedSize.value }).map((_, i) => {
+      const base = baseItems[i % baseItems.length]
+      return { id: i + 1, ...base }
+    })
+  })
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        sizes: [100, 400, 800],
+        selectedSize: 100,
+        headers: [
+          { title: 'ID', value: 'id', sortable: true },
+          { title: 'Title', value: 'title', sortable: true },
+          { title: 'Name', value: 'name', sortable: true },
+          { title: 'Email', value: 'email', sortable: true },
+          { title: 'Role', value: 'role', sortable: true },
+        ],
+        baseItems: [
+          { title: 'Mr.', name: 'James Smith', email: '[email protected]', role: 'Owner' },
+          { title: 'Ms.', name: 'Mary Johnson', email: '[email protected]', role: 'Manager' },
+          { title: 'Dr.', name: 'Robert Williams', email: '[email protected]', role: 'Board Member' },
+          { title: 'Mrs.', name: 'Patricia Brown', email: '[email protected]', role: 'Developer' },
+          { title: 'Mr.', name: 'John Davis', email: '[email protected]', role: 'Designer' },
+          { title: 'Ms.', name: 'Jennifer Garcia', email: '[email protected]', role: 'Manager' },
+          { title: 'Mr.', name: 'Michael Miller', email: '[email protected]', role: 'Owner' },
+          { title: 'Mrs.', name: 'Linda Martinez', email: '[email protected]', role: 'Developer' },
+          { title: 'Dr.', name: 'William Rodriguez', email: '[email protected]', role: 'Board Member' },
+          { title: 'Ms.', name: 'Elizabeth Hernandez', email: '[email protected]', role: 'Designer' },
+          { title: 'Mr.', name: 'David Lopez', email: '[email protected]', role: 'Manager' },
+          { title: 'Mrs.', name: 'Barbara Gonzalez', email: '[email protected]', role: 'Owner' },
+        ],
+      }
+    },
+
+    computed: {
+      items () {
+        return Array.from({ length: this.selectedSize }).map((_, i) => {
+          const base = this.baseItems[i % this.baseItems.length]
+          return { id: i + 1, ...base }
+        })
+      },
+    },
+  }
+</script>

packages/docs/src/pages/en/components/data-tables/virtual-tables.md

@@ -35,3 +35,7 @@ The v-data-table-virtual component relies on all data being available locally. B
 ### Basic example
 
 <ExamplesExample file="v-data-table/virtual" />
+
+When customizing rows with the `#item` slot, you must bind the provided `itemRef` to your `<tr>`. This ensures that the virtual scroller can correctly measure and recycle rows.
+
+<ExamplesExample file="v-data-table/virtual-custom" />

packages/docs/src/pages/en/features/internationalization.md

@@ -173,7 +173,7 @@ If you are building custom Vuetify components that need to hook into the locale
 
 ## vue-i18n
 
-If you are using the vue-i18n library, you can very easily integrate it with Vuetify. This allows you to keep all of your translations in one place. Simply create an entry for $vuetify within your messages and add the corresponding language changes. Then hook up vue-i18n to Vuetify by using the provided adapter function (as seen in the example below).
+If you are using the vue-i18n library, you can very easily integrate it with Vuetify. This allows you to keep all of your translations in one place. Simply use the spread operator to import the existing Vuetify messages and add the corresponding language changes. Then hook up vue-i18n to Vuetify by using the provided adapter function (as seen in the example below).
 
 ```js { resource="src/main.js" }
 import { createApp } from 'vue'
@@ -184,21 +184,19 @@ import { en, sv } from 'vuetify/locale'
 
 const messages = {
   en: {
-    $vuetify: {
-      ...en,
-      dataIterator: {
-        rowsPerPageText: 'Items per page:',
-        pageText: '{0}-{1} of {2}',
-      },
+    ...en,
+    dataFooter: {
+      ...en.dataFooter,
+      itemsPerPageText: 'Items per page:',
+      pageText: '{0}-{1} of {2}',
     },
   },
   sv: {
-    $vuetify: {
-      ...sv,
-      dataIterator: {
-        rowsPerPageText: 'Element per sida:',
-        pageText: '{0}-{1} av {2}',
-      },
+    ...sv,
+    dataFooter: {
+      ...sv.dataFooter,
+      itemsPerPageText: 'Element per sida:',
+      pageText: '{0}-{1} av {2}',
     },
   },
 }