@adsterra-ad/vue 0.1.0

package/dist/index.cjs

@@ -0,0 +1,179 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AdBanner: () => AdBanner,
+  AdContainer: () => AdContainer,
+  configureAds: () => import_core.configureAds,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_vue = require("vue");
+var import_core = require("@adsterra-ad/core");
+var AdBanner = (0, import_vue.defineComponent)({
+  name: "AdBanner",
+  props: {
+    format: { type: String, required: true },
+    provider: { type: String, default: "adsterra" },
+    adKey: { type: String, default: "" },
+    adLabel: { type: String, default: "Advertisement" },
+    showAdLabel: { type: Boolean, default: true },
+    adLabelPosition: { type: String, default: "top-left" },
+    className: { type: String, default: "" }
+  },
+  emits: ["load", "error"],
+  setup(props, { emit }) {
+    const bannerId = (0, import_core.createBannerId)();
+    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;
+    });
+    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 })
+    );
+    const style = (0, import_vue.computed)(() => ({
+      width: typeof config.value.width === "number" ? `${config.value.width}px` : config.value.width,
+      height: typeof config.value.height === "number" ? `${config.value.height}px` : config.value.height,
+      overflow: "hidden",
+      borderRadius: "6px",
+      border: "1px solid #e5e7eb",
+      background: "#f3f4f6",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }));
+    const wrapperStyle = (0, import_vue.computed)(() => ({
+      display: "inline-flex",
+      flexDirection: "column",
+      alignItems: props.adLabelPosition.endsWith("left") ? "flex-start" : props.adLabelPosition.endsWith("right") ? "flex-end" : "center"
+    }));
+    const labelStyle = (0, import_vue.computed)(() => ({
+      fontSize: "10px",
+      fontWeight: "600",
+      letterSpacing: "0.1em",
+      textTransform: "uppercase",
+      color: "#9ca3af",
+      marginBottom: props.adLabelPosition.startsWith("top") ? "4px" : "0",
+      marginTop: props.adLabelPosition.startsWith("bottom") ? "4px" : "0",
+      textAlign: props.adLabelPosition.endsWith("left") ? "left" : props.adLabelPosition.endsWith("right") ? "right" : "center",
+      width: "100%"
+    }));
+    const visibilityStyle = (0, import_vue.computed)(
+      () => adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+        opacity: "0",
+        transform: "scale(0.95)",
+        pointerEvents: "none",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        overflow: "hidden"
+      }
+    );
+    const onMessage = (event) => {
+      const data = event.data;
+      if (!data || data.bannerId !== bannerId) return;
+      if (data.type === "ad-load-success") {
+        adLoaded.value = true;
+        emit("load");
+        return;
+      }
+      if (data.type === "ad-load-error") {
+        adFailed.value = true;
+        emit("error");
+      }
+    };
+    (0, import_vue.onMounted)(() => window.addEventListener("message", onMessage));
+    (0, import_vue.onUnmounted)(() => window.removeEventListener("message", onMessage));
+    return () => {
+      if (adFailed.value) return null;
+      const topLabel = props.showAdLabel && props.adLabelPosition.startsWith("top");
+      const bottomLabel = props.showAdLabel && props.adLabelPosition.startsWith("bottom");
+      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", {
+            title: "Advertisement",
+            srcdoc: srcDoc.value,
+            frameborder: "0",
+            scrolling: "no",
+            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+          })
+        ]),
+        bottomLabel ? (0, import_vue.h)("span", { style: labelStyle.value }, props.adLabel) : null
+      ]);
+    };
+  }
+});
+var AdContainer = (0, import_vue.defineComponent)({
+  name: "AdContainer",
+  props: {
+    format: { type: String, required: true },
+    provider: { type: String, default: "adsterra" },
+    adKey: { type: String, default: "" },
+    className: { type: String, default: "" },
+    adLabel: { type: String, default: "Advertisement" },
+    showAdLabel: { type: Boolean, default: true },
+    adLabelPosition: { type: String, default: "top-left" }
+  },
+  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)" } : {
+        opacity: "0",
+        transform: "scale(0.95)",
+        pointerEvents: "none",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        overflow: "hidden"
+      };
+      return (0, import_vue.h)("div", { style: containerVisibilityStyle }, [
+        (0, import_vue.h)(AdBanner, {
+          format: props.format,
+          provider: props.provider,
+          adKey: props.adKey,
+          className: props.className,
+          adLabel: props.adLabel,
+          showAdLabel: props.showAdLabel,
+          adLabelPosition: props.adLabelPosition,
+          onLoad: () => {
+            adLoaded.value = true;
+          },
+          onError: () => {
+            adFailed.value = true;
+          }
+        })
+      ]);
+    };
+  }
+});
+var index_default = AdBanner;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdBanner,
+  AdContainer,
+  configureAds
+});

package/dist/index.d.cts

@@ -0,0 +1,147 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { AdFormat, AdProvider } from '@adsterra-ad/core';
+export { configureAds } from '@adsterra-ad/core';
+
+type AdLabelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("load" | "error")[], "load" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    provider: AdProvider;
+    adKey: string;
+    adLabel: string;
+    showAdLabel: boolean;
+    adLabelPosition: AdLabelPosition;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    provider: AdProvider;
+    adKey: string;
+    adLabel: string;
+    showAdLabel: boolean;
+    adLabelPosition: AdLabelPosition;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AdBanner, AdContainer, AdBanner as default };

package/dist/index.d.ts

@@ -0,0 +1,147 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { AdFormat, AdProvider } from '@adsterra-ad/core';
+export { configureAds } from '@adsterra-ad/core';
+
+type AdLabelPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+declare const AdBanner: vue.DefineComponent<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("load" | "error")[], "load" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onLoad?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    provider: AdProvider;
+    adKey: string;
+    adLabel: string;
+    showAdLabel: boolean;
+    adLabelPosition: AdLabelPosition;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const AdContainer: vue.DefineComponent<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    format: {
+        type: PropType<AdFormat>;
+        required: true;
+    };
+    provider: {
+        type: PropType<AdProvider>;
+        default: string;
+    };
+    adKey: {
+        type: StringConstructor;
+        default: string;
+    };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    adLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    showAdLabel: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    adLabelPosition: {
+        type: PropType<AdLabelPosition>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    provider: AdProvider;
+    adKey: string;
+    adLabel: string;
+    showAdLabel: boolean;
+    adLabelPosition: AdLabelPosition;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AdBanner, AdContainer, AdBanner as default };

package/dist/index.js

@@ -0,0 +1,157 @@
+// src/index.ts
+import { defineComponent, h, onMounted, onUnmounted, ref, watch, computed } from "vue";
+import {
+  buildSrcDoc,
+  configureAds,
+  createBannerId,
+  resolveAdConfig
+} from "@adsterra-ad/core";
+var AdBanner = defineComponent({
+  name: "AdBanner",
+  props: {
+    format: { type: String, required: true },
+    provider: { type: String, default: "adsterra" },
+    adKey: { type: String, default: "" },
+    adLabel: { type: String, default: "Advertisement" },
+    showAdLabel: { type: Boolean, default: true },
+    adLabelPosition: { type: String, default: "top-left" },
+    className: { type: String, default: "" }
+  },
+  emits: ["load", "error"],
+  setup(props, { emit }) {
+    const bannerId = createBannerId();
+    const adLoaded = ref(false);
+    const adFailed = ref(false);
+    const activeProvider = ref(props.provider);
+    watch(() => props.provider, (next) => {
+      activeProvider.value = next;
+    });
+    const config = computed(() => resolveAdConfig(props.format, props.adKey || void 0));
+    const srcDoc = computed(
+      () => buildSrcDoc({ format: props.format, provider: activeProvider.value, config: config.value, bannerId })
+    );
+    const style = computed(() => ({
+      width: typeof config.value.width === "number" ? `${config.value.width}px` : config.value.width,
+      height: typeof config.value.height === "number" ? `${config.value.height}px` : config.value.height,
+      overflow: "hidden",
+      borderRadius: "6px",
+      border: "1px solid #e5e7eb",
+      background: "#f3f4f6",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }));
+    const wrapperStyle = computed(() => ({
+      display: "inline-flex",
+      flexDirection: "column",
+      alignItems: props.adLabelPosition.endsWith("left") ? "flex-start" : props.adLabelPosition.endsWith("right") ? "flex-end" : "center"
+    }));
+    const labelStyle = computed(() => ({
+      fontSize: "10px",
+      fontWeight: "600",
+      letterSpacing: "0.1em",
+      textTransform: "uppercase",
+      color: "#9ca3af",
+      marginBottom: props.adLabelPosition.startsWith("top") ? "4px" : "0",
+      marginTop: props.adLabelPosition.startsWith("bottom") ? "4px" : "0",
+      textAlign: props.adLabelPosition.endsWith("left") ? "left" : props.adLabelPosition.endsWith("right") ? "right" : "center",
+      width: "100%"
+    }));
+    const visibilityStyle = computed(
+      () => adLoaded.value ? { opacity: "1", transform: "scale(1)" } : {
+        opacity: "0",
+        transform: "scale(0.95)",
+        pointerEvents: "none",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        overflow: "hidden"
+      }
+    );
+    const onMessage = (event) => {
+      const data = event.data;
+      if (!data || data.bannerId !== bannerId) return;
+      if (data.type === "ad-load-success") {
+        adLoaded.value = true;
+        emit("load");
+        return;
+      }
+      if (data.type === "ad-load-error") {
+        adFailed.value = true;
+        emit("error");
+      }
+    };
+    onMounted(() => window.addEventListener("message", onMessage));
+    onUnmounted(() => window.removeEventListener("message", onMessage));
+    return () => {
+      if (adFailed.value) return null;
+      const topLabel = props.showAdLabel && props.adLabelPosition.startsWith("top");
+      const bottomLabel = props.showAdLabel && props.adLabelPosition.startsWith("bottom");
+      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", {
+            title: "Advertisement",
+            srcdoc: srcDoc.value,
+            frameborder: "0",
+            scrolling: "no",
+            sandbox: "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+          })
+        ]),
+        bottomLabel ? h("span", { style: labelStyle.value }, props.adLabel) : null
+      ]);
+    };
+  }
+});
+var AdContainer = defineComponent({
+  name: "AdContainer",
+  props: {
+    format: { type: String, required: true },
+    provider: { type: String, default: "adsterra" },
+    adKey: { type: String, default: "" },
+    className: { type: String, default: "" },
+    adLabel: { type: String, default: "Advertisement" },
+    showAdLabel: { type: Boolean, default: true },
+    adLabelPosition: { type: String, default: "top-left" }
+  },
+  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)" } : {
+        opacity: "0",
+        transform: "scale(0.95)",
+        pointerEvents: "none",
+        position: "absolute",
+        width: "0",
+        height: "0",
+        overflow: "hidden"
+      };
+      return h("div", { style: containerVisibilityStyle }, [
+        h(AdBanner, {
+          format: props.format,
+          provider: props.provider,
+          adKey: props.adKey,
+          className: props.className,
+          adLabel: props.adLabel,
+          showAdLabel: props.showAdLabel,
+          adLabelPosition: props.adLabelPosition,
+          onLoad: () => {
+            adLoaded.value = true;
+          },
+          onError: () => {
+            adFailed.value = true;
+          }
+        })
+      ]);
+    };
+  }
+});
+var index_default = AdBanner;
+export {
+  AdBanner,
+  AdContainer,
+  configureAds,
+  index_default as default
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@adsterra-ad/vue",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "@adsterra-ad/core": "0.1.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build && npm run typecheck"
+  },
+  "devDependencies": {
+    "tsup": "^8.2.4",
+    "typescript": "^5.5.4",
+    "vue": "^3.4.38"
+  }
+}