vuetify/lib/labs/VTreeview/VTreeviewItem.js

Vue Material Component Framework

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

// Components
import { VBtn } from "../../components/VBtn/index.js";
import { VListItemAction } from "../../components/VList/index.js";
import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.js";
import { VProgressCircular } from "../../components/VProgressCircular/index.js"; // Composables
import { IconValue } from "../../composables/icons.js"; // Utilities
import { computed, inject, ref, toRaw } from 'vue';
import { genericComponent, omit, propsFactory, useRender } from "../../util/index.js"; // Types
import { VTreeviewSymbol } from "./shared.js";
export const makeVTreeviewItemProps = propsFactory({
  loading: Boolean,
  toggleIcon: IconValue,
  ...makeVListItemProps({
    slim: true
  })
}, 'VTreeviewItem');
export const VTreeviewItem = genericComponent()({
  name: 'VTreeviewItem',
  props: makeVTreeviewItemProps(),
  emits: {
    toggleExpand: value => true
  },
  setup(props, _ref) {
    let {
      slots,
      emit
    } = _ref;
    const visibleIds = inject(VTreeviewSymbol, {
      visibleIds: ref()
    }).visibleIds;
    const vListItemRef = ref();
    const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
    const vListItemRefIsClickable = computed(() => vListItemRef.value?.link.isClickable.value || props.value != null && !!vListItemRef.value?.list);
    const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || vListItemRefIsClickable.value || isActivatableGroupActivator.value));
    const isFiltered = computed(() => visibleIds.value && !visibleIds.value.has(toRaw(vListItemRef.value?.id)));
    function activateGroupActivator(e) {
      if (isClickable.value && isActivatableGroupActivator.value) {
        vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
      }
    }
    function onClickAction(e) {
      e.preventDefault();
      emit('toggleExpand', e);
    }
    useRender(() => {
      const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
      const hasPrepend = slots.prepend || props.toggleIcon;
      return _createVNode(VListItem, _mergeProps({
        "ref": vListItemRef
      }, listItemProps, {
        "active": vListItemRef.value?.isActivated,
        "class": ['v-treeview-item', {
          'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
          'v-treeview-item--filtered': isFiltered.value
        }, props.class],
        "ripple": false,
        "onClick": props.onClick ?? activateGroupActivator
      }), {
        ...slots,
        prepend: hasPrepend ? slotProps => {
          return _createVNode(_Fragment, null, [_createVNode(VListItemAction, {
            "start": false
          }, {
            default: () => [props.toggleIcon ? _createVNode(VBtn, {
              "density": "compact",
              "icon": props.toggleIcon,
              "loading": props.loading,
              "variant": "text",
              "onClick": onClickAction
            }, {
              loader() {
                return _createVNode(VProgressCircular, {
                  "indeterminate": "disable-shrink",
                  "size": "20",
                  "width": "2"
                }, null);
              }
            }) : _createVNode("div", {
              "class": "v-treeview-item__level"
            }, null)]
          }), slots.prepend?.(slotProps)]);
        } : undefined
      });
    });
    return {};
  }
});
//# sourceMappingURL=VTreeviewItem.js.map