Merge pull request #11993 from element-plus/dev

D2M
element-plus · Mar 13, 2023 · df7acd8 · df7acd8
2 parents 3a202b6 + a9ef3f0
commit df7acd8
Show file tree

Hide file tree

Showing 141 changed files with 1,754 additions and 419 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -1,4 +1,27 @@
 ## Changelog
+
+### 2.3.0
+
+_2023-03-12_
+
+#### Features
+
+- Components [select-v2] Add max-collapse-tags prop (#11405 by @kooriookami)
+- Components [select] Add max-collapse-tags prop (#11378 by @kooriookami)
+- Components [cascader] Adjust expose and typo (#11781 by @chenxch)
+- Components add el-text component (#11653 by @gimjin)
+
+#### Bug fixes
+
+- [message-box] lock scroll (#11921 by @jw-foss)
+- Components [popover | tooltip] keep autoClose prop (#11833 by @wangcch)
+- Components [table-v2] endReached triggered twice when first (#11928 by @MrWeilian)
+- Components [input] update input value length calculate (#11816 by @btea)
+- Components [loading] namespace config (#11956 by @btea)
+- Components [tooltip] remove mousemove listener when unmount (#11940 by @zt123123)
+- Style(components): [select-v2] input-icon margin-left (not first) (#11830 by @wangcch)
+- Chore(components): [pagination] accessibility improvement (#11817 by @tolking)
+- Style(theme-chalk): [rate] size (#11920 by @chenxch)
 
 ### 2.2.36
 

diff --git a/docs/.vitepress/crowdin/en-US/component/api-typing.json b/docs/.vitepress/crowdin/en-US/component/api-typing.json
@@ -0,0 +1,3 @@
+{
+  "detail": "Type details"
+}
diff --git a/docs/.vitepress/crowdin/en-US/component/navbar.json b/docs/.vitepress/crowdin/en-US/component/navbar.json
@@ -0,0 +1,4 @@
+{
+  "mobile-nav": "mobile navigation",
+  "theme-toggler": "toggle dark mode"
+}
diff --git a/docs/.vitepress/crowdin/en-US/component/skip-link.json b/docs/.vitepress/crowdin/en-US/component/skip-link.json
@@ -0,0 +1,3 @@
+{
+  "title": "Skip to content"
+}
diff --git a/docs/.vitepress/crowdin/en-US/component/translation.json b/docs/.vitepress/crowdin/en-US/component/translation.json
@@ -1,3 +1,4 @@
 {
-  "help": "Help Translate 😉"
+  "help": "Help Translate 😉",
+  "language": "Choose the language that you want"
 }
diff --git a/docs/.vitepress/crowdin/en-US/pages/component.json b/docs/.vitepress/crowdin/en-US/pages/component.json
@@ -30,6 +30,10 @@
         "link": "/link",
         "text": "Link"
       },
+      {
+        "link": "/text",
+        "text": "Text"
+      },
       {
         "link": "/scrollbar",
         "text": "Scrollbar"

diff --git a/docs/.vitepress/plugins/markdown-transform.ts b/docs/.vitepress/plugins/markdown-transform.ts
@@ -58,9 +58,14 @@ const combineMarkdown = (
   headers: string[],
   footers: string[]
 ) => {
-  const frontmatterEnds = code.indexOf('---\n\n') + 4
-  const firstSubheader = code.search(/\n## \w/)
-  const sliceIndex = firstSubheader < 0 ? frontmatterEnds : firstSubheader
+  const frontmatterEnds = code.indexOf('---\n\n')
+  const firstHeader = code.search(/\n#{1,6}\s.+/)
+  const sliceIndex =
+    firstHeader < 0
+      ? frontmatterEnds < 0
+        ? 0
+        : frontmatterEnds + 4
+      : firstHeader
 
   if (headers.length > 0)
     code =

diff --git a/docs/.vitepress/vitepress/components/common/vp-switch.vue b/docs/.vitepress/vitepress/components/common/vp-switch.vue
@@ -5,11 +5,11 @@
 </script>
 
 <template>
-  <div class="switch" role="switch">
+  <button class="switch" role="switch">
     <div class="switch__action">
       <div class="switch__icon">
         <slot />
       </div>
     </div>
-  </div>
+  </button>
 </template>
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,12 +1,19 @@
 <script setup lang="ts">
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
-import { toggleDark } from '../../composables/dark'
+import { isDark, toggleDark } from '../../composables/dark'
+import { useNavbarLocale } from '../../composables/navbar-locale'
+
+const locale = useNavbarLocale()
 </script>
 
 <template>
   <div class="full-screen-theme-toggler">
     <span>Theme</span>
-    <CommonThemeToggler @click="toggleDark()" />
+    <CommonThemeToggler
+      :aria-label="locale['theme-toggler']"
+      :aria-checked="isDark"
+      @click="toggleDark()"
+    />
   </div>
 </template>
 

diff --git a/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue b/docs/.vitepress/vitepress/components/full-screen/vp-translation.vue
@@ -6,7 +6,7 @@ import ExpandIcon from '../icons/expand.vue'
 
 const emit = defineEmits(['close'])
 
-const { languageMap, langs, lang, switchLang, helpTranslate } = useTranslation()
+const { languageMap, langs, lang, switchLang, locale } = useTranslation()
 
 const [show, toggle] = useToggle()
 
@@ -19,9 +19,12 @@ const onSwitchLang = (lang: string) => {
 <template>
   <div class="full-screen-translation">
     <ElButton
+      :aria-label="locale.language"
+      :aria-expanded="show"
+      aria-controls="translation-items"
       style="width: 100%; color: var(--text-color)"
       text
-      @click="toggle"
+      @click="toggle()"
     >
       <div class="translation-toggler">
         <span> Translations </span>
@@ -35,14 +38,18 @@ const onSwitchLang = (lang: string) => {
         v-for="l in langs"
         :key="l"
         :class="{ active: l === lang }"
+        tabindex="0"
+        role="link"
         class="translation-item"
         @click="onSwitchLang(l)"
+        @keydown.prevent.enter="onSwitchLang(l)"
+        @keydown.prevent.space="onSwitchLang(l)"
       >
         {{ languageMap[l] }}
       </p>
       <p class="translation-item">
         <VPLink :href="`/${lang}/guide/translation`">
-          {{ helpTranslate }}
+          {{ locale.help }}
         </VPLink>
       </p>
     </div>

diff --git a/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue b/docs/.vitepress/vitepress/components/globals/vp-api-typing.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Warning } from '@element-plus/icons-vue'
+import { useLang } from '../../composables/lang'
+import apiTypingLocale from '../../../i18n/component/api-typing.json'
 
 defineProps({
   type: String,
   details: String,
 })
+
+const lang = useLang()
+const detail = computed(() => apiTypingLocale[lang.value].detail)
 </script>
 
 <template>
@@ -14,7 +20,12 @@ defineProps({
     </code>
     <ClientOnly>
       <ElTooltip v-if="details" effect="light" trigger="click">
-        <ElButton text :icon="Warning" class="p-2 text-4" />
+        <ElButton
+          text
+          :icon="Warning"
+          :aria-label="detail"
+          class="p-2 text-4"
+        />
         <template #content>
           <slot>
             <div class="m-1">

diff --git a/docs/.vitepress/vitepress/components/navbar/vp-hamburger.vue b/docs/.vitepress/vitepress/components/navbar/vp-hamburger.vue
@@ -1,13 +1,23 @@
 <script setup lang="ts">
+import { useNavbarLocale } from '../../composables/navbar-locale'
+
 defineProps<{
   active: boolean
 }>()
+
+const locale = useNavbarLocale()
 </script>
 
 <template>
-  <div :class="{ 'menu-hamburger': true, active }" role="button">
+  <button
+    :class="{ active }"
+    :aria-label="locale['mobile-nav']"
+    :aria-expanded="active"
+    aria-controls="full-screen"
+    class="reset-btn menu-hamburger"
+  >
     <span class="hamburger-1" />
     <span class="hamburger-2" />
     <span class="hamburger-3" />
-  </div>
+  </button>
 </template>
diff --git a/docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue b/docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue
@@ -1,11 +1,18 @@
 <script setup lang="ts">
-import { toggleDark } from '../../composables/dark'
+import { isDark, toggleDark } from '../../composables/dark'
+import { useNavbarLocale } from '../../composables/navbar-locale'
 import CommonThemeToggler from '../common/vp-theme-toggler.vue'
+
+const locale = useNavbarLocale()
 </script>
 
 <template>
   <div class="theme-toggler-content">
-    <CommonThemeToggler @click="() => toggleDark()" />
+    <CommonThemeToggler
+      :aria-label="locale['theme-toggler']"
+      :aria-checked="isDark"
+      @click="() => toggleDark()"
+    />
   </div>
 </template>
 

diff --git a/docs/.vitepress/vitepress/components/navbar/vp-translation.vue b/docs/.vitepress/vitepress/components/navbar/vp-translation.vue
@@ -1,37 +1,38 @@
 <script setup lang="ts">
-import VPLink from '../common/vp-link.vue'
+import { useRouter } from 'vitepress'
 import { useTranslation } from '../../composables/translation'
 
-const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
+const router = useRouter()
+const { switchLang, languageMap, langs, lang, locale } = useTranslation()
+
+const toTranslation = () => {
+  router.go(`/${lang.value}/guide/translation`)
+}
 </script>
 
 <template>
   <div class="translation-container">
     <ClientOnly>
-      <ElPopover
-        :show-arrow="false"
-        trigger="hover"
-        popper-class="translation-popup"
-      >
-        <template #reference>
-          <ElIcon :size="24">
-            <i-ri-translate-2 />
-          </ElIcon>
+      <ElDropdown popper-class="translation-popup" role="navigation">
+        <ElIcon :size="24" :aria-label="locale.language">
+          <i-ri-translate-2 />
+        </ElIcon>
+        <template #dropdown>
+          <ElDropdownMenu>
+            <ElDropdownItem
+              v-for="l in langs"
+              :key="l"
+              :class="{ language: true, selected: l === lang }"
+              @click="switchLang(l)"
+            >
+              {{ languageMap[l] }}
+            </ElDropdownItem>
+            <ElDropdownItem class="language selected" @click="toTranslation">
+              {{ locale.help }}
+            </ElDropdownItem>
+          </ElDropdownMenu>
         </template>
-        <div
-          v-for="l in langs"
-          :key="l"
-          :class="{ language: true, selected: l === lang }"
-          @click="switchLang(l)"
-        >
-          {{ languageMap[l] }}
-        </div>
-        <div class="language">
-          <VPLink :href="`/${lang}/guide/translation`">
-            {{ helpTranslate }}
-          </VPLink>
-        </div>
-      </ElPopover>
+      </ElDropdown>
     </ClientOnly>
   </div>
 </template>
@@ -46,21 +47,28 @@ const { switchLang, languageMap, langs, lang, helpTranslate } = useTranslation()
   @include respond-to('md') {
     display: block;
   }
+}
+</style>
+
+<style lang="scss">
+.el-dropdown__popper.translation-popup {
+  --el-bg-color-overlay: var(--bg-color);
+  --el-popper-border-radius: 8px;
+  --el-border-color-light: transparent;
 
-  @at-root .translation-popup.el-popper {
-    box-shadow: var(--el-box-shadow);
+  padding: 7px 0;
+  min-width: 192px;
+  transition: background-color 0.5s;
 
-    .language {
-      cursor: pointer;
-      padding: 0 16px;
-      line-height: 28px;
-      &.selected {
-        color: var(--brand-color);
-      }
+  .el-popper__arrow {
+    display: none;
+  }
 
-      .link-item {
-        font-weight: 500;
-      }
+  .language {
+    padding: 0 16px;
+    line-height: 28px;
+    &.selected {
+      --el-text-color-regular: var(--brand-color);
     }
   }
 }

diff --git a/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue b/docs/.vitepress/vitepress/components/subnav/toggle-sidebar-btn.vue
@@ -3,12 +3,12 @@ import ToggleButton from '../icons/toggle-button.vue'
 </script>
 
 <template>
-  <div class="sidebar-button flex items-center">
+  <button class="reset-btn sidebar-button flex items-center">
     <ElIcon :size="20" class="mr-2">
       <ToggleButton />
     </ElIcon>
     <span class="leading-6">Menu</span>
-  </div>
+  </button>
 </template>
 
 <style>