@arco-design/web-vue/lib/calendar/header.js

Arco Design Vue 2.0: A Vue.js 3 UI Library

"use strict";
var vue = require("vue");
var index$1 = require("../select/index.js");
var index$4 = require("../button/index.js");
var index$5 = require("../radio/index.js");
var index$2 = require("../icon/icon-left/index.js");
var index$3 = require("../icon/icon-right/index.js");
var date = require("../_utils/date.js");
var is = require("../_utils/is.js");
var globalConfig = require("../_utils/global-config.js");
var index = require("../locale/index.js");
function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
var Header = vue.defineComponent({
  name: "Header",
  props: {
    mode: {
      type: String
    },
    dayStartOfWeek: {
      type: Number
    },
    isWeek: {
      type: Boolean
    },
    panel: {
      type: Boolean
    },
    modes: {
      type: Array
    },
    headerType: {
      type: String
    },
    pageShowData: {
      type: Object,
      required: true
    },
    move: {
      type: Function,
      required: true
    },
    onYearChange: {
      type: Function,
      required: true
    },
    onMonthChange: {
      type: Function,
      required: true
    },
    changePageShowDate: {
      type: Function,
      required: true
    },
    onModeChange: {
      type: Function,
      required: true
    },
    headerValueFormat: {
      type: String,
      required: true
    }
  },
  emits: ["yearChange", "monthChange"],
  setup(props, {
    slots
  }) {
    const prefixCls = globalConfig.getPrefixCls("calendar");
    const {
      t
    } = index.useI18n();
    const modesOptions = is.isArray(props.modes) ? props.modes.map((m) => ({
      label: t(`datePicker.view.${m}`),
      value: m
    })) : [];
    const isSelectHeaderType = props.headerType === "select";
    const pageShowDateYear = vue.computed(() => props.pageShowData.year());
    const pageShowDateMonth = vue.computed(() => props.pageShowData.month() + 1);
    const optionsYear = vue.computed(() => {
      const options = [pageShowDateYear.value];
      for (let i = 1; i <= 10; i++) {
        options.unshift(pageShowDateYear.value - i);
      }
      for (let i = 1; i < 10; i++) {
        options.push(pageShowDateYear.value + i);
      }
      return options;
    });
    const optionsMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    return () => {
      let _slot;
      return vue.createVNode("div", {
        "class": `${prefixCls}-header`
      }, [vue.createVNode("div", {
        "class": `${prefixCls}-header-left`
      }, [isSelectHeaderType ? vue.createVNode(vue.Fragment, null, [vue.createVNode(index$1["default"], {
        "size": "small",
        "class": `${prefixCls}-header-value-year`,
        "defaultValue": pageShowDateYear.value,
        "options": optionsYear.value,
        "onChange": props.onYearChange,
        "popupContainer": `${prefixCls}-header`
      }, null), props.mode === "month" && vue.createVNode(index$1["default"], {
        "size": "small",
        "class": `${prefixCls}-header-value-month`,
        "defaultValue": pageShowDateMonth.value,
        "options": optionsMonth,
        "onChange": props.onMonthChange,
        "popupContainer": `${prefixCls}-header`
      }, null)]) : vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
        "class": `${prefixCls}-header-icon`,
        "role": "button",
        "tabindex": 0,
        "onClick": () => props.changePageShowDate("prev", props.mode)
      }, [vue.createVNode(index$2, null, null)]), vue.createVNode("div", {
        "class": `${prefixCls}-header-value`
      }, [slots.default ? slots.default({
        year: pageShowDateYear,
        month: pageShowDateMonth
      }) : props.pageShowData.format(props.headerValueFormat)]), vue.createVNode("div", {
        "role": "button",
        "tabindex": 0,
        "class": `${prefixCls}-header-icon`,
        "onClick": () => props.changePageShowDate("next", props.mode)
      }, [vue.createVNode(index$3, null, null)])]), vue.createVNode(index$4["default"], {
        "size": "small",
        "onClick": () => props.move(date.getNow())
      }, _isSlot(_slot = t(`datePicker.today`)) ? _slot : {
        default: () => [_slot]
      })]), vue.createVNode("div", {
        "class": `${prefixCls}-header-right`
      }, [vue.createVNode(index$5["default"].Group, {
        "size": "small",
        "type": "button",
        "options": modesOptions,
        "onChange": props.onModeChange,
        "modelValue": props.mode
      }, null)])]);
    };
  }
});
module.exports = Header;