diff --git a/.github/triage.yml b/.github/triage.yml
index 0ce71fa529..abad4de1a7 100644
--- a/.github/triage.yml
+++ b/.github/triage.yml
@@ -14,4 +14,4 @@ PRGreetings: |
- You can comment with `/label Components:[component_name]` to add a label for which component you are working on.
- You may join our 
for staying tuned.
firstPRMergeComment: >
- Thank you for your contribution!
\ No newline at end of file
+ Thank you for your contribution!
diff --git a/docs/.vitepress/config/head.ts b/docs/.vitepress/config/head.ts
index d82ff32697..9864ba916a 100644
--- a/docs/.vitepress/config/head.ts
+++ b/docs/.vitepress/config/head.ts
@@ -51,6 +51,13 @@ export const head: HeadConfig[] = [
content: '/browserconfig.xml',
},
],
+ [
+ 'meta',
+ {
+ property: 'og:image',
+ content: '/images/element-plus-og-image.png',
+ },
+ ],
[
'script',
{},
diff --git a/docs/en-US/component/cascader.md b/docs/en-US/component/cascader.md
index b23d72cf57..aacec4e1f2 100644
--- a/docs/en-US/component/cascader.md
+++ b/docs/en-US/component/cascader.md
@@ -64,7 +64,7 @@ Do:
```
diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md
index e54fbdf4c5..712e00bf95 100644
--- a/docs/en-US/component/image.md
+++ b/docs/en-US/component/image.md
@@ -59,26 +59,26 @@ image/image-preview
### Image Attributes
-| Name | Description | Type | Default |
-| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | --------- |
-| src | image source, same as native. | ^[string] | '' |
-| fit | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | ^[enum]`'' \| 'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | '' |
-| hide-on-click-modal | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | ^[boolean] | false |
-| loading ^(2.2.3) | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading). | ^[enum]`'eager' \| 'lazy'` | — |
-| lazy | whether to use lazy load. | ^[boolean] | false |
-| scroll-container | the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load. | ^[string] / ^[object]`HTMLElement` | — |
-| alt | native attribute `alt`. | ^[string] | — |
-| referrerpolicy | native attribute [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy). | ^[string] | — |
-| crossorigin | native attribute [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). | ^[enum]`'' \| 'anonymous' \| 'use-credentials'` | — |
-| preview-src-list | allow big image preview. | ^[object]`string[]` | [] |
-| z-index | set image preview z-index. | ^[number] | — |
-| initial-index | initial preview image index, less than the length of `url-list`. | ^[number] | 0 |
-| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true |
-| preview-teleported | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false |
-| infinite | whether the viewer preview is infinite. | ^[boolean] | true |
-| zoom-rate | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 |
-| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 |
-| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 |
+| Name | Description | Type | Default |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ------- |
+| src | image source, same as native. | ^[string] | '' |
+| fit | indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit). | ^[enum]`'' \| 'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | '' |
+| hide-on-click-modal | when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. | ^[boolean] | false |
+| loading ^(2.2.3) | Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading). | ^[enum]`'eager' \| 'lazy'` | — |
+| lazy | whether to use lazy load. | ^[boolean] | false |
+| scroll-container | the container to add scroll listener when using lazy load. By default, the container to add scroll listener when using lazy load. | ^[string] / ^[object]`HTMLElement` | — |
+| alt | native attribute `alt`. | ^[string] | — |
+| referrerpolicy | native attribute [referrerPolicy](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/referrerPolicy). | ^[string] | — |
+| crossorigin | native attribute [crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin). | ^[enum]`'' \| 'anonymous' \| 'use-credentials'` | — |
+| preview-src-list | allow big image preview. | ^[object]`string[]` | [] |
+| z-index | set image preview z-index. | ^[number] | — |
+| initial-index | initial preview image index, less than the length of `url-list`. | ^[number] | 0 |
+| close-on-press-escape | whether the image-viewer can be closed by pressing ESC. | ^[boolean] | true |
+| preview-teleported | whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. | ^[boolean] | false |
+| infinite | whether the viewer preview is infinite. | ^[boolean] | true |
+| zoom-rate | the zoom rate of the image viewer zoom event. | ^[number] | 1.2 |
+| min-scale ^(2.4.0) | the min scale of the image viewer zoom event. | ^[number] | 0.2 |
+| max-scale ^(2.4.0) | the max scale of the image viewer zoom event. | ^[number] | 7 |
### Image Events
diff --git a/docs/en-US/component/link.md b/docs/en-US/component/link.md
index 1d824b253e..17e5c7882e 100644
--- a/docs/en-US/component/link.md
+++ b/docs/en-US/component/link.md
@@ -58,12 +58,12 @@ link/with-icon
### Attributes
| Name | Description | Type | Default |
-| --------- | ----------------------------------- | ------------------------------------------------------------------------------- | ------- |
+| --------- | ----------------------------------- | ------------------------------------------------------------------------------- | ------- | -------- | --- |
| type | type | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'default'` | default |
| underline | whether the component has underline | ^[boolean] | true |
| disabled | whether the component is disabled | ^[boolean] | false |
| href | same as native hyperlink's `href` | ^[string] | — |
-| target | same as native hyperlink's `target` | ^[enum]`'_blank' \| '_parent' \| '_self' \| '_top'` | _self |[string] | — |
+| target | same as native hyperlink's `target` | ^[enum]`'_blank' \| '_parent' \| '_self' \| '_top'` | \_self | [string] | — |
| icon | icon component | ^[string] / ^[Component] | — |
### Slots
diff --git a/docs/en-US/component/select-v2.md b/docs/en-US/component/select-v2.md
index bfc5eedeff..bdb4eed63b 100644
--- a/docs/en-US/component/select-v2.md
+++ b/docs/en-US/component/select-v2.md
@@ -202,7 +202,7 @@ select-v2/custom-loading
### Attributes
| Name | Description | Type | Default |
-|-------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
+| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| model-value / v-model | biding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — |
| options | data of the options, the key of `value` and `label` can be customize by `props` | ^[array] | — |
| props ^(2.4.2) | configuration options, see the following table | ^[object] | — |
@@ -247,7 +247,7 @@ select-v2/custom-loading
### props
| Attribute | Description | Type | Default |
-|-----------|-----------------------------------------------------------------|-----------|----------|
+| --------- | --------------------------------------------------------------- | --------- | -------- |
| value | specify which key of node object is used as the node's value | ^[string] | value |
| label | specify which key of node object is used as the node's label | ^[string] | label |
| options | specify which key of node object is used as the node's children | ^[string] | options |
@@ -267,7 +267,7 @@ select-v2/custom-loading
### Slots
| Name | Description |
-|------------------|---------------------------------------|
+| ---------------- | ------------------------------------- |
| default | Option renderer |
| header ^(2.5.2) | content at the top of the dropdown |
| footer ^(2.5.2) | content at the bottom of the dropdown |
@@ -279,6 +279,6 @@ select-v2/custom-loading
### Exposes
| Method | Description | Type |
-|--------|-------------------------------------------------|-------------------------|
+| ------ | ----------------------------------------------- | ----------------------- |
| focus | focus the Input component | ^[Function]`() => void` |
| blur | blur the Input component, and hide the dropdown | ^[Function]`() => void` |
diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index 042db22348..a8368fd12e 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -164,7 +164,7 @@ select/custom-loading
### Select Attributes
| Name | Description | Type | Default |
-| ------------------------------- |-----------------------------------------------------------------------------------------------------------------------| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] / ^[object] / ^[array] | — |
| multiple | whether multiple-select is activated | ^[boolean] | false |
| disabled | whether Select is disabled | ^[boolean] | false |
@@ -225,7 +225,7 @@ select/custom-loading
### Select Slots
| Name | Description | Subtags |
-|------------------|---------------------------------------|-----------------------|
+| ---------------- | ------------------------------------- | --------------------- |
| default | option component list | Option Group / Option |
| header ^(2.4.3) | content at the top of the dropdown | — |
| footer ^(2.4.3) | content at the bottom of the dropdown | — |
diff --git a/docs/public/images/element-plus-og-image.png b/docs/public/images/element-plus-og-image.png
new file mode 100644
index 0000000000..ed110d9ef7
Binary files /dev/null and b/docs/public/images/element-plus-og-image.png differ
diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss
index a410b2a25f..3603a59f9d 100644
--- a/packages/theme-chalk/src/common/var.scss
+++ b/packages/theme-chalk/src/common/var.scss
@@ -452,43 +452,43 @@ $select-dropdown: map.merge(
$select-wrapper-padding: () !default;
$select-wrapper-padding: map.merge(
- (
- 'large': 8px 16px,
- 'default': 4px 12px,
- 'small': 2px 8px,
- ),
- $select-wrapper-padding
+ (
+ 'large': 8px 16px,
+ 'default': 4px 12px,
+ 'small': 2px 8px,
+ ),
+ $select-wrapper-padding
);
$select-near-margin-left: () !default;
$select-near-margin-left: map.merge(
- (
- 'large': -8px,
- 'default': -8px,
- 'small': -6px,
- ),
- $select-near-margin-left
+ (
+ 'large': -8px,
+ 'default': -8px,
+ 'small': -6px,
+ ),
+ $select-near-margin-left
);
$select-item-gap: () !default;
$select-item-gap: map.merge(
- (
- 'large': 6px,
- 'default': 6px,
- 'small': 4px,
- ),
- $select-item-gap
+ (
+ 'large': 6px,
+ 'default': 6px,
+ 'small': 4px,
+ ),
+ $select-item-gap
);
// the same height of el-tag
$select-item-height: () !default;
$select-item-height: map.merge(
- (
- 'large': 24px,
- 'default': 24px,
- 'small': 20px,
- ),
- $select-item-height
+ (
+ 'large': 24px,
+ 'default': 24px,
+ 'small': 20px,
+ ),
+ $select-item-height
);
// Alert
diff --git a/packages/theme-chalk/src/form.scss b/packages/theme-chalk/src/form.scss
index 4e77b5cade..3734dbc020 100644
--- a/packages/theme-chalk/src/form.scss
+++ b/packages/theme-chalk/src/form.scss
@@ -7,52 +7,52 @@
$form-item-margin-bottom: () !default;
$form-item-margin-bottom: map.merge(
- (
- 'large': 22px,
- 'default': 18px,
- 'small': 18px,
- ),
- $form-item-margin-bottom
+ (
+ 'large': 22px,
+ 'default': 18px,
+ 'small': 18px,
+ ),
+ $form-item-margin-bottom
);
$form-item-line-height: () !default;
$form-item-line-height: map.merge(
- (
- 'large': 40px,
- 'default': 32px,
- 'small': 24px,
- ),
- $form-item-line-height
+ (
+ 'large': 40px,
+ 'default': 32px,
+ 'small': 24px,
+ ),
+ $form-item-line-height
);
$form-item-error-padding-top: () !default;
$form-item-error-padding-top: map.merge(
- (
- 'large': 4px,
- 'default': 2px,
- 'small': 2px,
- ),
- $form-item-error-padding-top
+ (
+ 'large': 4px,
+ 'default': 2px,
+ 'small': 2px,
+ ),
+ $form-item-error-padding-top
);
$form-item-label-top-line-height: () !default;
$form-item-label-top-line-height: map.merge(
- (
- 'large': 22px,
- 'default': 22px,
- 'small': 20px,
- ),
- $form-item-label-top-line-height
+ (
+ 'large': 22px,
+ 'default': 22px,
+ 'small': 20px,
+ ),
+ $form-item-label-top-line-height
);
$form-item-label-top-margin-bottom: () !default;
$form-item-label-top-margin-bottom: map.merge(
- (
- 'large': 12px,
- 'default': 8px,
- 'small': 4px,
- ),
- $form-item-label-top-margin-bottom
+ (
+ 'large': 12px,
+ 'default': 8px,
+ 'small': 4px,
+ ),
+ $form-item-label-top-margin-bottom
);
@include b(form) {
@@ -196,7 +196,7 @@ $form-item-label-top-margin-bottom: map.merge(
&.asterisk-left {
> .#{$namespace}-form-item__label:before,
> .#{$namespace}-form-item__label-wrap
- > .#{$namespace}-form-item__label:before {
+ > .#{$namespace}-form-item__label:before {
content: '*';
color: getCssVar('color-danger');
margin-right: 4px;
@@ -205,7 +205,7 @@ $form-item-label-top-margin-bottom: map.merge(
&.asterisk-right {
> .#{$namespace}-form-item__label:after,
> .#{$namespace}-form-item__label-wrap
- > .#{$namespace}-form-item__label:after {
+ > .#{$namespace}-form-item__label:after {
content: '*';
color: getCssVar('color-danger');
margin-left: 4px;
@@ -218,7 +218,10 @@ $form-item-label-top-margin-bottom: map.merge(
.#{$namespace}-input__wrapper,
.#{$namespace}-textarea__inner,
.#{$namespace}-select__wrapper {
- &, &:hover, &:focus, &.is-focus {
+ &,
+ &:hover,
+ &:focus,
+ &.is-focus {
box-shadow: 0 0 0 1px getCssVar('color-danger') inset;
}
}
diff --git a/packages/theme-chalk/src/input.scss b/packages/theme-chalk/src/input.scss
index 13ef5a228c..60ffe97749 100644
--- a/packages/theme-chalk/src/input.scss
+++ b/packages/theme-chalk/src/input.scss
@@ -6,22 +6,22 @@
@mixin inset-prepend-border($color) {
box-shadow: 1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
- 0 -1px 0 0 $color inset;
+ 0 -1px 0 0 $color inset;
}
@mixin inset-append-border($color) {
box-shadow: 0 1px 0 0 $color inset, 0 -1px 0 0 $color inset,
- -1px 0 0 0 $color inset;
+ -1px 0 0 0 $color inset;
}
@mixin inset-prepend-input-border($color) {
box-shadow: 1px 0 0 0 $color inset, 1px 0 0 0 $color, 0 1px 0 0 $color inset,
- 0 -1px 0 0 $color inset !important;
+ 0 -1px 0 0 $color inset !important;
}
@mixin inset-append-input-border($color) {
box-shadow: -1px 0 0 0 $color, -1px 0 0 0 $color inset, 0 1px 0 0 $color inset,
- 0 -1px 0 0 $color inset !important;
+ 0 -1px 0 0 $color inset !important;
}
@mixin mixed-input-border($color) {
@@ -50,32 +50,32 @@
font-size: inherit;
font-family: inherit;
color: var(
- #{getCssVarName('input-text-color')},
- map.get($input, 'text-color')
+ #{getCssVarName('input-text-color')},
+ map.get($input, 'text-color')
);
background-color: var(
- #{getCssVarName('input-bg-color')},
- map.get($input, 'bg-color')
+ #{getCssVarName('input-bg-color')},
+ map.get($input, 'bg-color')
);
background-image: none;
-webkit-appearance: none;
@include inset-input-border(
- var(
- #{getCssVarName('input-border-color')},
- map.get($input, 'border-color')
- )
+ var(
+ #{getCssVarName('input-border-color')},
+ map.get($input, 'border-color')
+ )
);
border-radius: getCssVarWithDefault(
- 'input-border-radius',
- map.get($input, 'border-radius')
+ 'input-border-radius',
+ map.get($input, 'border-radius')
);
transition: getCssVar('transition-box-shadow');
border: none;
&::placeholder {
color: getCssVarWithDefault(
- 'input-placeholder-color',
- map.get($input, 'placeholder-color')
+ 'input-placeholder-color',
+ map.get($input, 'placeholder-color')
);
}
@@ -172,22 +172,22 @@
justify-content: center;
padding: $border-width map.get($input-padding-horizontal, 'default')-$border-width;
background-color: var(
- #{getCssVarName('input-bg-color')},
- map.get($input, 'bg-color')
+ #{getCssVarName('input-bg-color')},
+ map.get($input, 'bg-color')
);
background-image: none;
border-radius: getCssVarWithDefault(
- 'input-border-radius',
- map.get($input, 'border-radius')
+ 'input-border-radius',
+ map.get($input, 'border-radius')
);
cursor: text;
transition: getCssVar('transition-box-shadow');
transform: translate3d(0, 0, 0);
@include inset-input-border(
- var(
- #{getCssVarName('input-border-color')},
- map.get($input, 'border-color')
- )
+ var(
+ #{getCssVarName('input-border-color')},
+ map.get($input, 'border-color')
+ )
);
&:hover {
@@ -202,19 +202,21 @@
@include e(inner) {
// use map.get as default value for date picker range
@include set-css-var-value(
- 'input-inner-height',
- calc(
- var(#{getCssVarName('input-height')},
- #{map.get($input-height, 'default')}) - $border-width * 2
- )
+ 'input-inner-height',
+ calc(
+ var(
+ #{getCssVarName('input-height')},
+ #{map.get($input-height, 'default')}
+ ) - $border-width * 2
+ )
);
width: 100%;
flex-grow: 1;
-webkit-appearance: none;
color: var(
- #{getCssVarName('input-text-color')},
- map.get($input, 'text-color')
+ #{getCssVarName('input-text-color')},
+ map.get($input, 'text-color')
);
font-size: inherit;
height: getCssVar('input-inner-height');
@@ -231,8 +233,8 @@
&::placeholder {
color: getCssVarWithDefault(
- 'input-placeholder-color',
- map.get($input, 'placeholder-color')
+ 'input-placeholder-color',
+ map.get($input, 'placeholder-color')
);
}
@@ -255,8 +257,8 @@
height: 100%;
text-align: center;
color: var(
- #{getCssVarName('input-icon-color')},
- map.get($input, 'icon-color')
+ #{getCssVarName('input-icon-color')},
+ map.get($input, 'icon-color')
);
transition: all getCssVar('transition-duration');
pointer-events: none;
@@ -304,10 +306,10 @@
@include when(active) {
.#{$namespace}-input__wrapper {
@include mixed-input-border(
- var(
- #{getCssVarName('input-focus-color')},
- map.get($input, 'focus-color')
- )
+ var(
+ #{getCssVarName('input-focus-color')},
+ map.get($input, 'focus-color')
+ )
);
}
}
@@ -359,11 +361,13 @@
@include e(inner) {
@include set-css-var-value(
- 'input-inner-height',
- calc(
- var(#{getCssVarName('input-height')},
- #{map.get($input-height, $size)}) - $border-width * 2
- )
+ 'input-inner-height',
+ calc(
+ var(
+ #{getCssVarName('input-height')},
+ #{map.get($input-height, $size)}
+ ) - $border-width * 2
+ )
);
}
}
diff --git a/packages/theme-chalk/src/select.scss b/packages/theme-chalk/src/select.scss
index b36c937c92..28910b0362 100644
--- a/packages/theme-chalk/src/select.scss
+++ b/packages/theme-chalk/src/select.scss
@@ -88,8 +88,8 @@
flex-shrink: 0;
gap: map.get($select-item-gap, 'default');
color: var(
- #{getCssVarName('input-icon-color')},
- map.get($input, 'icon-color')
+ #{getCssVarName('input-icon-color')},
+ map.get($input, 'icon-color')
);
}
@@ -99,8 +99,8 @@
flex-shrink: 0;
gap: map.get($select-item-gap, 'default');
color: var(
- #{getCssVarName('input-icon-color')},
- map.get($input, 'icon-color')
+ #{getCssVarName('input-icon-color')},
+ map.get($input, 'icon-color')
);
}
@@ -159,8 +159,8 @@
width: 100%;
@include utils-ellipsis;
color: var(
- #{getCssVarName('input-text-color')},
- map.get($input, 'text-color')
+ #{getCssVarName('input-text-color')},
+ map.get($input, 'text-color')
);
@include when(transparent) {
@@ -171,9 +171,9 @@
@include e(popper) {
@include picker-popper(
- map.get($select-dropdown, 'bg-color'),
- map.get($select-dropdown, 'border'),
- map.get($select-dropdown, 'shadow')
+ map.get($select-dropdown, 'bg-color'),
+ map.get($select-dropdown, 'border'),
+ map.get($select-dropdown, 'shadow')
);
}