VDatePickerHeader.mjs 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VDatePickerHeader.css";
  4. // Components
  5. import { VBtn } from "../VBtn/index.mjs";
  6. import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
  7. import { useBackgroundColor } from "../../composables/color.mjs";
  8. import { IconValue } from "../../composables/icons.mjs";
  9. import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
  10. import { EventProp, genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  11. export const makeVDatePickerHeaderProps = propsFactory({
  12. appendIcon: IconValue,
  13. color: String,
  14. header: String,
  15. transition: String,
  16. onClick: EventProp()
  17. }, 'VDatePickerHeader');
  18. export const VDatePickerHeader = genericComponent()({
  19. name: 'VDatePickerHeader',
  20. props: makeVDatePickerHeaderProps(),
  21. emits: {
  22. click: () => true,
  23. 'click:append': () => true
  24. },
  25. setup(props, _ref) {
  26. let {
  27. emit,
  28. slots
  29. } = _ref;
  30. const {
  31. backgroundColorClasses,
  32. backgroundColorStyles
  33. } = useBackgroundColor(props, 'color');
  34. function onClick() {
  35. emit('click');
  36. }
  37. function onClickAppend() {
  38. emit('click:append');
  39. }
  40. useRender(() => {
  41. const hasContent = !!(slots.default || props.header);
  42. const hasAppend = !!(slots.append || props.appendIcon);
  43. return _createVNode("div", {
  44. "class": ['v-date-picker-header', {
  45. 'v-date-picker-header--clickable': !!props.onClick
  46. }, backgroundColorClasses.value],
  47. "style": backgroundColorStyles.value,
  48. "onClick": onClick
  49. }, [slots.prepend && _createVNode("div", {
  50. "key": "prepend",
  51. "class": "v-date-picker-header__prepend"
  52. }, [slots.prepend()]), hasContent && _createVNode(MaybeTransition, {
  53. "key": "content",
  54. "name": props.transition
  55. }, {
  56. default: () => [_createVNode("div", {
  57. "key": props.header,
  58. "class": "v-date-picker-header__content"
  59. }, [slots.default?.() ?? props.header])]
  60. }), hasAppend && _createVNode("div", {
  61. "class": "v-date-picker-header__append"
  62. }, [!slots.append ? _createVNode(VBtn, {
  63. "key": "append-btn",
  64. "icon": props.appendIcon,
  65. "variant": "text",
  66. "onClick": onClickAppend
  67. }, null) : _createVNode(VDefaultsProvider, {
  68. "key": "append-defaults",
  69. "disabled": !props.appendIcon,
  70. "defaults": {
  71. VBtn: {
  72. icon: props.appendIcon,
  73. variant: 'text'
  74. }
  75. }
  76. }, {
  77. default: () => [slots.append?.()]
  78. })])]);
  79. });
  80. return {};
  81. }
  82. });
  83. //# sourceMappingURL=VDatePickerHeader.mjs.map