fix(VTreeview): increase v-treeview-item--filtered specificity

fixes #19404
vuetifyjs · Jul 12, 2024 · 39e7c64 · 39e7c64
1 parent 2d2e7a0
commit 39e7c64
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 94 deletions.
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
@@ -3,7 +3,7 @@
  class="mx-auto"
  max-width="500"
  >
- <v-sheet class="pa-4 bg-primary-lighten-2">
+ <v-sheet class="pa-4 bg-primary">
  <v-text-field
  v-model="search"
  clear-icon="mdi-close-circle-outline"
@@ -24,11 +24,10 @@
  <v-card-text>
  <v-treeview
  v-model:opened="open"
- :filter="filter"
+ :custom-filter="filterFn"
  :items="items"
  :search="search"
  item-value="id"
- open-all
  >
  <template v-slot:prepend="{ item }">
  <v-icon
@@ -113,90 +112,7 @@
  const open = ref([1, 2])
  const search = ref(null)
  const caseSensitive = ref(false)
- const filter = computed(() => {
- return caseSensitive.value ? (item, search, textKey) => item[textKey].indexOf(search) > -1 : undefined
- })
-</script>
-
-<script>
- export default {
- data: () => ({
- items: [
- {
- id: 1,
- title: 'Vuetify Human Resources',
- children: [
- {
- id: 2,
- title: 'Core team',
- children: [
- {
- id: 201,
- title: 'John',
- },
- {
- id: 202,
- title: 'Kael',
- },
- {
- id: 203,
- title: 'Nekosaur',
- },
- {
- id: 204,
- title: 'Jacek',
- },
- {
- id: 205,
- title: 'Andrew',
- },
- ],
- },
- {
- id: 3,
- title: 'Administrators',
- children: [
- {
- id: 301,
- title: 'Mike',
- },
- {
- id: 302,
- title: 'Hunt',
- },
- ],
- },
- {
- id: 4,
- title: 'Contributors',
- children: [
- {
- id: 401,
- title: 'Phlow',
- },
- {
- id: 402,
- title: 'Brandon',
- },
- {
- id: 403,
- title: 'Sean',
- },
- ],
- },
- ],
- },
- ],
- open: [1, 2],
- search: null,
- caseSensitive: false,
- }),
- computed: {
- filter () {
- return this.caseSensitive
- ? (item, search, textKey) => item[textKey].indexOf(search) > -1
- : undefined
- },
- },
+ const filterFn = function (value, search, item) {
+ return caseSensitive.value ? value.indexOf(search) > -1 : value.toLowerCase().indexOf(search.toLowerCase()) > -1
  }
 </script>
diff --git a/packages/docs/src/pages/en/components/treeview.md b/packages/docs/src/pages/en/components/treeview.md
@@ -146,7 +146,7 @@ Using the the **prepend** slot we are able to create an intuitive file explorer.
 
 #### Search and filter
 
-Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component.
+Easily filter your treeview by using the **search** prop. You can easily apply your custom filtering function if you need case-sensitive or fuzzy filtering by setting the **custom-filter** prop. This works similar to the [v-autocomplete](/components/autocompletes) component.
 
 <ExamplesExample file="v-treeview/misc-search-and-filter" />
 

diff --git a/packages/docs/src/plugins/icons.ts b/packages/docs/src/plugins/icons.ts
@@ -170,6 +170,7 @@ export {
  mdiFlaskEmptyOutline,
  mdiFlaskOutline,
  mdiFolder,
+ mdiFolderNetwork,
  mdiFolderOpen,
  mdiFolderOutline,
  mdiFolderZipOutline,
@@ -206,6 +207,7 @@ export {
  mdiHome,
  mdiHomeCity,
  mdiHomeOutline,
+ mdiHomeVariant,
  mdiHumanMaleBoard,
  mdiHumanMaleFemaleChild,
  mdiIceCream,

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass b/packages/vuetify/src/labs/VTreeview/VTreeviewItem.sass
@@ -2,8 +2,8 @@
 @use './variables' as *
 
 @include tools.layer('components')
- .v-treeview-item--filtered
-  display: none
+ .v-treeview-item.v-treeview-item--filtered
+ display: none
 
  .v-treeview
  --indent-padding: 0px
@@ -16,6 +16,3 @@
 
  .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--prepend
- // padding-inline-start: calc(#{$treeview-item-prepend-padding-inline-start} + var(--indent-padding)) !important