feat(loading-bar): add start-color and end-color props

[bljessica]

close #457

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/GRsHPvxLpDV1y3tAPWsUpk4dj45W
✅ Preview: https://naive-ui-git-fork-bljessica-dev-loading-bar-tusimple.vercel.app

[codecov]

Codecov Report

Merging #683 (409f551) into main (85de0ec) will decrease coverage by 0.69%.
The diff coverage is 25.00%.

❗ Current head 409f551 differs from pull request most recent head 8142d65. Consider uploading reports for the commit 8142d65 to get more accurate results

@@            Coverage Diff             @@
##             main     #683      +/-   ##
==========================================
- Coverage   39.93%   39.23%   -0.70%     
==========================================
  Files         507      507              
  Lines       12379    12360      -19     
  Branches     3468     3463       -5     
==========================================
- Hits         4943     4849      -94     
- Misses       6522     6598      +76     
+ Partials      914      913       -1     

Impacted Files	Coverage Δ
src/loading-bar/src/LoadingBar.tsx	20.68% <20.00%> (-2.75%)	⬇️
src/loading-bar/src/LoadingBarProvider.tsx	50.00% <100.00%> (ø)
src/_internal/icons/Checkmark.tsx	0.00% <0.00%> (-100.00%)	⬇️
src/menu/src/MenuOptionGroup.tsx	15.38% <0.00%> (-69.24%)	⬇️
src/_internal/slot-machine/src/SlotMachine.tsx	0.00% <0.00%> (-67.75%)	⬇️
...c/_internal/slot-machine/src/SlotMachineNumber.tsx	0.00% <0.00%> (-37.50%)	⬇️
src/_utils/naive/attribute.ts	0.00% <0.00%> (-25.00%)	⬇️
src/badge/src/Badge.tsx	68.00% <0.00%> (-24.00%)	⬇️
src/steps/src/Step.tsx	54.76% <0.00%> (-19.05%)	⬇️
src/menu/src/utils.ts	83.33% <0.00%> (-16.67%)	⬇️
... and 37 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 85de0ec...8142d65. Read the comment docs.

[bljessica]

要不要加 error-color prop ?

[07akioni]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。

({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

[bljessica]

有一些不相关文件的改动应该是代码格式化造成的。。。
因为使用的加载进度条实际上是 SiteRoot.vue 文件中的，所以好像不好加 demo ?

[07akioni]

有一些不相关文件的改动应该是代码格式化造成的。。。
因为使用的加载进度条实际上是 SiteRoot.vue 文件中的，所以好像不好加 demo ?

CHANGELOG 里面大片的变动应该是 git 操作的问题

[07akioni]

有一些不相关文件的改动应该是代码格式化造成的。。。
因为使用的加载进度条实际上是 SiteRoot.vue 文件中的，所以好像不好加 demo ?

DEMO 不加可以的

[07akioni]

我的意思不是覆盖样式变量，而是提供的 style 直接作为 inline-style 作用在 bar 的 DOM 上 😂

具体的方式你可以看一下我昨天的评论

[sakura-he]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。

({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

这种写法会导致进度条在没有调用start方法就显示出来,然后快速消失

[07akioni]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。
({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

这种写法会导致进度条在没有调用start方法就显示出来,然后快速消失

没懂。

现在直接调 finish 是不会出进度条的。

[sakura-he]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。
({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

这种写法会导致进度条在没有调用start方法就显示出来,然后快速消失

没懂。

现在直接调 finish 是不会出进度条的。

在 n-loading-bar-provider组件上添加loading-bar-style:"background-color:red" attribute后在页面刷新(app重新初始化)时,即使没有调用进度条start()方法,这个进度条也会一闪而过,行为类似于手动调用进度条start()后在手动finish();不添加这个attr则不会出现这种情况

[07akioni]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。
({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

这种写法会导致进度条在没有调用start方法就显示出来,然后快速消失

没懂。
现在直接调 finish 是不会出进度条的。

在 n-loading-bar-provider组件上添加loading-bar-style:"background-color:red" attribute后在页面刷新(app重新初始化)时,即使没有调用进度条start()方法,这个进度条也会一闪而过,行为类似于手动调用进度条start()后在手动finish();不添加这个attr则不会出现这种情况

你是这么传的么？注意一下类型

[sakura-he]

这个 prop 我不建议这么实现：

1. 因为这种效果不太好，loading 的渐变色是等比的。
2. 不支持 transition，虽然可以用 css houdini hack 但在这个 case 我觉得不是必须的。

我们可以提供另一种 API 来让用户定制，loading-bar-style: CSSProperties | string | ({ type: 'error' : '???' }) => CSSProperties | string，然后把这个 style inject 到加载条，用户如果真的喜欢这种渐变就手动写 background-image 的 style。
({ type }) => type === 'error' ? 'bg-image: red;' : 'bg-image: green'

这种写法会导致进度条在没有调用start方法就显示出来,然后快速消失

没懂。
现在直接调 finish 是不会出进度条的。

在 n-loading-bar-provider组件上添加loading-bar-style:"background-color:red" attribute后在页面刷新(app重新初始化)时,即使没有调用进度条start()方法,这个进度条也会一闪而过,行为类似于手动调用进度条start()后在手动finish();不添加这个attr则不会出现这种情况

你是这么传的么？注意一下类型

抱歉,我反馈问题的时候代码没写对,但是开发中代码时这样写的

<n-loading-bar-provider :loading-bar-style="{loading:'background-color:red'}"> <content /> </n-loading-bar-provider>
经过测试,给loading状态添加样式就会初始化,error则不会

[07akioni]

:loading-bar-style="{loading:'background-color:red'}"

确实有这个问题，我会看一下