@bluepic/embed 0.1.66 → 0.1.67

package/lib/bluepic-embed.es.js

@@ -100054,9 +100054,20 @@ class BluepicEmbed extends EventTarget {
       #${c} .fade-spinner-leave-to {
         opacity: 0;
       }
+      #${c} {
+        > div {
+          border: 1px solid var(--bluepic-app-border-color);
+          overflow: hidden;
+          border-radius: var(--bluepic-app-border-radius);
+          margin: 30px auto;
+          box-sizing: border-box;
+          max-width: calc(100vw - 40px);
+          max-height: calc(100vh - 40px);
+        }
+      }
     `, document.head.appendChild(ie), this.element.innerHTML = `
-        <div id="${c}" class="bluepic-app-wrapper" style="height: 100%; position: relative;">
-            <div v-if="templateId" style="height: 100%;">
+        <div id="${c}" class="bluepic-app-wrapper" style="position: relative;" :style="">
+            <div v-if="templateId" :style="{ height: embedProject?.config.layout === 'stack' ? 'auto' : 'calc(100% - 40px)', '--bluepic-app-border-color': borderColor, '--bluepic-app-border-radius': borderRadius }">
               <bluepic-embedded-editor
                 v-if="templateId"
                 ref="editorRef"
@@ -100123,9 +100134,10 @@ class BluepicEmbed extends EventTarget {
               const Ze = Color(Me?.config.backgroundColor).isDark();
               we.bxThemeStyleVars = useTheme(`#${c}`, Ze), we.bxThemeStyleVars.value["editor-view-background-color"] = Me?.config.backgroundColor;
             }
-          }), {
+          }), console.log(we.embedProject.value?.config.layout === "stack"), {
             bridge: $e,
             editorRef: we.editorRef,
+            embedProject: we.embedProject,
             allowPanAndZoom: we.allowPanAndZoom,
             templateId: we.templateId,
             studioResourcesBaseUrl: we.studioResourcesBaseUrl,
@@ -100135,7 +100147,14 @@ class BluepicEmbed extends EventTarget {
             ready: we.ready,
             displayMode: we.displayMode,
             bxCoreVersion: we.bxCoreVersion,
-            publishedSlug: we.publishedSlug
+            publishedSlug: we.publishedSlug,
+            bxThemeStyleVars: we.bxThemeStyleVars,
+            darkmode: computed(() => Color(we.bxThemeStyleVars.value["editor-view-background-color"]).isDark()),
+            borderRadius: computed(() => (we.embedProject.value?.config.layout === "stack", "10px")),
+            borderColor: computed(() => {
+              const Me = Color(we.bxThemeStyleVars.value["editor-view-background-color"]);
+              return Me.isDark() ? Me.lighten(0.8).hex() : Me.darken(0.1).hex();
+            })
           };
         }
       }).mount(`#${c}`);

package/lib/bluepic-embed.umd.js

@@ -2941,9 +2941,20 @@ list should be an Array.`),ri.length===0)return new Nr(0);if(ri.length===1)retur
       #${c} .fade-spinner-leave-to {
         opacity: 0;
       }
+      #${c} {
+        > div {
+          border: 1px solid var(--bluepic-app-border-color);
+          overflow: hidden;
+          border-radius: var(--bluepic-app-border-radius);
+          margin: 30px auto;
+          box-sizing: border-box;
+          max-width: calc(100vw - 40px);
+          max-height: calc(100vh - 40px);
+        }
+      }
     `,document.head.appendChild(ie),this.element.innerHTML=`
-        <div id="${c}" class="bluepic-app-wrapper" style="height: 100%; position: relative;">
-            <div v-if="templateId" style="height: 100%;">
+        <div id="${c}" class="bluepic-app-wrapper" style="position: relative;" :style="">
+            <div v-if="templateId" :style="{ height: embedProject?.config.layout === 'stack' ? 'auto' : 'calc(100% - 40px)', '--bluepic-app-border-color': borderColor, '--bluepic-app-border-radius': borderRadius }">
               <bluepic-embedded-editor
                 v-if="templateId"
                 ref="editorRef"
@@ -2971,4 +2982,4 @@ list should be an Array.`),ri.length===0)return new Nr(0);if(ri.length===1)retur
             </transition>
 
         </div>
-    `;const we=this;vue.nextTick(()=>{vue.createApp({components:{BluepicEmbeddedEditor,BluepicSpinner},setup(){const Pe={async handleUpload({blob:Me,context:Ze,width:ne,height:rr,name:pr,onProgress:or}){const{variants:_r,filename:kr,id:Ir}=await uploadImage("https://embed-api-v2.bluepic.workers.dev",we.templateId.value,Ze,Me,pr,($r,Nr)=>{or($r/Nr)}),Lr=_r.find($r=>parseCloudflareImagesDeliveryUrl($r).variant==="public");if(!Lr)throw new Error("No public variant");return{width:ne,height:rr,key:Ir,name:kr,src:Lr}}};return vue.watch(we.embedProject,Me=>{if(Me?.config.customStyle)we.bxThemeStyleVars=useTheme(`#${c}`),we.bxThemeStyleVars.value=Me?.config.customStyle;else{const Ze=Color(Me?.config.backgroundColor).isDark();we.bxThemeStyleVars=useTheme(`#${c}`,Ze),we.bxThemeStyleVars.value["editor-view-background-color"]=Me?.config.backgroundColor}}),{bridge:Pe,editorRef:we.editorRef,allowPanAndZoom:we.allowPanAndZoom,templateId:we.templateId,studioResourcesBaseUrl:we.studioResourcesBaseUrl,cloudflarePagesHostname:we.cloudflarePagesHostname,data:we.data,serial:we.serial,ready:we.ready,displayMode:we.displayMode,bxCoreVersion:we.bxCoreVersion,publishedSlug:we.publishedSlug}}}).mount(`#${c}`)})}setVariable(c,ie){this.data.value||(this.data.value={}),this.data.value[c]=ie}setData(c,ie=!1){if(ie)this.data.value=c;else{this.data.value||(this.data.value={});for(const we in c)this.setVariable(we,c[we])}}}async function getProjectWithRetries(m,c,ie,we,Pe){let Me=0;for(;Me<ie;){try{console.log(`\u{1F504} Versuch ${Me+1}/${ie}: Hole Public Config...`);const Ze=await fetch(`https://embed-api-v2.bluepic.workers.dev/api/public/project?${new URLSearchParams({hostname:m,slug:c,env:Pe})}`,{method:"GET"});return console.log(`\u2705 Erfolgreich nach ${Me+1} Versuchen`),await Ze.json()}catch(Ze){if(console.error(`\u274C Fehler bei Versuch ${Me+1}:`,Ze),Me<ie-1)console.log(`\u23F3 Warte ${we}ms vor erneutem Versuch...`),await new Promise(ne=>setTimeout(ne,we));else throw console.error(`\u{1F6A8} Maximalanzahl von ${ie} Versuchen erreicht. Abbruch.`),Ze}Me++}throw new Error("Unbekannter Fehler in getPublicConfigWithRetries")}window.addEventListener("load",async()=>{const m=document.querySelectorAll(".bluepic-embed");console.log("Auto-BluepicEmbed elements",m);for(const c of m){const ie=c.getAttribute("data-embed-project-id"),we=c.getAttribute("data-template-id");c.getAttribute("data-stripe-env");const Pe=c.getAttribute("data-init-data"),Me=c.getAttribute("data-studio-resources-base-url")??void 0,Ze=c.getAttribute("data-cloudflare-pages-hostname")??void 0,ne=c.getAttribute("data-display-mode"),rr=c.getAttribute("data-allow-pan-and-zoom"),pr=c.getAttribute("data-bx-core-version")??void 0,or=c.getAttribute("data-published-slug")??void 0,_r=Pe?JSON.parse(Pe):void 0,kr=rr==="true",Ir=ne==="mobile"?"mobile":ne==="stack"?"stack":"auto",Lr=c.getAttribute("data-branding")==="false",$r=new BluepicEmbed(c,we,ie,{initData:_r,displayMode:Ir,allowPanAndZoom:kr,studioResourcesBaseUrl:Me,cloudflarePagesHostname:Ze,bxCoreVersion:pr,publishedSlug:or,branding:Lr});console.log("!",c,$r)}});const GLOBAL_APP_WRAPPER_CLASS="bluepic-app-wrapper",GLOBAL_APP_WRAPPER_SELECTOR=`.${GLOBAL_APP_WRAPPER_CLASS}`;window.bluepicPopupProvider=new BluepicPopupProvider,exports.AdjustImage=AdjustImage,exports.BluepicBatchEditor=BluepicBatchEditor,exports.BluepicEmbed=BluepicEmbed,exports.BluepicEmbedded=BluepicEmbedded,exports.BluepicEmbeddedEditor=BluepicEmbeddedEditor,exports.BluepicFieldComponents=BluepciFieldComponents,exports.BluepicSpinner=BluepicSpinner,exports.BxAvatar=BxAvatar,exports.BxButton=BxButton,exports.BxCard=BxCard,exports.BxCheckbox=BxCheckbox,exports.BxColorPicker=BxColorPicker,exports.BxDropdown=BxDropdown,exports.BxEmbedThemeDarkmode=BxEmbedThemeDarkmode,exports.BxEmbedThemeLightmode=BxEmbedThemeLightmode,exports.BxFields=_sfc_main$p,exports.BxIcon=BxIcon,exports.BxInput=BxInput,exports.BxList=BxList,exports.BxListItem=BxListItem,exports.BxMenu=BxMenu,exports.BxPopover=BxPopover,exports.BxPopup=_sfc_main$17,exports.BxRadio=BxRadio,exports.BxRadioGroup=BxRadioGroup,exports.BxSelect=BxSelect,exports.BxSlider=BxSlider,exports.BxSpin=BxSpin,exports.BxSwitch=BxSwitch,exports.BxTab=BxTab,exports.BxTabs=BxTabs,exports.BxTag=BxTag,exports.BxTooltip=BxTooltip,exports.BxUserMenu=BxUserMenu,exports.GLOBAL_APP_WRAPPER_CLASS=GLOBAL_APP_WRAPPER_CLASS,exports.GLOBAL_APP_WRAPPER_SELECTOR=GLOBAL_APP_WRAPPER_SELECTOR,exports.MapboxMap=MapboxMap,exports.SlidesNavigation=SlidesNavigation,exports.applyColorMatricesToImage=applyColorMatricesToImage,exports.applyColorMatrix=applyColorMatrix,exports.applyColorMatrixToColor=applyColorMatrixToColor,exports.convertDeprecatedField=convertDeprecatedField,exports.createMessage=createMessage,exports.createPopup=createPopup,exports.cropImage=cropImage,exports.cropToVisibleBBox=cropToVisibleBBox,exports.getDefaultValueForFieldModel=getDefaultValueForFieldModel,exports.getTemplateLiveUrl=getTemplateLiveUrl,exports.getTemplateSerialUrl=getTemplateSerialUrl,exports.getThemeStyle=getThemeStyle,exports.getVisibleBBox=getVisibleBBox,exports.groupFeatureByLinebreaks=groupFeatureByLinebreaks$1,exports.normalizeAdjust=normalizeAdjust,exports.normalizeCrop=normalizeCrop,exports.rasterize=rasterize,exports.realizeField=realizeField,exports.renderFieldIcon=renderFieldIcon,exports.renderSVG=renderSVG,exports.stringifyField=stringifyField,exports.ungroupFeaturesDividedByLinebreaks=ungroupFeaturesDividedByLinebreaks,exports.useTheme=useTheme,exports.waitUntil=waitUntil,Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+    `;const we=this;vue.nextTick(()=>{vue.createApp({components:{BluepicEmbeddedEditor,BluepicSpinner},setup(){const Pe={async handleUpload({blob:Me,context:Ze,width:ne,height:rr,name:pr,onProgress:or}){const{variants:_r,filename:kr,id:Ir}=await uploadImage("https://embed-api-v2.bluepic.workers.dev",we.templateId.value,Ze,Me,pr,($r,Nr)=>{or($r/Nr)}),Lr=_r.find($r=>parseCloudflareImagesDeliveryUrl($r).variant==="public");if(!Lr)throw new Error("No public variant");return{width:ne,height:rr,key:Ir,name:kr,src:Lr}}};return vue.watch(we.embedProject,Me=>{if(Me?.config.customStyle)we.bxThemeStyleVars=useTheme(`#${c}`),we.bxThemeStyleVars.value=Me?.config.customStyle;else{const Ze=Color(Me?.config.backgroundColor).isDark();we.bxThemeStyleVars=useTheme(`#${c}`,Ze),we.bxThemeStyleVars.value["editor-view-background-color"]=Me?.config.backgroundColor}}),console.log(we.embedProject.value?.config.layout==="stack"),{bridge:Pe,editorRef:we.editorRef,embedProject:we.embedProject,allowPanAndZoom:we.allowPanAndZoom,templateId:we.templateId,studioResourcesBaseUrl:we.studioResourcesBaseUrl,cloudflarePagesHostname:we.cloudflarePagesHostname,data:we.data,serial:we.serial,ready:we.ready,displayMode:we.displayMode,bxCoreVersion:we.bxCoreVersion,publishedSlug:we.publishedSlug,bxThemeStyleVars:we.bxThemeStyleVars,darkmode:vue.computed(()=>Color(we.bxThemeStyleVars.value["editor-view-background-color"]).isDark()),borderRadius:vue.computed(()=>(we.embedProject.value?.config.layout==="stack","10px")),borderColor:vue.computed(()=>{const Me=Color(we.bxThemeStyleVars.value["editor-view-background-color"]);return Me.isDark()?Me.lighten(.8).hex():Me.darken(.1).hex()})}}}).mount(`#${c}`)})}setVariable(c,ie){this.data.value||(this.data.value={}),this.data.value[c]=ie}setData(c,ie=!1){if(ie)this.data.value=c;else{this.data.value||(this.data.value={});for(const we in c)this.setVariable(we,c[we])}}}async function getProjectWithRetries(m,c,ie,we,Pe){let Me=0;for(;Me<ie;){try{console.log(`\u{1F504} Versuch ${Me+1}/${ie}: Hole Public Config...`);const Ze=await fetch(`https://embed-api-v2.bluepic.workers.dev/api/public/project?${new URLSearchParams({hostname:m,slug:c,env:Pe})}`,{method:"GET"});return console.log(`\u2705 Erfolgreich nach ${Me+1} Versuchen`),await Ze.json()}catch(Ze){if(console.error(`\u274C Fehler bei Versuch ${Me+1}:`,Ze),Me<ie-1)console.log(`\u23F3 Warte ${we}ms vor erneutem Versuch...`),await new Promise(ne=>setTimeout(ne,we));else throw console.error(`\u{1F6A8} Maximalanzahl von ${ie} Versuchen erreicht. Abbruch.`),Ze}Me++}throw new Error("Unbekannter Fehler in getPublicConfigWithRetries")}window.addEventListener("load",async()=>{const m=document.querySelectorAll(".bluepic-embed");console.log("Auto-BluepicEmbed elements",m);for(const c of m){const ie=c.getAttribute("data-embed-project-id"),we=c.getAttribute("data-template-id");c.getAttribute("data-stripe-env");const Pe=c.getAttribute("data-init-data"),Me=c.getAttribute("data-studio-resources-base-url")??void 0,Ze=c.getAttribute("data-cloudflare-pages-hostname")??void 0,ne=c.getAttribute("data-display-mode"),rr=c.getAttribute("data-allow-pan-and-zoom"),pr=c.getAttribute("data-bx-core-version")??void 0,or=c.getAttribute("data-published-slug")??void 0,_r=Pe?JSON.parse(Pe):void 0,kr=rr==="true",Ir=ne==="mobile"?"mobile":ne==="stack"?"stack":"auto",Lr=c.getAttribute("data-branding")==="false",$r=new BluepicEmbed(c,we,ie,{initData:_r,displayMode:Ir,allowPanAndZoom:kr,studioResourcesBaseUrl:Me,cloudflarePagesHostname:Ze,bxCoreVersion:pr,publishedSlug:or,branding:Lr});console.log("!",c,$r)}});const GLOBAL_APP_WRAPPER_CLASS="bluepic-app-wrapper",GLOBAL_APP_WRAPPER_SELECTOR=`.${GLOBAL_APP_WRAPPER_CLASS}`;window.bluepicPopupProvider=new BluepicPopupProvider,exports.AdjustImage=AdjustImage,exports.BluepicBatchEditor=BluepicBatchEditor,exports.BluepicEmbed=BluepicEmbed,exports.BluepicEmbedded=BluepicEmbedded,exports.BluepicEmbeddedEditor=BluepicEmbeddedEditor,exports.BluepicFieldComponents=BluepciFieldComponents,exports.BluepicSpinner=BluepicSpinner,exports.BxAvatar=BxAvatar,exports.BxButton=BxButton,exports.BxCard=BxCard,exports.BxCheckbox=BxCheckbox,exports.BxColorPicker=BxColorPicker,exports.BxDropdown=BxDropdown,exports.BxEmbedThemeDarkmode=BxEmbedThemeDarkmode,exports.BxEmbedThemeLightmode=BxEmbedThemeLightmode,exports.BxFields=_sfc_main$p,exports.BxIcon=BxIcon,exports.BxInput=BxInput,exports.BxList=BxList,exports.BxListItem=BxListItem,exports.BxMenu=BxMenu,exports.BxPopover=BxPopover,exports.BxPopup=_sfc_main$17,exports.BxRadio=BxRadio,exports.BxRadioGroup=BxRadioGroup,exports.BxSelect=BxSelect,exports.BxSlider=BxSlider,exports.BxSpin=BxSpin,exports.BxSwitch=BxSwitch,exports.BxTab=BxTab,exports.BxTabs=BxTabs,exports.BxTag=BxTag,exports.BxTooltip=BxTooltip,exports.BxUserMenu=BxUserMenu,exports.GLOBAL_APP_WRAPPER_CLASS=GLOBAL_APP_WRAPPER_CLASS,exports.GLOBAL_APP_WRAPPER_SELECTOR=GLOBAL_APP_WRAPPER_SELECTOR,exports.MapboxMap=MapboxMap,exports.SlidesNavigation=SlidesNavigation,exports.applyColorMatricesToImage=applyColorMatricesToImage,exports.applyColorMatrix=applyColorMatrix,exports.applyColorMatrixToColor=applyColorMatrixToColor,exports.convertDeprecatedField=convertDeprecatedField,exports.createMessage=createMessage,exports.createPopup=createPopup,exports.cropImage=cropImage,exports.cropToVisibleBBox=cropToVisibleBBox,exports.getDefaultValueForFieldModel=getDefaultValueForFieldModel,exports.getTemplateLiveUrl=getTemplateLiveUrl,exports.getTemplateSerialUrl=getTemplateSerialUrl,exports.getThemeStyle=getThemeStyle,exports.getVisibleBBox=getVisibleBBox,exports.groupFeatureByLinebreaks=groupFeatureByLinebreaks$1,exports.normalizeAdjust=normalizeAdjust,exports.normalizeCrop=normalizeCrop,exports.rasterize=rasterize,exports.realizeField=realizeField,exports.renderFieldIcon=renderFieldIcon,exports.renderSVG=renderSVG,exports.stringifyField=stringifyField,exports.ungroupFeaturesDividedByLinebreaks=ungroupFeaturesDividedByLinebreaks,exports.useTheme=useTheme,exports.waitUntil=waitUntil,Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bluepic/embed",
   "private": false,
-  "version": "0.1.66",
+  "version": "0.1.67",
   "type": "module",
   "files": [
     "package.json",