![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
chronocraft-scroller-vue
Advanced tools
Readme
The Chronocraft Scroller is a Vue 3 flexible scroller library infinite scroling support created for Vue3. It supports both vertical and horizontal orientations It provides smooth infinite scrolling with drag and mouse wheel navigation
Here is a working Demo of the component Demo: Chronocraft Scroller Demo{:target="_blank"}
Using the Library as a Plugin
import { ChronoCraftScroller } from 'chronocraft-scroller-vue';
...
app.use(ChronoCraftScroller)
When you want to import a specific component from the library into a dedicated place inside your code
import { Scroller } from 'chronocraft-scroller-vue';
...
components:{
Scroller
}
<Scroller orientation="horizontal" :cellwidth="200" :numcols="4" :numrows="4" :contentpadding="30" :wheelscrollspeed="20" :newcellslength="newcellslength" :data="scrollerdata" :cellsquared="true" @on-scroll="OnScroll" @on-update-data-next="onUpdateDataNext" @on-update-data-previous="onUpdateDataPrevious"/>
<Scroller orientation="horizontal" :cellwidth="200" :numcols="4" :numrows="4" :contentpadding="30" :wheelscrollspeed="20" :newcellslength="newcellslength" :data="scrollerdata" :cellsquared="true" @on-scroll="OnScroll" @on-update-data-next="onUpdateDataNext" @on-update-data-previous="onUpdateDataPrevious">
<template v-slot:cell="slotProps">
<span>{{ slotProps.data.id }}</span>
</template>
</Scroller>
Name | Type | Description |
---|---|---|
orientation | String | Defines the orientation of the scroller. The possible values are horizontal or vertical |
cellwidth | Number | Defines the base of the cellwidth on the vertical scroller |
cellheight | Number | Defines the base of the cellheight on the horizontal scroller |
numcols | Number | The total number of columns on the vertical scroller |
numcols | Number | The total number of columns on the horizontal scroller |
contentpadding | Number | The size of padding between the scroller cells |
wheelscrollspeed | Number | Defines the mouse wheel scroll speed |
newcellslength | Number | The total number of new cells that will be loaded when scrolling forward or backwards |
v-model | Array | The actual data passed into the scroller |
cellsquared | Boolean | Sets the cell to be squared. (width will have the same size as the height) |
hasscrollbar | Boolean | Defines if the scroller should have a scroll bar |
@on-scroll | Event Function | Event fired when the user has scrolled |
@on-update-data-next | Event Function | Event fired when the user has reached at the end of the scroller and new data might be required to load |
@on-update-data-previous | Event Function | Event fired when the user has reached at the start of the scroller and new data might be required to load |
ScrollTo | Call Function | Function called to scroll the scroller to specific position in pixels |
ScrollBy | Call Function | Function called to scroll the scroller by a specific amount in pixels |
GetCellsPosition | Call Function | Function called to get a specific cell's position in pixels |
Name | hasprops | Description |
---|---|---|
cell | yes | Overrides the cell rendering and passes the cells data as props |
overlay | no | In this slot custom elements can be added as an overlay above the scroller content |
To achive a smooth scrolling result without shaking or weird movement, the number of data cells loaded at initialization is relevant to the width of the scroller as well as the total new cell data added each time it receives new data.
Total Required Initial Data Length = ( Total visible cells ) + ( New cells added each time) * 3
This is calculated automatically and an alert screen appears when more data is required.
FAQs
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
The npm package chronocraft-scroller-vue receives a total of 2 weekly downloads. As such, chronocraft-scroller-vue popularity was classified as not popular.
We found that chronocraft-scroller-vue 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.