├── .gitignore
├── .npmignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── Countdown.vue
    └── index.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .*.swp
 2 | ._*
 3 | .DS_Store
 4 | .git
 5 | .hg
 6 | .npmrc
 7 | .lock-wscript
 8 | .svn
 9 | .wafpickle-*
10 | config.gypi
11 | CVS
12 | npm-debug.log
13 | node_modules
14 | /.idea
15 | /node_modules
16 | /.github
17 | /src
18 | /public
19 | .eslintrc.js


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue3-flip-countdown
  2 | 
  3 | > Customize Countdown timer with Flip Animation for [Vue](https://vuejs.org/ "Vue Homepage") 3.x
  4 | 
  5 | > [vue3-flip-countdown.netlify.app](https://vue3-flip-countdown.netlify.app/)
  6 | 
  7 | 
  8 | <p align="center">
  9 |   
 10 | ![Netlify Status](https://api.netlify.com/api/v1/badges/69e11230-2c8b-4725-9540-7c0a861294e4/deploy-status)
 11 |   <img src="https://img.shields.io/npm/l/vue3-flip-countdown" />
 12 |   <a href="https://github.com/vuejs/awesome-vue"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"/></a>
 13 |   <a href="https://www.npmjs.com/package/vue3-flip-countdown"><img src="https://img.shields.io/npm/v/vue3-flip-countdown"/> 
 14 |    <img src="https://img.shields.io/npm/dt/vue3-flip-countdown"/></a>
 15 |   <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg"/></a>
 16 | </p>
 17 | 
 18 | 
 19 | ## [Demo](https://vue3-flip-countdown.netlify.app/)
 20 | 
 21 | 
 22 | <a href="https://vue3-flip-countdown.netlify.app/" target="_blank"><img src="https://user-images.githubusercontent.com/29631083/142426544-536cc337-106b-4f3f-ba09-85f1062e3c5c.gif" width="800"/></a>
 23 | 
 24 | 
 25 | ## Table of contents
 26 |   
 27 | 
 28 | - [Demo](#demo)
 29 | - [Installation](#installation)
 30 | - [Global Usage](#global-usage)
 31 | - [Single File Component Usage](#single-file-component-usage)
 32 | - [Emits](#emits)
 33 | - [Props](#props)
 34 | - [References](#references)
 35 | - [Requirements](#requirements)
 36 | - [License](#license)
 37 | 
 38 | ## Installation
 39 | 
 40 | ```
 41 | npm i vue3-flip-countdown --save
 42 | ```
 43 | 
 44 | ## Global Usage
 45 | main.js
 46 | ```js
 47 | import { createApp } from 'vue'
 48 | import App from './App.vue'
 49 | import Countdown from 'vue3-flip-countdown'
 50 | createApp(App).use(Countdown).mount('#app')
 51 | ```
 52 | 
 53 | App.vue
 54 | ```js
 55 | <template>
 56 |   <vue3-flip-countdown />
 57 | </template>
 58 | 
 59 | <script>
 60 | 
 61 | export default {
 62 |   name: 'App',
 63 |   components: {
 64 |   }
 65 | }
 66 | </script>
 67 | ```
 68 | 
 69 | ## Single File Component Usage
 70 | ```vue
 71 | <template>
 72 |   <Countdown />
 73 | </template>
 74 | 
 75 | <script>
 76 | import {Countdown} from 'vue3-flip-countdown'
 77 | export default {
 78 |   name: 'App',
 79 |   components: {
 80 |     Countdown
 81 |   }
 82 | }
 83 | </script>
 84 | ```
 85 | 
 86 | ## Emits
 87 | 
 88 | | Name | Description | 
 89 | | --- | --- |
 90 | | timeElapsed | event that created when the time came | 
 91 | 
 92 | ## Props
 93 | 
 94 | | Name | Type | Default | 
 95 | | --- | --- | --- |
 96 | | deadlineISO | String<br>YYYY-MM-DDTHH:mm:ss.sssZ |  | 
 97 | | deadline | String<br>YYYY-MM-DD HH:mm:ss | 32d,0h,0m,10s | 
 98 | | deadlineDate | Date |  | 
 99 | | countdownSize | String | 3rem | 
100 | | labelSize | String | 1.2rem | 
101 | | flipAnimation | Boolean | true |
102 | | mainColor | String | '#EC685C' |
103 | | secondFlipColor | String | props.mainColor | 
104 | | mainFlipBackgroundColor | String | '#222222' | 
105 | | secondFlipBackgroundColor | String | '#393939' |
106 | | labelColor | String | '#222222' |
107 | | showLabels | Boolean | true |
108 | | stop | Boolean |  |
109 | | showDays | Boolean | true |
110 | | showHours | Boolean | true |
111 | | showMinutes | Boolean | true |
112 | | showSeconds | Boolean | true |
113 | | labels | Object | {days: 'Days',hours: 'Hours',minutes: 'Minutes',seconds: 'Seconds',} |
114 | 
115 | 
116 | 
117 | # References
118 | 
119 | - [vue2-flip-countdown](https://github.com/philipjkim/vue2-flip-countdown)
120 | - [vuejs-countdown](https://github.com/getanwar/vuejs-countdown)
121 | - [Demo for 'Flip clock & countdown, Vue'](https://codepen.io/shshaw/pen/BzObXp)
122 | 
123 | ## Requirements
124 | 
125 | - [Vue](https://vuejs.org/) version **3.x.x**
126 | 
127 | ## License
128 | 
129 | [MIT](https://choosealicense.com/licenses/mit/) Copyright (c) 2021, [Emre Coşkunçay](https://github.com/coskuncayemre)
130 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-flip-countdown",
 3 |   "version": "0.1.4",
 4 |   "description": "Countdown timer with Flip Animation for Vue 3.x",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/coskuncayemre/vue3-flip-countdown.git"
 8 |   },
 9 |   "bugs": {
10 |     "url": "https://github.com/coskuncayemre/vue3-flip-countdown/issues"
11 |   },
12 |   "homepage": "https://github.com/coskuncayemre/vue3-flip-countdown#readme",
13 |   "keywords": [
14 |     "vue3",
15 |     "javascript",
16 |     "vue",
17 |     "vuejs",
18 |     "vuejs3",
19 |     "countdown",
20 |     "flip-countdown",
21 |     "timer"
22 |   ],
23 |   "author": "Emre Coşkunçay",
24 |   "license": "MIT",
25 |   "private": false,
26 |   "main": "dist/vue3-flip-countdown.common.js",
27 |   "scripts": {
28 |     "serve": "vue-cli-service serve",
29 |     "build": "vue-cli-service build --target lib --name vue3-flip-countdown src/index.js",
30 |     "lint": "vue-cli-service lint"
31 |   },
32 |   "dependencies": {
33 |     "vue": "^3.0.0"
34 |   },
35 |   "devDependencies": {
36 |     "@vue/cli-plugin-babel": "~4.5.0",
37 |     "@vue/cli-plugin-eslint": "~4.5.0",
38 |     "@vue/cli-service": "~4.5.0",
39 |     "@vue/compiler-sfc": "~3.0.0",
40 |     "babel-eslint": "^10.1.0",
41 |     "eslint": "^6.7.2",
42 |     "eslint-plugin-vue": "^7.0.0",
43 |     "less": "^4.1.2",
44 |     "less-loader": "^5.0.0",
45 |     "moment": "^2.29.1",
46 |     "sass-loader": "^10.1.1"
47 |   },
48 |   "eslintConfig": {
49 |     "root": true,
50 |     "env": {
51 |       "node": true
52 |     },
53 |     "extends": [
54 |       "plugin:vue/vue3-essential",
55 |       "eslint:recommended"
56 |     ],
57 |     "parserOptions": {
58 |       "parser": "babel-eslint"
59 |     },
60 |     "rules": {}
61 |   },
62 |   "browserslist": [
63 |     "> 1%",
64 |     "last 2 versions",
65 |     "not dead"
66 |   ]
67 | }
68 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/coskuncay/vue3-flip-countdown/8735af1362a7c223fc77d1a53bfe352fb10def63/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/Countdown.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="flip-clock">
  3 |     <template v-for="data in timeData" :key="data.label">
  4 |         <span class="flip-clock__piece" :id="data.elementId" v-show="data.show">
  5 |             <div v-if="flipAnimation">
  6 |                 <span class="flip-clock__card flip-card" :style="countdownSize ? `font-size:${countdownSize}` : ''">
  7 |                     <b class="flip-card__top">{{twoDigits(data.current)}}</b>
  8 |                     <b class="flip-card__bottom" :data-value="twoDigits(data.current)"></b>
  9 |                     <b class="flip-card__back" :data-value="twoDigits(data.previous)"></b>
 10 |                     <b class="flip-card__back-bottom" :data-value="twoDigits(data.previous)"></b>
 11 |                 </span>
 12 |             </div>
 13 |             <div v-else>
 14 |                 <span class="no-animation__card">{{twoDigits(data.current)}}</span>
 15 |             </div>
 16 |             <span v-if="showLabels" class="flip-clock__slot" :style="labelSize ? `font-size:${labelSize}` : ''">{{ data.label }}</span>
 17 |         </span>
 18 |     </template>
 19 | </div>
 20 | </template>
 21 | 
 22 | <script>
 23 | import {
 24 |     computed,
 25 |     onBeforeMount,
 26 |     onMounted,
 27 |     onUnmounted,
 28 |     toRefs,
 29 |     ref,
 30 |     watch
 31 | } from 'vue'
 32 | 
 33 | import moment from "moment";
 34 | const fmt = "YYYY-MM-DD HH:mm:ss";
 35 | const uuidv4 = require('uuid/v4');
 36 | 
 37 | export default {
 38 |     name: 'vue3-flip-countdown',
 39 |     emits: ["timeElapsed"],
 40 |     setup(props, {
 41 |         emit
 42 |     }) {
 43 |         const uuid = uuidv4();
 44 |         const {
 45 |             deadline,
 46 |             stop,
 47 |             showDays,
 48 |             showHours,
 49 |             showMinutes,
 50 |             showSeconds,
 51 |             labels,
 52 |             deadlineDate,
 53 |             deadlineISO
 54 |         } = toRefs(props);
 55 | 
 56 |         let now = ref(Math.trunc(new Date().getTime() / 1000));
 57 |         let date = ref(null);
 58 |         let interval = ref(null);
 59 |         let diff = ref(0);
 60 |         let show = ref(false);
 61 |         let timeData = ref([{
 62 |                 current: 0,
 63 |                 previous: 0,
 64 |                 label: labels.value.days,
 65 |                 elementId: 'flip-card-days-' + uuid,
 66 |                 show: showDays.value,
 67 |             },
 68 |             {
 69 |                 current: 0,
 70 |                 previous: 0,
 71 |                 label: labels.value.hours,
 72 |                 elementId: 'flip-card-hours-' + uuid,
 73 |                 show: showHours.value,
 74 |             },
 75 |             {
 76 |                 current: 0,
 77 |                 previous: 0,
 78 |                 label: labels.value.minutes,
 79 |                 elementId: 'flip-card-minutes-' + uuid,
 80 |                 show: showMinutes.value,
 81 |             },
 82 |             {
 83 |                 current: 0,
 84 |                 previous: 0,
 85 |                 label: labels.value.seconds,
 86 |                 elementId: 'flip-card-seconds-' + uuid,
 87 |                 show: showSeconds.value,
 88 |             },
 89 |         ]);
 90 | 
 91 |         const updateAllCards = () => {
 92 |             updateTime(0, days);
 93 |             updateTime(1, hours);
 94 |             updateTime(2, minutes);
 95 |             updateTime(3, seconds);
 96 |         }
 97 | 
 98 |         const twoDigits = (value) => {
 99 |             if (value != undefined) {
100 |                 if (value.toString().length <= 1) {
101 |                     return '0' + value.toString();
102 |                 }
103 |                 return value.toString();
104 |             } else {
105 |                 return '00';
106 |             }
107 |         }
108 | 
109 |         const updateTime = (idx, newValue) => {
110 |             if (idx >= timeData.value.length || newValue === undefined) {
111 |                 return;
112 |             }
113 | 
114 |             // if (window['requestAnimationFrame']) {
115 |             //     frame = requestAnimationFrame(updateTime.bind(this));
116 |             // }
117 | 
118 |             const d = timeData.value[idx];
119 |             const val = newValue.value < 0 ? 0 : newValue.value;
120 |             const el = document.querySelector(`#${d.elementId}`);
121 | 
122 |             if (val !== d.current) {
123 |                 d.previous = d.current;
124 |                 d.current = val;
125 | 
126 |                 if (el) {
127 |                     el.classList.remove('flip');
128 |                     void el.offsetWidth;
129 |                     el.classList.add('flip');
130 |                 }
131 | 
132 |                 if (idx === 0) {
133 |                     const els = el.querySelectorAll('span b');
134 |                     if (els) {
135 |                         for (let e of els) {
136 |                             const cls = e.classList[0];
137 |                             if (newValue.value / 1000 >= 1) {
138 |                                 if (!cls.includes('-4digits')) {
139 |                                     const newCls = cls + '-4digits';
140 |                                     e.classList.add(newCls);
141 |                                     e.classList.remove(cls);
142 |                                 }
143 |                             } else {
144 |                                 if (cls.includes('-4digits')) {
145 |                                     const newCls = cls.replace('-4digits', '');
146 |                                     e.classList.add(newCls);
147 |                                     e.classList.remove(cls);
148 |                                 }
149 |                             }
150 |                         }
151 |                     } else {
152 |                         //
153 |                     }
154 |                 }
155 |             }
156 |         }
157 | 
158 |         watch(deadline, (newVal) => {
159 |             const endTime = newVal;
160 |             date.value = Math.trunc(Date.parse(endTime.replace(/-/g, '/')) / 1000);
161 |             if (!date.value) {
162 |                 throw new Error("Invalid props value, correct the 'deadline'");
163 |             }
164 |         })
165 | 
166 |         watch(now, () => {
167 |             diff.value = date.value - now.value;
168 |             if (diff.value <= 0 || stop.value) {
169 |                 diff.value = 0;
170 |                 updateTime(3, 0);
171 |             } else {
172 |                 updateAllCards();
173 |             }
174 |         })
175 | 
176 |         watch(diff, (newVal) => {
177 |             if (newVal == 0) {
178 |                 emit('timeElapsed');
179 |                 updateAllCards();
180 |             }
181 |         })
182 | 
183 |         let seconds = computed(() => {
184 |             return Math.trunc(diff.value) % 60;
185 |         });
186 | 
187 |         let minutes = computed(() => {
188 |             return Math.trunc(diff.value / 60) % 60;
189 |         });
190 |         let hours = computed(() => {
191 |             return Math.trunc(diff.value / 60 / 60) % 24;
192 |         });
193 |         let days = computed(() => {
194 |             return Math.trunc(diff.value / 60 / 60 / 24);
195 |         });
196 | 
197 |         onMounted(() => {
198 |             if (diff.value !== 0) {
199 |                 show.value = true;
200 |             }
201 |         });
202 | 
203 |         onBeforeMount(() => {
204 |             if (!deadline.value) {
205 |                 throw new Error("Missing props 'deadline'");
206 |             }
207 |             const endTime = deadline.value;
208 |             let epoch = Date.parse(endTime.replace(/-/g, '/'));
209 |             if (deadlineDate.value != null) {
210 |                 epoch = Date.parse(deadlineDate.value)
211 |             }
212 |             if (deadlineISO.value) {
213 |                 epoch = Date.parse(deadlineISO.value);
214 |             }
215 |             date.value = Math.trunc(epoch / 1000);
216 |             if (!date.value) {
217 |                 throw new Error("Invalid props value, correct the 'deadline'");
218 |             }
219 |             interval.value = setInterval(() => {
220 |                 now.value = Math.trunc(new Date().getTime() / 1000);
221 |             }, 1000);
222 | 
223 |         });
224 | 
225 |         onUnmounted(() => {
226 |             // if (window['cancelAnimationFrame']) {
227 |             //     cancelAnimationFrame(frame);
228 |             // }
229 |             clearInterval(interval.value);
230 |         });
231 | 
232 |         return {
233 |             now,
234 |             date,
235 |             interval,
236 |             diff,
237 |             show,
238 |             timeData,
239 |             twoDigits,
240 |             emit,
241 |         }
242 |     },
243 |     props: {
244 |         deadline: {
245 |             type: String,
246 |             required: false,
247 |             default: moment()
248 |                 .add(32, "d")
249 |                 .add(10, "s")
250 |                 .format(fmt),
251 |         },
252 |         deadlineISO: {
253 |             type: String,
254 |             required: false,
255 |         },
256 |         deadlineDate: {
257 |             type: Date,
258 |             required: false,
259 |         },
260 |         countdownSize: {
261 |             type: String,
262 |             required: false,
263 |             // default:"2.2rem"
264 |         },
265 | 
266 |         labelSize: {
267 |             type: String,
268 |             required: false,
269 |             // default:"2.2rem"
270 |         },
271 |         stop: {
272 |             type: Boolean,
273 |             required: false,
274 |         },
275 |         flipAnimation: {
276 |             type: Boolean,
277 |             required: false,
278 |             default: true,
279 |         },
280 |         showDays: {
281 |             type: Boolean,
282 |             required: false,
283 |             default: true,
284 |         },
285 |         showHours: {
286 |             type: Boolean,
287 |             required: false,
288 |             default: true,
289 |         },
290 |         showMinutes: {
291 |             type: Boolean,
292 |             required: false,
293 |             default: true,
294 |         },
295 |         showSeconds: {
296 |             type: Boolean,
297 |             required: false,
298 |             default: true,
299 |         },
300 |         showLabels: {
301 |             type: Boolean,
302 |             required: false,
303 |             default: true,
304 |         },
305 |         labels: {
306 |             type: Object,
307 |             required: false,
308 |             default: function () {
309 |                 return {
310 |                     days: 'Days',
311 |                     hours: 'Hours',
312 |                     minutes: 'Minutes',
313 |                     seconds: 'Seconds',
314 |                 };
315 |             },
316 |         },
317 |         mainColor: {
318 |             type: String,
319 |             default: '#EC685C'
320 |         },
321 |         secondFlipColor: {
322 |             type: String,
323 |             default: (props) => props.mainColor,
324 |         },
325 |         mainFlipBackgroundColor: {
326 |             type: String,
327 |             default: '#222222'
328 |         },
329 |         secondFlipBackgroundColor: {
330 |             type: String,
331 |             default: '#393939'
332 |         },
333 |         labelColor: {
334 |             type: String,
335 |             default: '#222222'
336 |         }
337 | 
338 |     },
339 | 
340 | };
341 | </script>
342 | 
343 | <style lang="less" scoped>
344 | .no-animation__card {
345 |     font-weight: 500;
346 |     font-size: 2rem;
347 |     line-height: 1.5;
348 |     display: block;
349 |     color: v-bind(mainColor);
350 | }
351 | 
352 | .flip-clock {
353 |     text-align: center;
354 |     perspective: 600px;
355 |     margin: 0 auto;
356 | 
357 |     *,
358 |     *:before,
359 |     *:after {
360 |         box-sizing: border-box;
361 |     }
362 | }
363 | 
364 | .flip-clock__piece {
365 |     display: inline-block;
366 |     margin: 0 0.2vw;
367 | 
368 |     @media (min-width: 1000px) {
369 |         margin: 0 5px;
370 |     }
371 | }
372 | 
373 | .flip-clock__slot {
374 |     font-size: 1rem;
375 |     line-height: 1.5;
376 |     display: block;
377 |     color: v-bind(labelColor);
378 | }
379 | 
380 | @halfHeight: 0.72em;
381 | @borderRadius: 0.15em;
382 | 
383 | .flip-card {
384 |     display: block;
385 |     position: relative;
386 |     padding-bottom: @halfHeight;
387 |     font-size: 2.25rem;
388 |     line-height: 0.95;
389 | }
390 | 
391 | @media (min-width: 1000px) {
392 |     .flip-clock__slot {
393 |         font-size: 1.2rem;
394 |     }
395 | 
396 |     .flip-card {
397 |         font-size: 3rem;
398 |     }
399 | }
400 | 
401 | .flip-card__top,
402 | .flip-card__bottom,
403 | .flip-card__back-bottom,
404 | .flip-card__back::before,
405 | .flip-card__back::after {
406 |     display: block;
407 |     height: @halfHeight;
408 |     color: v-bind(mainColor);
409 |     background: v-bind(mainFlipBackgroundColor);
410 |     padding: 0.23em 0.15em 0.4em;
411 |     border-radius: @borderRadius @borderRadius 0 0;
412 |     backface-visibility: hidden;
413 |     -webkit-backface-visibility: hidden;
414 |     transform-style: preserve-3d;
415 |     width: 2.1em;
416 |     height: @halfHeight;
417 | }
418 | 
419 | .flip-card__top-4digits,
420 | .flip-card__bottom-4digits,
421 | .flip-card__back-bottom-4digits,
422 | .flip-card__back-4digits::before,
423 | .flip-card__back-4digits::after {
424 |     display: block;
425 |     height: @halfHeight;
426 |     color: v-bind(mainColor);
427 |     background: v-bind(mainFlipBackgroundColor);
428 |     padding: 0.23em 0.15em 0.4em;
429 |     border-radius: @borderRadius @borderRadius 0 0;
430 |     backface-visibility: hidden;
431 |     -webkit-backface-visibility: hidden;
432 |     transform-style: preserve-3d;
433 |     width: 2.65em;
434 |     height: @halfHeight;
435 | }
436 | 
437 | .flip-card__bottom,
438 | .flip-card__back-bottom,
439 | .flip-card__bottom-4digits,
440 | .flip-card__back-bottom-4digits {
441 |     color: v-bind(secondFlipColor);
442 |     position: absolute;
443 |     top: 50%;
444 |     left: 0;
445 |     border-top: solid 1px #000;
446 |     background: v-bind(secondFlipBackgroundColor);
447 |     border-radius: 0 0 @borderRadius @borderRadius;
448 |     pointer-events: none;
449 |     overflow: hidden;
450 |     z-index: 2;
451 | }
452 | 
453 | .flip-card__back-bottom,
454 | .flip-card__back-bottom-4digits {
455 |     z-index: 1;
456 | }
457 | 
458 | .flip-card__bottom::after,
459 | .flip-card__back-bottom::after,
460 | .flip-card__bottom-4digits::after,
461 | .flip-card__back-bottom-4digits::after {
462 |     display: block;
463 |     margin-top: -@halfHeight;
464 | }
465 | 
466 | .flip-card__back::before,
467 | .flip-card__bottom::after,
468 | .flip-card__back-bottom::after,
469 | .flip-card__back-4digits::before,
470 | .flip-card__bottom-4digits::after,
471 | .flip-card__back-bottom-4digits::after {
472 |     content: attr(data-value);
473 | }
474 | 
475 | .flip-card__back,
476 | .flip-card__back-4digits {
477 |     position: absolute;
478 |     top: 0;
479 |     height: 100%;
480 |     left: 0%;
481 |     pointer-events: none;
482 | }
483 | 
484 | .flip-card__back::before,
485 | .flip-card__back-4digits::before {
486 |     position: relative;
487 |     overflow: hidden;
488 |     z-index: -1;
489 | }
490 | 
491 | .flip .flip-card__back::before,
492 | .flip .flip-card__back-4digits::before {
493 |     z-index: 1;
494 |     animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35);
495 |     animation-fill-mode: both;
496 |     transform-origin: center bottom;
497 | }
498 | 
499 | .flip .flip-card__bottom,
500 | .flip .flip-card__bottom-4digits {
501 |     transform-origin: center top;
502 |     animation-fill-mode: both;
503 |     animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1);
504 | }
505 | 
506 | @keyframes flipTop {
507 |     0% {
508 |         transform: rotateX(0deg);
509 |         z-index: 2;
510 |     }
511 | 
512 |     0%,
513 |     99% {
514 |         opacity: 1;
515 |     }
516 | 
517 |     100% {
518 |         transform: rotateX(-90deg);
519 |         opacity: 0;
520 |     }
521 | }
522 | 
523 | @keyframes flipBottom {
524 | 
525 |     0%,
526 |     50% {
527 |         z-index: -1;
528 |         transform: rotateX(90deg);
529 |         opacity: 0;
530 |     }
531 | 
532 |     51% {
533 |         opacity: 1;
534 |     }
535 | 
536 |     100% {
537 |         opacity: 1;
538 |         transform: rotateX(0deg);
539 |         z-index: 5;
540 |     }
541 | }
542 | </style>
543 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import Countdown from './Countdown.vue'
 2 | 
 3 | function install(app) {
 4 | 
 5 |     if (install.installed) {
 6 |         return
 7 |     }
 8 | 
 9 |     install.installed = true
10 | 
11 |     app.component(Countdown.name, Countdown)
12 | }
13 | 
14 | export default install
15 | 
16 | export {
17 |     install,
18 |     Countdown,
19 | }


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | // vue.config.js
 2 | /**
 3 |  * @type {import('@vue/cli-service').ProjectOptions}
 4 |  */
 5 | module.exports = {
 6 |     // options...
 7 |     chainWebpack: config => {
 8 |         config.output.filename('vue3-flip-countdown.js')
 9 |         config.optimization.splitChunks().clear();
10 | 
11 |     },
12 |     productionSourceMap: false,
13 |     configureWebpack: {
14 |         optimization: {
15 |             splitChunks: false,
16 |         }
17 |     },
18 |     css: {
19 |         extract: false
20 |     }
21 |     
22 | }


--------------------------------------------------------------------------------