Merge pull request element-plus#14285 from element-plus/dev

D2M

Author: iamkun

CHANGELOG.en-US.md

@@ -1,4 +1,37 @@
 ## Changelog
+
+### 2.3.13
+
+_2023-09-14_
+
+#### Features
+
+- Components [el-pagination] add teleported prop (#14072 by @boomboy4)
+- Components [image-viewer] Add rotate event when rotating images (#14138 by @HADB)
+- Components [upload] support async data (#14015 by @jianjunyuu)
+
+#### Bug fixes
+
+- Components [select] gurad value type error (#14074 by @sseinHu)
+- Components [collapse] allow nested inputs in ElCollapseItem (#14061 by @kinggq)
+- Components [rate] bind the textColor property (#14092 by @yj-liuzepeng)
+- Components [table] add tabindex to tbody to fix #13991 (#14020 by @FrankFang)
+- Components [form] improve types (#14062 by @ModyQyW)
+- Components [select] fix hover index error when creating option (#12635 by @wzc520pyfm)
+- I18n improve Dutch(nl) translation (#14164 by @JBtje)
+- Components [color-picker] first click should be trigger (#14209 by @wonderl17)
+- Docs [date-picker] `calendar-change` event parameter type error (#14237 by @btea)
+- Docs [upload] fix the version of supporting async data (#14242 by @HADB)
+- Components [collapse] fix accessibility issues (#13832 by @Karolis-Stoncius)
+- Components [date-picker] month range should emit `calendar-change` (#14262 by @Justineo)
+- Components [input] missing autofocus types (#14246 by @HeftyKoo)
+
+#### Refactors
+
+- Components [upload] reuse revkoeObjectURL function (#14126 by @HeftyKoo)
+- Components [collapse] replace `keypress` with `keydown` (#14137 by @btea)
+- Components [date-picker] add aria-labels to date picker btns (#14149 by @Karolis-Stoncius)
+- Components [date-picker] basic-date-table (#10344 by @jw-foss)
 
 ### 2.3.11
 

docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-import { isDark } from '../../composables/dark'
+import { isDark, toggleDark } from '../../composables/dark'
 import DarkIcon from '../icons/dark.vue'
 import LightIcon from '../icons/light.vue'
 
 const darkMode = ref(isDark.value)
 
 watch(
-  () => isDark.value,
-  (val) => {
-    darkMode.value = val
+  () => darkMode.value,
+  () => {
+    toggleDark()
   }
 )
 </script>
@@ -31,16 +31,19 @@ watch(
   --el-switch-on-color: var(--bg-color-mute);
   --el-switch-off-color: var(--bg-color-mute);
   --el-switch-border-color: var(--border-color);
+
   .el-switch__action {
     width: 14px;
     height: 14px;
   }
 }
+
 :deep(.dark-icon) {
   border-radius: 50%;
   color: #cfd3dc;
   background-color: #141414;
 }
+
 :deep(.light-icon) {
   color: #606266;
 }

docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
-import { isDark, toggleDark } from '../../composables/dark'
+import { isDark } from '../../composables/dark'
 import { useNavbarLocale } from '../../composables/navbar-locale'
 
 const locale = useNavbarLocale()
@@ -12,7 +12,6 @@ const locale = useNavbarLocale()
     <CommonThemeToggler
       :aria-label="locale['theme-toggler']"
       :aria-checked="isDark"
-      @click="toggleDark()"
     />
   </div>
 </template>

docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from '../../composables/dark'
+import { isDark } from '../../composables/dark'
 import { useNavbarLocale } from '../../composables/navbar-locale'
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
 
@@ -11,13 +11,13 @@ const locale = useNavbarLocale()
     <CommonThemeToggler
       :aria-label="locale['theme-toggler']"
       :aria-checked="isDark"
-      @click="() => toggleDark()"
     />
   </div>
 </template>
 
 <style scoped lang="scss">
 @use '../../styles/mixins' as *;
+
 .theme-toggler-content {
   @include with-bg;
   background-color: transparent;

docs/en-US/component/card.md

@@ -51,12 +51,12 @@ card/shadow
 
 ### Attributes
 
-| Name       | Description                                                   | Type                              | Default |
-| ---------- | ------------------------------------------------------------- | --------------------------------- | ------- |
-| header     | title of the card. Also accepts a DOM passed by `slot#header` | ^[string]                         | —       |
-| body-style | CSS style of card body                                        | ^[object]`CSSProperties`          | —       |
+| Name                 | Description                                                   | Type                              | Default |
+| -------------------- | ------------------------------------------------------------- | --------------------------------- | ------- |
+| header               | title of the card. Also accepts a DOM passed by `slot#header` | ^[string]                         | —       |
+| body-style           | CSS style of card body                                        | ^[object]`CSSProperties`          | —       |
 | body-class ^(2.3.10) | custom class name of card body                                | ^[string]                         | —       |
-| shadow     | when to show card shadows                                     | ^[enum]`always \| never \| hover` | always  |
+| shadow               | when to show card shadows                                     | ^[enum]`always \| never \| hover` | always  |
 
 ### Slots
 

docs/en-US/component/collapse.md

@@ -37,36 +37,40 @@ collapse/customization
 
 :::
 
-## Collapse Attributes
+## Collapse API
 
-| Name                  | Description                        | Type                                                 | Accepted Values | Default |
-| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- |
-| model-value / v-model | currently active panel             | string (accordion mode) / array (non-accordion mode) | —               | —       |
-| accordion             | whether to activate accordion mode | boolean                                              | —               | false   |
+### Collapse Attributes
 
-## Collapse Events
+| Name                  | Description                        | Type                                                       | Default |
+| --------------------- | ---------------------------------- | ---------------------------------------------------------- | ------- |
+| model-value / v-model | currently active panel             | ^[string] (accordion mode) / ^[array] (non-accordion mode) | —       |
+| accordion             | whether to activate accordion mode | ^[boolean]                                                 | false   |
 
-| Name   | Description                        | Parameters                                                          |
-| ------ | ---------------------------------- | ------------------------------------------------------------------- |
-| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
+### Collapse Events
 
-## Collapse Slots
+| Name   | Description                        | Parameters                                                            |
+| ------ | ---------------------------------- | --------------------------------------------------------------------- |
+| change | triggers when active panels change | `(activeNames: array (non-accordion mode) / string (accordion mode))` |
 
-| Name | Description               | Subtags       |
-| ---- | ------------------------- | ------------- |
-| -    | customize default content | Collapse Item |
+### Collapse Slots
 
-## Collapse Item Attributes
+| Name    | Description               | Subtags       |
+| ------- | ------------------------- | ------------- |
+| default | customize default content | Collapse Item |
 
-| Name     | Description                        | Type          | Accepted Values | Default |
-| -------- | ---------------------------------- | ------------- | --------------- | ------- |
-| name     | unique identification of the panel | string/number | —               | —       |
-| title    | title of the panel                 | string        | —               | —       |
-| disabled | disable the collapse item          | boolean       | —               | —       |
+## Collapse Item API
 
-## Collapse Item Slot
+### Collapse Item Attributes
 
-| Name  | Description                    |
-| ----- | ------------------------------ |
-| —     | content of Collapse Item       |
-| title | content of Collapse Item title |
+| Name     | Description                        | Type                | Default |
+| -------- | ---------------------------------- | ------------------- | ------- |
+| name     | unique identification of the panel | ^[string]/^[number] | —       |
+| title    | title of the panel                 | ^[string]           | —       |
+| disabled | disable the collapse item          | ^[boolean]          | —       |
+
+### Collapse Item Slot
+
+| Name    | Description                    |
+| ------- | ------------------------------ |
+| default | content of Collapse Item       |
+| title   | content of Collapse Item title |

docs/en-US/component/date-picker.md

@@ -177,19 +177,19 @@ Note, date time locale (month name, first day of the week ...) are also configur
 
 ## Events
 
-| Name            | Description                                                               | Parameters              |
-| --------------- | ------------------------------------------------------------------------- | ----------------------- |
-| change          | triggers when user confirms the value                                     | `(val: typeof v-model)` |
-| blur            | triggers when Input blurs                                                 | `(e: FocusEvent)`       |
-| focus           | triggers when Input focuses                                               | `(e: FocusEvent)`       |
-| calendar-change | triggers when the calendar selected date is changed. Only for `daterange` | `(val: [Date, Date])`   |
-| panel-change    | triggers when the navigation button click.                                | `(date, mode, view)`    |
-| visible-change  | triggers when the DatePicker's dropdown appears/disappears                | `(visibility: boolean)` |
+| Name            | Description                                                | Parameters                    |
+| --------------- | ---------------------------------------------------------- | ----------------------------- |
+| change          | triggers when user confirms the value                      | `(val: typeof v-model)`       |
+| blur            | triggers when Input blurs                                  | `(e: FocusEvent)`             |
+| focus           | triggers when Input focuses                                | `(e: FocusEvent)`             |
+| calendar-change | triggers when the calendar selected date is changed.       | `(val: [Date, null \| Date])` |
+| panel-change    | triggers when the navigation button click.                 | `(date, mode, view)`          |
+| visible-change  | triggers when the DatePicker's dropdown appears/disappears | `(visibility: boolean)`       |
 
 ## Methods
 
 | Method                | Description                 | Parameters |
-|-----------------------| --------------------------- | ---------- |
+| --------------------- | --------------------------- | ---------- |
 | focus                 | focus the Input component   | —          |
 | handleOpen ^(2.2.16)  | open the DatePicker popper  | —          |
 | handleClose ^(2.2.16) | close the DatePicker popper | —          |

docs/en-US/component/form.md

@@ -235,7 +235,39 @@ type FormValidateCallback = (
 interface FormItemRule extends RuleItem {
   trigger?: Arrayable<string>
 }
-type FormRules = Partial<Record<string, Arrayable<FormItemRule>>>
+
+type Primitive = null | undefined | string | number | boolean | symbol | bigint
+type BrowserNativeObject = Date | FileList | File | Blob | RegExp
+type IsTuple<T extends ReadonlyArray<any>> = number extends T['length']
+  ? false
+  : true
+type ArrayMethodKey = keyof any[]
+type TupleKey<T extends ReadonlyArray<any>> = Exclude<keyof T, ArrayMethodKey>
+type ArrayKey = number
+type PathImpl<K extends string | number, V> = V extends
+  | Primitive
+  | BrowserNativeObject
+  ? `${K}`
+  : `${K}` | `${K}.${Path<V>}`
+type Path<T> = T extends ReadonlyArray<infer V>
+  ? IsTuple<T> extends true
+    ? {
+        [K in TupleKey<T>]-?: PathImpl<Exclude<K, symbol>, T[K]>
+      }[TupleKey<T>]
+    : PathImpl<ArrayKey, V>
+  : {
+      [K in keyof T]-?: PathImpl<Exclude<K, symbol>, T[K]>
+    }[keyof T]
+type FieldPath<T> = T extends object ? Path<T> : never
+// MaybeRef: see [@vueuse/core](https://github.com/vueuse/vueuse/blob/main/packages/shared/utils/types.ts)
+// UnwrapRef: see [vue](https://github.com/vuejs/core/blob/main/packages/reactivity/src/ref.ts)
+type FormRules<T extends MaybeRef<Record<string, any> | string> = string> =
+  Partial<
+    Record<
+      UnwrapRef<T> extends string ? UnwrapRef<T> : FieldPath<UnwrapRef<T>>,
+      Arrayable<FormItemRule>
+    >
+  >
 ```
 
 </details>

docs/en-US/component/image.md

@@ -116,6 +116,7 @@ image/image-preview
 | ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------ |
 | close  | trigger when clicking on close button or when `hide-on-click-modal` enabled clicking on backdrop. | ^[Function]`() => void`              |
 | switch | trigger when switching images.                                                                    | ^[Function]`(index: number) => void` |
+| rotate ^(2.3.13) | trigger when rotating images.                                                                     | ^[Function]`(deg: number) => void`   |
 
 ### Image Viewer Exposes
 

docs/en-US/component/input-number.md

@@ -84,7 +84,7 @@ input-number/controlled
 ### Attributes
 
 | Name                    | Description                                      | Type                                          | Default   |
-|-------------------------| ------------------------------------------------ | --------------------------------------------- | --------- |
+| ----------------------- | ------------------------------------------------ | --------------------------------------------- | --------- |
 | model-value / v-model   | binding value                                    | ^[number]                                     | —         |
 | min                     | the minimum allowed value                        | ^[number]                                     | -Infinity |
 | max                     | the maximum allowed value                        | ^[number]                                     | Infinity  |