forked from IDuxFE/idux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(comp:loading-bar): add LoadingBar component (IDuxFE#971)
- Loading branch information
1 parent
6f4d3af
commit 38f6c69
Showing
33 changed files
with
661 additions
and
55 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 changes: 6 additions & 0 deletions
6
packages/components/loading-bar/__tests__/__snapshots__/loadingBar.spec.ts.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
// Vitest Snapshot v1 | ||
|
||
exports[`LoadingBarProvider > render work 1`] = ` | ||
"<!--teleport start--> | ||
<!--teleport end--><button>ok</button>" | ||
`; |
61 changes: 61 additions & 0 deletions
61
packages/components/loading-bar/__tests__/loadingBar.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
/* eslint-disable vue/one-component-per-file */ | ||
import { MountingOptions, VueWrapper, flushPromises, mount } from '@vue/test-utils' | ||
|
||
import { renderWork } from '@tests' | ||
|
||
import IxLoadingBarProvider from '../src/LoadingBarProvider' | ||
import { LoadingBarProviderInstance, LoadingBarProviderProps } from '../src/types' | ||
|
||
describe('LoadingBarProvider', () => { | ||
const sleepMs = (ms = 1000) => new Promise<void>(r => setTimeout(() => r(), ms)) | ||
const LoadingBarMount = (options?: MountingOptions<Partial<LoadingBarProviderProps>>) => | ||
mount(IxLoadingBarProvider, { ...options }) as VueWrapper<LoadingBarProviderInstance> | ||
|
||
renderWork<LoadingBarProviderProps>(IxLoadingBarProvider, { | ||
props: {}, | ||
slots: { default: () => `<button>ok</button>` }, | ||
}) | ||
|
||
test('render', async () => { | ||
LoadingBarMount({ props: {}, slots: { default: () => `<button>ok</button>` } }) | ||
await flushPromises() | ||
|
||
const containerEl = document.querySelector('.ix-loading-bar-container') as HTMLElement | ||
expect(containerEl).not.toBeNull() | ||
|
||
const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement | ||
expect(loadingBarEl).not.toBeNull() | ||
expect(window.getComputedStyle(loadingBarEl).display).toBe('none') | ||
|
||
const maskEl = document.querySelector('.ix-loading-bar-mask') as HTMLElement | ||
expect(maskEl).not.toBeNull() | ||
}) | ||
|
||
test('start', async () => { | ||
const wrapper = LoadingBarMount() | ||
await flushPromises() | ||
const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement | ||
expect(loadingBarEl).not.toBeNull() | ||
wrapper.vm.start() | ||
|
||
await sleepMs(300) | ||
expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(80) | ||
expect(document.querySelector('.ix-loading-bar--loading')).not.toBeNull() | ||
wrapper.vm.finish() | ||
|
||
await sleepMs(500) | ||
expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(100) | ||
}) | ||
|
||
test('error', async () => { | ||
const wrapper = LoadingBarMount() | ||
await flushPromises() | ||
const loadingBarEl = document.querySelector('.ix-loading-bar') as HTMLElement | ||
expect(loadingBarEl).not.toBeNull() | ||
wrapper.vm.error() | ||
await sleepMs(100) | ||
expect(document.querySelector('.ix-loading-bar--error')).not.toBeNull() | ||
await sleepMs() | ||
expect(window.parseInt(window.getComputedStyle(loadingBarEl).maxWidth)).toBeLessThanOrEqual(100) | ||
}) | ||
}) |
39 changes: 39 additions & 0 deletions
39
packages/components/loading-bar/__tests__/useLoadingBar.spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
/* eslint-disable vue/one-component-per-file */ | ||
import { VueWrapper, mount } from '@vue/test-utils' | ||
import { defineComponent } from 'vue' | ||
|
||
import IxLoadingBarProvider from '../src/LoadingBarProvider' | ||
import { LoadingBarProviderInstance } from '../src/types' | ||
import { useLoadingBar } from '../src/useLoadingBar' | ||
|
||
describe('LoadingBarProvider', () => { | ||
test('no provider', async () => { | ||
const Test = defineComponent({ | ||
setup() { | ||
useLoadingBar() | ||
}, | ||
}) | ||
expect(() => mount(Test)).toThrowError(/IxLoadingBarProvider/) | ||
}) | ||
|
||
test('provider', async () => { | ||
const Test = defineComponent({ | ||
setup(props, { expose }) { | ||
expose(useLoadingBar()) | ||
}, | ||
render() { | ||
return null | ||
}, | ||
}) | ||
const wrapper = mount({ | ||
template: '<IxLoadingBarProvider><Test></Test></IxLoadingBarProvider>', | ||
components: { | ||
IxLoadingBarProvider, | ||
Test, | ||
}, | ||
}) as VueWrapper<LoadingBarProviderInstance> | ||
expect(wrapper.vm.start).not.toBeNull() | ||
expect(wrapper.vm.finish).not.toBeNull() | ||
expect(wrapper.vm.error).not.toBeNull() | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
--- | ||
order: 0 | ||
title: | ||
zh: 基本使用 | ||
en: Basic usage | ||
--- | ||
|
||
## zh | ||
|
||
最简单的用法。 | ||
|
||
## en | ||
|
||
The simplest usage. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<template> | ||
<IxSpace> | ||
<IxButton @click="start()">开始</IxButton> | ||
<IxButton @click="finish">结束</IxButton> | ||
<IxButton @click="error">错误</IxButton> | ||
<IxButton @click="autoExit">开始有遮罩,4s后自动结束</IxButton> | ||
</IxSpace> | ||
</template> | ||
|
||
<script setup lang="ts"> | ||
import { useLoadingBar } from '@idux/components/loading-bar' | ||
const { start, finish, error } = useLoadingBar() | ||
function autoExit() { | ||
start({ mask: true }) | ||
setTimeout(() => finish(), 4000) | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
## Description | ||
|
||
## Usage scenarios |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
## 组件定义 | ||
|
||
## 使用场景 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
--- | ||
category: components | ||
type: Feedback | ||
order: 0 | ||
title: LoadingBar | ||
subtitle: | ||
--- | ||
|
||
## API | ||
|
||
### IxLoadingBar | ||
|
||
#### LoadingBarProps | ||
|
||
| Name | Description | Type | Default | Global Config | Remark | | ||
| --- | --- | --- | --- | --- | --- | | ||
| mask | - | - | - | ✅ | - | | ||
|
||
#### LoadingBarMethods | ||
|
||
| Name | Description | Parameter Type | Remark | | ||
| --- | --- | --- | --- | | ||
| start | - | - | - | | ||
| finish | - | - | - | | ||
| error | - | - | - | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
--- | ||
category: components | ||
type: 反馈 | ||
order: 0 | ||
title: LoadingBar | ||
subtitle: 加载进度条 | ||
--- | ||
|
||
## API | ||
|
||
使用 LoadingBar 只有一种方法,在 IxLoadingBarProvider 组件里面嵌套使用 `useLoadingBar` | ||
|
||
### IxLoadingProviderBar | ||
|
||
如果你想通过 `useLoadingBar` 来创建提示框,则你需要把组件包裹在 `IxLoadingBarProvider` 内部,因为这样才不会丢失应用的上下文信息。 | ||
|
||
#### LoadingBarProviderProps | ||
|
||
| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 | | ||
| --- | --- | --- | --- | --- | --- | | ||
| mask | `start()`后是否同时显示遮罩 | - | false | ✅ | - | | ||
|
||
#### LoadingBarProviderMethods | ||
|
||
| 名称 | 说明 | 参数类型 | 备注 | | ||
| --- | --- | --- | --- | | ||
| `start` | 开始 | (LoadingBarOptions) => void | 加载并显示进度条到80%暂停 | | ||
| `finish` | 结束 | - | 继续加载进度条到100%,然后隐藏 | | ||
| `error` | 错误 | - | 加载并显示,进度条继续加载到100,然后隐藏 | | ||
|
||
<!--- insert less variable begin ---> | ||
## 主题变量 | ||
|
||
| 名称 | default | seer | 备注 | | ||
| --- | --- | --- | --- | | ||
|`@loading-bar-height` | `2px` | - | - | | ||
|`@loading-bar-loading-color` | `@color-primary` | - | - | | ||
|`@loading-bar-error-color` | `@color-error`| - | - | | ||
|
||
<!--- insert less variable end ---> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
/** | ||
* @license | ||
* | ||
* Use of this source code is governed by an MIT-style license that can be | ||
* found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE | ||
*/ | ||
|
||
import type { LoadingBarProviderComponent } from './src/types' | ||
|
||
import LoadingBarProvider from './src/LoadingBarProvider' | ||
|
||
const IxLoadingBarProvider = LoadingBarProvider as unknown as LoadingBarProviderComponent | ||
|
||
export { IxLoadingBarProvider } | ||
|
||
export { useLoadingBar } from './src/useLoadingBar' | ||
|
||
export type { LoadingBarProviderRef, LoadingBarProviderComponent, LoadingBarOptions } from './src/types' |
Oops, something went wrong.