Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
vue3-nestable
Advanced tools
Drag & drop hierarchical list made as a vue component.
This package is currently compatible with Vue 3
Install the plugin:
npm install --save vue3-nestable
yarn add vue3-nestable
You can also import the components on-demand, if you wish to do so:
import { VueNestable, VueNestableHandle } from 'vue3-nestable'
export default {
components: {
VueNestable,
VueNestableHandle
}
...
}
You only need two components: vue-nestable
which renders the list and
vue-nestable-handle
which indicates the area the user can drag the item by.
Important Note: Each item must have a unique id
property and it must be a
valid css class name. It can not contain a :
, ,
, .
, ;
or other special
characters that are invalid in a css class name.
<template>
<vue-nestable :value="nestableItems" @input="nestableItems = $event">
<template v-slot="slot">
<vue-nestable-handle>
{{ slot.item.text }}
</vue-nestable-handle>
</template>
</vue-nestable>
<pre>
<code>
{{ nestableItems }}
</code>
</pre>
</template>
<script>
import { VueNestable, VueNestableHandle } from 'vue3-nestable'
export default {
components: {
VueNestable,
VueNestableHandle,
},
data: () => ({
nestableItems: [
{
id: 0,
text: 'Andy'
}, {
id: 1,
text: 'Harry',
children: [{
id: 2,
text: 'David 1',
children: [{
id: 3,
text: 'David 2'
}, {
id: 4,
text: 'Lisa'
}]
}, {
id: 5,
text: 'Lisa 2'
}, {
id: 6,
text: 'Lisa 3'
}]
}, {
id: 7,
text: 'Lisa 4'
}
]
})
}
</script>
By default, vue3-nestable comes without any styling. Which means you can customize the appearance completely to your needs.
The following props can be passed to the <VueNestable>
Component:
Property | Type | Default | Description |
---|---|---|---|
value | Array | [ ] | Array of objects to be used in the list. Important: Each item must have a unique key by which it can be identified. By default the key is assumed to be named id but you can change it by setting the keyProp property. |
threshold | Number | 30 | Amount of pixels by which the mouse must be move horizontally before increasing/decreasing level (nesting) of current element. |
maxDepth | Number | 10 | Maximum available level of nesting. Setting this to 0 will prevent dragging altogether. |
group | String or Number | random String | Different group numbers may be passed if you have more than one nestable component on a page and want some extra styles for portal instances. |
keyProp | String (Optional) | 'id' | Name of the property that uniquely identifies an item. |
childrenProp | String (Optional) | 'children' | Name of the property that holds an array of children. |
class | String (Optional) | null | Name of the property for classes to add to the item. |
hooks | Object (Optional) | {} | Allows you to register hooks that fire whenever vue-nestable performs some action |
rtl | Boolean (Optional) | false | Add rtl support to vue-nestable |
The <VueNestable>
Component has two slots that can be used to render items and
a placeholder.
Slot Name | Props | Description |
---|---|---|
default | item , index , isChild | This slot is used to render the items in the list, use the scoped-slot property item to render the element. |
placeholder | Lets you define a custom template that is used when no elements are in the list |
Events are triggered when an item was moved or when a drag operation was
completed. When you use v-model
to bind your data, the @input
event will
automatically be handled.
Event | Parameters | Description |
---|---|---|
input | value | triggered whenever the list changes |
change | value , options | triggered when the user dropped the item. options is passed as the second parameter in the event and contains the following properties: { items, pathTo } |
Hooks allow you to get finer controll over which items can be moved or take action when a specific item is moved.
Hooks are passed as an Object to the :hooks
prop. The object defines a key
with the hook name and a function that will be called when the hook fires.
{
'beforeMove': this.myHookFunction
}
Hook Name | Parameters | Description |
---|---|---|
beforeMove | { dragItem, pathFrom, pathTo } | Fires when an item is about to be moved. Returning false will cancel that action. |
FAQs
A simple drag & drop hierarchical list made as a vue component.
We found that vue3-nestable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.