test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-11-29 17:58:08 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor(style): adjust component size to large/default/small (#4491)

Browse Source 
* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml
This commit is contained in:
云游君 2021-12-12 17:54:21 +08:00 committed by GitHub
parent 3fa3e9ff6b
commit 4560adfdf8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
123 changed files with 1240 additions and 1434 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.npmrc
View File

@ -1 +1 @@
shamefully-hoist = true
shamefully-hoist=true

4
docs/.vitepress/config.js
View File

@ -1,4 +0,0 @@
require('sucrase/register/ts')
const { config } = require('./config/index')
module.exports = config

15
docs/.vitepress/config/index.ts → docs/.vitepress/config.ts
View File

@ -1,9 +1,9 @@
import { languages } from '../utils/lang'
import { head } from './head'
import { sidebars } from './sidebars'
import { nav } from './nav'
import { mdPlugin } from './plugins'
import { features } from './features'
import { languages } from './utils/lang'
import { head } from './config/head'
import { sidebars } from './config/sidebars'
import { nav } from './config/nav'
import { mdPlugin } from './config/plugins'
import { features } from './config/features'
import type { UserConfig } from 'vitepress'
const buildTransformers = () => {
@ -32,6 +32,7 @@ const buildTransformers = () => {
return transformers
}
// eslint-disable-next-line no-console
console.log(`DOC_ENV: ${process.env.DOC_ENV}`)
const locales = {}
@ -80,3 +81,5 @@ export const config: UserConfig = {
},
},
}
export default config

9
docs/.vitepress/theme/index.js
View File

@ -1,7 +1,16 @@
import ElementPlus from 'element-plus'
// windicss layers
import 'virtual:windi-base.css'
import 'virtual:windi-components.css'
import VPApp, { globals, NotFound } from '../vitepress'
// windicss utilities should be the last style import
import 'virtual:windi-utilities.css'
// windicss devtools support (dev only)
import 'virtual:windi-devtools'
export default {
NotFound,
Layout: VPApp,

2
docs/.vitepress/vitepress/styles/code.scss
View File

@ -3,7 +3,7 @@ code {
border-radius: 3px;
padding: 0.25rem 0.5rem;
font-family: var(--code-font-family);
font-size: 0.85em;
font-size: var(--code-font-size);
color: var(--code-text-color);
background-color: var(--code-bg-color);
}

1
docs/.vitepress/vitepress/styles/vars.scss
View File

@ -39,7 +39,6 @@
// --dropdown-z-index: 22;
// code block vars
--code-font-size: var(--el-font-size-base);
--code-bg-color: var(--el-bg-color);
--code-text-color: var(--text-color);

2
docs/en-US/component/avatar.md
View File

@ -52,7 +52,7 @@ avatar/fit
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------ | ------- |
| icon | set representation type to Icon, more info on Icon Component | string / Component | | |
| size | set avatar size | number / string | number / large / medium / small | large |
| size | set avatar size | number / string | number / large / default /small | default |
| shape | set avatar shape | string | circle / square | circle |
| src | the address of the image for an image avatar | string | | |
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |

6
docs/en-US/component/button.md
View File

@ -69,7 +69,7 @@ button/loading
Besides default size, Button component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo Use attribute `size` to set additional sizes with `large`, `small`.
button/size
@ -91,7 +91,7 @@ button/custom
| Attribute | Description | Type | Accepted Values | Default |
| ----------------- | ----------------------------------------------------------- | ------------------ | -------------------------------------------------- | ------- |
| size | button size | string | medium / small / mini | — |
| size | button size | string | large / default /small | — |
| type | button type | string | primary / success / warning / danger / info / text | — |
| plain | determine whether it's a plain button | boolean | — | false |
| round | determine whether it's a round button | boolean | — | false |
@ -113,7 +113,7 @@ button/custom
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------------ | ------ | --------------------------- | ------- |
| size | control the size of buttons in this button-group | string | medium / small / mini | — |
| size | control the size of buttons in this button-group | string | large / small | — |
| type | control the type of buttons in this button-group | string | primary / success / warning | — |
## Button-Group Slots

36
docs/en-US/component/cascader.md
View File

@ -138,24 +138,24 @@ cascader/panel
## Cascader Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | --------------------- | ------- |
| model-value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
| props | configuration options, see the following table. | object | — | — |
| size | size of input | string | medium / small / mini | — |
| placeholder | placeholder of input | string | — | Select |
| disabled | whether Cascader is disabled | boolean | — | false |
| clearable | whether selected value can be cleared | boolean | — | false |
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
| separator | option label separator | string | — | ' / ' |
| filterable | whether the options can be searched | boolean | — | — |
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
| popper-class | custom class name for Cascader's dropdown | string | — | — |
| popper-append-to-body | 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 |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | - | — | — |
| options | data of the options，the key of `value` and `label` can be customize by `Props`. | array | — | — |
| props | configuration options, see the following table. | object | — | — |
| size | size of input | string | large / default /small | — |
| placeholder | placeholder of input | string | — | Select |
| disabled | whether Cascader is disabled | boolean | — | false |
| clearable | whether selected value can be cleared | boolean | — | false |
| show-all-levels | whether to display all levels of the selected value in the input | boolean | — | true |
| collapse-tags | whether to collapse tags in multiple selection mode | boolean | - | false |
| separator | option label separator | string | — | ' / ' |
| filterable | whether the options can be searched | boolean | — | — |
| filter-method | customize search logic, the first parameter is `node`, the second is `keyword`, and need return a boolean value indicating whether it hits. | function(node, keyword) | - | - |
| debounce | debounce delay when typing filter keyword, in milliseconds | number | — | 300 |
| before-filter | hook function before filtering with the value to be filtered as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, filtering will be aborted | function(value) | — | — |
| popper-class | custom class name for Cascader's dropdown | string | — | — |
| popper-append-to-body | 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 |
## Cascader Events

42
docs/en-US/component/checkbox.md
View File

@ -77,18 +77,18 @@ checkbox/with-border
## Checkbox Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------- | ---------------------------------- | --------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean / object | — | — |
| true-label | value of the Checkbox if it's checked | string / number | — | — |
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
| disabled | whether the Checkbox is disabled | boolean | — | false |
| border | whether to add a border around Checkbox | boolean | — | false |
| size | size of the Checkbox | string | medium / small / mini | — |
| name | native 'name' attribute | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------- | ---------------------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | value of the Checkbox when used inside a `checkbox-group` | string / number / boolean / object | — | — |
| true-label | value of the Checkbox if it's checked | string / number | — | — |
| false-label | value of the Checkbox if it's not checked | string / number | — | — |
| disabled | whether the Checkbox is disabled | boolean | — | false |
| border | whether to add a border around Checkbox | boolean | — | false |
| size | size of the Checkbox | string | large / default /small | — |
| name | native 'name' attribute | string | — | — |
| checked | if the Checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
## Checkbox Events
@ -104,15 +104,15 @@ checkbox/with-border
## Checkbox-group Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------- | --------------------- | ------- |
| model-value / v-model | binding value | array | — | — |
| size | size of checkbox | string | medium / small / mini | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------- | ---------------------- | ------- |
| model-value / v-model | binding value | array | — | — |
| size | size of checkbox | string | large / default /small | — |
| disabled | whether the nesting checkboxes are disabled | boolean | — | false |
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
## Checkbox-group Events

18
docs/en-US/component/color-picker.md
View File

@ -41,15 +41,15 @@ color-picker/sizes
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------------------ | --------------------- | ------------------------------------------------------------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | medium / small / mini | — |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| 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 icon compontent for ColorPicker's dropdown | string / Component | — | — |
| predefine | predefined color options | array | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------------------ | ---------------------- | ------------------------------------------------------------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | large / default /small | — |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| 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 icon compontent for ColorPicker's dropdown | string / Component | — | — |
| predefine | predefined color options | array | — | — |
## Events

5
docs/en-US/component/date-picker.md
View File

@ -10,8 +10,9 @@ Use Date Picker for date input.
<style lang="scss">
.example-showcase .demo-date-picker {
padding: 0;
display: flex;
width: 100%;
padding: 0;
flex-wrap: wrap;
}
@ -185,7 +186,7 @@ Note, date time locale (month name, first day of the week ...) are also configur
| model-value / v-model | binding value | date(DatePicker) / array(DateRangePicker) | — | — |
| readonly | whether DatePicker is read only | boolean | — | false |
| disabled | whether DatePicker is disabled | boolean | — | false |
| size | size of Input | string | large/medium/small/mini | large |
| size | size of Input | string | large/default/small | default |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| placeholder | placeholder in non-range mode | string | — | — |

38
docs/en-US/component/datetime-picker.md
View File

@ -13,31 +13,25 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
:::
<style lang="scss" scoped>
<style lang="scss">
.example-showcase {
padding: 0;
display: flex;
}
.block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
flex: 1;
&:last-child {
border-right: none;
}
}
.example-showcase .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color-base);
flex: 1;
&:last-child {
border-right: none;
.demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
}
.example-showcase .demonstration {
display: block;
color: var(--el-text-color-secondary);
font-size: 14px;
margin-bottom: 20px;
}
</style>
## Date and time
@ -73,7 +67,7 @@ datetime-picker/default-time
| disabled | whether DatePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large/medium/small/mini | large |
| size | size of Input | string | large/default/small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start date in range mode | string | — | — |
| end-placeholder | placeholder for the end date in range mode | string | — | — |

16
docs/en-US/component/descriptions.md
View File

@ -57,14 +57,14 @@ descriptions/customized-style
## Descriptions Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------ | ------- | --------------------- | ---------- |
| border | with or without border | boolean | — | false |
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
| direction | direction of list | string | vertical / horizontal | horizontal |
| size | size of list | string | medium / small / mini | — |
| title | title text, display on the top left | string | — | — |
| extra | extra text, display on the top right | string | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ------------------------------------------ | ------- | ----------------------- | ---------- |
| border | with or without border | boolean | — | false |
| column | numbers of `Descriptions Item` in one line | number | — | 3 |
| direction | direction of list | string | vertical / horizontal | horizontal |
| size | size of list | string | large / default / small | default |
| title | title text, display on the top left | string | — | — |
| extra | extra text, display on the top right | string | — | — |
## Descriptions Slots

4
docs/en-US/component/dropdown.md
View File

@ -101,7 +101,7 @@ dropdown/command-event
Besides default size, Dropdown component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo Use attribute `size` to set additional sizes with `large`, `default` or `small`.
dropdown/sizes
@ -112,7 +112,7 @@ dropdown/sizes
| Attribute | Description | Type | Accepted Values | Default |
| ------------- | ---------------------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------- | ------- |
| type | menu button type, refer to `Button` Component, only works when `split-button` is true | string | — | — |
| size | menu size, also works on the split button | string | medium / small / mini | — |
| size | menu size, also works on the split button | string | large / default / small | default |
| max-height | the max height of menu | string / number | — | — |
| split-button | whether a button group is displayed | boolean | — | false |
| disabled | Whether to disable | boolean | — | false |

32
docs/en-US/component/form.md
View File

@ -189,21 +189,21 @@ form/size-control
## Form Attributes
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------- | --------------------- | ------- |
| model | data of form component | object | — | — |
| rules | validation rules of form | object | — | — |
| inline | whether the form is inline | boolean | — | false |
| label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
| label-width | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported. | string / number | — | — |
| label-suffix | suffix of the label | string | — | — |
| hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
| show-message | whether to show the error message | boolean | — | true |
| inline-message | whether to display the error message inline with the form item | boolean | — | false |
| status-icon | whether to display an icon indicating the validation result | boolean | — | false |
| 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 | string | medium / small / mini | — |
| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
| Attribute | Description | Type | Accepted Values | Default |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------- | ----------------------- | ------- |
| model | data of form component | object | — | — |
| rules | validation rules of form | object | — | — |
| inline | whether the form is inline | boolean | — | false |
| label-position | position of label. If set to 'left' or 'right', `label-width` prop is also required | string | left / right / top | right |
| label-width | width of label, e.g. '50px'. All its direct child form items will inherit this value. Width `auto` is supported. | string / number | — | — |
| label-suffix | suffix of the label | string | — | — |
| hide-required-asterisk | whether required fields should have a red asterisk (star) beside their labels | boolean | — | false |
| show-message | whether to show the error message | boolean | — | true |
| inline-message | whether to display the error message inline with the form item | boolean | — | false |
| status-icon | whether to display an icon indicating the validation result | boolean | — | false |
| 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 | string | large / default / small | — |
| disabled | whether to disabled all components in this form. If set to true, it cannot be overridden by its inner components' `disabled` prop | boolean | — | false |
## Form Methods
@ -239,7 +239,7 @@ form/size-control
| error | field error message, set its value and the field will validate error and show this message immediately | string | — | — |
| show-message | whether to show the error message | boolean | — | true |
| inline-message | inline style validate message | boolean | — | false |
| size | control the size of components in this form-item | string | medium / small / mini | — |
| size | control the size of components in this form-item | string | large / default / small | default |
## Rules

32
docs/en-US/component/input-number.md
View File

@ -63,7 +63,7 @@ The value of `precision` must be a non negative integer and should not be less t
## Size
Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
Use attribute `size` to set additional sizes with `large` or `small`.
:::demo
@ -81,21 +81,21 @@ input-number/controlled
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------ | ------------------ | ----------------------- | ----------- |
| model-value / v-model | binding value | number / undefined | — | — |
| min | the minimum allowed value | number | — | `-Infinity` |
| max | the maximum allowed value | number | — | `Infinity` |
| step | incremental step | number | — | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large/medium/small/mini | large |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |
| name | same as `name` in native input | string | — | — |
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------ | ------------------ | --------------- | ----------- |
| model-value / v-model | binding value | number / undefined | — | — |
| min | the minimum allowed value | number | — | `-Infinity` |
| max | the maximum allowed value | number | — | `Infinity` |
| step | incremental step | number | — | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | — | false |
| precision | precision of input value | number | — | — |
| size | size of the component | string | large/small | default |
| disabled | whether the component is disabled | boolean | — | false |
| controls | whether to enable the control buttons | boolean | — | true |
| controls-position | position of the control buttons | string | right | - |
| name | same as `name` in native input | string | — | — |
| label | label text | string | — | — |
| placeholder | placeholder in input | string | - | - |
## Events

58
docs/en-US/component/input.md
View File

@ -137,35 +137,35 @@ input/length-limiting
## Input Attributes
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| modelValue / v-model | binding value | string / number | — | — |
| maxlength | the max length | string / number | — | — |
| minlength | same as `minlength` in native input | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| placeholder | placeholder of Input | string | — | — |
| clearable | whether to show clear button | boolean | — | false |
| show-password | whether to show toggleable password input | boolean | — | false |
| disabled | whether Input is disabled | boolean | — | false |
| size | size of Input, works when `type` is not 'textarea' | string | medium / small / mini | — |
| prefix-icon | prefix icon component | string / Component | — | — |
| suffix-icon | suffix icon component | string / Component | — | — |
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | same as `autocomplete` in native input | string | — | off |
| name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
| max | same as `max` in native input | — | — | — |
| min | same as `min` in native input | — | — | — |
| step | same as `step` in native input | — | — | — |
| resize | control the resizability | string | none / both / horizontal / vertical | — |
| autofocus | same as `autofocus` in native input | boolean | — | false |
| form | same as `form` in native input | string | — | — |
| label | label text | string | — | — |
| tabindex | input tabindex | string / number | - | - |
| validate-event | whether to trigger form validation | boolean | - | true |
| input-style | the style of the input element or textarea element | object | - | {} |
| Attribute | Description | Type | Accepted Values | Default |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| type | type of input | string | text, textarea and other [native input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types) | text |
| modelValue / v-model | binding value | string / number | — | — |
| maxlength | the max length | string / number | — | — |
| minlength | same as `minlength` in native input | number | — | — |
| show-word-limit | whether show word count，only works when `type` is 'text' or 'textarea' | boolean | — | false |
| placeholder | placeholder of Input | string | — | — |
| clearable | whether to show clear button | boolean | — | false |
| show-password | whether to show toggleable password input | boolean | — | false |
| disabled | whether Input is disabled | boolean | — | false |
| size | size of Input, works when `type` is not 'textarea' | string | large / small | — |
| prefix-icon | prefix icon component | string / Component | — | — |
| suffix-icon | suffix icon component | string / Component | — | — |
| rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 |
| autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. `{ minRows: 2, maxRows: 6 }` | boolean / object | — | false |
| autocomplete | same as `autocomplete` in native input | string | — | off |
| name | same as `name` in native input | string | — | — |
| readonly | same as `readonly` in native input | boolean | — | false |
| max | same as `max` in native input | — | — | — |
| min | same as `min` in native input | — | — | — |
| step | same as `step` in native input | — | — | — |
| resize | control the resizability | string | none / both / horizontal / vertical | — |
| autofocus | same as `autofocus` in native input | boolean | — | false |
| form | same as `form` in native input | string | — | — |
| label | label text | string | — | — |
| tabindex | input tabindex | string / number | - | - |
| validate-event | whether to trigger form validation | boolean | - | true |
| input-style | the style of the input element or textarea element | object | - | {} |
## Input slots

2
docs/en-US/component/message-box.md
View File

@ -148,4 +148,4 @@ The corresponding methods are: `ElMessageBox`, `ElMessageBox.alert`, `ElMessageB
| input-error-message | error message when validation fails | string | — | Illegal input |
| center | whether to align the content in center | boolean | — | false |
| round-button | whether to use round button | boolean | — | false |
| button-size | custom size of confirm and cancel buttons | string | mini / small / medium / large | small |
| button-size | custom size of confirm and cancel buttons | string | small / default / large | default |

18
docs/en-US/component/radio.md
View File

@ -57,14 +57,14 @@ radio/with-borders
## Radio Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------ | ------------------------- | --------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | the value of Radio | string / number / boolean | — | — |
| disabled | whether Radio is disabled | boolean | — | false |
| border | whether to add a border around Radio | boolean | — | false |
| size | size of the Radio | string | medium / small / mini | — |
| name | native 'name' attribute | string | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------ | ------------------------- | ---------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | the value of Radio | string / number / boolean | — | — |
| disabled | whether Radio is disabled | boolean | — | false |
| border | whether to add a border around Radio | boolean | — | false |
| size | size of the Radio | string | large / default /small | — |
| name | native 'name' attribute | string | — | — |
## Radio Events
@ -83,7 +83,7 @@ radio/with-borders
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | ------------------------------------------------- | ------------------------- | --------------------- | ------- |
| model-value / v-model | binding value | string / number / boolean | — | — |
| size | the size of radio | string | medium / small / mini | — |
| size | the size of radio | string | large / small / small | default |
| 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 |

48
docs/en-US/component/select-v2.md
View File

@ -116,29 +116,29 @@ select-v2/remote-search
## SelectV2 Attributes
| Param | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------- | ------------- |
| model-value / v-model | biding value | string / number / boolean / object | — | — |
| multiple | is multiple | boolean | — | false |
| disabled | is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | input box size | string | medium/small/mini | — |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| placeholder | the autocomplete attribute of select input | string | — | Please select |
| filterable | is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| popper-append-to-body | 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 | - | false |
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html) | object | - | - |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| clear-icon | Customized clear icon component | string / Component | — | CircleClose |
| height | The height of the dropdown panel, 34px for each item | number | - | 170 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
| Param | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------- | ------------- |
| model-value / v-model | biding value | string / number / boolean / object | — | — |
| multiple | is multiple | boolean | — | false |
| disabled | is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | input box size | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| multiple-limit | maximum number of options user can select when multiple is true. No limit when set to 0 | number | — | 0 |
| name | the name attribute of select input | string | — | — |
| autocomplete | select input 的 autocomplete 属性 | string | — | off |
| placeholder | the autocomplete attribute of select input | string | — | Please select |
| filterable | is filterable | boolean | — | false |
| allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false |
| no-data-text | displayed text when there is no options, you can also use slot empty | string | — | No Data |
| popper-class | custom class name for Select's dropdown | string | — | — |
| popper-append-to-body | 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 | - | false |
| popper-options | Customized popper option see more at [popper.js](https://popper.js.org/documentation.html) | object | - | - |
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| clear-icon | Customized clear icon component | string / Component | — | CircleClose |
| height | The height of the dropdown panel, 34px for each item | number | - | 170 |
| scrollbar-always-on | Controls whether the scrollbar is always displayed | boolean | - | false |
<span style="display: none;">
<!-- | no-match-text | 搜索条件无匹配时显示的文字，也可以使用`#empty`设置 | string | — | 无匹配数据 | -->
@ -166,7 +166,7 @@ select-v2/remote-search
## SelectV2 Slots
|   name  | 说明   |
| name | 说明 |
| ------- | ------------------ |
| default | Option renderer |
| empty | 无 Option 时的列表 |

2
docs/en-US/component/select.md
View File

@ -123,7 +123,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| multiple | whether multiple-select is activated | boolean | — | false |
| disabled | whether Select is disabled | boolean | — | false |
| value-key | unique identity key name for value, required when value is an object | string | — | value |
| size | size of Input | string | large/medium/small/mini | large |
| size | size of Input | string | large/default/small | default |
| clearable | whether select can be cleared | boolean | — | false |
| collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false |
| multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 |

40
docs/en-US/component/slider.md
View File

@ -88,26 +88,26 @@ slider/show-marks
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------- | --------------- | ----------------------------- | ------- |
| model-value / v-model | binding value | number | — | 0 |
| min | minimum value | number | — | 0 |
| max | maximum value | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false |
| step | step size | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| input-size | size of the input box | string | large / medium / small / mini | small |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — |
| range | whether to select a range | boolean | — | false |
| vertical | vertical mode | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — |
| label | label for screen reader | string | — | — |
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------- | --------------- | ---------------------- | ------- |
| model-value / v-model | binding value | number | — | 0 |
| min | minimum value | number | — | 0 |
| max | maximum value | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false |
| step | step size | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| input-size | size of the input box | string | large / default /small | default |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — |
| range | whether to select a range | boolean | — | false |
| vertical | vertical mode | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — |
| label | label for screen reader | string | — | — |
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| marks | marks， type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
## Events

2
docs/en-US/component/space.md
View File

@ -31,7 +31,7 @@ space/vertical-layout
Control the space size via `size` API.
You can set the size with built-in sizes `mini`, `small`, `medium`, `large`, these size coresponds to `4px`, `8px`, `12px`, `16px`. The default size is `small`, A.K.A. `8px`
You can set the size with built-in sizes `small`, `default`, `large`, these size coresponds to `4px`, `8px`, `12px`, `16px`. The default size is `small`, A.K.A. `8px`
You can also using customized size to override it. Refer to the next part.

4
docs/en-US/component/tag.md
View File

@ -37,7 +37,7 @@ tag/editable
Besides default size, Tag component provides three additional sizes for you to choose among different scenarios.
:::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
:::demo Use attribute `size` to set additional sizes with `large`, `default` or `small`.
tag/sizes
@ -72,7 +72,7 @@ tag/checkable
| disable-transitions | whether to disable animations | boolean | — | false |
| hit | whether Tag has a highlighted border | boolean | — | false |
| color | background color of the Tag | string | — | — |
| size | tag size | string | medium / small / mini | — |
| size | tag size | string | large / default /small | default |
| effect | component theme | string | dark / light / plain | light |
## Events

2
docs/en-US/component/time-picker.md
View File

@ -36,7 +36,7 @@ time-picker/range
| disabled | whether TimePicker is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| size | size of Input | string | large / default / small | — |
| placeholder | placeholder in non-range mode | string | — | — |
| start-placeholder | placeholder for the start time in range mode | string | — | — |
| end-placeholder | placeholder for the end time in range mode | string | — | — |

32
docs/en-US/component/time-select.md
View File

@ -29,22 +29,22 @@ time-select/time-range
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | ------------------ | --------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | medium / small / mini | — |
| placeholder | placeholder in non-range mode | string | — | — |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon component | string / Component | — | Clock |
| clear-icon | Custom clear icon component | string / Component | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | -------------------------------------------------------- | ------------------ | ----------------------- | ----------- |
| model-value / v-model | binding value | string | — | — |
| disabled | whether TimeSelect is disabled | boolean | — | false |
| editable | whether the input is editable | boolean | — | true |
| clearable | whether to show clear button | boolean | — | true |
| size | size of Input | string | large / default / small | default |
| placeholder | placeholder in non-range mode | string | — | — |
| name | same as `name` in native input | string | — | — |
| prefix-icon | Custom prefix icon component | string / Component | — | Clock |
| clear-icon | Custom clear icon component | string / Component | — | CircleClose |
| start | start time | string | — | 09:00 |
| end | end time | string | — | 18:00 |
| step | time step | string | — | 00:30 |
| min-time | minimum time, any time before this time will be disabled | string | — | 00:00 |
| max-time | maximum time, any time after this time will be disabled | string | — | — |
## Events

2
docs/examples/avatar/basic.vue
View File

@ -34,7 +34,7 @@ export default defineComponent({
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
squareUrl:
'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
sizeList: ['large', 'medium', 'small'],
sizeList: ['large', 'default', 'small'],
})
return {

1
docs/examples/button/basic.vue
View File

@ -36,6 +36,7 @@
<el-button type="danger" :icon="Delete" circle></el-button>
</el-row>
</template>
<script setup lang="ts">
import {
Search,

16
docs/examples/button/icon.vue
View File

@ -1,11 +1,13 @@
<template>
<el-button type="primary" :icon="Edit"></el-button>
<el-button type="primary" :icon="Share"></el-button>
<el-button type="primary" :icon="Delete"></el-button>
<el-button type="primary" :icon="Search">Search</el-button>
<el-button type="primary">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
<div class="flex">
<el-button type="primary" :icon="Edit"></el-button>
<el-button type="primary" :icon="Share"></el-button>
<el-button type="primary" :icon="Delete"></el-button>
<el-button type="primary" :icon="Search">Search</el-button>
<el-button type="primary">
Upload<el-icon class="el-icon--right"><Upload /></el-icon>
</el-button>
</div>
</template>
<script setup lang="ts">
import { Edit, Share, Delete, Search, Upload } from '@element-plus/icons-vue'

9
docs/examples/button/size.vue
View File

@ -1,21 +1,18 @@
<template>
<el-row>
<el-button size="large">Large</el-button>
<el-button>Default</el-button>
<el-button size="medium">Medium</el-button>
<el-button size="small">Small</el-button>
<el-button size="mini">Mini</el-button>
</el-row>
<el-row>
<el-button size="large" round>Large</el-button>
<el-button round>Default</el-button>
<el-button size="medium" round>Medium</el-button>
<el-button size="small" round>Small</el-button>
<el-button size="mini" round>Mini</el-button>
</el-row>
<el-row>
<el-button :icon="Search" size="large" circle></el-button>
<el-button :icon="Search" circle></el-button>
<el-button :icon="Search" size="medium" circle></el-button>
<el-button :icon="Search" size="small" circle></el-button>
<el-button :icon="Search" size="mini" circle></el-button>
</el-row>
</template>
<script setup lang="ts">

10
docs/examples/calendar/header.vue
View File

@ -4,17 +4,17 @@
<span>Custom header content</span>
<span>{{ date }}</span>
<el-button-group>
<el-button size="mini" @click="selectDate('prev-year')"
<el-button size="small" @click="selectDate('prev-year')"
>Previous Year</el-button
>
<el-button size="mini" @click="selectDate('prev-month')"
<el-button size="small" @click="selectDate('prev-month')"
>Previous Month</el-button
>
<el-button size="mini" @click="selectDate('today')">Today</el-button>
<el-button size="mini" @click="selectDate('next-month')"
<el-button size="small" @click="selectDate('today')">Today</el-button>
<el-button size="small" @click="selectDate('next-month')"
>Next Month</el-button
>
<el-button size="mini" @click="selectDate('next-year')"
<el-button size="small" @click="selectDate('next-year')"
>Next Year</el-button
>
</el-button-group>

2
docs/examples/carousel/card.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h3 class="medium">{{ item }}</h3>
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>

2
docs/examples/carousel/vertical.vue
View File

@ -1,7 +1,7 @@
<template>
<el-carousel height="200px" direction="vertical" :autoplay="false">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="medium">{{ item }}</h3>
<h3>{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</template>

9
docs/examples/cascader/basic.vue
View File

@ -309,3 +309,12 @@ export default defineComponent({
},
})
</script>
<style lang="scss" scoped>
.block {
margin: 1rem;
}
.demonstration {
margin: 1rem;
}
</style>

24
docs/examples/checkbox/basic.vue
View File

@ -1,28 +1,16 @@
<template>
<div>
<el-checkbox v-model="checked1" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2"></el-checkbox>
<el-checkbox v-model="checked1" label="Option 1" size="large"></el-checkbox>
<el-checkbox v-model="checked2" label="Option 2" size="large"></el-checkbox>
</div>
<div>
<el-checkbox
v-model="checked3"
label="Option 1"
size="medium"
></el-checkbox>
<el-checkbox
v-model="checked4"
label="Option 2"
size="medium"
></el-checkbox>
<el-checkbox v-model="checked3" label="Option 1"></el-checkbox>
<el-checkbox v-model="checked4" label="Option 2"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked5" label="Option 1" size="small"></el-checkbox>
<el-checkbox v-model="checked6" label="Option 2" size="small"></el-checkbox>
</div>
<div>
<el-checkbox v-model="checked7" label="Option 1" size="mini"></el-checkbox>
<el-checkbox v-model="checked8" label="Option 2" size="mini"></el-checkbox>
</div>
</template>
<script lang="ts">
@ -36,8 +24,6 @@ export default defineComponent({
const checked4 = ref(false)
const checked5 = ref(false)
const checked6 = ref(false)
const checked7 = ref(false)
const checked8 = ref(false)
return {
checked1,
checked2,
@ -45,8 +31,6 @@ export default defineComponent({
checked4,
checked5,
checked6,
checked7,
checked8,
}
},
})

12
docs/examples/checkbox/button-style.vue
View File

@ -1,13 +1,13 @@
<template>
<div>
<el-checkbox-group v-model="checkboxGroup1">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{
city
}}</el-checkbox-button>
<el-checkbox-group v-model="checkboxGroup1" size="large">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">
{{ city }}
</el-checkbox-button>
</el-checkbox-group>
</div>
<div class="demo-button-style">
<el-checkbox-group v-model="checkboxGroup2" size="medium">
<el-checkbox-group v-model="checkboxGroup2">
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{
city
}}</el-checkbox-button>
@ -25,7 +25,7 @@
</el-checkbox-group>
</div>
<div class="demo-button-style">
<el-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
<el-checkbox-group v-model="checkboxGroup4" size="small" disabled>
<el-checkbox-button v-for="city in cities" :key="city" :label="city">{{
city
}}</el-checkbox-button>

35
docs/examples/checkbox/with-border.vue
View File

@ -1,21 +1,21 @@
<template>
<div>
<el-checkbox v-model="checked1" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked2" label="Option2" border></el-checkbox>
<el-checkbox
v-model="checked1"
label="Option1"
size="large"
border
></el-checkbox>
<el-checkbox
v-model="checked2"
label="Option2"
size="large"
border
></el-checkbox>
</div>
<div class="demo-with-border">
<el-checkbox
v-model="checked3"
label="Option1"
border
size="medium"
></el-checkbox>
<el-checkbox
v-model="checked4"
label="Option2"
border
size="medium"
></el-checkbox>
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
</div>
<div class="demo-with-border">
<el-checkbox-group v-model="checkboxGroup1" size="small">
@ -23,12 +23,6 @@
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
<div class="demo-with-border">
<el-checkbox-group v-model="checkboxGroup2" size="mini" disabled>
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script lang="ts">
@ -42,7 +36,6 @@ export default defineComponent({
checked3: false,
checked4: true,
checkboxGroup1: [],
checkboxGroup2: [],
})
return toRefs(state)

3
docs/examples/color-picker/sizes.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="demo-color-sizes">
<el-color-picker v-model="color" size="large" />
<el-color-picker v-model="color" />
<el-color-picker v-model="color" size="medium" />
<el-color-picker v-model="color" size="small" />
<el-color-picker v-model="color" size="mini" />
</div>
</template>

58
docs/examples/datetime-picker/date-and-time.vue
View File

@ -1,32 +1,34 @@
<template>
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Select date and time"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
:shortcuts="shortcuts"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With default time</span>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Select date and time"
:default-time="defaultTime"
>
</el-date-picker>
<div class="flex">
<div class="block">
<span class="demonstration">Default</span>
<el-date-picker
v-model="value1"
type="datetime"
placeholder="Select date and time"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With shortcuts</span>
<el-date-picker
v-model="value2"
type="datetime"
placeholder="Select date and time"
:shortcuts="shortcuts"
>
</el-date-picker>
</div>
<div class="block">
<span class="demonstration">With default time</span>
<el-date-picker
v-model="value3"
type="datetime"
placeholder="Select date and time"
:default-time="defaultTime"
>
</el-date-picker>
</div>
</div>
</template>

5
docs/examples/descriptions/sizes.vue
View File

@ -1,9 +1,8 @@
<template>
<el-radio-group v-model="size">
<el-radio label="">Default</el-radio>
<el-radio label="medium">Medium</el-radio>
<el-radio label="large">Large</el-radio>
<el-radio>Default</el-radio>
<el-radio label="small">Small</el-radio>
<el-radio label="mini">Mini</el-radio>
</el-radio-group>
<el-descriptions

20
docs/examples/dropdown/sizes.vue
View File

@ -1,6 +1,6 @@
<template>
<el-dropdown split-button type="primary">
Default
<el-dropdown size="large" split-button type="primary">
Large
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
@ -11,8 +11,8 @@
</template>
</el-dropdown>
<el-dropdown size="medium" split-button type="primary">
Medium
<el-dropdown split-button type="primary">
Default
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
@ -34,16 +34,4 @@
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown size="mini" split-button type="primary">
Mini
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item>Action 4</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>

6
docs/examples/form/form-items.vue
View File

@ -34,8 +34,10 @@
trigger: 'blur',
}"
>
<el-input v-model="domain.value"></el-input
><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
<el-input v-model="domain.value"></el-input>
<el-button class="mt-2" @click.prevent="removeDomain(domain)"
>Delete</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('dynamicValidateForm')"

53
docs/examples/form/size-control.vue
View File

@ -1,5 +1,13 @@
<template>
<el-form ref="form" :model="sizeForm" label-width="120px" size="mini">
<div style="margin-left: 1rem">
<el-radio-group v-model="size">
<el-radio label="small">Small</el-radio>
<el-radio label="default">Default</el-radio>
<el-radio label="large">Large</el-radio>
</el-radio-group>
</div>
<br />
<el-form ref="form" :model="sizeForm" label-width="120px" :size="size">
<el-form-item label="Activity name">
<el-input v-model="sizeForm.name"></el-input>
</el-form-item>
@ -21,7 +29,7 @@
style="width: 100%"
></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col class="line" :span="2" style="margin: 0 0.5rem">-</el-col>
<el-col :span="11">
<el-time-picker
v-model="sizeForm.date2"
@ -43,7 +51,7 @@
</el-checkbox-group>
</el-form-item>
<el-form-item label="Resources">
<el-radio-group v-model="sizeForm.resource" size="medium">
<el-radio-group v-model="sizeForm.resource">
<el-radio border label="Sponsor"></el-radio>
<el-radio border label="Venue"></el-radio>
</el-radio-group>
@ -55,26 +63,23 @@
</el-form>
</template>
<script lang="ts">
export default {
data() {
return {
sizeForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
},
}
},
methods: {
onSubmit() {
console.log('submit!')
},
},
<script lang="ts" setup>
import { reactive, ref } from 'vue'
const size = ref('small')
const sizeForm = reactive({
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
})
function onSubmit() {
console.log('submit!')
}
</script>

26
docs/examples/input-number/size.vue
View File

@ -1,25 +1,13 @@
<template>
<el-input-number v-model="num1" />
<el-input-number v-model="num2" size="medium" />
<el-input-number v-model="num1" size="large" />
<el-input-number v-model="num2" />
<el-input-number v-model="num3" size="small" />
<el-input-number v-model="num4" size="mini" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
<script lang="ts" setup>
import { ref } from 'vue'
export default defineComponent({
setup() {
const num1 = ref(1)
const num2 = ref(2)
const num3 = ref(3)
const num4 = ref(4)
return {
num1,
num2,
num3,
num4,
}
},
})
const num1 = ref(1)
const num2 = ref(2)
const num3 = ref(3)
</script>

10
docs/examples/input/autocomplete.vue
View File

@ -1,7 +1,9 @@
<template>
<el-row class="demo-autocomplete">
<el-row class="demo-autocomplete text-center">
<el-col :span="12">
<div class="sub-title">list suggestions when activated</div>
<div class="sub-title my-2 text-sm text-gray-600">
list suggestions when activated
</div>
<el-autocomplete
v-model="state1"
:fetch-suggestions="querySearch"
@ -11,7 +13,9 @@
/>
</el-col>
<el-col :span="12">
<div class="sub-title">list suggestions on input</div>
<div class="sub-title my-2 text-sm text-gray-600">
list suggestions on input
</div>
<el-autocomplete
v-model="state2"
:fetch-suggestions="querySearch"

63
docs/examples/input/various-size.vue
View File

@ -1,28 +1,47 @@
<template>
<div class="demo-input-size">
<el-input v-model="input1" placeholder="Please Input" />
<el-input v-model="input2" size="medium" placeholder="Please Input" />
<el-input v-model="input3" size="small" placeholder="Please Input" />
<el-input v-model="input4" size="mini" placeholder="Please Input" />
<el-input
v-model="input1"
class="w-50 m-2"
size="large"
placeholder="Please Input"
></el-input>
<el-input v-model="input2" class="w-50 m-2" placeholder="Please Input" />
<el-input
v-model="input3"
class="w-50 m-2"
size="small"
placeholder="Please Input"
/>
</div>
<div class="demo-input-size">
<el-input
v-model="input1"
class="w-50 m-2"
size="large"
placeholder="Please Input"
:suffix-icon="Search"
></el-input>
<el-input
v-model="input2"
class="w-50 m-2"
placeholder="Please Input"
:suffix-icon="Search"
/>
<el-input
v-model="input3"
class="w-50 m-2"
size="small"
placeholder="Please Input"
:suffix-icon="Search"
/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
return {
input1: ref(''),
input2: ref(''),
input3: ref(''),
input4: ref(''),
}
},
})
<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
</script>
<style scoped>
.el-input {
margin-bottom: 16px;
}
</style>

30
docs/examples/input/with-icon.vue
View File

@ -1,33 +1,34 @@
<template>
<div class="demo-input-suffix">
<span class="demo-input-label">Using attributes</span>
<el-row :gutter="20">
<span class="ml-3 w-35 text-gray-600 inline-flex items-center"
>Using attributes</span
>
<el-input
v-model="input1"
class="w-50 m-2"
placeholder="Pick a date"
:suffix-icon="Calendar"
/>
</el-row>
<el-row :gutter="20">
<el-input
v-model="input2"
class="w-50 m-2"
placeholder="Type something"
:prefix-icon="Search"
/>
</el-row>
</div>
<div class="demo-input-suffix">
<span class="demo-input-label">Using slots</span>
<el-row :gutter="20">
<el-input v-model="input3" placeholder="Pick a date">
<span class="ml-3 w-35 text-gray-600 inline-flex items-center"
>Using slots</span
>
<el-input v-model="input3" class="w-50 m-2" placeholder="Pick a date">
<template #suffix>
<el-icon class="el-input__icon"><calendar /></el-icon>
</template>
</el-input>
</el-row>
<el-row :gutter="20">
<el-input v-model="input4" placeholder="Type something">
<el-input v-model="input4" class="w-50 m-2" placeholder="Type something">
<template #prefix>
<el-icon class="el-input__icon"><search /></el-icon>
</template>
@ -44,14 +45,3 @@ const input2 = ref('')
const input3 = ref('')
const input4 = ref('')
</script>
<style>
.demo-input-label {
display: inline-block;
width: 130px;
}
.demo-input-suffix {
margin-bottom: 16px;
}
</style>

4
docs/examples/popover/nested-operation.vue
View File

@ -2,10 +2,10 @@
<el-popover v-model:visible="visible" placement="top" :width="160">
<p>Are you sure to delete this?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false"
<el-button size="small" type="text" @click="visible = false"
>cancel</el-button
>
<el-button type="primary" size="mini" @click="visible = false"
<el-button size="small" type="primary" @click="visible = false"
>confirm</el-button
>
</div>

13
docs/examples/radio/basic-usage.vue
View File

@ -1,20 +1,16 @@
<template>
<div>
<el-radio v-model="radio1" label="1">Option 1</el-radio>
<el-radio v-model="radio1" label="2">Option 2</el-radio>
<el-radio v-model="radio1" label="1" size="large">Option 1</el-radio>
<el-radio v-model="radio1" label="2" size="large">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio2" label="1" size="medium">Option 1</el-radio>
<el-radio v-model="radio2" label="2" size="medium">Option 2</el-radio>
<el-radio v-model="radio2" label="1">Option 1</el-radio>
<el-radio v-model="radio2" label="2">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio3" label="1" size="small">Option 1</el-radio>
<el-radio v-model="radio3" label="2" size="small">Option 2</el-radio>
</div>
<div>
<el-radio v-model="radio4" label="1" size="mini">Option 1</el-radio>
<el-radio v-model="radio4" label="2" size="mini">Option 2</el-radio>
</div>
</template>
<script lang="ts">
@ -26,7 +22,6 @@ export default defineComponent({
radio1: ref('1'),
radio2: ref('1'),
radio3: ref('1'),
radio4: ref('1'),
}
},
})

13
docs/examples/radio/button-style.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<el-radio-group v-model="radio1">
<el-radio-group v-model="radio1" size="large">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@ -8,7 +8,7 @@
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio2" size="medium">
<el-radio-group v-model="radio2">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
@ -23,14 +23,6 @@
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" disabled size="mini">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
</div>
</template>
<script lang="ts">
@ -42,7 +34,6 @@ export default defineComponent({
radio1: ref('New York'),
radio2: ref('New York'),
radio3: ref('New York'),
radio4: ref('New York'),
}
},
})

14
docs/examples/radio/with-borders.vue
View File

@ -1,15 +1,11 @@
<template>
<div>
<el-radio v-model="radio1" label="1" border>Option A</el-radio>
<el-radio v-model="radio1" label="2" border>Option B</el-radio>
<el-radio v-model="radio1" label="1" size="large" border>Option A</el-radio>
<el-radio v-model="radio1" label="2" size="large" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio v-model="radio2" label="1" border size="medium"
>Option A</el-radio
>
<el-radio v-model="radio2" label="2" border size="medium"
>Option B</el-radio
>
<el-radio v-model="radio2" label="1" border>Option A</el-radio>
<el-radio v-model="radio2" label="2" border>Option B</el-radio>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio3" size="small">
@ -18,7 +14,7 @@
</el-radio-group>
</div>
<div style="margin-top: 20px">
<el-radio-group v-model="radio4" size="mini" disabled>
<el-radio-group v-model="radio4" size="small" disabled>
<el-radio label="1" border>Option A</el-radio>
<el-radio label="2" border>Option B</el-radio>
</el-radio-group>

8
docs/examples/result/basic-usage.vue
View File

@ -7,7 +7,7 @@
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary" size="medium">Back</el-button>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
@ -18,7 +18,7 @@
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary" size="medium">Back</el-button>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
@ -29,7 +29,7 @@
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary" size="medium">Back</el-button>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>
@ -40,7 +40,7 @@
sub-title="Please follow the instructions"
>
<template #extra>
<el-button type="primary" size="medium">Back</el-button>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</el-col>

2
docs/examples/result/customized-content.vue
View File

@ -6,7 +6,7 @@
></el-image>
</template>
<template #extra>
<el-button type="primary" size="medium">Back</el-button>
<el-button type="primary">Back</el-button>
</template>
</el-result>
</template>

21
docs/examples/select-v2/basic-usage.vue
View File

@ -3,7 +3,18 @@
v-model="value"
:options="options"
placeholder="Please select"
style="width: 240px"
size="large"
/>
<el-select-v2
v-model="value"
:options="options"
placeholder="Please select"
/>
<el-select-v2
v-model="value"
:options="options"
placeholder="Please select"
size="small"
/>
</template>
@ -26,3 +37,11 @@ export default defineComponent({
},
})
</script>
<style lang="scss" scoped>
.example-showcase {
.el-select-v2 {
margin-right: 20px;
}
}
</style>

1
docs/examples/select-v2/remote-search.vue
View File

@ -3,7 +3,6 @@
v-model="value"
style="width: 240px"
multiple
size="medium"
filterable
remote
:remote-method="remoteMethod"

20
docs/examples/select/basic-usage.vue
View File

@ -1,5 +1,23 @@
<template>
<el-select v-model="value" placeholder="Select">
<el-select v-model="value" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" class="m-2" placeholder="Select">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
<el-select v-model="value" class="m-2" placeholder="Select" size="small">
<el-option
v-for="item in options"
:key="item.value"

6
docs/examples/skeleton/basic-usage.vue
View File

@ -1,3 +1,9 @@
<template>
<el-skeleton />
<br />
<el-skeleton style="--el-skeleton-circle-size: 100px">
<template #template>
<el-skeleton-item variant="circle" />
</template>
</el-skeleton>
</template>

5
docs/examples/space/control-size.vue
View File

@ -1,9 +1,8 @@
<template>
<el-space direction="vertical" alignment="start" :size="30">
<el-radio-group v-model="size">
<el-radio :label="'mini'">mini</el-radio>
<el-radio :label="'small'">small</el-radio>
<el-radio :label="'medium'">medium</el-radio>
<el-radio :label="'default'">default</el-radio>
<el-radio :label="'large'">large</el-radio>
</el-radio-group>
@ -27,7 +26,7 @@
export default {
data() {
return {
size: 'mini',
size: 'small',
}
},
}

6
docs/examples/table/custom-column.vue
View File

@ -15,7 +15,7 @@
</template>
<template #reference>
<div class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
<el-tag>{{ scope.row.name }}</el-tag>
</div>
</template>
</el-popover>
@ -23,11 +23,11 @@
</el-table-column>
<el-table-column label="Operations">
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button

6
docs/examples/table/custom-header.vue
View File

@ -12,14 +12,14 @@
<el-table-column label="Name" prop="name" />
<el-table-column align="right">
<template #header>
<el-input v-model="search" size="mini" placeholder="Type to search" />
<el-input v-model="search" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="mini"
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button

8
docs/examples/tag/basic.vue
View File

@ -1,7 +1,7 @@
<template>
<el-tag>Tag 1</el-tag>
<el-tag type="success">Tag 2</el-tag>
<el-tag type="info">Tag 3</el-tag>
<el-tag type="warning">Tag 4</el-tag>
<el-tag type="danger">Tag 5</el-tag>
<el-tag class="ml-2" type="success">Tag 2</el-tag>
<el-tag class="ml-2" type="info">Tag 3</el-tag>
<el-tag class="ml-2" type="warning">Tag 4</el-tag>
<el-tag class="ml-2" type="danger">Tag 5</el-tag>
</template>

81
docs/examples/tag/editable.vue
View File

@ -2,6 +2,7 @@
<el-tag
v-for="tag in dynamicTags"
:key="tag"
class="mx-1"
closable
:disable-transitions="false"
@close="handleClose(tag)"
@ -12,64 +13,42 @@
v-if="inputVisible"
ref="saveTagInput"
v-model="inputValue"
class="input-new-tag"
size="mini"
class="ml-1 w-20"
size="small"
@keyup.enter="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput"
>+ New Tag</el-button
>
<el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
+ New Tag
</el-button>
</template>
<script lang="ts">
export default {
data() {
return {
dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],
inputVisible: false,
inputValue: '',
}
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
<script lang="ts" setup>
import { ref, nextTick } from 'vue'
showInput() {
this.inputVisible = true
this.$nextTick((_) => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
const dynamicTags = ref(['Tag 1', 'Tag 2', 'Tag 3'])
const inputVisible = ref(false)
const inputValue = ref('')
handleInputConfirm() {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
},
const saveTagInput = ref()
function handleClose(tag) {
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
function showInput() {
inputVisible.value = true
nextTick((_) => {
saveTagInput.value.$refs.input.focus()
})
}
function handleInputConfirm() {
if (inputValue.value) {
dynamicTags.value.push(inputValue.value)
}
inputVisible.value = false
inputValue.value = ''
}
</script>
<style>
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

8
docs/examples/tag/removable.vue
View File

@ -1,5 +1,11 @@
<template>
<el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
<el-tag
v-for="tag in tags"
:key="tag.name"
class="mx-1"
closable
:type="tag.type"
>
{{ tag.name }}
</el-tag>
</template>

7
docs/examples/tag/sizes.vue
View File

@ -1,6 +1,5 @@
<template>
<el-tag>Default</el-tag>
<el-tag size="medium">Medium</el-tag>
<el-tag size="small">Small</el-tag>
<el-tag size="mini">Mini</el-tag>
<el-tag class="mx-1" size="large">Large</el-tag>
<el-tag class="mx-1">Default</el-tag>
<el-tag class="mx-1" size="small">Small</el-tag>
</template>

20
docs/examples/tag/theme.vue
View File

@ -1,20 +1,22 @@
<template>
<div class="tag-group">
<span class="tag-group__title">Dark</span>
<div class="tag-group my-2">
<span class="tag-group__title m-1">Dark</span>
<el-tag
v-for="item in items"
:key="item.label"
class="mx-1"
:type="item.type"
effect="dark"
>
{{ item.label }}
</el-tag>
</div>
<div class="tag-group">
<span class="tag-group__title">Plain</span>
<div class="tag-group my-2">
<span class="tag-group__title m-1">Plain</span>
<el-tag
v-for="item in items"
:key="item.label"
class="mx-1"
:type="item.type"
effect="plain"
>
@ -38,13 +40,3 @@ export default {
},
}
</script>
<style lang="scss">
.tag-group {
margin-bottom: 8px;
&__title {
margin-right: 8px;
}
}
</style>

38
docs/examples/typography/convention.vue
View File

@ -12,59 +12,53 @@
:style="`font-size: var(--el-font-size-${fontSize.type})`"
>
<td>{{ fontSize.level }}</td>
<td>{{ fontSize.size + ' ' + formatType(fontSize.type) }}</td>
<td>
{{
useCssVar(`--el-font-size-${fontSize.type}`).value +
' ' +
formatType(fontSize.type)
}}
</td>
<td>Build with Element</td>
</tr>
</tbody>
</table>
</template>
<script lang="ts">
<script lang="ts" setup>
import { useCssVar } from '@vueuse/core'
const fontSizes = [
{
level: 'Supplementary text',
type: 'extra-small',
size: '12px',
},
{
level: 'Body (small)',
type: 'small',
size: '13px',
},
{
level: 'Body',
type: 'base',
size: '14px',
},
{
level: 'Small Title',
type: 'medium',
size: '16px',
},
{
level: 'Title',
type: 'large',
size: '18px',
},
{
level: 'Main Title',
type: 'extra-large',
size: '20px',
},
]
export default {
data() {
return {
fontSizes,
}
},
methods: {
formatType(type) {
return type
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join(' ')
},
},
function formatType(type: string) {
return type
.split('-')
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
.join(' ')
}
</script>

6
docs/package.json
View File

@ -9,7 +9,7 @@
"crowdin-credentials": "sucrase-node .vitepress/build/crowdin-credentials.ts"
},
"dependencies": {
"@vueuse/core": "7.2.2",
"@vueuse/core": "7.3.0",
"axios": "0.24.0",
"clipboard-copy": "4.0.1",
"element-plus": "npm:element-plus@latest",
@ -20,9 +20,11 @@
"@crowdin/cli": "3.7.2",
"@types/markdown-it": "12.2.3",
"cross-env": "7.0.3",
"escape-html": "^1.0.3",
"markdown-it": "12.3.0",
"markdown-it-container": "3.0.0",
"vite-plugin-inspect": "0.3.11",
"vitepress": "0.18.1"
"vite-plugin-windicss": "^1.5.1",
"vitepress": "0.20.5"
}
}

12
docs/vite.config.ts
View File

@ -1,6 +1,7 @@
import path from 'path'
import Inspect from 'vite-plugin-inspect'
import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'
import { projRoot } from './.vitepress/utils/paths'
import type { Alias } from 'vite'
@ -29,7 +30,16 @@ export default defineConfig({
resolve: {
alias,
},
plugins: [Inspect()],
build: {
rollupOptions: {
output: {
manualChunks: {
windicss: ['windicss'],
},
},
},
},
plugins: [WindiCSS(), Inspect()],
optimizeDeps: {
include: [
'vue',

28
docs/windi.config.ts Normal file
View File

@ -0,0 +1,28 @@
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
export default defineConfig({
// https://windicss.org/guide/extractions.html
extract: {
include: [
'**/*.md',
'.vitepress/vitepress/**/*.{md,vue}',
'examples/**/*.{md,vue}',
],
},
darkMode: 'class',
// https://windicss.org/posts/v30.html#attributify-mode
attributify: true,
theme: {
extend: {
colors: {
primary: {
DEFAULT: colors.blue[600],
deep: colors.blue[700],
},
},
},
},
})

4
package.json
View File

@ -59,7 +59,7 @@
"@element-plus/tokens": "workspace:*",
"@element-plus/utils": "workspace:*",
"@popperjs/core": "^2.10.2",
"@vueuse/core": "^7.0.0",
"@vueuse/core": "^7.3.0",
"async-validator": "^4.0.7",
"dayjs": "^1.10.7",
"lodash": "^4.17.21",
@ -83,7 +83,7 @@
"@types/sass": "1.43.1",
"@typescript-eslint/eslint-plugin": "5.6.0",
"@typescript-eslint/parser": "5.6.0",
"@vue/compiler-sfc": "3.2.24",
"@vue/compiler-sfc": "3.2.26",
"@vue/test-utils": "2.0.0-rc.16",
"chalk": "4.1.2",
"components-helper": "1.0.5",

2
packages/components/avatar/__tests__/avatar.spec.ts
View File

@ -21,7 +21,7 @@ describe('Avatar.vue', () => {
const wrapper = mount(Avatar, {
props: { size: 50 },
})
expect(wrapper.attributes('style')).toContain('height: 50px')
expect(wrapper.attributes('style')).toContain('--el-avatar-size: 50px;')
})
test('size is string', () => {

2
packages/components/avatar/src/avatar.ts
View File

@ -5,7 +5,7 @@ import type { ObjectFitProperty } from 'csstype'
export const avatarProps = buildProps({
size: {
type: [Number, String],
values: ['large', 'medium', 'small'],
values: ['large', 'default', 'small'],
default: 'large',
validator: (val: unknown): val is number => typeof val === 'number',
},

8
packages/components/avatar/src/avatar.vue
View File

@ -8,7 +8,9 @@
:style="fitStyle"
@error="handleError"
/>
<el-icon v-else-if="icon"><component :is="icon" /></el-icon>
<el-icon v-else-if="icon">
<component :is="icon" />
</el-icon>
<slot v-else></slot>
</span>
</template>
@ -44,9 +46,7 @@ export default defineComponent({
const { size } = props
return typeof size === 'number'
? {
height: `${size}px`,
width: `${size}px`,
lineHeight: `${size}px`,
'--el-avatar-size': `${size}px`,
}
: {}
})

15
packages/components/button/__tests__/button.spec.ts
View File

@ -35,9 +35,9 @@ describe('Button.vue', () => {
})
it('size', () => {
const wrapper = mount(Button, {
props: { size: 'medium' },
props: { size: 'default' },
})
expect(wrapper.classes()).toContain('el-button--medium')
expect(wrapper.classes()).toContain('el-button--default')
})
it('plain', () => {
const wrapper = mount(Button, {
@ -132,7 +132,6 @@ describe('Button Group', () => {
h(ButtonGroup, { size: size.value }, () => [
h(Button, { type: 'primary' }, () => 'Prev'),
h(Button, { type: 'primary' }, () => 'Next'),
h(Button, { type: 'primary', size: 'mini' }, () => 'Mini'),
])
},
})
@ -140,19 +139,13 @@ describe('Button Group', () => {
expect(
wrapper.findAll('.el-button-group button.el-button--small').length
).toBe(2)
expect(
wrapper.findAll('.el-button-group button.el-button--mini').length
).toBe(1)
size.value = 'medium'
size.value = 'default'
await nextTick()
expect(
wrapper.findAll('.el-button-group button.el-button--medium').length
wrapper.findAll('.el-button-group button.el-button--default').length
).toBe(2)
expect(
wrapper.findAll('.el-button-group button.el-button--mini').length
).toBe(1)
})
it('button group type', async () => {

2
packages/components/button/src/button.ts
View File

@ -13,7 +13,7 @@ export const buttonType = [
'text',
'',
] as const
export const buttonSize = ['', 'large', 'medium', 'small', 'mini'] as const
export const buttonSize = ['', 'large', 'default', 'small'] as const
export const buttonNativeType = ['button', 'submit', 'reset'] as const
export const buttonProps = buildProps({

8
packages/components/cascader/src/index.vue
View File

@ -200,9 +200,9 @@ type suggestionPanelType = InstanceType<typeof ElScrollbar>
const DEFAULT_INPUT_HEIGHT = 40
const INPUT_HEIGHT_MAP = {
medium: 36,
small: 32,
mini: 28,
large: 36,
default: 32,
small: 28,
}
const popperOptions: Partial<Options> = {
@ -324,7 +324,7 @@ export default defineComponent({
)
const realSize = useSize()
const tagSize = computed(() =>
['small', 'mini'].includes(realSize.value) ? 'mini' : 'small'
['small'].includes(realSize.value) ? 'small' : ''
)
const multiple = computed(() => !!props.props.multiple)
const readonly = computed(() => !props.filterable || multiple.value)

1
packages/components/checkbox/__tests__/checkbox.spec.ts
View File

@ -87,6 +87,7 @@ describe('Checkbox', () => {
expect(vm.checkList.length).toBe(0)
await wrapper.findComponent({ ref: 'a' }).trigger('click')
expect(vm.checkList.length).toBe(1)
expect(vm.checkList).toContain('a')
await wrapper.findComponent({ ref: 'b' }).trigger('click')
expect(vm.checkList.length).toBe(2)

31
packages/components/color-picker/src/index.vue
View File

@ -31,13 +31,13 @@
<el-input
v-model="customInput"
:validate-event="false"
size="mini"
size="small"
@keyup.enter="handleConfirm"
@blur="handleConfirm"
/>
</span>
<el-button
size="mini"
size="small"
type="text"
class="el-color-dropdown__link-btn"
@click="clear"
@ -46,7 +46,7 @@
</el-button>
<el-button
plain
size="mini"
size="small"
class="el-color-dropdown__btn"
@click="confirmValue"
>
@ -74,20 +74,21 @@
:style="{
backgroundColor: displayedColor,
}"
></span>
<el-icon
v-if="!modelValue && !showPanelColor"
class="el-color-picker__empty is-icon-close"
>
<close />
</el-icon>
<el-icon
v-show="modelValue || showPanelColor"
class="el-color-picker__icon is-icon-arrow-down"
>
<arrow-down />
</el-icon>
<el-icon
v-if="!modelValue && !showPanelColor"
class="el-color-picker__empty is-icon-close"
>
<close />
</el-icon>
</span>
</span>
<el-icon
v-show="modelValue || showPanelColor"
class="el-color-picker__icon is-icon-arrow-down"
>
<arrow-down />
</el-icon>
</div>
</div>
</template>

4
packages/components/date-picker/src/date-picker-com/panel-date-pick.vue
View File

@ -142,7 +142,7 @@
>
<el-button
v-show="selectionMode !== 'dates'"
size="mini"
size="small"
type="text"
class="el-picker-panel__link-btn"
@click="changeToNow"
@ -151,7 +151,7 @@
</el-button>
<el-button
plain
size="mini"
size="small"
class="el-picker-panel__link-btn"
@click="onConfirm"
>

4
packages/components/date-picker/src/date-picker-com/panel-date-range.vue
View File

@ -212,7 +212,7 @@
<div v-if="showTime" class="el-picker-panel__footer">
<el-button
v-if="clearable"
size="mini"
size="small"
type="text"
class="el-picker-panel__link-btn"
@click="handleClear"
@ -221,7 +221,7 @@
</el-button>
<el-button
plain
size="mini"
size="small"
class="el-picker-panel__link-btn"
:disabled="btnDisabled"
@click="handleConfirm(false)"

4
packages/components/form/__tests__/form.spec.ts
View File

@ -203,7 +203,7 @@ describe('Form', () => {
const wrapper = mountForm({
template: `
<div>
<el-form :model="form" size="mini" ref="labelMini">
<el-form :model="form" size="small" ref="labelSmall">
<el-form-item>
<el-input v-model="form.name"></el-input>
</el-form-item>
@ -219,7 +219,7 @@ describe('Form', () => {
},
})
expect(wrapper.findComponent(FormItem).classes()).toContain(
'el-form-item--mini'
'el-form-item--small'
)
})

2
packages/components/pagination/src/components/jumper.vue
View File

@ -2,7 +2,7 @@
<span class="el-pagination__jump">
{{ t('el.pagination.goto') }}
<el-input
size="mini"
size="small"
class="el-pagination__editor is-in-pagination"
:min="1"
:max="pageCount"

2
packages/components/pagination/src/components/sizes.vue
View File

@ -4,7 +4,7 @@
:model-value="innerPageSize"
:disabled="disabled"
:popper-class="popperClass"
size="mini"
size="small"
@change="handleChange"
>
<el-option

4
packages/components/popconfirm/src/popconfirm.vue
View File

@ -19,10 +19,10 @@
{{ title }}
</div>
<div class="el-popconfirm__action">
<el-button size="mini" :type="cancelButtonType" @click="cancel">
<el-button size="small" :type="cancelButtonType" @click="cancel">
{{ finalCancelButtonText }}
</el-button>
<el-button size="mini" :type="confirmButtonType" @click="confirm">
<el-button size="small" :type="confirmButtonType" @click="confirm">
{{ finalConfirmButtonText }}
</el-button>
</div>

2
packages/components/select-v2/src/useSelect.ts
View File

@ -183,7 +183,7 @@ const useSelect = (props: ExtractPropTypes<typeof SelectProps>, emit) => {
const selectSize = useSize()
const collapseTagSize = computed(() =>
['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'
'small' === selectSize.value ? 'small' : ''
)
const tagMaxWidth = computed(() => {

6
packages/components/select/src/select.vue
View File

@ -444,9 +444,9 @@ export default defineComponent({
addResizeListener(selectWrapper.value as any, handleResize)
if (reference.value && reference.value.$el) {
const sizeMap = {
medium: 36,
small: 32,
mini: 28,
large: 36,
default: 32,
small: 28,
}
const input = reference.value.input
states.initialInputHeight =

2
packages/components/select/src/useSelect.ts
View File

@ -148,7 +148,7 @@ export const useSelect = (props, states: States, ctx) => {
const selectSize = useSize()
const collapseTagSize = computed(() =>
['small', 'mini'].indexOf(selectSize.value) > -1 ? 'mini' : 'small'
['small'].indexOf(selectSize.value) > -1 ? 'small' : ''
)
const dropMenuVisible = computed(

3
packages/components/space/src/use-space.ts
View File

@ -6,9 +6,8 @@ import type { CSSProperties, StyleValue } from 'vue'
import type { ComponentSize } from '@element-plus/utils/types'
const SIZE_MAP: Record<ComponentSize, number> = {
mini: 4,
small: 8,
medium: 12,
default: 12,
large: 16,
}

3
packages/components/tag/__tests__/tag.spec.ts
View File

@ -96,8 +96,7 @@ describe('Tag.vue', () => {
const vm = wrapper.vm
const el = vm.$el
expect(el.className.includes('el-tag--large')).toEqual(true)
expect(el.className.includes('el-tag--default')).toEqual(false)
expect(el.className.includes('el-tag--small')).toEqual(false)
expect(el.className.includes('el-tag--mini')).toEqual(false)
expect(el.className.includes('el-tag--medium')).toEqual(false)
})
})

2
packages/components/tag/src/tag.ts
View File

@ -17,7 +17,7 @@ export const tagProps = buildProps({
},
size: {
type: String,
values: ['large', 'medium', 'small', 'mini'],
values: ['large', 'default', 'small'],
},
effect: {
type: String,

4
packages/components/time-picker/__tests__/time-picker.spec.ts
View File

@ -413,14 +413,14 @@ describe('TimePicker(range)', () => {
const wrapper = _mount(
`<el-time-picker
v-model="value"
size="mini"
size="small"
:is-range="true"
/>`,
() => ({
value: [new Date(2016, 9, 10, 18, 40), new Date(2016, 9, 10, 19, 40)],
})
)
expect(wrapper.find('.el-range-editor--mini').exists()).toBeTruthy()
expect(wrapper.find('.el-range-editor--small').exists()).toBeTruthy()
const input = wrapper.find('input')
input.trigger('blur')
input.trigger('focus')

2
packages/components/time-select/src/time-select.vue
View File

@ -111,7 +111,7 @@ export default defineComponent({
type: String as PropType<ComponentSize>,
default: '',
validator: (value: string) =>
!value || ['medium', 'small', 'mini'].indexOf(value) !== -1,
!value || ['large', 'small'].indexOf(value) !== -1,
},
placeholder: {
type: String,

4
packages/element-plus/package.json
View File

@ -46,9 +46,9 @@
"vue": "^3.2.0"
},
"dependencies": {
"@element-plus/icons-vue": "^0.2.2",
"@element-plus/icons-vue": "^0.2.4",
"@popperjs/core": "^2.10.2",
"@vueuse/core": "^7.0.0",
"@vueuse/core": "^7.3.0",
"async-validator": "^4.0.7",
"dayjs": "^1.10.7",
"lodash": "^4.17.21",

6
packages/hooks/__tests__/use-form-item.spec.ts
View File

@ -48,7 +48,7 @@ describe('use-form-item', () => {
})
it('should return props.size instead of injected.size', () => {
const propSize = 'mini'
const propSize = 'small'
const wrapper = mountComponent(
() => {
provide(elFormItemKey, {
@ -66,7 +66,7 @@ describe('use-form-item', () => {
})
it('should return fallback.size instead inject.size', () => {
const fallbackSize = 'mini'
const fallbackSize = 'small'
const wrapper = mountComponent(() => {
provide(buttonGroupContextKey, {
size: fallbackSize,
@ -81,7 +81,7 @@ describe('use-form-item', () => {
})
it('should return formItem.size instead form.size', () => {
const itemSize = 'mini'
const itemSize = 'small'
const wrapper = mountComponent(() => {
provide(elFormItemKey, {
size: itemSize,

23
packages/theme-chalk/src/avatar.scss
View File

@ -1,25 +1,28 @@
@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@include b(avatar) {
@include set-component-css-var('avatar', $avatar);
@include set-component-css-var('avatar-size', $avatar-size);
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
text-align: center;
overflow: hidden;
color: var(--el-avatar-text-color);
background: var(--el-avatar-bg-color);
width: var(--el-avatar-large-size);
height: var(--el-avatar-large-size);
line-height: var(--el-avatar-large-size);
font-size: var(--el-avatar-text-font-size);
width: var(--el-avatar-size);
height: var(--el-avatar-size);
font-size: var(--el-avatar-text-size);
> img {
display: block;
height: 100%;
vertical-align: middle;
}
@include m(circle) {
@ -31,14 +34,12 @@
}
@include m(icon) {
font-size: var(--el-avatar-icon-font-size);
font-size: var(--el-avatar-icon-size);
}
@each $size in (small, medium, large) {
@each $size in (small, default, large) {
@include m($size) {
width: var(--el-avatar-#{$size}-size);
height: var(--el-avatar-#{$size}-size);
line-height: var(--el-avatar-#{$size}-size);
--el-avatar-size: #{map.get($avatar-size, $size)};
}
}
}

16
packages/theme-chalk/src/button.scss
View File

@ -10,8 +10,10 @@
@include set-component-css-var('button', $button);
}
$button-border-width: 1px;
@include b(button) {
display: inline-block;
display: inline-flex;
line-height: 1;
min-height: map.get($input-height, 'default');
white-space: nowrap;
@ -32,13 +34,18 @@
font-weight: var(--el-button-font-weight);
user-select: none;
> span {
display: inline-flex;
align-items: center;
}
& + & {
margin-left: 10px;
}
@include button-size(
map.get($button-padding-vertical, 'default'),
map.get($button-padding-horizontal, 'default'),
map.get($button-padding-vertical, 'default') - $button-border-width,
map.get($button-padding-horizontal, 'default') - $button-border-width,
map.get($button-font-size, 'default'),
map.get($button-border-radius, 'default')
);
@ -151,7 +158,6 @@
}
@include when(round) {
border-radius: var(--el-border-radius-round);
padding: 12px 23px;
}
@include when(circle) {
border-radius: 50%;
@ -177,7 +183,7 @@
}
}
@each $size in (medium, small, mini) {
@each $size in (large, small) {
@include m($size) {
min-height: map.get($input-height, $size);

2
packages/theme-chalk/src/cascader.scss
View File

@ -73,7 +73,7 @@
}
}
@each $size in (medium, small, mini) {
@each $size in (large, small) {
@include m($size) {
font-size: map.get($input-font-size, $size);
line-height: map.get($input-height, $size);

2
packages/theme-chalk/src/checkbox-button.scss
View File

@ -122,7 +122,7 @@
}
}
@each $size in (medium, small, mini) {
@each $size in (large, small) {
@include m($size) {
.#{$namespace}-checkbox-button__inner {
@include button-size(

23
packages/theme-chalk/src/checkbox.scss
View File

@ -9,10 +9,9 @@
$checkbox-height: () !default;
$checkbox-height: map.merge(
(
'default': 40px,
'medium': 36px,
'small': 32px,
'mini': 28px,
'large': 40px,
'default': 32px,
'small': 24px,
),
$checkbox-height
);
@ -20,10 +19,9 @@ $checkbox-height: map.merge(
$checkbox-bordered-padding: () !default;
$checkbox-bordered-padding: map.merge(
(
'default': 0 20px 0 10px,
'medium': 0 20px 0 10px,
'large': 0 20px 0 10px,
'default': 0 15px 0 10px,
'small': 0 15px 0 10px,
'mini': 0 15px 0 10px,
),
$checkbox-bordered-padding
);
@ -31,9 +29,9 @@ $checkbox-bordered-padding: map.merge(
$checkbox-bordered-input-height: () !default;
$checkbox-bordered-input-height: map.merge(
(
'medium': 14px,
'large': 14px,
'default': 12px,
'small': 12px,
'mini': 12px,
),
$checkbox-bordered-input-height
);
@ -61,7 +59,7 @@ $checkbox-bordered-input-width: map.merge(
margin-right: 30px;
height: map.get($checkbox-height, 'default');
@each $size in (medium, small, mini) {
@each $size in (large, small) {
&.#{$namespace}-checkbox--#{$size} {
height: map.get($checkbox-height, $size);
}
@ -86,7 +84,7 @@ $checkbox-bordered-input-width: map.merge(
margin-left: 10px;
}
@each $size in (medium, small, mini) {
@each $size in (large, small) {
&.#{$namespace}-checkbox--#{$size} {
padding: map.get($checkbox-bordered-padding, $size);
border-radius: map.get($button-border-radius, $size);
@ -102,8 +100,7 @@ $checkbox-bordered-input-width: map.merge(
}
}
&.#{$namespace}-checkbox--small,
&.#{$namespace}-checkbox--mini {
&.#{$namespace}-checkbox--small {
.#{$namespace}-checkbox__inner {
&::after {
height: 6px;

Some files were not shown because too many files have changed in this diff Show More