VExpansionPanelTitle.mjs 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  2. // Components
  3. import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs";
  4. import { VIcon } from "../VIcon/index.mjs"; // Composables
  5. import { useBackgroundColor } from "../../composables/color.mjs";
  6. import { makeComponentProps } from "../../composables/component.mjs";
  7. import { IconValue } from "../../composables/icons.mjs"; // Directives
  8. import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
  9. import { computed, inject } from 'vue';
  10. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  11. export const makeVExpansionPanelTitleProps = propsFactory({
  12. color: String,
  13. expandIcon: {
  14. type: IconValue,
  15. default: '$expand'
  16. },
  17. collapseIcon: {
  18. type: IconValue,
  19. default: '$collapse'
  20. },
  21. hideActions: Boolean,
  22. ripple: {
  23. type: [Boolean, Object],
  24. default: false
  25. },
  26. readonly: Boolean,
  27. ...makeComponentProps()
  28. }, 'VExpansionPanelTitle');
  29. export const VExpansionPanelTitle = genericComponent()({
  30. name: 'VExpansionPanelTitle',
  31. directives: {
  32. Ripple
  33. },
  34. props: makeVExpansionPanelTitleProps(),
  35. setup(props, _ref) {
  36. let {
  37. slots
  38. } = _ref;
  39. const expansionPanel = inject(VExpansionPanelSymbol);
  40. if (!expansionPanel) throw new Error('[Vuetify] v-expansion-panel-title needs to be placed inside v-expansion-panel');
  41. const {
  42. backgroundColorClasses,
  43. backgroundColorStyles
  44. } = useBackgroundColor(props, 'color');
  45. const slotProps = computed(() => ({
  46. collapseIcon: props.collapseIcon,
  47. disabled: expansionPanel.disabled.value,
  48. expanded: expansionPanel.isSelected.value,
  49. expandIcon: props.expandIcon,
  50. readonly: props.readonly
  51. }));
  52. useRender(() => _withDirectives(_createVNode("button", {
  53. "class": ['v-expansion-panel-title', {
  54. 'v-expansion-panel-title--active': expansionPanel.isSelected.value
  55. }, backgroundColorClasses.value, props.class],
  56. "style": [backgroundColorStyles.value, props.style],
  57. "type": "button",
  58. "tabindex": expansionPanel.disabled.value ? -1 : undefined,
  59. "disabled": expansionPanel.disabled.value,
  60. "aria-expanded": expansionPanel.isSelected.value,
  61. "onClick": !props.readonly ? expansionPanel.toggle : undefined
  62. }, [_createVNode("span", {
  63. "class": "v-expansion-panel-title__overlay"
  64. }, null), slots.default?.(slotProps.value), !props.hideActions && _createVNode("span", {
  65. "class": "v-expansion-panel-title__icon"
  66. }, [slots.actions ? slots.actions(slotProps.value) : _createVNode(VIcon, {
  67. "icon": expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon
  68. }, null)])]), [[_resolveDirective("ripple"), props.ripple]]));
  69. return {};
  70. }
  71. });
  72. //# sourceMappingURL=VExpansionPanelTitle.mjs.map