vuetifyjs / vuetifyjs/vuetify

[Bug Report][4.1.2] Typescript issues with mode and modes in v-color-picker

Open
#22,985 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

T: enhancement typescript
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

Environment

Vuetify Version: 4.1.2
Vue Version: 3.5.39
OS: Linux undefined (current)

Steps to reproduce
  1. Write a computed that returns a string array with valid modes in it and hand it into the modes property
  2. Observe the typing issue
Expected Behavior

When something has such strict typings that just using a computed to calculate and return a valid value breaks them I would expect to be able to be provided the typing so I can use it accordingly and avoid the typescript errors instead of having to write them myselve. I would expect to be able to import a ColorPickerMode type that I can just import and use for typings.

Not having a typing this strict would also work for me, though it is the worse option

Actual Behavior

If I want to correctly type the computed I have to either look up the type myself (code or documentation) and write it, or extract the type from an imported component instance. The first is causing issues when the types are modified (by adding or removing a mode) and the other requires importing the component and still adding the type myself, which is something I would expect a library to do if they use strong typings, and not shift it to their users.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

This issue with the types not existing and instead being hardcoded is happening everywhere (density for example) but most typings are broad enough that they accept string. There are ways to get the types, some being extract the typings from an imported component instance or writing them out by hand or copying from the documentation, but in most cases, not having the typings is not causing issues.

Images

https://cdn.cosmicjs.com/14e82b20-7635-11f1-aab6-5d06f4aeaa34-vuetify-color-picker-type-issue.png

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the v-color-picker mode and modes typings and reproduce the issue with the linked Vuetify Playground example. Trace how the valid modes are defined and exposed, then verify that consumers can import a ColorPickerMode type for computed values without duplicating the union; the broader note about similar typings may require checking related component types.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.