Comments (5)
@hovorun can you show me how you're importing the lib? And its component usage?
I have the same issue (typescript'd Vue 2 app) and it's a simple module import in my .vue
single file component.
...
<script lang="ts">
import { Container } from "vue-dndrop";`
...
</script>
...
Using @Lyokolux removes the errors and allows a build. It would be nice to have TS support, but I understand not everyone wants to do that :)
from vue-dndrop.
Hey you can try this @philiprenich @Lyokolux @amendx @hovorun @xyhxx
declare module 'vue-dndrop' {
import { type DefineComponent } from 'vue'
interface DropResult {
removedIndex: number
addedIndex: number
payload: Payload
element: Element
}
interface DragEvent {
payload: Payload
isSource: boolean
willAcceptDrop: boolean
}
type Payload = any
interface NodeDescription {
value: string
props: Record<string, any>
}
interface DraggableProps {
dragNotAllowed?: boolean
tag?: string | NodeDescription
}
interface ContainerProps {
dragStart?: (dragEvent: DragEvent) => void
dragEnd?: (dragEvent: DragEvent) => void
dragEnter?: () => void
dragLeave?: () => void
dragReady?: (dropResult: DropResult) => void
drop?: (dropResult: DropResult) => void
dropNotAllowed?: (dropResult: { payload: any; container: any }) => void
getChildPayload?: (index: number) => Payload
shouldAnimateDrop?: (sourceContainerOptions: ContainerProps, payload: Payload) => boolean
shouldAcceptDrop?: (sourceContainerOptions: ContainerProps, payload: Payload) => boolean
getGhostParent?: () => Element
orientation: 'horizontal' | 'vertical'
behaviour: 'move' | 'copy' | 'drop-zone' | 'contain'
tag?: string | NodeDescription
groupName?: string
lockAxis?: 'x' | 'y'
dragHandleSelector?: string
nonDragAreaSelector?: string
dragBeginDelay?: number
animationDuration?: number
autoScrollEnabled?: boolean
dragClass?: string
dropClass?: string
removeOnDropOut?: boolean
dropPlaceholder?:
| boolean
| {
className: string
animationDuration: number
showOnTop: boolean
}
fireRelatedEventsOnly?: boolean
}
const Draggable: DefineComponent<DraggableProps>
const Container: DefineComponent<ContainerProps>
export { Draggable, Container, DropResult, DragEvent }
}
from vue-dndrop.
@hovorun can you show me how you're importing the lib? And its component usage?
from vue-dndrop.
maybe you can refer to DefinitelyTyped, i hope it can run in typescript
from vue-dndrop.
At the moment:
- no types are recognized when importing something by
vue-dndrop
@types/vue-dndrop
does not exist
So if you use typescript for your vue project, these package should be treated with an any type. It removes errors but does not provide safety.
I use a stub of it in my env.d.ts
:
declare module "vue-dndrop" {
const Container: any
const Draggable: any
export {
Container,
Draggable
}
}
from vue-dndrop.
Related Issues (20)
- Drag to select HOT 1
- Custom ghost element HOT 2
- Nesting question HOT 2
- No Animation HOT 2
- Fix with scale transform
- feature-request: typescript support HOT 3
- npm package for Vue 3.x does not include utils HOT 2
- Getting the Container that a Draggable was Dragged into.
- Contextmenu on table row HOT 1
- Drag works only for first time on mobile (touch) device HOT 11
- drag-enter event is emitted only once
- Behaviour prop is not reactive.
- Drag&Drop multiple lines HOT 2
- TypeError Cannot read properties of null (reading 'addedIndex') HOT 1
- issue with drag-class / styling ghost emelent HOT 2
- Evento de click no card HOT 2
- Drop on mouse position in drop-zone, not a senter of dragged item
- The 'drag-enter' event doesn't fire If the group names are different.
- drop-not-allowed event does not fire.
- When draggable item is halfway moved, droppable area disappears HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-dndrop.