element-plus 1.2.0-beta.3 → 1.2.0-beta.4

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

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var dayjs = require('dayjs');
+var index = require('../../button/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$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);
+
+const { ButtonGroup: ElButtonGroup } = index.ElButton;
+var script = vue.defineComponent({
+  name: "ElCalendar",
+  components: {
+    DateTable: dateTable_vue_vue_type_script_lang["default"],
+    ElButton: index.ElButton,
+    ElButtonGroup
+  },
+  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;
+      }
+    }
+  },
+  emits: ["input", "update:modelValue"],
+  setup(props, ctx) {
+    const { t, lang } = index$1.useLocaleInject();
+    const selectedDay = vue.ref(null);
+    const now = dayjs__default["default"]().locale(lang.value);
+    const prevMonthDayjs = vue.computed(() => {
+      return date.value.subtract(1, "month");
+    });
+    const curMonthDatePrefix = vue.computed(() => {
+      return dayjs__default["default"](date.value).locale(lang.value).format("YYYY-MM");
+    });
+    const nextMonthDayjs = vue.computed(() => {
+      return date.value.add(1, "month");
+    });
+    const prevYearDayjs = vue.computed(() => {
+      return date.value.subtract(1, "year");
+    });
+    const nextYearDayjs = vue.computed(() => {
+      return date.value.add(1, "year");
+    });
+    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("ElCalendar", "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("ElCalendar", "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("ElCalendar", "start time and end time interval must not exceed two months");
+          return [];
+        }
+        return calculateValidatedDateRange(startDayjs, endDayjs);
+      }
+    });
+    const pickDay = (day) => {
+      realSelectedDay.value = day;
+    };
+    const selectDate = (type) => {
+      let day;
+      if (type === "prev-month") {
+        day = prevMonthDayjs.value;
+      } else if (type === "next-month") {
+        day = nextMonthDayjs.value;
+      } else if (type === "prev-year") {
+        day = prevYearDayjs.value;
+      } else if (type === "next-year") {
+        day = nextYearDayjs.value;
+      } else {
+        day = now;
+      }
+      if (day.isSame(date.value, "day"))
+        return;
+      pickDay(day);
+    };
+    return {
+      selectedDay,
+      curMonthDatePrefix,
+      i18nDate,
+      realSelectedDay,
+      date,
+      validatedRange,
+      pickDay,
+      selectDate,
+      t
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=index.vue_vue_type_script_lang.js.map

package/lib/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          <el-button-group>\n            <el-button size=\"mini\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"mini\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"mini\" @click=\"selectDate('next-month')\">\n              {{ t('el.datepicker.nextMonth') }}\n            </el-button>\n          </el-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\" @pick=\"pickDay\">\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        @pick=\"pickDay\"\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 ElButton from '@element-plus/components/button'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport type { PropType, ComputedRef } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\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\n  emits: ['input', 'update:modelValue'],\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const selectedDay = ref(null)\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month')\n    })\n    const curMonthDatePrefix = computed(() => {\n      return dayjs(date.value).locale(lang.value).format('YYYY-MM')\n    })\n\n    const nextMonthDayjs = computed(() => {\n      return date.value.add(1, 'month')\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year')\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year')\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          'ElCalendar',\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('ElCalendar', '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            'ElCalendar',\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    const pickDay = (day: Dayjs) => {\n      realSelectedDay.value = day\n    }\n\n    const selectDate = (type: DateType) => {\n      let day: Dayjs\n      if (type === 'prev-month') {\n        day = prevMonthDayjs.value\n      } else if (type === 'next-month') {\n        day = nextMonthDayjs.value\n      } else if (type === 'prev-year') {\n        day = prevYearDayjs.value\n      } else if (type === 'next-year') {\n        day = nextYearDayjs.value\n      } else {\n        day = now\n      }\n\n      if (day.isSame(date.value, 'day')) return\n      pickDay(day)\n    }\n\n    return {\n      selectedDay,\n      curMonthDatePrefix,\n      i18nDate,\n      realSelectedDay,\n      date,\n      validatedRange,\n      pickDay,\n      selectDate,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ElButton","defineComponent","DateTable","useLocaleInject","ref","dayjs","computed"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+'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_el_button = vue.resolveComponent("el-button");
+  const _component_el_button_group = vue.resolveComponent("el-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_el_button_group, null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_button, {
+                size: "mini",
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.selectDate("prev-month"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.prevMonth")), 1)
+                ]),
+                _: 1
+              }),
+              vue.createVNode(_component_el_button, {
+                size: "mini",
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.selectDate("today"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(_ctx.t("el.datepicker.today")), 1)
+                ]),
+                _: 1
+              }),
+              vue.createVNode(_component_el_button, {
+                size: "mini",
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.selectDate("next-month"))
+              }, {
+                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,
+        onPick: _ctx.pickDay
+      }, 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", "onPick"])
+    ])) : (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,
+          onPick: _ctx.pickDay
+        }, 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", "onPick"]);
+      }), 128))
+    ]))
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=index.vue_vue_type_template_id_819aa44a_lang.js.map

package/lib/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          <el-button-group>\n            <el-button size=\"mini\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"mini\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"mini\" @click=\"selectDate('next-month')\">\n              {{ t('el.datepicker.nextMonth') }}\n            </el-button>\n          </el-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\" @pick=\"pickDay\">\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        @pick=\"pickDay\"\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 ElButton from '@element-plus/components/button'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport type { PropType, ComputedRef } from 'vue'\n\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nconst { ButtonGroup: ElButtonGroup } = ElButton\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\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\n  emits: ['input', 'update:modelValue'],\n  setup(props, ctx) {\n    const { t, lang } = useLocaleInject()\n    const selectedDay = ref(null)\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month')\n    })\n    const curMonthDatePrefix = computed(() => {\n      return dayjs(date.value).locale(lang.value).format('YYYY-MM')\n    })\n\n    const nextMonthDayjs = computed(() => {\n      return date.value.add(1, 'month')\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year')\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year')\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          'ElCalendar',\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('ElCalendar', '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            'ElCalendar',\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    const pickDay = (day: Dayjs) => {\n      realSelectedDay.value = day\n    }\n\n    const selectDate = (type: DateType) => {\n      let day: Dayjs\n      if (type === 'prev-month') {\n        day = prevMonthDayjs.value\n      } else if (type === 'next-month') {\n        day = nextMonthDayjs.value\n      } else if (type === 'prev-year') {\n        day = prevYearDayjs.value\n      } else if (type === 'next-year') {\n        day = nextYearDayjs.value\n      } else {\n        day = now\n      }\n\n      if (day.isSame(date.value, 'day')) return\n      pickDay(day)\n    }\n\n    return {\n      selectedDay,\n      curMonthDatePrefix,\n      i18nDate,\n      realSelectedDay,\n      date,\n      validatedRange,\n      pickDay,\n      selectDate,\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;gBAAW,MAAK;AAAA,gBAAQ,+CAAO;;qCAC7B;0DAAG;;;;cAELA;gBAAW,MAAK;AAAA,gBAAQ,+CAAO;;qCAC7B;0DAAG;;;;cAELA;gBAAW,MAAK;AAAA,gBAAQ,+CAAO;;qCAC7B;0DAAG;;;;;;;;;;IAMF,oBAAe,iCAA1BH,8BAAA;MACEG;QAAa,MAAM;QAAO,gBAAc;QAAkB,QAAM;;QAC9C,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;UACb,QAAM;;UAES,YAAO;kBAAW;AAAA,4BAChC,CAD0C;cAC1CF,kFAA8B;AAAA;AAAA;;;;;;;;;"}

package/lib/components/card/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var withInstall = require('../../utils/with-install.js');
 require('./src/card2.js');
 var card = require('./src/card.js');
-var card_vue_vue_type_script_lang = require('./src/card.vue_vue&type=script&lang.js');
+var card_vue_vue_type_script_lang = require('./src/card.vue_vue_type_script_lang.js');
 
 const ElCard = withInstall.withInstall(card_vue_vue_type_script_lang["default"]);
 

package/lib/components/card/src/card.vue_vue_type_script_lang.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var card = require('./card.js');
+
+var script = vue.defineComponent({
+  name: "ElCard",
+  props: card.cardProps
+});
+
+exports["default"] = script;
+//# sourceMappingURL=card.vue_vue_type_script_lang.js.map

package/lib/components/card/src/card.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/card/src/card.vue"],"sourcesContent":["<template>\n  <div\n    class=\"el-card\"\n    :class=\"shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'\"\n  >\n    <div v-if=\"$slots.header || header\" class=\"el-card__header\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div class=\"el-card__body\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n})\n</script>\n"],"names":["defineComponent","cardProps"],"mappings":";;;;;;;AAiBA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,OAAOC;AAAA;;;;"}

package/lib/components/card/src/card.vue_vue_type_template_id_7a6bdf05_lang.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = {
+  key: 0,
+  class: "el-card__header"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-card", _ctx.shadow ? "is-" + _ctx.shadow + "-shadow" : "is-always-shadow"])
+  }, [
+    _ctx.$slots.header || _ctx.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.renderSlot(_ctx.$slots, "header", {}, () => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.header), 1)
+      ])
+    ])) : vue.createCommentVNode("v-if", true),
+    vue.createElementVNode("div", {
+      class: "el-card__body",
+      style: vue.normalizeStyle(_ctx.bodyStyle)
+    }, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 4)
+  ], 2);
+}
+
+exports.render = render;
+//# sourceMappingURL=card.vue_vue_type_template_id_7a6bdf05_lang.js.map

package/lib/components/card/src/card.vue_vue_type_template_id_7a6bdf05_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.vue_vue_type_template_id_7a6bdf05_lang.js","sources":["../../../../../../packages/components/card/src/card.vue?vue&type=template&id=7a6bdf05&lang.js"],"sourcesContent":["<template>\n  <div\n    class=\"el-card\"\n    :class=\"shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'\"\n  >\n    <div v-if=\"$slots.header || header\" class=\"el-card__header\">\n      <slot name=\"header\">{{ header }}</slot>\n    </div>\n    <div class=\"el-card__body\" :style=\"bodyStyle\">\n      <slot></slot>\n    </div>\n  </div>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { cardProps } from './card'\n\nexport default defineComponent({\n  name: 'ElCard',\n  props: cardProps,\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode"],"mappings":";;;;;;;;EAKwC,OAAM;AAAA;;0BAJ5CA;IACE,2BAAM,WACE,sBAAiB;;IAEd,YAAO,UAAU,gCAA5BA,8BAAA;MACEC,0CAAA;gDAAuB;;;IAEzBC;MAAK,OAAM;AAAA,MAAiB,0BAAO;;MACjCD;;;;;;;"}

package/lib/components/card/src/card2.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var card_vue_vue_type_script_lang = require('./card.vue_vue&type=script&lang.js');
-var card_vue_vue_type_template_id_7a6bdf05_lang = require('./card.vue_vue&type=template&id=7a6bdf05&lang.js');
+var card_vue_vue_type_script_lang = require('./card.vue_vue_type_script_lang.js');
+var card_vue_vue_type_template_id_7a6bdf05_lang = require('./card.vue_vue_type_template_id_7a6bdf05_lang.js');
 
 card_vue_vue_type_script_lang["default"].render = card_vue_vue_type_template_id_7a6bdf05_lang.render;
 card_vue_vue_type_script_lang["default"].__file = "packages/components/card/src/card.vue";

package/lib/components/carousel/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 export declare const ElCarousel: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
     initialIndex: {
         type: NumberConstructor;
@@ -53,13 +52,7 @@ export declare const ElCarousel: import("../../utils/types").SFCWithInstall<impo
     data: {
         activeIndex: number;
         containerWidth: number;
-        timer: {
-            hasRef: () => boolean;
-            refresh: () => NodeJS.Timer;
-            [Symbol.toPrimitive]: () => number;
-            ref: () => NodeJS.Timer;
-            unref: () => NodeJS.Timer;
-        } | null;
+        timer: number | null;
         hover: boolean;
     };
     props: import("./src/carousel").ICarouselProps;

package/lib/components/carousel/index.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var withInstall = require('../../utils/with-install.js');
 require('./src/main.js');
 require('./src/item.js');
-var main_vue_vue_type_script_lang = require('./src/main.vue_vue&type=script&lang.js');
-var item_vue_vue_type_script_lang = require('./src/item.vue_vue&type=script&lang.js');
+var main_vue_vue_type_script_lang = require('./src/main.vue_vue_type_script_lang.js');
+var item_vue_vue_type_script_lang = require('./src/item.vue_vue_type_script_lang.js');
 
 const ElCarousel = withInstall.withInstall(main_vue_vue_type_script_lang["default"], {
   CarouselItem: item_vue_vue_type_script_lang["default"]

package/lib/components/carousel/src/item.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var item_vue_vue_type_script_lang = require('./item.vue_vue&type=script&lang.js');
-var item_vue_vue_type_template_id_3d2e4fb8_lang = require('./item.vue_vue&type=template&id=3d2e4fb8&lang.js');
+var item_vue_vue_type_script_lang = require('./item.vue_vue_type_script_lang.js');
+var item_vue_vue_type_template_id_3d2e4fb8_lang = require('./item.vue_vue_type_template_id_3d2e4fb8_lang.js');
 
 item_vue_vue_type_script_lang["default"].render = item_vue_vue_type_template_id_3d2e4fb8_lang.render;
 item_vue_vue_type_script_lang["default"].__file = "packages/components/carousel/src/item.vue";

package/lib/components/carousel/src/item.vue_vue_type_script_lang.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var util = require('../../../utils/util.js');
+var error = require('../../../utils/error.js');
+
+const CARD_SCALE = 0.83;
+var script = vue.defineComponent({
+  name: "ElCarouselItem",
+  props: {
+    name: { type: String, default: "" },
+    label: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  setup(props) {
+    const instance = vue.getCurrentInstance();
+    instance.uid;
+    const data = vue.reactive({
+      hover: false,
+      translate: 0,
+      scale: 1,
+      active: false,
+      ready: false,
+      inStage: false,
+      animating: false
+    });
+    const injectCarouselScope = vue.inject("injectCarouselScope");
+    const parentDirection = vue.computed(() => {
+      return injectCarouselScope.direction;
+    });
+    const itemStyle = vue.computed(() => {
+      const translateType = parentDirection.value === "vertical" ? "translateY" : "translateX";
+      const value = `${translateType}(${data.translate}px) scale(${data.scale})`;
+      const style = {
+        transform: value
+      };
+      return util.autoprefixer(style);
+    });
+    function processIndex(index, activeIndex, length) {
+      if (activeIndex === 0 && index === length - 1) {
+        return -1;
+      } else if (activeIndex === length - 1 && index === 0) {
+        return length;
+      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
+        return length + 1;
+      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
+        return -2;
+      }
+      return index;
+    }
+    function calcCardTranslate(index, activeIndex) {
+      var _a;
+      const parentWidth = ((_a = injectCarouselScope.root.value) == null ? void 0 : _a.offsetWidth) || 0;
+      if (data.inStage) {
+        return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
+      } else if (index < activeIndex) {
+        return -(1 + CARD_SCALE) * parentWidth / 4;
+      } else {
+        return (3 + CARD_SCALE) * parentWidth / 4;
+      }
+    }
+    function calcTranslate(index, activeIndex, isVertical) {
+      var _a, _b;
+      const distance = (isVertical ? (_a = injectCarouselScope.root.value) == null ? void 0 : _a.offsetHeight : (_b = injectCarouselScope.root.value) == null ? void 0 : _b.offsetWidth) || 0;
+      return distance * (index - activeIndex);
+    }
+    const translateItem = (index, activeIndex, oldIndex) => {
+      const parentType = injectCarouselScope.type;
+      const length = injectCarouselScope.items.value.length;
+      if (parentType !== "card" && oldIndex !== void 0) {
+        data.animating = index === activeIndex || index === oldIndex;
+      }
+      if (index !== activeIndex && length > 2 && injectCarouselScope.loop) {
+        index = processIndex(index, activeIndex, length);
+      }
+      if (parentType === "card") {
+        if (parentDirection.value === "vertical") {
+          error.debugWarn("Carousel", "vertical direction is not supported in card mode");
+        }
+        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
+        data.active = index === activeIndex;
+        data.translate = calcCardTranslate(index, activeIndex);
+        data.scale = data.active ? 1 : CARD_SCALE;
+      } else {
+        data.active = index === activeIndex;
+        const isVertical = parentDirection.value === "vertical";
+        data.translate = calcTranslate(index, activeIndex, isVertical);
+      }
+      data.ready = true;
+    };
+    function handleItemClick() {
+      if (injectCarouselScope && injectCarouselScope.type === "card") {
+        const index = injectCarouselScope.items.value.map((d) => d.uid).indexOf(instance.uid);
+        injectCarouselScope.setActiveItem(index);
+      }
+    }
+    vue.onMounted(() => {
+      if (injectCarouselScope.addItem) {
+        injectCarouselScope.addItem({
+          uid: instance.uid,
+          ...props,
+          ...vue.toRefs(data),
+          translateItem
+        });
+      }
+    });
+    vue.onUnmounted(() => {
+      if (injectCarouselScope.removeItem) {
+        injectCarouselScope.removeItem(instance.uid);
+      }
+    });
+    return {
+      data,
+      itemStyle,
+      translateItem,
+      type: injectCarouselScope.type,
+      handleItemClick
+    };
+  }
+});
+
+exports["default"] = script;
+//# sourceMappingURL=item.vue_vue_type_script_lang.js.map

package/lib/components/carousel/src/item.vue_vue_type_script_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/carousel/src/item.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"data.ready\"\n    class=\"el-carousel__item\"\n    :class=\"{\n      'is-active': data.active,\n      'el-carousel__item--card': type === 'card',\n      'is-in-stage': data.inStage,\n      'is-hover': data.hover,\n      'is-animating': data.animating,\n    }\"\n    :style=\"itemStyle\"\n    @click=\"handleItemClick\"\n  >\n    <div\n      v-if=\"type === 'card'\"\n      v-show=\"!data.active\"\n      class=\"el-carousel__mask\"\n    ></div>\n    <slot></slot>\n  </div>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  reactive,\n  onMounted,\n  inject,\n  computed,\n  toRefs,\n  getCurrentInstance,\n  onUnmounted,\n} from 'vue'\nimport { autoprefixer } from '@element-plus/utils/util'\nimport { debugWarn } from '@element-plus/utils/error'\nimport type { CSSProperties } from 'vue'\nimport type { InjectCarouselScope, ICarouselItemProps } from './carousel'\n\nconst CARD_SCALE = 0.83\nexport default defineComponent({\n  name: 'ElCarouselItem',\n  props: {\n    name: { type: String, default: '' },\n    label: {\n      type: [String, Number],\n      default: '',\n    },\n  },\n  setup(props: ICarouselItemProps) {\n    // instance\n    const instance = getCurrentInstance()\n    instance.uid\n\n    // data\n    const data = reactive({\n      hover: false,\n      translate: 0,\n      scale: 1,\n      active: false,\n      ready: false,\n      inStage: false,\n      animating: false,\n    })\n\n    // inject\n    const injectCarouselScope: InjectCarouselScope = inject(\n      'injectCarouselScope'\n    )\n\n    // computed\n    const parentDirection = computed(() => {\n      return injectCarouselScope.direction\n    })\n\n    const itemStyle = computed(() => {\n      const translateType =\n        parentDirection.value === 'vertical' ? 'translateY' : 'translateX'\n      const value = `${translateType}(${data.translate}px) scale(${data.scale})`\n      const style: CSSProperties = {\n        transform: value,\n      }\n      return autoprefixer(style)\n    })\n\n    // methods\n\n    function processIndex(index, activeIndex, length) {\n      if (activeIndex === 0 && index === length - 1) {\n        return -1\n      } else if (activeIndex === length - 1 && index === 0) {\n        return length\n      } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {\n        return length + 1\n      } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {\n        return -2\n      }\n      return index\n    }\n\n    function calcCardTranslate(index, activeIndex) {\n      const parentWidth = injectCarouselScope.root.value?.offsetWidth || 0\n      if (data.inStage) {\n        return (\n          (parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1)) / 4\n        )\n      } else if (index < activeIndex) {\n        return (-(1 + CARD_SCALE) * parentWidth) / 4\n      } else {\n        return ((3 + CARD_SCALE) * parentWidth) / 4\n      }\n    }\n\n    function calcTranslate(index, activeIndex, isVertical) {\n      const distance =\n        (isVertical\n          ? injectCarouselScope.root.value?.offsetHeight\n          : injectCarouselScope.root.value?.offsetWidth) || 0\n      return distance * (index - activeIndex)\n    }\n\n    const translateItem = (\n      index: number,\n      activeIndex: number,\n      oldIndex: number\n    ) => {\n      const parentType = injectCarouselScope.type\n      const length = injectCarouselScope.items.value.length\n      if (parentType !== 'card' && oldIndex !== undefined) {\n        data.animating = index === activeIndex || index === oldIndex\n      }\n      if (index !== activeIndex && length > 2 && injectCarouselScope.loop) {\n        index = processIndex(index, activeIndex, length)\n      }\n      if (parentType === 'card') {\n        if (parentDirection.value === 'vertical') {\n          debugWarn(\n            'Carousel',\n            'vertical direction is not supported in card mode'\n          )\n        }\n        data.inStage = Math.round(Math.abs(index - activeIndex)) <= 1\n        data.active = index === activeIndex\n        data.translate = calcCardTranslate(index, activeIndex)\n        data.scale = data.active ? 1 : CARD_SCALE\n      } else {\n        data.active = index === activeIndex\n        const isVertical = parentDirection.value === 'vertical'\n        data.translate = calcTranslate(index, activeIndex, isVertical)\n      }\n      data.ready = true\n    }\n\n    function handleItemClick() {\n      if (injectCarouselScope && injectCarouselScope.type === 'card') {\n        const index = injectCarouselScope.items.value\n          .map((d) => d.uid)\n          .indexOf(instance.uid)\n        injectCarouselScope.setActiveItem(index)\n      }\n    }\n\n    // lifecycle\n    onMounted(() => {\n      if (injectCarouselScope.addItem) {\n        injectCarouselScope.addItem({\n          uid: instance.uid,\n          ...props,\n          ...toRefs(data),\n          translateItem,\n        })\n      }\n    })\n\n    onUnmounted(() => {\n      if (injectCarouselScope.removeItem) {\n        injectCarouselScope.removeItem(instance.uid)\n      }\n    })\n\n    return {\n      data,\n      itemStyle,\n      translateItem,\n      type: injectCarouselScope.type,\n      handleItemClick,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","getCurrentInstance","reactive","inject","computed","autoprefixer","toRefs"],"mappings":"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"}

package/lib/components/carousel/src/item.vue_vue_type_template_id_3d2e4fb8_lang.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+
+const _hoisted_1 = {
+  key: 0,
+  class: "el-carousel__mask"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["el-carousel__item", {
+      "is-active": _ctx.data.active,
+      "el-carousel__item--card": _ctx.type === "card",
+      "is-in-stage": _ctx.data.inStage,
+      "is-hover": _ctx.data.hover,
+      "is-animating": _ctx.data.animating
+    }]),
+    style: vue.normalizeStyle(_ctx.itemStyle),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args))
+  }, [
+    _ctx.type === "card" ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_1, null, 512)), [
+      [vue.vShow, !_ctx.data.active]
+    ]) : vue.createCommentVNode("v-if", true),
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 6)), [
+    [vue.vShow, _ctx.data.ready]
+  ]);
+}
+
+exports.render = render;
+//# sourceMappingURL=item.vue_vue_type_template_id_3d2e4fb8_lang.js.map