VDatePickerControls.mjs 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import { createVNode as _createVNode } from "vue";
  2. // Styles
  3. import "./VDatePickerControls.css";
  4. // Components
  5. import { VBtn } from "../VBtn/index.mjs";
  6. import { VSpacer } from "../VGrid/index.mjs"; // Composables
  7. import { IconValue } from "../../composables/icons.mjs"; // Utilities
  8. import { computed } from 'vue';
  9. import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
  10. export const makeVDatePickerControlsProps = propsFactory({
  11. active: {
  12. type: [String, Array],
  13. default: undefined
  14. },
  15. disabled: {
  16. type: [Boolean, String, Array],
  17. default: false
  18. },
  19. nextIcon: {
  20. type: IconValue,
  21. default: '$next'
  22. },
  23. prevIcon: {
  24. type: IconValue,
  25. default: '$prev'
  26. },
  27. modeIcon: {
  28. type: IconValue,
  29. default: '$subgroup'
  30. },
  31. text: String,
  32. viewMode: {
  33. type: String,
  34. default: 'month'
  35. }
  36. }, 'VDatePickerControls');
  37. export const VDatePickerControls = genericComponent()({
  38. name: 'VDatePickerControls',
  39. props: makeVDatePickerControlsProps(),
  40. emits: {
  41. 'click:year': () => true,
  42. 'click:month': () => true,
  43. 'click:prev': () => true,
  44. 'click:next': () => true,
  45. 'click:text': () => true
  46. },
  47. setup(props, _ref) {
  48. let {
  49. emit
  50. } = _ref;
  51. const disableMonth = computed(() => {
  52. return Array.isArray(props.disabled) ? props.disabled.includes('text') : !!props.disabled;
  53. });
  54. const disableYear = computed(() => {
  55. return Array.isArray(props.disabled) ? props.disabled.includes('mode') : !!props.disabled;
  56. });
  57. const disablePrev = computed(() => {
  58. return Array.isArray(props.disabled) ? props.disabled.includes('prev') : !!props.disabled;
  59. });
  60. const disableNext = computed(() => {
  61. return Array.isArray(props.disabled) ? props.disabled.includes('next') : !!props.disabled;
  62. });
  63. function onClickPrev() {
  64. emit('click:prev');
  65. }
  66. function onClickNext() {
  67. emit('click:next');
  68. }
  69. function onClickYear() {
  70. emit('click:year');
  71. }
  72. function onClickMonth() {
  73. emit('click:month');
  74. }
  75. useRender(() => {
  76. // TODO: add slot support and scope defaults
  77. return _createVNode("div", {
  78. "class": ['v-date-picker-controls']
  79. }, [_createVNode(VBtn, {
  80. "class": "v-date-picker-controls__month-btn",
  81. "disabled": disableMonth.value,
  82. "text": props.text,
  83. "variant": "text",
  84. "rounded": true,
  85. "onClick": onClickMonth
  86. }, null), _createVNode(VBtn, {
  87. "key": "mode-btn",
  88. "class": "v-date-picker-controls__mode-btn",
  89. "disabled": disableYear.value,
  90. "density": "comfortable",
  91. "icon": props.modeIcon,
  92. "variant": "text",
  93. "onClick": onClickYear
  94. }, null), _createVNode(VSpacer, {
  95. "key": "mode-spacer"
  96. }, null), _createVNode("div", {
  97. "key": "month-buttons",
  98. "class": "v-date-picker-controls__month"
  99. }, [_createVNode(VBtn, {
  100. "disabled": disablePrev.value,
  101. "icon": props.prevIcon,
  102. "variant": "text",
  103. "onClick": onClickPrev
  104. }, null), _createVNode(VBtn, {
  105. "disabled": disableNext.value,
  106. "icon": props.nextIcon,
  107. "variant": "text",
  108. "onClick": onClickNext
  109. }, null)])]);
  110. });
  111. return {};
  112. }
  113. });
  114. //# sourceMappingURL=VDatePickerControls.mjs.map