Merge branch 'master' into dev

Author: KaelWD

lerna.json

@@ -14,4 +14,4 @@
   },
   "npmClient": "pnpm",
   "version": "3.9.0-beta.0"
-}
+}

packages/docs/auto-imports.d.ts

@@ -169,7 +169,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
   // @ts-ignore
   export type { Category } from './src/stores/app'

packages/docs/src/components/PageFeatures.vue

@@ -90,7 +90,7 @@
     </page-feature-chip>
 
     <div
-      v-if="isClipboardSupported"
+      v-if="isClipboardSupported && !isGeneratedPage"
       class="d-inline-block"
       v-tooltip:top="{
         disabled: one.isSubscriber,

packages/docs/src/composables/markdown.ts

@@ -1,10 +1,14 @@
+import octokit from '@/plugins/octokit'
+
 export function useMarkdown () {
   const one = useOneStore()
   const route = useRoute()
   const frontmatter = useFrontmatter()
   const copied = shallowRef(false)
   const isClipboardSupported = !!navigator.clipboard
 
+  const branch = getBranch()
+
   async function copyPageAsMarkdown () {
     if (!isClipboardSupported) {
       console.error('Native Clipboard API is not supported.')
@@ -20,22 +24,29 @@ export function useMarkdown () {
     markdownContent += `Source: ${window.location.origin}${route.path}\\n\\n`
 
     try {
-      const mdPath = `/src/pages${route.path.replace(/\/$/, '')}.md`
-      const response = await fetch(mdPath)
-      if (response.ok) {
-        const rawMd = await response.text()
+      const path = `packages/docs/src/pages${route.path.replace(/\/$/, '')}.md`
+
+      const response = await octokit.request('GET /repos/{owner}/{repo}/contents/{path}', {
+        owner: 'vuetifyjs',
+        repo: 'vuetify',
+        path,
+        ref: branch,
+      })
+
+      if (response.data && 'content' in response.data) {
+        const rawMd = atob(response.data.content)
         const contentWithoutFrontmatter = rawMd.replace(/---[\\s\\S]*?---/, '').trim()
         markdownContent += contentWithoutFrontmatter
       } else {
         markdownContent += 'Could not fetch page content.'
       }
     } catch (error) {
-      console.error('Error fetching page content:', error)
+      console.error('Error fetching page content from GitHub:', error)
       markdownContent += 'Error fetching page content.'
     }
 
     try {
-      await navigator.clipboard.writeText(markdownContent)
+      navigator.clipboard.writeText(markdownContent)
       copied.value = true
       setTimeout(() => (copied.value = false), 2000)
     } catch (err) {

packages/docs/src/examples/v-combobox/misc-advanced.vue

@@ -72,7 +72,7 @@
 </template>
 
 <script setup>
-  import { onMounted, ref, watch } from 'vue'
+  import { ref, watch } from 'vue'
 
   const colors = ['green', 'purple', 'indigo', 'cyan', 'teal', 'orange']
   const editingItem = ref(null)
@@ -81,31 +81,34 @@
     { title: 'Foo', color: 'blue' },
     { title: 'Bar', color: 'red' },
   ])
-  const nonce = ref(1)
-  const model = ref([])
+  const model = ref([
+    { title: 'Foo', color: 'blue' },
+  ])
   const search = ref(null)
 
-  onMounted(() => {
-    model.value.push(items.value[1])
-  })
-
-  watch(model, (val, prev) => {
-    if (val.length === prev.length) return
-
-    model.value = val.map(v => {
+  let nonce = 1
+  watch(model, val => {
+    const newValue = []
+    let changed = false
+    for (const v of val) {
       if (typeof v === 'string') {
-        v = {
+        changed = true
+        const item = {
           title: v,
-          color: colors[nonce.value - 1],
+          color: colors[nonce],
         }
 
-        items.value.push(v)
+        newValue.push(item)
+        items.value.push(item)
 
-        nonce.value++
+        nonce = (nonce + 1) % colors.length
+      } else {
+        newValue.push(v)
       }
-
-      return v
-    })
+    }
+    if (changed) {
+      model.value = newValue
+    }
   })
 
   function edit (item) {
@@ -155,35 +158,38 @@
         },
       ],
       nonce: 1,
-      model: [],
+      model: [
+        { title: 'Foo', color: 'blue' },
+      ],
       search: null,
     }),
 
     watch: {
-      model (val, prev) {
-        if (val.length === prev.length) return
-
-        this.model = val.map(v => {
+      model (val) {
+        const newValue = []
+        let changed = false
+        for (const v of val) {
           if (typeof v === 'string') {
-            v = {
+            changed = true
+            const item = {
               title: v,
-              color: this.colors[this.nonce - 1],
+              color: this.colors[this.nonce],
             }
 
-            this.items.push(v)
+            newValue.push(item)
+            this.items.push(item)
 
-            this.nonce++
+            this.nonce = (this.nonce + 1) % this.colors.length
+          } else {
+            newValue.push(v)
           }
-
-          return v
-        })
+        }
+        if (changed) {
+          this.model = newValue
+        }
       },
     },
 
-    mounted () {
-      this.model = [this.items[1]]
-    },
-
     methods: {
       edit (item) {
         if (!this.editingItem) {

packages/docs/src/pages/en/getting-started/contributing.md

@@ -135,6 +135,15 @@ All api descriptions are managed via the api-generator package. This package mus
 - Put keys in alphabetical order.
 - Descriptions utilize a hierarchy of `generic.json` < `Source.json` < `Component.json` to reduce duplication. Source can be viewed using the **Developer Mode** in docs settings.
 
+#### Adding API Documentation
+
+When creating a new component (or composable, though this is typically done by the Vuetify team), you need to add a corresponding JSON file named `ComponentName.json` in `packages/api-generator/src/locale/en/`. This file should contain descriptions for props, slots, events, and exposed methods. After adding or updating JSON files, run `pnpm build api` to regenerate the dist language files. Keep in mind:
+
+- Changes to Vuetify require a rebuild before building the API
+- The API must be built before running the documentation server
+
+Enabling **developer mode** in the documentation settings will allow you to see the source of truth on API description pages.
+
 ### Submitting Changes / Pull Requests
 
 First you should create a fork of the vuetify repository to push your changes to. Information on forking repositories can be found in the [GitHub documentation](https://help.github.com/en/github/getting-started-with-github/fork-a-repo).

packages/vuetify/src/components/VBtn/VBtn.sass

@@ -1,5 +1,6 @@
 @use 'sass:math'
 @use 'sass:map'
+@use 'sass:meta'
 @use '../../styles/settings'
 @use '../../styles/tools'
 @use './mixins' as *
@@ -30,7 +31,8 @@
     flex-shrink: 0
 
     .v-locale--is-rtl &
-      text-indent: -1 * $button-text-letter-spacing
+      @if meta.type-of($button-text-letter-spacing) == 'number'
+        text-indent: -1 * $button-text-letter-spacing
 
     @at-root
       @include button-sizes()

packages/vuetify/src/components/VCarousel/VCarousel.sass

@@ -43,7 +43,6 @@
   // Element
   .v-carousel__progress
     margin: 0
-    position: absolute
     bottom: 0
     left: 0
     right: 0

packages/vuetify/src/components/VCarousel/VCarousel.tsx

@@ -172,6 +172,7 @@ export const VCarousel = genericComponent<new <T>(
 
                 { props.progress && (
                   <VProgressLinear
+                    absolute
                     class="v-carousel__progress"
                     color={ typeof props.progress === 'string' ? props.progress : undefined }
                     modelValue={ (group.getItemIndex(model.value) + 1) / group.items.value.length * 100 }

packages/vuetify/src/components/VDatePicker/VDatePickerMonth.sass

@@ -10,23 +10,18 @@
     --v-date-picker-month-day-diff: 4px
 
   .v-date-picker-month__weeks
-    display: grid
-    grid-template-rows: min-content min-content min-content min-content min-content min-content min-content
+    display: flex
+    flex-direction: column
     column-gap: $date-picker-month-column-gap
     font-size: $date-picker-month-font-size
 
-    + .v-date-picker-month__days
-      grid-row-gap: 0
-
   .v-date-picker-month__weekday
     font-size: $date-picker-month-font-size
 
   .v-date-picker-month__days
     display: grid
-    grid-template-columns: min-content min-content min-content min-content min-content min-content min-content
+    grid-template-columns: repeat(var(--v-date-picker-days-in-week), min-content)
     column-gap: $date-picker-month-column-gap
-    flex: 1 1
-    justify-content: space-around
 
   .v-date-picker-month__day
     align-items: center