VListGroup.mjs 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
  2. // Components
  3. import { VExpandTransition } from "../transitions/index.mjs";
  4. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
  5. import { useList } from "./list.mjs";
  6. import { makeComponentProps } from "../../composables/component.mjs";
  7. import { IconValue } from "../../composables/icons.mjs";
  8. import { useNestedGroupActivator, useNestedItem } from "../../composables/nested/nested.mjs";
  9. import { useSsrBoot } from "../../composables/ssrBoot.mjs";
  10. import { makeTagProps } from "../../composables/tag.mjs";
  11. import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  12. import { computed, toRef } from 'vue';
  13. import { defineComponent, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  14. const VListGroupActivator = defineComponent({
  15. name: 'VListGroupActivator',
  16. setup(_, _ref) {
  17. let {
  18. slots
  19. } = _ref;
  20. useNestedGroupActivator();
  21. return () => slots.default?.();
  22. }
  23. });
  24. export const makeVListGroupProps = propsFactory({
  25. /* @deprecated */
  26. activeColor: String,
  27. baseColor: String,
  28. color: String,
  29. collapseIcon: {
  30. type: IconValue,
  31. default: '$collapse'
  32. },
  33. expandIcon: {
  34. type: IconValue,
  35. default: '$expand'
  36. },
  37. prependIcon: IconValue,
  38. appendIcon: IconValue,
  39. fluid: Boolean,
  40. subgroup: Boolean,
  41. title: String,
  42. value: null,
  43. ...makeComponentProps(),
  44. ...makeTagProps()
  45. }, 'VListGroup');
  46. export const VListGroup = genericComponent()({
  47. name: 'VListGroup',
  48. props: makeVListGroupProps(),
  49. setup(props, _ref2) {
  50. let {
  51. slots
  52. } = _ref2;
  53. const {
  54. isOpen,
  55. open,
  56. id: _id
  57. } = useNestedItem(toRef(props, 'value'), true);
  58. const id = computed(() => `v-list-group--id-${String(_id.value)}`);
  59. const list = useList();
  60. const {
  61. isBooted
  62. } = useSsrBoot();
  63. function onClick(e) {
  64. open(!isOpen.value, e);
  65. }
  66. const activatorProps = computed(() => ({
  67. onClick,
  68. class: 'v-list-group__header',
  69. id: id.value
  70. }));
  71. const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
  72. const activatorDefaults = computed(() => ({
  73. VListItem: {
  74. active: isOpen.value,
  75. activeColor: props.activeColor,
  76. baseColor: props.baseColor,
  77. color: props.color,
  78. prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
  79. appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
  80. title: props.title,
  81. value: props.value
  82. }
  83. }));
  84. useRender(() => _createVNode(props.tag, {
  85. "class": ['v-list-group', {
  86. 'v-list-group--prepend': list?.hasPrepend.value,
  87. 'v-list-group--fluid': props.fluid,
  88. 'v-list-group--subgroup': props.subgroup,
  89. 'v-list-group--open': isOpen.value
  90. }, props.class],
  91. "style": props.style
  92. }, {
  93. default: () => [slots.activator && _createVNode(VDefaultsProvider, {
  94. "defaults": activatorDefaults.value
  95. }, {
  96. default: () => [_createVNode(VListGroupActivator, null, {
  97. default: () => [slots.activator({
  98. props: activatorProps.value,
  99. isOpen: isOpen.value
  100. })]
  101. })]
  102. }), _createVNode(MaybeTransition, {
  103. "transition": {
  104. component: VExpandTransition
  105. },
  106. "disabled": !isBooted.value
  107. }, {
  108. default: () => [_withDirectives(_createVNode("div", {
  109. "class": "v-list-group__items",
  110. "role": "group",
  111. "aria-labelledby": id.value
  112. }, [slots.default?.()]), [[_vShow, isOpen.value]])]
  113. })]
  114. }));
  115. return {};
  116. }
  117. });
  118. //# sourceMappingURL=VListGroup.mjs.map