quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.29k stars 3.43k forks source link

Incorrect TS type for `markerList` of QSliderSlots #17060

Open thexeos opened 1 month ago

thexeos commented 1 month ago

The type definition for when defining custom QSlider marker labels, defined here:

https://github.com/quasarframework/quasar/blob/881803b8bc91552ce67a10124d411df6b432a176/ui/src/components/slider/use-slider.json#L315-L316

https://github.com/quasarframework/quasar/blob/881803b8bc91552ce67a10124d411df6b432a176/ui/src/components/slider/use-slider.json#L408-L409

Results in an incorrect generated types.

Show generated TS interface ```ts export interface QSliderSlots { /** * What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope */ "marker-label": (scope: { /** * Config for current marker label */ marker: SliderMarkerLabelConfig; /** * Array of marker label configs */ markerList: SliderMarkerLabelArrayConfig[]; /** * Object with key-value where key is the model and the value is the marker label config */ markerMap: SliderMarkerLabelObjectConfig; /** * Required CSS classes to be applied to the marker element */ classes: string; /** * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap * @param value The marker label equivalent model value * @returns CSS style Object to apply to a marker element at respective model value */ getStyle: (value: number) => any; }) => VNode[]; /** * What should the menu display after filtering options and none are left to be displayed; Suggestion:
* @param scope */ "marker-label-group": (scope: { /** * Array of marker label configs */ markerList: SliderMarkerLabelArrayConfig[]; /** * Object with key-value where key is the model and the value is the marker label config */ markerMap: SliderMarkerLabelObjectConfig; /** * Required CSS classes to be applied to the marker element */ classes: string; /** * Get CSS style Object to apply to a marker element at respective model value; For perf reasons, use only if requested model value is not already part of markerMap * @param value The marker label equivalent model value * @returns CSS style Object to apply to a marker element at respective model value */ getStyle: (value: number) => any; }) => VNode[]; } ```

Note how markerList in generated types for both slots is SliderMarkerLabelArrayConfig[]. However, SliderMarkerLabelArrayConfig is already an array of SliderMarkerLabelConfig:

https://github.com/quasarframework/quasar/blob/881803b8bc91552ce67a10124d411df6b432a176/ui/types/api/slider.d.ts#L43

So we end up with typeof markerList === SliderMarkerLabelConfig[][].

MartinX3 commented 3 weeks ago

Thank you.

There is another problem. Using the example with the correct type leads to Vue: Type Partial<CSSStyleDeclaration> is not assignable to type StyleValue at :style="markerList[val].style".