@element-plus/nightly 0.0.20220119 → 0.0.20220120

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

@@ -1 +1 @@
-{"version":3,"file":"calendar.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/calendar/src/calendar.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=\"small\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"small\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"small\" @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'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport { calendarProps, calendarEmits } from './calendar'\n\nimport type { ComputedRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\n\n  props: calendarProps,\n  emits: calendarEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const selectedDay = ref<Dayjs>()\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month').date(1)\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').date(1)\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year').date(1)\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year').date(1)\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<Dayjs | undefined>({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val) {\n        if (!val) return\n        selectedDay.value = val\n        const result = val.toDate()\n\n        emit('input', result)\n        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,\n      endDayjs: Dayjs\n    ): [Dayjs, Dayjs][] => {\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":["defineComponent","DateTable","calendarProps","calendarEmits","dayjs","computed","debugWarn"],"mappings":";;;;;;;;;;;;;;;;;;AAuDA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE;AACd,eAAIC;;AAEJ;;EAEE,KAAK,EAAEC;EACP,KAAK,EAAEC;EACP,KAAK,CAAC,KAAK;IACT,MAAM;;AAEV,IAAI,MAAM,GAAG,GAAGC,yBAAK,EAAE,CAAC,MAAM,CAAC;IAC3B,MAAM;;KAEL,CAAC,CAAC;IACH,MAAM;MACJ;KACD,CAAC,CAAC;;;KAGF,CAAC,CAAC;IACH,MAAM;;KAEL,CAAC,CAAC;IACH,MAAM,gBAAgBC,YAAQ;MAC5B,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;KAC1B,CAAC,CAAC;;MAED,MAAM,WAAW,IAAI;MACrB,OAAO,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC;KAClC;IACD,MAAM,eAAe,eAAW,CAAC;MAC/B,GAAG;;;QAGD,OAAO,IAAI,CAAC,KAAK;OAClB;;;UAGG,OAAO;QACT,WAAW,CAAC,KAAK,GAAG,GAAG,CAAC;;;QAGxB,IAAI,CAAC,mBAAmB,EAAE,OAAO;OAClC;KACF;;MAEC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;QACrB,IAAI,eAAe,CAAC,KAAK,EAAE;UACzB,OAAO,eAAe,CAAC,KAAK,CAAC;;;;QAI/B;aACK;QACL,OAAOD,yBAAK,CAAC;OACd;MACD,CAAC;;YAEK,QAAQ,GAAG;YACX,OAAO,WAAW,CAAC;;YAEnB,YAAY;UACd,UAAU,KAAK,SAAS,EAAE;;;;QAI5B,MAAM,iBAAiB,UAAU,CAAC,OAAO,CAAC;cACpC,UAAU,GAAG;QACnB,MAAM,iBAAiB;eAChB;UACL,CAAC,QAAQ,EAAE,iBAAiB,CAAC;UAC7B,CAAC,iBAAiB,CAAC,OAAO,CAAC;;aAExB,IAAI;QACT;QACA,yBAAyB,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;;;;QAI5C,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,MAAM,CAAC;QACpD,OAAO;UACL,CAAC,QAAQ,EAAE,iBAAiB;UAC5B,CAAC;UACD,CAAC;SACF,CAAC;OACH,MAAM;QACLE,eAAS,CAAC,YAAY,EAAE;QACxB,OAAO,EAAE,CAAC;OACX;;UAEG;MACJ,IAAI,CAAC,KAAK,CAAC,KAAK;QACd,OAAO,EAAE,CAAC;MACZ;MACA,OAAO,UAAU,EAAE;MACnB,cAAc,CAAC,OAAO,SAAS,CAAC,EAAE;QAChCA,eAAS,CAAC,YAAY,EAAE;QACxB,OAAO,EAAE,CAAC;;oBAEE,CAAC,OAAO,QAAQ,SAAS,CAAC,EAAE;QACxC,OAAO,2BAA2B,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;;YAErD,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;UAC7BA,eAAS,CAAC;;SAEX;eACM;;;;MAIT,eAAe,CAAC,KAAK,GAAG,IAAI;MAC5B;UACI,UAAU,GAAG,CAAC,IAAI;UAClB,IAAI;;QAEN,GAAG,GAAG,cAAc,CAAC,MAAM;iBAClB,IAAI,KAAK,YAAY,EAAE;WAC7B,GAAG,cAAc,CAAC;aAChB;QACL;aACK,IAAI,IAAI,KAAK,WAAW,EAAE;cACzB,aAAa,CAAC;;QAEpB,GAAG,GAAG,GAAG,CAAC;;;QAGV,OAAO;cACD,GAAG,CAAC,CAAC;;WAER;;wBAEa;cACV;;UAEJ;;aAEG;gBACG;;MAEV;;;;;;"}
+{"version":3,"file":"calendar.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/calendar/src/calendar.vue"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('header')\">\n      <slot name=\"header\" :date=\"i18nDate\">\n        <div :class=\"ns.e('title')\">{{ i18nDate }}</div>\n        <div v-if=\"validatedRange.length === 0\" :class=\"ns.e('button-group')\">\n          <el-button-group>\n            <el-button size=\"small\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"small\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"small\" @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=\"ns.e('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=\"ns.e('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'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport { calendarProps, calendarEmits } from './calendar'\n\nimport type { ComputedRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\n\n  props: calendarProps,\n  emits: calendarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('calendar')\n\n    const { t, lang } = useLocale()\n    const selectedDay = ref<Dayjs>()\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month').date(1)\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').date(1)\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year').date(1)\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year').date(1)\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<Dayjs | undefined>({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val) {\n        if (!val) return\n        selectedDay.value = val\n        const result = val.toDate()\n\n        emit('input', result)\n        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,\n      endDayjs: Dayjs\n    ): [Dayjs, Dayjs][] => {\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      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","DateTable","calendarProps","calendarEmits","ref","dayjs","computed","debugWarn"],"mappings":";;;;;;;;;;;;;;;;;;;AAoDA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,UAAU,EAAE;AACd,eAAIC;;AAEJ;;EAEE,KAAK,EAAEC;EACP,KAAK,EAAEC;EACP,KAAK,CAAC,KAAK;IACT,MAAM;;AAEV,IAAI,MAAM,WAAW,GAAGC,OAAG,EAAE,CAAC;IAC1B,MAAM,GAAG,GAAGC;;MAEV;KACD,CAAC,CAAC;IACH,MAAM;MACJ,OAAOA;;;MAGP,OAAO,IAAI,CAAC;KACb,CAAC,CAAC;;MAED,OAAO,IAAI,CAAC,KAAK;KAClB,CAAC,CAAC;;MAED,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE;KAC1B,CAAC,CAAC;IACH,MAAM,QAAQ,GAAGC,YAAQ,CAAC,MAAM;;MAE9B,OAAO,CAAC,EAAE,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE;MACjC,CAAC;IACH;MACE,MAAM;QACJ,KAAK,KAAK,CAAC,UAAU;;;OAGtB;MACD,GAAG,CAAC,GAAG,EAAE;;;QAGP,WAAW,CAAC,QAAQ,GAAG,CAAC;QACxB,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,GAAG;;;OAG7B;MACD,CAAC;IACH;;QAEI,IAAI,eAAe,CAAC,KAAK;UACvB,OAAO,eAAe,CAAC,KAAK,CAAC;SAC9B,MAAM,IAAI,cAAc,MAAM,CAAC,MAAM,EAAE;;;QAGxC,OAAO,GAAG,CAAC;OACZ;QACC,OAAOD,yBAAK,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC;;MAE7C,CAAC;UACG;YACE,QAAQ,GAAG;YACX,OAAO,GAAG,QAAQ;YAClB,aAAa,QAAQ,CAAC;;UAExB,UAAU,KAAK;QACjB,OAAO,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;OAC9B;;;QAGC,MAAM,UAAU,GAAG,iBAAiB,CAAC,OAAO;cACtC;QACN,OAAO;UACL,CAAC,QAAQ,EAAE;UACX,CAAC,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;UACpC;;QAEF;QACA;QACA,yBAAyB,GAAG,iBAAiB,CAAC;;;;QAI9C,OAAO;UACL,CAAC,QAAQ,EAAE,iBAAiB,CAAC;UAC7B,CAAC,mBAAmB,CAAC,OAAO;UAC5B,CAAC;SACF,CAAC;OACH,MAAM;QACLE,eAAS,CAAC,YAAY,EAAE;QACxB,OAAO,EAAE,CAAC;OACX;MACD;;MAEA,IAAI,CAAC,MAAM;eACF,EAAE,CAAC;YACN,aAAa,GAAG,KAAK,CAAC;MAC5B;MACA,IAAI,UAAU;QACZA,eAAS,CAAC,YAAY,EAAE;QACxB,OAAO,EAAE,CAAC;;;QAGV,OAAO,2BAA2B,CAAC,UAAU,EAAE,QAAQ,EAAE;;QAEzD,IAAI,UAAU,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;UAC7BA,eAAS,CAAC,YAAY,EAAE;UACxB,OAAO,EAAE,CAAC;;QAEZ,OAAO;;;;MAIT;MACA;oBACc,GAAG,CAAC,IAAI;UAClB,IAAI;UACJ,IAAI,KAAK,YAAY;;aAElB,IAAI,IAAI,KAAK,cAAc;QAChC,GAAG,GAAG,cAAc,CAAC,KAAK;aACrB,IAAI,IAAI,KAAK;WACf,GAAG;;cAEA,aAAa,CAAC,KAAK,CAAC;aACrB;;;UAGH,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC;;aAE1B,CAAC,GAAG,EAAE;;WAER;;;cAGG;qBACO;;;aAGR;gBACG;;QAER;MACF;;;;;;"}

package/lib/components/calendar/src/calendar.vue_vue_type_template_id_76705c76_lang.js

@@ -4,30 +4,24 @@ 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, [
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.ns.b())
+  }, [
+    vue.createElementVNode("div", {
+      class: vue.normalizeClass(_ctx.ns.e("header"))
+    }, [
       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.createElementVNode("div", {
+          class: vue.normalizeClass(_ctx.ns.e("title"))
+        }, vue.toDisplayString(_ctx.i18nDate), 3),
+        _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(_ctx.ns.e("button-group"))
+        }, [
           vue.createVNode(_component_el_button_group, null, {
             default: vue.withCtx(() => [
               vue.createVNode(_component_el_button, {
@@ -60,10 +54,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ]),
             _: 1
           })
-        ])) : vue.createCommentVNode("v-if", true)
+        ], 2)) : vue.createCommentVNode("v-if", true)
       ])
-    ]),
-    _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+    ], 2),
+    _ctx.validatedRange.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
+      class: vue.normalizeClass(_ctx.ns.e("body"))
+    }, [
       vue.createVNode(_component_date_table, {
         date: _ctx.date,
         "selected-day": _ctx.realSelectedDay,
@@ -76,7 +73,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         } : void 0
       ]), 1032, ["date", "selected-day", "onPick"])
-    ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
+    ], 2)) : (vue.openBlock(), vue.createElementBlock("div", {
+      key: 1,
+      class: vue.normalizeClass(_ctx.ns.e("body"))
+    }, [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.validatedRange, (range_, index) => {
         return vue.openBlock(), vue.createBlock(_component_date_table, {
           key: index,
@@ -94,8 +94,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           } : void 0
         ]), 1032, ["date", "selected-day", "range", "hide-header", "onPick"]);
       }), 128))
-    ]))
-  ]);
+    ], 2))
+  ], 2);
 }
 
 exports.render = render;

package/lib/components/calendar/src/calendar.vue_vue_type_template_id_76705c76_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.vue_vue_type_template_id_76705c76_lang.js","sources":["../../../../../../packages/components/calendar/src/calendar.vue?vue&type=template&id=76705c76&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=\"small\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"small\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"small\" @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'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport { calendarProps, calendarEmits } from './calendar'\n\nimport type { ComputedRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\n\n  props: calendarProps,\n  emits: calendarEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const selectedDay = ref<Dayjs>()\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month').date(1)\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').date(1)\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year').date(1)\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year').date(1)\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<Dayjs | undefined>({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val) {\n        if (!val) return\n        selectedDay.value = val\n        const result = val.toDate()\n\n        emit('input', result)\n        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,\n      endDayjs: Dayjs\n    ): [Dayjs, Dayjs][] => {\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":["_renderSlot"],"mappings":";;;;;;;qBACO,KAAK,EAAC;qBACJ,KAAK,EAAC;;;;EAKL;;;;EAgBkC;;;;EAO5B;;;;;;;;;;oDA3BiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAoBJ,CAAC;;UACxB;YAAa;YAAaA,mBAAc;YAAkB;;yBACjC;;;;oBACrB;;;;;;0BAIN;;;cAGK,aAAU;cACVA,eAAY;cACZ;cACA,KAAK;2BACM;cACX;;;;;;;"}
+{"version":3,"file":"calendar.vue_vue_type_template_id_76705c76_lang.js","sources":["../../../../../../packages/components/calendar/src/calendar.vue?vue&type=template&id=76705c76&lang.js"],"sourcesContent":["<template>\n  <div :class=\"ns.b()\">\n    <div :class=\"ns.e('header')\">\n      <slot name=\"header\" :date=\"i18nDate\">\n        <div :class=\"ns.e('title')\">{{ i18nDate }}</div>\n        <div v-if=\"validatedRange.length === 0\" :class=\"ns.e('button-group')\">\n          <el-button-group>\n            <el-button size=\"small\" @click=\"selectDate('prev-month')\">\n              {{ t('el.datepicker.prevMonth') }}\n            </el-button>\n            <el-button size=\"small\" @click=\"selectDate('today')\">\n              {{ t('el.datepicker.today') }}\n            </el-button>\n            <el-button size=\"small\" @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=\"ns.e('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=\"ns.e('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'\nimport { ElButton, ElButtonGroup } from '@element-plus/components/button'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { debugWarn } from '@element-plus/utils/error'\nimport DateTable from './date-table.vue'\nimport { calendarProps, calendarEmits } from './calendar'\n\nimport type { ComputedRef } from 'vue'\nimport type { Dayjs } from 'dayjs'\n\ntype DateType =\n  | 'prev-month'\n  | 'next-month'\n  | 'prev-year'\n  | 'next-year'\n  | 'today'\n\nexport default defineComponent({\n  name: 'ElCalendar',\n\n  components: {\n    DateTable,\n    ElButton,\n    ElButtonGroup,\n  },\n\n  props: calendarProps,\n  emits: calendarEmits,\n\n  setup(props, { emit }) {\n    const ns = useNamespace('calendar')\n\n    const { t, lang } = useLocale()\n    const selectedDay = ref<Dayjs>()\n    const now = dayjs().locale(lang.value)\n\n    const prevMonthDayjs = computed(() => {\n      return date.value.subtract(1, 'month').date(1)\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').date(1)\n    })\n\n    const prevYearDayjs = computed(() => {\n      return date.value.subtract(1, 'year').date(1)\n    })\n\n    const nextYearDayjs = computed(() => {\n      return date.value.add(1, 'year').date(1)\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<Dayjs | undefined>({\n      get() {\n        if (!props.modelValue) return selectedDay.value\n        return date.value\n      },\n      set(val) {\n        if (!val) return\n        selectedDay.value = val\n        const result = val.toDate()\n\n        emit('input', result)\n        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,\n      endDayjs: Dayjs\n    ): [Dayjs, Dayjs][] => {\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      ns,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode","_renderSlot"],"mappings":";;;;;;;;;;;;;IACQA;;;MACEC,0BAAO;;8CACU;;wCACJ;;;;;mBAC+B;;;kCAE1C;;;;;;;;;;;;uFAG0C;;;;;;;;;;;;;;;;;;;;;;;;uBAUlD;;;;;gBACmB;YAAS,mBAAc;YAAkBA;;;;2BACtB;;;;;;;;;;UAKzB;;gCACX;;;cAGG,eAAY;cACZA,mBAAc;cACd;cACA;;;;;;;;;"}

package/lib/components/calendar/src/date-table.vue.d.ts

@@ -24,6 +24,28 @@ declare const _default: import("vue").DefineComponent<{
         day: string;
         date: Date;
     };
+    nsTable: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+    nsDay: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     pick: (value: dayjs.Dayjs) => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -10,6 +10,7 @@ require('../../time-picker/index.js');
 var dateTable = require('./date-table.js');
 var dateUtils = require('../../time-picker/src/common/date-utils.js');
 var index = require('../../../hooks/use-locale/index.js');
+var index$1 = require('../../../hooks/use-namespace/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -35,6 +36,8 @@ var script = vue.defineComponent({
   emits: dateTable.dateTableEmits,
   setup(props, { emit }) {
     const { t, lang } = index.useLocale();
+    const nsTable = index$1.useNamespace("calendar-table");
+    const nsDay = index$1.useNamespace("calendar-day");
     const now = dayjs__default["default"]().locale(lang.value);
     const firstDayOfWeek = now.$locale().weekStart || 0;
     const isInRange = vue.computed(() => !!props.range && !!props.range.length);
@@ -122,7 +125,9 @@ var script = vue.defineComponent({
       rows,
       getCellClass,
       handlePickDay,
-      getSlotData
+      getSlotData,
+      nsTable,
+      nsDay
     };
   }
 });

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

@@ -1 +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\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          @click=\"handlePickDay(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 } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = 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: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [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 handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\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    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","localeData","rangeArr","defineComponent","useLocale","computed"],"mappings":";;;;;;;;;;;;;;;;;;AA6CAA,yBAAK,OAAO,CAACC,8BAAU,EAAE;AACzB,eAAe,GAAG,MAAM,OAAO,EAAE;AACrB,MAAC;;AAEb,EAAE,OAAOC,kBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,QAAQ;AACtC,EAAE;AACU,MAAC;EACX,MAAM,IAAI,GAAG;AACf;;AAEA,MAAM,cAAc,CAAC,SAASA,kBAAQ,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK;;AAEvE,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC;EACpC,CAAC;aACYC,mBAAe,CAAC;AAC/B;;AAEA,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;IACnB,MAAM,GAAG,EAAE,IAAI,EAAE,GAAGC;IACpB,MAAM,GAAG,GAAGJ,yBAAK,EAAE,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC;AAC3C;;AAEA,IAAI,MAAM,IAAI,eAAW,OAAO;MAC1B,IAAI,IAAI,GAAG,EAAE,CAAC;MACd,IAAI,SAAS,CAAC;QACZ,MAAM,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,MAAM;;;AAGnC,UAAU,MAAM,SAAS;SAChB,CAAC,CAAC,CAAC;YACA,SAAS;;QAEb;UACE,MAAM,QAAQ,CAAC;;UAEf,CAAC,CAAC;QACJ,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC;OACjC,MAAM;;QAEL,MAAM,aAAa,GAAG,qBAAqB,KAAK,CAAC,IAAI,EAAE,QAAQ,GAAG;;UAEhE,YAAY;UACZ,CAAC,CAAC;cACE;UACJ,IAAI,EAAE,GAAG;UACT,IAAI,EAAE,SAAS;UACf,CAAC,CAAC;QACJ,IAAI,GAAG,CAAC,GAAG;cACL,aAAa;UACjB,IAAI,EAAE,KAAK,GAAG,CAAC;UACf;;QAEF,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;;wBAElB,CAAC,KAAK,CAAC;;UAErB,QAAQ,GAAGK;;UAEX,KAAK,KAAK,CAAC,EAAE;QACf;;QAEA,OAAO,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC;;;UAG7C;cACI,IAAI;aACL,MAAM;UACT;QACF,WAAW;UACT,OAAO;aACJ;sBACS,CAAC,IAAI;;;UAGjB,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK;YACjC,OAAO,GAAG,CAAC,IAAI,EAAE;UACnB,IAAI,KAAK;cACL,IAAI,GAAG;YACT,IAAI,OAAO,CAAC;UACd;;QAEF,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;;SAE5B;;;KAGJ,CAAC;UACI,aAAa,GAAG,CAAC,EAAE,IAAI;MAC3B,MAAM,IAAI;UACN,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;MACnB;UACI,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE;YACrB,GAAG,GAAG,gBAAgB,CAAC,IAAI,EAAE;aAC5B;;;;QAIL,IAAI,EAAE,GAAG,CAAC,MAAM;OACjB,CAAC;;WAEG;eACI;cACD;UACJ;kBACQ;MACZ;;;;;;;;;;"}
+{"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=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\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\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          [nsTable.e('row')]: true,\n          [nsTable.em('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          @click=\"handlePickDay(cell)\"\n        >\n          <div :class=\"nsDay.b()\">\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 } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const nsTable = useNamespace('calendar-table')\n    const nsDay = useNamespace('calendar-day')\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = 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: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [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 handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\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    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n\n      nsTable,\n      nsDay,\n    }\n  },\n})\n</script>\n"],"names":["dayjs","localeData","rangeArr","defineComponent","useLocale","useNamespace","computed"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CAA,yBAAK,OAAO,CAACC,8BAAU,EAAE;AACzB,eAAe,GAAG,MAAM,OAAO,EAAE;AACrB,MAAC;;AAEb,EAAE,OAAOC,kBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,QAAQ;AACtC,EAAE;AACU,MAAC;EACX,MAAM,IAAI,GAAG;AACf;;AAEA,MAAM,cAAc,CAAC,SAASA,kBAAQ,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,KAAK;;AAEvE,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,IAAI,CAAC,CAAC;EACpC,CAAC;aACYC,mBAAe,CAAC;AAC/B;;AAEA,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE;IACnB,MAAM,GAAG,EAAE,IAAI,EAAE,GAAGC;IACpB,MAAM,OAAO,GAAGC,oBAAY,CAAC,iBAAiB,CAAC;AACnD;;AAEA,IAAI,MAAM,cAAc,GAAG,GAAG,CAAC;IAC3B,MAAM,SAAS,eAAW,CAAC,MAAM,CAAC;IAClC,MAAM,IAAI,gBAAY;MACpB,QAAQ,GAAG,EAAE,CAAC;;;AAGpB,QAAQ,uBAAuB;UACrB,IAAI,EAAE,KAAK,CAAC;UACZ,IAAI,EAAE;;QAER,IAAI;QACJ,SAAS,GAAG,SAAS,KAAK;QAC1B,MAAM,cAAc,GAAGH,kBAAQ,CAAC,SAAS;UACvC,IAAI,EAAE,KAAK,GAAG,CAAC;;UAEf,CAAC,CAAC;QACJ,IAAI,GAAG,iBAAiB,CAAC,MAAM,CAAC;OACjC,MAAM;;QAEL,MAAM,aAAa,GAAG,qBAAqB,KAAK,CAAC,IAAI,EAAE,QAAQ,GAAG;;UAEhE,YAAY;UACZ,CAAC,CAAC;cACE;UACJ,IAAI,EAAE,GAAG;UACT,IAAI,EAAE,SAAS;UACf,CAAC,CAAC;QACJ,IAAI,GAAG,CAAC,GAAG;cACL,aAAa;UACjB,IAAI,EAAE,KAAK,GAAG,CAAC;UACf;;QAEF,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;;wBAElB,CAAC,KAAK,CAAC;;UAErB,QAAQ,GAAGI;;UAEX,KAAK,KAAK,CAAC,EAAE;QACf;;QAEA,OAAO,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC;;;UAG7C;cACI,IAAI;aACL,MAAM;UACT;QACF,WAAW;UACT,OAAO;aACJ;sBACS,CAAC,IAAI;;;UAGjB,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK;YACjC,OAAO,GAAG,CAAC,IAAI,EAAE;UACnB,IAAI,KAAK;cACL,IAAI,GAAG;YACT,IAAI,OAAO,CAAC;UACd;;QAEF,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE;;SAE5B;;;KAGJ,CAAC;UACI,aAAa,GAAG,CAAC,EAAE,IAAI;MAC3B,MAAM,IAAI;UACN,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;MACnB;UACI,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE;YACrB,GAAG,GAAG,gBAAgB,CAAC,IAAI,EAAE;aAC5B;;;;QAIL,IAAI,EAAE,GAAG,CAAC,MAAM;OACjB,CAAC;;WAEG;eACI;cACD;UACJ;kBACQ;MACZ;;;MAGA,KAAK;MACL;;;;;;;;"}

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

@@ -6,13 +6,9 @@ var vue = require('vue');
 
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = ["onClick"];
-const _hoisted_3 = { 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
-    }),
+    class: vue.normalizeClass([_ctx.nsTable.b(), _ctx.nsTable.is("range", _ctx.isInRange)]),
     cellspacing: "0",
     cellpadding: "0"
   }, [
@@ -26,8 +22,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         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
+            [_ctx.nsTable.e("row")]: true,
+            [_ctx.nsTable.em("row", "hide-border")]: index === 0 && _ctx.hideHeader
           })
         }, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (cell, key) => {
@@ -36,13 +32,15 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               class: vue.normalizeClass(_ctx.getCellClass(cell)),
               onClick: ($event) => _ctx.handlePickDay(cell)
             }, [
-              vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", {
+                class: vue.normalizeClass(_ctx.nsDay.b())
+              }, [
                 vue.renderSlot(_ctx.$slots, "dateCell", {
                   data: _ctx.getSlotData(cell)
                 }, () => [
                   vue.createElementVNode("span", null, vue.toDisplayString(cell.text), 1)
                 ])
-              ])
+              ], 2)
             ], 10, _hoisted_2);
           }), 128))
         ], 2);

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

@@ -1 +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\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          @click=\"handlePickDay(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 } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = 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: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [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 handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\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    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;sCA4BsC;;;;;;;;;IArBlC;;;;gCAGE;;;;;;;;;;;;;;;;cAcKA;;;;;;;mBAKC;kBACE;;;;;;;;;"}
+{"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=\"[nsTable.b(), nsTable.is('range', isInRange)]\"\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\n    <tbody>\n      <tr\n        v-for=\"(row, index) in rows\"\n        :key=\"index\"\n        :class=\"{\n          [nsTable.e('row')]: true,\n          [nsTable.em('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          @click=\"handlePickDay(cell)\"\n        >\n          <div :class=\"nsDay.b()\">\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 } from 'vue'\nimport dayjs from 'dayjs'\nimport localeData from 'dayjs/plugin/localeData'\nimport { useLocale, useNamespace } from '@element-plus/hooks'\nimport { rangeArr } from '@element-plus/components/time-picker'\nimport { dateTableProps, dateTableEmits } from './date-table'\nimport type { Dayjs } from 'dayjs'\ndayjs.extend(localeData)\n\ntype CellType = 'next' | 'prev' | 'current'\ninterface Cell {\n  text: number\n  type: CellType\n}\n\nconst WEEK_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const\n\nexport const getPrevMonthLastDays = (date: Dayjs, count: number) => {\n  const lastDay = date.subtract(1, 'month').endOf('month').date()\n  return rangeArr(count).map((_, index) => lastDay - (count - index - 1))\n}\n\nexport const getMonthDays = (date: Dayjs) => {\n  const days = date.daysInMonth()\n  return rangeArr(days).map((_, index) => index + 1)\n}\n\nconst toNestedArr = (days: Cell[]) =>\n  rangeArr(days.length / 7).map((index) => {\n    const start = index * 7\n    return days.slice(start, start + 7)\n  })\n\nexport default defineComponent({\n  props: dateTableProps,\n  emits: dateTableEmits,\n\n  setup(props, { emit }) {\n    const { t, lang } = useLocale()\n    const nsTable = useNamespace('calendar-table')\n    const nsDay = useNamespace('calendar-day')\n\n    const now = dayjs().locale(lang.value)\n    // todo better way to get Day.js locale object\n    const firstDayOfWeek: number = (now as any).$locale().weekStart || 0\n\n    const isInRange = computed(() => !!props.range && !!props.range.length)\n\n    const rows = computed(() => {\n      let days: Cell[] = []\n      if (isInRange.value) {\n        const [start, end] = props.range!\n        const currentMonthRange: Cell[] = rangeArr(\n          end.date() - start.date() + 1\n        ).map((index) => ({\n          text: start.date() + index,\n          type: 'current',\n        }))\n\n        let remaining = currentMonthRange.length % 7\n        remaining = remaining === 0 ? 0 : 7 - remaining\n        const nextMonthRange: Cell[] = 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: Cell[] = getPrevMonthLastDays(\n          props.date,\n          firstDay - firstDayOfWeek\n        ).map((day) => ({\n          text: day,\n          type: 'prev',\n        }))\n        const currentMonthDays: Cell[] = getMonthDays(props.date).map(\n          (day) => ({\n            text: day,\n            type: 'current',\n          })\n        )\n        days = [...prevMonthDays, ...currentMonthDays]\n        const nextMonthDays: Cell[] = rangeArr(42 - days.length).map(\n          (_, index) => ({\n            text: index + 1,\n            type: 'next',\n          })\n        )\n        days = days.concat(nextMonthDays)\n      }\n      return toNestedArr(days)\n    })\n\n    const weekDays = computed(() => {\n      const start = firstDayOfWeek\n      if (start === 0) {\n        return WEEK_DAYS.map((_) => t(`el.datepicker.weeks.${_}`))\n      } else {\n        return WEEK_DAYS.slice(start)\n          .concat(WEEK_DAYS.slice(0, start))\n          .map((_) => t(`el.datepicker.weeks.${_}`))\n      }\n    })\n\n    const getFormattedDate = (day: number, type: CellType): Dayjs => {\n      switch (type) {\n        case 'prev':\n          return props.date.startOf('month').subtract(1, 'month').date(day)\n        case 'next':\n          return props.date.startOf('month').add(1, 'month').date(day)\n        case 'current':\n          return props.date.date(day)\n      }\n    }\n\n    const getCellClass = ({ text, type }: Cell) => {\n      const classes: string[] = [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 handlePickDay = ({ text, type }: Cell) => {\n      const date = getFormattedDate(text, type)\n      emit('pick', date)\n    }\n\n    const getSlotData = ({ text, type }: Cell) => {\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    return {\n      isInRange,\n      weekDays,\n      rows,\n      getCellClass,\n      handlePickDay,\n      getSlotData,\n\n      nsTable,\n      nsDay,\n    }\n  },\n})\n</script>\n"],"names":["_createElementVNode"],"mappings":";;;;;;;;;;;;IAEK;;IAED;;;;gCAGE;;;;;;yBAIA;;;;;;;;;;cAUKA;yDACmB;;;;;;;kBAIK;mBAAvB;kBACE;;;;;;;;;"}

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

@@ -5,6 +5,17 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
     };
 }, {
     isVertical: import("vue").ComputedRef<boolean>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     direction: {
         type: StringConstructor;
@@ -20,6 +31,17 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
         };
     }, {
         style: import("vue").ComputedRef<import("vue").CSSProperties>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         width: {
             type: StringConstructor;
@@ -35,6 +57,17 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
         };
     }, {
         style: import("vue").ComputedRef<import("vue").CSSProperties>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         height: {
             type: StringConstructor;
@@ -50,6 +83,17 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
         };
     }, {
         style: import("vue").ComputedRef<import("vue").CSSProperties>;
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
         height: {
             type: StringConstructor;
@@ -58,7 +102,19 @@ export declare const ElContainer: import("../../utils/types").SFCWithInstall<imp
     }>>, {
         height: string;
     }>;
-    Main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+    Main: import("vue").DefineComponent<{}, {
+        ns: {
+            namespace: import("vue").ComputedRef<string>;
+            b: (blockSuffix?: string) => string;
+            e: (element?: string | undefined) => string;
+            m: (modifier?: string | undefined) => string;
+            be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+            em: (element?: string | undefined, modifier?: string | undefined) => string;
+            bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+            bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+            is: (name: string, state?: boolean) => string;
+        };
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 };
 export default ElContainer;
 export declare const ElAside: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
@@ -68,6 +124,17 @@ export declare const ElAside: import("../../utils/types").SFCWithInstall<import(
     };
 }, {
     style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     width: {
         type: StringConstructor;
@@ -83,6 +150,17 @@ export declare const ElFooter: import("../../utils/types").SFCWithInstall<import
     };
 }, {
     style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     height: {
         type: StringConstructor;
@@ -98,6 +176,17 @@ export declare const ElHeader: import("../../utils/types").SFCWithInstall<import
     };
 }, {
     style: import("vue").ComputedRef<import("vue").CSSProperties>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     height: {
         type: StringConstructor;
@@ -106,4 +195,16 @@ export declare const ElHeader: import("../../utils/types").SFCWithInstall<import
 }>>, {
     height: string;
 }>>;
-export declare const ElMain: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;
+export declare const ElMain: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{}, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>>;

package/lib/components/container/src/aside.vue.d.ts

@@ -6,6 +6,17 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     style: import("vue").ComputedRef<CSSProperties>;
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     width: {
         type: StringConstructor;

package/lib/components/container/src/aside.vue_vue_type_script_lang.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
+require('../../../hooks/index.js');
+var index = require('../../../hooks/use-namespace/index.js');
 
 var script = vue.defineComponent({
   name: "ElAside",
@@ -13,10 +15,12 @@ var script = vue.defineComponent({
     }
   },
   setup(props) {
+    const ns = index.useNamespace("aside");
     return {
       style: vue.computed(() => {
         return props.width ? { "--el-aside-width": props.width } : {};
-      })
+      }),
+      ns
     };
   }
 });

package/lib/components/container/src/aside.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"aside.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/container/src/aside.vue"],"sourcesContent":["<template>\n  <aside class=\"el-aside\" :style=\"style\">\n    <slot></slot>\n  </aside>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAside',\n  props: {\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    return {\n      style: computed(() => {\n        return props.width\n          ? ({ '--el-aside-width': props.width } as CSSProperties)\n          : {}\n      }),\n    }\n  },\n})\n</script>\n"],"names":["defineComponent"],"mappings":";;;;;;AAMA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;;AAET,UAAU,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;;OAEE,CAAC,KAAK,EAAE;WACJ;;;OAGJ,CAAC;KACH,CAAC;;;;;;"}
+{"version":3,"file":"aside.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/container/src/aside.vue"],"sourcesContent":["<template>\n  <aside :class=\"ns.b()\" :style=\"style\">\n    <slot></slot>\n  </aside>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAside',\n  props: {\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('aside')\n\n    return {\n      style: computed(() => {\n        return props.width\n          ? ({ '--el-aside-width': props.width } as CSSProperties)\n          : {}\n      }),\n      ns,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","useNamespace"],"mappings":";;;;;;;;AAOA,aAAeA,mBAAe,CAAC;;AAE/B,EAAE,KAAK,EAAE;;AAET,UAAU,EAAE,MAAM;MACZ,OAAO,EAAE;KACV;;OAEE,CAAC,KAAK,EAAE;UACL,EAAE,GAAGC;IACX;;QAEI,OAAO;OACR,CAAC;;KAEH,CAAC;;;;;;"}

package/lib/components/container/src/aside.vue_vue_type_template_id_47e12f0a_lang.js

@@ -6,11 +6,11 @@ var vue = require('vue');
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("aside", {
-    class: "el-aside",
+    class: vue.normalizeClass(_ctx.ns.b()),
     style: vue.normalizeStyle(_ctx.style)
   }, [
     vue.renderSlot(_ctx.$slots, "default")
-  ], 4);
+  ], 6);
 }
 
 exports.render = render;

package/lib/components/container/src/aside.vue_vue_type_template_id_47e12f0a_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"aside.vue_vue_type_template_id_47e12f0a_lang.js","sources":["../../../../../../packages/components/container/src/aside.vue?vue&type=template&id=47e12f0a&lang.js"],"sourcesContent":["<template>\n  <aside class=\"el-aside\" :style=\"style\">\n    <slot></slot>\n  </aside>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAside',\n  props: {\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    return {\n      style: computed(() => {\n        return props.width\n          ? ({ '--el-aside-width': props.width } as CSSProperties)\n          : {}\n      }),\n    }\n  },\n})\n</script>\n"],"names":["_normalizeStyle"],"mappings":";;;;;;;;;IACS,KAAK,EAACA;;;;;;;;"}
+{"version":3,"file":"aside.vue_vue_type_template_id_47e12f0a_lang.js","sources":["../../../../../../packages/components/container/src/aside.vue?vue&type=template&id=47e12f0a&lang.js"],"sourcesContent":["<template>\n  <aside :class=\"ns.b()\" :style=\"style\">\n    <slot></slot>\n  </aside>\n</template>\n<script lang=\"ts\">\nimport { computed, defineComponent } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElAside',\n  props: {\n    width: {\n      type: String,\n      default: null,\n    },\n  },\n  setup(props) {\n    const ns = useNamespace('aside')\n\n    return {\n      style: computed(() => {\n        return props.width\n          ? ({ '--el-aside-width': props.width } as CSSProperties)\n          : {}\n      }),\n      ns,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;IACU,KAAK,qBAAE;;;;;;;;"}