Merge branch 'master' into patch-1

.github/actions/nightly-release/action.yml

@@ -47,7 +47,7 @@ runs:
       shell: bash
     - run: pnpm lerna version ${{ steps.get-version.outputs.full-version }} --no-push --no-commit-hooks --force-publish --yes
       shell: bash
-    - run: pnpm conventional-changelog -p angular --outfile ./packages/vuetify/CHANGELOG.md -r 2
+    - run: pnpm conventional-changelog -p vuetify --outfile ./packages/vuetify/CHANGELOG.md -r 2
       shell: bash
     - run: >-
         node -e "fs.writeFileSync(

.github/workflows/ci.yml

@@ -30,9 +30,15 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true'
     runs-on: ubuntu-24.04
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm build vuetify
+      - run: pnpm build:lib
+        working-directory: ./packages/vuetify
+      - run: ucacher pnpm build:dist
+        working-directory: ./packages/vuetify
+      - run: ucacher pnpm build:types
+        working-directory: ./packages/vuetify
       - uses: actions/upload-artifact@v4
         with:
           name: vuetify-dist
@@ -50,13 +56,14 @@ jobs:
       matrix:
         scopes: ['--scope vuetify --scope @vuetify/api-generator', '--scope vuetifyjs.com']
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
         with:
           name: vuetify-dist
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm lerna run lint $SCOPES
+      - run: ucacher pnpm lerna run lint $SCOPES
         env:
           SCOPES: ${{ matrix.scopes }}
 
@@ -87,6 +94,7 @@ jobs:
     runs-on: ubuntu-24.04
     if: github.event_name == 'push' && startswith(github.ref, 'refs/tags/v') && github.repository_owner == 'vuetifyjs'
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
@@ -95,7 +103,7 @@ jobs:
           name: vuetify-dist
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
-      - run: pnpm build api
+      - run: ucacher pnpm build api
       - run: echo "RELEASE_TAG=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV
       - name: NPM Release
         run: bash scripts/deploy.sh
@@ -115,15 +123,16 @@ jobs:
     if: needs.pre_job.outputs.should_skip != 'true' && github.event_name == 'push' && github.repository_owner == 'vuetifyjs' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/next')
     runs-on: ubuntu-24.04
     steps:
+      - uses: earthly/setup-ucacher@b99687d79dd75262bfc326b9e5ad3a520385a18b
       - uses: actions/checkout@v4
       - uses: actions/download-artifact@v4
         with:
           name: vuetify-dist
           path: packages/vuetify
       - uses: vuetifyjs/setup-action@master
       - uses: ./.github/actions/download-locales
-      - run: pnpm build api
-      - run: pnpm build docs
+      - run: ucacher pnpm build api
+      - run: ucacher pnpm build docs
         env:
           NODE_OPTIONS: --max-old-space-size=4096
           VITE_COSMIC_2_BUCKET_SLUG: ${{ secrets.COSMIC_2_BUCKET_SLUG }}

.github/workflows/triage.yml

@@ -12,6 +12,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           triageLabel: 'S: triage'
+          staleLabel: 'S: stale'
           sponsorsFile: '.github/sponsors.yml'
           duplicateLabel: 'duplicate'
           triagedLabels: |-

.ucacherignore

@@ -0,0 +1,4 @@
+.git/**/*
+node_modules/**/*
+/tmp/**/*
+.github/workflows/**/*

.ucacherignore.env

@@ -0,0 +1,35 @@
+GITHUB_TOKEN
+ACTIONS_RUNTIME_TOKEN
+GITHUB_PATH
+GITHUB_OUTPUT
+GITHUB_STATE
+GITHUB_ENV
+GITHUB_ACTION
+GITHUB_STEP_SUMMARY
+GITHUB_RUN_ATTEMPT
+GITHUB_RUN_NUMBER
+GITHUB_RUN_ID
+GITHUB_STEP_SUMMARY
+GITHUB_TRIGGERING_ACTOR
+GITHUB_ACTOR_ID
+GITHUB_ACTOR
+GITHUB_REF_TYPE
+GITHUB_SHA
+GITHUB_WORKFLOW_REF
+GITHUB_WORKFLOW_SHA
+GITHUB_EVENT_NAME
+GITHUB_HEAD_REF
+GITHUB_ACTION_REF
+INVOCATION_ID
+JOURNAL_STREAM
+SYSTEMD_EXEC_PID
+RUNNER_NAME
+RUNNER_TRACKING_ID
+LS_COLORS
+XDG_SESSION_ID
+SSH_CLIENT
+SSH_CONNECTION
+STATS_BLT
+HOSTNAME
+STATS_EXTP
+LOG_LEVEL

lerna.json

@@ -13,5 +13,5 @@
     }
   },
   "npmClient": "pnpm",
-  "version": "3.7.6"
+  "version": "3.7.7"
 }

packages/api-generator/package.json

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

packages/docs/package.json

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

packages/vuetify/package.json

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

packages/vuetify/src/composables/nested/nested.ts

@@ -339,7 +339,7 @@ export const useNestedItem = (id: Ref<unknown>, isGroup: boolean) => {
     isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected: boolean, e?: Event) => parent.root.select(computedId.value, selected, e),
     isSelected: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'on'),
-    isIndeterminate: computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
+    isIndeterminate: computed(() => parent.root.selected.value.get(toRaw(computedId.value)) === 'indeterminate'),
     isLeaf: computed(() => !parent.root.children.value.get(computedId.value)),
     isGroupActivator: parent.isGroupActivator,
   }

packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx

@@ -32,6 +32,7 @@ export type VTreeviewChildrenSlots<T> = {
 }
 
 export const makeVTreeviewChildrenProps = propsFactory({
+  disabled: Boolean,
   loadChildren: Function as PropType<(item: unknown) => Promise<void>>,
   loadingIcon: {
     type: String,
@@ -67,7 +68,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
   setup (props, { slots }) {
     const isLoading = reactive(new Set<unknown>())
 
-    const isClickOnOpen = computed(() => props.openOnClick != null ? props.openOnClick : props.selectable)
+    const isClickOnOpen = computed(() => !props.disabled && (props.openOnClick != null ? props.openOnClick : props.selectable))
 
     async function checkChildren (item: InternalListItem) {
       try {
@@ -99,6 +100,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
                 <VCheckboxBtn
                   key={ item.value }
                   modelValue={ slotProps.isSelected }
+                  disabled={ props.disabled }
                   loading={ loading }
                   color={ props.selectedColor }
                   indeterminate={ slotProps.isIndeterminate }
@@ -143,7 +145,7 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               return (
                 <VTreeviewItem
                   { ...listItemProps }
-                  value={ props.returnObject ? toRaw(item.raw) : itemProps.value }
+                  value={ props.returnObject ? item.raw : itemProps.value }
                   loading={ loading }
                   v-slots={ slotsWithItem }
                 />

packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass

@@ -8,6 +8,9 @@
   .v-treeview
     --indent-padding: 0px
 
+    &.v-list--disabled .v-list-item__prepend
+      pointer-events: auto
+
   .v-treeview-group.v-list-group
     --list-indent-size: #{$treeview-group-list-indent-size}
 
@@ -16,3 +19,6 @@
 
     .v-list-group__items .v-list-item
       padding-inline-start: calc(#{$treeview-item-padding-inline-start} + var(--indent-padding)) !important
+
+    .v-list-group__items .v-list-item.v-list-group__header
+      padding-inline-start: calc(#{$treeview-group-header-padding-inline-start} + var(--indent-padding)) !important

packages/vuetify/src/labs/VTreeview/VTreeviewItem.tsx

@@ -12,7 +12,7 @@ import { IconValue } from '@/composables/icons'
 import { useLink } from '@/composables/router'
 
 // Utilities
-import { computed, inject, ref } from 'vue'
+import { computed, inject, ref, toRaw } from 'vue'
 import { EventProp, genericComponent, omit, propsFactory, useRender } from '@/util'
 
 // Types
@@ -68,7 +68,7 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             'v-treeview-item',
             {
               'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
-              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id),
+              'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id)),
             },
             props.class,
           ]}
@@ -80,29 +80,29 @@ export const VTreeviewItem = genericComponent<VListItemSlots>()({
             prepend: hasPrepend ? slotProps => {
               return (
                 <>
-                  { props.toggleIcon && (
-                    <VListItemAction start={ false }>
-                      <VBtn
-                        density="compact"
-                        icon={ props.toggleIcon }
-                        loading={ props.loading }
-                        variant="text"
-                        onClick={ props.onToggleExpand }
-                      >
-                        {{
-                          loader () {
-                            return (
-                              <VProgressCircular
-                                indeterminate="disable-shrink"
-                                size="20"
-                                width="2"
-                              />
-                            )
-                          },
-                        }}
-                      </VBtn>
-                    </VListItemAction>
-                  )}
+                  <VListItemAction start={ false }>
+                    { props.toggleIcon && (
+                        <VBtn
+                          density="compact"
+                          icon={ props.toggleIcon }
+                          loading={ props.loading }
+                          variant="text"
+                          onClick={ props.onToggleExpand }
+                        >
+                          {{
+                            loader () {
+                              return (
+                                <VProgressCircular
+                                  indeterminate="disable-shrink"
+                                  size="20"
+                                  width="2"
+                                />
+                              )
+                            },
+                          }}
+                        </VBtn>
+                    )}
+                  </VListItemAction>
 
                   { slots.prepend?.(slotProps) }
                 </>

packages/vuetify/src/labs/VTreeview/__tests__/VTreeview.spec.browser.tsx

@@ -672,4 +672,37 @@ describe.each([
       expect(el).toBeVisible()
     })
   })
+
+  // https://github.com/vuetifyjs/vuetify/issues/20830
+  it('should return correct isOpen state in prepend slot', async () => {
+    render(() => (
+      <VTreeview
+        items={ items }
+        item-value="id"
+        open-on-click
+        return-object
+      >
+        {{
+          prepend: ({ isOpen }) => (<span class="prepend-is-open">{ `${isOpen}` }</span>),
+        }}
+      </VTreeview>
+    ))
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    const itemsPrepend = screen.getAllByCSS('.v-treeview-item .v-list-item__prepend .prepend-is-open')
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^true$/)
+
+    await userEvent.click(screen.getByText(/Core team/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^true$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+
+    await userEvent.click(screen.getByText(/Vuetify Human Resources/))
+    expect(itemsPrepend[0]).toHaveTextContent(/^false$/)
+    expect(itemsPrepend[1]).toHaveTextContent(/^false$/)
+  })
 })

packages/vuetify/src/labs/VTreeview/_variables.scss

@@ -4,3 +4,4 @@ $treeview-group-list-indent-size: 16px !default;
 $treeview-group-list-prepend-width: 16px !default;
 $treeview-item-padding-inline-start: 12px !default;
 $treeview-item-prepend-padding-inline-start: 44px !default;
+$treeview-group-header-padding-inline-start: 16px !default;