vue3-flip-countdown - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

package.json

 {
   "name": "vue3-flip-countdown",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Countdown timer with Flip Animation for Vue 3.x",
@@ -32,5 +32,2 @@ "repository": {
   },
-  "files": [
-    "dist/*"
-  ],
   "dependencies": {
@@ -45,4 +42,2 @@ "vue": "^3.0.0"
     "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
-    "css-loader": "^6.5.1",
     "eslint": "^6.7.2",
@@ -53,6 +48,3 @@ "eslint-plugin-vue": "^7.0.0",
     "moment": "^2.29.1",
-    "node-sass": "^4.14.1",
-    "sass": "^1.34.1",
-    "sass-loader": "^10.1.1",
-    "style-loader": "^3.3.1"
+    "sass-loader": "^10.1.1"
   },
@@ -59,0 +51,0 @@ "eslintConfig": {

README.md

 # vue3-flip-countdown
 
-## Project setup
+> Countdown timer with Flip Animation for [Vue](https://vuejs.org/ "Vue Homepage") 3.x
+
+
+
+<p align="center">
+  <img src="https://img.shields.io/npm/l/vue3-flip-countdown" />
+  <a href="https://www.npmjs.com/package/vue3-flip-countdown"><img src="https://img.shields.io/npm/v/vue3-flip-countdown"/> 
+   <img src="https://img.shields.io/npm/dt/vue3-flip-countdown"/></a>
+  <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-3.x-brightgreen.svg"/></a>
+ </p>
+
+
+## Installation
+
 ```
-npm install
+npm i vue3-flip-countdown --save
 ```
 
-### Compiles and hot-reloads for development
+## Global Usage
+main.js
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import Countdown from 'vue3-flip-countdown'
+createApp(App).use(Countdown).mount('#app')
 ```
-npm run serve
-```
 
-### Compiles and minifies for production
+App.vue
+```js
+<template>
+  <vue3-flip-countdown />
+</template>
+
+<script>
+
+export default {
+  name: 'App',
+  components: {
+  }
+}
+</script>
 ```
-npm run build
-```
 
-### Lints and fixes files
+## Single File Component Usage
+```vue
+<template>
+  <Countdown />
+</template>
+
+<script>
+import {Countdown} from 'vue3-flip-countdown'
+export default {
+  name: 'App',
+  components: {
+    Countdown
+  }
+}
+</script>
 ```
-npm run lint
-```
 
+## Props
 
+| Name | Type | Default | optional |
+| --- | --- | --- | --- |
+| deadlineISO | String<br>YYYY-MM-DDTHH:mm:ss.sssZ |  | className of this column |
+| deadline | String<br>YYYY-MM-DD HH:mm:ss | 32d,0h,0m,10s | key of this column |
+| deadlineDate | Date |  | className of this column |
+| countdownSize | String | 3rem | thead colSpan of this column |
+| labelSize | String | 1.2rem | title of this column |
+| flipAnimation | Boolean | true | width of the specific proportion calculation according to the width of the columns |
+| mainColor | String | '#EC685C' | Set custom props per each header cell. |
+| secondFlipColor | String | props.mainColor | Set custom props per each header cell. |
+| mainFlipBackgroundColor | String | '#222222' | Set custom props per each header cell. |
+| secondFlipBackgroundColor | String | '#393939' | Set custom props per each header cell. |
+| showLabels | Boolean | true | Set custom props per each header cell. |
+| labelColor | Function(record) | '#222222' | Set custom props per each header cell. |
+| stop | Boolean |  | display field of the data record |
+| showDays | Boolean | true | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
+| showHours | Boolean | true | specify how cell content is aligned |
+| showMinutes | Boolean | true | specify whether cell content be ellipsized |
+| showSeconds | Boolean | true | Set custom props per each cell. |
+| labels | Object | {days: 'Days',hours: 'Hours',minutes: 'Minutes',seconds: 'Seconds',} | Set custom props per each header cell. |
+
+
+
 # References
@@ -25,0 +89,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

11

decreased by-31.25%

Number of package files

10

increased by11.11%

Lines of code

47998

increased by0.34%

Number of lines in readme file

101

increased by172.97%

Worsened metrics

Total package byte prevSize

2063903

decreased by-61.72%

Number of low supply chain risk alerts

6

increased by20%

No dependency changes