select-controller2.mjs 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. import { defineComponent, computed, openBlock, createElementBlock, Fragment, createVNode, unref, normalizeClass, withCtx, createTextVNode, toDisplayString } from 'vue';
  2. import dayjs from 'dayjs';
  3. import { ElSelect } from '../../select/index.mjs';
  4. import { ElButton } from '../../button/index.mjs';
  5. import { selectControllerProps, selectControllerEmits } from './select-controller.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. import { useLocale } from '../../../hooks/use-locale/index.mjs';
  9. import { isFunction } from '@vue/shared';
  10. const _sfc_main = defineComponent({
  11. ...{
  12. name: "SelectController"
  13. },
  14. __name: "select-controller",
  15. props: selectControllerProps,
  16. emits: selectControllerEmits,
  17. setup(__props, { emit: __emit }) {
  18. const props = __props;
  19. const emit = __emit;
  20. const nsSelect = useNamespace("calendar-select");
  21. const { t, lang } = useLocale();
  22. const monthOptions = Array.from({ length: 12 }, (_, index) => {
  23. const actualMonth = index + 1;
  24. const label = isFunction(props.formatter) ? props.formatter(actualMonth, "month") : actualMonth;
  25. return {
  26. value: actualMonth,
  27. label
  28. };
  29. });
  30. const yearValue = computed(() => props.date.year());
  31. const monthValue = computed(() => props.date.month() + 1);
  32. const yearOptions = computed(() => {
  33. const years = [];
  34. for (let i = -10; i < 10; i++) {
  35. const year = yearValue.value + i;
  36. if (year > 0) {
  37. const label = isFunction(props.formatter) ? props.formatter(year, "year") : year;
  38. years.push({ value: year, label });
  39. }
  40. }
  41. return years;
  42. });
  43. const handleYearChange = (year) => {
  44. emit(
  45. "date-change",
  46. dayjs(new Date(year, monthValue.value - 1, 1)).locale(lang.value)
  47. );
  48. };
  49. const handleMonthChange = (month) => {
  50. emit(
  51. "date-change",
  52. dayjs(new Date(yearValue.value, month - 1, 1)).locale(lang.value)
  53. );
  54. };
  55. const selectToday = () => {
  56. emit("date-change", "today");
  57. };
  58. return (_ctx, _cache) => {
  59. return openBlock(), createElementBlock(
  60. Fragment,
  61. null,
  62. [
  63. createVNode(unref(ElSelect), {
  64. "model-value": yearValue.value,
  65. size: "small",
  66. class: normalizeClass(unref(nsSelect).e("year")),
  67. "validate-event": false,
  68. options: yearOptions.value,
  69. onChange: handleYearChange
  70. }, null, 8, ["model-value", "class", "options"]),
  71. createVNode(unref(ElSelect), {
  72. "model-value": monthValue.value,
  73. size: "small",
  74. class: normalizeClass(unref(nsSelect).e("month")),
  75. "validate-event": false,
  76. options: unref(monthOptions),
  77. onChange: handleMonthChange
  78. }, null, 8, ["model-value", "class", "options"]),
  79. createVNode(unref(ElButton), {
  80. size: "small",
  81. onClick: selectToday
  82. }, {
  83. default: withCtx(() => [
  84. createTextVNode(
  85. toDisplayString(unref(t)("el.datepicker.today")),
  86. 1
  87. )
  88. ]),
  89. _: 1
  90. })
  91. ],
  92. 64
  93. );
  94. };
  95. }
  96. });
  97. var SelectController = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/calendar/src/select-controller.vue"]]);
  98. export { SelectController as default };
  99. //# sourceMappingURL=select-controller2.mjs.map