coskuncay / vue3-flip-countdown Goto Github PK

View Code? Open in Web Editor NEW

90.0 2.0 15.0 154 KB

Countdown timer with Flip Animation for Vue 3.x

Home Page: https://vue3-flip-countdown.netlify.app

JavaScript 5.03% HTML 4.01% Vue 90.95%

javascript vuejs vue vuejs-components vue3 vuejs3 countdown countdown-timer flip-countdown timer

vue3-flip-countdown's Introduction

vue3-flip-countdown

Customize Countdown timer with Flip Animation for Vue 3.x

vue3-flip-countdown.netlify.app

Installation

npm i vue3-flip-countdown --save

Global Usage

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Countdown from 'vue3-flip-countdown'
createApp(App).use(Countdown).mount('#app')

App.vue

<template>
  <vue3-flip-countdown />
</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

Single File Component Usage

<template>
  <Countdown />
</template>

<script>
import {Countdown} from 'vue3-flip-countdown'
export default {
  name: 'App',
  components: {
    Countdown
  }
}
</script>

Emits

Name	Description
timeElapsed	event that created when the time came

Props

Name	Type	Default
deadlineISO	String YYYY-MM-DDTHH:mm:ss.sssZ
deadline	String YYYY-MM-DD HH:mm:ss	32d,0h,0m,10s
deadlineDate	Date
countdownSize	String	3rem
labelSize	String	1.2rem
flipAnimation	Boolean	true
mainColor	String	'#EC685C'
secondFlipColor	String	props.mainColor
mainFlipBackgroundColor	String	'#222222'
secondFlipBackgroundColor	String	'#393939'
labelColor	String	'#222222'
showLabels	Boolean	true
stop	Boolean
showDays	Boolean	true
showHours	Boolean	true
showMinutes	Boolean	true
showSeconds	Boolean	true
labels	Object	{days: 'Days',hours: 'Hours',minutes: 'Minutes',seconds: 'Seconds',}

References

Requirements

Vue version 3.x.x

License

vue3-flip-countdown's People

Contributors

Stargazers

Watchers

Forkers

msaravitz yusufcany narendraparihar huberyzhou mdashikar constructionware jhekx zachhandley aismileboy huangzong12 itartweb anomalous-sentiment ih84ds vidaloca21 tolutronics

vue3-flip-countdown's Issues

Long delay before flip clock countdown starts

When entering the page, about a second passes before the clock is initialized and the countdown starts. Until then, there are only 00 everywhere.

I am using single file component usage.

timeElapsed emit

Hello!
does emit work if I pass in a component a deadline that is already gone?

how use this countdown in nuxt 3 ?

i get error ReferenceError: document is not defined into nuxt3 component

ReferenceError: document is not defined
at addStyle (/home/navas/Desktop/Nuxt/Front-Nuxt/node_modules/vue3-flip-countdown/dist/vue3-flip-countdown.common.js:6434:22)

Want to use elapsed event.

I would like to hide the flip timer after elapsed, and change it to the text.

I think Vue2 version (I mean the original flip countdown) has the event.
So, I want it too for vue3-flip-countdown.

When using the component getting error

Packages:

    "npx": "^10.2.2",
    "vue": "^3.2.24",
    "vite": "^2.9.1",
    "vue3-flip-countdown": "^0.1.6",

I tried both using methods, didnt work.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'shapeFlag')

Hi,
When I set deadline = "{{ data.deadline}} ", it will raise this issue, how can I resolve it? thanks.

<vue3-flip-countdown 
    style="margin-left:10px"
    :flipAnimation="false"
    countdownSize="3rem"
    labelSize="1rem"
    deadline="{{ data.deadline }}"
/>

Error at the time elapsed.

When the time elapsed, the error below would be shown.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'toString')
    at Proxy.twoDigits (vue3-flip-countdown.common.js?243e:25699)
    at eval (vue3-flip-countdown.common.js?243e:25472)
    at renderList (runtime-core.esm-bundler.js?5c40:5798)
    at Proxy.render (vue3-flip-countdown.common.js?243e:25459)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:464)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4400)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:6737)
    at flushJobs (runtime-core.esm-bundler.js?5c40:6976)

Enhancement: Updating the deadline

I use this component to show a countdown and it works nicely for this (and looks great, too!).

In my usecase the "deadline" can be updated though. I think currently this doesn't work correctly, as the counter doesn't reflect the updated deadline. I use the following to force Vue to rerender the component when the property changes:

<Countdown :key="myDeadline"/>

This works, but doesn't really look great as each counter briefly resets to 0 and then again to the new value.

I think for this use case it would be great if this worked seamlessly and maybe even with a small effect that properly "flips" the counters. Think of how this looks in old-time flip displays at the airport or train station, e.g. like here: https://www.youtube.com/watch?v=cj32w5z81Ak

Time increase is also important

The component can be used for countdown. If this component is used to indicate how long a user is currently online, this component will not be available.