Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect TS type for markerList of QSliderSlots #17060

Open
thexeos opened this issue Mar 30, 2024 · 1 comment · May be fixed by #17061
Open

Incorrect TS type for markerList of QSliderSlots #17060

thexeos opened this issue Mar 30, 2024 · 1 comment · May be fixed by #17061
Assignees
Labels
area/typescript bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@thexeos
Copy link
Contributor

thexeos commented Mar 30, 2024

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

"type": "Array",
"tsType": "SliderMarkerLabelArrayConfig",

"type": "Array",
"tsType": "SliderMarkerLabelArrayConfig",

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:

export type SliderMarkerLabelArrayConfig = SliderMarkerLabelConfig[];

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

@MartinX3
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/typescript bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
3 participants