@apolopay-sdk/vue 1.0.0

package/README.md

@@ -0,0 +1,62 @@
+# @apolopay-sdk/vue
+
+Vue wrapper for the Apolo Pay SDK. Provides a convenient component to integrate the Apolo Pay payment button into Vue 3 applications.
+
+## Installation
+
+```bash
+npm install @apolopay-sdk/vue
+# or
+pnpm add @apolopay-sdk/vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ApoloPayButton, ApoloPayClient, type ClientResponse, type ClientError } from '@apolopay-sdk/vue';
+
+// 1. Initialize the client
+const client = new ApoloPayClient({
+  publicKey: 'pk_test_...',
+});
+
+const processId = 'your-process-id';
+
+// 2. Define event handlers
+const handleSuccess = (response: ClientResponse) => {
+  console.log('Payment successful!', response.message);
+};
+
+const handleError = (error: ClientError) => {
+  console.error('Payment error:', error.message);
+};
+</script>
+
+<template>
+  <div class="container">
+    <h1>My Store</h1>
+    
+    <!-- 3. Use the component -->
+    <ApoloPayButton
+      :client="client"
+      :processId="processId"
+      productTitle="Order #VUE-1"
+      lang="es"
+      @success="handleSuccess"
+      @error="handleError"
+      barrierDismissible
+    />
+  </div>
+</template>
+```
+
+## Props and Events
+
+The `ApoloPayButton` component accepts the same props as attributes (e.g., `:processId`, `:client`) and emits standard events (`@success`, `@error`).
+
+For a full list of available properties, see the documentation for [@apolopay-sdk/ui](../ui/README.md).
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,54 @@
+import * as vue from 'vue';
+export * from '@apolopay-sdk/ui';
+
+/**
+ * El componente adaptador de Vue.
+ * Traduce los eventos nativos del DOM a eventos de Vue.
+ */
+declare const ApoloPayButton: vue.DefineComponent<{
+    client: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    processId: {
+        type: StringConstructor;
+        required: false;
+    };
+    productTitle: {
+        type: StringConstructor;
+        required: false;
+    };
+    lang: {
+        type: StringConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    loading: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    barrierDismissible: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<{} & {
+    client?: Record<string, any> | undefined;
+    processId?: string | undefined;
+    productTitle?: string | undefined;
+    lang?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    label?: string | undefined;
+    barrierDismissible?: boolean | undefined;
+}>, {}>;
+
+export { ApoloPayButton };

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import * as vue from 'vue';
+export * from '@apolopay-sdk/ui';
+
+/**
+ * El componente adaptador de Vue.
+ * Traduce los eventos nativos del DOM a eventos de Vue.
+ */
+declare const ApoloPayButton: vue.DefineComponent<{
+    client: {
+        type: ObjectConstructor;
+        required: false;
+    };
+    processId: {
+        type: StringConstructor;
+        required: false;
+    };
+    productTitle: {
+        type: StringConstructor;
+        required: false;
+    };
+    lang: {
+        type: StringConstructor;
+        required: false;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    loading: {
+        type: BooleanConstructor;
+        required: false;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+    };
+    barrierDismissible: {
+        type: BooleanConstructor;
+        required: false;
+    };
+}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("success" | "error")[], "success" | "error", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<{} & {
+    client?: Record<string, any> | undefined;
+    processId?: string | undefined;
+    productTitle?: string | undefined;
+    lang?: string | undefined;
+    disabled?: boolean | undefined;
+    loading?: boolean | undefined;
+    label?: string | undefined;
+    barrierDismissible?: boolean | undefined;
+}>, {}>;
+
+export { ApoloPayButton };

package/dist/index.js

@@ -0,0 +1,84 @@
+"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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var src_exports = {};
+__export(src_exports, {
+  ApoloPayButton: () => ApoloPayButton
+});
+module.exports = __toCommonJS(src_exports);
+var import_ui = require("@apolopay-sdk/ui");
+var import_vue = require("vue");
+__reExport(src_exports, require("@apolopay-sdk/ui"), module.exports);
+var ApoloPayButton = (0, import_vue.defineComponent)({
+  name: "ApoloPayButton",
+  // 1. Define los props que acepta (camelCase)
+  props: {
+    client: { type: Object, required: false },
+    processId: { type: String, required: false },
+    productTitle: { type: String, required: false },
+    lang: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    loading: { type: Boolean, required: false },
+    label: { type: String, required: false },
+    barrierDismissible: { type: Boolean, required: false }
+  },
+  // 2. Define los eventos que emite (onSuccess -> @success)
+  emits: ["success", "error"],
+  setup(props, { emit, slots }) {
+    const buttonRef = (0, import_vue.ref)(null);
+    (0, import_vue.onMounted)(() => {
+      const node = buttonRef.value;
+      if (!node)
+        return;
+      const handleSuccess = (event) => {
+        emit("success", event.detail);
+      };
+      const handleError = (event) => {
+        emit("error", event.detail);
+      };
+      node.addEventListener("success", handleSuccess);
+      node.addEventListener("error", handleError);
+    });
+    return () => (0, import_vue.h)(
+      "apolopay-button",
+      {
+        // 6. Asigna la ref
+        ref: buttonRef,
+        // 7. Pasa los props, convirtiéndolos a kebab-case
+        client: props.client,
+        "process-id": props.processId,
+        "product-title": props.productTitle,
+        "lang": props.lang,
+        "disabled": props.disabled,
+        "loading": props.loading,
+        "label": props.label,
+        "barrier-dismissible": props.barrierDismissible
+      },
+      // 8. Pasa el contenido del slot (ej. "Pagar Ahora")
+      slots.default ? slots.default() : []
+    );
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ApoloPayButton,
+  ...require("@apolopay-sdk/ui")
+});

package/dist/index.mjs

@@ -0,0 +1,57 @@
+// src/index.tsx
+import "@apolopay-sdk/ui";
+import { defineComponent, h, onMounted, ref } from "vue";
+export * from "@apolopay-sdk/ui";
+var ApoloPayButton = defineComponent({
+  name: "ApoloPayButton",
+  // 1. Define los props que acepta (camelCase)
+  props: {
+    client: { type: Object, required: false },
+    processId: { type: String, required: false },
+    productTitle: { type: String, required: false },
+    lang: { type: String, required: false },
+    disabled: { type: Boolean, required: false },
+    loading: { type: Boolean, required: false },
+    label: { type: String, required: false },
+    barrierDismissible: { type: Boolean, required: false }
+  },
+  // 2. Define los eventos que emite (onSuccess -> @success)
+  emits: ["success", "error"],
+  setup(props, { emit, slots }) {
+    const buttonRef = ref(null);
+    onMounted(() => {
+      const node = buttonRef.value;
+      if (!node)
+        return;
+      const handleSuccess = (event) => {
+        emit("success", event.detail);
+      };
+      const handleError = (event) => {
+        emit("error", event.detail);
+      };
+      node.addEventListener("success", handleSuccess);
+      node.addEventListener("error", handleError);
+    });
+    return () => h(
+      "apolopay-button",
+      {
+        // 6. Asigna la ref
+        ref: buttonRef,
+        // 7. Pasa los props, convirtiéndolos a kebab-case
+        client: props.client,
+        "process-id": props.processId,
+        "product-title": props.productTitle,
+        "lang": props.lang,
+        "disabled": props.disabled,
+        "loading": props.loading,
+        "label": props.label,
+        "barrier-dismissible": props.barrierDismissible
+      },
+      // 8. Pasa el contenido del slot (ej. "Pagar Ahora")
+      slots.default ? slots.default() : []
+    );
+  }
+});
+export {
+  ApoloPayButton
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@apolopay-sdk/vue",
+  "version": "1.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@apolopay-sdk/ui": "1.0.0"
+  },
+  "devDependencies": {
+    "tsup": "8.0.0",
+    "typescript": "5.4.5",
+    "vue": "3.0.0"
+  },
+  "peerDependencies": {
+    "vue": "3.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --clean --external vue",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --external vue"
+  }
+}