VTreeviewItem.mjs 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. import { mergeProps as _mergeProps, createVNode as _createVNode, Fragment as _Fragment } from "vue";
  2. // Styles
  3. import "./VTreeviewItem.css";
  4. // Components
  5. import { VBtn } from "../../components/VBtn/index.mjs";
  6. import { VListItemAction } from "../../components/VList/index.mjs";
  7. import { makeVListItemProps, VListItem } from "../../components/VList/VListItem.mjs";
  8. import { VProgressCircular } from "../../components/VProgressCircular/index.mjs"; // Composables
  9. import { IconValue } from "../../composables/icons.mjs";
  10. import { useLink } from "../../composables/router.mjs"; // Utilities
  11. import { computed, inject, ref } from 'vue';
  12. import { EventProp, genericComponent, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
  13. import { VTreeviewSymbol } from "./shared.mjs";
  14. export const makeVTreeviewItemProps = propsFactory({
  15. loading: Boolean,
  16. onToggleExpand: EventProp(),
  17. toggleIcon: IconValue,
  18. ...makeVListItemProps({
  19. slim: true
  20. })
  21. }, 'VTreeviewItem');
  22. export const VTreeviewItem = genericComponent()({
  23. name: 'VTreeviewItem',
  24. props: makeVTreeviewItemProps(),
  25. setup(props, _ref) {
  26. let {
  27. attrs,
  28. slots,
  29. emit
  30. } = _ref;
  31. const link = useLink(props, attrs);
  32. const vListItemRef = ref();
  33. const isActivatableGroupActivator = computed(() => vListItemRef.value?.root.activatable.value && vListItemRef.value?.isGroupActivator);
  34. const isClickable = computed(() => !props.disabled && props.link !== false && (props.link || link.isClickable.value || props.value != null && !!vListItemRef.value?.list || isActivatableGroupActivator.value));
  35. function activateGroupActivator(e) {
  36. if (isClickable.value && isActivatableGroupActivator.value) {
  37. vListItemRef.value?.activate(!vListItemRef.value?.isActivated, e);
  38. }
  39. }
  40. const visibleIds = inject(VTreeviewSymbol, {
  41. visibleIds: ref()
  42. }).visibleIds;
  43. useRender(() => {
  44. const listItemProps = omit(VListItem.filterProps(props), ['onClick']);
  45. const hasPrepend = slots.prepend || props.toggleIcon;
  46. return _createVNode(VListItem, _mergeProps({
  47. "ref": vListItemRef
  48. }, listItemProps, {
  49. "active": vListItemRef.value?.isActivated,
  50. "class": ['v-treeview-item', {
  51. 'v-treeview-item--activatable-group-activator': isActivatableGroupActivator.value,
  52. 'v-treeview-item--filtered': visibleIds.value && !visibleIds.value.has(vListItemRef.value?.id)
  53. }, props.class],
  54. "ripple": false,
  55. "onClick": props.onClick ?? activateGroupActivator
  56. }), {
  57. ...slots,
  58. prepend: hasPrepend ? slotProps => {
  59. return _createVNode(_Fragment, null, [props.toggleIcon && _createVNode(VListItemAction, {
  60. "start": false
  61. }, {
  62. default: () => [_createVNode(VBtn, {
  63. "density": "compact",
  64. "icon": props.toggleIcon,
  65. "loading": props.loading,
  66. "variant": "text",
  67. "onClick": props.onToggleExpand
  68. }, {
  69. loader() {
  70. return _createVNode(VProgressCircular, {
  71. "indeterminate": "disable-shrink",
  72. "size": "20",
  73. "width": "2"
  74. }, null);
  75. }
  76. })]
  77. }), slots.prepend?.(slotProps)]);
  78. } : undefined
  79. });
  80. });
  81. return {};
  82. }
  83. });
  84. //# sourceMappingURL=VTreeviewItem.mjs.map