Merge branch 'master' into dev

lerna.json

@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "useWorkspaces": true
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
     "vue": "^3.4.7",
-    "vuetify": "^3.4.10"
+    "vuetify": "^3.4.11"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

packages/api-generator/src/web-types.ts

@@ -54,7 +54,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
     const createTagValue = (type: string) => {
       return {
         kind: 'expression',
-        type,
+        type: type?.trim(),
       }
     }
 
@@ -111,7 +111,7 @@ export const createWebTypesApi = (componentData: ComponentData[], directiveData:
     const createAttributeValue = (argument: any) => {
       return {
         kind: 'expression',
-        type: argument.type,
+        type: argument.type?.trim(),
       }
     }
 

packages/docs/package.json

@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.4.10"
+    "vuetify": "^3.4.11"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.4.7",
-    "@vuetify/api-generator": "^3.4.10",
+    "@vuetify/api-generator": "^3.4.11",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",

packages/docs/src/App.vue

@@ -1,5 +1,9 @@
 <template>
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <v-fade-transition appear>
+      <component :is="Component" />
+    </v-fade-transition>
+  </router-view>
 </template>
 
 <script setup lang="ts">

packages/docs/src/components/promoted/Entry.vue

@@ -1,39 +1,12 @@
 <template>
-  <carbon
-    v-if="!user.disableAds"
-    class="mb-4"
-  />
+  <carbon v-if="!user.disableAds" />
 
-  <border-chip
-    v-if="auth.isSubscriber && (!user.disableAds || user.dev)"
-    :prepend-icon="user.disableAds ? 'mdi-bullhorn-outline' : 'mdi-bullhorn'"
-    :text="t('toggle', [t('ads')])"
-    class="mb-2"
-    @click="onClickDisableAds"
-  />
+  <br>
 </template>
 
 <script setup>
-  // Composables
-  import { useRouter } from 'vue-router'
-  import { useI18n } from 'vue-i18n'
-
-  // Utilities
-  import { rpath } from '@/util/routes'
-
   // Stores
-  import { useAuthStore, useUserStore } from '@vuetify/one'
+  import { useUserStore } from '@vuetify/one'
 
-  const auth = useAuthStore()
-  const router = useRouter()
   const user = useUserStore()
-  const { t } = useI18n()
-
-  function onClickDisableAds () {
-    if (!auth.isSubscriber) {
-      return router.push(rpath('/user/dashboard/'))
-    }
-
-    user.disableAds = !user.disableAds
-  }
 </script>

packages/docs/src/examples/v-otp-input/misc-divider.vue

@@ -11,6 +11,7 @@
     <div class="text-subtitle-2 font-weight-light mb-3">Please enter the verification code sent to your mobile</div>
 
     <v-otp-input
+      v-model="otp"
       class="mb-8"
       divider="•"
       length="4"

packages/docs/src/pages/en/components/alerts.md

@@ -143,11 +143,11 @@ The close icon automatically applies a default `aria-label` and is configurable
 
 The following is a collection of `v-alert` examples that demonstrate how different the properties work in an application.
 
-### Colored border
+### Border color
 
-The **colored-border** prop removes the alert background in order to accent the **border** prop. If a **type** is set, it will use the type's default color. If no **color** or **type** is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
+The **border-color** prop removes the alert background in order to accent the **border** prop. If a **type** is set, it will use the type's default color. If no **color** or **type** is set, the color will default to the inverted color of the applied theme (black for light and white/gray for dark).
 
-<example file="v-alert/prop-colored-border" />
+<example file="v-alert/prop-border-color" />
 
 ### Icon
 

packages/docs/src/pages/en/components/autocompletes.md

@@ -66,6 +66,14 @@ The `custom-filter` prop can be used to filter each individual item with custom
 
 <example file="v-autocomplete/prop-filter" />
 
+::: tip
+
+The **v-autocomplete** component updates the search model on focus/blur events. Focus sets search to the current model (if available), and blur clears it.
+
+Unlike **v-combobox**, it doesn't keep unlisted values. To prevent unnecessary API requests when querying, ensure that search is not empty and/or doesn't match the current model.
+
+:::
+
 ### Slots
 
 #### Item and selection

packages/docs/src/pages/en/getting-started/upgrade-guide.md

@@ -246,6 +246,7 @@ app.use(vuetify)
 - `item-class` and `item-style` have been combined into `row-props`, and `cell-props` has been added.
 - `sort-desc` and `group-desc` have been combined into `sort-by` and `group-by`. These properties now take an array of `{ key: string, order: 'asc' | 'desc' }` objects instead of strings.
 - `current-items` event has been renamed to `update:current-items`.
+- `custom-sort` can now be done using the **sort** key in the headers object or by using the `custom-key-sort` prop.
 
 ### v-slider/v-range-slider
 

packages/vuetify/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.4.10",
+  "version": "3.4.11",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

packages/vuetify/src/components/VPagination/VPagination.tsx

@@ -40,8 +40,8 @@ type ControlSlot = {
   icon: IconValue
   onClick: (e: Event) => void
   disabled: boolean
-  ariaLabel: string
-  ariaDisabled: boolean
+  'aria-label': string
+  'aria-disabled': boolean
 }
 
 export type VPaginationSlots = {
@@ -264,8 +264,8 @@ export const VPagination = genericComponent<VPaginationSlots>()({
               icon: true,
               disabled: !!props.disabled || +props.length < 2,
               color: isActive ? props.activeColor : props.color,
-              ariaCurrent: isActive,
-              ariaLabel: t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
+              'aria-current': isActive,
+              'aria-label': t(isActive ? props.currentPageAriaLabel : props.pageAriaLabel, item),
               onClick: (e: Event) => setValue(e, item),
             },
           }
@@ -282,29 +282,29 @@ export const VPagination = genericComponent<VPaginationSlots>()({
           icon: isRtl.value ? props.lastIcon : props.firstIcon,
           onClick: (e: Event) => setValue(e, start.value, 'first'),
           disabled: prevDisabled,
-          ariaLabel: t(props.firstAriaLabel),
-          ariaDisabled: prevDisabled,
+          'aria-label': t(props.firstAriaLabel),
+          'aria-disabled': prevDisabled,
         } : undefined,
         prev: {
           icon: isRtl.value ? props.nextIcon : props.prevIcon,
           onClick: (e: Event) => setValue(e, page.value - 1, 'prev'),
           disabled: prevDisabled,
-          ariaLabel: t(props.previousAriaLabel),
-          ariaDisabled: prevDisabled,
+          'aria-label': t(props.previousAriaLabel),
+          'aria-disabled': prevDisabled,
         },
         next: {
           icon: isRtl.value ? props.prevIcon : props.nextIcon,
           onClick: (e: Event) => setValue(e, page.value + 1, 'next'),
           disabled: nextDisabled,
-          ariaLabel: t(props.nextAriaLabel),
-          ariaDisabled: nextDisabled,
+          'aria-label': t(props.nextAriaLabel),
+          'aria-disabled': nextDisabled,
         },
         last: props.showFirstLastPage ? {
           icon: isRtl.value ? props.firstIcon : props.lastIcon,
           onClick: (e: Event) => setValue(e, start.value + length.value - 1, 'last'),
           disabled: nextDisabled,
-          ariaLabel: t(props.lastAriaLabel),
-          ariaDisabled: nextDisabled,
+          'aria-label': t(props.lastAriaLabel),
+          'aria-disabled': nextDisabled,
         } : undefined,
       }
     })

packages/vuetify/src/components/VWindow/VWindow.tsx

@@ -44,7 +44,7 @@ type ControlProps = {
   icon: IconValue
   class: string
   onClick: () => void
-  ariaLabel: string
+  'aria-label': string
 }
 
 export const VWindowSymbol: InjectionKey<WindowProvide> = Symbol.for('vuetify:v-window')
@@ -175,7 +175,7 @@ export const VWindow = genericComponent<new <T>(
         icon: isRtl.value ? props.nextIcon : props.prevIcon,
         class: `v-window__${isRtlReverse.value ? 'right' : 'left'}`,
         onClick: group.prev,
-        ariaLabel: t('$vuetify.carousel.prev'),
+        'aria-label': t('$vuetify.carousel.prev'),
       }
 
       arrows.push(canMoveBack.value
@@ -189,7 +189,7 @@ export const VWindow = genericComponent<new <T>(
         icon: isRtl.value ? props.prevIcon : props.nextIcon,
         class: `v-window__${isRtlReverse.value ? 'left' : 'right'}`,
         onClick: group.next,
-        ariaLabel: t('$vuetify.carousel.next'),
+        'aria-label': t('$vuetify.carousel.next'),
       }
 
       arrows.push(canMoveForward.value

packages/vuetify/src/locale/sk.ts

@@ -1,10 +1,10 @@
 export default {
   badge: 'Odznak',
-  open: 'Open',
+  open: 'Otvoriť',
   close: 'Zavrieť',
   confirmEdit: {
     ok: 'OK',
-    cancel: 'Cancel',
+    cancel: 'Zrušiť',
   },
   dataIterator: {
     noResultsText: 'Neboli nájdené žiadne záznamy',
@@ -16,7 +16,7 @@ export default {
       sortDescending: 'Zoradené zostupne.',
       sortAscending: 'Zoradené vzostupne.',
       sortNone: 'Nezoradené.',
-      activateNone: 'Aktivujte na zrušenie triedenia.',
+      activateNone: 'Aktivujte na zrušenie zoradenia.',
       activateDescending: 'Aktivujte na zoradenie zostupne.',
       activateAscending: 'Aktivujte na zoradenie vzostupne.',
     },
@@ -32,18 +32,18 @@ export default {
     pageText: '{0}–{1} z {2}',
   },
   dateRangeInput: {
-    divider: 'to',
+    divider: 'až',
   },
   datePicker: {
-    itemsSelected: '{0} selected',
+    itemsSelected: '{0} vybraných',
     range: {
-      title: 'Select dates',
-      header: 'Enter dates',
+      title: 'Vyberte rozsah dátumov',
+      header: 'Zadajte rozsah dátumov',
     },
-    title: 'Select date',
-    header: 'Enter date',
+    title: 'Vyberte dátum',
+    header: 'Zadajte dátum',
     input: {
-      placeholder: 'Enter date',
+      placeholder: 'Zadajte dátum',
     },
   },
   noDataText: 'Nie sú dostupné žiadne dáta',
@@ -56,13 +56,13 @@ export default {
   },
   calendar: {
     moreEvents: '{0} ďalších',
-    today: 'Today',
+    today: 'Dnes',
   },
   input: {
-    clear: 'Clear {0}',
-    prependAction: '{0} prepended action',
-    appendAction: '{0} appended action',
-    otp: 'Please enter OTP character {0}',
+    clear: 'Vymazať {0}',
+    prependAction: 'Akcia pred {0}',
+    appendAction: 'Akcia za {0}',
+    otp: 'Prosím zadajte OTP znak {0}',
   },
   fileInput: {
     counter: '{0} súborov',
@@ -79,22 +79,22 @@ export default {
       previous: 'Predchádzajúca stránka',
       page: 'Ísť na stránku {0}',
       currentPage: 'Aktuálna stránka, stránka {0}',
-      first: 'First page',
-      last: 'Last page',
+      first: 'Prvá stránka',
+      last: 'Posledná stránka',
     },
   },
   stepper: {
-    next: 'Next',
-    prev: 'Previous',
+    next: 'Ďalší',
+    prev: 'Predchádzajúci',
   },
   rating: {
     ariaLabel: {
       item: 'Hodnotenie {0} z {1}',
     },
   },
-  loading: 'Loading...',
+  loading: 'Načítavam...',
   infiniteScroll: {
-    loadMore: 'Load more',
-    empty: 'No more',
+    loadMore: 'Načítať viac',
+    empty: 'Žiadne ďalšie',
   },
 }