VExpansionPanel.mjs 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { createVNode as _createVNode } from "vue";
  2. // Components
  3. import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs";
  4. import { VExpansionPanelText } from "./VExpansionPanelText.mjs";
  5. import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from "./VExpansionPanelTitle.mjs"; // Composables
  6. import { useBackgroundColor } from "../../composables/color.mjs";
  7. import { makeComponentProps } from "../../composables/component.mjs";
  8. import { provideDefaults } from "../../composables/defaults.mjs";
  9. import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
  10. import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
  11. import { makeLazyProps } from "../../composables/lazy.mjs";
  12. import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
  13. import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
  14. import { computed, provide, toRef } from 'vue';
  15. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
  16. export const makeVExpansionPanelProps = propsFactory({
  17. title: String,
  18. text: String,
  19. bgColor: String,
  20. ...makeComponentProps(),
  21. ...makeElevationProps(),
  22. ...makeGroupItemProps(),
  23. ...makeLazyProps(),
  24. ...makeRoundedProps(),
  25. ...makeTagProps(),
  26. ...makeVExpansionPanelTitleProps()
  27. }, 'VExpansionPanel');
  28. export const VExpansionPanel = genericComponent()({
  29. name: 'VExpansionPanel',
  30. props: makeVExpansionPanelProps(),
  31. emits: {
  32. 'group:selected': val => true
  33. },
  34. setup(props, _ref) {
  35. let {
  36. slots
  37. } = _ref;
  38. const groupItem = useGroupItem(props, VExpansionPanelSymbol);
  39. const {
  40. backgroundColorClasses,
  41. backgroundColorStyles
  42. } = useBackgroundColor(props, 'bgColor');
  43. const {
  44. elevationClasses
  45. } = useElevation(props);
  46. const {
  47. roundedClasses
  48. } = useRounded(props);
  49. const isDisabled = computed(() => groupItem?.disabled.value || props.disabled);
  50. const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
  51. if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
  52. return arr;
  53. }, []));
  54. const isBeforeSelected = computed(() => {
  55. const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
  56. return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === 1);
  57. });
  58. const isAfterSelected = computed(() => {
  59. const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
  60. return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
  61. });
  62. provide(VExpansionPanelSymbol, groupItem);
  63. provideDefaults({
  64. VExpansionPanelText: {
  65. eager: toRef(props, 'eager')
  66. }
  67. });
  68. useRender(() => {
  69. const hasText = !!(slots.text || props.text);
  70. const hasTitle = !!(slots.title || props.title);
  71. return _createVNode(props.tag, {
  72. "class": ['v-expansion-panel', {
  73. 'v-expansion-panel--active': groupItem.isSelected.value,
  74. 'v-expansion-panel--before-active': isBeforeSelected.value,
  75. 'v-expansion-panel--after-active': isAfterSelected.value,
  76. 'v-expansion-panel--disabled': isDisabled.value
  77. }, roundedClasses.value, backgroundColorClasses.value, props.class],
  78. "style": [backgroundColorStyles.value, props.style]
  79. }, {
  80. default: () => [_createVNode("div", {
  81. "class": ['v-expansion-panel__shadow', ...elevationClasses.value]
  82. }, null), hasTitle && _createVNode(VExpansionPanelTitle, {
  83. "key": "title",
  84. "collapseIcon": props.collapseIcon,
  85. "color": props.color,
  86. "expandIcon": props.expandIcon,
  87. "hideActions": props.hideActions,
  88. "ripple": props.ripple
  89. }, {
  90. default: () => [slots.title ? slots.title() : props.title]
  91. }), hasText && _createVNode(VExpansionPanelText, {
  92. "key": "text"
  93. }, {
  94. default: () => [slots.text ? slots.text() : props.text]
  95. }), slots.default?.()]
  96. });
  97. });
  98. return {};
  99. }
  100. });
  101. //# sourceMappingURL=VExpansionPanel.mjs.map