Merge branch 'master' into dev

vuetifyjs · Apr 10, 2024 · b51fc39 · b51fc39
2 parents dd929f5 + 3feeb77
commit b51fc39
Show file tree

Hide file tree

Showing 25 changed files with 123 additions and 95 deletions.
diff --git a/lerna.json b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "useWorkspaces": true
 }
diff --git a/packages/api-generator/package.json b/packages/api-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vuetify/api-generator",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^20.0.0",
     "tsx": "^4.6.2",
     "vue": "^3.4.19",
-    "vuetify": "^3.5.14"
+    "vuetify": "^3.5.15"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

diff --git a/packages/api-generator/src/locale/en/VOverlay.json b/packages/api-generator/src/locale/en/VOverlay.json
@@ -11,6 +11,7 @@
     "zIndex": "The z-index used for the component."
   },
   "events": {
-    "click:outside": "Event that fires when clicking outside an active overlay."
+    "click:outside": "Event that fires when clicking outside an active overlay.",
+    "afterLeave": "Event that fires after the overlay has finished transitioning out."
   }
 }
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -3,7 +3,7 @@
   "description": "A Vue.js project",
   "private": true,
   "author": "John Leider <[email protected]>",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -24,7 +24,7 @@
     "@vercel/analytics": "^1.2.2",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vuetify/one": "^1.5.4",
+    "@vuetify/one": "^1.5.5",
     "algoliasearch": "^4.20.0",
     "fflate": "^0.8.1",
     "isomorphic-fetch": "^3.0.0",
@@ -39,7 +39,7 @@
     "vue-i18n": "^9.7.1",
     "vue-instantsearch": "^4.12.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.5.14"
+    "vuetify": "^3.5.15"
   },
   "devDependencies": {
     "@emailjs/browser": "^3.11.0",
@@ -51,7 +51,7 @@
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/compiler-sfc": "^3.4.19",
-    "@vuetify/api-generator": "^3.5.14",
+    "@vuetify/api-generator": "^3.5.15",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^2.30.0",

diff --git a/packages/docs/src/components/app/bar/Bar.vue b/packages/docs/src/components/app/bar/Bar.vue
@@ -17,28 +17,28 @@
 
     <template #append>
       <template v-if="mdAndUp">
-        <app-bar-learn-menu />
+        <AppBarLearnMenu />
 
-        <app-bar-support-menu />
+        <AppBarSupportMenu />
 
-        <app-bar-ecosystem-menu />
+        <AppBarEcosystemMenu />
 
-        <app-bar-team-link v-if="lgAndUp" />
+        <AppBarTeamLink v-if="lgAndUp" />
 
-        <app-bar-playground-link v-if="lgAndUp" />
+        <AppBarPlaygroundLink v-if="lgAndUp" />
 
-        <app-bar-enterprise-link />
+        <AppBarEnterpriseLink />
       </template>
 
-      <app-vertical-divider v-if="smAndUp" class="ms-3 me-2" />
+      <AppVerticalDivider v-if="smAndUp" class="ms-3 me-2" />
 
-      <app-bar-store-link v-if="smAndUp" />
+      <AppBarStoreLink v-if="smAndUp" />
 
-      <app-bar-jobs-link v-if="smAndUp" />
+      <AppBarJobsLink v-if="smAndUp" />
 
-      <app-bar-language-menu v-if="smAndUp" />
+      <AppBarLanguageMenu v-if="smAndUp" />
 
-      <app-bar-settings-toggle />
+      <AppBarSettingsToggle />
     </template>
   </VoAppBar>
 </template>

diff --git a/packages/docs/src/components/app/bar/EnterpriseLink.vue b/packages/docs/src/components/app/bar/EnterpriseLink.vue
@@ -1,15 +1,14 @@
 <template>
   <AppBtn
-    :text="t('enterprise')"
     :to="rpath('/introduction/enterprise-support/')"
     class="ms-1"
     color="primary"
+    text="enterprise"
     variant="outlined"
     @click="gtagClick('app-bar', 'enterprise', name)"
   />
 </template>
 
 <script setup>
-  const { t } = useI18n()
   const { name } = useRoute()
 </script>
diff --git a/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue b/packages/docs/src/examples/v-expansion-panels/misc-advanced.vue
@@ -39,7 +39,7 @@
     </v-expansion-panel>
 
     <v-expansion-panel>
-      <v-expansion-panel-title v-slot="{ open }">
+      <v-expansion-panel-title v-slot="{ expanded }">
         <v-row no-gutters>
           <v-col class="d-flex justify-start" cols="4">
             Location
@@ -50,7 +50,7 @@
           >
             <v-fade-transition leave-absolute>
               <span
-                v-if="open"
+                v-if="expanded"
                 key="0"
               >
                 Select trip destination
@@ -109,7 +109,7 @@
     </v-expansion-panel>
 
     <v-expansion-panel>
-      <v-expansion-panel-title v-slot="{ open }">
+      <v-expansion-panel-title v-slot="{ expanded }">
         <v-row no-gutters>
           <v-col class="d-flex justify-start" cols="4">
             Start and end dates
@@ -119,7 +119,7 @@
             cols="8"
           >
             <v-fade-transition leave-absolute>
-              <span v-if="open">When do you want to travel?</span>
+              <span v-if="expanded">When do you want to travel?</span>
               <v-row
                 v-else
                 style="width: 100%"

diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -120,7 +120,7 @@ headers = [
 
 See [Data and display](/components/data-tables/data-and-display).
 
-#### Customisation
+#### Customization
 
 Other options are available for setting **width**, **align**, **fixed**, or pass custom props to the header element with **headerProps** and row cells with **cellProps**.
 

diff --git a/packages/docs/src/pages/en/features/sass-variables.md b/packages/docs/src/pages/en/features/sass-variables.md
@@ -244,7 +244,7 @@ Only put variables, mixins, and functions in the settings file, styles should be
 
 ### Build performance
 
-Vuetify loads precompiled CSS by default, enabling variable customisation will switch to the base SASS files instead which must be recompiled with your project.
+Vuetify loads precompiled CSS by default, enabling variable customization will switch to the base SASS files instead which must be recompiled with your project.
 This can be a performance hit if you're using more than a few vuetify components, and also forces you to use the same SASS compiler version as us.
 
 ### Symlinks

diff --git a/packages/docs/src/pages/en/styles/borders.md b/packages/docs/src/pages/en/styles/borders.md
@@ -123,7 +123,7 @@ Setting the **border** property to true applies a component specific border clas
 
 <ExamplesExample file="border/card" />
 
-### SASS variables
+## SASS variables
 
 You can also use the following SASS variables to customize the border color and width:
 

diff --git a/packages/docs/src/pages/en/styles/cursor.md b/packages/docs/src/pages/en/styles/cursor.md
@@ -8,6 +8,8 @@ related:
   - /styles/content/
   - /styles/spacing/
   - /styles/text-and-typography/
+features:
+  report: true
 ---
 
 # Cursor
@@ -16,30 +18,44 @@ Utilities for controlling the cursor styling when hovering over elements.
 
 <PageFeatures />
 
+| Class | Properties | |
+| - | - | - |
+| **cursor-auto** | cursor: auto; |
+| **cursor-default** | cursor: default; |
+| **cursor-grab** | cursor: grab; |
+| **cursor-grabbing** | cursor: grabbing; |
+| **cursor-help** | cursor: help; |
+| **cursor-move** | cursor: move; |
+| **cursor-none** | cursor: none; |
+| **cursor-not-allowed** | cursor: not-allowed; |
+| **cursor-pointer** | cursor: pointer; |
+| **cursor-progress** | cursor: progress; |
+| **cursor-text** | cursor: text; |
+| **cursor-wait** | cursor: wait; { style="max-height: 420px;" fixed-header } |
+
+<PromotedEntry />
+
 ## Usage
 
 Apply custom cursor styling to a component or element.
 
 <ExamplesExample file="cursor/usage" />
 
-| Class | Properties | |
-| - | - | - |
-| **cursor-auto** | cursor: auto; | |
-| **cursor-default** | cursor: default; | |
-| **cursor-grab** | cursor: grab; | |
-| **cursor-grabbing** | cursor: grabbing; | |
-| **cursor-help** | cursor: help; | |
-| **cursor-move** | cursor: move; | |
-| **cursor-none** | cursor: none; | |
-| **cursor-not-allowed** | cursor: not-allowed; | |
-| **cursor-pointer** | cursor: pointer; | |
-| **cursor-progress** | cursor: progress; | |
-| **cursor-text** | cursor: text; | |
-| **cursor-wait** | cursor: wait; | |
+## SASS variables
 
-<PromotedEntry />
+You can also use the following SASS variables to customize the border color and width:
 
-## Disable
+```scss { resource="src/styles/settings.scss" }
+@use 'vuetify/settings' with (
+  $utilities: (
+    "cursor": (
+      property: cursor,
+      class: cursor,
+      values: auto default pointer wait text move help not-allowed progress grab grabbing none
+    )
+  )
+);
+```
 
 Disable the generation of **cursor** utility classes by overwriting the utilities value:
 

diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vuetify",
   "description": "Vue Material Component Framework",
-  "version": "3.5.14",
+  "version": "3.5.15",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

diff --git a/packages/vuetify/src/components/VBtn/VBtn.sass b/packages/vuetify/src/components/VBtn/VBtn.sass
@@ -174,6 +174,10 @@
   top: 0
   width: 100%
 
+  > .v-progress-circular
+    width: $button-loader-size
+    height: $button-loader-size
+
 .v-btn__content,
 .v-btn__prepend,
 .v-btn__append

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -293,7 +293,6 @@ export const VBtn = genericComponent<VBtnSlots>()({
                 <VProgressCircular
                   color={ typeof props.loading === 'boolean' ? undefined : props.loading }
                   indeterminate
-                  size="23"
                   width="2"
                 />
               )}

diff --git a/packages/vuetify/src/components/VBtn/_variables.scss b/packages/vuetify/src/components/VBtn/_variables.scss
@@ -32,6 +32,7 @@ $button-stacked-icon-margin: 4px !default;
 $button-icon-border-radius: map.get(settings.$rounded, 'circle') !default;
 $button-icon-font-size: 1rem !default;
 $button-line-height: normal !default;
+$button-loader-size: 1.5em !default;
 $button-stacked-line-height: 1.25 !default;
 $button-plain-opacity: .62 !default;
 $button-padding-ratio: 2.25 !default;

diff --git a/packages/vuetify/src/components/VDataTable/composables/options.ts b/packages/vuetify/src/components/VDataTable/composables/options.ts
@@ -34,7 +34,7 @@ export function useOptions ({
     if (deepEqual(oldOptions, options.value)) return
 
     // Reset page when searching
-    if (oldOptions?.search !== options.value.search) {
+    if (oldOptions && oldOptions.search !== options.value.search) {
       page.value = 1
     }
 

diff --git a/packages/vuetify/src/components/VDialog/VDialog.tsx b/packages/vuetify/src/components/VDialog/VDialog.tsx
@@ -42,7 +42,9 @@ export const VDialog = genericComponent<OverlaySlots>()({
   props: makeVDialogProps(),
 
   emits: {
+    'click:outside': (e: MouseEvent) => true,
     'update:modelValue': (value: boolean) => true,
+    afterLeave: () => true,
   },
 
   setup (props, { slots }) {

diff --git a/packages/vuetify/src/components/VMenu/VMenu.tsx b/packages/vuetify/src/components/VMenu/VMenu.tsx
@@ -125,7 +125,9 @@ export const VMenu = genericComponent<OverlaySlots>()({
     function onKeydown (e: KeyboardEvent) {
       if (props.disabled) return
 
-      if (e.key === 'Tab') {
+      if (e.key === 'Tab' || (e.key === 'Enter' && !props.closeOnContentClick)) {
+        if (e.key === 'Enter') e.preventDefault()
+
         const nextElement = getNextElement(
           focusableChildren(overlay.value?.contentEl as Element, false),
           e.shiftKey ? 'prev' : 'next',

diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -123,7 +123,7 @@ export function useSelectionControl (
       model.value &&
       !props.error &&
       !props.disabled
-    ) ? props.color : undefined
+    ) ? props.color : props.baseColor
   }))
   const icon = computed(() => model.value ? props.trueIcon : props.falseIcon)
 

diff --git a/packages/vuetify/src/composables/__tests__/rounded.spec.ts b/packages/vuetify/src/composables/__tests__/rounded.spec.ts
@@ -25,17 +25,18 @@ describe('rounded.ts', () => {
     [{}, []],
     [{ rounded: null }, []],
     [{ rounded: 1 }, []],
-    // // Rounded only
+    // Rounded only
     [{ rounded: true }, ['foo--rounded']],
     [{ rounded: '' }, ['foo--rounded']],
-    // // Rounded with 0
+    // Rounded with 0
     [{ rounded: '0' }, ['rounded-0']],
     [{ rounded: 0 }, ['rounded-0']],
-    // // Rounded with a word
+    [{ rounded: false }, ['rounded-0']],
+    // Rounded with a word
     [{ rounded: 'circle' }, ['rounded-circle']],
     [{ rounded: 'shaped' }, ['rounded-shaped']],
     [{ rounded: 'pill' }, ['rounded-pill']],
-    // // Corner and axis rounded
+    // Corner and axis rounded
     [{ rounded: 'te-xl be-lg' }, ['rounded-te-xl', 'rounded-be-lg']],
   ] as RoundedProps[])('should return correct rounded classes', (props: RoundedProps, expected: any) => {
     const { roundedClasses } = useRounded(props, 'foo')

diff --git a/packages/vuetify/src/composables/rounded.ts b/packages/vuetify/src/composables/rounded.ts
@@ -43,7 +43,7 @@ export function useRounded (
       for (const value of String(rounded).split(' ')) {
         classes.push(`rounded-${value}`)
       }
-    } else if (tile) {
+    } else if (tile || rounded === false) {
       classes.push('rounded-0')
     }
 

diff --git a/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx b/packages/vuetify/src/labs/VTimePicker/VTimePicker.tsx
@@ -254,10 +254,10 @@ export const VTimePicker = genericComponent<VTimePickerSlots>()({
         case 'hour':
           emit('update:hour', value)
           break
-        case 'minutes':
+        case 'minute':
           emit('update:minute', value)
           break
-        case 'seconds':
+        case 'second':
           emit('update:second', value)
           break
         default: