Merge branch 'master' into dev

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.4"
+  "version": "3.7.5"
 }

packages/api-generator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.7.4",
+  "version": "3.7.5",
   "private": true,
   "description": "",
   "scripts": {

packages/docs/components.d.ts

@@ -124,6 +124,7 @@ declare module 'vue' {
     GettingStartedWireframeExamples: typeof import('./src/components/getting-started/WireframeExamples.vue')['default']
     HomeActionBtns: typeof import('./src/components/home/ActionBtns.vue')['default']
     HomeEntry: typeof import('./src/components/home/Entry.vue')['default']
+    HomeEpicmaxSupport: typeof import('./src/components/home/EpicmaxSupport.vue')['default']
     HomeFeatures: typeof import('./src/components/home/Features.vue')['default']
     HomeFooter: typeof import('./src/components/home/Footer.vue')['default']
     HomeLogo: typeof import('./src/components/home/Logo.vue')['default']

packages/docs/package.json

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

packages/docs/src/components/about/TeamMember.vue

@@ -174,7 +174,7 @@
         color: '#212121',
         href: `https://x.com/${props.member.twitter}`,
         icon: '$x',
-        tooltip: 'X',
+        tooltip: 'Xitter',
       })
     }
 

packages/docs/src/components/home/EpicmaxSupport.vue

@@ -0,0 +1,24 @@
+<template>
+  <section class="bg-light-blue-darken-4 py-8">
+    <h2 class="v-heading mb-2 text-h4 text-sm-h4">{{ t("epicmax.title") }}</h2>
+    <p class="mx-auto" style="max-width: 700px">{{ t("epicmax.message") }}</p>
+    <v-btn
+      :aria-label="t('epicmax.learn-more')"
+      class="px-16 text-light-blue-darken-4"
+      color="grey-lighten-5"
+      href="https://www.epicmax.co/?ref=vuetify"
+      rounded="0"
+      size="large"
+      variant="flat"
+    >
+      <span
+        class="text-capitalize font-weight-regular"
+        v-text="t('epicmax.learn-more')"
+      />
+    </v-btn>
+  </section>
+</template>
+
+<script setup>
+  const { t } = useI18n()
+</script>

packages/docs/src/components/home/SpecialSponsor.vue

@@ -1,13 +1,13 @@
 <template>
-  <div v-if="hasSpecialSponsor" class="mb-8">
+  <div v-if="specialSponsor" class="mb-8">
     <v-divider class="mx-auto" />
 
     <div class="d-flex align-center justify-center my-1 px-4">
       <small class="font-weight-bold me-4 text-no-wrap">Special Sponsor</small>
 
       <SponsorCard
+        :slug="specialSponsor.slug"
         min-height="64"
-        slug="teamwork"
         width="240"
       />
     </div>
@@ -19,5 +19,5 @@
 <script setup>
   const store = useSponsorsStore()
 
-  const hasSpecialSponsor = computed(() => store.byTier[-2]?.length > 0)
+  const specialSponsor = computed(() => store.byTier[-2]?.[0])
 </script>

packages/docs/src/data/team.json

@@ -53,7 +53,6 @@
     "location": "Melbourne, Australia",
     "name": "Kael Watts-Deuchar",
     "team": "core",
-    "twitter": "kaelwd",
     "joined": "Oct 2017"
   },
   "nekosaur": {

packages/docs/src/examples/border/colors.vue

@@ -11,7 +11,7 @@
       <v-col cols="auto">
         <div class="text-center">
           <v-sheet border="success sm" height="64" width="64" rounded></v-sheet>
-          <div class="text-caption">"sucess sm"</div>
+          <div class="text-caption">"success sm"</div>
         </div>
       </v-col>
 

packages/docs/src/examples/v-progress-linear/usage.vue

@@ -12,7 +12,7 @@
     <template v-slot:configuration>
       <v-select
         v-model="color"
-        :items="['primary', 'blue-lighten-3', 'error', 'dark-blue']"
+        :items="['primary', 'blue-lighten-3', 'error', 'blue-darken-3']"
         label="Color"
         clearable
       ></v-select>

packages/docs/src/i18n/messages/en.json

@@ -148,6 +148,11 @@
   "enable-pwa-refresh": "Enable Refresh Prompt",
   "enable-pwa-refresh-message": "Display the refresh prompt when new documentation updates have been downloaded.",
   "enterprise": "Enterprise",
+  "epicmax": {
+    "learn-more": "Learn more",
+    "title": "Need support with your Vuetify project?",
+    "message": "Epicmax is here to support you - whether it's migrating to Vue3, adjusting your Vue.js code, or building custom front-ends."
+  },
   "email-address": "Email address",
   "esc": "Esc",
   "extra-extra-large": "Extra extra large",
@@ -354,5 +359,5 @@
   "view-source": "View source",
   "viewport": "Viewport",
   "vuetify": "Vuetify",
-  "x": "X"
+  "x": "Xitter"
 }

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

@@ -130,6 +130,6 @@ Lists can contain subheaders, dividers, and can contain 1 or more lines. The sub
 
 #### Action and item groups
 
-A **three-line** list with actions. Utilizing **selection-strategy**, easily connect actions to your tiles.
+A **three-line** list with actions. Utilizing **select-strategy**, easily connect actions to your tiles.
 
 <ExamplesExample file="v-list/misc-actions" />

packages/docs/src/pages/en/index.md

@@ -45,3 +45,5 @@ Check out these beautiful apps, plugins, and themes built using Vuetify.{style="
 <br>
 <br>
 <br>
+
+<HomeEpicmaxSupport />

packages/docs/src/pages/en/styles/flex.md

@@ -34,16 +34,16 @@ Control the layout of flex containers with alignment, justification and more wit
 | **flex-md-fill** | flex: 1 1 auto; |
 | **flex-lg-fill** | flex: 1 1 auto; |
 | **flex-xl-fill** | flex: 1 1 auto; |
-| **flex-1-1** | flex: 1 1 0%; |
-| **flex-sm-1-1** | flex: 1 1 0%; |
-| **flex-md-1-1** | flex: 1 1 0%; |
-| **flex-lg-1-1** | flex: 1 1 0%; |
-| **flex-xl-1-1** | flex: 1 1 0%; |
-| **flex-1-0** | flex: 1 0 0%; |
-| **flex-sm-1-0** | flex: 1 0 0%; |
-| **flex-md-1-0** | flex: 1 0 0%; |
-| **flex-lg-1-0** | flex: 1 0 0%; |
-| **flex-xl-1-0** | flex: 1 0 0%; |
+| **flex-1-1** | flex: 1 1 auto; |
+| **flex-sm-1-1** | flex: 1 1 auto; |
+| **flex-md-1-1** | flex: 1 1 auto; |
+| **flex-lg-1-1** | flex: 1 1 auto; |
+| **flex-xl-1-1** | flex: 1 1 auto; |
+| **flex-1-0** | flex: 1 0 auto; |
+| **flex-sm-1-0** | flex: 1 0 auto; |
+| **flex-md-1-0** | flex: 1 0 auto; |
+| **flex-lg-1-0** | flex: 1 0 auto; |
+| **flex-xl-1-0** | flex: 1 0 auto; |
 | **flex-0-1** | flex: 0 1 auto; |
 | **flex-sm-0-1** | flex: 0 1 auto; |
 | **flex-md-0-1** | flex: 0 1 auto; |

packages/docs/vite.config.mts

@@ -350,23 +350,6 @@ export default defineConfig(({ command, mode, isSsrBuild }) => {
         },
       },
 
-      {
-        name: 'inject-umami',
-        transformIndexHtml (html, ctx) {
-          if (mode !== 'production') return
-
-          return [{
-            tag: 'script',
-            attrs: {
-              defer: true,
-              src: 'https://umami.vuetifyjs.com/script.js',
-              'data-website-id': 'c635330a-f1a7-49cf-8894-3ff2cfa0331e',
-            },
-            injectTo: 'head',
-          }]
-        },
-      },
-
       Inspect(),
 
       process.env.HTTPS === 'true' ? basicSsl() : undefined,

packages/vuetify/package.json

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

packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx

@@ -166,7 +166,7 @@ export const VAutocomplete = genericComponent<new <
         : typeof props.counterValue === 'number' ? props.counterValue
         : model.value.length
     })
-    const form = useForm()
+    const form = useForm(props)
     const { filteredItems, getMatches } = useFilter(props, items, () => isPristine.value ? '' : search.value)
 
     const displayItems = computed(() => {
@@ -192,7 +192,7 @@ export const VAutocomplete = genericComponent<new <
 
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
-      props.readonly || form?.isReadonly.value
+      form.isReadonly.value || form.isDisabled.value
     ))
 
     const listRef = ref<VList>()
@@ -224,7 +224,7 @@ export const VAutocomplete = genericComponent<new <
       }
     }
     function onKeydown (e: KeyboardEvent) {
-      if (props.readonly || form?.isReadonly.value) return
+      if (form.isReadonly.value) return
 
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
@@ -450,7 +450,7 @@ export const VAutocomplete = genericComponent<new <
             props.class,
           ]}
           style={ props.style }
-          readonly={ props.readonly }
+          readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }

packages/vuetify/src/components/VBadge/VBadge.sass

@@ -10,6 +10,7 @@
     align-items: center
     display: inline-flex
     border-radius: $badge-border-radius
+    font-family: $badge-font-family
     font-size: $badge-font-size
     font-weight: $badge-font-weight
     height: $badge-height
@@ -25,6 +26,9 @@
 
     @include tools.theme($badge-theme...)
 
+    &:has(.v-icon)
+      padding: $badge-icon-padding
+
     .v-badge--bordered &
       &::after
         border-radius: inherit

packages/vuetify/src/components/VChip/VChip.tsx

@@ -69,7 +69,7 @@ export const makeVChipProps = propsFactory({
   draggable: Boolean,
   filter: Boolean,
   filterIcon: {
-    type: String,
+    type: IconValue,
     default: '$complete',
   },
   label: Boolean,
@@ -194,6 +194,7 @@ export const VChip = genericComponent<VChipSlots>()({
               'v-chip--link': isClickable.value,
               'v-chip--filter': hasFilter,
               'v-chip--pill': props.pill,
+              [`${props.activeClass}`]: props.activeClass && link.isActive?.value,
             },
             themeClasses.value,
             borderClasses.value,

packages/vuetify/src/components/VCombobox/VCombobox.tsx

@@ -165,7 +165,7 @@ export const VCombobox = genericComponent<new <
         return props.multiple ? transformed : (transformed[0] ?? null)
       }
     )
-    const form = useForm()
+    const form = useForm(props)
 
     const hasChips = computed(() => !!(props.chips || slots.chip))
     const hasSelectionSlot = computed(() => hasChips.value || !!slots.selection)
@@ -243,7 +243,7 @@ export const VCombobox = genericComponent<new <
 
     const menuDisabled = computed(() => (
       (props.hideNoData && !displayItems.value.length) ||
-      props.readonly || form?.isReadonly.value
+      form.isReadonly.value || form.isDisabled.value
     ))
 
     const listRef = ref<VList>()
@@ -276,7 +276,7 @@ export const VCombobox = genericComponent<new <
     }
     // eslint-disable-next-line complexity
     function onKeydown (e: KeyboardEvent) {
-      if (isComposingIgnoreKey(e) || props.readonly || form?.isReadonly.value) return
+      if (isComposingIgnoreKey(e) || form.isReadonly.value) return
 
       const selectionStart = vTextFieldRef.value.selectionStart
       const length = model.value.length
@@ -494,7 +494,7 @@ export const VCombobox = genericComponent<new <
             props.class,
           ]}
           style={ props.style }
-          readonly={ props.readonly }
+          readonly={ form.isReadonly.value }
           placeholder={ isDirty ? undefined : props.placeholder }
           onClick:clear={ onClear }
           onMousedown:control={ onMousedownControl }

packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx

@@ -19,7 +19,7 @@ export type VConfirmEditSlots<T> = {
     save: () => void
     cancel: () => void
     isPristine: boolean
-    get actions (): VNode
+    get actions (): (props?: {}) => VNode
   }
 }
 
@@ -77,16 +77,16 @@ export const VConfirmEdit = genericComponent<new <T> (
       emit('cancel')
     }
 
-    let actionsUsed = false
-    useRender(() => {
-      const actions = (
+    function actions (actionsProps?: {}) {
+      return (
         <>
           <VBtn
             disabled={ isPristine.value }
             variant="text"
             color={ props.color }
             onClick={ cancel }
             text={ t(props.cancelText) }
+            { ...actionsProps }
           />
 
           <VBtn
@@ -95,9 +95,14 @@ export const VConfirmEdit = genericComponent<new <T> (
             color={ props.color }
             onClick={ save }
             text={ t(props.okText) }
+            { ...actionsProps }
           />
         </>
       )
+    }
+
+    let actionsUsed = false
+    useRender(() => {
       return (
         <>
           {
@@ -113,7 +118,7 @@ export const VConfirmEdit = genericComponent<new <T> (
             })
           }
 
-          { !actionsUsed && actions }
+          { !actionsUsed && actions() }
         </>
       )
     })

packages/vuetify/src/components/VConfirmEdit/__test__/VConfirmEdit.spec.browser.tsx

@@ -79,7 +79,7 @@ describe('VConfirmEdit', () => {
     it('render actions', () => {
       render(() => (
         <VConfirmEdit>
-          { ({ actions }) => actions }
+          { ({ actions }) => actions() }
         </VConfirmEdit>
       ))
       expect(screen.getAllByCSS('button')).toHaveLength(2)

packages/vuetify/src/components/VDatePicker/VDatePickerHeader.tsx

@@ -7,6 +7,7 @@ import { VDefaultsProvider } from '@/components/VDefaultsProvider'
 
 // Composables
 import { useBackgroundColor } from '@/composables/color'
+import { IconValue } from '@/composables/icons'
 import { MaybeTransition } from '@/composables/transition'
 
 // Utilities
@@ -20,7 +21,7 @@ export type VDatePickerHeaderSlots = {
 }
 
 export const makeVDatePickerHeaderProps = propsFactory({
-  appendIcon: String,
+  appendIcon: IconValue,
   color: String,
   header: String,
   transition: String,