vuetify 3.5.8 → 3.5.9

package/dist/vuetify-labs.esm.js

@@ -1,5 +1,5 @@
 /*!
-* Vuetify v3.5.8
+* Vuetify v3.5.9
 * Forged by John Leider
 * Released under the MIT License.
 */
@@ -4372,6 +4372,8 @@ const aliases = {
   plus: 'mdi-plus',
   minus: 'mdi-minus',
   calendar: 'mdi-calendar',
+  treeviewCollapse: 'mdi-menu-down',
+  treeviewExpand: 'mdi-menu-right',
   eyeDropper: 'mdi-eyedropper'
 };
 const mdi = {
@@ -7758,6 +7760,126 @@ function useList() {
   return inject$1(ListKey, null);
 }
 
+/* eslint-disable sonarjs/no-identical-functions */
+// Utilities
+const independentActiveStrategy = mandatory => {
+  const strategy = {
+    activate: _ref => {
+      let {
+        id,
+        value,
+        activated
+      } = _ref;
+      id = 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 = 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 = 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 = 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 {
@@ -7842,7 +7964,8 @@ const independentSelectStrategy = mandatory => {
       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;
       }
@@ -7984,7 +8107,8 @@ const classicSelectStrategy = mandatory => {
       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;
       }
@@ -8028,16 +8152,24 @@ const emptyNested = {
     children: ref(new Map()),
     open: () => null,
     openOnSelect: () => null,
+    activate: () => null,
     select: () => null,
+    activatable: ref(false),
+    selectable: ref(false),
     opened: ref(new Set()),
+    activated: ref(new Set()),
     selected: ref(new Map()),
     selectedValues: 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');
@@ -8046,6 +8178,20 @@ const useNested = props => {
   const children = ref(new Map());
   const parents = ref(new Map());
   const opened = useProxiedModel(props, 'opened', props.opened, v => new Set(v), v => [...v.values()]);
+  const activeStrategy = 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 = computed(() => {
     if (typeof props.selectStrategy === 'object') return props.selectStrategy;
     switch (props.selectStrategy) {
@@ -8074,6 +8220,7 @@ const useNested = props => {
         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));
   onBeforeUnmount(() => {
     isUnmounted = true;
@@ -8092,6 +8239,9 @@ const useNested = props => {
     id: shallowRef(),
     root: {
       opened,
+      activatable: toRef(props, 'activatable'),
+      selectable: toRef(props, 'selectable'),
+      activated,
       selected,
       selectedValues: computed(() => {
         const arr = [];
@@ -8165,6 +8315,26 @@ const useNested = props => {
         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
     }
@@ -8183,6 +8353,8 @@ const useNestedItem = (id, isGroup) => {
     openOnSelect: (open, e) => parent.root.openOnSelect(computedId.value, open, e),
     isOpen: computed(() => parent.root.opened.value.has(computedId.value)),
     parent: computed(() => parent.root.parents.value.get(computedId.value)),
+    activate: (activated, e) => parent.root.activate(computedId.value, activated, e),
+    isActivated: computed(() => parent.root.activated.value.has(toRaw(computedId.value))),
     select: (selected, e) => 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'),
@@ -8305,7 +8477,9 @@ const VListGroup = genericComponent()({
         }, [slots.default?.()]), [[vShow, isOpen.value]])]
       })]
     }));
-    return {};
+    return {
+      isOpen
+    };
   }
 });
 
@@ -8378,6 +8552,8 @@ const VListItem = genericComponent()({
     const link = useLink(props, attrs);
     const id = computed(() => props.value === undefined ? link.href.value : props.value);
     const {
+      activate,
+      isActivated,
       select,
       isSelected,
       isIndeterminate,
@@ -8387,9 +8563,9 @@ const VListItem = genericComponent()({
       openOnSelect
     } = useNestedItem(id, false);
     const list = useList();
-    const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || isSelected.value));
+    const isActive = computed(() => props.active !== false && (props.active || link.isActive?.value || (root.activatable.value ? isActivated.value : isSelected.value)));
     const isLink = computed(() => props.link !== false && link.isLink.value);
-    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!list));
+    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || !!list && (root.selectable.value || root.activatable.value || props.value != null)));
     const roundedProps = computed(() => props.rounded || props.nav);
     const color = computed(() => props.color ?? props.activeColor);
     const variantProps = computed(() => ({
@@ -8440,7 +8616,13 @@ const VListItem = genericComponent()({
       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 === ' ') {
@@ -8556,7 +8738,12 @@ const VListItem = genericComponent()({
         }, null)])]
       }), [[resolveDirective("ripple"), isClickable.value && props.ripple]]);
     });
-    return {};
+    return {
+      isGroupActivator,
+      isSelected,
+      list,
+      select
+    };
   }
 });
 
@@ -8898,8 +9085,10 @@ const VList = genericComponent()({
   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) {
@@ -8932,7 +9121,9 @@ const VList = genericComponent()({
       roundedClasses
     } = useRounded(props);
     const {
+      children,
       open,
+      parents,
       select
     } = useNested(props);
     const lineClasses = computed(() => props.lines ? `v-list--${props.lines}-line` : undefined);
@@ -9022,7 +9213,9 @@ const VList = genericComponent()({
     return {
       open,
       select,
-      focus
+      focus,
+      children,
+      parents
     };
   }
 });
@@ -11902,9 +12095,11 @@ const VSelect = genericComponent()({
         });
       }
     });
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return;
-      menu.value = true;
+    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);
@@ -12464,9 +12659,11 @@ const VAutocomplete = genericComponent()({
         });
       }
     });
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return;
-      menu.value = true;
+    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']);
@@ -16269,9 +16466,11 @@ const VCombobox = genericComponent()({
         });
       }
     });
-    watch(() => props.items, val => {
-      if (!isFocused.value || !val.length || menu.value) return;
-      menu.value = true;
+    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']);
@@ -20292,6 +20491,7 @@ const VDatePickerControls = genericComponent()({
       emit('click:month');
     }
     useRender(() => {
+      // TODO: add slot support and scope defaults
       return createVNode("div", {
         "class": ['v-date-picker-controls']
       }, [createVNode(VBtn, {
@@ -25398,78 +25598,6 @@ const VValidation = genericComponent()({
   }
 });
 
-// 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 = ref();
-    watchEffect(() => {
-      internalModel.value = structuredClone(toRaw(model.value));
-    });
-    const {
-      t
-    } = useLocale();
-    const isPristine = computed(() => {
-      return deepEqual(model.value, internalModel.value);
-    });
-    function save() {
-      model.value = internalModel.value;
-      emit('save', internalModel.value);
-    }
-    function cancel() {
-      internalModel.value = structuredClone(toRaw(model.value));
-      emit('cancel');
-    }
-    let actionsUsed = false;
-    useRender(() => {
-      const actions = createVNode(Fragment, null, [createVNode(VBtn, {
-        "disabled": isPristine.value,
-        "variant": "text",
-        "color": props.color,
-        "onClick": cancel,
-        "text": t(props.cancelText)
-      }, null), createVNode(VBtn, {
-        "disabled": isPristine.value,
-        "variant": "text",
-        "color": props.color,
-        "onClick": save,
-        "text": t(props.okText)
-      }, null)]);
-      return createVNode(Fragment, null, [slots.default?.({
-        model: internalModel,
-        get actions() {
-          actionsUsed = true;
-          return actions;
-        }
-      }), !actionsUsed && actions]);
-    });
-  }
-});
-
 const makeVCalendarIntervalEventProps = propsFactory({
   allDay: Boolean,
   interval: Object,
@@ -25941,45 +26069,248 @@ const VCalendar = genericComponent()({
   }
 });
 
-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 = shallowRef(56);
-    const layoutItemStyles = ref();
+    const internalModel = ref();
+    watchEffect(() => {
+      internalModel.value = structuredClone(toRaw(model.value));
+    });
     const {
-      resizeRef
-    } = useResizeObserver(entries => {
-      if (!entries.length) return;
-      height.value = entries[0].target.clientHeight;
+      t
+    } = useLocale();
+    const isPristine = computed(() => {
+      return deepEqual(model.value, internalModel.value);
+    });
+    function save() {
+      model.value = internalModel.value;
+      emit('save', internalModel.value);
+    }
+    function cancel() {
+      internalModel.value = structuredClone(toRaw(model.value));
+      emit('cancel');
+    }
+    let actionsUsed = false;
+    useRender(() => {
+      const actions = createVNode(Fragment, null, [createVNode(VBtn, {
+        "disabled": isPristine.value,
+        "variant": "text",
+        "color": props.color,
+        "onClick": cancel,
+        "text": t(props.cancelText)
+      }, null), createVNode(VBtn, {
+        "disabled": isPristine.value,
+        "variant": "text",
+        "color": props.color,
+        "onClick": save,
+        "text": t(props.okText)
+      }, null)]);
+      return createVNode(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(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 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 && createVNode("div", {
+        "key": "media",
+        "class": "v-empty-state__media"
+      }, [!slots.media ? createVNode(Fragment, null, [props.image ? createVNode(VImg, {
+        "key": "image",
+        "src": props.image,
+        "height": size
+      }, null) : props.icon ? createVNode(VIcon, {
+        "key": "icon",
+        "size": size,
+        "icon": props.icon
+      }, null) : undefined]) : createVNode(VDefaultsProvider, {
+        "key": "media-defaults",
+        "defaults": {
+          VImg: {
+            src: props.image,
+            height: size
+          },
+          VIcon: {
+            size,
+            icon: props.icon
+          }
+        }
+      }, {
+        default: () => [slots.media()]
+      })]), hasHeadline && createVNode("div", {
+        "key": "headline",
+        "class": "v-empty-state__headline"
+      }, [slots.headline?.() ?? props.headline]), hasTitle && createVNode("div", {
+        "key": "title",
+        "class": "v-empty-state__title"
+      }, [slots.title?.() ?? props.title]), hasText && createVNode("div", {
+        "key": "text",
+        "class": "v-empty-state__text",
+        "style": {
+          maxWidth: convertToUnit(props.textWidth)
+        }
+      }, [slots.text?.() ?? props.text]), slots.default && createVNode("div", {
+        "key": "content",
+        "class": "v-empty-state__content"
+      }, [slots.default()]), hasActions && createVNode("div", {
+        "key": "actions",
+        "class": "v-empty-state__actions"
+      }, [createVNode(VDefaultsProvider, {
+        "defaults": {
+          VBtn: {
+            class: 'v-empty-state__action-btn',
+            color: props.color,
+            text: props.actionText
+          }
+        }
+      }, {
+        default: () => [slots.actions?.({
+          props: {
+            onClick: onClickAction
+          }
+        }) ?? 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 = shallowRef(56);
+    const layoutItemStyles = ref();
+    const {
+      resizeRef
+    } = useResizeObserver(entries => {
+      if (!entries.length) return;
+      height.value = entries[0].target.clientHeight;
     });
     const hasPosition = computed(() => props.app || props.absolute);
     const position = computed(() => {
@@ -26536,132 +26867,358 @@ const VSpeedDial = genericComponent()({
 
 // 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 = ref();
+    const toggleIcon = computed(() => vListGroupRef.value?.isOpen ? props.collapseIcon : props.expandIcon);
+    const activatorDefaults = computed(() => ({
+      VTreeviewItem: {
+        prependIcon: undefined,
+        appendIcon: undefined,
+        active: vListGroupRef.value?.isOpen,
+        toggleIcon: toggleIcon.value
+      }
+    }));
+    useRender(() => {
+      const listGroupProps = VListGroup.filterProps(props);
+      return createVNode(VListGroup, mergeProps(listGroupProps, {
+        "ref": vListGroupRef,
+        "class": ['v-treeview-group', props.class],
+        "subgroup": true
+      }), {
+        ...slots,
+        activator: slots.activator ? slotProps => createVNode(Fragment, null, [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 = computed(() => props.value === undefined ? link.href.value : props.value);
+    const vListItemRef = ref();
+    const isClickable = 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 = inject$1(VTreeviewSymbol, {
+      visibleIds: ref()
+    }).visibleIds;
+    useRender(() => {
+      const listItemProps = VListItem.filterProps(props);
+      const hasPrepend = slots.prepend || props.toggleIcon;
+      return createVNode(VListItem, 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 createVNode(Fragment, null, [props.toggleIcon && createVNode(VListItemAction, {
+            "start": false
+          }, {
+            default: () => [createVNode(VBtn, {
+              "density": "compact",
+              "icon": props.toggleIcon,
+              "loading": props.loading,
+              "variant": "text"
+            }, {
+              loader() {
+                return 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 = shallowRef(false);
+    const hasLoaded = 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 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 ? createVNode(VTreeviewGroup, mergeProps({
+        "value": itemProps?.value
+      }, treeviewGroupProps), {
+        activator: _ref4 => {
+          let {
+            props: activatorProps
+          } = _ref4;
+          return createVNode(VTreeviewItem, mergeProps(itemProps, activatorProps, {
+            "loading": isLoading.value,
+            "onClick": e => onClick(e, item)
+          }), slotsWithItem);
+        },
+        default: () => createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
+          "items": children
+        }), slots)
+      }) : slots.item?.({
+        props: itemProps
+      }) ?? 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(toRef(props, 'bgColor'));
+      items
+    } = useListItems(props);
+    const activeColor = toRef(props, 'activeColor');
+    const baseColor = toRef(props, 'baseColor');
+    const color = toRef(props, 'color');
+    const opened = useProxiedModel(props, 'opened');
+    const activated = useProxiedModel(props, 'activated');
+    const selected = useProxiedModel(props, 'selected');
+    const vListRef = ref();
+    const flatItems = computed(() => flatten(items.value));
+    const search = toRef(props, 'search');
     const {
-      dimensionStyles
-    } = useDimension(props);
-    function onClickAction(e) {
-      emit('click:action', e);
+      filteredItems
+    } = useFilter(props, flatItems, search);
+    const visibleIds = 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 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 && createVNode("div", {
-        "key": "media",
-        "class": "v-empty-state__media"
-      }, [!slots.media ? createVNode(Fragment, null, [props.image ? createVNode(VImg, {
-        "key": "image",
-        "src": props.image,
-        "height": size
-      }, null) : props.icon ? createVNode(VIcon, {
-        "key": "icon",
-        "size": size,
-        "icon": props.icon
-      }, null) : undefined]) : createVNode(VDefaultsProvider, {
-        "key": "media-defaults",
-        "defaults": {
-          VImg: {
-            src: props.image,
-            height: size
-          },
-          VIcon: {
-            size,
-            icon: props.icon
-          }
-        }
-      }, {
-        default: () => [slots.media()]
-      })]), hasHeadline && createVNode("div", {
-        "key": "headline",
-        "class": "v-empty-state__headline"
-      }, [slots.headline?.() ?? props.headline]), hasTitle && createVNode("div", {
-        "key": "title",
-        "class": "v-empty-state__title"
-      }, [slots.title?.() ?? props.title]), hasText && createVNode("div", {
-        "key": "text",
-        "class": "v-empty-state__text",
-        "style": {
-          maxWidth: convertToUnit(props.textWidth)
-        }
-      }, [slots.text?.() ?? props.text]), slots.default && createVNode("div", {
-        "key": "content",
-        "class": "v-empty-state__content"
-      }, [slots.default()]), hasActions && createVNode("div", {
-        "key": "actions",
-        "class": "v-empty-state__actions"
-      }, [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;
+    }
+    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
-          }
-        }) ?? createVNode(VBtn, {
-          "onClick": onClickAction
-        }, null)]
-      })])]);
+      }
+      return ids;
+    }
+    provide(VTreeviewSymbol, {
+      visibleIds
     });
-    return {};
+    provideDefaults({
+      VTreeviewGroup: {
+        activeColor,
+        baseColor,
+        color,
+        collapseIcon: toRef(props, 'collapseIcon'),
+        expandIcon: toRef(props, 'expandIcon')
+      },
+      VTreeviewItem: {
+        activeClass: toRef(props, 'activeClass'),
+        activeColor,
+        baseColor,
+        color,
+        density: toRef(props, 'density'),
+        disabled: toRef(props, 'disabled'),
+        lines: toRef(props, 'lines'),
+        variant: toRef(props, 'variant')
+      }
+    });
+    useRender(() => {
+      const listProps = VList.filterProps(props);
+      const treeviewChildrenProps = VTreeviewChildren.filterProps(props);
+      return createVNode(VList, 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: () => [createVNode(VTreeviewChildren, mergeProps(treeviewChildrenProps, {
+          "items": items.value
+        }), slots)]
+      });
+    });
+    return {
+      open
+    };
   }
 });
 
@@ -26833,6 +27390,9 @@ var components = /*#__PURE__*/Object.freeze({
   VToolbarItems: VToolbarItems,
   VToolbarTitle: VToolbarTitle,
   VTooltip: VTooltip,
+  VTreeview: VTreeview,
+  VTreeviewGroup: VTreeviewGroup,
+  VTreeviewItem: VTreeviewItem,
   VValidation: VValidation,
   VVirtualScroll: VVirtualScroll,
   VWindow: VWindow,
@@ -27059,7 +27619,7 @@ function createVuetify$1() {
     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
@@ -27073,7 +27633,7 @@ function inject(key) {
 
 /* eslint-disable local-rules/sort-imports */
 
-const version = "3.5.8";
+const version = "3.5.9";
 
 /* eslint-disable local-rules/sort-imports */