Merge branch 'dev' into feat/input-count-graphemes

docs/examples/autocomplete/remote-search.vue

@@ -31,7 +31,7 @@ const loadAll = () => {
   ]
 }
 
-let timeout: NodeJS.Timeout
+let timeout: ReturnType<typeof setTimeout>
 const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
   const results = queryString
     ? links.value.filter(createFilter(queryString))
@@ -50,7 +50,7 @@ const createFilter = (queryString: string) => {
   }
 }
 
-const handleSelect = (item: LinkItem) => {
+const handleSelect = (item: Record<string, any>) => {
   console.log(item)
 }
 

docs/examples/button/tag.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-button>button</el-button>
+  <el-button tag="div" role="button" tabindex="0">div</el-button>
+  <el-button
+    type="primary"
+    tag="a"
+    href="https://github.com/element-plus/element-plus"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    a
+  </el-button>
+</template>

docs/examples/calendar/header.vue

@@ -24,9 +24,11 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { CalendarDateType, CalendarInstance } from 'element-plus'
 
-const calendar = ref()
-const selectDate = (val: string) => {
+const calendar = ref<CalendarInstance>()
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return
   calendar.value.selectDate(val)
 }
 </script>

docs/examples/carousel/auto-height.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="block text-center" style="height: 300px">
+    <span class="demonstration">each carousel-item has a different height</span>
+    <el-carousel height="auto" autoplay>
+      <el-carousel-item style="height: 100px">
+        <h3 class="small justify-center" text="2xl">height 100px</h3>
+      </el-carousel-item>
+      <el-carousel-item style="height: 200px">
+        <h3 class="small justify-center" text="2xl">height 200px</h3>
+      </el-carousel-item>
+      <el-carousel-item style="height: 300px">
+        <h3 class="small justify-center" text="2xl">height 300px</h3>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<style scoped>
+.carousel-item {
+  color: #475669;
+  opacity: 0.75;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  text-align: center;
+  height: 100%;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>

docs/examples/carousel/vertical.vue

@@ -1,9 +1,21 @@
 <template>
+  <p class="text-center demonstration">normal vertical layout</p>
   <el-carousel height="200px" direction="vertical" :autoplay="false">
     <el-carousel-item v-for="item in 4" :key="item">
       <h3 text="2xl" justify="center">{{ item }}</h3>
     </el-carousel-item>
   </el-carousel>
+  <p class="text-center demonstration">card vertical layout</p>
+  <el-carousel
+    height="400px"
+    direction="vertical"
+    type="card"
+    :autoplay="false"
+  >
+    <el-carousel-item v-for="item in 4" :key="item">
+      <h3 text="2xl" justify="center">{{ item }}</h3>
+    </el-carousel-item>
+  </el-carousel>
 </template>
 
 <style scoped>

docs/examples/cascader/multiple-selection.vue

@@ -17,6 +17,17 @@
       clearable
     />
   </div>
+  <div class="m-4">
+    <p>Max Collapse Tags</p>
+    <el-cascader
+      :options="options"
+      :props="props"
+      collapse-tags
+      collapse-tags-tooltip
+      max-collapse-tags="3"
+      clearable
+    />
+  </div>
 </template>
 
 <script lang="ts" setup>

docs/examples/descriptions/customized-style.vue

@@ -25,10 +25,10 @@
   </el-descriptions>
 </template>
 <style scoped>
-.my-label {
-  background: var(--el-color-success-light-9);
+:deep(.my-label) {
+  background: var(--el-color-success-light-9) !important;
 }
-.my-content {
+:deep(.my-content) {
   background: var(--el-color-danger-light-9);
 }
 </style>

docs/examples/dropdown/dropdown-methods.vue

@@ -34,8 +34,11 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
-const dropdown1 = ref()
+import type { DropdownInstance } from 'element-plus'
+
+const dropdown1 = ref<DropdownInstance>()
 function handleVisible2(visible: any) {
+  if (!dropdown1.value) return
   if (visible) {
     dropdown1.value.handleClose()
   } else {
@@ -43,6 +46,7 @@ function handleVisible2(visible: any) {
   }
 }
 function showClick() {
+  if (!dropdown1.value) return
   dropdown1.value.handleOpen()
 }
 </script>

docs/examples/form/custom-validation.vue

@@ -79,7 +79,7 @@ const ruleForm = reactive({
   age: '',
 })
 
-const rules = reactive<FormRules>({
+const rules = reactive<FormRules<typeof ruleForm>>({
   pass: [{ validator: validatePass, trigger: 'blur' }],
   checkPass: [{ validator: validatePass2, trigger: 'blur' }],
   age: [{ validator: checkAge, trigger: 'blur' }],

docs/examples/form/inline-form.vue

@@ -1,14 +1,26 @@
 <template>
   <el-form :inline="true" :model="formInline" class="demo-form-inline">
     <el-form-item label="Approved by">
-      <el-input v-model="formInline.user" placeholder="Approved by" />
+      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
     </el-form-item>
     <el-form-item label="Activity zone">
-      <el-select v-model="formInline.region" placeholder="Activity zone">
+      <el-select
+        v-model="formInline.region"
+        placeholder="Activity zone"
+        clearable
+      >
         <el-option label="Zone one" value="shanghai" />
         <el-option label="Zone two" value="beijing" />
       </el-select>
     </el-form-item>
+    <el-form-item label="Activity time">
+      <el-date-picker
+        v-model="formInline.date"
+        type="date"
+        placeholder="Pick a date"
+        clearable
+      />
+    </el-form-item>
     <el-form-item>
       <el-button type="primary" @click="onSubmit">Query</el-button>
     </el-form-item>
@@ -21,9 +33,16 @@ import { reactive } from 'vue'
 const formInline = reactive({
   user: '',
   region: '',
+  date: '',
 })
 
 const onSubmit = () => {
   console.log('submit!')
 }
 </script>
+
+<style>
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+</style>

docs/examples/form/validation.vue

@@ -83,9 +83,21 @@
 import { reactive, ref } from 'vue'
 import type { FormInstance, FormRules } from 'element-plus'
 
+interface RuleForm {
+  name: string
+  region: string
+  count: string
+  date1: string
+  date2: string
+  delivery: boolean
+  type: string[]
+  resource: string
+  desc: string
+}
+
 const formSize = ref('default')
 const ruleFormRef = ref<FormInstance>()
-const ruleForm = reactive({
+const ruleForm = reactive<RuleForm>({
   name: 'Hello',
   region: '',
   count: '',
@@ -97,7 +109,7 @@ const ruleForm = reactive({
   desc: '',
 })
 
-const rules = reactive<FormRules>({
+const rules = reactive<FormRules<RuleForm>>({
   name: [
     { required: true, message: 'Please input Activity name', trigger: 'blur' },
     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },

docs/examples/menu/left-and-right.vue

@@ -6,7 +6,13 @@
     :ellipsis="false"
     @select="handleSelect"
   >
-    <el-menu-item index="0">LOGO</el-menu-item>
+    <el-menu-item index="0">
+      <img
+        style="width: 100px"
+        src="/images/element-plus-logo.svg"
+        alt="Element logo"
+      />
+    </el-menu-item>
     <div class="flex-grow" />
     <el-menu-item index="1">Processing Center</el-menu-item>
     <el-sub-menu index="2">

docs/examples/progress/circular-progress-bar.vue

@@ -8,10 +8,6 @@
   </div>
 </template>
 <style scoped>
-.demo-progress .el-progress--line {
-  margin-bottom: 15px;
-  width: 350px;
-}
 .demo-progress .el-progress--circle {
   margin-right: 15px;
 }

docs/examples/progress/striped-progress.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="demo-progress">
+    <el-progress :percentage="50" :stroke-width="15" striped />
+    <el-progress
+      :percentage="30"
+      :stroke-width="15"
+      status="warning"
+      striped
+      striped-flow
+    />
+    <el-progress
+      :percentage="100"
+      :stroke-width="15"
+      status="success"
+      striped
+      striped-flow
+      :duration="10"
+    />
+    <el-progress
+      :percentage="percentage"
+      :stroke-width="15"
+      status="exception"
+      striped
+      striped-flow
+      :duration="duration"
+    />
+    <el-button-group>
+      <el-button :icon="Minus" @click="decrease" />
+      <el-button :icon="Plus" @click="increase" />
+    </el-button-group>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { Minus, Plus } from '@element-plus/icons-vue'
+
+const percentage = ref<number>(70)
+const duration = computed(() => Math.floor(percentage.value / 10))
+
+const increase = () => {
+  percentage.value += 10
+  if (percentage.value > 100) {
+    percentage.value = 100
+  }
+}
+const decrease = () => {
+  percentage.value -= 10
+  if (percentage.value < 0) {
+    percentage.value = 0
+  }
+}
+</script>
+
+<style scoped>
+.demo-progress .el-progress--line {
+  margin-bottom: 15px;
+  width: 350px;
+}
+</style>

docs/examples/select/value-key.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="m-4">
+    <el-select v-model="value" value-key="id" placeholder="Select">
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.label"
+        :value="item"
+      />
+    </el-select>
+    <p>
+      selected option's description:
+      {{ value ? value.desc : 'no select' }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type Option = {
+  id: number
+  label: string
+  desc: string
+}
+const value = ref<Option>()
+const options = ref([
+  { id: 1, label: 'Option A', desc: 'Option A - 230506' },
+  { id: 2, label: 'Option B', desc: 'Option B - 230506' },
+  { id: 3, label: 'Option C', desc: 'Option C - 230506' },
+  { id: 4, label: 'Option A', desc: 'Option A - 230507' },
+])
+</script>

docs/examples/switch/custom-action-icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-switch
+    v-model="value1"
+    :active-action-icon="View"
+    :inactive-action-icon="Hide"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Hide, View } from '@element-plus/icons-vue'
+const value1 = ref(true)
+</script>

docs/examples/tabs/dynamic-tabs.vue

@@ -18,6 +18,7 @@
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue'
+import type { TabPaneName } from 'element-plus'
 
 let tabIndex = 2
 const editableTabsValue = ref('2')
@@ -34,7 +35,10 @@ const editableTabs = ref([
   },
 ])
 
-const handleTabsEdit = (targetName: string, action: 'remove' | 'add') => {
+const handleTabsEdit = (
+  targetName: TabPaneName | undefined,
+  action: 'remove' | 'add'
+) => {
   if (action === 'add') {
     const newTabName = `${++tabIndex}`
     editableTabs.value.push({

docs/examples/tooltip/singleton.vue

@@ -11,7 +11,7 @@
 
   <el-tooltip
     ref="tooltipRef"
-    v-model:visible="visible"
+    :visible="visible"
     :popper-options="{
       modifiers: [
         {
@@ -25,7 +25,6 @@
     }"
     :virtual-ref="buttonRef"
     virtual-triggering
-    trigger="click"
     popper-class="singleton-tooltip"
   >
     <template #content>

docs/examples/tree-v2/disabled.vue

@@ -6,6 +6,7 @@ interface Tree {
   id: string
   label: string
   children?: Tree[]
+  disabled: boolean
 }
 
 const getKey = (prefix: string, id: number) => {
@@ -32,6 +33,7 @@ const createData = (
         children: childrenNumber
           ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
           : undefined,
+        disabled: nodeKey.includes('2'),
       }
     })
 }

docs/examples/tree/filtering.vue

@@ -16,9 +16,7 @@ import { ref, watch } from 'vue'
 import { ElTree } from 'element-plus'
 
 interface Tree {
-  id: number
-  label: string
-  children?: Tree[]
+  [key: string]: any
 }
 
 const filterText = ref('')

docs/examples/upload/basic.vue

@@ -53,7 +53,7 @@ const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
 
 const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
   return ElMessageBox.confirm(
-    `Cancel the transfert of ${uploadFile.name} ?`
+    `Cancel the transfer of ${uploadFile.name} ?`
   ).then(
     () => true,
     () => false