quasar-app-extension-qribbon - npm Package Compare versions

Comparing version 1.0.0-alpha.5 to 1.0.0-alpha.6

package.json

 {
   "name": "quasar-app-extension-qribbon",
-  "version": "1.0.0-alpha.5",
+  "version": "1.0.0-alpha.6",
   "description": "QRibbon - Quasar App Extension",
@@ -5,0 +5,0 @@ "author": "Allan Gaunt <[e-mail]>",

src/component/QRibbon.js

 import Vue from 'vue'
 
 // Styles
-import './ribbon-default.styl'
-import './ribbon-corner.styl'
+import './styl/common/glow.styl'
+import './styl/horizontal/main.styl'
+import './styl/vertical/main.styl'
+import './styl/corner/main.styl'
 
@@ -31,2 +33,3 @@ // Utils
     },
+
     type: {
@@ -41,2 +44,3 @@ type: String,
     },
+
     leafPosition: {
@@ -52,2 +56,3 @@ type: String,
     },
+
     size: {
@@ -59,2 +64,3 @@ type: String,
     },
+
     decoration: {
@@ -69,2 +75,13 @@ type: String,
     },
+
+    glow: Boolean,
+    glowSpeed: {
+      type: Number,
+      default: 1.5
+    },
+    glowIterationCount: {
+      type: String,
+      default: 'infinite'
+    },
+
     inline: Boolean
@@ -81,2 +98,5 @@ },
     },
+    ribbonContainerClass () {
+      return `qribbon__container ${this.position} ${this.inline ? 'inline' : ''}`
+    },
     styles () {
@@ -87,2 +107,4 @@ let style = {}
       style['--qribbon-leaf-color'] = this.leafColor || this.__leafColor
+      style['--qribbon-glow-speed'] = `${this.glowSpeed}s`
+      style['--qribbon-glow-iteration-count'] = this.glowIterationCount
       return style
@@ -93,16 +115,26 @@ }
   methods: {
-    __renderBaseRibbon (h, children) {
-      const lastParam = children || slot(this, 'default')
+    __renderDefaultRibbon (h) {
       return h('div', {
         staticClass: this.ribbonClass,
         style: this.styles
-      }, lastParam)
+      }, [
+        this.glow ? h('div', {
+          staticClass: 'glow'
+        }) : null,
+        slot(this, 'default')
+      ])
     },
 
-    __renderDefaultRibbon (h) {
-      return this.__renderBaseRibbon(h)
-    },
-
     __renderCornerRibbon (h) {
-      return this.__renderBaseRibbon(h, [ h('div', slot(this, 'default')) ])
+      return h('div', {
+        staticClass: this.ribbonClass,
+        style: this.styles
+      }, [
+          h('div', [
+          this.glow ? h('div', {
+            staticClass: 'glow'
+          }) : null,
+          slot(this, 'default')
+        ])
+      ])
     },
@@ -122,3 +154,3 @@
     return h('div', {
-      staticClass: `qribbon__container ${this.position} ${this.inline ? 'inline' : ''}`
+      staticClass: this.ribbonContainerClass
     }, [
@@ -125,0 +157,0 @@ this.__renderRibbon(h)

src/index.js

@@ -17,4 +17,6 @@ /**
   // make sure qjumbotron css goes through webpack to avoid ssr issues
-  conf.css.push('~quasar-app-extension-qribbon/src/component/ribbon-default.styl')
-  conf.css.push('~quasar-app-extension-qribbon/src/component/ribbon-corner.styl')
+  conf.css.push('~quasar-app-extension-qribbon/src/component/styl/common/glow.styl')
+  conf.css.push('~quasar-app-extension-qribbon/src/component/styl/horizontal/main.styl')
+  conf.css.push('~quasar-app-extension-qribbon/src/component/styl/vertical/main.styl')
+  conf.css.push('~quasar-app-extension-qribbon/src/component/styl/corner/main.styl')
   console.log(` App Extension (qribbon) Info: 'Adding ribbon-*.styl css reference to your quasar.conf.js'`)
@@ -21,0 +23,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

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

Improved metrics

Total package byte prevSize

25288

increased by19.84%

Number of package files

11

increased by37.5%

Lines of code

239

increased by13.81%

No dependency changes