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.
@smithalan2/vue-countdown
Advanced tools
Readme
A simple countdown timer component for Vue 3 written using the composition API.
Demo https://smithalan92.github.io/vue-countdown/
Install with npm
npm i --save @smithalan2/vue-countdown
Name | Type | Required | Default | Notes |
---|---|---|---|---|
startDateTime | Date | no | new Date() on each tick | Passing a start date time will result in only 1 calc being made. |
endDateTime | Date | yes | n/a | ---- |
startImmediately | Boolean | false | true | If passed as false, you need to call run on the component ref. |
tickDelay | Number | no | 1000 | ms to run each recalculation. |
Name | Args | Notes |
---|---|---|
start | None | Emitted the first time a countdown starts |
finished | None | Emitted when the countdown has reached the end time |
cancelled | None | Emitted when the countdown has been cancelled |
tick | Countdown | The newely calculated countdown values |
If the component is passed a default slot. The slot will recieve a prop with Countdown data
The component instance exposes a number of properties that can be used if required.
Name | Notes |
---|---|
run | A function to manually start the countdown. |
cancel | A function to cancel the countdown |
countdown | The actual reactive countdown data |
The countdown data is a reactive
object. It is passed as a slot prop and also given as a param to the tick
event.
The countdown prop contains the values for the countown, as well as formatted text that can be used for display. The countdown data object is structured as follows
{
remainingSeconds: { value: Number, text: String },
remainingMinutes: { value: Number, text: String },
remainingHours: { value: Number, text: String },
remainingDays: { value: Number, text: String },
remainingWeeks: { value: Number, text: String },
remainingMonths: { value: Number, text: String },
remainingYears: { value: Number, text: String },
}
Sample key values may are
remainingYears: { value: 0, text: '0 years' },
remainingDays: { value: 1, text: '1 day' },
remainingSeconds: { value: 54, text: '54 seconds' },
vue-countdown can be used in 2 ways. You can either use slots to render out the countdown, or provide no slot and listen to the tick
event to get countdown updates and do whatever you need to.
With slots
<vue-countdown
:end-date-time="endDateTime">
<template
v-slot:default="{ countdown }">
{{ countdown }}
</template>
</vue-countdown>
With event
<vue-countdown
:end-date-time="endDateTime"
@tick="onTick">
...
onTick(countdown) {
...
}
See License.md
FAQs
A simple countdown timer component for Vue 3 written using the composition API.
The npm package @smithalan2/vue-countdown receives a total of 10 weekly downloads. As such, @smithalan2/vue-countdown popularity was classified as not popular.
We found that @smithalan2/vue-countdown 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
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.