Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@m4m205/vue-virtual-draglist
Advanced tools
Readme
A virtual scrolling list component that can be sorted by dragging, support vue3
If you use vue with 2.x, see here
npm i vue-virtual-draglist@next
Root component:
<template>
<div>
<!--
:dataSource="items"
:handle="'i'" // use tagName
:handle="'.drag'" // use class
:handle="'#drag'" // use id
-->
<VirtualList
v-model:dataSource="items"
:dataKey="'id'"
:handle="'#drag'"
style="height: 500px;"
>
<template v-slot:item="{ record, index, dataKey }">
<i id="drag" class="drag">drag me</i>
<span>{{ record.text }}</span>
</template>
</VirtualList>
</div>
</template>
<script setup lang="ts">
import VirtualList from 'vue-virtual-draglist';
// const items = ref([{id: '1', text: 'abc'}, {id: '2', text: 'def'}]);
const items = computed({
get() {
return [];
},
set(val) {
// trigger when drag state changed if you use with `v-model:dataSource`
console.log(val);
}
})
</script>
Emit | Description |
---|---|
top | Event fired when scroll to top |
bottom | Event fired when scroll to bottom |
drag | Event fired when the drag is started |
drop | Event fired when the drag is completed |
add | Event fired when element is dropped into the list from another |
remove | Event fired when element is removed from the list into another |
Prop | Type | Description |
---|---|---|
data-key | String | The unique identifier of each piece of data, in the form of 'a.b.c' |
data-source | Array/Ref | The data that needs to be rendered |
Commonly used
Prop | Type | Default | Description |
---|---|---|---|
keeps | Number | 30 | The number of lines rendered by the virtual scroll |
size | Number | - | The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated |
handle | Function/String | - | Drag handle selector within list items |
group | Object/String | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false } |
keepOffset | Boolean | false | When scrolling up to load data, keep the same offset as the previous scroll |
direction | String | vertical | vertical/horizontal , scroll direction |
pageMode | Boolean | false | Let virtual list using global document to scroll through the list |
Uncommonly used
Prop | Type | Default | Description |
---|---|---|---|
draggable | Function/String | - | Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged |
disabled | Boolean | false | Disables the sortable if set to true |
delay | Number | 0 | Delay time of debounce function |
animation | Number | 150 | Animation speed moving items when sorting |
autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container |
scrollThreshold | Number | 55 | Threshold to trigger autoscroll |
pressDelay | Number | 0 | Time in milliseconds to define when the sorting should start |
pressDelayOnTouchOnly | Boolean | false | Only delay on press if user is using touch |
fallbackOnBody | Boolean | false | Appends the ghost element into the document's body |
rootTag | String | div | Label type for root element |
wrapTag | String | div | Label type for list wrap element |
itemTag | String | div | Label type for list item element |
headerTag | String | div | Label type for header slot element |
headerStyle | Object | {} | Header slot element style |
footerTag | String | div | Label type for footer slot element |
footerStyle | Object | {} | Footer slot element style |
wrapClass | String | '' | List wrapper element class |
wrapStyle | Object | {} | List wrapper element style |
itemClass | String | '' | List item element class |
itemStyle | Object | {} | List item element style |
ghostClass | String | '' | The class of the mask element when dragging |
ghostStyle | Object | {} | The style of the mask element when dragging |
chosenClass | String | '' | The class of the selected element when dragging |
Method | Description |
---|---|
getSize(key) | Get the size of the current item by unique key value |
getOffset() | Get the current scroll height |
getClientSize() | Get wrapper element client viewport size (width or height) |
getScrollSize() | Get all scroll size (scrollHeight or scrollWidth) |
scrollToTop() | Scroll to top of list |
scrollToBottom() | Scroll to bottom of list |
scrollToIndex(index) | Scroll to the specified index position |
scrollToOffset(offset) | Scroll to the specified offset |
FAQs
A virtual scrolling list component that can be sorted by dragging, support vue3
The npm package @m4m205/vue-virtual-draglist receives a total of 85 weekly downloads. As such, @m4m205/vue-virtual-draglist popularity was classified as not popular.
We found that @m4m205/vue-virtual-draglist demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.