@usecsv/vuejs 1.1.10 → 1.1.12

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [1.1.12](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.1.11...v1.1.12) (2022-10-23)
+
+
+### Bug Fixes
+
+* add missing prop ([2fc5d16](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/2fc5d168fdefae6d264e859a84debf29b7ec1922))
+
+## [1.1.11](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.1.10...v1.1.11) (2022-10-23)
+
+
+### Bug Fixes
+
+* update "@usecsv/js", support inline importer modal ([76ae016](https://github.com/layercodedev/usecsv-vuejs-plugin/commit/76ae016a800c544b7901d070cb3520c08c53c832))
+
 ## [1.1.10](https://github.com/layercodedev/usecsv-vuejs-plugin/compare/v1.1.9...v1.1.10) (2022-10-06)
 
 

package/dist/UseCSVButton.esm.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 /*!
- * @usecsv/js v0.7.0
+ * @usecsv/js v0.8.0
  * (c) layercode
  * Released under the MIT License.
  */
@@ -583,20 +583,28 @@ whenDomReady.resume = function (doc) {
 
 // eslint-disable-next-line dot-notation
 var MOUNT_URL = {"MOUNT_URL":"https://app.usecsv.com/importer"}["MOUNT_URL"] ;
-var insertIframe = function (id) {
-    var _a;
-    insertCss_2("\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(id, " class=\"usecsv_container loading\">\n</div>"));
+var insertIframe = function (id, importerDisplay) {
+    var usecsvInlineWrapper = document.getElementById("usecsv-importer-inline-wrapper");
+    var usecsvContainerStyles = importerDisplay === "modal" || !usecsvInlineWrapper
+        ? ".usecsv_container { position: fixed; top: 0px; bottom: 0; right: 0; left: 0; z-index: 100000; }"
+        : "";
+    insertCss_2("\n  ".concat(usecsvContainerStyles, "\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(id, " class=\"usecsv_container loading\"></div>"));
     var iframe = document.createElement("iframe");
     iframe.setAttribute("src", MOUNT_URL);
-    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.appendChild(iframe);
+    var usecsvContainer = document.getElementById(id);
+    usecsvContainer === null || usecsvContainer === void 0 ? void 0 : usecsvContainer.appendChild(iframe);
+    if (importerDisplay === "inline" && usecsvInlineWrapper) {
+        // usecsvInlineWrapper > usecsvContainer > iframe
+        usecsvInlineWrapper === null || usecsvInlineWrapper === void 0 ? void 0 : usecsvInlineWrapper.appendChild(usecsvContainer);
+    }
     return iframe;
 };
 var useCsvPlugin = function (_a) {
-    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit;
+    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit, _b = _a.importerDisplay, importerDisplay = _b === void 0 ? "modal" : _b;
     var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
     return whenDomReady().then(function () {
-        var iframe = insertIframe(id);
+        var iframe = insertIframe(id, importerDisplay);
         var closeIframe = function () {
             var _a;
             (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
@@ -633,7 +641,9 @@ var script = /*#__PURE__*/Vue.extend({
     importerKey: {},
     user: {},
     metadata: {},
-    onData: {}
+    importerDisplay: {},
+    onRecordsInitial: {},
+    onRecordEdit: {}
   },
 
   data() {
@@ -648,7 +658,10 @@ var script = /*#__PURE__*/Vue.extend({
         importerKey: this.importerKey,
         user: this.user,
         metadata: this.metadata,
-        onData: this.onData
+        onData: this.onData,
+        importerDisplay: this.importerDisplay,
+        onRecordsInitial: this.onRecordsInitial,
+        onRecordEdit: this.onRecordEdit
       });
     },
 
@@ -820,8 +833,8 @@ var __vue_staticRenderFns__ = [];
 
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  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}",
+  inject("data-v-1cd610e9_0", {
+    source: "#usecsv-button[data-v-1cd610e9]{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
   });
@@ -829,7 +842,7 @@ const __vue_inject_styles__ = function (inject) {
 /* scoped */
 
 
-const __vue_scope_id__ = "data-v-4807283e";
+const __vue_scope_id__ = "data-v-1cd610e9";
 /* module identifier */
 
 const __vue_module_identifier__ = undefined;

package/dist/UseCSVButton.min.js

@@ -1,6 +1,6 @@
 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.7.0
+ * @usecsv/js v0.8.0
  * (c) layercode
  * Released under the MIT License.
  */
@@ -17,4 +17,4 @@ 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"],R=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)}))};R.resume=function(e){return function(t){return R(e).then((function(){return t}))}};var _=function(e){var t=e.importerKey,n=e.user,o=e.metadata,r=e.onData,s=e.onRecordsInitial,a=e.onRecordEdit,c="usecsv-".concat(Math.round(1e8*Math.random()));return R().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}(c),d=function(){var e;null===(e=document.getElementById(c))||void 0===e||e.remove()},l=$({iframe:e,methods:i(i(i({closeIframe:d},r?{onData:function(e){return r(e,d)}}:{}),s?{onRecordsInitial:s}:{}),a?{onRecordEdit:a}:{})});return l.promise.then((function(e){var r;null===(r=document.getElementById(c))||void 0===r||r.classList.remove("loading"),e.setParams&&e.setParams({importerKey:t,user:n,metadata:o})})),l}))},x=n.default.extend({name:"usecsv-button",props:{importerKey:{},user:{},metadata:{},onData:{}},data:function(){return{hasSlot:!!this.$slots.default}},methods:{openModal:function(){_({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 I="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function M(e){return(e,t)=>function(e,t){const n=I?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===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 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,M,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);
+***************************************************************************** */()}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,p,m,f=c;c.insertCss=f,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"}(p||(p={})),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 C=()=>++b,S=(e,t,n,o,r)=>{const{localName:i,local:s,remote:a,originForSending:c,originForReceiving:p}=t;let f=!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(),f){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=C(),f=t=>{if(t.source!==a||t.data.penpal!==d.Reply||t.data.id!==u)return;if(t.origin!==p)return void r(`${i} received message from origin ${t.origin} which did not match expected origin ${p}`);const c=t.data;r(`${i}: Received ${e}() reply`),s.removeEventListener(m.Message,f);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,f);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),()=>{f=!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 f={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:f}=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:f,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===p.DataCloneError){const t={penpal:d.Reply,id:f,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)}})(f,e,r),s(a),c&&c.forEach((e=>{delete u[e]})),c=o.data.methodNames;const h=S(u,f,c,i,r);return s(h),u}};var E=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 p="null"===o?"*":o,f=((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,p),y=w(n,o,p,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 f(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()}}},$=["interactive","complete"],R=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!==$.indexOf(t.readyState)?o():t.addEventListener("DOMContentLoaded",o)}))};R.resume=function(e){return function(t){return R(e).then((function(){return t}))}};var _=function(e){var t=e.importerKey,n=e.user,o=e.metadata,r=e.onData,s=e.onRecordsInitial,a=e.onRecordEdit,c=e.importerDisplay,d=void 0===c?"modal":c,l="usecsv-".concat(Math.round(1e8*Math.random()));return R().then((function(){var e=function(e,t){var n=document.getElementById("usecsv-importer-inline-wrapper");f("\n  ".concat("modal"!==t&&n?"":".usecsv_container { position: fixed; top: 0px; bottom: 0; right: 0; left: 0; z-index: 100000; }","\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"></div>'));var o=document.createElement("iframe");o.setAttribute("src","https://app.usecsv.com/importer");var r=document.getElementById(e);return null==r||r.appendChild(o),"inline"===t&&n&&(null==n||n.appendChild(r)),o}(l,d),c=function(){var e;null===(e=document.getElementById(l))||void 0===e||e.remove()},u=E({iframe:e,methods:i(i(i({closeIframe:c},r?{onData:function(e){return r(e,c)}}:{}),s?{onRecordsInitial:s}:{}),a?{onRecordEdit:a}:{})});return u.promise.then((function(e){var r;null===(r=document.getElementById(l))||void 0===r||r.classList.remove("loading"),e.setParams&&e.setParams({importerKey:t,user:n,metadata:o})})),u}))},x=n.default.extend({name:"usecsv-button",props:{importerKey:{},user:{},metadata:{},importerDisplay:{},onRecordsInitial:{},onRecordEdit:{}},data:function(){return{hasSlot:!!this.$slots.default}},methods:{openModal:function(){_({importerKey:this.importerKey,user:this.user,metadata:this.metadata,onData:this.onData,importerDisplay:this.importerDisplay,onRecordsInitial:this.onRecordsInitial,onRecordEdit:this.onRecordEdit})},hasScopedSlot:function(){return"normalized"===(this.$scopedSlots.default&&this.$scopedSlots.default.name)}}});function I(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 A="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function M(e){return(e,t)=>function(e,t){const n=A?t.media||"default":e,o=N[n]||(N[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===D&&(D=document.head||document.getElementsByTagName("head")[0]),D.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 D;const N={};var j=I({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-1cd610e9_0",{source:"#usecsv-button[data-v-1cd610e9]{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-1cd610e9",false,undefined,!1,M,void 0,void 0),k=function(){var e=j;return e.install=function(t){t.component("usecsv-button",e)},e}(),O=Object.freeze({__proto__:null,default:k});return Object.entries(O).forEach((function(e){var t=o(e,2),n=t[0],r=t[1];"default"!==n&&(k[n]=r)})),k}(Vue);

package/dist/UseCSVButton.ssr.js

@@ -56,7 +56,7 @@ 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.7.0
+ * @usecsv/js v0.8.0
  * (c) layercode
  * Released under the MIT License.
  */
@@ -638,20 +638,28 @@ whenDomReady.resume = function (doc) {
 
 // eslint-disable-next-line dot-notation
 var MOUNT_URL = {"MOUNT_URL":"https://app.usecsv.com/importer"}["MOUNT_URL"] ;
-var insertIframe = function (id) {
-    var _a;
-    insertCss_2("\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(id, " class=\"usecsv_container loading\">\n</div>"));
+var insertIframe = function (id, importerDisplay) {
+    var usecsvInlineWrapper = document.getElementById("usecsv-importer-inline-wrapper");
+    var usecsvContainerStyles = importerDisplay === "modal" || !usecsvInlineWrapper
+        ? ".usecsv_container { position: fixed; top: 0px; bottom: 0; right: 0; left: 0; z-index: 100000; }"
+        : "";
+    insertCss_2("\n  ".concat(usecsvContainerStyles, "\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(id, " class=\"usecsv_container loading\"></div>"));
     var iframe = document.createElement("iframe");
     iframe.setAttribute("src", MOUNT_URL);
-    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.appendChild(iframe);
+    var usecsvContainer = document.getElementById(id);
+    usecsvContainer === null || usecsvContainer === void 0 ? void 0 : usecsvContainer.appendChild(iframe);
+    if (importerDisplay === "inline" && usecsvInlineWrapper) {
+        // usecsvInlineWrapper > usecsvContainer > iframe
+        usecsvInlineWrapper === null || usecsvInlineWrapper === void 0 ? void 0 : usecsvInlineWrapper.appendChild(usecsvContainer);
+    }
     return iframe;
 };
 var useCsvPlugin = function (_a) {
-    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit;
+    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit, _b = _a.importerDisplay, importerDisplay = _b === void 0 ? "modal" : _b;
     var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
     return whenDomReady().then(function () {
-        var iframe = insertIframe(id);
+        var iframe = insertIframe(id, importerDisplay);
         var closeIframe = function () {
             var _a;
             (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
@@ -687,7 +695,9 @@ var useCsvPlugin = function (_a) {
     importerKey: {},
     user: {},
     metadata: {},
-    onData: {}
+    importerDisplay: {},
+    onRecordsInitial: {},
+    onRecordEdit: {}
   },
   data: function data() {
     return {
@@ -700,7 +710,10 @@ var useCsvPlugin = function (_a) {
         importerKey: this.importerKey,
         user: this.user,
         metadata: this.metadata,
-        onData: this.onData
+        onData: this.onData,
+        importerDisplay: this.importerDisplay,
+        onRecordsInitial: this.onRecordsInitial,
+        onRecordEdit: this.onRecordEdit
       });
     },
     hasScopedSlot: function hasScopedSlot() {
@@ -833,9 +846,9 @@ var __vue_render__ = function __vue_render__() {
 
   return _c('div', {
     staticClass: "usecsv"
-  }, [_vm.hasScopedSlot() ? _vm._ssrNode("<div data-v-4807283e>", "</div>", [_vm._t("default", null, {
+  }, [_vm.hasScopedSlot() ? _vm._ssrNode("<div data-v-1cd610e9>", "</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 () {
+  })], 2) : _vm._ssrNode("<div data-v-1cd610e9>", "</div>", [_vm._ssrNode("<button type=\"button\" id=\"usecsv-button\" data-v-1cd610e9>", "</button>", [_vm._t("default", function () {
     return [_vm._v(" open usecsv ")];
   })], 2)])]);
 };
@@ -845,8 +858,8 @@ var __vue_staticRenderFns__ = [];
 
 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  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}",
+  inject("data-v-1cd610e9_0", {
+    source: "#usecsv-button[data-v-1cd610e9]{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
   });
@@ -854,10 +867,10 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
 /* scoped */
 
 
-var __vue_scope_id__ = "data-v-4807283e";
+var __vue_scope_id__ = "data-v-1cd610e9";
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-4807283e";
+var __vue_module_identifier__ = "data-v-1cd610e9";
 /* functional template */
 
 var __vue_is_functional_template__ = false;

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

@@ -16,5 +16,6 @@ declare const _default: import("vue/types/vue").ExtendedVue<Vue, {
     }>) | undefined;
     onRecordsInitial?: import("@usecsv/js/build/types/lib/types").onRecordsInitialType | undefined;
     onRecordEdit?: import("@usecsv/js/build/types/lib/types").onRecordEditType | undefined;
+    importerDisplay?: "inline" | "modal" | undefined;
 }>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usecsv/vuejs",
-  "version": "1.1.10",
+  "version": "1.1.12",
   "description": "",
   "main": "dist/UseCSVButton.ssr.js",
   "browser": "dist/UseCSVButton.esm.js",
@@ -24,7 +24,7 @@
     "prepublishOnly": "yarn build"
   },
   "dependencies": {
-    "@usecsv/js": "^0.7.0"
+    "@usecsv/js": "^0.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.6",

package/src/UseCSVButton.vue

@@ -2,17 +2,22 @@
 import Vue from "vue";
 import useCsvPlugin from "@usecsv/js";
 
-
 type IUsecsv = Parameters<typeof useCsvPlugin>[0];
 
-
-export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{openModal:()=>void,hasScopedSlot:()=>boolean},any,IUsecsv>({
+export default /*#__PURE__*/ Vue.extend<
+  { hasSlot: boolean },
+  { openModal: () => void; hasScopedSlot: () => boolean },
+  any,
+  IUsecsv
+>({
   name: "usecsv-button", // vue component name
-  props:{
-    importerKey:{},
-    user:{},
-    metadata:{},
-    onData:{}
+  props: {
+    importerKey: {},
+    user: {},
+    metadata: {},
+    importerDisplay: {},
+    onRecordsInitial: {},
+    onRecordEdit: {},
   },
   data() {
     return {
@@ -26,6 +31,9 @@ export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{openModal:()=>void,ha
         user: this.user,
         metadata: this.metadata,
         onData: this.onData,
+        importerDisplay: this.importerDisplay,
+        onRecordsInitial: this.onRecordsInitial,
+        onRecordEdit: this.onRecordEdit,
       });
     },
     hasScopedSlot(): boolean {
@@ -41,7 +49,7 @@ export default /*#__PURE__*/ Vue.extend<{hasSlot:boolean},{openModal:()=>void,ha
 <template>
   <div class="usecsv">
     <div v-if="hasScopedSlot()">
-      <slot :openModal="openModal"/>
+      <slot :openModal="openModal" />
     </div>
     <div v-else>
       <button type="button" id="usecsv-button" @click="openModal">