@adsterra-ad/vue 0.1.2 → 0.1.3

package/dist/index.cjs

@@ -37,6 +37,8 @@ var AdBanner = (0, import_vue.defineComponent)({
     adLabel: { type: String, default: "Advertisement" },
     showAdLabel: { type: Boolean, default: true },
     adLabelPosition: { type: String, default: "top-left" },
+    showFallbackPlaceholder: { type: Boolean, default: false },
+    fallbackPlaceholderText: { type: String, default: "Test advertisement" },
     className: { type: String, default: "" }
   },
   emits: ["load", "error"],
@@ -45,9 +47,14 @@ var AdBanner = (0, import_vue.defineComponent)({
     const adLoaded = (0, import_vue.ref)(false);
     const adFailed = (0, import_vue.ref)(false);
     const activeProvider = (0, import_vue.ref)(props.provider);
-    (0, import_vue.watch)(() => props.provider, (next) => {
-      activeProvider.value = next;
-    });
+    (0, import_vue.watch)(
+      () => [props.provider, props.format, props.adKey],
+      ([nextProvider]) => {
+        activeProvider.value = nextProvider;
+        adLoaded.value = false;
+        adFailed.value = false;
+      }
+    );
     const config = (0, import_vue.computed)(() => (0, import_core.resolveAdConfig)(props.format, props.adKey || void 0));
     const srcDoc = (0, import_vue.computed)(
       () => (0, import_core.buildSrcDoc)({ format: props.format, provider: activeProvider.value, config: config.value, bannerId })
@@ -80,7 +87,7 @@ var AdBanner = (0, import_vue.defineComponent)({
       width: "100%"
     }));
     const visibilityStyle = (0, import_vue.computed)(
-      () => adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+      () => adLoaded.value || adFailed.value && props.showFallbackPlaceholder ? { opacity: "1", transform: "scale(1)" } : {
         opacity: "0",
         transform: "scale(0.95)",
         pointerEvents: "none",
@@ -106,18 +113,26 @@ var AdBanner = (0, import_vue.defineComponent)({
     (0, import_vue.onMounted)(() => window.addEventListener("message", onMessage));
     (0, import_vue.onUnmounted)(() => window.removeEventListener("message", onMessage));
     return () => {
-      if (adFailed.value) return null;
+      if (adFailed.value && !props.showFallbackPlaceholder) return null;
       const topLabel = props.showAdLabel && props.adLabelPosition.startsWith("top");
       const bottomLabel = props.showAdLabel && props.adLabelPosition.startsWith("bottom");
+      const isPlaceholderVisible = adFailed.value && props.showFallbackPlaceholder;
       return (0, import_vue.h)("div", { class: props.className, style: { ...wrapperStyle.value, ...visibilityStyle.value } }, [
         topLabel ? (0, import_vue.h)("span", { style: labelStyle.value }, props.adLabel) : null,
         (0, import_vue.h)("div", { "data-testid": "ad-banner", style: style.value }, [
-          (0, import_vue.h)("iframe", {
+          isPlaceholderVisible ? (0, import_vue.h)(FallbackPlaceholder, { format: props.format, text: props.fallbackPlaceholderText }) : (0, import_vue.h)("iframe", {
             title: "Advertisement",
             srcdoc: srcDoc.value,
+            width: "100%",
+            height: "100%",
             frameborder: "0",
             scrolling: "no",
-            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals",
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%"
+            }
           })
         ]),
         bottomLabel ? (0, import_vue.h)("span", { style: labelStyle.value }, props.adLabel) : null
@@ -134,14 +149,16 @@ var AdContainer = (0, import_vue.defineComponent)({
     className: { type: String, default: "" },
     adLabel: { type: String, default: "Advertisement" },
     showAdLabel: { type: Boolean, default: true },
-    adLabelPosition: { type: String, default: "top-left" }
+    adLabelPosition: { type: String, default: "top-left" },
+    showFallbackPlaceholder: { type: Boolean, default: false },
+    fallbackPlaceholderText: { type: String, default: "Test advertisement" }
   },
   setup(props) {
     const adLoaded = (0, import_vue.ref)(false);
     const adFailed = (0, import_vue.ref)(false);
     return () => {
-      if (adFailed.value) return null;
-      const containerVisibilityStyle = adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+      if (adFailed.value && !props.showFallbackPlaceholder) return null;
+      const containerVisibilityStyle = adLoaded.value || adFailed.value && props.showFallbackPlaceholder ? { opacity: "1", transform: "scale(1)" } : {
         opacity: "0",
         transform: "scale(0.95)",
         pointerEvents: "none",
@@ -159,6 +176,8 @@ var AdContainer = (0, import_vue.defineComponent)({
           adLabel: props.adLabel,
           showAdLabel: props.showAdLabel,
           adLabelPosition: props.adLabelPosition,
+          showFallbackPlaceholder: props.showFallbackPlaceholder,
+          fallbackPlaceholderText: props.fallbackPlaceholderText,
           onLoad: () => {
             adLoaded.value = true;
           },
@@ -170,6 +189,41 @@ var AdContainer = (0, import_vue.defineComponent)({
     };
   }
 });
+var FallbackPlaceholder = (0, import_vue.defineComponent)({
+  name: "FallbackPlaceholder",
+  props: {
+    format: { type: String, required: true },
+    text: { type: String, required: true }
+  },
+  setup(props) {
+    return () => (0, import_vue.h)(
+      "div",
+      {
+        role: "img",
+        "aria-label": `${props.text} placeholder`,
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          boxSizing: "border-box",
+          padding: "12px",
+          color: "#475569",
+          background: "repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px)",
+          textAlign: "center",
+          fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+        }
+      },
+      [
+        (0, import_vue.h)("strong", { style: { fontSize: "13px", lineHeight: "1.2" } }, props.text),
+        (0, import_vue.h)("span", { style: { fontSize: "11px", lineHeight: "1.2" } }, props.format)
+      ]
+    );
+  }
+});
 var index_default = AdBanner;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -29,6 +29,14 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
     className: {
         type: StringConstructor;
         default: string;
@@ -60,6 +68,14 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
     className: {
         type: StringConstructor;
         default: string;
@@ -73,6 +89,8 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
     adLabel: string;
     showAdLabel: boolean;
     adLabelPosition: AdLabelPosition;
+    showFallbackPlaceholder: boolean;
+    fallbackPlaceholderText: string;
     className: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -104,6 +122,14 @@ declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -135,12 +161,22 @@ declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     provider: AdProvider;
     adKey: string;
     adLabel: string;
     showAdLabel: boolean;
     adLabelPosition: AdLabelPosition;
+    showFallbackPlaceholder: boolean;
+    fallbackPlaceholderText: string;
     className: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/index.d.ts

@@ -29,6 +29,14 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
     className: {
         type: StringConstructor;
         default: string;
@@ -60,6 +68,14 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
     className: {
         type: StringConstructor;
         default: string;
@@ -73,6 +89,8 @@ declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
     adLabel: string;
     showAdLabel: boolean;
     adLabelPosition: AdLabelPosition;
+    showFallbackPlaceholder: boolean;
+    fallbackPlaceholderText: string;
     className: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -104,6 +122,14 @@ declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -135,12 +161,22 @@ declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AdLabelPosition>;
         default: string;
     };
+    showFallbackPlaceholder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fallbackPlaceholderText: {
+        type: StringConstructor;
+        default: string;
+    };
 }>> & Readonly<{}>, {
     provider: AdProvider;
     adKey: string;
     adLabel: string;
     showAdLabel: boolean;
     adLabelPosition: AdLabelPosition;
+    showFallbackPlaceholder: boolean;
+    fallbackPlaceholderText: string;
     className: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 

package/dist/index.js

@@ -15,6 +15,8 @@ var AdBanner = defineComponent({
     adLabel: { type: String, default: "Advertisement" },
     showAdLabel: { type: Boolean, default: true },
     adLabelPosition: { type: String, default: "top-left" },
+    showFallbackPlaceholder: { type: Boolean, default: false },
+    fallbackPlaceholderText: { type: String, default: "Test advertisement" },
     className: { type: String, default: "" }
   },
   emits: ["load", "error"],
@@ -23,9 +25,14 @@ var AdBanner = defineComponent({
     const adLoaded = ref(false);
     const adFailed = ref(false);
     const activeProvider = ref(props.provider);
-    watch(() => props.provider, (next) => {
-      activeProvider.value = next;
-    });
+    watch(
+      () => [props.provider, props.format, props.adKey],
+      ([nextProvider]) => {
+        activeProvider.value = nextProvider;
+        adLoaded.value = false;
+        adFailed.value = false;
+      }
+    );
     const config = computed(() => resolveAdConfig(props.format, props.adKey || void 0));
     const srcDoc = computed(
       () => buildSrcDoc({ format: props.format, provider: activeProvider.value, config: config.value, bannerId })
@@ -58,7 +65,7 @@ var AdBanner = defineComponent({
       width: "100%"
     }));
     const visibilityStyle = computed(
-      () => adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+      () => adLoaded.value || adFailed.value && props.showFallbackPlaceholder ? { opacity: "1", transform: "scale(1)" } : {
         opacity: "0",
         transform: "scale(0.95)",
         pointerEvents: "none",
@@ -84,18 +91,26 @@ var AdBanner = defineComponent({
     onMounted(() => window.addEventListener("message", onMessage));
     onUnmounted(() => window.removeEventListener("message", onMessage));
     return () => {
-      if (adFailed.value) return null;
+      if (adFailed.value && !props.showFallbackPlaceholder) return null;
       const topLabel = props.showAdLabel && props.adLabelPosition.startsWith("top");
       const bottomLabel = props.showAdLabel && props.adLabelPosition.startsWith("bottom");
+      const isPlaceholderVisible = adFailed.value && props.showFallbackPlaceholder;
       return h("div", { class: props.className, style: { ...wrapperStyle.value, ...visibilityStyle.value } }, [
         topLabel ? h("span", { style: labelStyle.value }, props.adLabel) : null,
         h("div", { "data-testid": "ad-banner", style: style.value }, [
-          h("iframe", {
+          isPlaceholderVisible ? h(FallbackPlaceholder, { format: props.format, text: props.fallbackPlaceholderText }) : h("iframe", {
             title: "Advertisement",
             srcdoc: srcDoc.value,
+            width: "100%",
+            height: "100%",
             frameborder: "0",
             scrolling: "no",
-            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals",
+            style: {
+              display: "block",
+              width: "100%",
+              height: "100%"
+            }
           })
         ]),
         bottomLabel ? h("span", { style: labelStyle.value }, props.adLabel) : null
@@ -112,14 +127,16 @@ var AdContainer = defineComponent({
     className: { type: String, default: "" },
     adLabel: { type: String, default: "Advertisement" },
     showAdLabel: { type: Boolean, default: true },
-    adLabelPosition: { type: String, default: "top-left" }
+    adLabelPosition: { type: String, default: "top-left" },
+    showFallbackPlaceholder: { type: Boolean, default: false },
+    fallbackPlaceholderText: { type: String, default: "Test advertisement" }
   },
   setup(props) {
     const adLoaded = ref(false);
     const adFailed = ref(false);
     return () => {
-      if (adFailed.value) return null;
-      const containerVisibilityStyle = adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+      if (adFailed.value && !props.showFallbackPlaceholder) return null;
+      const containerVisibilityStyle = adLoaded.value || adFailed.value && props.showFallbackPlaceholder ? { opacity: "1", transform: "scale(1)" } : {
         opacity: "0",
         transform: "scale(0.95)",
         pointerEvents: "none",
@@ -137,6 +154,8 @@ var AdContainer = defineComponent({
           adLabel: props.adLabel,
           showAdLabel: props.showAdLabel,
           adLabelPosition: props.adLabelPosition,
+          showFallbackPlaceholder: props.showFallbackPlaceholder,
+          fallbackPlaceholderText: props.fallbackPlaceholderText,
           onLoad: () => {
             adLoaded.value = true;
           },
@@ -148,6 +167,41 @@ var AdContainer = defineComponent({
     };
   }
 });
+var FallbackPlaceholder = defineComponent({
+  name: "FallbackPlaceholder",
+  props: {
+    format: { type: String, required: true },
+    text: { type: String, required: true }
+  },
+  setup(props) {
+    return () => h(
+      "div",
+      {
+        role: "img",
+        "aria-label": `${props.text} placeholder`,
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px",
+          boxSizing: "border-box",
+          padding: "12px",
+          color: "#475569",
+          background: "repeating-linear-gradient(135deg, #f8fafc 0, #f8fafc 10px, #eef2f7 10px, #eef2f7 20px)",
+          textAlign: "center",
+          fontFamily: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+        }
+      },
+      [
+        h("strong", { style: { fontSize: "13px", lineHeight: "1.2" } }, props.text),
+        h("span", { style: { fontSize: "11px", lineHeight: "1.2" } }, props.format)
+      ]
+    );
+  }
+});
 var index_default = AdBanner;
 export {
   AdBanner,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adsterra-ad/vue",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "vue": "^3.4.0"
   },
   "dependencies": {
-    "@adsterra-ad/core": "0.1.2"
+    "@adsterra-ad/core": "0.1.3"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",
@@ -43,4 +43,4 @@
     "typescript": "^5.5.4",
     "vue": "^3.4.38"
   }
-}
+}