Merge branch 'dev' into fix/table_select_children

docs/en-US/component/autocomplete.md

@@ -3,11 +3,15 @@ title: Autocomplete
 lang: en-US
 ---
 
-## Autocomplete
+# Autocomplete
 
-You can get some recommended tips based on the current input.
+Get some recommended tips based on the current input.
 
-:::demo Autocomplete component provides input suggestions. The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
+## Basic Usage
+
+Autocomplete component provides input suggestions.
+
+:::demo The `fetch-suggestions` attribute is a method that returns suggested input. In this example, `querySearch(queryString, cb)` returns suggestions to Autocomplete via `cb(data)` when suggestions are ready.
 
 autocomplete/autocomplete
 

docs/en-US/component/table.md

@@ -95,6 +95,16 @@ table/grouping-header
 
 :::
 
+## Table with fixed group header
+
+fixed group head is supported
+
+:::demo The attribute `fixed` of the group header is determined by the outermost `el-table-column`
+
+table/fixed-column-and-group-header
+
+:::
+
 ## Single select
 
 Single row selection is supported.

docs/examples/table/fixed-column-and-group-header.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-table :data="tableData" style="width: 100%" height="250">
+    <el-table-column prop="date" label="Date" width="150" />
+    <el-table-column prop="name" label="Name" width="150" />
+    <el-table-column prop="zip" label="Zip" width="150" />
+    <el-table-column label="Address Info" fixed="right">
+      <el-table-column prop="state" label="State" width="100" />
+      <el-table-column prop="city" label="City" width="120" />
+      <el-table-column prop="address" label="Address" width="250" />
+    </el-table-column>
+  </el-table>
+</template>
+
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+  },
+]
+</script>

packages/components/calendar/src/calendar.vue

@@ -52,8 +52,9 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue'
 import { ElButton, ElButtonGroup } from '@element-plus/components/button'
-import { useNamespace } from '@element-plus/hooks'
+import { useLocale, useNamespace } from '@element-plus/hooks'
 
 import DateTable from './date-table.vue'
 import { useCalendar } from './use-calendar'
@@ -75,11 +76,16 @@ const {
   pickDay,
   realSelectedDay,
   selectDate,
-  t,
-  i18nDate,
   validatedRange,
 } = useCalendar(props, emit, COMPONENT_NAME)
 
+const { t } = useLocale()
+
+const i18nDate = computed(() => {
+  const pickedMonth = `el.datepicker.month${date.value.format('M')}`
+  return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`
+})
+
 defineExpose({
   /** @description currently selected date */
   selectedDay: realSelectedDay,

packages/components/calendar/src/use-calendar.ts

@@ -8,13 +8,56 @@ import type { ComputedRef, SetupContext } from 'vue'
 import type { Dayjs } from 'dayjs'
 import type { CalendarDateType, CalendarEmits, CalendarProps } from './calendar'
 
+const adjacentMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {
+  const firstMonthLastDay = start.endOf('month')
+  const lastMonthFirstDay = end.startOf('month')
+
+  // Whether the last day of the first month and the first day of the last month is in the same week
+  const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')
+  const lastMonthStartDay = isSameWeek
+    ? lastMonthFirstDay.add(1, 'week')
+    : lastMonthFirstDay
+
+  return [
+    [start, firstMonthLastDay],
+    [lastMonthStartDay.startOf('week'), end],
+  ]
+}
+
+const threeConsecutiveMonth = (start: Dayjs, end: Dayjs): [Dayjs, Dayjs][] => {
+  const firstMonthLastDay = start.endOf('month')
+  const secondMonthFirstDay = start.add(1, 'month').startOf('month')
+
+  // Whether the last day of the first month and the second month is in the same week
+  const secondMonthStartDay = firstMonthLastDay.isSame(
+    secondMonthFirstDay,
+    'week'
+  )
+    ? secondMonthFirstDay.add(1, 'week')
+    : secondMonthFirstDay
+
+  const secondMonthLastDay = secondMonthStartDay.endOf('month')
+  const lastMonthFirstDay = end.startOf('month')
+
+  // Whether the last day of the second month and the last day of the last month is in the same week
+  const lastMonthStartDay = secondMonthLastDay.isSame(lastMonthFirstDay, 'week')
+    ? lastMonthFirstDay.add(1, 'week')
+    : lastMonthFirstDay
+
+  return [
+    [start, firstMonthLastDay],
+    [secondMonthStartDay.startOf('week'), secondMonthLastDay],
+    [lastMonthStartDay.startOf('week'), end],
+  ]
+}
+
 export const useCalendar = (
   props: CalendarProps,
   emit: SetupContext<CalendarEmits>['emit'],
   componentName: string
 ) => {
-  const solts = useSlots()
-  const { t, lang } = useLocale()
+  const slots = useSlots()
+  const { lang } = useLocale()
 
   const selectedDay = ref<Dayjs>()
   const now = dayjs().locale(lang.value)
@@ -61,12 +104,10 @@ export const useCalendar = (
 
   const date: ComputedRef<Dayjs> = computed(() => {
     if (!props.modelValue) {
-      if (realSelectedDay.value) {
-        return realSelectedDay.value
-      } else if (validatedRange.value.length) {
-        return validatedRange.value[0][0]
-      }
-      return now
+      return (
+        realSelectedDay.value ||
+        (validatedRange.value.length ? validatedRange.value[0][0] : now)
+      )
     } else {
       return dayjs(props.modelValue).locale(lang.value)
     }
@@ -76,11 +117,6 @@ export const useCalendar = (
   const prevYearDayjs = computed(() => date.value.subtract(1, 'year').date(1))
   const nextYearDayjs = computed(() => date.value.add(1, 'year').date(1))
 
-  const i18nDate = computed(() => {
-    const pickedMonth = `el.datepicker.month${date.value.format('M')}`
-    return `${date.value.year()} ${t('el.datepicker.year')} ${t(pickedMonth)}`
-  })
-
   // https://github.com/element-plus/element-plus/issues/3155
   // Calculate the validate date range according to the start and end dates
   const calculateValidatedDateRange = (
@@ -98,52 +134,14 @@ export const useCalendar = (
     }
     // Two adjacent months
     else if (firstMonth + 1 === lastMonth) {
-      const firstMonthLastDay = firstDay.endOf('month')
-      const lastMonthFirstDay = lastDay.startOf('month')
-
-      // Whether the last day of the first month and the first day of the last month is in the same week
-      const isSameWeek = firstMonthLastDay.isSame(lastMonthFirstDay, 'week')
-      const lastMonthStartDay = isSameWeek
-        ? lastMonthFirstDay.add(1, 'week')
-        : lastMonthFirstDay
-
-      return [
-        [firstDay, firstMonthLastDay],
-        [lastMonthStartDay.startOf('week'), lastDay],
-      ]
+      return adjacentMonth(firstDay, lastDay)
     }
     // Three consecutive months (compatible: 2021-01-30 to 2021-02-28)
     else if (
       firstMonth + 2 === lastMonth ||
       (firstMonth + 1) % 11 === lastMonth
     ) {
-      const firstMonthLastDay = firstDay.endOf('month')
-      const secondMonthFirstDay = firstDay.add(1, 'month').startOf('month')
-
-      // Whether the last day of the first month and the second month is in the same week
-      const secondMonthStartDay = firstMonthLastDay.isSame(
-        secondMonthFirstDay,
-        'week'
-      )
-        ? secondMonthFirstDay.add(1, 'week')
-        : secondMonthFirstDay
-
-      const secondMonthLastDay = secondMonthStartDay.endOf('month')
-      const lastMonthFirstDay = lastDay.startOf('month')
-
-      // Whether the last day of the second month and the last day of the last month is in the same week
-      const lastMonthStartDay = secondMonthLastDay.isSame(
-        lastMonthFirstDay,
-        'week'
-      )
-        ? lastMonthFirstDay.add(1, 'week')
-        : lastMonthFirstDay
-
-      return [
-        [firstDay, firstMonthLastDay],
-        [secondMonthStartDay.startOf('week'), secondMonthLastDay],
-        [lastMonthStartDay.startOf('week'), lastDay],
-      ]
+      return threeConsecutiveMonth(firstDay, lastDay)
     }
     // Other cases
     else {
@@ -184,7 +182,7 @@ export const useCalendar = (
       ref: 'https://element-plus.org/en-US/component/calendar.html#slots',
       type: 'Slot',
     },
-    computed(() => !!solts.dateCell)
+    computed(() => !!slots.dateCell)
   )
 
   return {
@@ -194,7 +192,5 @@ export const useCalendar = (
     pickDay,
     selectDate,
     validatedRange,
-    t,
-    i18nDate,
   }
 }

packages/components/carousel/__tests__/carousel.test.tsx

@@ -5,7 +5,7 @@ import Carousel from '../src/carousel.vue'
 import CarouselItem from '../src/carousel-item.vue'
 
 import type { VueWrapper } from '@vue/test-utils'
-import type { CarouselInstance } from '../src/carousel'
+import type { CarouselInstance } from '../src/instance'
 
 const wait = (ms = 100) =>
   new Promise((resolve) => setTimeout(() => resolve(0), ms))

packages/components/carousel/index.ts

@@ -12,3 +12,5 @@ export const ElCarouselItem = withNoopInstall(CarouselItem)
 
 export * from './src/carousel'
 export * from './src/carousel-item'
+
+export type { CarouselInstance } from './src/instance'

packages/components/carousel/src/carousel.ts

@@ -1,6 +1,5 @@
 import { buildProps, isNumber } from '@element-plus/utils'
 import type { ExtractPropTypes } from 'vue'
-import type Carousel from './carousel.vue'
 
 export const carouselProps = buildProps({
   initialIndex: {
@@ -64,5 +63,3 @@ export const carouselEmits = {
 
 export type CarouselProps = ExtractPropTypes<typeof carouselProps>
 export type CarouselEmits = typeof carouselEmits
-
-export type CarouselInstance = InstanceType<typeof Carousel>