javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14587 from element-plus/dev

Browse Source 
D2M
This commit is contained in:
iamkun
2023-10-18 12:58:34 +08:00
committed by GitHub
parent 8d0ccbc08d 5b54c5d1cf
commit d6a8fd0ceb
18 changed files with 222 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/publish-docs-deploy-manual.yml vendored
View File

@@ -57,6 +57,7 @@ jobs:
run: pnpm docs:build
env:
DOC_ENV: production
NODE_OPTIONS: --max-old-space-size=4096
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4.3.4

1
.github/workflows/publish-docs-deploy.yml vendored
View File

@@ -64,6 +64,7 @@ jobs:
run: pnpm docs:build
env:
DOC_ENV: production
NODE_OPTIONS: --max-old-space-size=4096
- name: Deploy
uses: JamesIves/github-pages-deploy-action@v4.3.4

16
CHANGELOG.en-US.md
View File

@@ -1,5 +1,21 @@
## Changelog
### 2.4.1
_2023-10-18_
#### Features
- Components [switch] add label attribute for accessibility (#14319 by @Karolis-Stoncius)
#### Bug fixes
- Components inconsistent style rounded button (#14552 by @cuongle-hdwebsoft)
- Components prevent carousel from auto playing (#14553 by @cuongle-hdwebsoft)
- Components [watermark] missing the CSS file (#14564 by @tolking)
- Theme-chalk menu horizontal popover height, close #14566 (#14573 by @YunYouJun)
- Components [select] input height calculation error (#14565 by @tolking)
### 2.4.0
_2023-10-13_

1
docs/en-US/component/switch.md
View File

@@ -115,6 +115,7 @@ switch/custom-action-icon
| before-change | before-change hook before the switch state changes. If `false` is returned or a `Promise` is returned and then is rejected, will stop switching | ^[boolean] / ^[Function]`() => Promise<boolean>` | — |
| id | id for input | ^[string] | — |
| tabindex | tabindex for input | ^[string] / ^[number] | — |
| label ^(2.4.1) ^(a11y) | same as `aria-label` in native input | ^[string] | — |
### Events

135
docs/en-US/component/upload.md
View File

@@ -89,53 +89,106 @@ upload/manual
:::
## Upload API
## API
### Attributes
| Name | Description | Type | Default | Required |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -------- | -------- |
| `action` | request URL. | `string` | — | Yes |
| `headers` | request headers. | `Headers \| Record<string, any>` | — | No |
| `method` | set upload request method. | `string` | `'post'` | No |
| `multiple` | whether uploading multiple files is permitted. | `boolean` | `false` | No |
| `data` | additions options of request. support `Awaitable` data and `Function` since v2.3.13 | `Record<string, any> \| Awaitable<Record<string, any>> \| ((rawFile: UploadRawFile) => Awaitable<Record<string, any>>)` | — | No |
| `name` | key name for uploaded file. | `string` | `'file'` | No |
| `with-credentials` | whether cookies are sent. | `boolean` | `false` | No |
| `show-file-list` | whether to show the uploaded file list. | `boolean` | `true` | No |
| `drag` | whether to activate drag and drop mode. | `boolean` | `false` | No |
| `accept` | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`. | `string` | — | No |
| `on-preview` | hook function when clicking the uploaded files. | `(uploadFile: UploadFile) => void` | — | No |
| `on-remove` | hook function when files are removed. | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — | No |
| `on-success` | hook function when uploaded successfully. | `(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — | No |
| `on-error` | hook function when some errors occurs. | `(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — | No |
| `on-progress` | hook function when some progress occurs. | `(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — | No |
| `on-change` | hook function when select file or upload file success or upload file fail. | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — | No |
| `on-exceed` | hook function when limit is exceeded. | `(files: File[], uploadFiles: UploadUserFile[]) => void` | — | No |
| `before-upload` | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted. | `(rawFile: UploadRawFile) => Awaitable<void \| undefined \| null \| boolean \| File \| Blob>` | — | No |
| `before-remove` | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | `(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>` | — | No |
| `file-list` / `v-model:file-list` | default uploaded files. | `UploadUserFile[]` | `[]` | No |
| `list-type` | type of file list. | `'text' \| 'picture' \| 'picture-card'` | `'text'` | No |
| `auto-upload` | whether to auto upload file. | `boolean` | `true` | No |
| `http-request` | override default xhr behavior, allowing you to implement your own upload-file's request. | `(options: UploadRequestOptions) => XMLHttpRequest \| Promise<unknown>` | — | No |
| `disabled` | whether to disable upload. | `boolean` | `false` | No |
| `limit` | maximum number of uploads allowed. | `number` | — | No |
| Name | Description | Type | Default |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| action ^(required) | request URL. | ^[string] | # |
| headers | request headers. | ^[object]`Headers \| Record<string, any>` | — |
| method | set upload request method. | ^[string] | post |
| multiple | whether uploading multiple files is permitted. | ^[boolean] | false |
| data | additions options of request. support `Awaitable` data and `Function` since v2.3.13. | ^[object]`Record<string, any> \| Awaitable<Record<string, any>>` / ^[Function]`(rawFile: UploadRawFile) => Awaitable<Record<string, any>>` | {} |
| name | key name for uploaded file. | ^[string] | file |
| with-credentials | whether cookies are sent. | ^[boolean] | false |
| show-file-list | whether to show the uploaded file list. | ^[boolean] | true |
| drag | whether to activate drag and drop mode. | ^[boolean] | false |
| accept | accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`. | ^[string] | '' |
| on-preview | hook function when clicking the uploaded files. | ^[Function]`(uploadFile: UploadFile) => void` | — |
| on-remove | hook function when files are removed. | ^[Function]`(uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — |
| on-success | hook function when uploaded successfully. | ^[Function]`(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — |
| on-error | hook function when some errors occurs. | ^[Function]`(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — |
| on-progress | hook function when some progress occurs. | ^[Function]`(evt: UploadProgressEvent, uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — |
| on-change | hook function when select file or upload file success or upload file fail. | ^[Function]`(uploadFile: UploadFile, uploadFiles: UploadFiles) => void` | — |
| on-exceed | hook function when limit is exceeded. | ^[Function]`(files: File[], uploadFiles: UploadUserFile[]) => void` | — |
| before-upload | hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted. | ^[Function]`(rawFile: UploadRawFile) => Awaitable<void \| undefined \| null \| boolean \| File \| Blob>` | — |
| before-remove | hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted. | ^[Function]`(uploadFile: UploadFile, uploadFiles: UploadFiles) => Awaitable<boolean>` | — |
| file-list / v-model:file-list | default uploaded files. | ^[object]`UploadUserFile[]` | [] |
| list-type | type of file list. | ^[enum]`'text' \| 'picture' \| 'picture-card'` | text |
| auto-upload | whether to auto upload file. | ^[boolean] | true |
| http-request | override default xhr behavior, allowing you to implement your own upload-file's request. | ^[Function]`(options: UploadRequestOptions) => XMLHttpRequest \| Promise<unknown>` | ajaxUpload [see](https://github.com/element-plus/element-plus/blob/dev/packages/components/upload/src/ajax.ts#L55) |
| disabled | whether to disable upload. | ^[boolean] | false |
| limit | maximum number of uploads allowed. | ^[number] | — |
### Slots
| Name | Description | Type |
| --------- | ----------------------------------- | ---------------------- |
| `default` | customize default content. | - |
| `trigger` | content which triggers file dialog. | - |
| `tip` | content of tips. | - |
| `file` | content of thumbnail template. | `{ file: UploadFile }` |
| Name | Description | Type |
| ------- | ----------------------------------- | ------------------------------- |
| default | customize default content. | - |
| trigger | content which triggers file dialog. | - |
| tip | content of tips. | - |
| file | content of thumbnail template. | ^[object]`{ file: UploadFile }` |
### Exposes
| Name | Description | Type |
| -------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
| `abort` | cancel upload request. | `(file: UploadFile) => void` |
| `submit` | upload the file list manually. | `() => void` |
| `clearFiles` | clear the file list (this method is not supported in the `before-upload` hook). | `(status?: Array<"ready" \| "uploading" \| "success" \| "fail">) => void` |
| `handleStart` | select the file manually. | `(rawFile: UploadRawFile) => void` |
| `handleRemove` | remove the file manually. `file` and `rawFile` has been merged. `rawFile` will be removed in `v2.2.0`. | `(file: UploadFile \| UploadRawFile, rawFile?: UploadRawFile) => void` |
| Name | Description | Type |
| ------------ | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
| abort | cancel upload request. | ^[Function]`(file: UploadFile) => void` |
| submit | upload the file list manually. | ^[Function]`() => void` |
| clearFiles | clear the file list (this method is not supported in the `before-upload` hook). | ^[Function]`(status?: UploadStatus[]) => void` |
| handleStart | select the file manually. | ^[Function]`(rawFile: UploadRawFile) => void` |
| handleRemove | remove the file manually. `file` and `rawFile` has been merged. `rawFile` will be removed in `v2.2.0`. | ^[Function]`(file: UploadFile \| UploadRawFile, rawFile?: UploadRawFile) => void` |
## Type Declarations
<details>
<summary>Show declarations</summary>
```ts
type UploadFiles = UploadFile[]
type UploadUserFile = Omit<UploadFile, 'status' | 'uid'> &
Partial<Pick<UploadFile, 'status' | 'uid'>>
type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail'
type Awaitable<T> = Promise<T> | T
type Mutable<T> = { -readonly [P in keyof T]: T[P] }
interface UploadFile {
name: string
percentage?: number
status: UploadStatus
size?: number
response?: unknown
uid: number
url?: string
raw?: UploadRawFile
}
interface UploadProgressEvent extends ProgressEvent {
percent: number
}
interface UploadRawFile extends File {
uid: number
}
interface UploadRequestOptions {
action: string
method: string
data: Record<string, string | Blob | [string | Blob, string]>
filename: string
file: File
headers: Headers | Record<string, string | number | null | undefined>
onError: (evt: UploadAjaxError) => void
onProgress: (evt: UploadProgressEvent) => void
onSuccess: (response: any) => void
withCredentials: boolean
}
```
</details>

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

@@ -69,6 +69,6 @@ watermark/custom
| ---------- | ----------- | ---------------------------------------------------- | --------------- |
| color | font color | ^[string] | rgba(0,0,0,.15) |
| fontSize | font size | ^[number] | 16 |
| fontWeight | font weight | ^[enum]`'normal \| 'light' \| 'weight' \| number` | normal |
| fontWeight | font weight | ^[enum]`'normal' \| 'light' \| 'weight' \| number` | normal |
| fontFamily | font family | ^[string] | sans-serif |
| fontStyle | font style | ^[enum]`'none' \| 'normal' \| 'italic' \| 'oblique'` | normal |

1
global.d.ts vendored
View File

@@ -95,6 +95,7 @@ declare module '@vue/runtime-core' {
ElDescriptionsItem: typeof import('element-plus')['ElDescriptionsItem']
ElResult: typeof import('element-plus')['ElResult']
ElSelectV2: typeof import('element-plus')['ElSelectV2']
ElWatermark: typeof import('element-plus')['ElWatermark']
}
interface ComponentCustomProperties {

6
packages/components/alert/__tests__/alert.test.tsx
View File

@@ -34,7 +34,11 @@ describe('Alert.vue', () => {
})
test('title slot', () => {
const wrapper = mount(() => <Alert title={AXIOM} />)
const wrapper = mount(Alert, {
slots: {
title: AXIOM,
},
})
expect(wrapper.find('.el-alert__title').text()).toEqual(AXIOM)
})

2
packages/components/carousel/src/use-carousel.ts
View File

@@ -212,7 +212,7 @@ export const useCarousel = (
function resetTimer() {
pauseTimer()
startTimer()
if (!props.pauseOnHover) startTimer()
}
function setContainerHeight(height: number) {

1
packages/components/index.ts
View File

@@ -69,6 +69,7 @@ export * from './tree-select'
export * from './tree-v2'
export * from './upload'
export * from './virtual-list'
export * from './watermark'
// plugins
export * from './infinite-scroll'

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

@@ -411,7 +411,8 @@ export const useSelect = (props, states: States, ctx) => {
ns.cssVarName('input-height')
)
const gotSize =
cssVarOfSelectSize || getComponentSize(selectSize.value || form?.size)
Number.parseFloat(cssVarOfSelectSize) ||
getComponentSize(selectSize.value || form?.size)
const sizeInMap =
selectSize.value ||

7
packages/components/switch/src/switch.ts
View File

@@ -169,6 +169,13 @@ export const switchProps = buildProps({
type: [Boolean, String, Number],
default: false,
},
/**
* @description native input aria-label
*/
label: {
type: String,
default: undefined,
},
} as const)
export type SwitchProps = ExtractPropTypes<typeof switchProps>

1
packages/components/switch/src/switch.vue
View File

@@ -8,6 +8,7 @@
role="switch"
:aria-checked="checked"
:aria-disabled="switchDisabled"
:aria-label="label"
:name="name"
:true-value="activeValue"
:false-value="inactiveValue"

20
packages/components/upload/src/upload-list.vue
View File

@@ -1,13 +1,5 @@
<template>
<transition-group
tag="ul"
:class="[
nsUpload.b('list'),
nsUpload.bm('list', listType),
nsUpload.is('disabled', disabled),
]"
:name="nsList.b()"
>
<transition-group tag="ul" :class="containerKls" :name="nsList.b()">
<li
v-for="file in files"
:key="file.uid || file.name"
@@ -112,7 +104,7 @@
</transition-group>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { computed, ref } from 'vue'
import { ElIcon } from '@element-plus/components/icon'
import {
Check,
@@ -133,7 +125,7 @@ defineOptions({
name: 'ElUploadList',
})
defineProps(uploadListProps)
const props = defineProps(uploadListProps)
const emit = defineEmits(uploadListEmits)
const { t } = useLocale()
@@ -144,6 +136,12 @@ const disabled = useFormDisabled()
const focusing = ref(false)
const containerKls = computed(() => [
nsUpload.b('list'),
nsUpload.bm('list', props.listType),
nsUpload.is('disabled', props.disabled),
])
const handleRemove = (file: UploadFile) => {
emit('remove', file)
}

79
packages/components/upload/src/upload.ts
View File

@@ -81,17 +81,29 @@ export interface UploadHooks {
export type UploadData = Mutable<Record<string, any>>
export const uploadBaseProps = buildProps({
/**
* @description request URL
*/
action: {
type: String,
default: '#',
},
/**
* @description request headers
*/
headers: {
type: definePropType<Headers | Record<string, any>>(Object),
},
/**
* @description set upload request method
*/
method: {
type: String,
default: 'post',
},
/**
* @description additions options of request
*/
data: {
type: definePropType<
| Awaitable<UploadData>
@@ -99,85 +111,144 @@ export const uploadBaseProps = buildProps({
>([Object, Function, Promise]),
default: () => mutable({} as const),
},
/**
* @description whether uploading multiple files is permitted
*/
multiple: {
type: Boolean,
default: false,
},
/**
* @description key name for uploaded file
*/
name: {
type: String,
default: 'file',
},
/**
* @description whether to activate drag and drop mode
*/
drag: {
type: Boolean,
default: false,
},
/**
* @description whether cookies are sent
*/
withCredentials: Boolean,
/**
* @description whether to show the uploaded file list
*/
showFileList: {
type: Boolean,
default: true,
},
/**
* @description accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true`
*/
accept: {
type: String,
default: '',
},
type: {
type: String,
default: 'select',
},
/**
* @description default uploaded files
*/
fileList: {
type: definePropType<UploadUserFile[]>(Array),
default: () => mutable([] as const),
},
/**
* @description whether to auto upload file
*/
autoUpload: {
type: Boolean,
default: true,
},
/**
* @description type of file list
*/
listType: {
type: String,
values: uploadListTypes,
default: 'text',
},
/**
* @description override default xhr behavior, allowing you to implement your own upload-file's request
*/
httpRequest: {
type: definePropType<UploadRequestHandler>(Function),
default: ajaxUpload,
},
/**
* @description whether to disable upload
*/
disabled: Boolean,
/**
* @description maximum number of uploads allowed
*/
limit: Number,
} as const)
export const uploadProps = buildProps({
...uploadBaseProps,
/**
* @description hook function before uploading with the file to be uploaded as its parameter. If `false` is returned or a `Promise` is returned and then is rejected, uploading will be aborted
*/
beforeUpload: {
type: definePropType<UploadHooks['beforeUpload']>(Function),
default: NOOP,
},
/**
* @description hook function before removing a file with the file and file list as its parameters. If `false` is returned or a `Promise` is returned and then is rejected, removing will be aborted
*/
beforeRemove: {
type: definePropType<UploadHooks['beforeRemove']>(Function),
},
/**
* @description hook function when files are removed
*/
onRemove: {
type: definePropType<UploadHooks['onRemove']>(Function),
default: NOOP,
},
/**
* @description hook function when select file or upload file success or upload file fail
*/
onChange: {
type: definePropType<UploadHooks['onChange']>(Function),
default: NOOP,
},
/**
* @description hook function when clicking the uploaded files
*/
onPreview: {
type: definePropType<UploadHooks['onPreview']>(Function),
default: NOOP,
},
/**
* @description hook function when uploaded successfully
*/
onSuccess: {
type: definePropType<UploadHooks['onSuccess']>(Function),
default: NOOP,
},
/**
* @description hook function when some progress occurs
*/
onProgress: {
type: definePropType<UploadHooks['onProgress']>(Function),
default: NOOP,
},
/**
* @description hook function when some errors occurs
*/
onError: {
type: definePropType<UploadHooks['onError']>(Function),
default: NOOP,
},
/**
* @description hook function when limit is exceeded
*/
onExceed: {
type: definePropType<UploadHooks['onExceed']>(Function),
default: NOOP,

0
packages/components/watermark/style/css.ts Normal file
View File

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

@@ -148,6 +148,7 @@ $button-icon-span-gap: map.merge(
border-radius: getCssVar('border-radius', 'round');
}
@include when(circle) {
width: map.get($input-height, 'default');
border-radius: 50%;
padding: map.get($button-padding-vertical, 'default') - $button-border-width;
}

5
packages/theme-chalk/src/menu.scss
View File

@@ -80,6 +80,11 @@
}
@include m(horizontal) {
// reset menu-item popup height
&.#{$namespace}-menu--popup-container {
height: unset;
}
display: flex;
flex-wrap: nowrap;
border-right: none;