feat: expose isOpen in prepend slot

vuetifyjs · Jul 5, 2024 · 95de09e · 95de09e
1 parent 724e7d5
commit 95de09e
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 94 deletions.
diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
@@ -26,7 +26,7 @@
             true-icon="mdi-bookmark"
             return-object
             selectable
-          />
+          ></v-treeview>
         </v-card-text>
       </v-col>
 
@@ -85,24 +85,16 @@
 </template>
 
 <script setup>
-  import { computed, ref, watch } from 'vue'
+  import { ref, watch } from 'vue'
 
-  const rootObj = {
-    id: 1,
-    name: 'All Breweries',
-  }
   const breweries = ref([])
   const tree = ref([])
   const types = ref([])
-  const items = computed(() => {
-    const children = types.value.map(type => ({
-      id: type,
-      name: getName(type),
-      children: getChildren(type),
-    }))
-    rootObj.children = children
-    return [rootObj]
-  })
+  const items = ref([{
+    id: 1,
+    name: 'All Breweries',
+    children: [],
+  }])
   function load () {
     if (breweries.value.length) return
 
@@ -130,6 +122,14 @@
       if (!acc.includes(type)) acc.push(type)
       return acc
     }, []).sort()
+
+    const children = types.value.map(type => ({
+      id: type,
+      name: getName(type),
+      children: getChildren(type),
+    }))
+    const rootObj = items.value[0]
+    rootObj.children = children
+    items.value = [rootObj]
   })
 </script>
-
diff --git a/packages/docs/src/examples/v-treeview/slot-append-and-label.vue b/packages/docs/src/examples/v-treeview/slot-append-and-label.vue
@@ -1,15 +1,14 @@
 <template>
   <v-treeview
-    v-model="tree"
     :items="items"
     :opened="initiallyOpen"
-    item-key="name"
+    item-value="title"
     activatable
     open-on-click
   >
-    <template v-slot:prepend="{ item, open }">
+    <template v-slot:prepend="{ item, isOpen }">
       <v-icon v-if="!item.file">
-        {{ open ? 'mdi-folder-open' : 'mdi-folder' }}
+        {{ isOpen ? 'mdi-folder-open' : 'mdi-folder' }}
       </v-icon>
       <v-icon v-else>
         {{ files[item.file] }}
@@ -32,7 +31,6 @@
     txt: 'mdi-file-document-outline',
     xls: 'mdi-file-excel',
   })
-  const tree = ref([])
   const items = ref([
     {
       title: '.git',
@@ -86,74 +84,3 @@
     },
   ])
 </script>
-
-<script>
-  export default {
-    data: () => ({
-      initiallyOpen: ['public'],
-      files: {
-        html: 'mdi-language-html5',
-        js: 'mdi-nodejs',
-        json: 'mdi-code-json',
-        md: 'mdi-language-markdown',
-        pdf: 'mdi-file-pdf-box',
-        png: 'mdi-file-image',
-        txt: 'mdi-file-document-outline',
-        xls: 'mdi-file-excel',
-      },
-      tree: [],
-      items: [
-        {
-          title: '.git',
-        },
-        {
-          title: 'node_modules',
-        },
-        {
-          title: 'public',
-          children: [
-            {
-              title: 'static',
-              children: [{
-                title: 'logo.png',
-                file: 'png',
-              }],
-            },
-            {
-              title: 'favicon.ico',
-              file: 'png',
-            },
-            {
-              title: 'index.html',
-              file: 'html',
-            },
-          ],
-        },
-        {
-          title: '.gitignore',
-          file: 'txt',
-        },
-        {
-          title: 'babel.config.js',
-          file: 'js',
-        },
-        {
-          title: 'package.json',
-          file: 'json',
-        },
-        {
-          title: 'README.md',
-          file: 'md',
-        },
-        {
-          title: 'vue.config.js',
-          file: 'js',
-        },
-        {
-          title: 'yarn.lock',
-          file: 'txt',
-        },
-      ],
-    }),
-  }
-</script>
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
@@ -136,9 +136,9 @@ Shaped treeview's have rounded borders on one side of the nodes.
 
 ### Slots
 
-#### Append and label
+#### Prepend
 
-Using the the **label**, and an **append** slots we are able to create an intuitive file explorer.
+Using the the **prepend** slot we are able to create an intuitive file explorer.
 
 <ExamplesExample file="v-treeview/slot-append-and-label" />
 

diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -36,6 +36,7 @@ import type { RippleDirectiveBinding } from '@/directives/ripple'
 
 export type ListItemSlot = {
   isActive: boolean
+  isOpen: boolean
   isSelected: boolean
   isIndeterminate: boolean
   select: (value: boolean) => void
@@ -119,6 +120,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
       activate,
       isActivated,
       select,
+      isOpen,
       isSelected,
       isIndeterminate,
       isGroupActivator,
@@ -167,6 +169,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
     const slotProps = computed(() => ({
       isActive: isActive.value,
       select,
+      isOpen: isOpen.value,
       isSelected: isSelected.value,
       isIndeterminate: isIndeterminate.value,
     } satisfies ListItemSlot))