Merge branch 'master' into dev

vuetifyjs · Jul 2, 2024 · 4c03bff · 4c03bff
2 parents 8ef6ff8 + be3e401
commit 4c03bff
Show file tree

Hide file tree

Showing 17 changed files with 495 additions and 203 deletions.
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
@@ -1,6 +1,6 @@
 # These are supported funding model platforms
 
-github: [johnleider, KaelWD, MajesticPotatoe]
+github: [johnleider, KaelWD, MajesticPotatoe, yuwu9145]
 patreon: vuetify
 open_collective: vuetify
 ko_fi: # Replace with a single Ko-fi username

diff --git a/lerna.json b/lerna.json
@@ -13,6 +13,6 @@
     }
   },
   "npmClient": "yarn",
-  "version": "3.6.9",
+  "version": "3.6.11",
   "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.6.9",
+  "version": "3.6.11",
   "private": true,
   "description": "",
   "scripts": {
@@ -17,7 +17,7 @@
     "ts-morph": "^22.0.0",
     "tsx": "^4.7.2",
     "vue": "^3.4.27",
-    "vuetify": "^3.6.9"
+    "vuetify": "^3.6.11"
   },
   "devDependencies": {
     "@types/stringify-object": "^4.0.5"

diff --git a/packages/api-generator/src/locale/en/VImg.json b/packages/api-generator/src/locale/en/VImg.json
@@ -13,7 +13,7 @@
     "src": "The image URL. This prop is mandatory.",
     "srcset": "A set of alternate images to use based on device size. [Read more...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset).",
     "transition": "The transition to use when switching from `lazy-src` to `src`. Can be one of the [built in](/styles/transitions/) or custom transition.",
-    "gradient": "The gradient to apply to the image. This can be any valid CSS gradient declaration. You can find more information on the [MDN documentation for gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient)."
+    "gradient": "The gradient to apply to the image. Only supports [linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) syntax, anything else should be done with classes."
   },
   "slots": {
     "placeholder": "Display an overlay while the image is loading.",

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.6.9",
+  "version": "3.6.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuetifyjs/vuetify.git",
@@ -38,7 +38,7 @@
     "vue-i18n": "^9.11.0",
     "vue-instantsearch": "^4.16.1",
     "vue-prism-component": "^2.0.0",
-    "vuetify": "^3.6.9"
+    "vuetify": "^3.6.11"
   },
   "devDependencies": {
     "@emailjs/browser": "^4.3.3",
@@ -50,7 +50,7 @@
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/compiler-sfc": "^3.4.27",
-    "@vuetify/api-generator": "^3.6.9",
+    "@vuetify/api-generator": "^3.6.11",
     "ajv": "^8.12.0",
     "async-es": "^3.2.5",
     "date-fns": "^3.6.0",

diff --git a/packages/docs/src/data/team.json b/packages/docs/src/data/team.json
@@ -251,21 +251,5 @@
     "name": "Yoones Khoshghadam",
     "team": "legends",
     "joined": "January 2023"
-  },
-  "alexandriajackson": {
-    "avatar": "https://cdn.vuetifyjs.com/docs/images/team/alexandria.jpg",
-    "discord": "alexandriajackson_",
-    "focus": [
-      "[vuetifyjs/*](https://github.com/vuetifyjs)"
-    ],
-    "languages": [
-      "English"
-    ],
-    "location": "Dallas, TX, USA",
-    "name": "Alexandria Jackson",
-    "team": "company",
-    "twitter": "AlexxJackson96",
-    "work": "Marketing Coordinator @ Vuetify",
-    "joined": "Sept 2023"
   }
 }
diff --git a/packages/docs/src/examples/v-data-table/headers-multiple.vue b/packages/docs/src/examples/v-data-table/headers-multiple.vue
@@ -84,7 +84,7 @@
           ],
         },
       ],
-      desserts: [
+      items: [
         {
           name: 'Great Pyramid of Giza',
           location: 'Egypt',

diff --git a/packages/docs/src/examples/v-data-table/prop-dense.vue b/packages/docs/src/examples/v-data-table/prop-dense.vue
@@ -92,84 +92,86 @@
 
 <script>
   export default {
-    headers: [
-      { title: 'Plant', align: 'start', sortable: false, key: 'name' },
-      { title: 'Light', align: 'end', key: 'light' },
-      { title: 'Height', align: 'end', key: 'height' },
-      { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
-      { title: 'Price ($)', align: 'end', key: 'price' },
-    ],
-    plants: [
-      {
-        name: 'Fern',
-        light: 'Low',
-        height: '20cm',
-        petFriendly: 'Yes',
-        price: 20,
-      },
-      {
-        name: 'Snake Plant',
-        light: 'Low',
-        height: '50cm',
-        petFriendly: 'No',
-        price: 35,
-      },
-      {
-        name: 'Monstera',
-        light: 'Medium',
-        height: '60cm',
-        petFriendly: 'No',
-        price: 50,
-      },
-      {
-        name: 'Pothos',
-        light: 'Low to medium',
-        height: '40cm',
-        petFriendly: 'Yes',
-        price: 25,
-      },
-      {
-        name: 'ZZ Plant',
-        light: 'Low to medium',
-        height: '90cm',
-        petFriendly: 'Yes',
-        price: 30,
-      },
-      {
-        name: 'Spider Plant',
-        light: 'Bright, indirect',
-        height: '30cm',
-        petFriendly: 'Yes',
-        price: 15,
-      },
-      {
-        name: 'Air Plant',
-        light: 'Bright, indirect',
-        height: '15cm',
-        petFriendly: 'Yes',
-        price: 10,
-      },
-      {
-        name: 'Peperomia',
-        light: 'Bright, indirect',
-        height: '25cm',
-        petFriendly: 'Yes',
-        price: 20,
-      },
-      {
-        name: 'Aloe Vera',
-        light: 'Bright, direct',
-        height: '30cm',
-        petFriendly: 'Yes',
-        price: 15,
-      },
-      {
-        name: 'Jade Plant',
-        light: 'Bright, direct',
-        height: '40cm',
-        petFriendly: 'Yes',
-        price: 25,
-      },
-    ],
+    data: () => ({
+      headers: [
+        { title: 'Plant', align: 'start', sortable: false, key: 'name' },
+        { title: 'Light', align: 'end', key: 'light' },
+        { title: 'Height', align: 'end', key: 'height' },
+        { title: 'Pet Friendly', align: 'end', key: 'petFriendly' },
+        { title: 'Price ($)', align: 'end', key: 'price' },
+      ],
+      plants: [
+        {
+          name: 'Fern',
+          light: 'Low',
+          height: '20cm',
+          petFriendly: 'Yes',
+          price: 20,
+        },
+        {
+          name: 'Snake Plant',
+          light: 'Low',
+          height: '50cm',
+          petFriendly: 'No',
+          price: 35,
+        },
+        {
+          name: 'Monstera',
+          light: 'Medium',
+          height: '60cm',
+          petFriendly: 'No',
+          price: 50,
+        },
+        {
+          name: 'Pothos',
+          light: 'Low to medium',
+          height: '40cm',
+          petFriendly: 'Yes',
+          price: 25,
+        },
+        {
+          name: 'ZZ Plant',
+          light: 'Low to medium',
+          height: '90cm',
+          petFriendly: 'Yes',
+          price: 30,
+        },
+        {
+          name: 'Spider Plant',
+          light: 'Bright, indirect',
+          height: '30cm',
+          petFriendly: 'Yes',
+          price: 15,
+        },
+        {
+          name: 'Air Plant',
+          light: 'Bright, indirect',
+          height: '15cm',
+          petFriendly: 'Yes',
+          price: 10,
+        },
+        {
+          name: 'Peperomia',
+          light: 'Bright, indirect',
+          height: '25cm',
+          petFriendly: 'Yes',
+          price: 20,
+        },
+        {
+          name: 'Aloe Vera',
+          light: 'Bright, direct',
+          height: '30cm',
+          petFriendly: 'Yes',
+          price: 15,
+        },
+        {
+          name: 'Jade Plant',
+          light: 'Bright, direct',
+          height: '40cm',
+          petFriendly: 'Yes',
+          price: 25,
+        },
+      ],
+    }),
   }
 </script>
diff --git a/packages/docs/src/pages/en/components/images.md b/packages/docs/src/pages/en/components/images.md
@@ -59,6 +59,12 @@ If the provided aspect ratio doesn't match that of the actual image, the default
 
 <ExamplesExample file="v-img/prop-max-height" />
 
+#### Gradient
+
+The `gradient` prop can be used to apply a simple gradient overlay to the image. More complex gradients should be written as a class on the content slot instead.
+
+<ExamplesExample file="v-img/prop-gradient" />
+
 ### Slots
 
 #### Placeholder

diff --git a/packages/docs/src/pages/en/features/treeshaking.md b/packages/docs/src/pages/en/features/treeshaking.md
@@ -179,7 +179,7 @@ Dynamic components using `<component>` can be registered locally:
   import { VChip } from 'vuetify/components/VChip'
   import { shallowRef } from 'vue'
 
-  const btn = shallowRef(false)
+  const button = shallowRef(false)
 </script>
 ```
 

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.6.9",
+  "version": "3.6.11",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

diff --git a/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx b/packages/vuetify/src/components/VDatePicker/VDatePicker.tsx
@@ -230,8 +230,13 @@ export const VDatePicker = genericComponent<new <
     }
 
     watch(model, (val, oldVal) => {
-      const before = adapter.date(wrapInArray(oldVal)[oldVal.length - 1])
-      const after = adapter.date(wrapInArray(val)[val.length - 1])
+      const arrBefore = wrapInArray(oldVal)
+      const arrAfter = wrapInArray(val)
+
+      if (!arrAfter.length) return
+
+      const before = adapter.date(arrBefore[arrBefore.length - 1])
+      const after = adapter.date(arrAfter[arrAfter.length - 1])
       const newMonth = adapter.getMonth(after)
       const newYear = adapter.getYear(after)
 

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -156,7 +156,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
     } = useActivator(props, { isActive, isTop: localTop })
     const potentialShadowDomRoot = computed(() => (activatorEl?.value as Element)?.getRootNode() as Element)
     const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained ||
-      potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false))
+      potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value ?? true : false))
     const { dimensionStyles } = useDimension(props)
     const isMounted = useHydration()
     const { scopeId } = useScopeId()