feature-request: typescript support

[amendx]

feature-request: typescript support

[frankykubo]

Its better to use index.d.ts approach since you don't have to change existing files if you do not want. But even if you implement new .ts files, I think it would be better to create index.d.ts file.

[CultivateCreate]

Hi everyone, I currently use this library in a project and I would like to contribute by adding typescript support. Do you want me to work on this? If yes, would it rather be by replacing every .js with .ts or by adding an index.d.ts?

Thanks for your repository.

This would be very helpful. The library seems more intuitive than others I've found and my projects are in TS.

[thetobber]

I created @types/vue-dndrop/index.d.ts in the src directory of my project.

/// <reference types='vue' />

declare module 'vue-dndrop' {
  import type {
    AllowedComponentProps,
    ComponentCustomProps,
    ComponentOptionsMixin,
    DefineComponent,
    NativeElements,
    PropType,
    VNodeProps,
  } from 'vue'

  type WithTemplateSlots<T, S> = T & {
    new (): {
      $slots: S
    }
  }

  export type DragResult = {
    isSource: boolean
    payload: unknown
    willAcceptDrop: boolean
  }

  export type DropResult = {
    addedIndex: number | null
    element: HTMLElement
    payload: unknown
    removedIndex: number | null
  }

  export type DropNotAllowedResult = {
    payload: unknown
    container: object
  }

  export type Tag =
    | keyof NativeElements
    | { [K in keyof NativeElements]: { value: K; props: NativeElements[K] } }[keyof NativeElements]

  export type ContainerProps = {
    orientation?: 'horizontal' | 'vertical'
    behaviour?: 'move' | 'copy' | 'drop-zone' | 'contain'
    tag?: Tag
    groupName?: string
    lockAxis?: 'x' | 'y'
    dragHandleSelector?: string
    nonDragAreaSelector?: string
    dragBeginDelay?: number
    animationDuration?: number
    autoScrollEnabled?: boolean
    dragClass?: string
    dropClass?: string
    removeOnDropOut?: boolean
    dropPlaceholder?: boolean | Record<string, any>
    fireRelatedEventsOnly?: boolean
    getChildPayload?: (index: number) => unknown
    shouldAcceptDrop?: (sourceContainerOptions: object, payload: unknown) => boolean
    shouldAnimateDrop?: (sourceContainerOptions: object, payload: unknown) => boolean
    getGhostParent?: () => HTMLElement
  }

  export type ContainerEmits = {
    dragStart?: (dragResult: DragResult) => void
    dragEnd?: (dragResult: DragResult) => void
    dragEnter?: () => void
    dragLeave?: () => void
    dropReady?: (dropResult: DropResult) => void
    drop?: (dropResult: DropResult) => void
    dropNotAllowed?: (dropNotAllowedResult: DropNotAllowedResult) => void
  }

  export const Container: WithTemplateSlots<
    DefineComponent<
      { [K in keyof ContainerProps]-?: { type: PropType<ContainerProps[K]> } },
      {},
      unknown,
      {},
      {},
      ComponentOptionsMixin,
      ComponentOptionsMixin,
      ContainerEmits,
      string,
      VNodeProps & AllowedComponentProps & ComponentCustomProps,
      Readonly<ContainerProps> & { [K in keyof ContainerEmits as `on${Capitalize<K>}`]?: ContainerEmits[K] },
      {},
      {}
    >,
    Readonly<{ default(): any }>
  >

  export type DraggableProps = {
    dragNotAllowed?: boolean
    tag?: Tag
  }

  export const Draggable: WithTemplateSlots<
    DefineComponent<
      { [K in keyof DraggableProps]-?: { type: PropType<DraggableProps[K]> } },
      {},
      unknown,
      {},
      {},
      ComponentOptionsMixin,
      ComponentOptionsMixin,
      {},
      string,
      VNodeProps & AllowedComponentProps & ComponentCustomProps,
      Readonly<DraggableProps>,
      {},
      {}
    >,
    Readonly<{ default(): any }>
  >
}