@usecsv/vuejs 1.1.10 → 1.1.11

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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();

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.")}
+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=[],a=!0,s=!1;try{for(n=n.call(e);!(a=(o=n.next()).done)&&(i.push(o.value),!t||i.length!==t);a=!0);}catch(e){s=!0,r=e}finally{try{a||null==n.return||n.return()}finally{if(s)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)},a=[],s=[];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=a.indexOf(r);return-1===i&&(i=a.push(r)-1,s[i]={}),void 0!==s[i]&&void 0!==s[i][o]?n=s[i][o]:(n=s[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,m,f,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"}(m||(m={})),function(e){e.Message="message"}(f||(f={}));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:a,remote:s,originForSending:c,originForReceiving:m}=t;let p=!1;r(`${i}: Connecting call sender`);const h=e=>(...t)=>{let n;r(`${i}: Sending ${e}() call`);try{s.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=C(),p=t=>{if(t.source!==s||t.data.penpal!==d.Reply||t.data.id!==u)return;if(t.origin!==m)return void r(`${i} received message from origin ${t.origin} which did not match expected origin ${m}`);const c=t.data;r(`${i}: Received ${e}() reply`),a.removeEventListener(f.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)};a.addEventListener(f.Message,p);const h={penpal:d.Call,id:u,methodName:e,args:t};s.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:a}=o;let s,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};s&&s(),s=((e,t,n)=>{const{localName:o,local:r,remote:i,originForSending:a,originForReceiving:s}=e;let c=!1;const u=e=>{if(e.source!==i||e.data.penpal!==d.Call)return;if(e.origin!==s)return void n(`${o} received message from origin ${e.origin} which did not match expected origin ${s}`);const r=e.data,{methodName:u,args:f,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,a)}catch(e){if(e.name===m.DataCloneError){const t={penpal:d.Reply,id:p,resolution:l.Rejected,returnValue:y(e),returnValueIsError:!0};i.postMessage(t,a)}throw e}};new Promise((e=>e(t[u].apply(t,f)))).then(h(l.Fulfilled),h(l.Rejected))};return r.addEventListener(f.Message,u),()=>{c=!0,r.removeEventListener(f.Message,u)}})(p,e,r),a(s),c&&c.forEach((e=>{delete u[e]})),c=o.data.methodNames;const h=S(u,p,c,i,r);return a(h),u}};var E=e=>{let{iframe:t,methods:n={},childOrigin:o,timeout:r,debug:i=!1}=e;const a=(e=>(...t)=>{e&&console.log("[Penpal]",...t)})(i),s=((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",a),{onDestroy:c,destroy:l}=s;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 m="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)})(a,n,o,m),y=w(n,o,m,s,a),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(f.Message,i),a("Parent: Awaiting handshake"),((e,t)=>{const{destroy:n,onDestroy:o}=t,r=setInterval((()=>{e.isConnected||(clearInterval(r),n())}),6e4);o((()=>{clearInterval(r)}))})(t,s),c((e=>{window.removeEventListener(f.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,a=e.onRecordsInitial,s=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");p("\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)}}:{}),a?{onRecordsInitial:a}:{}),s?{onRecordEdit:s}:{})});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:{},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 I(e,t,n,o,r,i,a,s,c,d){"boolean"!=typeof a&&(c=s,s=a,a=!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=a?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(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=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 D=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-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),k=function(){var e=D;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();

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.11",
   "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",