diff --git a/.github/workflows/publish-docs-deploy-manual.yml b/.github/workflows/publish-docs-deploy-manual.yml index f6e710a87f..fd1c6a6329 100644 --- a/.github/workflows/publish-docs-deploy-manual.yml +++ b/.github/workflows/publish-docs-deploy-manual.yml @@ -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 diff --git a/.github/workflows/publish-docs-deploy.yml b/.github/workflows/publish-docs-deploy.yml index ef91692ef8..503d45443b 100644 --- a/.github/workflows/publish-docs-deploy.yml +++ b/.github/workflows/publish-docs-deploy.yml @@ -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 diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 9038b38ae4..ed8b8de5eb 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -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_ diff --git a/docs/en-US/component/switch.md b/docs/en-US/component/switch.md index 61606513ad..829c010b45 100644 --- a/docs/en-US/component/switch.md +++ b/docs/en-US/component/switch.md @@ -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` | — | | 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 diff --git a/docs/en-US/component/upload.md b/docs/en-US/component/upload.md index c8a3112ba2..8bd97b114e 100644 --- a/docs/en-US/component/upload.md +++ b/docs/en-US/component/upload.md @@ -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` | — | 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 \| Awaitable> \| ((rawFile: UploadRawFile) => Awaitable>)` | — | 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` | — | 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` | — | 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` | — | 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` | — | +| 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 \| Awaitable>` / ^[Function]`(rawFile: UploadRawFile) => Awaitable>` | {} | +| 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` | — | +| 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` | — | +| 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` | 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 + +
+ Show declarations + +```ts + +type UploadFiles = UploadFile[] + +type UploadUserFile = Omit & + Partial> + +type UploadStatus = 'ready' | 'uploading' | 'success' | 'fail' + +type Awaitable = Promise | T + +type Mutable = { -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 + filename: string + file: File + headers: Headers | Record + onError: (evt: UploadAjaxError) => void + onProgress: (evt: UploadProgressEvent) => void + onSuccess: (response: any) => void + withCredentials: boolean +} +``` + +
diff --git a/docs/en-US/component/watermark.md b/docs/en-US/component/watermark.md index 4bf0bcc55c..932a9c91b1 100644 --- a/docs/en-US/component/watermark.md +++ b/docs/en-US/component/watermark.md @@ -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 | diff --git a/global.d.ts b/global.d.ts index 9a4cd322b8..dc14ef968c 100644 --- a/global.d.ts +++ b/global.d.ts @@ -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 { diff --git a/packages/components/alert/__tests__/alert.test.tsx b/packages/components/alert/__tests__/alert.test.tsx index ed2b6e6943..54e4676f54 100644 --- a/packages/components/alert/__tests__/alert.test.tsx +++ b/packages/components/alert/__tests__/alert.test.tsx @@ -34,7 +34,11 @@ describe('Alert.vue', () => { }) test('title slot', () => { - const wrapper = mount(() => ) + const wrapper = mount(Alert, { + slots: { + title: AXIOM, + }, + }) expect(wrapper.find('.el-alert__title').text()).toEqual(AXIOM) }) diff --git a/packages/components/carousel/src/use-carousel.ts b/packages/components/carousel/src/use-carousel.ts index 9588b44eb1..93b76a186d 100644 --- a/packages/components/carousel/src/use-carousel.ts +++ b/packages/components/carousel/src/use-carousel.ts @@ -212,7 +212,7 @@ export const useCarousel = ( function resetTimer() { pauseTimer() - startTimer() + if (!props.pauseOnHover) startTimer() } function setContainerHeight(height: number) { diff --git a/packages/components/index.ts b/packages/components/index.ts index 03b816605b..f44727a243 100644 --- a/packages/components/index.ts +++ b/packages/components/index.ts @@ -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' diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts index 22b9de0a7c..38110684f1 100644 --- a/packages/components/select/src/useSelect.ts +++ b/packages/components/select/src/useSelect.ts @@ -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 || diff --git a/packages/components/switch/src/switch.ts b/packages/components/switch/src/switch.ts index 4832f3ae86..a68c3a5593 100644 --- a/packages/components/switch/src/switch.ts +++ b/packages/components/switch/src/switch.ts @@ -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 diff --git a/packages/components/switch/src/switch.vue b/packages/components/switch/src/switch.vue index 82597a5e31..efa3d59021 100644 --- a/packages/components/switch/src/switch.vue +++ b/packages/components/switch/src/switch.vue @@ -8,6 +8,7 @@ role="switch" :aria-checked="checked" :aria-disabled="switchDisabled" + :aria-label="label" :name="name" :true-value="activeValue" :false-value="inactiveValue" diff --git a/packages/components/upload/src/upload-list.vue b/packages/components/upload/src/upload-list.vue index b56832489a..c9cdd1634d 100644 --- a/packages/components/upload/src/upload-list.vue +++ b/packages/components/upload/src/upload-list.vue @@ -1,13 +1,5 @@