Merge pull request #16319 from element-plus/dev

D2M

CHANGELOG.en-US.md

@@ -1,4 +1,23 @@
 ## Changelog
+
+### 2.6.3
+
+_2024-03-29_
+
+#### Features
+
+- Components [tree] lazy load provide reject (#16099 by @btea)
+- Locale update ru locale (#16192 by @VisualYuki)
+- Components [message] add plain prop (#16214 by @kooriookami)
+- Components [input-number] support slot custom icons (#16275 by @selicens)
+- Components [badge] add color prop (#16069 by @lxw15337674)
+
+#### Bug fixes
+
+- Components [icon] remove repeat style (#16242 by @Fuphoenixes)
+- Components [select] fix error in low versions of vue (#16234 by @kooriookami)
+- Components [date-picker] click the clear to reset the date panel (#15835 by @Ganlvin)
+- Components [tree] dragging a node will deselect the node (#14830 by @Alixhan)
 
 ### 2.6.2
 

docs/.vitepress/vitepress/components/globals/overview.vue

@@ -25,8 +25,10 @@
  <el-card
  v-for="(item, index) in group.children"
  :key="index"
+ tabindex="0"
  shadow="hover"
  @click="toPage(item.link)"
+ @keydown.enter="toPage(item.link)"
  >
  <template #header>
  <el-text truncated>{{ item.text }}</el-text>
@@ -140,6 +142,12 @@ const getIcon = (link: string) => {
 
  :deep(.el-card) {
  cursor: pointer;
+ transition: none;
+
+ &:focus-visible {
+ outline: 2px solid var(--el-color-primary);
+ outline-offset: 1px;
+ }
 
  .el-card__header {
  display: flex;

docs/en-US/component/badge.md

@@ -51,14 +51,15 @@ badge/dot
 
 ### Attributes
 
-| Name | Description | Type | Default |
-| ------------------ | ----------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------- |
-| value | display value. | ^[string] / ^[number] | '' |
-| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
-| is-dot | if a little dot is displayed. | ^[boolean] | false |
-| hidden | hidden badge. | ^[boolean] | false |
-| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
-| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
+| Name | Description | Type | Default |
+| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | ------- |
+| value | display value. | ^[string] / ^[number] | '' |
+| max | maximum value, shows `{max}+` when exceeded. Only works if value is a number. | ^[number] | 99 |
+| is-dot | if a little dot is displayed. | ^[boolean] | false |
+| hidden | hidden badge. | ^[boolean] | false |
+| type | badge type. | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'` | danger |
+| show-zero ^(2.6.0) | Whether to show badge when value is zero. | ^[boolean] | true |
+| color ^(2.6.3) | background color of the dot | ^[string] | |
 
 ### Slots
 

docs/en-US/component/dropdown.md

@@ -95,7 +95,7 @@ dropdown/sizes
 | placement | placement of pop menu | string | top/top-start/top-end/bottom/bottom-start/bottom-end | bottom |
 | trigger | how to trigger | string | hover/click/contextmenu | hover |
 | hide-on-click | whether to hide menu after clicking menu-item | boolean | — | true |
-| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 250 |
+| show-timeout | Delay time before show a dropdown (only works when trigger is `hover`) | number | — | 150 |
 | hide-timeout | Delay time before hide a dropdown (only works when trigger is `hover`) | number | — | 150 |
 | role | The ARIA role attribute for the dropdown menu. Depending on the use case, you may want to change this to 'navigation' | string | — | 'menu' |
 | tabindex | [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) of Dropdown | number | — | 0 |

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

@@ -79,6 +79,14 @@ input-number/controlled
 
 :::
 
+## Custom Icon ^(2.6.3)
+
+:::demo Use `decrease-icon` and `increase-icon` to set custom icons.
+
+input-number/custom
+
+:::
+
 ## API
 
 ### Attributes
@@ -103,6 +111,13 @@ input-number/controlled
 | value-on-clear ^(2.2.0) | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — |
 | validate-event | whether to trigger form validation | ^[boolean] | true |
 
+### Slots
+
+| Name | Description |
+| ---------------------- | ------------------------------------- |
+| decrease-icon ^(2.6.3) | custom input box button decrease icon |
+| increase-icon ^(2.6.3) | custom input box button increase icon |
+
 ### Events
 
 | Name | Description | Type |

docs/en-US/component/message.md

@@ -27,6 +27,16 @@ message/different-types
 
 :::
 
+## Plain ^(2.6.3)
+
+Set `plain` to have a plain background.
+
+:::demo
+
+message/plain
+
+:::
+
 ## Closable
 
 A close button can be added.
@@ -85,7 +95,7 @@ import { ElMessage } from 'element-plus'
 
 In this case you should call `ElMessage(options)`. We have also registered methods for different types, e.g. `ElMessage.success(options)`. You can call `ElMessage.closeAll()` to manually close all the instances.
 
-## App context inheritance <el-tag> >= 2.0.3</el-tag>
+## App context inheritance ^(2.0.3)
 
 Now message accepts a `context` as second parameter of the message constructor which allows you to inject current app's context to message which allows you to inherit all the properties of the app.
 
@@ -111,9 +121,10 @@ ElMessage({}, appContext)
 ### Options
 
 | Name | Description | Type | Default |
-| ------------------------ | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | ------- |
+|--------------------------|------------------------------------------------------------------------------------------------------|------------------------------------------------------|---------|
 | message | message text | ^[string] / ^[VNode] / ^[Function]`() => VNode` | '' |
 | type | message type | ^[enum]`'success' \| 'warning' \| 'info' \| 'error'` | info |
+| plain ^(2.6.3) | whether message is plain | ^[boolean] | false |
 | icon | custom icon component, overrides `type` | ^[string] / ^[Component] | — |
 | dangerouslyUseHTMLString | whether `message` is treated as HTML string | ^[boolean] | false |
 | customClass | custom class name for Message | ^[string] | '' |

docs/en-US/component/select.md

@@ -9,6 +9,12 @@ When there are plenty of options, use a drop-down menu to display and select des
 
 :::tip
 
+After version `2.5.0`, the default width of `el-select` changed to `100%`. When used in a inline form, the width will collapse. In order to display the width properly, you need to give `el-select` a specific width.
+
+:::
+
+:::tip
+
 This component requires the `<client-only></client-only>` wrap when used in SSR (eg: [Nuxt](https://nuxt.com/v3)) and SSG (eg: [VitePress](https://vitepress.vuejs.org/)).
 
 :::

docs/en-US/component/tree.md

@@ -35,6 +35,14 @@ tree/custom-leaf
 
 :::
 
+## Lazy loading multiple times ^(2.6.3)
+
+:::demo When lazily loading node data remotely, lazy loading may sometimes fail. In this case, you can call reject to keep the node status as is and allow remote loading to continue.
+
+tree/multiple-times-load
+
+:::
+
 ## Disabled checkbox
 
 The checkbox of a node can be set as disabled.
@@ -122,7 +130,7 @@ tree/draggable
 | node-key | unique identity key name for nodes, its value should be unique across the whole tree | string | — | — |
 | props | configuration options, see the following table | object | — | — |
 | render-after-expand | whether to render child nodes only after a parent node is expanded for the first time | boolean | — | true |
-| load | method for loading subtree data, only works when `lazy` is true | function(node, resolve)  | — | — |
+| load | method for loading subtree data, only works when `lazy` is true | function(node, resolve, reject) | — | — |
 | render-content | render function for tree node | Function(h, `{ node, data, store }`) | — | — |
 | highlight-current | whether current node is highlighted | boolean | — | false |
 | default-expand-all | whether to expand all nodes by default | boolean | — | false |

docs/examples/badge/basic.vue

@@ -11,7 +11,9 @@
  <el-badge :value="2" class="item" type="warning">
  <el-button>replies</el-button>
  </el-badge>
-
+ <el-badge :value="1" class="item" color="green">
+ <el-button>custom background</el-button>
+ </el-badge>
  <el-dropdown trigger="click">
  <span class="el-dropdown-link">
  Click Me
@@ -39,7 +41,7 @@ import { CaretBottom } from '@element-plus/icons-vue'
 <style scoped>
 .item {
  margin-top: 10px;
- margin-right: 40px;
+ margin-right: 30px;
 }
 
 .el-dropdown {

docs/examples/datetime-picker/date-and-time-range.vue

@@ -37,7 +37,7 @@ const shortcuts = [
  value: () => {
  const end = new Date()
  const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
+ start.setDate(start.getDate() - 7)
  return [start, end]
  },
  },
@@ -46,7 +46,7 @@ const shortcuts = [
  value: () => {
  const end = new Date()
  const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
+ start.setMonth(start.getMonth() - 1)
  return [start, end]
  },
  },
@@ -55,7 +55,7 @@ const shortcuts = [
  value: () => {
  const end = new Date()
  const start = new Date()
- start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
+ start.setMonth(start.getMonth() - 3)
  return [start, end]
  },
  },

docs/examples/datetime-picker/date-and-time.vue

@@ -46,15 +46,15 @@ const shortcuts = [
  text: 'Yesterday',
  value: () => {
  const date = new Date()
- date.setTime(date.getTime() - 3600 * 1000 * 24)
+ date.setDate(date.getDate() - 1)
  return date
  },
  },
  {
  text: 'A week ago',
  value: () => {
  const date = new Date()
- date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
+ date.setDate(date.getDate() - 7)
  return date
  },
  },

docs/examples/input-number/custom.vue

@@ -0,0 +1,41 @@
+<template>
+ <el-space direction="vertical">
+ <el-space>
+ <el-input-number v-model="num" />
+ <el-input-number v-model="num">
+ <template #decrement-icon>
+ <el-icon>
+ <ArrowDown />
+ </el-icon>
+ </template>
+ <template #increase-icon>
+ <el-icon>
+ <ArrowUp />
+ </el-icon>
+ </template>
+ </el-input-number>
+ </el-space>
+ <el-space>
+ <el-input-number v-model="num" controls-position="right" />
+ <el-input-number v-model="num" controls-position="right">
+ <template #decrement-icon>
+ <el-icon>
+ <Minus />
+ </el-icon>
+ </template>
+ <template #increase-icon>
+ <el-icon>
+ <Plus />
+ </el-icon>
+ </template>
+ </el-input-number>
+ </el-space>
+ </el-space>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ArrowDown, ArrowUp, Minus, Plus } from '@element-plus/icons-vue'
+
+const num = ref(1)
+</script>

docs/examples/message/plain.vue

@@ -0,0 +1,39 @@
+<template>
+ <el-button :plain="true" @click="open1">Success</el-button>
+ <el-button :plain="true" @click="open2">Warning</el-button>
+ <el-button :plain="true" @click="open3">Message</el-button>
+ <el-button :plain="true" @click="open4">Error</el-button>
+</template>
+
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+
+const open1 = () => {
+ ElMessage({
+ message: 'Congrats, this is a success message.',
+ type: 'success',
+ plain: true,
+ })
+}
+const open2 = () => {
+ ElMessage({
+ message: 'Warning, this is a warning message.',
+ type: 'warning',
+ plain: true,
+ })
+}
+const open3 = () => {
+ ElMessage({
+ message: 'This is a message.',
+ type: 'info',
+ plain: true,
+ })
+}
+const open4 = () => {
+ ElMessage({
+ message: 'Oops, this is a error message.',
+ type: 'error',
+ plain: true,
+ })
+}
+</script>

docs/examples/tree/multiple-times-load.vue

@@ -0,0 +1,43 @@
+<template>
+ <el-tree style="max-width: 600px" :props="props" :load="loadNode" lazy />
+</template>
+
+<script lang="ts" setup>
+import type Node from 'element-plus/es/components/tree/src/model/node'
+
+interface Tree {
+ name: string
+ leaf?: boolean
+}
+
+const props = {
+ label: 'name',
+ children: 'zones',
+ isLeaf: 'leaf',
+}
+
+let time = 0
+const loadNode = (
+ node: Node,
+ resolve: (data: Tree[]) => void,
+ reject: () => void
+) => {
+ if (node.level === 0) {
+ return resolve([{ name: 'region' }])
+ }
+ time++
+ if (node.level >= 1) {
+ setTimeout(() => {
+ if (time > 3) {
+ return resolve([
+ { name: 'zone1', leaf: true },
+ { name: 'zone2', leaf: true },
+ { name: 'zone3', leaf: true },
+ ])
+ } else {
+ return reject()
+ }
+ }, 3000)
+ }
+}
+</script>

packages/components/badge/src/badge.ts

@@ -39,5 +39,9 @@ export const badgeProps = buildProps({
  type: Boolean,
  default: true,
  },
+ /**
+ * @description background color of the Badge
+ */
+ color: String,
 } as const)
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>

packages/components/badge/src/badge.vue

@@ -10,6 +10,7 @@
  ns.is('fixed', !!$slots.default),
  ns.is('dot', isDot),
  ]"
+ :style="{ backgroundColor: color }"
  v-text="content"
  />
  </transition>