vuetify/lib/labs/VTreeview/VTreeviewItem.mjs

Vue Material Component Framework

import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
// Styles
import "./VTreeviewItem.css";

// Components
import { VBtn } from "../../components/VBtn/index.mjs";
import { VListItemAction } from "../../components/VList/index.mjs";
import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.mjs";
import { VProgressCircular } from "../../components/VProgressCircular/index.mjs"; // Composables
import { IconValue } from "../../composables/icons.mjs";
import { useNestedItem } from "../../composables/nested/nested.mjs";
import { useLink } from "../../composables/router.mjs"; // Utilities
import { computed, inject, ref } from 'vue';
import { EventProp, genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
import { VTreeviewSymbol } from "./shared.mjs";
export const makeVTreeviewItemProps = propsFactory({
  loading: Boolean,
  onToggleExpand: EventProp(),
  toggleIcon: IconValue,
  ...makeVListItemProps({
    slim: true
  })
}, 'VTreeviewItem');
export const VTreeviewItem = genericComponent()({
  name: 'VTreeviewItem',
  props: makeVTreeviewItemProps(),
  setup(props, _ref) {
    let {
      attrs,
      slots,
      emit
    } = _ref;
    const link = useLink(props, attrs);
    const rawId = computed(() => props.value === undefined ? link.href.value : props.value);
    const vListItemRef = ref();
    const {
      activate,
      isActivated,
      isGroupActivator,
      root,
      id
    } = useNestedItem(rawId, false);
    const isActivatableGroupActivator = computed(() => root.activatable.value && isGroupActivator);
    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));
    function activateItem(e) {
      if (!isClickable.value || !isActivatableGroupActivator.value && isGroupActivator) return;
      if (root.activatable.value) {
        if (isActivatableGroupActivator.value) {
          activate(!isActivated.value, e);
        } else {
          vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
        }
      }
    }
    const visibleIds = inject(VTreeviewSymbol, {
      visibleIds: ref()
    }).visibleIds;
    useRender(() => {
      const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
      const hasPrepend = slots.prepend || props.toggleIcon;
      return _createVNode(VListItem, _mergeProps(listItemProps, {
        "active": isActivated.value,
        "class": ['v-treeview-item', {
          'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
          'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(id.value)
        }, props.class],
        "ripple": false,
        "onClick": props.onClick ?? activateItem
      }), {
        ...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",
              "onClick": props.onToggleExpand
            }, {
              loader() {
                return _createVNode(VProgressCircular, {
                  "indeterminate": "disable-shrink",
                  "size": "20",
                  "width": "2"
                }, null);
              }
            })]
          }), slots.prepend?.(slotProps)]);
        } : undefined
      });
    });
    return {};
  }
});
//# sourceMappingURL=VTreeviewItem.mjs.map