feat(loading-bar): support setDefaultOptions and resetDefaultOptions

varletjs · Feb 8, 2023 · 8215585 · 8215585
1 parent e13c6a2
commit 8215585
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 26 deletions.
diff --git a/packages/varlet-ui/src/loading-bar/__tests__/index.spec.js b/packages/varlet-ui/src/loading-bar/__tests__/index.spec.js
@@ -21,12 +21,10 @@ test('test loading-bar methods', async () => {
   expect(document.querySelector('.var-loading-bar--error')).toBeFalsy()
 })
 
-test('test loading-bar custom style', async () => {
-  LoadingBar.mergeConfig({
+test('test setDefaultOptions and resetDefaultOptions', async () => {
+  LoadingBar.setDefaultOptions({
     color: 'white',
     errorColor: 'black',
-    height: '10px',
-    top: '20px',
   })
 
   LoadingBar.start()
@@ -35,12 +33,19 @@ test('test loading-bar custom style', async () => {
   const el = document.querySelector('.var-loading-bar')
 
   expect(el.style.backgroundColor).toBe('white')
-  expect(el.style.height).toBe('10px')
-  expect(el.style.top).toBe('20px')
 
   LoadingBar.error()
   await delay(200)
   expect(el.style.backgroundColor).toBe('black')
 
+  LoadingBar.resetDefaultOptions()
+
+  await delay(200)
+  expect(el.style.backgroundColor).toBe('')
+
+  LoadingBar.error()
+  await delay(200)
+  expect(el.style.backgroundColor).toBe('')
+
   el.remove()
 })
diff --git a/packages/varlet-ui/src/loading-bar/docs/en-US.md b/packages/varlet-ui/src/loading-bar/docs/en-US.md
@@ -14,11 +14,15 @@ import { LoadingBar } from '@varlet/ui'
 const hasCustomStyle = ref(false)
 
 function setStyle() {
-  LoadingBar.mergeConfig({
-    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
-    color: hasCustomStyle.value ? undefined : '#10afef',
-    height: hasCustomStyle.value ? undefined : '5px'
-  })
+  if (hasCustomStyle.value) {
+    LoadingBar.resetDefaultOptions()
+  } else {
+    LoadingBar.setDefaultOptions({
+      errorColor: '#ff8800',
+      color: '#10afef',
+      height: '5px',
+    })
+  }
 
   hasCustomStyle.value = !hasCustomStyle.value
 }
@@ -47,10 +51,12 @@ function setStyle() {
 
 | Method | Description | Arguments | Return |
 |---------------------|----------|--|---------|
-| `LoadingBar.mergeConfig` | Merge config of loading bar | _options: Options_ | `-`  |
+| `LoadingBar.mergeConfig` | Set default option configuration(Deprecated and use setDefaultOptions to instead) | _options: Options_ | `-`  |
 | `LoadingBar.start`  | Start loading  | `-` | `-` |
 | `LoadingBar.finish` | Finish loading  | `-` | `-` |
 | `LoadingBar.error`  | Loading error  | `-` | `-` |
+| `LoadingBar.setDefaultOptions` | Set default option configuration | _options_ | `-` |
+| `LoadingBar.resetDefaultOptions` | Reset default option configuration | _-_ | `-` |
 
 ### LoadingBar Options
 

diff --git a/packages/varlet-ui/src/loading-bar/docs/zh-CN.md b/packages/varlet-ui/src/loading-bar/docs/zh-CN.md
@@ -14,11 +14,15 @@ import { LoadingBar } from '@varlet/ui'
 const hasCustomStyle = ref(false)
 
 function setStyle() {
-  LoadingBar.mergeConfig({
-    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
-    color: hasCustomStyle.value ? undefined : '#10afef',
-    height: hasCustomStyle.value ? undefined : '5px'
-  })
+  if (hasCustomStyle.value) {
+    LoadingBar.resetDefaultOptions()
+  } else {
+    LoadingBar.setDefaultOptions({
+      errorColor: '#ff8800',
+      color: '#10afef',
+      height: '5px',
+    })
+  }
 
   hasCustomStyle.value = !hasCustomStyle.value
 }
@@ -47,10 +51,12 @@ function setStyle() {
 
 | 方法名                 | 说明       | 参数 | 返回值     |
 |---------------------|----------|--|---------|
-| `LoadingBar.mergeConfig` | 合并覆盖加载条的默认样式 | _options: Options_ | `-`  |
+| `LoadingBar.mergeConfig` | 设置默认的选项配置（已废弃，使用`setDefaultOptions`替换） | _options: Options_ | `-`  |
 | `LoadingBar.start`  | 开始加载  | `-` | `-` |
 | `LoadingBar.finish` | 结束加载  | `-` | `-` |
 | `LoadingBar.error`  | 加载失败  | `-` | `-` |
+| `LoadingBar.setDefaultOptions` | 设置默认的选项配置 | _options: Options_ | `-` |
+| `LoadingBar.resetDefaultOptions` | 重置默认的选项配置 | _-_ | `-` |
 
 ### LoadingBar Options
 

diff --git a/packages/varlet-ui/src/loading-bar/example/index.vue b/packages/varlet-ui/src/loading-bar/example/index.vue
@@ -10,19 +10,23 @@ import { use, pack } from './locale'
 const hasCustomStyle = ref(false)
 
 function setStyle() {
-  LoadingBar.mergeConfig({
-    errorColor: hasCustomStyle.value ? undefined : '#ff8800',
-    color: hasCustomStyle.value ? undefined : '#10afef',
-    height: hasCustomStyle.value ? undefined : '5px',
-  })
+  if (hasCustomStyle.value) {
+    LoadingBar.resetDefaultOptions()
+  } else {
+    LoadingBar.setDefaultOptions({
+      errorColor: '#ff8800',
+      color: '#10afef',
+      height: '5px',
+    })
+  }
 
   hasCustomStyle.value = !hasCustomStyle.value
 }
 
 watchDarkMode(dark)
 watchLang(use)
 
-LoadingBar.mergeConfig({
+LoadingBar.setDefaultOptions({
   top: '14.5vw',
 })
 </script>

diff --git a/packages/varlet-ui/src/loading-bar/index.ts b/packages/varlet-ui/src/loading-bar/index.ts
@@ -23,20 +23,40 @@ interface LoadingBar {
   finish(): void
 
   error(): void
+
+  setDefaultOptions(options: LoadingBarOptions): void
+
+  resetDefaultOptions(): void
 }
 
 let timer: number
 let isMount: boolean
-const props: LoadingBarOptions & InternalProps = reactive({
+let setOptions: LoadingBarOptions = {}
+
+const internalProps: InternalProps = {
   value: 0,
   opacity: 0,
   error: false,
-})
+}
+const props: LoadingBarOptions & InternalProps = reactive(internalProps)
 
 const mergeConfig = (options: LoadingBarOptions) => {
   Object.assign(props, options)
 }
 
+const setDefaultOptions = (options: LoadingBarOptions) => {
+  Object.assign(props, options)
+  setOptions = options
+}
+
+const resetDefaultOptions = () => {
+  Object.keys(setOptions).forEach((key) => {
+    if (props[key as keyof LoadingBarOptions] !== undefined) {
+      props[key as keyof LoadingBarOptions] = undefined
+    }
+  })
+}
+
 const changeValue = () => {
   timer = window.setTimeout(() => {
     if (props.value >= 95) return
@@ -91,7 +111,10 @@ const LoadingBar: LoadingBar = {
   start,
   finish,
   error,
+  /** @deprecated Use setDefaultOptions to instead. */
   mergeConfig,
+  setDefaultOptions,
+  resetDefaultOptions,
 }
 
 export { props as loadingBarProps } from './props'

diff --git a/packages/varlet-ui/types/loadingBar.d.ts b/packages/varlet-ui/types/loadingBar.d.ts
@@ -8,13 +8,18 @@ export interface LoadingBarOptions {
 export declare const loadingBarProps: Record<string, any>
 
 export interface ILoadingBar {
+  /** @deprecated Use setDefaultOptions to instead. */
   mergeConfig(options: LoadingBarOptions): void
 
   start(): void
 
   finish(): void
 
   error(): void
+
+  setDefaultOptions(options: LoadingBarOptions): void
+
+  resetDefaultOptions(): void
 }
 
 export declare const LoadingBar: ILoadingBar