tdesign-mobile-vue/cjs/calendar/template.js

tdesign-mobile-vue

/**
 * tdesign v1.7.0
 * (c) 2024 TDesign Group
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _typeof = require('@babel/runtime/helpers/typeof');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var vue = require('vue');
var tdesignIconsVueNext = require('tdesign-icons-vue-next');
var button_index = require('../button/index.js');
var config = require('../config.js');
var calendar_templateProps = require('./template-props.js');
var hooks_tnode = require('../hooks/tnode.js');
var hooks_useClass = require('../hooks/useClass.js');
var configProvider_useConfig = require('../config-provider/useConfig.js');
require('../button/button.js');
require('@babel/runtime/helpers/defineProperty');
require('../loading/index.js');
require('../loading/loading.js');
require('../loading/icon/gradient.js');
require('../_common/js/loading/circle-adapter.js');
require('../_common/js/utils/set-style.js');
require('../_common/js/utils/helper.js');
require('@babel/runtime/helpers/objectWithoutProperties');
require('lodash/isString');
require('lodash/isNull');
require('lodash/isUndefined');
require('lodash/isNumber');
require('lodash/isArray');
require('../loading/icon/spinner.js');
require('../loading/props.js');
require('../shared/dom.js');
require('lodash/isFunction');
require('lodash/camelCase');
require('lodash/kebabCase');
require('../hooks/render-tnode.js');
require('lodash/isEmpty');
require('lodash/isObject');
require('lodash/cloneDeep');
require('../config-provider/context.js');
require('lodash/mergeWith');
require('lodash/merge');
require('../_common/js/global-config/mobile/default-config.js');
require('../_common/js/global-config/mobile/locale/zh_CN.js');
require('../_chunks/dep-8d930798.js');
require('../_chunks/dep-a20a5149.js');
require('dayjs');
require('../loading/plugin.js');
require('../shared/component.js');
require('../button/props.js');
require('../form/hooks.js');
require('lodash/isBoolean');
require('../shared/hover.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);

var prefix = config["default"].prefix;
var name = "".concat(prefix, "-calendar");
var calendarTemplate = vue.defineComponent({
  name: name,
  components: {
    TButton: button_index.Button
  },
  props: calendar_templateProps["default"],
  emits: ["visible-change"],
  setup: function setup(_props, context) {
    var renderTNodeJSX = hooks_tnode.useTNodeJSX();
    var _useConfig = configProvider_useConfig.useConfig("calendar"),
      t = _useConfig.t,
      globalConfig = _useConfig.globalConfig;
    var calendarClass = hooks_useClass.usePrefixClass("calendar");
    var props = vue.inject("templateProps");
    var getYearMonthDay = function getYearMonthDay(date) {
      return {
        year: date.getFullYear(),
        month: date.getMonth(),
        date: date.getDate()
      };
    };
    var usePopup = vue.computed(function () {
      return props.usePopup;
    });
    var templateRef = vue.ref(null);
    var valueRef = vue.ref(props.value);
    var selectedDate = vue.ref();
    var firstDayOfWeek = vue.computed(function () {
      return props.firstDayOfWeek || 0;
    });
    var days = vue.computed(function () {
      var raw = globalConfig.value.weekdays;
      var ans = [];
      var i = firstDayOfWeek.value % 7;
      while (ans.length < 7) {
        ans.push(raw[i]);
        i = (i + 1) % 7;
      }
      return ans;
    });
    var today = new Date();
    var minDate = vue.computed(function () {
      return props.minDate ? new Date(props.minDate) : today;
    });
    var maxDate = vue.computed(function () {
      return props.maxDate ? new Date(props.maxDate) : new Date(today.getFullYear(), today.getMonth() + 6, today.getDate());
    });
    var getDate = function getDate(year, month, day) {
      return new Date(year, month, day);
    };
    var confirmBtn = vue.computed(function () {
      if (typeof _props.confirmBtn === "string") {
        return {
          content: _props.confirmBtn || globalConfig.value.confirm
        };
      }
      return _props.confirmBtn;
    });
    var handleSelect = function handleSelect(year, month, date, dateItem) {
      var _props$onSelect;
      if (dateItem.type === "disabled") return;
      var selected = new Date(year, month, date);
      if (props.type === "range" && Array.isArray(selectedDate.value)) {
        if (selectedDate.value.length === 1) {
          if (selectedDate.value[0] > selected) {
            selectedDate.value = [selected];
          } else {
            selectedDate.value = [selectedDate.value[0], selected];
          }
        } else {
          selectedDate.value = [selected];
          if (!confirmBtn.value && selectedDate.value.length === 2) {
            var _props$onChange;
            (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, selectedDate.value);
          }
        }
      } else if (props.type === "multiple") {
        var newVal = _toConsumableArray__default["default"](selectedDate.value);
        var index = selectedDate.value.findIndex(function (item) {
          return isSameDate(item, selected);
        });
        if (index > -1) {
          newVal.splice(index, 1);
        } else {
          newVal.push(selected);
        }
        selectedDate.value = newVal;
      } else {
        selectedDate.value = selected;
        if (!confirmBtn.value) {
          var _props$onChange2;
          (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 || _props$onChange2.call(props, selectedDate.value);
        }
      }
      (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, vue.toRaw(selectedDate.value));
    };
    var handleConfirm = function handleConfirm() {
      var _props$onClose, _props$onConfirm;
      context.emit("visible-change");
      (_props$onClose = props.onClose) === null || _props$onClose === void 0 || _props$onClose.call(props, "confirm-btn");
      (_props$onConfirm = props.onConfirm) === null || _props$onConfirm === void 0 || _props$onConfirm.call(props, vue.toRaw(selectedDate.value));
    };
    var handleClose = function handleClose() {
      var _props$onClose2;
      context.emit("visible-change");
      (_props$onClose2 = props.onClose) === null || _props$onClose2 === void 0 || _props$onClose2.call(props, "close-btn");
    };
    var getMonthDates = function getMonthDates(date) {
      var _getYearMonthDay = getYearMonthDay(date),
        year = _getYearMonthDay.year,
        month = _getYearMonthDay.month;
      var firstDay = getDate(year, month, 1);
      var weekdayOfFirstDay = firstDay.getDay();
      var lastDate = new Date(+getDate(year, month + 1, 1) - 24 * 3600 * 1e3).getDate();
      return {
        year: year,
        month: month,
        weekdayOfFirstDay: weekdayOfFirstDay,
        lastDate: lastDate
      };
    };
    var isSameDate = function isSameDate(date1, date2) {
      if (date1 instanceof Date) date1 = getYearMonthDay(date1);
      if (date2 instanceof Date) date2 = getYearMonthDay(date2);
      var keys = ["year", "month", "date"];
      return keys.every(function (key) {
        return date1[key] === date2[key];
      });
    };
    var months = vue.computed(function () {
      var ans = [];
      var _getYearMonthDay2 = getYearMonthDay(minDate.value),
        minYear = _getYearMonthDay2.year,
        minMonth = _getYearMonthDay2.month;
      var _getYearMonthDay3 = getYearMonthDay(maxDate.value),
        maxYear = _getYearMonthDay3.year,
        maxMonth = _getYearMonthDay3.month;
      var calcType = function calcType(year, month, date) {
        var curDate = new Date(year, month, date, 23, 59, 59);
        if (props.type === "single") {
          if (isSameDate({
            year: year,
            month: month,
            date: date
          }, selectedDate.value)) return "selected";
        }
        if (props.type === "multiple") {
          var hit = selectedDate.value.some(function (item) {
            return isSameDate({
              year: year,
              month: month,
              date: date
            }, item);
          });
          if (hit) {
            return "selected";
          }
        }
        if (props.type === "range") {
          if (Array.isArray(selectedDate.value)) {
            var _selectedDate$value = _slicedToArray__default["default"](selectedDate.value, 2),
              startDate = _selectedDate$value[0],
              endDate = _selectedDate$value[1];
            if (startDate && isSameDate({
              year: year,
              month: month,
              date: date
            }, startDate)) return "start";
            if (endDate && isSameDate({
              year: year,
              month: month,
              date: date
            }, endDate)) return "end";
            if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime()) return "centre";
          }
        }
        var minCurDate = new Date(year, month, date, 0, 0, 0);
        if (curDate.getTime() < minDate.value.getTime() || minCurDate.getTime() > maxDate.value.getTime()) {
          return "disabled";
        }
        return "";
      };
      while (minYear < maxYear || minYear === maxYear && minMonth <= maxMonth) {
        var target = getMonthDates(getDate(minYear, minMonth, 1));
        var months2 = [];
        for (var i = 1; i <= 31; i++) {
          if (i > target.lastDate) break;
          var dateObj = {
            date: getDate(minYear, minMonth, i),
            day: i,
            type: calcType(minYear, minMonth, i)
          };
          months2.push(props.format ? props.format(dateObj) : dateObj);
        }
        ans.push({
          year: minYear,
          month: minMonth,
          months: months2,
          weekdayOfFirstDay: target.weekdayOfFirstDay
        });
        var curDate = getYearMonthDay(getDate(minYear, minMonth + 1, 1));
        minYear = curDate.year;
        minMonth = curDate.month;
      }
      return ans;
    });
    vue.watch(valueRef, function () {
      if (Array.isArray(valueRef.value)) {
        selectedDate.value = valueRef.value.map(function (item) {
          return new Date(item);
        });
      } else if (valueRef.value) {
        selectedDate.value = new Date(valueRef.value);
      } else {
        selectedDate.value = props.type === "multiple" ? [new Date()] : new Date();
      }
    }, {
      immediate: true
    });
    context.expose({
      valueRef: valueRef,
      templateRef: templateRef
    });
    var getDateItemClass = function getDateItemClass(dateItem) {
      var className = "".concat(calendarClass.value, "__dates-item");
      if (dateItem.type) {
        className = "".concat(className, " ").concat(calendarClass.value, "__dates-item--").concat(dateItem.type);
      }
      if (dateItem.className) {
        className = "".concat(className, " ").concat(dateItem.className);
      }
      return className;
    };
    return function () {
      var renderCell = function renderCell(dateItem) {
        var cell = renderTNodeJSX("cell", {
          params: {
            item: dateItem
          }
        });
        if (cell) {
          return cell;
        }
        var className2 = "".concat(calendarClass.value, "__dates-item-suffix");
        if (dateItem.type) {
          className2 = "".concat(className2, " ").concat(calendarClass.value, "__dates-item-suffix--").concat(dateItem.type);
        }
        return vue.createVNode(vue.Fragment, null, [dateItem.prefix && vue.createVNode("div", {
          "class": "".concat(calendarClass.value, "__dates-item-prefix")
        }, [dateItem.prefix]), dateItem.day, dateItem.suffix && vue.createVNode("div", {
          "class": className2
        }, [dateItem.suffix])]);
      };
      var className = usePopup.value ? "".concat(calendarClass.value, " ").concat(calendarClass.value, "--popup") : "".concat(calendarClass.value);
      var renderConfirmBtn = function renderConfirmBtn() {
        if (confirmBtn.value && _typeof__default["default"](confirmBtn.value) !== "object") {
          return confirmBtn.value;
        }
        if (confirmBtn.value && Array.isArray(confirmBtn.value)) {
          return confirmBtn.value;
        }
        if (confirmBtn.value && _typeof__default["default"](confirmBtn.value) === "object") {
          return vue.createVNode(vue.resolveComponent("t-button"), vue.mergeProps({
            "block": true,
            "theme": "primary"
          }, confirmBtn.value, {
            "onClick": handleConfirm
          }), null);
        }
      };
      return vue.createVNode("div", {
        "ref": templateRef,
        "class": className
      }, [vue.createVNode("div", {
        "class": "".concat(calendarClass.value, "__title")
      }, [_props.title || globalConfig.value.title]), usePopup.value && vue.createVNode(tdesignIconsVueNext.CloseIcon, {
        "class": "".concat(calendarClass.value, "__close-btn"),
        "size": "24",
        "onClick": handleClose
      }, null), vue.createVNode("div", {
        "class": "".concat(calendarClass.value, "__days")
      }, [(days.value || []).map(function (item, index) {
        return vue.createVNode("div", {
          "key": index,
          "class": "".concat(calendarClass.value, "__days-item")
        }, [item]);
      })]), vue.createVNode("div", {
        "class": "".concat(calendarClass.value, "__months"),
        "style": "overflow: auto"
      }, [months.value.map(function (item, index) {
        return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
          "class": "".concat(calendarClass.value, "__month"),
          "key": index
        }, [t(globalConfig.value.monthTitle, {
          year: item.year,
          month: globalConfig.value.months[item.month]
        })]), vue.createVNode("div", {
          "class": "".concat(calendarClass.value, "__dates"),
          "key": index
        }, [new Array((item.weekdayOfFirstDay - firstDayOfWeek.value + 7) % 7).fill(0).map(function (emptyItem, index2) {
          return vue.createVNode("div", {
            "key": index2
          }, null);
        }), item.months.map(function (dateItem, dateIndex) {
          return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
            "key": "".concat(index, "_").concat(dateIndex),
            "class": getDateItemClass(dateItem),
            "onClick": function onClick() {
              return handleSelect(item.year, item.month, dateItem.day, dateItem);
            }
          }, [renderCell(dateItem)])]);
        })])]);
      })]), usePopup.value && vue.createVNode("div", {
        "class": "".concat(calendarClass.value, "__footer")
      }, [renderConfirmBtn()])]);
    };
  }
});

exports["default"] = calendarTemplate;
//# sourceMappingURL=template.js.map