element-plus/es/components/date-picker/src/date-picker-com/basic-year-table2.mjs

A Component Library for Vue 3

import { defineComponent, ref, computed, watch, nextTick, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeClass, withKeys, withModifiers, toDisplayString } from 'vue';
import dayjs from 'dayjs';
import '../../../../hooks/index2.mjs';
import '../../../time-picker/index2.mjs';
import '../../../../utils/index2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { rangeArr } from '../../../time-picker/src/common/date-utils2.mjs';
import { useLocale } from '../../../../hooks/use-locale/index2.mjs';
import { castArray } from '../../../../utils/arrays2.mjs';
import { hasClass } from '../../../../utils/dom/style2.mjs';

const datesInYear = (year, lang) => {
  const firstDay = dayjs(String(year)).locale(lang).startOf("year");
  const lastDay = firstDay.endOf("year");
  const numOfDays = lastDay.dayOfYear();
  return rangeArr(numOfDays).map((n) => firstDay.add(n, "day").toDate());
};
const _sfc_main = defineComponent({
  props: {
    disabledDate: {
      type: Function
    },
    parsedValue: {
      type: Object
    },
    date: {
      type: Object
    }
  },
  emits: ["pick"],
  expose: ["focus"],
  setup(props, ctx) {
    const { t, lang } = useLocale();
    const tbodyRef = ref();
    const currentCellRef = ref();
    const startYear = computed(() => {
      return Math.floor(props.date.year() / 10) * 10;
    });
    watch(() => props.date, async () => {
      var _a, _b;
      if ((_a = tbodyRef.value) == null ? void 0 : _a.contains(document.activeElement)) {
        await nextTick();
        (_b = currentCellRef.value) == null ? void 0 : _b.focus();
      }
    });
    const focus = () => {
      var _a;
      (_a = currentCellRef.value) == null ? void 0 : _a.focus();
    };
    const getCellStyle = (year) => {
      const style = {};
      const today = dayjs().locale(lang.value);
      style.disabled = props.disabledDate ? datesInYear(year, lang.value).every(props.disabledDate) : false;
      style.current = castArray(props.parsedValue).findIndex((_) => _.year() === year) >= 0;
      style.today = today.year() === year;
      return style;
    };
    const isSelectedCell = (year) => {
      return year === startYear.value && props.date.year() < startYear.value && props.date.year() > startYear.value + 9 || castArray(props.date).findIndex((_) => _.year() === year) >= 0;
    };
    const handleYearTableClick = (event) => {
      const clickTarget = event.target;
      const target = clickTarget.closest("td");
      if (target) {
        if (hasClass(target.parentNode, "disabled"))
          return;
        const year = target.textContent || target.innerText;
        ctx.emit("pick", Number(year));
      }
    };
    return {
      t,
      tbodyRef,
      currentCellRef,
      startYear,
      focus,
      isSelectedCell,
      getCellStyle,
      handleYearTableClick
    };
  }
});
const _hoisted_1 = ["aria-label"];
const _hoisted_2 = { ref: "tbodyRef" };
const _hoisted_3 = ["aria-selected", "tabindex"];
const _hoisted_4 = { class: "cell" };
const _hoisted_5 = { key: 1 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("table", {
    role: "grid",
    "aria-label": _ctx.t("el.datepicker.yearTablePrompt"),
    class: "el-year-table",
    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args))
  }, [
    createElementVNode("tbody", _hoisted_2, [
      (openBlock(), createElementBlock(Fragment, null, renderList(3, (n, i) => {
        return createElementVNode("tr", { key: i }, [
          (openBlock(), createElementBlock(Fragment, null, renderList(4, (nn, j) => {
            return openBlock(), createElementBlock(Fragment, {
              key: i + "_" + j
            }, [
              i * 4 + j < 10 ? (openBlock(), createElementBlock("td", {
                key: 0,
                ref_for: true,
                ref: (el) => _ctx.isSelectedCell(_ctx.startYear + i * 4 + j) && (_ctx.currentCellRef = el),
                class: normalizeClass(["available", _ctx.getCellStyle(_ctx.startYear + i * 4 + j)]),
                "aria-selected": `${_ctx.isSelectedCell(_ctx.startYear + i * 4 + j)}`,
                tabindex: _ctx.isSelectedCell(_ctx.startYear + i * 4 + j) ? 0 : -1,
                onKeydown: [
                  _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["space"])),
                  _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.handleYearTableClick && _ctx.handleYearTableClick(...args), ["prevent", "stop"]), ["enter"]))
                ]
              }, [
                createElementVNode("span", _hoisted_4, toDisplayString(_ctx.startYear + i * 4 + j), 1)
              ], 42, _hoisted_3)) : (openBlock(), createElementBlock("td", _hoisted_5))
            ], 64);
          }), 64))
        ]);
      }), 64))
    ], 512)
  ], 8, _hoisted_1);
}
var YearTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/element-plus/element-plus/packages/components/date-picker/src/date-picker-com/basic-year-table.vue"]]);

export { YearTable as default };
//# sourceMappingURL=basic-year-table2.mjs.map