@01tech/sportsbook-vue 0.64.0

package/dist/index.d.ts

@@ -0,0 +1,178 @@
+import * as vue from 'vue';
+
+type SportsFramePlatformType = 'mobile' | 'tablet' | 'desktop';
+
+type SportsFrameColorSchemeType = 'light' | 'dark';
+
+type SportsFrameColorSchemeModalType = SportsFrameColorSchemeType | 'auto';
+
+interface SportsFrameNotificationEventPayload {
+  variant: 'success' | 'info' | 'error';
+  title: string;
+  text?: string;
+}
+
+interface SportsFrameImageVariant {
+  url: string;
+  /**
+   * Mostly used to avoid unnecessary layout shift; in most cases, recommended to use.
+   */
+  height?: number;
+  width?: number;
+  // srcset?: [];
+}
+
+type SportsFrameCoefFormat =
+  | 'decimal'
+  | 'fractional'
+  | 'american'
+  | 'hong_kong'
+  | 'indonesian'
+  | 'malay';
+
+interface SportsFrameNavigationModeSync {
+  type: 'sync';
+  initialPath: string;
+  push(path: string): Promise<void>;
+  replace(path: string): Promise<void>;
+  back(): void;
+  forward(): void;
+}
+
+interface SportsFrameNavigationModeAuto {
+  type: 'auto';
+}
+
+type SportsFrameNavigation = SportsFrameNavigationModeSync | SportsFrameNavigationModeAuto;
+
+interface SportsFrameThemeConfig {
+  readonly preset?: {
+    readonly name: string;
+    readonly env?: 'prod' | 'preprod';
+  };
+}
+
+interface SportsFrameBonusWalletOptions {
+  readonly bonusId: string;
+  readonly amount: number;
+  /**
+   * The bonus has its own currency and does not use the system-defined currency.
+   */
+  readonly currencyCode: string;
+}
+
+interface SportsFrameGraphicsConfig {
+  readonly betslipEmpty?: SportsFrameImageVariant;
+  readonly betslipSuccess?: SportsFrameImageVariant;
+  readonly freebetPromoBanner?: SportsFrameImageVariant;
+  readonly watermarkLogo?: SportsFrameImageVariant;
+}
+
+interface SportsFrameFeaturesConfig {
+  readonly sharedBet?: boolean;
+  readonly broadcast?: boolean;
+  /**
+   * Enables the ability to switch themes within the frame.
+   * This is a stateless setting — you must manually subscribe to theme change events
+   * and update the corresponding parameter inside the frame accordingly.
+   */
+  readonly colorThemeSwitcher?: boolean;
+  readonly trends?: boolean;
+}
+
+interface SportsFrameAppearanceConfig {
+  /**
+   * z-index values for different floating UI elements.
+   * Accepts either a number or a string. The string can be a raw value (like '1000'),
+   * a CSS variable (e.g., 'var(--z-modal)'), or any custom value as needed.
+   * Used to control the stacking order of UI elements like popups, modals, and tooltips.
+   */
+  readonly index?: {
+    /**
+     * z-index for popup elements.
+     */
+    readonly popup?: number | string;
+
+    /**
+     * z-index for modal windows.
+     */
+    readonly modal?: number | string;
+
+    /**
+     * z-index for tooltip components.
+     */
+    readonly tooltip?: number | string;
+  };
+
+  /**
+   * Safe area offsets used when positioning floating elements that stick to the
+   * top or bottom edges of the screen. Helps ensure elements like top popups, match score board
+   * or bottom-fixed buttons (e.g. a betslip trigger above a tab bar)
+   */
+  readonly safeArea?: {
+    /**
+     * Safe spacing from the top edge — useful for floating elements that appear from the top.
+     */
+    readonly top?: number | string;
+
+    /**
+     * Safe spacing from the bottom edge — useful for sticky buttons or
+     * bottom-aligned elements that must avoid overlapping with the tab bar or similar UI.
+     */
+    readonly bottom?: number | string;
+  };
+}
+
+interface SportsFrameInitOptions {
+  /**
+   * Api Url
+   */
+  baseUrl: string;
+  navigation?: SportsFrameNavigation;
+  apiUrl: string;
+  cdnUrl?: string;
+  partnerId: string;
+  token?: string;
+  authed: boolean;
+  languageCode?: string;
+  rtl?: boolean;
+  currencyCode?: string;
+  balanceAmount?: number;
+  bonusWallet?: SportsFrameBonusWalletOptions;
+  platform: SportsFramePlatformType;
+  colorScheme?: SportsFrameColorSchemeType;
+  colorSchemeModal?: SportsFrameColorSchemeModalType;
+  theme?: SportsFrameThemeConfig;
+  inert?: boolean;
+  appearance?: SportsFrameAppearanceConfig;
+  features?: SportsFrameFeaturesConfig;
+  graphics?: SportsFrameGraphicsConfig;
+  shareLinkBehavior?: 'native' | 'manual' | 'hidden';
+  defaultCoefFormat?: SportsFrameCoefFormat;
+}
+
+declare const _default: vue.DefineComponent<SportsFrameInitOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {} & {
+    ready: () => any;
+    login: () => any;
+    renewToken: () => any;
+    notify: (options: SportsFrameNotificationEventPayload) => any;
+    changeModalState: (options: {
+        opened: boolean;
+    }) => any;
+    topUpBalance: () => any;
+    changeColorScheme: (options: "light" | "dark") => any;
+    shareLink: (options: string) => any;
+}, string, vue.PublicProps, Readonly<SportsFrameInitOptions> & Readonly<{
+    onReady?: (() => any) | undefined;
+    onLogin?: (() => any) | undefined;
+    onRenewToken?: (() => any) | undefined;
+    onNotify?: ((options: SportsFrameNotificationEventPayload) => any) | undefined;
+    onChangeModalState?: ((options: {
+        opened: boolean;
+    }) => any) | undefined;
+    onTopUpBalance?: (() => any) | undefined;
+    onChangeColorScheme?: ((options: "light" | "dark") => any) | undefined;
+    onShareLink?: ((options: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
+
+export { _default as SportsbookFrame };

package/dist/index.js

@@ -0,0 +1,192 @@
+import { watch as s, nextTick as f, shallowRef as h, getCurrentInstance as v, onMounted as k, defineComponent as y, useTemplateRef as b, effectScope as g, ref as S, computed as U, onScopeDispose as C, createElementBlock as w, openBlock as L } from "vue";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+function E(a, n, e) {
+  const r = s(a, (l, i, c) => {
+    l && (e?.once && f(() => r()), n(l, i, c));
+  }, {
+    ...e,
+    once: !1
+  });
+  return r;
+}
+// @__NO_SIDE_EFFECTS__
+function B() {
+  const a = h(!1), n = v();
+  return n && k(() => {
+    a.value = !0;
+  }, n), a;
+}
+async function _(a) {
+  const n = `${a.cdnUrl}/manifest/v1/stable/sportsbook/manifest.json`, e = await fetch(n);
+  if (!e.ok)
+    throw new Error(`Failed to fetch manifest: ${e.status} ${e.statusText}`);
+  return await e.json();
+}
+const A = "1.0.0-rc.1", F = "https://01-sports-frame-cdn.com";
+async function M(a, n) {
+  return {
+    createSportsbookFrame: (await import(
+      /* @vite-ignore */
+      `${a}/sportsbook/v1/core/v/${n}/esm/entry.js`
+    )).createSportsbookFrame
+  };
+}
+async function T(a) {
+  const n = a, { cdnUrl: e = F } = n;
+  let r;
+  try {
+    r = (await _({
+      cdnUrl: e,
+      stage: "stable"
+    })).v1.main.version;
+  } catch (c) {
+    throw console.error("Error loading manifest:", c), c;
+  }
+  console.log("Version:", r);
+  const l = `${e}/sportsbook/v1/core/v/${r}/esm/style.css`, i = await M(e, r);
+  return {
+    createApp: (c) => {
+      const d = c;
+      return i.createSportsbookFrame({
+        ...d,
+        // TODO: add path resolver
+        assetsUrl: d.cdnUrl + "/sportsbook/v1/static/",
+        cdnUrl: d.cdnUrl ?? e,
+        __sdk: {
+          stage: "stable",
+          version: A,
+          cssStyleUrl: l
+        }
+      });
+    }
+  };
+}
+const W = ["dir"], x = /* @__PURE__ */ y({
+  inheritAttrs: !1,
+  __name: "SportsbookFrame",
+  props: {
+    baseUrl: {},
+    navigation: {},
+    apiUrl: {},
+    cdnUrl: {},
+    partnerId: {},
+    token: {},
+    authed: { type: Boolean },
+    languageCode: {},
+    rtl: { type: Boolean },
+    currencyCode: {},
+    balanceAmount: {},
+    bonusWallet: {},
+    platform: {},
+    colorScheme: {},
+    colorSchemeModal: {},
+    theme: {},
+    inert: { type: Boolean },
+    appearance: {},
+    features: {},
+    graphics: {},
+    shareLinkBehavior: {},
+    defaultCoefFormat: {}
+  },
+  emits: ["ready", "login", "renewToken", "notify", "changeModalState", "topUpBalance", "changeColorScheme", "shareLink"],
+  setup(a, { emit: n }) {
+    const e = a, r = n, l = b("el"), i = g(), c = /* @__PURE__ */ B(), d = S(!1), p = U(() => e.rtl ? "rtl" : "ltr");
+    let u;
+    return C(() => {
+      u?.destroy();
+    }), i.run(async () => {
+      const o = (await T({ cdnUrl: e.cdnUrl })).createApp({
+        // assetsUrl: props.assetUrl,
+        baseUrl: e.baseUrl,
+        navigation: { type: "auto" },
+        partnerId: e.partnerId ?? "",
+        apiUrl: e.apiUrl,
+        cdnUrl: e.cdnUrl ?? "",
+        token: e.token ?? "",
+        authed: e.authed ?? !1,
+        balanceAmount: e.balanceAmount,
+        bonusWallet: e.bonusWallet,
+        languageCode: e.languageCode,
+        rtl: e.rtl,
+        currencyCode: e.currencyCode,
+        platform: e.platform,
+        colorScheme: e.colorScheme,
+        // colorSchemeModal: props.modalColorScheme,
+        theme: e.theme,
+        appearance: e.appearance,
+        features: e.features,
+        shareLinkBehavior: e.shareLinkBehavior,
+        defaultCoefFormat: e.defaultCoefFormat
+        // _experiments: props.experiments,
+        // _debug: props.debug,
+        // _contentResourcesPrefix: props.contentResourcesPrefix,
+        // _trackEvent(payload) {
+        //   emit('trackEvent', payload);
+        // },
+      });
+      o.addEventListener("ready", () => {
+        d.value = !0;
+      }), u = o, o.addEventListener("shareLink", (t) => {
+        r("shareLink", t);
+      }), o.addEventListener("ready", () => {
+        d.value = !0, r("ready");
+      }), o.addEventListener("login", () => {
+        r("login");
+      }), o.addEventListener("deposit", () => {
+        r("topUpBalance");
+      }), o.addEventListener("notify", (t) => {
+        r("notify", t);
+      }), o.addEventListener("renewToken", () => {
+        r("renewToken");
+      }), o.addEventListener("setModalState", ({ opened: t }) => {
+        r("changeModalState", { opened: t });
+      }), o.addEventListener("setColorScheme", (t) => {
+        r("changeColorScheme", t);
+      }), s(
+        () => e.languageCode,
+        (t) => o.setLanguageCode(t)
+      ), s(
+        () => e.rtl,
+        (t) => o.setRtl(t)
+      ), s(
+        () => e.platform,
+        (t) => o.setPlatform(t)
+      ), s(
+        () => e.token,
+        (t) => o.setToken(t)
+      ), s(
+        () => e.authed,
+        (t) => o.setAuthed(t)
+      ), s(
+        () => e.colorScheme,
+        (t) => o.setColorScheme(t ?? "dark")
+      ), s(
+        () => e.currencyCode,
+        (t) => o.setCurrencyCode(t)
+      ), s(
+        () => e.balanceAmount,
+        (t) => o.setBalanceAmount(t)
+      ), s(
+        () => e.bonusWallet,
+        (t) => o.setBonusWallet(t)
+      );
+    }), E(
+      () => c.value && d.value,
+      () => {
+        if (!l.value || !u)
+          throw new Error("unexpected error");
+        u.mount(l.value);
+      },
+      { once: !0 }
+    ), (m, o) => (L(), w("div", {
+      id: "sport-frame",
+      ref_key: "el",
+      ref: l,
+      dir: p.value,
+      "data-sport-frame": ""
+    }, null, 8, W));
+  }
+});
+export {
+  x as SportsbookFrame
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@01tech/sportsbook-vue",
+  "private": false,
+  "version": "0.64.0",
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "sdk:build:prepare": "rm -rf ./dist",
+    "dts-compile": "vue-tsc --project ./tsconfig.dts.json",
+    "dts-resolve": "rollup -c rollup.dts.config.mjs",
+    "sdk:build:dts": "npm run dts-compile && npm run dts-resolve",
+    "sdk:build:js": "NODE_ENV=production vite build --config vite.config.ts",
+    "sdk:build": "npm run sdk:build:prepare && npm run sdk:build:dts && npm run sdk:build:js",
+    "sdk:dev": "NODE_ENV=development vite build --watch --config vite.config.ts"
+  },
+  "devDependencies": {
+    "@01tech/sportsbook-web": "*"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.13",
+    "vue-router": "~4.5.1"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  }
+}