@usecsv/vuejs 1.0.1 → 1.1.1

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [1.1.1](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.1.0...v1.1.1) (2022-03-07)
+
+
+### Bug Fixes
+
+* dependencies ([2ef2dfd](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/2ef2dfd1279ffb0d4e549c9803943a4c85cf9c4b))
+
+# [1.1.0](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.0.3...v1.1.0) (2022-03-07)
+
+
+### Features
+
+* add onData callback ([4c5830d](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/4c5830debdb8e1d98ec23f7b8c0ec7a8ad4a6bfe))
+
+## [1.0.3](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.0.2...v1.0.3) (2022-02-15)
+
+
+### Bug Fixes
+
+* update props ([a8c47a1](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/a8c47a1d2743ac2ea41c3f590a60080cd92634af))
+
+## [1.0.2](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.0.1...v1.0.2) (2022-02-15)
+
+
+### Bug Fixes
+
+* typo ([a09307d](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/a09307d09ec88c6cac0dbf92274e68e82b8677b9))
+
 ## [1.0.1](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.0.0...v1.0.1) (2022-02-14)
 
 

package/dist/UseCSVButton.esm.js

@@ -1,11 +1,37 @@
 import Vue from 'vue';
 
 /*!
- * @usecsv/js v0.1.0
+ * @usecsv/js v0.2.0
  * (c) layercode
  * Released under the MIT License.
  */
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 var containers = []; // will store container HTMLElement references
 var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
 
@@ -567,18 +593,16 @@ var insertIframe = function (id) {
     return iframe;
 };
 var useCsvPlugin = function (_a) {
-    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata;
+    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData;
     var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
     return whenDomReady().then(function () {
         var iframe = insertIframe(id);
         var iframeConnection = connectToChild({
             iframe: iframe,
-            methods: {
-                closeIframe: function () {
+            methods: __assign({ closeIframe: function () {
                     var _a;
                     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
-                },
-            },
+                } }, (onData ? { onData: onData } : {})),
         });
         iframeConnection.promise.then(function (child) {
             var _a;
@@ -592,6 +616,12 @@ var useCsvPlugin = function (_a) {
 
 var script = /*#__PURE__*/Vue.extend({
   name: "usecsv-button",
+  props: {
+    importerKey: {},
+    user: {},
+    metadata: {},
+    onData: {}
+  },
 
   data() {
     return {
@@ -600,16 +630,16 @@ var script = /*#__PURE__*/Vue.extend({
   },
 
   methods: {
-    onclick() {
+    openModal() {
       useCsvPlugin({
         importerKey: this.importerKey,
-        user: this.importerKey,
-        metadata: this.metadata
+        user: this.user,
+        metadata: this.metadata,
+        onData: this.onData
       });
     },
 
     hasScopedSlot() {
-      console.log(this.$scopedSlots.default && this.$scopedSlots.default.name);
       return (this.$scopedSlots.default && this.$scopedSlots.default.name) === "normalized";
     }
 
@@ -758,14 +788,14 @@ var __vue_render__ = function () {
   return _c('div', {
     staticClass: "usecsv"
   }, [_vm.hasScopedSlot() ? _c('div', [_vm._t("default", null, {
-    "onclick": _vm.onclick
+    "openModal": _vm.openModal
   })], 2) : _c('div', [_c('button', {
     attrs: {
       "type": "button",
       "id": "usecsv-button"
     },
     on: {
-      "click": _vm.onclick
+      "click": _vm.openModal
     }
   }, [_vm._t("default", function () {
     return [_vm._v(" open usecsv ")];
@@ -777,8 +807,8 @@ var __vue_staticRenderFns__ = [];
 
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-4a1a9ae2_0", {
-    source: "#usecsv-button[data-v-4a1a9ae2]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",
+  inject("data-v-4807283e_0", {
+    source: "#usecsv-button[data-v-4807283e]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",
     map: undefined,
     media: undefined
   });
@@ -786,7 +816,7 @@ const __vue_inject_styles__ = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__ = "data-v-4a1a9ae2";
+const __vue_scope_id__ = "data-v-4807283e";
 /* module identifier */
 
 const __vue_module_identifier__ = undefined;

package/dist/UseCSVButton.min.js

@@ -1,6 +1,20 @@
 var UseCSVButton=function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var o,r,i=[],s=!0,a=!1;try{for(n=n.call(e);!(s=(o=n.next()).done)&&(i.push(o.value),!t||i.length!==t);s=!0);}catch(e){a=!0,r=e}finally{try{s||null==n.return||n.return()}finally{if(a)throw r}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return r(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return r(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}
 /*!
- * @usecsv/js v0.1.0
+ * @usecsv/js v0.2.0
  * (c) layercode
  * Released under the MIT License.
- */()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var i=[],s=[];function a(e,t){if(t=t||{},void 0===e)throw new Error("insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).");var n,o=!0===t.prepend?"prepend":"append",r=void 0!==t.container?t.container:document.querySelector("head"),a=i.indexOf(r);return-1===a&&(a=i.push(r)-1,s[a]={}),void 0!==s[a]&&void 0!==s[a][o]?n=s[a][o]:(n=s[a][o]=function(){var e=document.createElement("style");return e.setAttribute("type","text/css"),e}(),"prepend"===o?r.insertBefore(n,r.childNodes[0]):r.appendChild(n)),65279===e.charCodeAt(0)&&(e=e.substr(1,e.length)),n.styleSheet?n.styleSheet.cssText+=e:n.textContent+=e,n}var c,d,l,u,f,m=a;a.insertCss=m,function(e){e.Call="call",e.Reply="reply",e.Syn="syn",e.SynAck="synAck",e.Ack="ack"}(c||(c={})),function(e){e.Fulfilled="fulfilled",e.Rejected="rejected"}(d||(d={})),function(e){e.ConnectionDestroyed="ConnectionDestroyed",e.ConnectionTimeout="ConnectionTimeout",e.NoIframeSrc="NoIframeSrc"}(l||(l={})),function(e){e.DataCloneError="DataCloneError"}(u||(u={})),function(e){e.Message="message"}(f||(f={}));const p={"http:":"80","https:":"443"},h=/^(https?:)?\/\/([^/:]+)?(:(\d+))?/,v=["file:","data:"];const g=({name:e,message:t,stack:n})=>({name:e,message:t,stack:n});let y=0;var S=()=>++y,b=(e,t,n,o,r)=>{const{localName:i,local:s,remote:a,originForSending:u,originForReceiving:m}=t;let p=!1;r(`${i}: Connecting call sender`);const h=e=>(...t)=>{let n;r(`${i}: Sending ${e}() call`);try{a.closed&&(n=!0)}catch(e){n=!0}if(n&&o(),p){const t=new Error(`Unable to send ${e}() call due to destroyed connection`);throw t.code=l.ConnectionDestroyed,t}return new Promise(((n,o)=>{const l=S(),p=t=>{if(t.source!==a||t.data.penpal!==c.Reply||t.data.id!==l)return;if(t.origin!==m)return void r(`${i} received message from origin ${t.origin} which did not match expected origin ${m}`);const u=t.data;r(`${i}: Received ${e}() reply`),s.removeEventListener(f.Message,p);let h=u.returnValue;u.returnValueIsError&&(h=(e=>{const t=new Error;return Object.keys(e).forEach((n=>t[n]=e[n])),t})(h)),(u.resolution===d.Fulfilled?n:o)(h)};s.addEventListener(f.Message,p);const h={penpal:c.Call,id:l,methodName:e,args:t};a.postMessage(h,u)}))};return n.reduce(((e,t)=>(e[t]=h(t),e)),e),()=>{p=!0}},C=(e,t,n,o,r)=>{const{destroy:i,onDestroy:s}=o;let a,l;const m={};return o=>{if(o.origin!==t)return void r(`Parent: Handshake - Received ACK message from origin ${o.origin} which did not match expected origin ${t}`);r("Parent: Handshake - Received ACK");const p={localName:"Parent",local:window,remote:o.source,originForSending:n,originForReceiving:t};a&&a(),a=((e,t,n)=>{const{localName:o,local:r,remote:i,originForSending:s,originForReceiving:a}=e;let l=!1;const m=e=>{if(e.source!==i||e.data.penpal!==c.Call)return;if(e.origin!==a)return void n(`${o} received message from origin ${e.origin} which did not match expected origin ${a}`);const r=e.data,{methodName:f,args:m,id:p}=r;n(`${o}: Received ${f}() call`);const h=e=>t=>{if(n(`${o}: Sending ${f}() reply`),l)return void n(`${o}: Unable to send ${f}() reply due to destroyed connection`);const r={penpal:c.Reply,id:p,resolution:e,returnValue:t};e===d.Rejected&&t instanceof Error&&(r.returnValue=g(t),r.returnValueIsError=!0);try{i.postMessage(r,s)}catch(e){if(e.name===u.DataCloneError){const t={penpal:c.Reply,id:p,resolution:d.Rejected,returnValue:g(e),returnValueIsError:!0};i.postMessage(t,s)}throw e}};new Promise((e=>e(t[f].apply(t,m)))).then(h(d.Fulfilled),h(d.Rejected))};return r.addEventListener(f.Message,m),()=>{l=!0,r.removeEventListener(f.Message,m)}})(p,e,r),s(a),l&&l.forEach((e=>{delete m[e]})),l=o.data.methodNames;const h=b(m,p,l,i,r);return s(h),m}};var $=e=>{let{iframe:t,methods:n={},childOrigin:o,timeout:r,debug:i=!1}=e;const s=(e=>(...t)=>{e&&console.log("[Penpal]",...t)})(i),a=((e,t)=>{const n=[];let o=!1;return{destroy(r){o||(o=!0,t(`${e}: Destroying connection`),n.forEach((e=>{e(r)})))},onDestroy(e){o?e():n.push(e)}}})("Parent",s),{onDestroy:d,destroy:u}=a;o||((e=>{if(!e.src&&!e.srcdoc){const e=new Error("Iframe must have src or srcdoc property defined.");throw e.code=l.NoIframeSrc,e}})(t),o=(e=>{if(e&&v.find((t=>e.startsWith(t))))return"null";const t=document.location,n=h.exec(e);let o,r,i;return n?(o=n[1]?n[1]:t.protocol,r=n[2],i=n[4]):(o=t.protocol,r=t.hostname,i=t.port),`${o}//${r}${i&&i!==p[o]?`:${i}`:""}`})(t.src));const m="null"===o?"*":o,g=((e,t,n,o)=>r=>{if(r.origin!==n)return void e(`Parent: Handshake - Received SYN message from origin ${r.origin} which did not match expected origin ${n}`);e("Parent: Handshake - Received SYN, responding with SYN-ACK");const i={penpal:c.SynAck,methodNames:Object.keys(t)};r.source.postMessage(i,o)})(s,n,o,m),y=C(n,o,m,a,s),S=new Promise(((e,n)=>{const o=((e,t)=>{let n;return void 0!==e&&(n=window.setTimeout((()=>{const n=new Error(`Connection timed out after ${e}ms`);n.code=l.ConnectionTimeout,t(n)}),e)),()=>{clearTimeout(n)}})(r,u),i=n=>{if(n.source===t.contentWindow&&n.data)if(n.data.penpal!==c.Syn)if(n.data.penpal!==c.Ack);else{const t=y(n);t&&(o(),e(t))}else g(n)};window.addEventListener(f.Message,i),s("Parent: Awaiting handshake"),((e,t)=>{const{destroy:n,onDestroy:o}=t,r=setInterval((()=>{e.isConnected||(clearInterval(r),n())}),6e4);o((()=>{clearInterval(r)}))})(t,a),d((e=>{window.removeEventListener(f.Message,i),e&&n(e)}))}));return{promise:S,destroy(){u()}}},w=["interactive","complete"],E=function(e,t){return new Promise((function(n){e&&"function"!=typeof e&&(t=e,e=null),t=t||window.document;var o=function(){return n(void(e&&setTimeout(e)))};-1!==w.indexOf(t.readyState)?o():t.addEventListener("DOMContentLoaded",o)}))};E.resume=function(e){return function(t){return E(e).then((function(){return t}))}};var _=function(e){var t=e.importerKey,n=e.user,o=e.metadata,r="usecsv-".concat(Math.round(1e8*Math.random()));return E().then((function(){var e=function(e){var t;m("\n  .usecsv_container {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 100000;\n  }\n  .usecsv_container iframe {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    border-width: 0;\n  }\n  .usecsv_container {\n    overflow: hidden;\n    overscroll-behavior-x: none;\n  }\n"),document.body.insertAdjacentHTML("beforeend","<div id=".concat(e,' class="usecsv_container loading">\n</div>'));var n=document.createElement("iframe");return n.setAttribute("src","https://app.usecsv.com/importer"),null===(t=document.getElementById(e))||void 0===t||t.appendChild(n),n}(r),i=$({iframe:e,methods:{closeIframe:function(){var e;null===(e=document.getElementById(r))||void 0===e||e.remove()}}});return i.promise.then((function(e){var i;null===(i=document.getElementById(r))||void 0===i||i.classList.remove("loading"),e.setParams&&e.setParams({importerKey:t,user:n,metadata:o})})),i}))},R=n.default.extend({name:"usecsv-button",data:function(){return{hasSlot:!!this.$slots.default}},methods:{onclick:function(){_({importerKey:this.importerKey,user:this.importerKey,metadata:this.metadata})},hasScopedSlot:function(){return console.log(this.$scopedSlots.default&&this.$scopedSlots.default.name),"normalized"===(this.$scopedSlots.default&&this.$scopedSlots.default.name)}}});function x(e,t,n,o,r,i,s,a,c,d){"boolean"!=typeof s&&(c=a,a=s,s=!1);const l="function"==typeof n?n.options:n;let u;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,r&&(l.functional=!0)),o&&(l._scopeId=o),i?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=u):t&&(u=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),u)if(l.functional){const e=l.render;l.render=function(t,n){return u.call(n),e(t,n)}}else{const e=l.beforeCreate;l.beforeCreate=e?[].concat(e,u):[u]}return n}const k="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function A(e){return(e,t)=>function(e,t){const n=k?t.media||"default":e,o=I[n]||(I[n]={ids:new Set,styles:[]});if(!o.ids.has(e)){o.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",t.media&&o.element.setAttribute("media",t.media),void 0===N&&(N=document.head||document.getElementsByTagName("head")[0]),N.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const e=o.ids.size-1,t=document.createTextNode(n),r=o.element.childNodes;r[e]&&o.element.removeChild(r[e]),r.length?o.element.insertBefore(t,r[e]):o.element.appendChild(t)}}}(e,t)}let N;const I={};var M=x({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"usecsv"},[e.hasScopedSlot()?n("div",[e._t("default",null,{onclick:e.onclick})],2):n("div",[n("button",{attrs:{type:"button",id:"usecsv-button"},on:{click:e.onclick}},[e._t("default",(function(){return[e._v(" open usecsv ")]}))],2)])])},staticRenderFns:[]},(function(e){e&&e("data-v-4a1a9ae2_0",{source:"#usecsv-button[data-v-4a1a9ae2]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",map:void 0,media:void 0})}),R,"data-v-4a1a9ae2",false,undefined,!1,A,void 0,void 0),j=function(){var e=M;return e.install=function(t){t.component("usecsv-button",e)},e}(),T=Object.freeze({__proto__:null,default:j});return Object.entries(T).forEach((function(e){var t=o(e,2),n=t[0],r=t[1];"default"!==n&&(j[n]=r)})),j}(Vue);
+ */
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */()}function r(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var i=function(){return i=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},i.apply(this,arguments)},s=[],a=[];function c(e,t){if(t=t||{},void 0===e)throw new Error("insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).");var n,o=!0===t.prepend?"prepend":"append",r=void 0!==t.container?t.container:document.querySelector("head"),i=s.indexOf(r);return-1===i&&(i=s.push(r)-1,a[i]={}),void 0!==a[i]&&void 0!==a[i][o]?n=a[i][o]:(n=a[i][o]=function(){var e=document.createElement("style");return e.setAttribute("type","text/css"),e}(),"prepend"===o?r.insertBefore(n,r.childNodes[0]):r.appendChild(n)),65279===e.charCodeAt(0)&&(e=e.substr(1,e.length)),n.styleSheet?n.styleSheet.cssText+=e:n.textContent+=e,n}var d,l,u,f,m,p=c;c.insertCss=p,function(e){e.Call="call",e.Reply="reply",e.Syn="syn",e.SynAck="synAck",e.Ack="ack"}(d||(d={})),function(e){e.Fulfilled="fulfilled",e.Rejected="rejected"}(l||(l={})),function(e){e.ConnectionDestroyed="ConnectionDestroyed",e.ConnectionTimeout="ConnectionTimeout",e.NoIframeSrc="NoIframeSrc"}(u||(u={})),function(e){e.DataCloneError="DataCloneError"}(f||(f={})),function(e){e.Message="message"}(m||(m={}));const h={"http:":"80","https:":"443"},v=/^(https?:)?\/\/([^/:]+)?(:(\d+))?/,g=["file:","data:"];const y=({name:e,message:t,stack:n})=>({name:e,message:t,stack:n});let b=0;var S=()=>++b,C=(e,t,n,o,r)=>{const{localName:i,local:s,remote:a,originForSending:c,originForReceiving:f}=t;let p=!1;r(`${i}: Connecting call sender`);const h=e=>(...t)=>{let n;r(`${i}: Sending ${e}() call`);try{a.closed&&(n=!0)}catch(e){n=!0}if(n&&o(),p){const t=new Error(`Unable to send ${e}() call due to destroyed connection`);throw t.code=u.ConnectionDestroyed,t}return new Promise(((n,o)=>{const u=S(),p=t=>{if(t.source!==a||t.data.penpal!==d.Reply||t.data.id!==u)return;if(t.origin!==f)return void r(`${i} received message from origin ${t.origin} which did not match expected origin ${f}`);const c=t.data;r(`${i}: Received ${e}() reply`),s.removeEventListener(m.Message,p);let h=c.returnValue;c.returnValueIsError&&(h=(e=>{const t=new Error;return Object.keys(e).forEach((n=>t[n]=e[n])),t})(h)),(c.resolution===l.Fulfilled?n:o)(h)};s.addEventListener(m.Message,p);const h={penpal:d.Call,id:u,methodName:e,args:t};a.postMessage(h,c)}))};return n.reduce(((e,t)=>(e[t]=h(t),e)),e),()=>{p=!0}},w=(e,t,n,o,r)=>{const{destroy:i,onDestroy:s}=o;let a,c;const u={};return o=>{if(o.origin!==t)return void r(`Parent: Handshake - Received ACK message from origin ${o.origin} which did not match expected origin ${t}`);r("Parent: Handshake - Received ACK");const p={localName:"Parent",local:window,remote:o.source,originForSending:n,originForReceiving:t};a&&a(),a=((e,t,n)=>{const{localName:o,local:r,remote:i,originForSending:s,originForReceiving:a}=e;let c=!1;const u=e=>{if(e.source!==i||e.data.penpal!==d.Call)return;if(e.origin!==a)return void n(`${o} received message from origin ${e.origin} which did not match expected origin ${a}`);const r=e.data,{methodName:u,args:m,id:p}=r;n(`${o}: Received ${u}() call`);const h=e=>t=>{if(n(`${o}: Sending ${u}() reply`),c)return void n(`${o}: Unable to send ${u}() reply due to destroyed connection`);const r={penpal:d.Reply,id:p,resolution:e,returnValue:t};e===l.Rejected&&t instanceof Error&&(r.returnValue=y(t),r.returnValueIsError=!0);try{i.postMessage(r,s)}catch(e){if(e.name===f.DataCloneError){const t={penpal:d.Reply,id:p,resolution:l.Rejected,returnValue:y(e),returnValueIsError:!0};i.postMessage(t,s)}throw e}};new Promise((e=>e(t[u].apply(t,m)))).then(h(l.Fulfilled),h(l.Rejected))};return r.addEventListener(m.Message,u),()=>{c=!0,r.removeEventListener(m.Message,u)}})(p,e,r),s(a),c&&c.forEach((e=>{delete u[e]})),c=o.data.methodNames;const h=C(u,p,c,i,r);return s(h),u}};var $=e=>{let{iframe:t,methods:n={},childOrigin:o,timeout:r,debug:i=!1}=e;const s=(e=>(...t)=>{e&&console.log("[Penpal]",...t)})(i),a=((e,t)=>{const n=[];let o=!1;return{destroy(r){o||(o=!0,t(`${e}: Destroying connection`),n.forEach((e=>{e(r)})))},onDestroy(e){o?e():n.push(e)}}})("Parent",s),{onDestroy:c,destroy:l}=a;o||((e=>{if(!e.src&&!e.srcdoc){const e=new Error("Iframe must have src or srcdoc property defined.");throw e.code=u.NoIframeSrc,e}})(t),o=(e=>{if(e&&g.find((t=>e.startsWith(t))))return"null";const t=document.location,n=v.exec(e);let o,r,i;return n?(o=n[1]?n[1]:t.protocol,r=n[2],i=n[4]):(o=t.protocol,r=t.hostname,i=t.port),`${o}//${r}${i&&i!==h[o]?`:${i}`:""}`})(t.src));const f="null"===o?"*":o,p=((e,t,n,o)=>r=>{if(r.origin!==n)return void e(`Parent: Handshake - Received SYN message from origin ${r.origin} which did not match expected origin ${n}`);e("Parent: Handshake - Received SYN, responding with SYN-ACK");const i={penpal:d.SynAck,methodNames:Object.keys(t)};r.source.postMessage(i,o)})(s,n,o,f),y=w(n,o,f,a,s),b=new Promise(((e,n)=>{const o=((e,t)=>{let n;return void 0!==e&&(n=window.setTimeout((()=>{const n=new Error(`Connection timed out after ${e}ms`);n.code=u.ConnectionTimeout,t(n)}),e)),()=>{clearTimeout(n)}})(r,l),i=n=>{if(n.source===t.contentWindow&&n.data)if(n.data.penpal!==d.Syn)if(n.data.penpal!==d.Ack);else{const t=y(n);t&&(o(),e(t))}else p(n)};window.addEventListener(m.Message,i),s("Parent: Awaiting handshake"),((e,t)=>{const{destroy:n,onDestroy:o}=t,r=setInterval((()=>{e.isConnected||(clearInterval(r),n())}),6e4);o((()=>{clearInterval(r)}))})(t,a),c((e=>{window.removeEventListener(m.Message,i),e&&n(e)}))}));return{promise:b,destroy(){l()}}},E=["interactive","complete"],_=function(e,t){return new Promise((function(n){e&&"function"!=typeof e&&(t=e,e=null),t=t||window.document;var o=function(){return n(void(e&&setTimeout(e)))};-1!==E.indexOf(t.readyState)?o():t.addEventListener("DOMContentLoaded",o)}))};_.resume=function(e){return function(t){return _(e).then((function(){return t}))}};var R=function(e){var t=e.importerKey,n=e.user,o=e.metadata,r=e.onData,s="usecsv-".concat(Math.round(1e8*Math.random()));return _().then((function(){var e=function(e){var t;p("\n  .usecsv_container {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 100000;\n  }\n  .usecsv_container iframe {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    border-width: 0;\n  }\n  .usecsv_container {\n    overflow: hidden;\n    overscroll-behavior-x: none;\n  }\n"),document.body.insertAdjacentHTML("beforeend","<div id=".concat(e,' class="usecsv_container loading">\n</div>'));var n=document.createElement("iframe");return n.setAttribute("src","https://app.usecsv.com/importer"),null===(t=document.getElementById(e))||void 0===t||t.appendChild(n),n}(s),a=$({iframe:e,methods:i({closeIframe:function(){var e;null===(e=document.getElementById(s))||void 0===e||e.remove()}},r?{onData:r}:{})});return a.promise.then((function(e){var r;null===(r=document.getElementById(s))||void 0===r||r.classList.remove("loading"),e.setParams&&e.setParams({importerKey:t,user:n,metadata:o})})),a}))},x=n.default.extend({name:"usecsv-button",props:{importerKey:{},user:{},metadata:{},onData:{}},data:function(){return{hasSlot:!!this.$slots.default}},methods:{openModal:function(){R({importerKey:this.importerKey,user:this.user,metadata:this.metadata,onData:this.onData})},hasScopedSlot:function(){return"normalized"===(this.$scopedSlots.default&&this.$scopedSlots.default.name)}}});function A(e,t,n,o,r,i,s,a,c,d){"boolean"!=typeof s&&(c=a,a=s,s=!1);const l="function"==typeof n?n.options:n;let u;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,r&&(l.functional=!0)),o&&(l._scopeId=o),i?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(i)},l._ssrRegister=u):t&&(u=s?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),u)if(l.functional){const e=l.render;l.render=function(t,n){return u.call(n),e(t,n)}}else{const e=l.beforeCreate;l.beforeCreate=e?[].concat(e,u):[u]}return n}const M="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function N(e){return(e,t)=>function(e,t){const n=M?t.media||"default":e,o=j[n]||(j[n]={ids:new Set,styles:[]});if(!o.ids.has(e)){o.ids.add(e);let n=t.source;if(t.map&&(n+="\n/*# sourceURL="+t.map.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t.map))))+" */"),o.element||(o.element=document.createElement("style"),o.element.type="text/css",t.media&&o.element.setAttribute("media",t.media),void 0===I&&(I=document.head||document.getElementsByTagName("head")[0]),I.appendChild(o.element)),"styleSheet"in o.element)o.styles.push(n),o.element.styleSheet.cssText=o.styles.filter(Boolean).join("\n");else{const e=o.ids.size-1,t=document.createTextNode(n),r=o.element.childNodes;r[e]&&o.element.removeChild(r[e]),r.length?o.element.insertBefore(t,r[e]):o.element.appendChild(t)}}}(e,t)}let I;const j={};var k=A({render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"usecsv"},[e.hasScopedSlot()?n("div",[e._t("default",null,{openModal:e.openModal})],2):n("div",[n("button",{attrs:{type:"button",id:"usecsv-button"},on:{click:e.openModal}},[e._t("default",(function(){return[e._v(" open usecsv ")]}))],2)])])},staticRenderFns:[]},(function(e){e&&e("data-v-4807283e_0",{source:"#usecsv-button[data-v-4807283e]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",map:void 0,media:void 0})}),x,"data-v-4807283e",false,undefined,!1,N,void 0,void 0),D=function(){var e=k;return e.install=function(t){t.component("usecsv-button",e)},e}(),O=Object.freeze({__proto__:null,default:D});return Object.entries(O).forEach((function(e){var t=o(e,2),n=t[0],r=t[1];"default"!==n&&(D[n]=r)})),D}(Vue);

package/dist/UseCSVButton.ssr.js

@@ -56,11 +56,37 @@ function _arrayLikeToArray(arr, len) {
 function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }/*!
- * @usecsv/js v0.1.0
+ * @usecsv/js v0.2.0
  * (c) layercode
  * Released under the MIT License.
  */
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 var containers = []; // will store container HTMLElement references
 var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
 
@@ -622,18 +648,16 @@ var insertIframe = function (id) {
     return iframe;
 };
 var useCsvPlugin = function (_a) {
-    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata;
+    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData;
     var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
     return whenDomReady().then(function () {
         var iframe = insertIframe(id);
         var iframeConnection = connectToChild({
             iframe: iframe,
-            methods: {
-                closeIframe: function () {
+            methods: __assign({ closeIframe: function () {
                     var _a;
                     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
-                },
-            },
+                } }, (onData ? { onData: onData } : {})),
         });
         iframeConnection.promise.then(function (child) {
             var _a;
@@ -646,21 +670,27 @@ var useCsvPlugin = function (_a) {
 };var script = /*#__PURE__*/Vue__default["default"].extend({
   name: "usecsv-button",
   // vue component name
+  props: {
+    importerKey: {},
+    user: {},
+    metadata: {},
+    onData: {}
+  },
   data: function data() {
     return {
       hasSlot: !!this.$slots.default
     };
   },
   methods: {
-    onclick: function onclick() {
+    openModal: function openModal() {
       useCsvPlugin({
         importerKey: this.importerKey,
-        user: this.importerKey,
-        metadata: this.metadata
+        user: this.user,
+        metadata: this.metadata,
+        onData: this.onData
       });
     },
     hasScopedSlot: function hasScopedSlot() {
-      console.log(this.$scopedSlots.default && this.$scopedSlots.default.name);
       return (this.$scopedSlots.default && this.$scopedSlots.default.name) === "normalized";
     }
   }
@@ -790,9 +820,9 @@ var __vue_render__ = function __vue_render__() {
 
   return _c('div', {
     staticClass: "usecsv"
-  }, [_vm.hasScopedSlot() ? _vm._ssrNode("<div data-v-4a1a9ae2>", "</div>", [_vm._t("default", null, {
-    "onclick": _vm.onclick
-  })], 2) : _vm._ssrNode("<div data-v-4a1a9ae2>", "</div>", [_vm._ssrNode("<button type=\"button\" id=\"usecsv-button\" data-v-4a1a9ae2>", "</button>", [_vm._t("default", function () {
+  }, [_vm.hasScopedSlot() ? _vm._ssrNode("<div data-v-4807283e>", "</div>", [_vm._t("default", null, {
+    "openModal": _vm.openModal
+  })], 2) : _vm._ssrNode("<div data-v-4807283e>", "</div>", [_vm._ssrNode("<button type=\"button\" id=\"usecsv-button\" data-v-4807283e>", "</button>", [_vm._t("default", function () {
     return [_vm._v(" open usecsv ")];
   })], 2)])]);
 };
@@ -802,8 +832,8 @@ var __vue_staticRenderFns__ = [];
 
 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-4a1a9ae2_0", {
-    source: "#usecsv-button[data-v-4a1a9ae2]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",
+  inject("data-v-4807283e_0", {
+    source: "#usecsv-button[data-v-4807283e]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",
     map: undefined,
     media: undefined
   });
@@ -811,10 +841,10 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__ = "data-v-4a1a9ae2";
+var __vue_scope_id__ = "data-v-4807283e";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-4a1a9ae2";
+var __vue_module_identifier__ = "data-v-4807283e";
 /* functional template */
 
 var __vue_is_functional_template__ = false;

package/dist/types/src/UseCSVButton.vue.d.ts

@@ -1,16 +1,18 @@
 import Vue from "vue";
-declare type UserObject = {
-    readonly userId: string;
-};
-interface IUsecsv {
-    importerKey: string;
-    user?: UserObject;
-    metadata: Record<string, string | number> | undefined;
-}
 declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
     hasSlot: boolean;
 }, {
-    onclick: () => void;
+    openModal: () => void;
     hasScopedSlot: () => boolean;
-}, any, IUsecsv>;
+}, any, {
+    readonly importerKey: string;
+    readonly user?: {
+        readonly userId: string;
+    } | undefined;
+    readonly metadata?: Record<string, string | number> | undefined;
+    readonly onData?: ((data: {
+        readonly uploadId: number;
+        readonly rows: readonly Record<string, string | number>[];
+    }) => void) | undefined;
+}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecsv/vuejs",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "",
   "main": "dist/UseCSVButton.ssr.js",
   "browser": "dist/UseCSVButton.esm.js",
@@ -13,7 +13,7 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "serve": "vue-cli-service help",
+    "serve": "vue-cli-service serve dev/serve.ts",
     "lint": "eslint src --ext .ts,.vue",
     "prebuild": "rimraf ./dist",
     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
@@ -24,13 +24,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@semantic-release/changelog": "^6.0.1",
-    "@semantic-release/commit-analyzer": "^9.0.2",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.2",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@usecsv/js": "^0.1.0",
-    "semantic-release": "^19.0.2"
+    "@usecsv/js": "0.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",
@@ -42,6 +36,11 @@
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-replace": "^2.4.2",
     "@rushstack/eslint-patch": "^1.1.0",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/commit-analyzer": "^9.0.2",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.2",
+    "@semantic-release/release-notes-generator": "^10.0.3",
     "@vue/cli-plugin-babel": "^4.5.15",
     "@vue/cli-plugin-typescript": "^4.5.15",
     "@vue/cli-service": "^4.5.15",
@@ -56,6 +55,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
     "rollup-plugin-vue": "^5.1.9",
+    "semantic-release": "^19.0.2",
     "ttypescript": "^1.5.12",
     "typescript": "^4.0.3",
     "vue": "^2.6.14",

package/src/UseCSVButton.vue

@@ -2,32 +2,33 @@
 import Vue from "vue";
 import useCsvPlugin from "@usecsv/js";
 
-type UserObject = {
-  readonly userId: string;
-};
-interface IUsecsv {
-  importerKey: string;
-  user?: UserObject;
-  metadata: Record<string, string | number> | undefined;
-}
 
-export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{onclick:()=>void,hasScopedSlot:()=>boolean},any,IUsecsv>({
+type IUsecsv = Parameters<typeof useCsvPlugin>[0];
+
+
+export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{openModal:()=>void,hasScopedSlot:()=>boolean},any,IUsecsv>({
   name: "usecsv-button", // vue component name
+  props:{
+    importerKey:{},
+    user:{},
+    metadata:{},
+    onData:{}
+  },
   data() {
     return {
       hasSlot: !!this.$slots.default,
     };
   },
   methods: {
-    onclick(): void {
+    openModal(): void {
       useCsvPlugin({
         importerKey: this.importerKey,
-        user: this.importerKey,
+        user: this.user,
         metadata: this.metadata,
+        onData: this.onData,
       });
     },
     hasScopedSlot(): boolean {
-      console.log(this.$scopedSlots.default && this.$scopedSlots.default.name);
       return (
         (this.$scopedSlots.default && this.$scopedSlots.default.name) ===
         "normalized"
@@ -40,10 +41,10 @@ export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{onclick:()=>void,hasS
 <template>
   <div class="usecsv">
     <div v-if="hasScopedSlot()">
-      <slot :onclick="onclick"/>
+      <slot :openModal="openModal"/>
     </div>
     <div v-else>
-      <button type="button" id="usecsv-button" @click="onclick">
+      <button type="button" id="usecsv-button" @click="openModal">
         <slot> open usecsv </slot>
       </button>
     </div>