Merge pull request #8708 from element-plus/dev

D2M

CHANGELOG.en-US.md

@@ -1,4 +1,37 @@
 ## Changelog
+
+### 2.2.9
+
+_2022-07-08_
+
+#### Features
+
+- Components [autocomplete] fit input width (#8596 by @kooriookami)
+- Components [slider] placement (#8561 by @ryuhangyeong)
+
+#### Bug fixes
+
+- Components [menu] fix infinite flicker after choosing subMenu (#8533 by @ParkerFiend)
+- Theme-chalk [select] change style when disalbed and selectded (#8354 by @ryuhangyeong)
+- Components [TreeSelect] checkbox interaction (#8102 by @yujinpan)
+- Components [input-number] Fix value decimals miss prop precision (#8587 by @so11y)
+- Components add validate-event for form types component (#8173 by @HeftyKoo)
+- Components [time-picker] Ignore key down if readonly (#8283 by @ryuhangyeong)
+- Components [date-picker] fix type of year disabled failure (#8568 by @ayuan-gy)
+- Components [autocomplete] error message (#8591 by @tolking)
+- Components [dialog] remove not used style props (#8325 by @ryuhangyeong)
+- Components [dialog] make modelValue be an optional property (#8598 by @buqiyuan)
+- Components [dropdown] fix visible-change event delay trigger (#8602 by @shooterRao)
+- Components [table] table-column expand nested table wrong style (#8522 by @asdjgfr)
+- Components [date-picker] disabled year not selectable (#8414 by @Tsong-LC)
+- Components [steps] fix type error (#8627 by @ryuhangyeong)
+- Components [dropdown] fix A11y when tooltip show (#8655 by @shooterRao)
+- Revert(components): [radio] revert input id (#8677 by @chenxch)
+
+#### Refactors
+
+- Components [tabs] add deprecated mark to activeName (#8590 by @tolking)
+- Components [steps] use JSX in Unit test (#8259 by @Tsong-LC)
 
 ### 2.2.8
 

README.md

@@ -73,6 +73,11 @@ You can also try Element Plus out with the components built-in playground.
           <img width="150px" src="https://user-images.githubusercontent.com/17680888/160634485-df0d00af-8633-4ab8-9a72-aac2b65d1d36.png">
         </a>
       </td>
+      <td align="center" valign="middle">
+        <a href="https://hooray.gitee.io/fantastic-admin/?from=element-plus" target="_blank">
+          <img width="150px" src="https://user-images.githubusercontent.com/82012629/167299102-e2e66150-2248-4f03-bbf2-84c622e7d165.png">
+        </a>
+      </td>
     </tr>
     </tbody>
 </table>

docs/.vitepress/config/sponsors.ts

@@ -1,11 +1,11 @@
 export const rightRichTextSponsors = [
-  // {
-  //   name: 'Fantastic-admin',
-  //   img: '/images/sponsors/fantasticadmin.png',
-  //   url: 'https://fantastic-admin.netlify.app/?from=element-plus',
-  //   slogan: 'An out-of-the-box backend framework',
-  //   slogan_cn: '开箱即用的 Vue 后台管理框架',
-  // },
+  {
+    name: 'Fantastic-admin',
+    img: '/images/sponsors/fantasticadmin.png',
+    url: 'https://hooray.gitee.io/fantastic-admin/?from=element-plus',
+    slogan: 'An out-of-the-box backend framework',
+    slogan_cn: '开箱即用的后台框架 为开发提供舒适体验',
+  },
 ]
 
 export const rightLogoSmallSponsors = [

docs/.vitepress/vitepress/components/vp-app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import nprogress from 'nprogress'
 import dayjs from 'dayjs'
@@ -35,6 +35,15 @@ useToggleWidgets(isSidebarOpen, () => {
 
 const userPrefer = useStorage<boolean | string>(USER_PREFER_GITHUB_PAGE, null)
 
+const scrollRef = ref<Element>()
+
+const handleSidebarClick = () => {
+  toggleSidebar(false)
+  if (scrollRef.value) {
+    scrollRef.value?.scrollTo({ top: 0 })
+  }
+}
+
 onMounted(async () => {
   if (!isClient) return
   window.addEventListener(
@@ -106,15 +115,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="App">
+  <el-scrollbar ref="scrollRef" height="100vh" class="App">
     <VPOverlay
       class="overlay"
       :show="isSidebarOpen"
       @click="toggleSidebar(false)"
     />
     <VPNav />
     <VPSubNav v-if="hasSidebar" @open-menu="toggleSidebar(true)" />
-    <VPSidebar :open="isSidebarOpen" @close="toggleSidebar(false)">
+    <VPSidebar :open="isSidebarOpen" @close="handleSidebarClick">
       <template #top>
         <VPSponsors />
       </template>
@@ -140,5 +149,5 @@ onMounted(async () => {
       </template>
     </VPContent>
     <Debug />
-  </div>
+  </el-scrollbar>
 </template>

docs/.vitepress/vitepress/components/vp-sidebar.vue

@@ -11,21 +11,27 @@ const { sidebars, hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <aside v-if="hasSidebar" :class="{ sidebar: true, open }">
-    <slot name="top" />
-    <div class="sidebar-groups">
-      <section v-for="(item, key) of sidebars" :key="key" class="sidebar-group">
-        <p class="sidebar-group__title">
-          {{ item.text }}
-        </p>
-        <VPSidebarLink
-          v-for="(child, childKey) in item.children"
-          :key="childKey"
-          :item="child"
-          @close="$emit('close')"
-        />
-      </section>
-    </div>
-    <slot name="bottom" />
-  </aside>
+  <el-scrollbar v-if="hasSidebar" :class="{ sidebar: true, open }">
+    <aside>
+      <slot name="top" />
+      <div class="sidebar-groups">
+        <section
+          v-for="(item, key) of sidebars"
+          :key="key"
+          class="sidebar-group"
+        >
+          <p class="sidebar-group__title">
+            {{ item.text }}
+          </p>
+          <VPSidebarLink
+            v-for="(child, childKey) in item.children"
+            :key="childKey"
+            :item="child"
+            @close="$emit('close')"
+          />
+        </section>
+      </div>
+      <slot name="bottom" />
+    </aside>
+  </el-scrollbar>
 </template>

docs/.vitepress/vitepress/styles/base.scss

@@ -32,6 +32,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background-color var(--el-transition-duration-fast);
+  overflow: hidden;
 }
 
 main {

docs/.vitepress/vitepress/styles/css-vars.scss

@@ -15,7 +15,6 @@
   --bg-brand-color: var(--el-color-primary-light-9);
 
   --bg-color: var(--el-bg-color);
-  --bg-color-filter: #ffffffb3;
   --bg-color-soft: #fafafa;
   --bg-color-mute: #f2f2f2;
   --border-color: var(--el-border-color);
@@ -79,5 +78,4 @@
 .dark {
   --bg-color-soft: #242424;
   --bg-color-mute: #2c2c2c;
-  --bg-color-filter: #141414b3;
 }

docs/.vitepress/vitepress/styles/navbar.scss

@@ -5,14 +5,14 @@
 @use './nav/menu';
 
 .navbar-wrapper {
-  @include with-bg;
   position: relative;
   border-bottom: 1px solid var(--border-color);
   height: var(--header-height);
   padding: 0 12px 0 24px;
-  backdrop-filter: saturate(50%) blur(8px);
-  background: var(--bg-color-filter);
-  -webkit-backdrop-filter: saturate(50%) blur(8px);
+  background-image: radial-gradient(transparent 1px, var(--bg-color) 1px);
+  background-size: 4px 4px;
+  backdrop-filter: saturate(50%) blur(4px);
+  -webkit-backdrop-filter: saturate(50%) blur(4px);
   top: 0;
 
   @include respond-to('md') {

docs/en-US/component/autocomplete.md

@@ -54,9 +54,10 @@ autocomplete/remote-search
 | prefix-icon                       | prefix icon class                                                                                                          | string / Component              | —                                                              | —            |
 | suffix-icon                       | suffix icon class                                                                                                          | string / Component              | —                                                              | —            |
 | hide-loading                      | whether to hide the loading icon in remote search                                                                          | boolean                         | —                                                              | false        |
-| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | -                                                              | false        |
+| popper-append-to-body(deprecated) | whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false | boolean                         | —                                                              | false        |
 | teleported                        | whether select dropdown is teleported to the body                                                                          | boolean                         | true / false                                                   | true         |
 | highlight-first-item              | whether to highlight first item in remote search suggestions by default                                                    | boolean                         | —                                                              | false        |
+| fit-input-width                   | whether the width of the dropdown is the same as the input                                                                 | boolean                         | —                                                              | false        |
 
 ## Autocomplete Slots
 

docs/en-US/component/cascader.md

@@ -159,6 +159,7 @@ cascader/panel
 | teleported                        | whether cascader popup is teleported                                                                                                                                             | boolean                 | true / false                | true    |
 | popper-append-to-body(deprecated) | whether to append the popper menu to body. If the positioning of the popper is wrong, you can try to set this prop to false                                                      | boolean                 | -                           | true    |
 | tag-type                          | tag type                                                                                                                                                                         | string                  | success/info/warning/danger | info    |
+| validate-event                    | whether to trigger form validation                                                                                                                                               | boolean                 | -                           | true    |
 
 ## Cascader Events
 

docs/en-US/component/checkbox.md

@@ -89,6 +89,7 @@ checkbox/with-border
 | name                  | native 'name' attribute                                   | string                             | —                      | —       |
 | checked               | if the Checkbox is checked                                | boolean                            | —                      | false   |
 | indeterminate         | same as `indeterminate` in native checkbox                | boolean                            | —                      | false   |
+| validate-event        | whether to trigger form validation                        | boolean                            | -                      | true    |
 
 ## Checkbox Events
 
@@ -114,6 +115,7 @@ checkbox/with-border
 | label                 | label for screen reader                           | string  | —                      | —       |
 | text-color            | font color when button is active                  | string  | —                      | #ffffff |
 | fill                  | border and background color when button is active | string  | —                      | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean | -                      | true    |
 
 ## Checkbox-group Events
 

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

@@ -50,6 +50,7 @@ color-picker/sizes
 | color-format          | color format of v-model                      | string  | hsl / hsv / hex / rgb  | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
 | popper-class          | custom class name for ColorPicker's dropdown | string  | —                      | —                                                             |
 | predefine             | predefined color options                     | array   | —                      | —                                                             |
+| validate-event        | whether to trigger form validation           | boolean | -                      | true                                                          |
 
 ## Events
 

docs/en-US/component/form.md

@@ -140,6 +140,7 @@ form/accessibility
 | `validate-on-rule-change` | Whether to trigger validation when the `rules` prop is changed.                                                                | `boolean`                         | `true`    |
 | `size`                    | Control the size of components in this form.                                                                                   | `'large' \| 'default' \| 'small'` | —         |
 | `disabled`                | Whether to disable all components in this form. If set to `true`, it will override the `disabled` prop of the inner component. | `boolean`                         | `false`   |
+| `scroll-to-error`         | When validation fails, scroll to the first error form entry.                                                                   | `boolean`                         | `false`   |
 
 ### Form Methods
 

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

@@ -97,6 +97,7 @@ input-number/controlled
 | label                         | label text                                       | string                 | —               | —           |
 | placeholder                   | placeholder in input                             | string                 | -               | -           |
 | value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared    | string / number / null | min/max         | -           |
+| validate-event                | whether to trigger form validation               | boolean                | -               | true        |
 
 ## Events
 

docs/en-US/component/input.md

@@ -160,13 +160,13 @@ input/length-limiting
 
 ## Input Events
 
-| Event Name | Description                                                            | Parameters                |
-| ---------- | ---------------------------------------------------------------------- | ------------------------- |
-| blur       | triggers when Input blurs                                              | (event: Event)            |
-| focus      | triggers when Input focuses                                            | (event: Event)            |
-| change     | triggers only when the input box loses focus or the user presses Enter | (value: string \| number) |
-| input      | triggers when the Input value change                                   | (value: string \| number) |
-| clear      | triggers when the Input is cleared by clicking the clear button        | —                         |
+| Event Name | Description                                                                                           | Parameters                |
+| ---------- | ----------------------------------------------------------------------------------------------------- | ------------------------- |
+| blur       | triggers when Input blurs                                                                             | (event: Event)            |
+| focus      | triggers when Input focuses                                                                           | (event: Event)            |
+| change     | triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed | (value: string \| number) |
+| input      | triggers when the Input value change                                                                  | (value: string \| number) |
+| clear      | triggers when the Input is cleared by clicking the clear button                                       | —                         |
 
 ## Input Methods
 

docs/en-US/component/radio.md

@@ -87,6 +87,7 @@ radio/with-borders
 | disabled              | whether the nesting radios are disabled           | boolean                   | —                       | false   |
 | text-color            | font color when button is active                  | string                    | —                       | #ffffff |
 | fill                  | border and background color when button is active | string                    | —                       | #409EFF |
+| validate-event        | whether to trigger form validation                | boolean                   | -                       | true    |
 
 ## Radio-group Events
 

docs/en-US/component/select-v2.md

@@ -157,6 +157,7 @@ select-v2/remote-search
 | scrollbar-always-on               | Controls whether the scrollbar is always displayed                                                                                       | boolean                            | -                   | false         |
 | remote                            | whether search data from server                                                                                                          | boolean                            | —                   | false         |
 | remote-method                     | function that gets called when the input value changes. Its parameter is the current input value. To use this, `filterable` must be true | function(keyword: string)          | —                   | —             |
+| validate-event                    | whether to trigger form validation                                                                                                       | boolean                            | -                   | true          |
 
 <span style="display: none;">
 <!-- | default-first-option | 在输入框按下回车，选择第一个匹配项。需配合 `filterable` 或 `remote` 使用 | boolean | - | false |

docs/en-US/component/select.md

@@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
 | fit-input-width                   | whether the width of the dropdown is the same as the input                                                                  | boolean                            | —                           | false            |
 | suffix-icon                       | Custom suffix icon component                                                                                                | string / Component                 | —                           | ArrowUp          |
 | tag-type                          | tag type                                                                                                                    | string                             | success/info/warning/danger | info             |
+| validate-event                    | whether to trigger form validation                                                                                          | boolean                            | -                           | true             |
 
 ## Select Events