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

TypeScript support #667

Open
Matix-Media opened this issue Mar 28, 2023 · 1 comment
Open

TypeScript support #667

Matix-Media opened this issue Mar 28, 2023 · 1 comment

Comments

@Matix-Media
Copy link

Please add typescript support.

@githuib
Copy link

githuib commented Jul 5, 2024

I've added a d.ts file to a project I'm working on to get type checking (both in programmatic and v-click-outside usage).
I put it in vendor/types/click-outside-vue3/index.d.ts but I don't think the path matters much, as long as the compiler can find it (normally by adding it to the "include" field in tsconfig.json).

declare module 'click-outside-vue3' {
  import { App, Directive } from 'vue';

  type Handler = (event: Event) => void;
  interface Params {
    handler: Handler;
    middleware?: (event: Event) => boolean; // default: (event) => true
    events?: string[]; // default: if touch screen: ["touchstart"] | otherwise: ["click"]
    isActive?: boolean; // default: true
    detectIframe?: boolean; // default: true
    capture?: boolean; // default: false
  }
  type ClickOutside = Directive<HTMLElement, Handler | Params>;

  declare const plugin: {
    install: (Vue: App) => void;
    directive: ClickOutside;
  };

  /**
   * Adds type checking when the module is imported, for example:
   *
   * import vClickOutside from "click-outside-vue3";
   *
   * // --- When creating the Vue app ---
   * ...
   * app.use(vClickOutside)
   *
   * // --- In a component ---
   * ...
   * export default {
   *   directives: {
   *     clickOutside: vClickOutside.directive,
   *   },
   *   ...
   * };
   */
  export default plugin;

  /**
   * Adds type checking to the `v-click-outside` attribute
   * when used in .vue files, for example:
   *
   * <template>
   *   <div v-click-outside="onClickOutside"></div>
   * </template>
   */
  declare module '@vue/runtime-core' {
    export interface ComponentCustomProperties {
      vClickOutside: ClickOutside;
    }
  }
}

It seems to work fine for our use case, but feel free to give me any feedback if something could be improved or I made some mistake etc. :)

Might be interesting to add to this package as well, but I leave that up to the maintainer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants