Merge pull request #14285 from element-plus/dev

D2M
element-plus · Sep 14, 2023 · 0e0f43c · 0e0f43c
2 parents ab9e871 + 4cccc76
commit 0e0f43c
Show file tree

Hide file tree

Showing 48 changed files with 973 additions and 558 deletions.
diff --git a/CHANGELOG.en-US.md b/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
 

diff --git a/docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue b/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;
 }

diff --git a/docs/.vitepress/vitepress/components/full-screen/vp-theme-toggler.vue b/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>

diff --git a/docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue b/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;

diff --git a/docs/en-US/component/card.md b/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
 

diff --git a/docs/en-US/component/collapse.md b/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 |
diff --git a/docs/en-US/component/date-picker.md b/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 | —          |

diff --git a/docs/en-US/component/form.md b/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>
diff --git a/docs/en-US/component/image.md b/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
 

diff --git a/docs/en-US/component/input-number.md b/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  |

diff --git a/docs/en-US/component/message-box.md b/docs/en-US/component/message-box.md
@@ -159,16 +159,16 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
 ### Options
 
 | Name                         | Description                                                                                                                              | Type                                                                               | Default                                          |
-|------------------------------| ---------------------------------------------------------------------------------------------------------------------------------------- |------------------------------------------------------------------------------------| ------------------------------------------------ |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------ |
 | autofocus                    | auto focus when open MessageBox                                                                                                          | ^[boolean]                                                                         | true                                             |
 | title                        | title of the MessageBox                                                                                                                  | ^[string]                                                                          | ''                                               |
 | message                      | content of the MessageBox                                                                                                                | ^[string] / ^[VNode] / ^[Function]`() => VNode` ^(2.2.17)                          | —                                                |
 | dangerouslyUseHTMLString     | whether `message` is treated as HTML string                                                                                              | ^[boolean]                                                                         | false                                            |
-| type                         | message type, used for icon display                                                                                                      | ^[enum]`'success' \                                                                | 'info' \| 'warning' \| 'error'`                               | ''                                               |
+| type                         | message type, used for icon display                                                                                                      | ^[enum]`'success' \| 'info' \| 'warning' \| 'error'`                               | ''                                               |
 | icon                         | custom icon component, overrides `type`                                                                                                  | ^[string] / ^[Component]                                                           | ''                                               |
 | custom-class                 | custom class name for MessageBox                                                                                                         | ^[string]                                                                          | ''                                               |
 | custom-style                 | custom inline style for MessageBox                                                                                                       | ^[CSSProperties]                                                                   | {}                                               |
-| callback                     | MessageBox closing callback if you don't prefer Promise                                                                                  | ^[Function]`(value: string, action: Action) => any \                               | (action: Action) => any`     | null                                             |
+| callback                     | MessageBox closing callback if you don't prefer Promise                                                                                  | ^[Function]`(value: string, action: Action) => any \| (action: Action) => any`     | null                                             |
 | showClose                    | whether to show close icon of MessageBox                                                                                                 | ^[boolean]                                                                         | true                                             |
 | before-close                 | callback before MessageBox closes, and it will prevent MessageBox from closing                                                           | ^[Function]`(action: Action, instance: MessageBoxState, done: () => void) => void` | null                                             |
 | distinguish-cancel-and-close | whether to distinguish canceling and closing the MessageBox                                                                              | ^[boolean]                                                                         | false                                            |