feat(VTreeview): port to v3 (#17864)

closes #13518 Co-authored-by: John Leider <john@vuetifyjs.com> Co-authored-by: Kael <kaelwd@gmail.com>
vuetifyjs · Mar 12, 2024 · 7f276a5 · 7f276a5
1 parent 7b5f229
commit 7f276a5
Show file tree

Hide file tree

Showing 45 changed files with 1,422 additions and 610 deletions.
diff --git a/packages/api-generator/src/locale/en/VList.json b/packages/api-generator/src/locale/en/VList.json
@@ -1,5 +1,6 @@
 {
   "props": {
+    "itemType": "Designates the key on the supplied items that is used for determining the nodes type.",
     "disabled": "Puts all children inputs into a disabled state.",
     "inactive": "If set, the list tile will not be rendered as a link even if it has to/href prop or @click handler.",
     "lines": "Designates a **minimum-height** for all children `v-list-item` components. This prop uses [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp) and is not supported in all browsers.",

diff --git a/packages/api-generator/src/locale/en/VListGroup.json b/packages/api-generator/src/locale/en/VListGroup.json
@@ -1,10 +1,15 @@
 {
   "props": {
     "disabled": "Puts all children inputs into a disabled state.",
+    "collapseIcon": "Icon to display when the list item is expanded.",
+    "expandIcon": "Icon to display when the list item is collapsed.",
     "group": "Assign a route namespace. Accepts a string or regexp for determining active state.",
     "noAction": "Removes left padding assigned for action icons from group items.",
     "prependIcon": "Prepends an icon to the component, uses the same syntax as `v-icon`.",
-    "subGroup": "Designate the component as nested list group.",
+    "subgroup": "Designate the component as nested list group.",
     "value": "Expands / Collapse the list-group."
+  },
+  "exposed": {
+    "isOpen": "Returns the current state of the list-group."
   }
 }
diff --git a/packages/api-generator/src/locale/en/VTreeview.json b/packages/api-generator/src/locale/en/VTreeview.json
@@ -1,7 +1,6 @@
 {
   "props": {
     "activatable": "Allows user to mark a node as active by clicking on it.",
-    "active": "Syncable prop that allows one to control which nodes are active. The array consists of the `item-key` of each active item.",
     "color": "Applies specified color to the active node - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "dense": "Decreases the height of the items.",
     "disabled": "Disables selection for all nodes.",
@@ -35,14 +34,19 @@
   },
   "slots": {
     "append": "Appends content after label.",
-    "prepend": "Prepends content before label."
+    "prepend": "Prepends content before label.",
+    "header": "Slot for custom header.",
+    "subheader": "Slot for custom subheader.",
+    "divider": "Slot for custom divider."
   },
   "events": {
-    "input": "Emits the array of selected items when this value changes.",
-    "update:active": "Emits the array of active items when this value changes.",
-    "update:open": "Emits the array of open items when this value changes."
+    "click:open": "Emits the item when it is clicked to open.",
+    "click:select": "Emits the item when it is clicked to select.",
+    "update:activated": "Emits the array of active items when this value changes.",
+    "update:opened": "Emits the array of open items when this value changes.",
+    "update:selected": "Emits the array of selected items when this value changes."
   },
-  "functions": {
-    "updateAll": "Opens or closes all nodes."
+  "exposed": {
+    "open": "Open a node by id"
   }
 }
diff --git a/packages/api-generator/src/locale/en/generic.json b/packages/api-generator/src/locale/en/generic.json
@@ -6,6 +6,7 @@
     "appendAvatar": "Appends a [v-avatar](/components/avatars/) component after default content in the **append** slot.",
     "appendIcon": "Creates a [v-icon](/api/v-icon/) component after default content in the **append** slot.",
     "auto": "Centers list on selected element.",
+    "baseColor": "Sets the color of component when not focused.",
     "bgColor": "Applies specified color to the control's background. Used on components that also support the **color** prop. - supports utility colors (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",
     "clearable": "Allows for the component to be cleared.",
     "color": "Applies specified color to the control - supports utility colors (for example `success` or `purple`) or css color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the [colors page](/styles/colors#material-colors).",

diff --git a/packages/api-generator/src/locale/en/nested.json b/packages/api-generator/src/locale/en/nested.json
@@ -1,5 +1,7 @@
 {
   "props": {
+    "activated": "Array of ids of activated nodes.",
+    "activeStrategy": "Affects how items with children behave when activated.\n- **leaf:** Only leaf nodes (items without children) can be activated.\n- **independent:** All nodes can be activated whether they have children or not.\n- **classic:** Activating a parent node will cause all children to be activated.",
     "opened": "An array containing the values of currently opened groups. Can be two-way bound with `v-model:opened`.",
     "openStrategy": "Affects how items with children behave when expanded.\n- **multiple:** Any number of groups can be open at once.\n- **single:** Only one group at each level can be open, opening a group will cause others to close.\n- **list:** Multiple, but all other groups will close when an item is selected.",
     "selected": "An array containing the values of currently selected items. Can be two-way bound with `v-model:selected`.",

diff --git a/packages/docs/src/data/nav.json b/packages/docs/src/data/nav.json
@@ -238,6 +238,10 @@
       {
         "title": "speed-dials",
         "subfolder": "components"
+      },
+      {
+        "title": "treeview",
+        "subfolder": "components"
       }
     ]
   },

diff --git a/packages/docs/src/data/page-to-api.json b/packages/docs/src/data/page-to-api.json
@@ -143,7 +143,12 @@
   "components/timelines": ["VTimeline", "VTimelineItem"],
   "components/toolbars": ["VToolbar", "VToolbarItems", "VToolbarTitle"],
   "components/tooltips": ["VTooltip"],
-  "components/treeview": ["VTreeview"],
+  "components/treeview": [
+    "VTreeview",
+    "VTreeviewItem",
+    "VTreeviewChildren",
+    "VTreeviewGroup"
+  ],
   "components/virtual-scroller": ["VVirtualScroll"],
   "components/windows": ["VWindow", "VWindowItem"],
   "directives/click-outside": ["v-click-outside"],

diff --git a/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue b/packages/docs/src/examples/v-treeview/misc-search-and-filter.vue
@@ -31,7 +31,7 @@
         <template v-slot:prepend="{ item }">
           <v-icon
             v-if="item.children"
-            v-text="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
+            :icon="`mdi-${item.id === 1 ? 'home-variant' : 'folder-network'}`"
           ></v-icon>
         </template>
       </v-treeview>
@@ -45,63 +45,63 @@
   const items = ref([
     {
       id: 1,
-      name: 'Vuetify Human Resources',
+      title: 'Vuetify Human Resources',
       children: [
         {
           id: 2,
-          name: 'Core team',
+          title: 'Core team',
           children: [
             {
               id: 201,
-              name: 'John',
+              title: 'John',
             },
             {
               id: 202,
-              name: 'Kael',
+              title: 'Kael',
             },
             {
               id: 203,
-              name: 'Nekosaur',
+              title: 'Nekosaur',
             },
             {
               id: 204,
-              name: 'Jacek',
+              title: 'Jacek',
             },
             {
               id: 205,
-              name: 'Andrew',
+              title: 'Andrew',
             },
           ],
         },
         {
           id: 3,
-          name: 'Administrators',
+          title: 'Administrators',
           children: [
             {
               id: 301,
-              name: 'Mike',
+              title: 'Mike',
             },
             {
               id: 302,
-              name: 'Hunt',
+              title: 'Hunt',
             },
           ],
         },
         {
           id: 4,
-          name: 'Contributors',
+          title: 'Contributors',
           children: [
             {
               id: 401,
-              name: 'Phlow',
+              title: 'Phlow',
             },
             {
               id: 402,
-              name: 'Brandon',
+              title: 'Brandon',
             },
             {
               id: 403,
-              name: 'Sean',
+              title: 'Sean',
             },
           ],
         },
@@ -122,63 +122,63 @@
       items: [
         {
           id: 1,
-          name: 'Vuetify Human Resources',
+          title: 'Vuetify Human Resources',
           children: [
             {
               id: 2,
-              name: 'Core team',
+              title: 'Core team',
               children: [
                 {
                   id: 201,
-                  name: 'John',
+                  title: 'John',
                 },
                 {
                   id: 202,
-                  name: 'Kael',
+                  title: 'Kael',
                 },
                 {
                   id: 203,
-                  name: 'Nekosaur',
+                  title: 'Nekosaur',
                 },
                 {
                   id: 204,
-                  name: 'Jacek',
+                  title: 'Jacek',
                 },
                 {
                   id: 205,
-                  name: 'Andrew',
+                  title: 'Andrew',
                 },
               ],
             },
             {
               id: 3,
-              name: 'Administrators',
+              title: 'Administrators',
               children: [
                 {
                   id: 301,
-                  name: 'Mike',
+                  title: 'Mike',
                 },
                 {
                   id: 302,
-                  name: 'Hunt',
+                  title: 'Hunt',
                 },
               ],
             },
             {
               id: 4,
-              name: 'Contributors',
+              title: 'Contributors',
               children: [
                 {
                   id: 401,
-                  name: 'Phlow',
+                  title: 'Phlow',
                 },
                 {
                   id: 402,
-                  name: 'Brandon',
+                  title: 'Brandon',
                 },
                 {
                   id: 403,
-                  name: 'Sean',
+                  title: 'Sean',
                 },
               ],
             },

diff --git a/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue b/packages/docs/src/examples/v-treeview/misc-selectable-icons.vue
@@ -2,30 +2,33 @@
   <v-card>
     <v-toolbar
       color="primary"
-      dark
       flat
     >
-      <v-icon>mdi-silverware</v-icon>
-      <v-toolbar-title>Local hotspots</v-toolbar-title>
+      <template v-slot:prepend>
+        <v-icon start>mdi-silverware</v-icon>
+
+        <v-toolbar-title>Local hotspots</v-toolbar-title>
+      </template>
     </v-toolbar>
 
     <v-row>
       <v-col>
         <v-card-text>
           <v-treeview
-            v-model="tree"
+            v-model:selected="tree"
             :items="items"
             :load-children="load"
             expand-icon="mdi-chevron-down"
             indeterminate-icon="mdi-bookmark-minus"
+            item-title="name"
+            item-value="name"
             off-icon="mdi-bookmark-outline"
             on-icon="mdi-bookmark"
             selected-color="indigo"
             open-on-click
             return-object
             selectable
-          >
-          </v-treeview>
+          ></v-treeview>
         </v-card-text>
       </v-col>
 
@@ -51,19 +54,12 @@
             <v-chip
               v-for="(selection, i) in tree"
               :key="i"
+              :text="selection"
               class="ma-1"
               color="grey"
-              dark
-              small
-            >
-              <v-icon
-                size="small"
-                start
-              >
-                mdi-beer
-              </v-icon>
-              {{ selection.name }}
-            </v-chip>
+              prepend-icon="mdi-beer"
+              size="small"
+            ></v-chip>
           </v-scroll-x-transition>
         </v-card-text>
       </v-col>
@@ -73,23 +69,19 @@
 
     <v-card-actions>
       <v-btn
+        text="Reset"
         variant="text"
         @click="tree = []"
-      >
-        Reset
-      </v-btn>
+      ></v-btn>
 
       <v-spacer></v-spacer>
 
       <v-btn
+        append-icon="mdi-content-save"
         color="green-darken-1"
+        text="Save"
         variant="flat"
-      >
-        Save
-        <v-icon end>
-          mdi-content-save
-        </v-icon>
-      </v-btn>
+      ></v-btn>
     </v-card-actions>
   </v-card>
 </template>