quasarframework / quasar

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

v-intersection typescript is incorrect when using a function that takes #16867

Closed hawkeye64 closed 4 months ago

hawkeye64 commented 5 months ago

What happened?

Argument of type '(entry: IntersectionObserverEntry) => boolean' is not assignable to parameter of type 'IntersectionValue'.
  Type '(entry: IntersectionObserverEntry) => boolean' is not assignable to type '() => void'.ts(2345)

(property) onFormVisible: (entry: IntersectionObserverEntry) => boolean

The function looks like this:

function onFormVisible(entry: IntersectionObserverEntry): boolean {
  visible.value = entry.isIntersecting;
  return true;
}

It is used in the template like this:

<div v-intersection="onFormVisible" class="full-width">

Screenshot: image

What did you expect to happen?

No typescript warnings

Reproduction URL

https://no-example-available.com

How to reproduce?

If you take the very first example at https://quasar.dev/vue-directives/intersection#basic and convert it to typescript, the issue will occur

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Directives (quasar), TypeScript Support

Platforms/Browsers

No response

Quasar info output

$ quasar info

Operating System - Linux(6.5.0-10013-tuxedo) - linux/x64
NodeJs - 18.16.0

Global packages
  NPM - 9.5.1
  yarn - 1.22.19
  @quasar/cli - 2.3.0
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.7.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.9 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.15 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - Not installed
  vuex - Not installed
  vite - 2.9.17 -- Native-ESM powered web dev build tool
  eslint - 8.56.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Relevant log output

No response

Additional context

The v-intersection examples don't have any external examples to use (like CodePen)

github-actions[bot] commented 5 months ago

Hi @hawkeye64! 👋

It looks like you provided an invalid or unsupported reproduction URL. Do not use any service other than Codepen, jsFiddle, StackBlitz, Codesandbox, and GitHub. Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc. Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

hawkeye64 commented 5 months ago

A little more info: image

rstoenescu commented 4 months ago

Fix will be available in Quasar v2.14.7