element-ps 1.0.0-alpha.6 → 1.0.1

package/lib/packages/components/button/src/button2.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('../../../hooks/index.js');
+var props = require('../../../utils/props.js');
+var index = require('../../../hooks/use-form-item/index.js');
+
+const buttonType = [
+  "default",
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "danger",
+  "text",
+  ""
+];
+const buttonSize = ["", "large", "medium", "small", "mini"];
+const buttonNativeType = ["button", "submit", "reset"];
+const buttonProps = props.buildProps({
+  ...index.useFormItemProps,
+  type: {
+    type: String,
+    values: buttonType,
+    default: ""
+  },
+  icon: {
+    type: props.definePropType([String, Object]),
+    default: ""
+  },
+  nativeType: {
+    type: String,
+    values: buttonNativeType,
+    default: "button"
+  },
+  loading: Boolean,
+  plain: Boolean,
+  autofocus: Boolean,
+  round: Boolean,
+  circle: Boolean,
+  autoInsertSpace: {
+    type: Boolean
+  }
+});
+const buttonEmits = {
+  click: (evt) => evt instanceof MouseEvent
+};
+
+exports.buttonEmits = buttonEmits;
+exports.buttonNativeType = buttonNativeType;
+exports.buttonProps = buttonProps;
+exports.buttonSize = buttonSize;
+exports.buttonType = buttonType;
+//# sourceMappingURL=button2.js.map

package/lib/packages/components/button/src/button2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button2.js","sources":["../../../../../../../packages/components/button/src/button.ts"],"sourcesContent":["import { useFormItemProps } from '@element-ps/hooks'\nimport { buildProps, definePropType } from '@element-ps/utils/props'\nimport type { ExtractPropTypes, Component } from 'vue'\n\nexport const buttonType = [\n  'default',\n  'primary',\n  'success',\n  'warning',\n  'info',\n  'danger',\n  'text',\n  '',\n] as const\nexport const buttonSize = ['', 'large', 'medium', 'small', 'mini'] as const\nexport const buttonNativeType = ['button', 'submit', 'reset'] as const\n\nexport const buttonProps = buildProps({\n  ...useFormItemProps,\n  type: {\n    type: String,\n    values: buttonType,\n    default: '',\n  },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  nativeType: {\n    type: String,\n    values: buttonNativeType,\n    default: 'button',\n  },\n  loading: Boolean,\n  plain: Boolean,\n  autofocus: Boolean,\n  round: Boolean,\n  circle: Boolean,\n  autoInsertSpace: {\n    type: Boolean,\n  },\n} as const)\n\nexport interface ButtonConfigContext {\n  autoInsertSpace?: boolean\n}\n\nexport const buttonEmits = {\n  click: (evt: MouseEvent) => evt instanceof MouseEvent,\n}\n\nexport type ButtonProps = ExtractPropTypes<typeof buttonProps>\nexport type ButtonEmits = typeof buttonEmits\n\nexport type ButtonType = ButtonProps['type']\nexport type ButtonNativeType = ButtonProps['nativeType']\n"],"names":["buildProps","useFormItemProps","definePropType"],"mappings":";;;;;;;;MAIa,aAAa;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;MAEW,aAAa,CAAC,IAAI,SAAS,UAAU,SAAS;MAC9C,mBAAmB,CAAC,UAAU,UAAU;MAExC,cAAcA,iBAAW;AAAA,KACjCC;AAAA,EACH,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAMC,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA;AAAA,EAEX,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,IACf,MAAM;AAAA;AAAA;MAQG,cAAc;AAAA,EACzB,OAAO,CAAC,QAAoB,eAAe;AAAA;;;;;;;;"}

package/lib/packages/components/calendar/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./src/index.js');
+var index_vue_vue_type_script_lang = require('./src/index.vue_vue&type=script&lang.js');
+
+index_vue_vue_type_script_lang["default"].install = (app) => {
+  app.component(index_vue_vue_type_script_lang["default"].name, index_vue_vue_type_script_lang["default"]);
+};
+const _Calendar = index_vue_vue_type_script_lang["default"];
+const PsCalendar = _Calendar;
+
+exports.PsCalendar = PsCalendar;
+exports["default"] = _Calendar;
+//# sourceMappingURL=index.js.map

package/lib/packages/components/calendar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../packages/components/calendar/index.ts"],"sourcesContent":["import Calendar from './src/index.vue'\nimport type { App } from 'vue'\nimport type { SFCWithInstall } from '@element-ps/utils/types'\n\nCalendar.install = (app: App): void => {\n  app.component(Calendar.name, Calendar)\n}\n\nconst _Calendar = Calendar as SFCWithInstall<typeof Calendar>\n\nexport default _Calendar\nexport const PsCalendar = _Calendar\n"],"names":["Calendar"],"mappings":";;;;;;;AAIAA,0CAAS,UAAU,CAAC,QAAmB;AACrC,MAAI,UAAUA,0CAAS,MAAMA;AAAA;MAGzB,YAAYA;MAGL,aAAa;;;;;"}

package/lib/packages/components/calendar/src/date-table.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dateTable_vue_vue_type_script_lang = require('./date-table.vue_vue&type=script&lang.js');
+var dateTable_vue_vue_type_template_id_297fdb36_lang = require('./date-table.vue_vue&type=template&id=297fdb36&lang.js');
+
+dateTable_vue_vue_type_script_lang["default"].render = dateTable_vue_vue_type_template_id_297fdb36_lang.render;
+dateTable_vue_vue_type_script_lang["default"].__file = "packages/components/calendar/src/date-table.vue";
+
+exports["default"] = dateTable_vue_vue_type_script_lang["default"];
+exports.getMonthDays = dateTable_vue_vue_type_script_lang.getMonthDays;
+exports.getPrevMonthLastDays = dateTable_vue_vue_type_script_lang.getPrevMonthLastDays;
+//# sourceMappingURL=date-table.js.map

package/lib/packages/components/calendar/src/date-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-table.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}

package/lib/packages/components/calendar/src/date-table.vue_vue&type=script&lang.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var localeData = require('dayjs/plugin/localeData');
+require('../../../hooks/index.js');
+require('../../time-picker/index.js');
+var dateUtils = require('../../time-picker/src/common/date-utils.js');
+var index = require('../../../hooks/use-locale/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var localeData__default = /*#__PURE__*/_interopDefaultLegacy(localeData);
+
+dayjs__default["default"].extend(localeData__default["default"]);
+const getPrevMonthLastDays = (date, amount) => {
+  const lastDay = date.subtract(1, "month").endOf("month").date();
+  return dateUtils.rangeArr(amount).map((_, index) => lastDay - (amount - index - 1));
+};
+const getMonthDays = (date) => {
+  const days = date.daysInMonth();
+  return dateUtils.rangeArr(days).map((_, index) => index + 1);
+};
+var script = vue.defineComponent({
+  props: {
+    selectedDay: {
+      type: Object
+    },
+    range: {
+      type: Array
+    },
+    date: {
+      type: Object
+    },
+    hideHeader: {
+      type: Boolean
+    }
+  },
+  setup(props) {
+    const { lang } = index.useLocaleInject();
+    const WEEK_DAYS = vue.ref(dayjs__default["default"]().locale(lang.value).localeData().weekdaysShort());
+    const now = dayjs__default["default"]().locale(lang.value);
+    const firstDayOfWeek = now.$locale().weekStart || 0;
+    const toNestedArr = (days) => {
+      return dateUtils.rangeArr(days.length / 7).map((_, index) => {
+        const start = index * 7;
+        return days.slice(start, start + 7);
+      });
+    };
+    const getFormattedDate = (day, type) => {
+      let result;
+      if (type === "prev") {
+        result = props.date.startOf("month").subtract(1, "month").date(day);
+      } else if (type === "next") {
+        result = props.date.startOf("month").add(1, "month").date(day);
+      } else {
+        result = props.date.date(day);
+      }
+      return result;
+    };
+    const getCellClass = ({ text, type }) => {
+      const classes = [type];
+      if (type === "current") {
+        const date_ = getFormattedDate(text, type);
+        if (date_.isSame(props.selectedDay, "day")) {
+          classes.push("is-selected");
+        }
+        if (date_.isSame(now, "day")) {
+          classes.push("is-today");
+        }
+      }
+      return classes;
+    };
+    const getSlotData = ({ text, type }) => {
+      const day = getFormattedDate(text, type);
+      return {
+        isSelected: day.isSame(props.selectedDay),
+        type: `${type}-month`,
+        day: day.format("YYYY-MM-DD"),
+        date: day.toDate()
+      };
+    };
+    const isInRange = vue.computed(() => {
+      return props.range && props.range.length;
+    });
+    const rows = vue.computed(() => {
+      let days = [];
+      if (isInRange.value) {
+        const [start, end] = props.range;
+        const currentMonthRange = dateUtils.rangeArr(end.date() - start.date() + 1).map((_, index) => ({
+          text: start.date() + index,
+          type: "current"
+        }));
+        let remaining = currentMonthRange.length % 7;
+        remaining = remaining === 0 ? 0 : 7 - remaining;
+        const nextMonthRange = dateUtils.rangeArr(remaining).map((_, index) => ({
+          text: index + 1,
+          type: "next"
+        }));
+        days = currentMonthRange.concat(nextMonthRange);
+      } else {
+        const firstDay = props.date.startOf("month").day() || 7;
+        const prevMonthDays = getPrevMonthLastDays(props.date, firstDay - firstDayOfWeek).map((day) => ({
+          text: day,
+          type: "prev"
+        }));
+        const currentMonthDays = getMonthDays(props.date).map((day) => ({
+          text: day,
+          type: "current"
+        }));
+        days = [...prevMonthDays, ...currentMonthDays];
+        const nextMonthDays = dateUtils.rangeArr(42 - days.length).map((_, index) => ({
+          text: index + 1,
+          type: "next"
+        }));
+        days = days.concat(nextMonthDays);
+      }
+      return toNestedArr(days);
+    });
+    const weekDays = vue.computed(() => {
+      const start = firstDayOfWeek;
+      if (start === 0) {
+        return WEEK_DAYS.value;
+      } else {
+        return WEEK_DAYS.value.slice(start).concat(WEEK_DAYS.value.slice(0, start));
+      }
+    });
+    return {
+      isInRange,
+      weekDays,
+      rows,
+      getCellClass,
+      getSlotData
+    };
+  }
+});
+
+exports["default"] = script;
+exports.getMonthDays = getMonthDays;
+exports.getPrevMonthLastDays = getPrevMonthLastDays;
+//# sourceMappingURL=date-table.vue_vue&type=script&lang.js.map

package/lib/packages/components/calendar/src/date-table.vue_vue&type=script&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-table.vue_vue&type=script&lang.js","sources":["../../../../../../../packages/components/calendar/src/date-table.vue"],"sourcesContent":["<template>\n  <table\n    :class=\"{\n      'el-calendar-table': true,\n      'is-range': isInRange,\n    }\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          'el-calendar-table__row': true,\n          'el-calendar-table__row--hide-border': index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n        >\n          <div class=\"el-calendar-day\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { rangeArr } from '@element-ps/components/time-picker'\nimport type { Dayjs } from 'dayjs'\nimport type { PropType } from 'vue'\ndayjs.extend(localeData)\n\nexport const getPrevMonthLastDays = (date: Dayjs, amount) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(amount).map((_, index) => lastDay - (amount - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nexport default defineComponent({\n  props: {\n    selectedDay: {\n      type: Object as PropType<Dayjs>,\n    },\n    range: {\n      type: Array as PropType<Array<Dayjs>>,\n    },\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    hideHeader: {\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const { lang } = useLocaleInject()\n    const WEEK_DAYS = ref(\n      dayjs().locale(lang.value).localeData().weekdaysShort()\n    )\n\n    const now = dayjs().locale(lang.value)\n\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek = (now as any).$locale().weekStart || 0\n\n    const toNestedArr = (days) => {\n      return rangeArr(days.length / 7).map((_, index) => {\n        const start = index * 7\n        return days.slice(start, start + 7)\n      })\n    }\n\n    const getFormattedDate = (day, type): Dayjs => {\n      let result\n      if (type === 'prev') {\n        result = props.date.startOf('month').subtract(1, 'month').date(day)\n      } else if (type === 'next') {\n        result = props.date.startOf('month').add(1, 'month').date(day)\n      } else {\n        result = props.date.date(day)\n      }\n      return result\n    }\n\n    const getCellClass = ({ text, type }) => {\n      const classes = [type]\n      if (type === 'current') {\n        const date_ = getFormattedDate(text, type)\n        if (date_.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date_.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const getSlotData = ({ text, type }) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    const isInRange = computed(() => {\n      return props.range && props.range.length\n    })\n\n    const rows = computed(() => {\n      let days = []\n      if (isInRange.value) {\n        const [start, end] = props.range\n        const currentMonthRange = rangeArr(end.date() - start.date() + 1).map(\n          (_, index) => ({\n            text: start.date() + index,\n            type: 'current',\n          })\n        )\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays = getMonthDays(props.date).map((day) => ({\n          text: day,\n          type: 'current',\n        }))\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n\n      if (start === 0) {\n        return WEEK_DAYS.value\n      } else {\n        return WEEK_DAYS.value\n          .slice(start)\n          .concat(WEEK_DAYS.value.slice(0, start))\n      }\n    })\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","localeData","rangeArr","defineComponent","useLocaleInject","ref","computed"],"mappings":"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"}

package/lib/packages/components/calendar/src/date-table.vue_vue&type=template&id=297fdb36&lang.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { class: "el-calendar-day" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("table", {
+    class: vue.normalizeClass({
+      "el-calendar-table": true,
+      "is-range": _ctx.isInRange
+    }),
+    cellspacing: "0",
+    cellpadding: "0"
+  }, [
+    !_ctx.hideHeader ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.weekDays, (day) => {
+        return vue.openBlock(), vue.createElementBlock("th", { key: day }, vue.toDisplayString(day), 1);
+      }), 128))
+    ])) : vue.createCommentVNode("v-if", true),
+    vue.createElementVNode("tbody", null, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.rows, (row, index) => {
+        return vue.openBlock(), vue.createElementBlock("tr", {
+          key: index,
+          class: vue.normalizeClass({
+            "el-calendar-table__row": true,
+            "el-calendar-table__row--hide-border": index === 0 && _ctx.hideHeader
+          })
+        }, [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key) => {
+            return vue.openBlock(), vue.createElementBlock("td", {
+              key,
+              class: vue.normalizeClass(_ctx.getCellClass(cell))
+            }, [
+              vue.createElementVNode("div", _hoisted_2, [
+                vue.renderSlot(_ctx.$slots, "dateCell", {
+                  data: _ctx.getSlotData(cell)
+                }, () => [
+                  vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1)
+                ])
+              ])
+            ], 2);
+          }), 128))
+        ], 2);
+      }), 128))
+    ])
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=date-table.vue_vue&type=template&id=297fdb36&lang.js.map

package/lib/packages/components/calendar/src/date-table.vue_vue&type=template&id=297fdb36&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-table.vue_vue&type=template&id=297fdb36&lang.js","sources":["../../../../../../../packages/components/calendar/src/date-table.vue?vue&type=template&id=297fdb36&lang.js"],"sourcesContent":["<template>\n  <table\n    :class=\"{\n      'el-calendar-table': true,\n      'is-range': isInRange,\n    }\"\n    cellspacing=\"0\"\n    cellpadding=\"0\"\n  >\n    <thead v-if=\"!hideHeader\">\n      <th v-for=\"day in weekDays\" :key=\"day\">{{ day }}</th>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          'el-calendar-table__row': true,\n          'el-calendar-table__row--hide-border': index === 0 && hideHeader,\n        }\"\n      >\n        <td\n          v-for=\"(cell, key) in row\"\n          :key=\"key\"\n          :class=\"getCellClass(cell)\"\n        >\n          <div class=\"el-calendar-day\">\n            <slot name=\"dateCell\" :data=\"getSlotData(cell)\">\n              <span>{{ cell.text }}</span>\n            </slot>\n          </div>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, ref } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { rangeArr } from '@element-ps/components/time-picker'\nimport type { Dayjs } from 'dayjs'\nimport type { PropType } from 'vue'\ndayjs.extend(localeData)\n\nexport const getPrevMonthLastDays = (date: Dayjs, amount) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(amount).map((_, index) => lastDay - (amount - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nexport default defineComponent({\n  props: {\n    selectedDay: {\n      type: Object as PropType<Dayjs>,\n    },\n    range: {\n      type: Array as PropType<Array<Dayjs>>,\n    },\n    date: {\n      type: Object as PropType<Dayjs>,\n    },\n    hideHeader: {\n      type: Boolean,\n    },\n  },\n  setup(props) {\n    const { lang } = useLocaleInject()\n    const WEEK_DAYS = ref(\n      dayjs().locale(lang.value).localeData().weekdaysShort()\n    )\n\n    const now = dayjs().locale(lang.value)\n\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek = (now as any).$locale().weekStart || 0\n\n    const toNestedArr = (days) => {\n      return rangeArr(days.length / 7).map((_, index) => {\n        const start = index * 7\n        return days.slice(start, start + 7)\n      })\n    }\n\n    const getFormattedDate = (day, type): Dayjs => {\n      let result\n      if (type === 'prev') {\n        result = props.date.startOf('month').subtract(1, 'month').date(day)\n      } else if (type === 'next') {\n        result = props.date.startOf('month').add(1, 'month').date(day)\n      } else {\n        result = props.date.date(day)\n      }\n      return result\n    }\n\n    const getCellClass = ({ text, type }) => {\n      const classes = [type]\n      if (type === 'current') {\n        const date_ = getFormattedDate(text, type)\n        if (date_.isSame(props.selectedDay, 'day')) {\n          classes.push('is-selected')\n        }\n        if (date_.isSame(now, 'day')) {\n          classes.push('is-today')\n        }\n      }\n      return classes\n    }\n\n    const getSlotData = ({ text, type }) => {\n      const day = getFormattedDate(text, type)\n      return {\n        isSelected: day.isSame(props.selectedDay),\n        type: `${type}-month`,\n        day: day.format('YYYY-MM-DD'),\n        date: day.toDate(),\n      }\n    }\n\n    const isInRange = computed(() => {\n      return props.range && props.range.length\n    })\n\n    const rows = computed(() => {\n      let days = []\n      if (isInRange.value) {\n        const [start, end] = props.range\n        const currentMonthRange = rangeArr(end.date() - start.date() + 1).map(\n          (_, index) => ({\n            text: start.date() + index,\n            type: 'current',\n          })\n        )\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange = rangeArr(remaining).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = currentMonthRange.concat(nextMonthRange)\n      } else {\n        const firstDay = props.date.startOf('month').day() || 7\n        const prevMonthDays = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays = getMonthDays(props.date).map((day) => ({\n          text: day,\n          type: 'current',\n        }))\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays = rangeArr(42 - days.length).map((_, index) => ({\n          text: index + 1,\n          type: 'next',\n        }))\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n\n      if (start === 0) {\n        return WEEK_DAYS.value\n      } else {\n        return WEEK_DAYS.value\n          .slice(start)\n          .concat(WEEK_DAYS.value.slice(0, start))\n      }\n    })\n\n    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot"],"mappings":";;;;;;;qBA0Be,OAAM;;0BAzBnBA;IACG;;;;IAID,aAAY;AAAA,IACZ,aAAY;AAAA;KAEE,oCAAdA;4BACEA,0DAAkB,gBAAP;gCAAXA,+BAA6B,KAAK,2BAAQ;;;IAE5CC;4BACED,0DACyB,YAAf,KAAK;gCADfA;UAEG,KAAK;AAAA,UACL;;;;;gCAKDA,0DACwB,MAAd,MAAM;oCADhBA;cAEG;AAAA,cACA,0BAAO,kBAAa;AAAA;cAErBC,8BAAA;gBACEC;kBAAuB,MAAM,iBAAY;AAAA,mBAAzC;kBACED,yDAAS,KAAK;;;;;;;;;;;;;"}

package/lib/packages/components/calendar/src/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_vue_vue_type_script_lang = require('./index.vue_vue&type=script&lang.js');
+var index_vue_vue_type_template_id_819aa44a_lang = require('./index.vue_vue&type=template&id=819aa44a&lang.js');
+
+index_vue_vue_type_script_lang["default"].render = index_vue_vue_type_template_id_819aa44a_lang.render;
+index_vue_vue_type_script_lang["default"].__file = "packages/components/calendar/src/index.vue";
+
+exports["default"] = index_vue_vue_type_script_lang["default"];
+//# sourceMappingURL=index.js.map

package/lib/packages/components/calendar/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/calendar/src/index.vue_vue&type=script&lang.js

@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+require('../../index.js');
+require('../../../hooks/index.js');
+var error = require('../../../utils/error.js');
+require('./date-table.js');
+var dateTable_vue_vue_type_script_lang = require('./date-table.vue_vue&type=script&lang.js');
+var index = require('../../button/index.js');
+var index$1 = require('../../../hooks/use-locale/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+var script = vue.defineComponent({
+  name: "PsCalendar",
+  components: {
+    DateTable: dateTable_vue_vue_type_script_lang["default"],
+    PsButton: index.PsButton,
+    PsButtonGroup: index.PsButtonGroup
+  },
+  props: {
+    modelValue: {
+      type: Date
+    },
+    range: {
+      type: Array,
+      validator: (range) => {
+        if (Array.isArray(range)) {
+          return range.length === 2 && range.every((item) => item instanceof Date);
+        }
+        return false;
+      }
+    }
+  },
+  setup(props, ctx) {
+    const { t, lang } = index$1.useLocaleInject();
+    const selectedDay = vue.ref(null);
+    const now = dayjs__default["default"]().locale(lang.value);
+    const curMonthDatePrefix = vue.computed(() => {
+      return dayjs__default["default"](date.value).locale(lang.value).format("YYYY-MM");
+    });
+    const i18nDate = vue.computed(() => {
+      const pickedMonth = `el.datepicker.month${date.value.format("M")}`;
+      return `${date.value.year()} ${t("el.datepicker.year")} ${t(pickedMonth)}`;
+    });
+    const realSelectedDay = vue.computed({
+      get() {
+        if (!props.modelValue)
+          return selectedDay.value;
+        return date.value;
+      },
+      set(val) {
+        selectedDay.value = val;
+        const result = val.toDate();
+        ctx.emit("input", result);
+        ctx.emit("update:modelValue", result);
+      }
+    });
+    const date = vue.computed(() => {
+      if (!props.modelValue) {
+        if (realSelectedDay.value) {
+          return realSelectedDay.value;
+        } else if (validatedRange.value.length) {
+          return validatedRange.value[0][0];
+        }
+        return now;
+      } else {
+        return dayjs__default["default"](props.modelValue).locale(lang.value);
+      }
+    });
+    const calculateValidatedDateRange = (startDayjs, endDayjs) => {
+      const firstDay = startDayjs.startOf("week");
+      const lastDay = endDayjs.endOf("week");
+      const firstMonth = firstDay.get("month");
+      const lastMonth = lastDay.get("month");
+      if (firstMonth === lastMonth) {
+        return [[firstDay, lastDay]];
+      } else if (firstMonth + 1 === lastMonth) {
+        const firstMonthLastDay = firstDay.endOf("month");
+        const lastMonthFirstDay = lastDay.startOf("month");
+        const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, "week");
+        const lastMonthStartDay = isSameWeek ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+        return [
+          [firstDay, firstMonthLastDay],
+          [lastMonthStartDay.startOf("week"), lastDay]
+        ];
+      } else if (firstMonth + 2 === lastMonth) {
+        const firstMonthLastDay = firstDay.endOf("month");
+        const secondMonthFirstDay = firstDay.add(1, "month").startOf("month");
+        const secondMonthStartDay = firstMonthLastDay.isSame(secondMonthFirstDay, "week") ? secondMonthFirstDay.add(1, "week") : secondMonthFirstDay;
+        const secondMonthLastDay = secondMonthStartDay.endOf("month");
+        const lastMonthFirstDay = lastDay.startOf("month");
+        const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, "week") ? lastMonthFirstDay.add(1, "week") : lastMonthFirstDay;
+        return [
+          [firstDay, firstMonthLastDay],
+          [secondMonthStartDay.startOf("week"), secondMonthLastDay],
+          [lastMonthStartDay.startOf("week"), lastDay]
+        ];
+      } else {
+        error.debugWarn("PsCalendar", "start time and end time interval must not exceed two months");
+        return [];
+      }
+    };
+    const validatedRange = vue.computed(() => {
+      if (!props.range)
+        return [];
+      const rangeArrDayjs = props.range.map((_) => dayjs__default["default"](_).locale(lang.value));
+      const [startDayjs, endDayjs] = rangeArrDayjs;
+      if (startDayjs.isAfter(endDayjs)) {
+        error.debugWarn("PsCalendar", "end time should be greater than start time");
+        return [];
+      }
+      if (startDayjs.isSame(endDayjs, "month")) {
+        return calculateValidatedDateRange(startDayjs, endDayjs);
+      } else {
+        if (startDayjs.add(1, "month").month() !== endDayjs.month()) {
+          error.debugWarn("PsCalendar", "start time and end time interval must not exceed two months");
+          return [];
+        }
+        return calculateValidatedDateRange(startDayjs, endDayjs);
+      }
+    });
+    return {
+      selectedDay,
+      curMonthDatePrefix,
+      i18nDate,
+      realSelectedDay,
+      date,
+      validatedRange,
+      t
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue&type=script&lang.js.map

package/lib/packages/components/calendar/src/index.vue_vue&type=script&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=script&lang.js","sources":["../../../../../../../packages/components/calendar/src/index.vue"],"sourcesContent":["<template>\n  <div class=\"el-calendar\">\n    <div class=\"el-calendar__header\">\n      <slot name=\"header\" :date=\"i18nDate\">\n        <div class=\"el-calendar__title\">{{ i18nDate }}</div>\n        <div\n          v-if=\"validatedRange.length === 0\"\n          class=\"el-calendar__button-group\"\n        >\n          <ps-button-group>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.prevMonth\") }}\n            </ps-button>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.today\") }}\n            </ps-button>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.nextMonth\") }}\n            </ps-button>\n          </ps-button-group>\n        </div>\n      </slot>\n    </div>\n    <div v-if=\"validatedRange.length === 0\" class=\"el-calendar__body\">\n      <date-table :date=\"date\" :selected-day=\"realSelectedDay\">\n        <template v-if=\"$slots.dateCell\" #dateCell=\"data\">\n          <slot name=\"dateCell\" v-bind=\"data\"></slot>\n        </template>\n      </date-table>\n    </div>\n    <div v-else class=\"el-calendar__body\">\n      <date-table\n        v-for=\"(range_, index) in validatedRange\"\n        :key=\"index\"\n        :date=\"range_[0]\"\n        :selected-day=\"realSelectedDay\"\n        :range=\"range_\"\n        :hide-header=\"index !== 0\"\n      >\n        <template v-if=\"$slots.dateCell\" #dateCell=\"data\">\n          <slot name=\"dateCell\" v-bind=\"data\"></slot>\n        </template>\n      </date-table>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\n\nimport { PsButton, PsButtonGroup } from '@element-ps/components'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { debugWarn } from '@element-ps/utils/error'\nimport DateTable from './date-table.vue'\nimport type { PropType, ComputedRef } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  name: 'PsCalendar',\n  components: {\n    DateTable,\n    PsButton,\n    PsButtonGroup,\n  },\n  props: {\n    modelValue: {\n      type: Date,\n    },\n    range: {\n      type: Array as PropType<Array<Date>>,\n      validator: (range: Date): boolean => {\n        if (Array.isArray(range)) {\n          return (\n            range.length === 2 && range.every((item) => item instanceof Date)\n          )\n        }\n        return false\n      },\n    },\n  },\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const selectedDay = ref(null)\n    const now = dayjs().locale(lang.value)\n\n    const curMonthDatePrefix = computed(() => {\n      return dayjs(date.value).locale(lang.value).format('YYYY-MM')\n    })\n\n    const i18nDate = computed(() => {\n      const pickedMonth = `el.datepicker.month${date.value.format('M')}`\n      return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`\n    })\n\n    const realSelectedDay = computed({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val: Dayjs) {\n        selectedDay.value = val\n        const result = val.toDate()\n\n        ctx.emit('input', result)\n        ctx.emit('update:modelValue', result)\n      },\n    })\n\n    const date: ComputedRef<Dayjs> = computed(() => {\n      if (!props.modelValue) {\n        if (realSelectedDay.value) {\n          return realSelectedDay.value\n        } else if (validatedRange.value.length) {\n          return validatedRange.value[0][0]\n        }\n        return now\n      } else {\n        return dayjs(props.modelValue).locale(lang.value)\n      }\n    })\n\n    // https://github.com/element-plus/element-plus/issues/3155\n    // Calculate the validate date range according to the start and end dates\n    const calculateValidatedDateRange = (\n      startDayjs: dayjs.Dayjs,\n      endDayjs: dayjs.Dayjs,\n    ) => {\n      const firstDay = startDayjs.startOf('week')\n      const lastDay = endDayjs.endOf('week')\n      const firstMonth = firstDay.get('month')\n      const lastMonth = lastDay.get('month')\n\n      // Current mouth\n      if (firstMonth === lastMonth) {\n        return [[firstDay, lastDay]]\n      }\n      // Two adjacent months\n      else if (firstMonth + 1 === lastMonth) {\n        const firstMonthLastDay = firstDay.endOf('month')\n        const lastMonthFirstDay = lastDay.startOf('month')\n\n        // Whether the last day of the first month and the first day of the last month is in the same week\n        const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')\n        const lastMonthStartDay = isSameWeek\n          ? lastMonthFirstDay.add(1, 'week')\n          : lastMonthFirstDay\n\n        return [\n          [firstDay, firstMonthLastDay],\n          [lastMonthStartDay.startOf('week'), lastDay],\n        ]\n      }\n      // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)\n      else if (firstMonth + 2 === lastMonth) {\n        const firstMonthLastDay = firstDay.endOf('month')\n        const secondMonthFirstDay = firstDay.add(1, 'month').startOf('month')\n\n        // Whether the last day of the first month and the second month is in the same week\n        const secondMonthStartDay = firstMonthLastDay.isSame(\n          secondMonthFirstDay,\n          'week',\n        )\n          ? secondMonthFirstDay.add(1, 'week')\n          : secondMonthFirstDay\n\n        const secondMonthLastDay = secondMonthStartDay.endOf('month')\n        const lastMonthFirstDay = lastDay.startOf('month')\n\n        // Whether the last day of the second month and the last day of the last month is in the same week\n        const lastMonthStartDay = secondMonthLastDay.isSame(\n          lastMonthFirstDay,\n          'week',\n        )\n          ? lastMonthFirstDay.add(1, 'week')\n          : lastMonthFirstDay\n\n        return [\n          [firstDay, firstMonthLastDay],\n          [secondMonthStartDay.startOf('week'), secondMonthLastDay],\n          [lastMonthStartDay.startOf('week'), lastDay],\n        ]\n      }\n      // Other cases\n      else {\n        debugWarn(\n          'PsCalendar',\n          'start time and end time interval must not exceed two months',\n        )\n        return []\n      }\n    }\n\n    // if range is valid, we get a two-digit array\n    const validatedRange = computed(() => {\n      if (!props.range) return []\n      const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value))\n      const [startDayjs, endDayjs] = rangeArrDayjs\n      if (startDayjs.isAfter(endDayjs)) {\n        debugWarn('PsCalendar', 'end time should be greater than start time')\n        return []\n      }\n      if (startDayjs.isSame(endDayjs, 'month')) {\n        // same month\n        return calculateValidatedDateRange(startDayjs, endDayjs)\n      } else {\n        // two months\n        if (startDayjs.add(1, 'month').month() !== endDayjs.month()) {\n          debugWarn(\n            'PsCalendar',\n            'start time and end time interval must not exceed two months',\n          )\n          return []\n        }\n        return calculateValidatedDateRange(startDayjs, endDayjs)\n      }\n    })\n\n    return {\n      selectedDay,\n      curMonthDatePrefix,\n      i18nDate,\n      realSelectedDay,\n      date,\n      validatedRange,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","DateTable","PsButton","PsButtonGroup","useLocaleInject","ref","dayjs","computed"],"mappings":"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"}

package/lib/packages/components/calendar/src/index.vue_vue&type=template&id=819aa44a&lang.js

@@ -0,0 +1,91 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = { class: "el-calendar" };
+const _hoisted_2 = { class: "el-calendar__header" };
+const _hoisted_3 = { class: "el-calendar__title" };
+const _hoisted_4 = {
+  key: 0,
+  class: "el-calendar__button-group"
+};
+const _hoisted_5 = {
+  key: 0,
+  class: "el-calendar__body"
+};
+const _hoisted_6 = {
+  key: 1,
+  class: "el-calendar__body"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ps_button = vue.resolveComponent("ps-button");
+  const _component_ps_button_group = vue.resolveComponent("ps-button-group");
+  const _component_date_table = vue.resolveComponent("date-table");
+  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+    vue.createElementVNode("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "header", { date: _ctx.i18nDate }, () => [
+        vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(_ctx.i18nDate), 1),
+        _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.createVNode(_component_ps_button_group, null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_ps_button, { size: "mini" }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.prevMonth")), 1)
+                ]),
+                _: 1
+              }),
+              vue.createVNode(_component_ps_button, { size: "mini" }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.today")), 1)
+                ]),
+                _: 1
+              }),
+              vue.createVNode(_component_ps_button, { size: "mini" }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.nextMonth")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ])) : vue.createCommentVNode("v-if", true)
+      ])
+    ]),
+    _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+      vue.createVNode(_component_date_table, {
+        date: _ctx.date,
+        "selected-day": _ctx.realSelectedDay
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.$slots.dateCell ? {
+          name: "dateCell",
+          fn: vue.withCtx((data) => [
+            vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.guardReactiveProps(data)))
+          ])
+        } : void 0
+      ]), 1032, ["date", "selected-day"])
+    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.validatedRange, (range_, index) => {
+        return vue.openBlock(), vue.createBlock(_component_date_table, {
+          key: index,
+          date: range_[0],
+          "selected-day": _ctx.realSelectedDay,
+          range: range_,
+          "hide-header": index !== 0
+        }, vue.createSlots({ _: 2 }, [
+          _ctx.$slots.dateCell ? {
+            name: "dateCell",
+            fn: vue.withCtx((data) => [
+              vue.renderSlot(_ctx.$slots, "dateCell", vue.normalizeProps(vue.guardReactiveProps(data)))
+            ])
+          } : void 0
+        ]), 1032, ["date", "selected-day", "range", "hide-header"]);
+      }), 128))
+    ]))
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=index.vue_vue&type=template&id=819aa44a&lang.js.map

package/lib/packages/components/calendar/src/index.vue_vue&type=template&id=819aa44a&lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue_vue&type=template&id=819aa44a&lang.js","sources":["../../../../../../../packages/components/calendar/src/index.vue?vue&type=template&id=819aa44a&lang.js"],"sourcesContent":["<template>\n  <div class=\"el-calendar\">\n    <div class=\"el-calendar__header\">\n      <slot name=\"header\" :date=\"i18nDate\">\n        <div class=\"el-calendar__title\">{{ i18nDate }}</div>\n        <div\n          v-if=\"validatedRange.length === 0\"\n          class=\"el-calendar__button-group\"\n        >\n          <ps-button-group>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.prevMonth\") }}\n            </ps-button>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.today\") }}\n            </ps-button>\n            <ps-button size=\"mini\">\n              {{ t(\"el.datepicker.nextMonth\") }}\n            </ps-button>\n          </ps-button-group>\n        </div>\n      </slot>\n    </div>\n    <div v-if=\"validatedRange.length === 0\" class=\"el-calendar__body\">\n      <date-table :date=\"date\" :selected-day=\"realSelectedDay\">\n        <template v-if=\"$slots.dateCell\" #dateCell=\"data\">\n          <slot name=\"dateCell\" v-bind=\"data\"></slot>\n        </template>\n      </date-table>\n    </div>\n    <div v-else class=\"el-calendar__body\">\n      <date-table\n        v-for=\"(range_, index) in validatedRange\"\n        :key=\"index\"\n        :date=\"range_[0]\"\n        :selected-day=\"realSelectedDay\"\n        :range=\"range_\"\n        :hide-header=\"index !== 0\"\n      >\n        <template v-if=\"$slots.dateCell\" #dateCell=\"data\">\n          <slot name=\"dateCell\" v-bind=\"data\"></slot>\n        </template>\n      </date-table>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, computed, defineComponent } from 'vue'\nimport dayjs from 'dayjs'\n\nimport { PsButton, PsButtonGroup } from '@element-ps/components'\nimport { useLocaleInject } from '@element-ps/hooks'\nimport { debugWarn } from '@element-ps/utils/error'\nimport DateTable from './date-table.vue'\nimport type { PropType, ComputedRef } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\n\nexport default defineComponent({\n  name: 'PsCalendar',\n  components: {\n    DateTable,\n    PsButton,\n    PsButtonGroup,\n  },\n  props: {\n    modelValue: {\n      type: Date,\n    },\n    range: {\n      type: Array as PropType<Array<Date>>,\n      validator: (range: Date): boolean => {\n        if (Array.isArray(range)) {\n          return (\n            range.length === 2 && range.every((item) => item instanceof Date)\n          )\n        }\n        return false\n      },\n    },\n  },\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const selectedDay = ref(null)\n    const now = dayjs().locale(lang.value)\n\n    const curMonthDatePrefix = computed(() => {\n      return dayjs(date.value).locale(lang.value).format('YYYY-MM')\n    })\n\n    const i18nDate = computed(() => {\n      const pickedMonth = `el.datepicker.month${date.value.format('M')}`\n      return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`\n    })\n\n    const realSelectedDay = computed({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val: Dayjs) {\n        selectedDay.value = val\n        const result = val.toDate()\n\n        ctx.emit('input', result)\n        ctx.emit('update:modelValue', result)\n      },\n    })\n\n    const date: ComputedRef<Dayjs> = computed(() => {\n      if (!props.modelValue) {\n        if (realSelectedDay.value) {\n          return realSelectedDay.value\n        } else if (validatedRange.value.length) {\n          return validatedRange.value[0][0]\n        }\n        return now\n      } else {\n        return dayjs(props.modelValue).locale(lang.value)\n      }\n    })\n\n    // https://github.com/element-plus/element-plus/issues/3155\n    // Calculate the validate date range according to the start and end dates\n    const calculateValidatedDateRange = (\n      startDayjs: dayjs.Dayjs,\n      endDayjs: dayjs.Dayjs,\n    ) => {\n      const firstDay = startDayjs.startOf('week')\n      const lastDay = endDayjs.endOf('week')\n      const firstMonth = firstDay.get('month')\n      const lastMonth = lastDay.get('month')\n\n      // Current mouth\n      if (firstMonth === lastMonth) {\n        return [[firstDay, lastDay]]\n      }\n      // Two adjacent months\n      else if (firstMonth + 1 === lastMonth) {\n        const firstMonthLastDay = firstDay.endOf('month')\n        const lastMonthFirstDay = lastDay.startOf('month')\n\n        // Whether the last day of the first month and the first day of the last month is in the same week\n        const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')\n        const lastMonthStartDay = isSameWeek\n          ? lastMonthFirstDay.add(1, 'week')\n          : lastMonthFirstDay\n\n        return [\n          [firstDay, firstMonthLastDay],\n          [lastMonthStartDay.startOf('week'), lastDay],\n        ]\n      }\n      // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)\n      else if (firstMonth + 2 === lastMonth) {\n        const firstMonthLastDay = firstDay.endOf('month')\n        const secondMonthFirstDay = firstDay.add(1, 'month').startOf('month')\n\n        // Whether the last day of the first month and the second month is in the same week\n        const secondMonthStartDay = firstMonthLastDay.isSame(\n          secondMonthFirstDay,\n          'week',\n        )\n          ? secondMonthFirstDay.add(1, 'week')\n          : secondMonthFirstDay\n\n        const secondMonthLastDay = secondMonthStartDay.endOf('month')\n        const lastMonthFirstDay = lastDay.startOf('month')\n\n        // Whether the last day of the second month and the last day of the last month is in the same week\n        const lastMonthStartDay = secondMonthLastDay.isSame(\n          lastMonthFirstDay,\n          'week',\n        )\n          ? lastMonthFirstDay.add(1, 'week')\n          : lastMonthFirstDay\n\n        return [\n          [firstDay, firstMonthLastDay],\n          [secondMonthStartDay.startOf('week'), secondMonthLastDay],\n          [lastMonthStartDay.startOf('week'), lastDay],\n        ]\n      }\n      // Other cases\n      else {\n        debugWarn(\n          'PsCalendar',\n          'start time and end time interval must not exceed two months',\n        )\n        return []\n      }\n    }\n\n    // if range is valid, we get a two-digit array\n    const validatedRange = computed(() => {\n      if (!props.range) return []\n      const rangeArrDayjs = props.range.map((_) => dayjs(_).locale(lang.value))\n      const [startDayjs, endDayjs] = rangeArrDayjs\n      if (startDayjs.isAfter(endDayjs)) {\n        debugWarn('PsCalendar', 'end time should be greater than start time')\n        return []\n      }\n      if (startDayjs.isSame(endDayjs, 'month')) {\n        // same month\n        return calculateValidatedDateRange(startDayjs, endDayjs)\n      } else {\n        // two months\n        if (startDayjs.add(1, 'month').month() !== endDayjs.month()) {\n          debugWarn(\n            'PsCalendar',\n            'start time and end time interval must not exceed two months',\n          )\n          return []\n        }\n        return calculateValidatedDateRange(startDayjs, endDayjs)\n      }\n    })\n\n    return {\n      selectedDay,\n      curMonthDatePrefix,\n      i18nDate,\n      realSelectedDay,\n      date,\n      validatedRange,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_createVNode","_createBlock"],"mappings":";;;;;;qBACO,OAAM;qBACJ,OAAM;qBAEF,OAAM;;;EAGT,OAAM;AAAA;;;EAgB4B,OAAM;AAAA;;;EAOlC,OAAM;AAAA;;;;;0BA7BpBA,8BAAA;IACEC,8BAAA;MACEC,wCAAqB,MAAM,iBAA3B;QACED,8BAAA,gCAAmC;QAE3B,oBAAe,iCADvBD,8BAAA;UAIEG;iCACE;cAAAA,wCAAW,MAAK;qCACd;0DAAG;;;;cAELA,wCAAW,MAAK;qCACd;0DAAG;;;;cAELA,wCAAW,MAAK;qCACd;0DAAG;;;;;;;;;;IAMF,oBAAe,iCAA1BH,8BAAA;MACEG;QAAa,MAAM;QAAO,gBAAc;;QACtB,YAAO;gBAAW;AAAA,0BAChC,CAD0C;YAC1CD,kFAA8B;AAAA;AAAA;;4BAIpCF,8BAAA;4BACEA,0DAC4B,sBAAlB,QAAQ;gCADlBI;UAEG,KAAK;AAAA,UACL,MAAM;UACN,gBAAc;UACd,OAAO;AAAA,UACP,eAAa;;UAEE,YAAO;kBAAW;AAAA,4BAChC,CAD0C;cAC1CF,kFAA8B;AAAA;AAAA;;;;;;;;;"}