asyncy-ui-components - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/HeroBackground.js

@@ -34,8 +34,25 @@ //
 //
-//
-//
-//
 
 var script = {
   props: ['leftImage', 'rightImage', 'leftX', 'leftY', 'rightX', 'rightY', 'scale'],
+  data() {
+    return {
+      rightImageHeight: 700,
+      rightImageWidth: 1200,
+      leftImageHeight: 700,
+      leftImageWidth: 1200,
+    };
+  },
+  methods: {
+    setRightImageHeight(event) {
+      const image = event.target;
+      this.rightImageHeight = image.naturalHeight;
+      this.rightImageWidth = image.naturalWidth;
+    },
+    setLeftImageHeight(event) {
+      const image = event.target;
+      this.leftImageHeight = image.naturalHeight;
+      this.leftImageWidth = image.naturalWidth;
+    },
+  },
 };
@@ -50,16 +67,13 @@
     zIndex: '0',
-    left: '-30px',
+    left: '0px',
     top: '0px',
   })},[_c('img',{style:({
-      position: 'absolute',
-      left: _vm.leftX ? (_vm.leftX + "px") : '-750px',
-      top: _vm.leftY ? (_vm.leftY + "px") : '-45px',
-      width: ("calc(1200px * " + (_vm.scale || 1) + ")"),
-      height: ("calc(700px * " + (_vm.scale || 1) + ")"),
-    }),attrs:{"src":_vm.leftImage,"alt":"null"}})]),_vm._v(" "),_c('div',{staticClass:"right-image",style:({
+      position: 'relative',
+      left: _vm.leftX ? (_vm.leftX + "px") : '0px',
+      top: _vm.leftY ? (_vm.leftY + "px") : '0px',
+      width: ("calc(" + _vm.leftImageWidth + "px * " + (_vm.scale || 1) + ")"),
+      height: ("calc(" + _vm.rightImageHeight + "px * " + (_vm.scale || 1) + ")"),
+    }),attrs:{"src":_vm.leftImage,"alt":"null"},on:{"~load":function($event){return _vm.setLeftImageHeight($event)}}})]),_vm._v(" "),_c('div',{staticClass:"right-image",style:({
     position: 'absolute',
     zIndex: '0',
-    width: '450px',
-    height: '700px',
-    overflow: 'hidden',
     top: '0px',
@@ -69,7 +83,7 @@ right: '0px',
       position: 'relative',
-      width: ("calc(1200px * " + (_vm.scale || 1) + ")"),
-      height: ("calc(700px * " + (_vm.scale || 1) + ")"),
-      top: _vm.rightY ? (_vm.rightY + "px") : '-170px',
+      width: ("calc(" + _vm.rightImageWidth + "px * " + (_vm.scale || 1) + ")"),
+      height: ("calc(" + _vm.rightImageHeight + "px * " + (_vm.scale || 1) + ")"),
+      top: _vm.rightY ? (_vm.rightY + "px") : '0px',
       right: _vm.rightX ? (_vm.rightX + "px") : '0px',
-    }),attrs:{"src":_vm.rightImage,"alt":"null"}})])])};
+    }),attrs:{"src":_vm.rightImage,"alt":"null"},on:{"~load":function($event){return _vm.setRightImageHeight($event)}}})])])};
 var __vue_staticRenderFns__ = [];
@@ -80,7 +94,7 @@
     if (!inject) return
-    inject("data-v-1ec7cd83_0", { source: "\n.left-image[data-v-1ec7cd83],.right-image[data-v-1ec7cd83]{pointer-events:none\n}\n@media (max-width:1250px) and (min-width:1101px){\n.left-image[data-v-1ec7cd83]{left:calc(100vw - 1265px)!important\n}\n.right-image[data-v-1ec7cd83]{width:calc(-780px + 100vw)!important\n}\n}\n@media (max-width:1100px) and (min-width:626px){\n.left-image[data-v-1ec7cd83]{left:-155px!important\n}\n.right-image[data-v-1ec7cd83]{width:326px!important\n}\n}\n@media (max-width:625px){\n.left-image[data-v-1ec7cd83]{left:-270px!important\n}\n.right-image[data-v-1ec7cd83]{width:215px!important\n}\n}", map: undefined, media: undefined });
+    inject("data-v-75471cf2_0", { source: "\n.left-image[data-v-75471cf2],.right-image[data-v-75471cf2]{pointer-events:none\n}\n@media (max-width:1250px) and (min-width:1101px){\n.left-image[data-v-75471cf2]{left:-70px!important\n}\n.right-image[data-v-75471cf2]{right:-70px!important\n}\n}\n@media (max-width:1100px) and (min-width:626px){\n.left-image[data-v-75471cf2]{left:-155px!important\n}\n.right-image[data-v-75471cf2]{right:-155px!important\n}\n}\n@media (max-width:625px){\n.left-image[data-v-75471cf2]{left:-270px!important\n}\n.right-image[data-v-75471cf2]{right:-270px!important\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-1ec7cd83";
+  const __vue_scope_id__ = "data-v-75471cf2";
   /* module identifier */
@@ -87,0 +101,0 @@ const __vue_module_identifier__ = undefined;

dist/HeroBackground.ssr.js

@@ -34,8 +34,25 @@ //
 //
-//
-//
-//
 
 var script = {
   props: ['leftImage', 'rightImage', 'leftX', 'leftY', 'rightX', 'rightY', 'scale'],
+  data() {
+    return {
+      rightImageHeight: 700,
+      rightImageWidth: 1200,
+      leftImageHeight: 700,
+      leftImageWidth: 1200,
+    };
+  },
+  methods: {
+    setRightImageHeight(event) {
+      const image = event.target;
+      this.rightImageHeight = image.naturalHeight;
+      this.rightImageWidth = image.naturalWidth;
+    },
+    setLeftImageHeight(event) {
+      const image = event.target;
+      this.leftImageHeight = image.naturalHeight;
+      this.leftImageWidth = image.naturalWidth;
+    },
+  },
 };
@@ -50,16 +67,13 @@
     zIndex: '0',
-    left: '-30px',
+    left: '0px',
     top: '0px',
   }, null))+"><img"+(_vm._ssrAttr("src",_vm.leftImage))+" alt=\"null\""+(_vm._ssrStyle(null,{
-      position: 'absolute',
-      left: _vm.leftX ? (_vm.leftX + "px") : '-750px',
-      top: _vm.leftY ? (_vm.leftY + "px") : '-45px',
-      width: ("calc(1200px * " + (_vm.scale || 1) + ")"),
-      height: ("calc(700px * " + (_vm.scale || 1) + ")"),
+      position: 'relative',
+      left: _vm.leftX ? (_vm.leftX + "px") : '0px',
+      top: _vm.leftY ? (_vm.leftY + "px") : '0px',
+      width: ("calc(" + _vm.leftImageWidth + "px * " + (_vm.scale || 1) + ")"),
+      height: ("calc(" + _vm.rightImageHeight + "px * " + (_vm.scale || 1) + ")"),
     }, null))+"></div> <div class=\"right-image\""+(_vm._ssrStyle(null,{
     position: 'absolute',
     zIndex: '0',
-    width: '450px',
-    height: '700px',
-    overflow: 'hidden',
     top: '0px',
@@ -69,5 +83,5 @@ right: '0px',
       position: 'relative',
-      width: ("calc(1200px * " + (_vm.scale || 1) + ")"),
-      height: ("calc(700px * " + (_vm.scale || 1) + ")"),
-      top: _vm.rightY ? (_vm.rightY + "px") : '-170px',
+      width: ("calc(" + _vm.rightImageWidth + "px * " + (_vm.scale || 1) + ")"),
+      height: ("calc(" + _vm.rightImageHeight + "px * " + (_vm.scale || 1) + ")"),
+      top: _vm.rightY ? (_vm.rightY + "px") : '0px',
       right: _vm.rightX ? (_vm.rightX + "px") : '0px',
@@ -80,9 +94,9 @@ }, null))+"></div>")])};
     if (!inject) return
-    inject("data-v-1ec7cd83_0", { source: "\n.left-image[data-v-1ec7cd83],.right-image[data-v-1ec7cd83]{pointer-events:none\n}\n@media (max-width:1250px) and (min-width:1101px){\n.left-image[data-v-1ec7cd83]{left:calc(100vw - 1265px)!important\n}\n.right-image[data-v-1ec7cd83]{width:calc(-780px + 100vw)!important\n}\n}\n@media (max-width:1100px) and (min-width:626px){\n.left-image[data-v-1ec7cd83]{left:-155px!important\n}\n.right-image[data-v-1ec7cd83]{width:326px!important\n}\n}\n@media (max-width:625px){\n.left-image[data-v-1ec7cd83]{left:-270px!important\n}\n.right-image[data-v-1ec7cd83]{width:215px!important\n}\n}", map: undefined, media: undefined });
+    inject("data-v-75471cf2_0", { source: "\n.left-image[data-v-75471cf2],.right-image[data-v-75471cf2]{pointer-events:none\n}\n@media (max-width:1250px) and (min-width:1101px){\n.left-image[data-v-75471cf2]{left:-70px!important\n}\n.right-image[data-v-75471cf2]{right:-70px!important\n}\n}\n@media (max-width:1100px) and (min-width:626px){\n.left-image[data-v-75471cf2]{left:-155px!important\n}\n.right-image[data-v-75471cf2]{right:-155px!important\n}\n}\n@media (max-width:625px){\n.left-image[data-v-75471cf2]{left:-270px!important\n}\n.right-image[data-v-75471cf2]{right:-270px!important\n}\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-1ec7cd83";
+  const __vue_scope_id__ = "data-v-75471cf2";
   /* module identifier */
-  const __vue_module_identifier__ = "data-v-1ec7cd83";
+  const __vue_module_identifier__ = "data-v-75471cf2";
   /* functional template */
@@ -89,0 +103,0 @@ const __vue_is_functional_template__ = false;

package.json

 {
   "name": "asyncy-ui-components",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Shared components for Asyncy",
@@ -34,7 +34,10 @@ "main": "index.js",
   "scripts": {
-    "build": "NODE_ENV=production ./node_modules/.bin/rollup --config build/rollup.config.js",
-    "watch": "NODE_ENV=production ./node_modules/.bin/rollup --config build/rollup.config.js -w",
-    "dev": "run-p storybook watch",
+    "dev": "run-p storybook js-watch css-watch",
+	"build": "run-p js-build css-build",
+    "js-build": "NODE_ENV=production ./node_modules/.bin/rollup --config build/rollup.config.js",
+    "js-watch": "NODE_ENV=production ./node_modules/.bin/rollup --config build/rollup.config.js -w",
+	"css-build": "stylus assets/styles/global.styl --include-css -r -c --out dist/css/",
+	"css-watch": "stylus assets/styles/global.styl --include-css -r -c -w --out dist/css/",
     "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook-build": "build-storybook -c .storybook -o dist/"
+    "storybook-build": "build-storybook -c .storybook -o site/"
   },
@@ -41,0 +44,0 @@ "repository": {

stories/components.stories.js

 import Vue from 'vue';
 
 import { storiesOf } from '@storybook/vue';
+import { withKnobs, number } from '@storybook/addon-knobs/vue';
 
@@ -53,2 +54,3 @@ import headerLeft from '../assets/images/home_header_left.svg';
 storiesOf('Header background', module)
+  .addDecorator(withKnobs)
   .add('Header background', () => ({
@@ -59,8 +61,8 @@ components: { HeroBackground },
       right-image="${headerRight}"
-      :scale="0.6"
-      :left-x="-320"
-      :left-y="1"
-      :right-x="-85"
-      :right-y="1"
+      :scale="${number('Scale', 3, { step: 0.1 })}"
+      :left-x="${number('Left X Position', -300)}"
+      :left-y="${number('Left Y Position', 0)}"
+      :right-x="${number('Right X Position', -300)}"
+      :right-y="${number('Right Y Position', 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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 55 instances 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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11043055

increased by77.81%

Number of package files

163

increased by45.54%

Worsened metrics

Lines of code

19279

decreased by-0.61%

Number of medium supply chain risk alerts

109

increased by94.64%

No dependency changes