energy-manager-screen-capture - npm Package Compare versions

Comparing version 0.0.23 to 0.0.24

dist/index.js

@@ -49,3 +49,4 @@ import html2canvas from 'html2canvas';
     async takeScreenshot() {
-      const el = document.getElementById(this.$options.captureElemntId);
+      console.log(this.$options);
+      const el = document.getElementById(this.$options.captureElementId);
 
@@ -403,7 +404,7 @@ const options = {
     if (!inject) return
-    inject("data-v-9f3af5c2_0", { source: "\n.modal-mask[data-v-9f3af5c2] {\r\n  position: fixed;\r\n  z-index: 9998;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: table;\r\n  transition: opacity 0.3s ease;\n}\n.modal-wrapper[data-v-9f3af5c2] {\r\n  display: table-cell;\r\n  vertical-align: middle;\n}\n.modal-container[data-v-9f3af5c2] {\r\n  width: 400px;\r\n  margin: 0px auto;\r\n  padding: 20px 30px;\r\n  background-color: #fff;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\r\n  transition: all 0.3s ease;\r\n  font-family: Helvetica, Arial, sans-serif;\n}\n.modal-header[data-v-9f3af5c2] {\r\n  display: flex;\r\n  justify-content: space-between;\n}\n.modal-body[data-v-9f3af5c2] {\r\n  margin: 20px 0;\n}\n.modal-footer[data-v-9f3af5c2] {\r\n  padding: 10px 0;\n}\n.modal-default-button[data-v-9f3af5c2] {\r\n  float: right;\n}\r\n\r\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\n.modal-enter[data-v-9f3af5c2] {\r\n  opacity: 0;\n}\n.modal-leave-active[data-v-9f3af5c2] {\r\n  opacity: 0;\n}\n.modal-enter .modal-container[data-v-9f3af5c2],\r\n.modal-leave-active .modal-container[data-v-9f3af5c2] {\r\n  -webkit-transform: scale(1.1);\r\n  transform: scale(1.1);\n}\n.form-group[data-v-9f3af5c2] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 10px;\n}\n.input[data-v-9f3af5c2]{\r\n  border-radius: 5px;\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n  outline:none;\r\n  padding: 6px;\n}\n.input[data-v-9f3af5c2]:focus{\r\n  border:1px solid #56b4ef;\r\n  box-shadow: 0px 0px 3px 1px #c8def0;\n}\n.checkbox-input[data-v-9f3af5c2] {\r\n  flex-direction: row;\n}\n.radio-input[data-v-9f3af5c2] {\r\n  display: flex;\n}\n.textarea[data-v-9f3af5c2] {\r\n  min-height: 100px;\r\n  resize: vertical;\n}\n.close[data-v-9f3af5c2] {\r\n  cursor: pointer;\n}\r\n\r\n", map: {"version":3,"sources":["C:\\Users\\ermin\\Code\\energyManager\\screenCapture\\src\\ScreenCaptureModal.vue"],"names":[],"mappings":";AA6FA;EACA,eAAA;EACA,aAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,cAAA;EACA,6BAAA;AACA;AAEA;EACA,mBAAA;EACA,sBAAA;AACA;AAEA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;EACA,yBAAA;EACA,yCAAA;AACA;AAEA;EACA,aAAA;EACA,8BAAA;AACA;AAEA;EACA,cAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,YAAA;AAEA;;AAEA;;;;;;;EAOA;AAEA;EACA,UAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;;EAEA,6BAAA;EACA,qBAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,YAAA;EACA,YAAA;AACA;AAEA;EACA,wBAAA;EACA,mCAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA","file":"ScreenCaptureModal.vue","sourcesContent":["<template>\r\n  <div class=\"modal-mask\">\r\n    <div class=\"modal-wrapper\">\r\n      <div class=\"modal-container\">\r\n        <div class=\"modal-header\">\r\n            <h3>\r\n              Please enter screen comment\r\n            </h3>\r\n            <div class=\"close\" @click=\"$emit('close')\">\r\n              <strong>x</strong>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <form v-on:submit.prevent=\"submit()\">\r\n            <div class=\"form-group\">\r\n              <label for=\"title\">Title</label>\r\n              <input id=\"title\" class=\"input\" type=\"text\" v-model=\"form.title\">\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label for=\"description\">Description</label>\r\n              <textarea class=\"textarea input\"  id=\"description\" v-model=\"form.description\" placeholder=\"Description\"></textarea>\r\n            </div>\r\n            <div class=\"form-group checkbox-input\">\r\n              <label for=\"private\">Private</label>\r\n              <input id=\"private\" type=\"checkbox\" v-model=\"form.private\">\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label>Type</label>\r\n              <div class=\"radio-input\">\r\n                <input type=\"radio\" id=\"bug\" value=\"bug\" v-model=\"form.type\">\r\n                <label for=\"bug\">Bug</label>\r\n              </div>\r\n              <div class=\"radio-input\">\r\n                <input type=\"radio\" id=\"feature\" value=\"feature\" v-model=\"form.type\">\r\n                <label for=\"feature\">Feature</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"submit\" @click=\"submit\" class=\"modal-default-button\">\r\n            Submit\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport canvasScreenshot  from './canvasScreenshot.js';\r\nexport default {\r\n  data() {\r\n    return {\r\n      form: {\r\n        title: null,\r\n        description: null,\r\n        private: false,\r\n        type: 'bug'\r\n      },\r\n      screenshot: null\r\n    }\r\n  },\r\n  mixins: [canvasScreenshot],\r\n  created() {\r\n    this.takeScreenshot()\r\n  },\r\n  methods: {\r\n    submit() {\r\n      let data = {\r\n        title: this.form.title,\r\n        description: this.form.description,\r\n        private: this.form.private,\r\n        type: this.form.type,\r\n        screenshot: this.screenshot\r\n      }\r\n\r\n      this.$emit('submit', data)\r\n      this.$emit('close')\r\n    },\r\n    async takeScreenshot() {\r\n      const el = document.getElementById(this.$options.captureElemntId);\r\n\r\n      const options = {\r\n        type: 'dataURL'\r\n      }\r\n      this.screenshot = await this.$html2canvas(el, options);\r\n    },\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.modal-mask {\r\n  position: fixed;\r\n  z-index: 9998;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: table;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.modal-wrapper {\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n}\r\n\r\n.modal-container {\r\n  width: 400px;\r\n  margin: 0px auto;\r\n  padding: 20px 30px;\r\n  background-color: #fff;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\r\n  transition: all 0.3s ease;\r\n  font-family: Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.modal-body {\r\n  margin: 20px 0;\r\n}\r\n\r\n.modal-footer {\r\n  padding: 10px 0;\r\n}\r\n\r\n.modal-default-button {\r\n  float: right;\r\n\r\n}\r\n\r\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\r\n\r\n.modal-enter {\r\n  opacity: 0;\r\n}\r\n\r\n.modal-leave-active {\r\n  opacity: 0;\r\n}\r\n\r\n.modal-enter .modal-container,\r\n.modal-leave-active .modal-container {\r\n  -webkit-transform: scale(1.1);\r\n  transform: scale(1.1);\r\n}\r\n\r\n.form-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.input{\r\n  border-radius: 5px;\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n  outline:none;\r\n  padding: 6px;\r\n}\r\n\r\n.input:focus{\r\n  border:1px solid #56b4ef;\r\n  box-shadow: 0px 0px 3px 1px #c8def0;\r\n}\r\n\r\n.checkbox-input {\r\n  flex-direction: row;\r\n}\r\n\r\n.radio-input {\r\n  display: flex;\r\n}\r\n\r\n.textarea {\r\n  min-height: 100px;\r\n  resize: vertical;\r\n}\r\n\r\n.close {\r\n  cursor: pointer;\r\n}\r\n\r\n</style>\r\n"]}, media: undefined });
+    inject("data-v-133446f1_0", { source: "\n.modal-mask[data-v-133446f1] {\r\n  position: fixed;\r\n  z-index: 9998;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: table;\r\n  transition: opacity 0.3s ease;\n}\n.modal-wrapper[data-v-133446f1] {\r\n  display: table-cell;\r\n  vertical-align: middle;\n}\n.modal-container[data-v-133446f1] {\r\n  width: 400px;\r\n  margin: 0px auto;\r\n  padding: 20px 30px;\r\n  background-color: #fff;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\r\n  transition: all 0.3s ease;\r\n  font-family: Helvetica, Arial, sans-serif;\n}\n.modal-header[data-v-133446f1] {\r\n  display: flex;\r\n  justify-content: space-between;\n}\n.modal-body[data-v-133446f1] {\r\n  margin: 20px 0;\n}\n.modal-footer[data-v-133446f1] {\r\n  padding: 10px 0;\n}\n.modal-default-button[data-v-133446f1] {\r\n  float: right;\n}\r\n\r\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\n.modal-enter[data-v-133446f1] {\r\n  opacity: 0;\n}\n.modal-leave-active[data-v-133446f1] {\r\n  opacity: 0;\n}\n.modal-enter .modal-container[data-v-133446f1],\r\n.modal-leave-active .modal-container[data-v-133446f1] {\r\n  -webkit-transform: scale(1.1);\r\n  transform: scale(1.1);\n}\n.form-group[data-v-133446f1] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 10px;\n}\n.input[data-v-133446f1]{\r\n  border-radius: 5px;\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n  outline:none;\r\n  padding: 6px;\n}\n.input[data-v-133446f1]:focus{\r\n  border:1px solid #56b4ef;\r\n  box-shadow: 0px 0px 3px 1px #c8def0;\n}\n.checkbox-input[data-v-133446f1] {\r\n  flex-direction: row;\n}\n.radio-input[data-v-133446f1] {\r\n  display: flex;\n}\n.textarea[data-v-133446f1] {\r\n  min-height: 100px;\r\n  resize: vertical;\n}\n.close[data-v-133446f1] {\r\n  cursor: pointer;\n}\r\n\r\n", map: {"version":3,"sources":["C:\\Users\\ermin\\Code\\energyManager\\screenCapture\\src\\ScreenCaptureModal.vue"],"names":[],"mappings":";AA8FA;EACA,eAAA;EACA,aAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,oCAAA;EACA,cAAA;EACA,6BAAA;AACA;AAEA;EACA,mBAAA;EACA,sBAAA;AACA;AAEA;EACA,YAAA;EACA,gBAAA;EACA,kBAAA;EACA,sBAAA;EACA,kBAAA;EACA,yCAAA;EACA,yBAAA;EACA,yCAAA;AACA;AAEA;EACA,aAAA;EACA,8BAAA;AACA;AAEA;EACA,cAAA;AACA;AAEA;EACA,eAAA;AACA;AAEA;EACA,YAAA;AAEA;;AAEA;;;;;;;EAOA;AAEA;EACA,UAAA;AACA;AAEA;EACA,UAAA;AACA;AAEA;;EAEA,6BAAA;EACA,qBAAA;AACA;AAEA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,sBAAA;EACA,YAAA;EACA,YAAA;AACA;AAEA;EACA,wBAAA;EACA,mCAAA;AACA;AAEA;EACA,mBAAA;AACA;AAEA;EACA,aAAA;AACA;AAEA;EACA,iBAAA;EACA,gBAAA;AACA;AAEA;EACA,eAAA;AACA","file":"ScreenCaptureModal.vue","sourcesContent":["<template>\r\n  <div class=\"modal-mask\">\r\n    <div class=\"modal-wrapper\">\r\n      <div class=\"modal-container\">\r\n        <div class=\"modal-header\">\r\n            <h3>\r\n              Please enter screen comment\r\n            </h3>\r\n            <div class=\"close\" @click=\"$emit('close')\">\r\n              <strong>x</strong>\r\n            </div>\r\n        </div>\r\n        <div class=\"modal-body\">\r\n          <form v-on:submit.prevent=\"submit()\">\r\n            <div class=\"form-group\">\r\n              <label for=\"title\">Title</label>\r\n              <input id=\"title\" class=\"input\" type=\"text\" v-model=\"form.title\">\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label for=\"description\">Description</label>\r\n              <textarea class=\"textarea input\"  id=\"description\" v-model=\"form.description\" placeholder=\"Description\"></textarea>\r\n            </div>\r\n            <div class=\"form-group checkbox-input\">\r\n              <label for=\"private\">Private</label>\r\n              <input id=\"private\" type=\"checkbox\" v-model=\"form.private\">\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label>Type</label>\r\n              <div class=\"radio-input\">\r\n                <input type=\"radio\" id=\"bug\" value=\"bug\" v-model=\"form.type\">\r\n                <label for=\"bug\">Bug</label>\r\n              </div>\r\n              <div class=\"radio-input\">\r\n                <input type=\"radio\" id=\"feature\" value=\"feature\" v-model=\"form.type\">\r\n                <label for=\"feature\">Feature</label>\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n        <div class=\"modal-footer\">\r\n          <button type=\"submit\" @click=\"submit\" class=\"modal-default-button\">\r\n            Submit\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport canvasScreenshot  from './canvasScreenshot.js';\r\nexport default {\r\n  data() {\r\n    return {\r\n      form: {\r\n        title: null,\r\n        description: null,\r\n        private: false,\r\n        type: 'bug'\r\n      },\r\n      screenshot: null\r\n    }\r\n  },\r\n  mixins: [canvasScreenshot],\r\n  created() {\r\n    this.takeScreenshot()\r\n  },\r\n  methods: {\r\n    submit() {\r\n      let data = {\r\n        title: this.form.title,\r\n        description: this.form.description,\r\n        private: this.form.private,\r\n        type: this.form.type,\r\n        screenshot: this.screenshot\r\n      }\r\n\r\n      this.$emit('submit', data)\r\n      this.$emit('close')\r\n    },\r\n    async takeScreenshot() {\r\n      console.log(this.$options)\r\n      const el = document.getElementById(this.$options.captureElementId);\r\n\r\n      const options = {\r\n        type: 'dataURL'\r\n      }\r\n      this.screenshot = await this.$html2canvas(el, options);\r\n    },\r\n  }\r\n}\r\n</script>\r\n\r\n<style scoped>\r\n.modal-mask {\r\n  position: fixed;\r\n  z-index: 9998;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 0, 0, 0.5);\r\n  display: table;\r\n  transition: opacity 0.3s ease;\r\n}\r\n\r\n.modal-wrapper {\r\n  display: table-cell;\r\n  vertical-align: middle;\r\n}\r\n\r\n.modal-container {\r\n  width: 400px;\r\n  margin: 0px auto;\r\n  padding: 20px 30px;\r\n  background-color: #fff;\r\n  border-radius: 2px;\r\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);\r\n  transition: all 0.3s ease;\r\n  font-family: Helvetica, Arial, sans-serif;\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n}\r\n\r\n.modal-body {\r\n  margin: 20px 0;\r\n}\r\n\r\n.modal-footer {\r\n  padding: 10px 0;\r\n}\r\n\r\n.modal-default-button {\r\n  float: right;\r\n\r\n}\r\n\r\n/*\r\n * The following styles are auto-applied to elements with\r\n * transition=\"modal\" when their visibility is toggled\r\n * by Vue.js.\r\n *\r\n * You can easily play with the modal transition by editing\r\n * these styles.\r\n */\r\n\r\n.modal-enter {\r\n  opacity: 0;\r\n}\r\n\r\n.modal-leave-active {\r\n  opacity: 0;\r\n}\r\n\r\n.modal-enter .modal-container,\r\n.modal-leave-active .modal-container {\r\n  -webkit-transform: scale(1.1);\r\n  transform: scale(1.1);\r\n}\r\n\r\n.form-group {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.input{\r\n  border-radius: 5px;\r\n  background: #fff;\r\n  border: 1px solid #ccc;\r\n  outline:none;\r\n  padding: 6px;\r\n}\r\n\r\n.input:focus{\r\n  border:1px solid #56b4ef;\r\n  box-shadow: 0px 0px 3px 1px #c8def0;\r\n}\r\n\r\n.checkbox-input {\r\n  flex-direction: row;\r\n}\r\n\r\n.radio-input {\r\n  display: flex;\r\n}\r\n\r\n.textarea {\r\n  min-height: 100px;\r\n  resize: vertical;\r\n}\r\n\r\n.close {\r\n  cursor: pointer;\r\n}\r\n\r\n</style>\r\n"]}, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__ = "data-v-9f3af5c2";
+  const __vue_scope_id__ = "data-v-133446f1";
   /* module identifier */
@@ -410,0 +411,0 @@ const __vue_module_identifier__ = undefined;

package.json

 {
   "private": false,
   "name": "energy-manager-screen-capture",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Screen capture tool",
@@ -6,0 +6,0 @@ "main": "./dist/index.js",

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

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

Total package byte prevSize

23414

increased by0.31%

Lines of code

449

increased by0.45%

No dependency changes