quasar icon indicating copy to clipboard operation
quasar copied to clipboard

Incorrect TS type for `markerList` of QSliderSlots

Open thexeos opened this issue 1 year ago • 1 comments

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
export interface QSliderSlots {
  /**
   * What should the menu display after filtering options and none are left to be displayed; Suggestion: <div>
   * @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: <div>
   * @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[][].

thexeos avatar Mar 30 '24 01:03 thexeos

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".

MartinX3 avatar Apr 18 '24 15:04 MartinX3