vuetify 3.5.8 → 3.5.9

package/dist/vuetify-labs.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.8
+* Vuetify v3.5.9
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4376,6 +4376,8 @@
     plus: 'mdi-plus',
     minus: 'mdi-minus',
     calendar: 'mdi-calendar',
+    treeviewCollapse: 'mdi-menu-down',
+    treeviewExpand: 'mdi-menu-right',
     eyeDropper: 'mdi-eyedropper'
   };
   const mdi = {
@@ -7762,6 +7764,126 @@
     return vue.inject(ListKey, null);
   }
 
+  /* eslint-disable sonarjs/no-identical-functions */
+  // Utilities
+  const independentActiveStrategy = mandatory => {
+    const strategy = {
+      activate: _ref => {
+        let {
+          id,
+          value,
+          activated
+        } = _ref;
+        id = vue.toRaw(id);
+
+        // When mandatory and we're trying to deselect when id
+        // is the only currently selected item then do nothing
+        if (mandatory && !value && activated.size === 1 && activated.has(id)) return activated;
+        if (value) {
+          activated.add(id);
+        } else {
+          activated.delete(id);
+        }
+        return activated;
+      },
+      in: (v, children, parents) => {
+        let set = new Set();
+        for (const id of v || []) {
+          set = strategy.activate({
+            id,
+            value: true,
+            activated: new Set(set),
+            children,
+            parents
+          });
+        }
+        return set;
+      },
+      out: v => {
+        return Array.from(v);
+      }
+    };
+    return strategy;
+  };
+  const independentSingleActiveStrategy = mandatory => {
+    const parentStrategy = independentActiveStrategy(mandatory);
+    const strategy = {
+      activate: _ref2 => {
+        let {
+          activated,
+          id,
+          ...rest
+        } = _ref2;
+        id = vue.toRaw(id);
+        const singleSelected = activated.has(id) ? new Set([id]) : new Set();
+        return parentStrategy.activate({
+          ...rest,
+          id,
+          activated: singleSelected
+        });
+      },
+      in: (v, children, parents) => {
+        let set = new Set();
+        if (v?.length) {
+          set = parentStrategy.in(v.slice(0, 1), children, parents);
+        }
+        return set;
+      },
+      out: (v, children, parents) => {
+        return parentStrategy.out(v, children, parents);
+      }
+    };
+    return strategy;
+  };
+  const leafActiveStrategy = mandatory => {
+    const parentStrategy = independentActiveStrategy(mandatory);
+    const strategy = {
+      activate: _ref3 => {
+        let {
+          id,
+          activated,
+          children,
+          ...rest
+        } = _ref3;
+        id = vue.toRaw(id);
+        if (children.has(id)) return activated;
+        return parentStrategy.activate({
+          id,
+          activated,
+          children,
+          ...rest
+        });
+      },
+      in: parentStrategy.in,
+      out: parentStrategy.out
+    };
+    return strategy;
+  };
+  const leafSingleActiveStrategy = mandatory => {
+    const parentStrategy = independentSingleActiveStrategy(mandatory);
+    const strategy = {
+      activate: _ref4 => {
+        let {
+          id,
+          activated,
+          children,
+          ...rest
+        } = _ref4;
+        id = vue.toRaw(id);
+        if (children.has(id)) return activated;
+        return parentStrategy.activate({
+          id,
+          activated,
+          children,
+          ...rest
+        });
+      },
+      in: parentStrategy.in,
+      out: parentStrategy.out
+    };
+    return strategy;
+  };
+
   const singleOpenStrategy = {
     open: _ref => {
       let {
@@ -7846,7 +7968,8 @@
         if (mandatory && !value) {
           const on = Array.from(selected.entries()).reduce((arr, _ref2) => {
             let [key, value] = _ref2;
-            return value === 'on' ? [...arr, key] : arr;
+            if (value === 'on') arr.push(key);
+            return arr;
           }, []);
           if (on.length === 1 && on[0] === id) return selected;
         }
@@ -7988,7 +8111,8 @@
         if (mandatory && !value) {
           const on = Array.from(selected.entries()).reduce((arr, _ref7) => {
             let [key, value] = _ref7;
-            return value === 'on' ? [...arr, key] : arr;
+            if (value === 'on') arr.push(key);
+            return arr;
           }, []);
           if (on.length === 0) return original;
         }
@@ -8032,16 +8156,24 @@
       children: vue.ref(new Map()),
       open: () => null,
       openOnSelect: () => null,
+      activate: () => null,
       select: () => null,
+      activatable: vue.ref(false),
+      selectable: vue.ref(false),
       opened: vue.ref(new Set()),
+      activated: vue.ref(new Set()),
       selected: vue.ref(new Map()),
       selectedValues: vue.ref([])
     }
   };
   const makeNestedProps = propsFactory({
+    activatable: Boolean,
+    selectable: Boolean,
+    activeStrategy: [String, Function],
     selectStrategy: [String, Function],
     openStrategy: [String, Object],
     opened: Array,
+    activated: Array,
     selected: Array,
     mandatory: Boolean
   }, 'nested');
@@ -8050,6 +8182,20 @@
     const children = vue.ref(new Map());
     const parents = vue.ref(new Map());
     const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+    const activeStrategy = vue.computed(() => {
+      if (typeof props.activeStrategy === 'object') return props.activeStrategy;
+      switch (props.activeStrategy) {
+        case 'leaf':
+          return leafActiveStrategy(props.mandatory);
+        case 'single-leaf':
+          return leafSingleActiveStrategy(props.mandatory);
+        case 'independent':
+          return independentActiveStrategy(props.mandatory);
+        case 'single-independent':
+        default:
+          return independentSingleActiveStrategy(props.mandatory);
+      }
+    });
     const selectStrategy = vue.computed(() => {
       if (typeof props.selectStrategy === 'object') return props.selectStrategy;
       switch (props.selectStrategy) {
@@ -8078,6 +8224,7 @@
           return multipleOpenStrategy;
       }
     });
+    const activated = useProxiedModel(props, 'activated', props.activated, v => activeStrategy.value.in(v, children.value, parents.value), v => activeStrategy.value.out(v, children.value, parents.value));
     const selected = useProxiedModel(props, 'selected', props.selected, v => selectStrategy.value.in(v, children.value, parents.value), v => selectStrategy.value.out(v, children.value, parents.value));
     vue.onBeforeUnmount(() => {
       isUnmounted = true;
@@ -8096,6 +8243,9 @@
       id: vue.shallowRef(),
       root: {
         opened,
+        activatable: vue.toRef(props, 'activatable'),
+        selectable: vue.toRef(props, 'selectable'),
+        activated,
         selected,
         selectedValues: vue.computed(() => {
           const arr = [];
@@ -8169,6 +8319,26 @@
           newSelected && (selected.value = newSelected);
           nested.root.openOnSelect(id, value, event);
         },
+        activate: (id, value, event) => {
+          if (!props.activatable) {
+            return nested.root.select(id, true, event);
+          }
+          vm.emit('click:activate', {
+            id,
+            value,
+            path: getPath(id),
+            event
+          });
+          const newActivated = activeStrategy.value.activate({
+            id,
+            value,
+            activated: new Set(activated.value),
+            children: children.value,
+            parents: parents.value,
+            event
+          });
+          newActivated && (activated.value = newActivated);
+        },
         children,
         parents
       }
@@ -8187,6 +8357,8 @@
       openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
       isOpen: vue.computed(() => parent.root.opened.value.has(computedId.value)),
       parent: vue.computed(() => parent.root.parents.value.get(computedId.value)),
+      activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
+      isActivated: vue.computed(() => parent.root.activated.value.has(vue.toRaw(computedId.value))),
       select: (selected, e) => parent.root.select(computedId.value, selected, e),
       isSelected: vue.computed(() => parent.root.selected.value.get(vue.toRaw(computedId.value)) === 'on'),
       isIndeterminate: vue.computed(() => parent.root.selected.value.get(computedId.value) === 'indeterminate'),
@@ -8309,7 +8481,9 @@
           }, [slots.default?.()]), [[vue.vShow, isOpen.value]])]
         })]
       }));
-      return {};
+      return {
+        isOpen
+      };
     }
   });
 
@@ -8382,6 +8556,8 @@
       const link = useLink(props, attrs);
       const id = vue.computed(() => props.value === undefined ? link.href.value : props.value);
       const {
+        activate,
+        isActivated,
         select,
         isSelected,
         isIndeterminate,
@@ -8391,9 +8567,9 @@
         openOnSelect
       } = useNestedItem(id, false);
       const list = useList();
-      const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || isSelected.value));
+      const isActive = vue.computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
       const isLink = vue.computed(() => props.link !== false && link.isLink.value);
-      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
+      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || !!list && (root.selectable.value || root.activatable.value || props.value != null)));
       const roundedProps = vue.computed(() => props.rounded || props.nav);
       const color = vue.computed(() => props.color ?? props.activeColor);
       const variantProps = vue.computed(() => ({
@@ -8444,7 +8620,13 @@
         emit('click', e);
         if (isGroupActivator || !isClickable.value) return;
         link.navigate?.(e);
-        props.value != null && select(!isSelected.value, e);
+        if (root.activatable) {
+          activate(!isActivated.value, e);
+        } else if (root.selectable) {
+          select(!isSelected.value, e);
+        } else if (props.value != null) {
+          select(!isSelected.value, e);
+        }
       }
       function onKeyDown(e) {
         if (e.key === 'Enter' || e.key === ' ') {
@@ -8560,7 +8742,12 @@
           }, null)])]
         }), [[vue.resolveDirective("ripple"), isClickable.value && props.ripple]]);
       });
-      return {};
+      return {
+        isGroupActivator,
+        isSelected,
+        list,
+        select
+      };
     }
   });
 
@@ -8902,8 +9089,10 @@
     props: makeVListProps(),
     emits: {
       'update:selected': value => true,
+      'update:activated': value => true,
       'update:opened': value => true,
       'click:open': value => true,
+      'click:activate': value => true,
       'click:select': value => true
     },
     setup(props, _ref) {
@@ -8936,7 +9125,9 @@
         roundedClasses
       } = useRounded(props);
       const {
+        children,
         open,
+        parents,
         select
       } = useNested(props);
       const lineClasses = vue.computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
@@ -9026,7 +9217,9 @@
       return {
         open,
         select,
-        focus
+        focus,
+        children,
+        parents
       };
     }
   });
@@ -11906,9 +12099,11 @@
           });
         }
       });
-      vue.watch(() => props.items, val => {
-        if (!isFocused.value || !val.length || menu.value) return;
-        menu.value = true;
+      vue.watch(() => props.items, (newVal, oldVal) => {
+        if (menu.value) return;
+        if (isFocused.value && !oldVal.length && newVal.length) {
+          menu.value = true;
+        }
       });
       useRender(() => {
         const hasChips = !!(props.chips || slots.chip);
@@ -12468,9 +12663,11 @@
           });
         }
       });
-      vue.watch(() => props.items, val => {
-        if (!isFocused.value || !val.length || menu.value) return;
-        menu.value = true;
+      vue.watch(() => props.items, (newVal, oldVal) => {
+        if (menu.value) return;
+        if (isFocused.value && !oldVal.length && newVal.length) {
+          menu.value = true;
+        }
       });
       useRender(() => {
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -16273,9 +16470,11 @@
           });
         }
       });
-      vue.watch(() => props.items, val => {
-        if (!isFocused.value || !val.length || menu.value) return;
-        menu.value = true;
+      vue.watch(() => props.items, (newVal, oldVal) => {
+        if (menu.value) return;
+        if (isFocused.value && !oldVal.length && newVal.length) {
+          menu.value = true;
+        }
       });
       useRender(() => {
         const hasList = !!(!props.hideNoData || displayItems.value.length || slots['prepend-item'] || slots['append-item'] || slots['no-data']);
@@ -20296,6 +20495,7 @@
         emit('click:month');
       }
       useRender(() => {
+        // TODO: add slot support and scope defaults
         return vue.createVNode("div", {
           "class": ['v-date-picker-controls']
         }, [vue.createVNode(VBtn, {
@@ -25402,78 +25602,6 @@
     }
   });
 
-  // Types
-
-  const makeVConfirmEditProps = propsFactory({
-    modelValue: null,
-    color: String,
-    cancelText: {
-      type: String,
-      default: '$vuetify.confirmEdit.cancel'
-    },
-    okText: {
-      type: String,
-      default: '$vuetify.confirmEdit.ok'
-    }
-  }, 'VConfirmEdit');
-  const VConfirmEdit = genericComponent()({
-    name: 'VConfirmEdit',
-    props: makeVConfirmEditProps(),
-    emits: {
-      cancel: () => true,
-      save: value => true,
-      'update:modelValue': value => true
-    },
-    setup(props, _ref) {
-      let {
-        emit,
-        slots
-      } = _ref;
-      const model = useProxiedModel(props, 'modelValue');
-      const internalModel = vue.ref();
-      vue.watchEffect(() => {
-        internalModel.value = structuredClone(vue.toRaw(model.value));
-      });
-      const {
-        t
-      } = useLocale();
-      const isPristine = vue.computed(() => {
-        return deepEqual(model.value, internalModel.value);
-      });
-      function save() {
-        model.value = internalModel.value;
-        emit('save', internalModel.value);
-      }
-      function cancel() {
-        internalModel.value = structuredClone(vue.toRaw(model.value));
-        emit('cancel');
-      }
-      let actionsUsed = false;
-      useRender(() => {
-        const actions = vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, {
-          "disabled": isPristine.value,
-          "variant": "text",
-          "color": props.color,
-          "onClick": cancel,
-          "text": t(props.cancelText)
-        }, null), vue.createVNode(VBtn, {
-          "disabled": isPristine.value,
-          "variant": "text",
-          "color": props.color,
-          "onClick": save,
-          "text": t(props.okText)
-        }, null)]);
-        return vue.createVNode(vue.Fragment, null, [slots.default?.({
-          model: internalModel,
-          get actions() {
-            actionsUsed = true;
-            return actions;
-          }
-        }), !actionsUsed && actions]);
-      });
-    }
-  });
-
   const makeVCalendarIntervalEventProps = propsFactory({
     allDay: Boolean,
     interval: Object,
@@ -25945,45 +26073,248 @@
     }
   });
 
-  const makeVFabProps = propsFactory({
-    app: Boolean,
-    appear: Boolean,
-    extended: Boolean,
-    location: {
+  // Types
+
+  const makeVConfirmEditProps = propsFactory({
+    modelValue: null,
+    color: String,
+    cancelText: {
       type: String,
-      default: 'bottom end'
-    },
-    offset: Boolean,
-    modelValue: {
-      type: Boolean,
-      default: true
+      default: '$vuetify.confirmEdit.cancel'
     },
-    ...omit(makeVBtnProps({
-      active: true
-    }), ['location']),
-    ...makeLayoutItemProps(),
-    ...makeTransitionProps({
-      transition: 'fab-transition'
-    })
-  }, 'VFab');
-  const VFab = genericComponent()({
-    name: 'VFab',
-    props: makeVFabProps(),
+    okText: {
+      type: String,
+      default: '$vuetify.confirmEdit.ok'
+    }
+  }, 'VConfirmEdit');
+  const VConfirmEdit = genericComponent()({
+    name: 'VConfirmEdit',
+    props: makeVConfirmEditProps(),
     emits: {
+      cancel: () => true,
+      save: value => true,
       'update:modelValue': value => true
     },
     setup(props, _ref) {
       let {
+        emit,
         slots
       } = _ref;
       const model = useProxiedModel(props, 'modelValue');
-      const height = vue.shallowRef(56);
-      const layoutItemStyles = vue.ref();
+      const internalModel = vue.ref();
+      vue.watchEffect(() => {
+        internalModel.value = structuredClone(vue.toRaw(model.value));
+      });
       const {
-        resizeRef
-      } = useResizeObserver(entries => {
-        if (!entries.length) return;
-        height.value = entries[0].target.clientHeight;
+        t
+      } = useLocale();
+      const isPristine = vue.computed(() => {
+        return deepEqual(model.value, internalModel.value);
+      });
+      function save() {
+        model.value = internalModel.value;
+        emit('save', internalModel.value);
+      }
+      function cancel() {
+        internalModel.value = structuredClone(vue.toRaw(model.value));
+        emit('cancel');
+      }
+      let actionsUsed = false;
+      useRender(() => {
+        const actions = vue.createVNode(vue.Fragment, null, [vue.createVNode(VBtn, {
+          "disabled": isPristine.value,
+          "variant": "text",
+          "color": props.color,
+          "onClick": cancel,
+          "text": t(props.cancelText)
+        }, null), vue.createVNode(VBtn, {
+          "disabled": isPristine.value,
+          "variant": "text",
+          "color": props.color,
+          "onClick": save,
+          "text": t(props.okText)
+        }, null)]);
+        return vue.createVNode(vue.Fragment, null, [slots.default?.({
+          model: internalModel,
+          get actions() {
+            actionsUsed = true;
+            return actions;
+          }
+        }), !actionsUsed && actions]);
+      });
+    }
+  });
+
+  // Types
+
+  // Types
+
+  const makeVEmptyStateProps = propsFactory({
+    actionText: String,
+    bgColor: String,
+    color: String,
+    icon: IconValue,
+    image: String,
+    justify: {
+      type: String,
+      default: 'center'
+    },
+    headline: String,
+    title: String,
+    text: String,
+    textWidth: {
+      type: [Number, String],
+      default: 500
+    },
+    href: String,
+    to: String,
+    ...makeComponentProps(),
+    ...makeDimensionProps(),
+    ...makeSizeProps({
+      size: undefined
+    }),
+    ...makeThemeProps()
+  }, 'VEmptyState');
+  const VEmptyState = genericComponent()({
+    name: 'VEmptyState',
+    props: makeVEmptyStateProps(),
+    emits: {
+      'click:action': e => true
+    },
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const {
+        themeClasses
+      } = provideTheme(props);
+      const {
+        backgroundColorClasses,
+        backgroundColorStyles
+      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+      const {
+        dimensionStyles
+      } = useDimension(props);
+      function onClickAction(e) {
+        emit('click:action', e);
+      }
+      useRender(() => {
+        const hasActions = !!(slots.actions || props.actionText);
+        const hasHeadline = !!(slots.headline || props.headline);
+        const hasTitle = !!(slots.title || props.title);
+        const hasText = !!(slots.text || props.text);
+        const hasMedia = !!(slots.media || props.image || props.icon);
+        const size = props.size || (props.image ? 200 : 96);
+        return vue.createVNode("div", {
+          "class": ['v-empty-state', {
+            [`v-empty-state--${props.justify}`]: true
+          }, themeClasses.value, backgroundColorClasses.value, props.class],
+          "style": [backgroundColorStyles.value, dimensionStyles.value, props.style]
+        }, [hasMedia && vue.createVNode("div", {
+          "key": "media",
+          "class": "v-empty-state__media"
+        }, [!slots.media ? vue.createVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
+          "key": "image",
+          "src": props.image,
+          "height": size
+        }, null) : props.icon ? vue.createVNode(VIcon, {
+          "key": "icon",
+          "size": size,
+          "icon": props.icon
+        }, null) : undefined]) : vue.createVNode(VDefaultsProvider, {
+          "key": "media-defaults",
+          "defaults": {
+            VImg: {
+              src: props.image,
+              height: size
+            },
+            VIcon: {
+              size,
+              icon: props.icon
+            }
+          }
+        }, {
+          default: () => [slots.media()]
+        })]), hasHeadline && vue.createVNode("div", {
+          "key": "headline",
+          "class": "v-empty-state__headline"
+        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createVNode("div", {
+          "key": "title",
+          "class": "v-empty-state__title"
+        }, [slots.title?.() ?? props.title]), hasText && vue.createVNode("div", {
+          "key": "text",
+          "class": "v-empty-state__text",
+          "style": {
+            maxWidth: convertToUnit(props.textWidth)
+          }
+        }, [slots.text?.() ?? props.text]), slots.default && vue.createVNode("div", {
+          "key": "content",
+          "class": "v-empty-state__content"
+        }, [slots.default()]), hasActions && vue.createVNode("div", {
+          "key": "actions",
+          "class": "v-empty-state__actions"
+        }, [vue.createVNode(VDefaultsProvider, {
+          "defaults": {
+            VBtn: {
+              class: 'v-empty-state__action-btn',
+              color: props.color,
+              text: props.actionText
+            }
+          }
+        }, {
+          default: () => [slots.actions?.({
+            props: {
+              onClick: onClickAction
+            }
+          }) ?? vue.createVNode(VBtn, {
+            "onClick": onClickAction
+          }, null)]
+        })])]);
+      });
+      return {};
+    }
+  });
+
+  const makeVFabProps = propsFactory({
+    app: Boolean,
+    appear: Boolean,
+    extended: Boolean,
+    location: {
+      type: String,
+      default: 'bottom end'
+    },
+    offset: Boolean,
+    modelValue: {
+      type: Boolean,
+      default: true
+    },
+    ...omit(makeVBtnProps({
+      active: true
+    }), ['location']),
+    ...makeLayoutItemProps(),
+    ...makeTransitionProps({
+      transition: 'fab-transition'
+    })
+  }, 'VFab');
+  const VFab = genericComponent()({
+    name: 'VFab',
+    props: makeVFabProps(),
+    emits: {
+      'update:modelValue': value => true
+    },
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const model = useProxiedModel(props, 'modelValue');
+      const height = vue.shallowRef(56);
+      const layoutItemStyles = vue.ref();
+      const {
+        resizeRef
+      } = useResizeObserver(entries => {
+        if (!entries.length) return;
+        height.value = entries[0].target.clientHeight;
       });
       const hasPosition = vue.computed(() => props.app || props.absolute);
       const position = vue.computed(() => {
@@ -26540,132 +26871,358 @@
 
   // Types
 
+  const makeVTreeviewGroupProps = propsFactory({
+    ...omit(makeVListGroupProps({
+      collapseIcon: '$treeviewCollapse',
+      expandIcon: '$treeviewExpand'
+    }), ['subgroup'])
+  }, 'VTreeviewGroup');
+  const VTreeviewGroup = genericComponent()({
+    name: 'VTreeviewGroup',
+    props: makeVTreeviewGroupProps(),
+    setup(props, _ref) {
+      let {
+        slots
+      } = _ref;
+      const vListGroupRef = vue.ref();
+      const toggleIcon = vue.computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon);
+      const activatorDefaults = vue.computed(() => ({
+        VTreeviewItem: {
+          prependIcon: undefined,
+          appendIcon: undefined,
+          active: vListGroupRef.value?.isOpen,
+          toggleIcon: toggleIcon.value
+        }
+      }));
+      useRender(() => {
+        const listGroupProps = VListGroup.filterProps(props);
+        return vue.createVNode(VListGroup, vue.mergeProps(listGroupProps, {
+          "ref": vListGroupRef,
+          "class": ['v-treeview-group', props.class],
+          "subgroup": true
+        }), {
+          ...slots,
+          activator: slots.activator ? slotProps => vue.createVNode(vue.Fragment, null, [vue.createVNode(VDefaultsProvider, {
+            "defaults": activatorDefaults.value
+          }, {
+            default: () => [slots.activator?.(slotProps)]
+          })]) : undefined
+        });
+      });
+      return {};
+    }
+  });
+
   // Types
 
-  const makeVEmptyStateProps = propsFactory({
-    actionText: String,
-    bgColor: String,
-    color: String,
-    icon: IconValue,
-    image: String,
-    justify: {
+  const VTreeviewSymbol = Symbol.for('vuetify:v-treeview');
+
+  const makeVTreeviewItemProps = propsFactory({
+    loading: Boolean,
+    toggleIcon: IconValue,
+    ...makeVListItemProps({
+      slim: true
+    })
+  }, 'VTreeviewItem');
+  const VTreeviewItem = genericComponent()({
+    name: 'VTreeviewItem',
+    props: makeVTreeviewItemProps(),
+    setup(props, _ref) {
+      let {
+        attrs,
+        slots,
+        emit
+      } = _ref;
+      const link = useLink(props, attrs);
+      const id = vue.computed(() => props.value === undefined ? link.href.value : props.value);
+      const vListItemRef = vue.ref();
+      const isClickable = vue.computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list));
+      function onClick(e) {
+        if (!vListItemRef.value?.isGroupActivator || !isClickable.value) return;
+        props.value != null && vListItemRef.value?.select(!vListItemRef.value?.isSelected, e);
+      }
+      function onKeyDown(e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick(e);
+        }
+      }
+      const visibleIds = vue.inject(VTreeviewSymbol, {
+        visibleIds: vue.ref()
+      }).visibleIds;
+      useRender(() => {
+        const listItemProps = VListItem.filterProps(props);
+        const hasPrepend = slots.prepend || props.toggleIcon;
+        return vue.createVNode(VListItem, vue.mergeProps({
+          "ref": vListItemRef
+        }, listItemProps, {
+          "class": ['v-treeview-item', {
+            'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
+          }, props.class],
+          "onClick": onClick,
+          "onKeydown": isClickable.value && onKeyDown
+        }), {
+          ...slots,
+          prepend: hasPrepend ? slotProps => {
+            return vue.createVNode(vue.Fragment, null, [props.toggleIcon && vue.createVNode(VListItemAction, {
+              "start": false
+            }, {
+              default: () => [vue.createVNode(VBtn, {
+                "density": "compact",
+                "icon": props.toggleIcon,
+                "loading": props.loading,
+                "variant": "text"
+              }, {
+                loader() {
+                  return vue.createVNode(VProgressCircular, {
+                    "indeterminate": "disable-shrink",
+                    "size": "20",
+                    "width": "2"
+                  }, null);
+                }
+              })]
+            }), slots.prepend?.(slotProps)]);
+          } : undefined
+        });
+      });
+      return {};
+    }
+  });
+
+  // Types
+
+  const makeVTreeviewChildrenProps = propsFactory({
+    loadChildren: Function,
+    loadingIcon: {
       type: String,
-      default: 'center'
+      default: '$loading'
     },
-    headline: String,
-    title: String,
-    text: String,
-    textWidth: {
-      type: [Number, String],
-      default: 500
-    },
-    href: String,
-    to: String,
-    ...makeComponentProps(),
-    ...makeDimensionProps(),
-    ...makeSizeProps({
-      size: undefined
+    items: Array,
+    selectable: Boolean
+  }, 'VTreeviewChildren');
+  const VTreeviewChildren = genericComponent()({
+    name: 'VTreeviewChildren',
+    props: makeVTreeviewChildrenProps(),
+    setup(props, _ref) {
+      let {
+        emit,
+        slots
+      } = _ref;
+      const isLoading = vue.shallowRef(false);
+      const hasLoaded = vue.shallowRef(false);
+      function checkChildren(item) {
+        return new Promise(resolve => {
+          if (!props.items?.length || !props.loadChildren || hasLoaded.value) return resolve();
+          isLoading.value = true;
+          props.loadChildren(item).then(resolve);
+        }).then(() => {
+          hasLoaded.value = true;
+        }).finally(() => {
+          isLoading.value = false;
+        });
+      }
+      function onClick(e, item) {
+        e.stopPropagation();
+        checkChildren(item);
+      }
+      return () => slots.default?.() ?? props.items?.map(_ref2 => {
+        let {
+          children,
+          props: itemProps,
+          raw: item
+        } = _ref2;
+        const slotsWithItem = {
+          prepend: slots.prepend ? slotProps => slots.prepend?.({
+            ...slotProps,
+            item
+          }) : props.selectable ? _ref3 => {
+            let {
+              isSelected,
+              isIndeterminate
+            } = _ref3;
+            return vue.createVNode(VCheckboxBtn, {
+              "key": item.value,
+              "tabindex": "-1",
+              "modelValue": isSelected,
+              "loading": isLoading.value,
+              "indeterminate": isIndeterminate,
+              "onClick": e => onClick(e, item)
+            }, null);
+          } : undefined,
+          append: slots.append ? slotProps => slots.append?.({
+            ...slotProps,
+            item
+          }) : undefined,
+          title: slots.title ? slotProps => slots.title?.({
+            ...slotProps,
+            item
+          }) : undefined
+        };
+        const treeviewGroupProps = VTreeviewGroup.filterProps(itemProps);
+        const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+        return children ? vue.createVNode(VTreeviewGroup, vue.mergeProps({
+          "value": itemProps?.value
+        }, treeviewGroupProps), {
+          activator: _ref4 => {
+            let {
+              props: activatorProps
+            } = _ref4;
+            return vue.createVNode(VTreeviewItem, vue.mergeProps(itemProps, activatorProps, {
+              "loading": isLoading.value,
+              "onClick": e => onClick(e, item)
+            }), slotsWithItem);
+          },
+          default: () => vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
+            "items": children
+          }), slots)
+        }) : slots.item?.({
+          props: itemProps
+        }) ?? vue.createVNode(VTreeviewItem, itemProps, slotsWithItem);
+      });
+    }
+  });
+
+  function flatten(items) {
+    let flat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    for (const item of items) {
+      flat.push(item);
+      if (item.children) flatten(item.children, flat);
+    }
+    return flat;
+  }
+  const makeVTreeviewProps = propsFactory({
+    openAll: Boolean,
+    search: String,
+    ...makeFilterProps({
+      filterKeys: ['title']
     }),
-    ...makeThemeProps()
-  }, 'VEmptyState');
-  const VEmptyState = genericComponent()({
-    name: 'VEmptyState',
-    props: makeVEmptyStateProps(),
+    ...makeVTreeviewChildrenProps(),
+    ...omit(makeVListProps({
+      collapseIcon: '$treeviewCollapse',
+      expandIcon: '$treeviewExpand',
+      selectStrategy: 'independent',
+      openStrategy: 'multiple',
+      slim: true
+    }), ['nav'])
+  }, 'VTreeview');
+  const VTreeview = genericComponent()({
+    name: 'VTreeview',
+    props: makeVTreeviewProps(),
     emits: {
-      'click:action': e => true
+      'update:opened': val => true,
+      'update:activated': val => true,
+      'update:selected': val => true,
+      'click:open': value => true,
+      'click:select': value => true
     },
     setup(props, _ref) {
       let {
-        emit,
         slots
       } = _ref;
       const {
-        themeClasses
-      } = provideTheme(props);
-      const {
-        backgroundColorClasses,
-        backgroundColorStyles
-      } = useBackgroundColor(vue.toRef(props, 'bgColor'));
+        items
+      } = useListItems(props);
+      const activeColor = vue.toRef(props, 'activeColor');
+      const baseColor = vue.toRef(props, 'baseColor');
+      const color = vue.toRef(props, 'color');
+      const opened = useProxiedModel(props, 'opened');
+      const activated = useProxiedModel(props, 'activated');
+      const selected = useProxiedModel(props, 'selected');
+      const vListRef = vue.ref();
+      const flatItems = vue.computed(() => flatten(items.value));
+      const search = vue.toRef(props, 'search');
       const {
-        dimensionStyles
-      } = useDimension(props);
-      function onClickAction(e) {
-        emit('click:action', e);
+        filteredItems
+      } = useFilter(props, flatItems, search);
+      const visibleIds = vue.computed(() => {
+        if (!search.value) {
+          return null;
+        }
+        return new Set(filteredItems.value.flatMap(item => {
+          return [...getPath(item.props.value), ...getChildren(item.props.value)];
+        }));
+      });
+      function getPath(id) {
+        const path = [];
+        let parent = id;
+        while (parent != null) {
+          path.unshift(parent);
+          parent = vListRef.value?.parents.get(parent);
+        }
+        return path;
       }
-      useRender(() => {
-        const hasActions = !!(slots.actions || props.actionText);
-        const hasHeadline = !!(slots.headline || props.headline);
-        const hasTitle = !!(slots.title || props.title);
-        const hasText = !!(slots.text || props.text);
-        const hasMedia = !!(slots.media || props.image || props.icon);
-        const size = props.size || (props.image ? 200 : 96);
-        return vue.createVNode("div", {
-          "class": ['v-empty-state', {
-            [`v-empty-state--${props.justify}`]: true
-          }, themeClasses.value, backgroundColorClasses.value, props.class],
-          "style": [backgroundColorStyles.value, dimensionStyles.value, props.style]
-        }, [hasMedia && vue.createVNode("div", {
-          "key": "media",
-          "class": "v-empty-state__media"
-        }, [!slots.media ? vue.createVNode(vue.Fragment, null, [props.image ? vue.createVNode(VImg, {
-          "key": "image",
-          "src": props.image,
-          "height": size
-        }, null) : props.icon ? vue.createVNode(VIcon, {
-          "key": "icon",
-          "size": size,
-          "icon": props.icon
-        }, null) : undefined]) : vue.createVNode(VDefaultsProvider, {
-          "key": "media-defaults",
-          "defaults": {
-            VImg: {
-              src: props.image,
-              height: size
-            },
-            VIcon: {
-              size,
-              icon: props.icon
-            }
-          }
-        }, {
-          default: () => [slots.media()]
-        })]), hasHeadline && vue.createVNode("div", {
-          "key": "headline",
-          "class": "v-empty-state__headline"
-        }, [slots.headline?.() ?? props.headline]), hasTitle && vue.createVNode("div", {
-          "key": "title",
-          "class": "v-empty-state__title"
-        }, [slots.title?.() ?? props.title]), hasText && vue.createVNode("div", {
-          "key": "text",
-          "class": "v-empty-state__text",
-          "style": {
-            maxWidth: convertToUnit(props.textWidth)
-          }
-        }, [slots.text?.() ?? props.text]), slots.default && vue.createVNode("div", {
-          "key": "content",
-          "class": "v-empty-state__content"
-        }, [slots.default()]), hasActions && vue.createVNode("div", {
-          "key": "actions",
-          "class": "v-empty-state__actions"
-        }, [vue.createVNode(VDefaultsProvider, {
-          "defaults": {
-            VBtn: {
-              class: 'v-empty-state__action-btn',
-              color: props.color,
-              text: props.actionText
-            }
+      function getChildren(id) {
+        const arr = [];
+        const queue = (vListRef.value?.children.get(id) ?? []).slice();
+        while (queue.length) {
+          const child = queue.shift();
+          if (!child) continue;
+          arr.push(child);
+          queue.push(...(vListRef.value?.children.get(child) ?? []).slice());
+        }
+        return arr;
+      }
+      vue.watch(() => props.openAll, val => {
+        opened.value = val ? openAll(items.value) : [];
+      }, {
+        immediate: true
+      });
+      function openAll(item) {
+        let ids = [];
+        for (const i of item) {
+          if (!i.children) continue;
+          ids.push(i.value);
+          if (i.children) {
+            ids = ids.concat(openAll(i.children));
           }
-        }, {
-          default: () => [slots.actions?.({
-            props: {
-              onClick: onClickAction
-            }
-          }) ?? vue.createVNode(VBtn, {
-            "onClick": onClickAction
-          }, null)]
-        })])]);
+        }
+        return ids;
+      }
+      vue.provide(VTreeviewSymbol, {
+        visibleIds
       });
-      return {};
+      provideDefaults({
+        VTreeviewGroup: {
+          activeColor,
+          baseColor,
+          color,
+          collapseIcon: vue.toRef(props, 'collapseIcon'),
+          expandIcon: vue.toRef(props, 'expandIcon')
+        },
+        VTreeviewItem: {
+          activeClass: vue.toRef(props, 'activeClass'),
+          activeColor,
+          baseColor,
+          color,
+          density: vue.toRef(props, 'density'),
+          disabled: vue.toRef(props, 'disabled'),
+          lines: vue.toRef(props, 'lines'),
+          variant: vue.toRef(props, 'variant')
+        }
+      });
+      useRender(() => {
+        const listProps = VList.filterProps(props);
+        const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+        return vue.createVNode(VList, vue.mergeProps({
+          "ref": vListRef
+        }, listProps, {
+          "class": ['v-treeview', props.class],
+          "style": props.style,
+          "opened": opened.value,
+          "onUpdate:opened": $event => opened.value = $event,
+          "activated": activated.value,
+          "onUpdate:activated": $event => activated.value = $event,
+          "selected": selected.value,
+          "onUpdate:selected": $event => selected.value = $event
+        }), {
+          default: () => [vue.createVNode(VTreeviewChildren, vue.mergeProps(treeviewChildrenProps, {
+            "items": items.value
+          }), slots)]
+        });
+      });
+      return {
+        open
+      };
     }
   });
 
@@ -26837,6 +27394,9 @@
     VToolbarItems: VToolbarItems,
     VToolbarTitle: VToolbarTitle,
     VTooltip: VTooltip,
+    VTreeview: VTreeview,
+    VTreeviewGroup: VTreeviewGroup,
+    VTreeviewItem: VTreeviewItem,
     VValidation: VValidation,
     VVirtualScroll: VVirtualScroll,
     VWindow: VWindow,
@@ -27063,7 +27623,7 @@
       goTo
     };
   }
-  const version$1 = "3.5.8";
+  const version$1 = "3.5.9";
   createVuetify$1.version = version$1;
 
   // Vue's inject() can only be used in setup
@@ -27077,7 +27637,7 @@
 
   /* eslint-disable local-rules/sort-imports */
 
-  const version = "3.5.8";
+  const version = "3.5.9";
 
   /* eslint-disable local-rules/sort-imports */