Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NInput error with hsl theme primary color

See original GitHub issue

TuSimple/naive-ui version (版本)

2.33.3

Vue version (Vue 版本)

3.2.39

Browser and its version (浏览器及其版本)

Chrome/104.0.5112.126

System and its version (系统及其版本)

Archlinux

Node version (Node 版本)

18.9.0

Reappearance link (重现链接)

https://github.com/M1CK431/naiveui-input-issue

Reappearance steps (重现步骤)

Start the dev server with yarn dev
Open it in your browser
Open dev tools console

Expected results (期望的结果)

NInput component is displayed and no console error

Actual results (实际的结果)

No render at all and console error:

Uncaught Error: [seemly/rgba]: Invalid color value hsl(350deg 78% 56%).

Remarks (补充说明)

The key here is the use of hsl color as theme primaryColor. I try with NButton component and it works so it really seems to be specific with NInput but I haven’t try with all NaiveUI component.

Issue Analytics

State:
Created a year ago
Comments:11 (6 by maintainers)

Top GitHub Comments

1reaction

M1CK431commented, Oct 3, 2022

I could solve the issue easily but I have to add a MIT license file and I dunno if you are okay with that 😞

1reaction

07akionicommented, Sep 29, 2022

@07akioni Is there a chance to make use of hslRegex (from https://github.com/07akioni/seemly/blob/bbc56fd8cbfbb64cbe6847a6ec7b2617d6b320a0/src/color/index.ts#L16) in rgba (from https://github.com/07akioni/seemly/blob/bbc56fd8cbfbb64cbe6847a6ec7b2617d6b320a0/src/color/index.ts#L96) and so any hsl colors will be converted in rgb using hsl2rgb (from https://github.com/07akioni/seemly/blob/bbc56fd8cbfbb64cbe6847a6ec7b2617d6b320a0/src/color/convert.ts#L88)? I guess it will effectively solve this issue.

In addition, the theme documentation should explicit supported colors formats (for example, I’m not sure it’s technically possible to handle alpha channel since changeColor will overwrite it for many colors, like boxShadowFocusWarning in your screenshot).

wdyt?

It is possible. If changeColor can support more format that’s great. I simply don’t want it to be that complex since rgba is enough for most cases and converting them is not a hard job.