@inttegro/vue 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -5
- package/dist/index.d.ts +9 -5
- package/dist/index.js +3 -1
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -31,6 +31,7 @@ var Checkout = (0, import_vue.defineComponent)({
|
|
|
31
31
|
name: "InttegroCheckout",
|
|
32
32
|
props: {
|
|
33
33
|
appearance: Object,
|
|
34
|
+
features: Object,
|
|
34
35
|
locale: String,
|
|
35
36
|
orderId: { type: String, required: true },
|
|
36
37
|
timeout: Number,
|
|
@@ -65,6 +66,7 @@ var Checkout = (0, import_vue.defineComponent)({
|
|
|
65
66
|
const instance = inttegro.createCheckout(
|
|
66
67
|
definedOptions({
|
|
67
68
|
appearance: props.appearance,
|
|
69
|
+
features: props.features,
|
|
68
70
|
locale: props.locale,
|
|
69
71
|
orderId: props.orderId,
|
|
70
72
|
timeout: props.timeout,
|
|
@@ -94,7 +96,7 @@ var Checkout = (0, import_vue.defineComponent)({
|
|
|
94
96
|
(0, import_vue.onMounted)(mountCheckout);
|
|
95
97
|
(0, import_vue.onBeforeUnmount)(destroyCheckout);
|
|
96
98
|
(0, import_vue.watch)(
|
|
97
|
-
() => [props.orderId, props.timeout, props.title],
|
|
99
|
+
() => [props.features, props.orderId, props.timeout, props.title],
|
|
98
100
|
() => void mountCheckout()
|
|
99
101
|
);
|
|
100
102
|
(0, import_vue.watch)(
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/Checkout.ts"],"sourcesContent":["/**\n * Vue component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/vue\n */\nexport { Checkout, type CheckoutExposed, type CheckoutProps } from './Checkout'\nexport type {\n CheckoutAppearance,\n CheckoutErrorEvent,\n CheckoutEvent,\n CheckoutTheme,\n} from '@inttegro/js'\n","import {\n loadInttegro,\n type CheckoutAppearance,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n} from '@inttegro/js'\nimport {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `orderId`, `timeout`, or `title` replaces the hosted
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/Checkout.ts"],"sourcesContent":["/**\n * Vue component adapter for Inttegro-hosted Checkout.\n *\n * @module @inttegro/vue\n */\nexport { Checkout, type CheckoutExposed, type CheckoutProps } from './Checkout'\nexport type {\n CheckoutAppearance,\n CheckoutErrorEvent,\n CheckoutEvent,\n CheckoutFeatures,\n CheckoutTheme,\n} from '@inttegro/js'\n","import {\n loadInttegro,\n type CheckoutAppearance,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutFeatures,\n} from '@inttegro/js'\nimport {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` replaces the hosted\n * controller. Changing `appearance` or `locale` updates it in place,\n * preserving payer progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutProps {\n /** Initial and reactive theme preference for hosted Checkout. */\n appearance?: CheckoutAppearance | undefined\n /** Hosted Checkout content and actions. Changing it replaces the controller. */\n features?: CheckoutFeatures | undefined\n /** Initial and reactive BCP 47 locale preference. */\n locale?: string | undefined\n /** Client-safe reference for the finalized Order being paid. */\n orderId: string\n /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n timeout?: number | undefined\n /** Accessible iframe title; defaults to `Checkout`. */\n title?: string | undefined\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */\n focus(): void\n /** Applies a new locale or theme when a controller exists. */\n update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a Vue application.\n *\n * The component owns the loader and controller lifecycle. It emits:\n *\n * - `ready` once the iframe is interactive;\n * - `event` for every sanitized Checkout lifecycle event;\n * - `completed` at the successful hosted terminal state; and\n * - `error` for loader/mount failures or sanitized hosted errors.\n *\n * Keep the component mounted while payment or confirmation is pending. On\n * unmount it removes its event subscription and permanently destroys the\n * controller.\n *\n * @example Use native Vue events\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue'\n * import { Checkout, type CheckoutExposed } from '@inttegro/vue'\n *\n * const props = defineProps<{ orderId: string }>()\n * const checkout = ref<CheckoutExposed>()\n * </script>\n *\n * <template>\n * <Checkout\n * ref=\"checkout\"\n * :order-id=\"props.orderId\"\n * :appearance=\"{ theme: 'system' }\"\n * @ready=\"checkout?.focus()\"\n * @completed=\"$router.push('/orders/complete')\"\n * @error=\"reportCheckoutError\"\n * />\n * </template>\n * ```\n *\n * @category Vue\n */\nexport const Checkout = defineComponent({\n name: 'InttegroCheckout',\n props: {\n appearance: Object as PropType<CheckoutAppearance>,\n features: Object as PropType<CheckoutFeatures>,\n locale: String,\n orderId: { type: String, required: true },\n timeout: Number,\n title: String,\n },\n emits: {\n completed: (_event: Extract<CheckoutEvent, { type: 'completed' }>) => true,\n error: (_event: CheckoutErrorEvent | Error) => true,\n event: (_event: CheckoutEvent) => true,\n ready: (_event: Extract<CheckoutEvent, { type: 'ready' }>) => true,\n },\n setup(props, { emit, expose }) {\n const container = ref<HTMLElement>()\n let checkout: CheckoutController | undefined\n let unsubscribe: (() => void) | undefined\n let generation = 0\n\n function destroyCheckout() {\n generation += 1\n unsubscribe?.()\n unsubscribe = undefined\n checkout?.destroy()\n checkout = undefined\n }\n\n async function mountCheckout() {\n destroyCheckout()\n const target = container.value\n const currentGeneration = generation\n if (!target) return\n try {\n const inttegro = await loadInttegro()\n if (generation !== currentGeneration || !inttegro) return\n const instance = inttegro.createCheckout(\n definedOptions({\n appearance: props.appearance,\n features: props.features,\n locale: props.locale,\n orderId: props.orderId,\n timeout: props.timeout,\n title: props.title,\n }),\n )\n if (generation !== currentGeneration) {\n instance.destroy()\n return\n }\n checkout = instance\n unsubscribe = instance.onEvent((event) => {\n emit('event', event)\n if (event.type === 'ready') emit('ready', event)\n if (event.type === 'completed') emit('completed', event)\n if (event.type === 'error') emit('error', event)\n })\n await instance.mount(target)\n } catch (error: unknown) {\n if (generation !== currentGeneration) return\n emit(\n 'error',\n error instanceof Error\n ? error\n : new Error('Checkout failed to load.'),\n )\n }\n }\n\n onMounted(mountCheckout)\n onBeforeUnmount(destroyCheckout)\n\n watch(\n () => [props.features, props.orderId, props.timeout, props.title],\n () => void mountCheckout(),\n )\n watch(\n () => [props.appearance, props.locale] as const,\n ([appearance, locale]) => {\n checkout?.update(definedOptions({ appearance, locale }))\n },\n { deep: true },\n )\n\n expose({\n focus: () => checkout?.focus(),\n update: (options: Parameters<CheckoutController['update']>[0]) =>\n checkout?.update(options),\n })\n\n return () => h('div', { ref: container })\n },\n})\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n return Object.fromEntries(\n Object.entries(options).filter(([, value]) => value !== undefined),\n ) as Value\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gBAOO;AACP,iBAQO;AA4EA,IAAM,eAAW,4BAAgB;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,IACxC,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,WAAW,CAAC,WAA0D;AAAA,IACtE,OAAO,CAAC,WAAuC;AAAA,IAC/C,OAAO,CAAC,WAA0B;AAAA,IAClC,OAAO,CAAC,WAAsD;AAAA,EAChE;AAAA,EACA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,gBAAY,gBAAiB;AACnC,QAAI;AACJ,QAAI;AACJ,QAAI,aAAa;AAEjB,aAAS,kBAAkB;AACzB,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,gBAAU,QAAQ;AAClB,iBAAW;AAAA,IACb;AAEA,mBAAe,gBAAgB;AAC7B,sBAAgB;AAChB,YAAM,SAAS,UAAU;AACzB,YAAM,oBAAoB;AAC1B,UAAI,CAAC,OAAQ;AACb,UAAI;AACF,cAAM,WAAW,UAAM,wBAAa;AACpC,YAAI,eAAe,qBAAqB,CAAC,SAAU;AACnD,cAAM,WAAW,SAAS;AAAA,UACxB,eAAe;AAAA,YACb,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,QAAQ,MAAM;AAAA,YACd,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,OAAO,MAAM;AAAA,UACf,CAAC;AAAA,QACH;AACA,YAAI,eAAe,mBAAmB;AACpC,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,mBAAW;AACX,sBAAc,SAAS,QAAQ,CAAC,UAAU;AACxC,eAAK,SAAS,KAAK;AACnB,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAC/C,cAAI,MAAM,SAAS,YAAa,MAAK,aAAa,KAAK;AACvD,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAAA,QACjD,CAAC;AACD,cAAM,SAAS,MAAM,MAAM;AAAA,MAC7B,SAAS,OAAgB;AACvB,YAAI,eAAe,kBAAmB;AACtC;AAAA,UACE;AAAA,UACA,iBAAiB,QACb,QACA,IAAI,MAAM,0BAA0B;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,8BAAU,aAAa;AACvB,oCAAgB,eAAe;AAE/B;AAAA,MACE,MAAM,CAAC,MAAM,UAAU,MAAM,SAAS,MAAM,SAAS,MAAM,KAAK;AAAA,MAChE,MAAM,KAAK,cAAc;AAAA,IAC3B;AACA;AAAA,MACE,MAAM,CAAC,MAAM,YAAY,MAAM,MAAM;AAAA,MACrC,CAAC,CAAC,YAAY,MAAM,MAAM;AACxB,kBAAU,OAAO,eAAe,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,MACzD;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,WAAO;AAAA,MACL,OAAO,MAAM,UAAU,MAAM;AAAA,MAC7B,QAAQ,CAAC,YACP,UAAU,OAAO,OAAO;AAAA,IAC5B,CAAC;AAED,WAAO,UAAM,cAAE,OAAO,EAAE,KAAK,UAAU,CAAC;AAAA,EAC1C;AACF,CAAC;AAED,SAAS,eAAqC,SAAuB;AACnE,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACnE;AACF;","names":[]}
|
package/dist/index.d.cts
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import * as _inttegro_js from '@inttegro/js';
|
|
2
|
-
import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
3
|
-
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
|
|
2
|
+
import { CheckoutAppearance, CheckoutFeatures, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
3
|
+
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
|
|
4
4
|
import * as vue from 'vue';
|
|
5
5
|
import { PropType } from 'vue';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Props accepted by the Inttegro {@link Checkout} component.
|
|
9
9
|
*
|
|
10
|
-
* Changing `orderId`, `timeout`, or `title` replaces the hosted
|
|
11
|
-
* Changing `appearance` or `locale` updates it in place,
|
|
12
|
-
* progress where the hosted flow permits.
|
|
10
|
+
* Changing `features`, `orderId`, `timeout`, or `title` replaces the hosted
|
|
11
|
+
* controller. Changing `appearance` or `locale` updates it in place,
|
|
12
|
+
* preserving payer progress where the hosted flow permits.
|
|
13
13
|
*
|
|
14
14
|
* @category Vue
|
|
15
15
|
*/
|
|
16
16
|
interface CheckoutProps {
|
|
17
17
|
/** Initial and reactive theme preference for hosted Checkout. */
|
|
18
18
|
appearance?: CheckoutAppearance | undefined;
|
|
19
|
+
/** Hosted Checkout content and actions. Changing it replaces the controller. */
|
|
20
|
+
features?: CheckoutFeatures | undefined;
|
|
19
21
|
/** Initial and reactive BCP 47 locale preference. */
|
|
20
22
|
locale?: string | undefined;
|
|
21
23
|
/** Client-safe reference for the finalized Order being paid. */
|
|
@@ -76,6 +78,7 @@ interface CheckoutExposed {
|
|
|
76
78
|
*/
|
|
77
79
|
declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
78
80
|
appearance: PropType<CheckoutAppearance>;
|
|
81
|
+
features: PropType<CheckoutFeatures>;
|
|
79
82
|
locale: StringConstructor;
|
|
80
83
|
orderId: {
|
|
81
84
|
type: StringConstructor;
|
|
@@ -96,6 +99,7 @@ declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
96
99
|
}>) => true;
|
|
97
100
|
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
98
101
|
appearance: PropType<CheckoutAppearance>;
|
|
102
|
+
features: PropType<CheckoutFeatures>;
|
|
99
103
|
locale: StringConstructor;
|
|
100
104
|
orderId: {
|
|
101
105
|
type: StringConstructor;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,21 +1,23 @@
|
|
|
1
1
|
import * as _inttegro_js from '@inttegro/js';
|
|
2
|
-
import { CheckoutAppearance, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
3
|
-
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutTheme } from '@inttegro/js';
|
|
2
|
+
import { CheckoutAppearance, CheckoutFeatures, CheckoutEvent, CheckoutErrorEvent, CheckoutController } from '@inttegro/js';
|
|
3
|
+
export { CheckoutAppearance, CheckoutErrorEvent, CheckoutEvent, CheckoutFeatures, CheckoutTheme } from '@inttegro/js';
|
|
4
4
|
import * as vue from 'vue';
|
|
5
5
|
import { PropType } from 'vue';
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Props accepted by the Inttegro {@link Checkout} component.
|
|
9
9
|
*
|
|
10
|
-
* Changing `orderId`, `timeout`, or `title` replaces the hosted
|
|
11
|
-
* Changing `appearance` or `locale` updates it in place,
|
|
12
|
-
* progress where the hosted flow permits.
|
|
10
|
+
* Changing `features`, `orderId`, `timeout`, or `title` replaces the hosted
|
|
11
|
+
* controller. Changing `appearance` or `locale` updates it in place,
|
|
12
|
+
* preserving payer progress where the hosted flow permits.
|
|
13
13
|
*
|
|
14
14
|
* @category Vue
|
|
15
15
|
*/
|
|
16
16
|
interface CheckoutProps {
|
|
17
17
|
/** Initial and reactive theme preference for hosted Checkout. */
|
|
18
18
|
appearance?: CheckoutAppearance | undefined;
|
|
19
|
+
/** Hosted Checkout content and actions. Changing it replaces the controller. */
|
|
20
|
+
features?: CheckoutFeatures | undefined;
|
|
19
21
|
/** Initial and reactive BCP 47 locale preference. */
|
|
20
22
|
locale?: string | undefined;
|
|
21
23
|
/** Client-safe reference for the finalized Order being paid. */
|
|
@@ -76,6 +78,7 @@ interface CheckoutExposed {
|
|
|
76
78
|
*/
|
|
77
79
|
declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
78
80
|
appearance: PropType<CheckoutAppearance>;
|
|
81
|
+
features: PropType<CheckoutFeatures>;
|
|
79
82
|
locale: StringConstructor;
|
|
80
83
|
orderId: {
|
|
81
84
|
type: StringConstructor;
|
|
@@ -96,6 +99,7 @@ declare const Checkout: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
|
96
99
|
}>) => true;
|
|
97
100
|
}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
98
101
|
appearance: PropType<CheckoutAppearance>;
|
|
102
|
+
features: PropType<CheckoutFeatures>;
|
|
99
103
|
locale: StringConstructor;
|
|
100
104
|
orderId: {
|
|
101
105
|
type: StringConstructor;
|
package/dist/index.js
CHANGED
|
@@ -14,6 +14,7 @@ var Checkout = defineComponent({
|
|
|
14
14
|
name: "InttegroCheckout",
|
|
15
15
|
props: {
|
|
16
16
|
appearance: Object,
|
|
17
|
+
features: Object,
|
|
17
18
|
locale: String,
|
|
18
19
|
orderId: { type: String, required: true },
|
|
19
20
|
timeout: Number,
|
|
@@ -48,6 +49,7 @@ var Checkout = defineComponent({
|
|
|
48
49
|
const instance = inttegro.createCheckout(
|
|
49
50
|
definedOptions({
|
|
50
51
|
appearance: props.appearance,
|
|
52
|
+
features: props.features,
|
|
51
53
|
locale: props.locale,
|
|
52
54
|
orderId: props.orderId,
|
|
53
55
|
timeout: props.timeout,
|
|
@@ -77,7 +79,7 @@ var Checkout = defineComponent({
|
|
|
77
79
|
onMounted(mountCheckout);
|
|
78
80
|
onBeforeUnmount(destroyCheckout);
|
|
79
81
|
watch(
|
|
80
|
-
() => [props.orderId, props.timeout, props.title],
|
|
82
|
+
() => [props.features, props.orderId, props.timeout, props.title],
|
|
81
83
|
() => void mountCheckout()
|
|
82
84
|
);
|
|
83
85
|
watch(
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Checkout.ts"],"sourcesContent":["import {\n loadInttegro,\n type CheckoutAppearance,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n} from '@inttegro/js'\nimport {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `orderId`, `timeout`, or `title` replaces the hosted
|
|
1
|
+
{"version":3,"sources":["../src/Checkout.ts"],"sourcesContent":["import {\n loadInttegro,\n type CheckoutAppearance,\n type CheckoutController,\n type CheckoutErrorEvent,\n type CheckoutEvent,\n type CheckoutFeatures,\n} from '@inttegro/js'\nimport {\n defineComponent,\n h,\n onBeforeUnmount,\n onMounted,\n ref,\n watch,\n type PropType,\n} from 'vue'\n\n/**\n * Props accepted by the Inttegro {@link Checkout} component.\n *\n * Changing `features`, `orderId`, `timeout`, or `title` replaces the hosted\n * controller. Changing `appearance` or `locale` updates it in place,\n * preserving payer progress where the hosted flow permits.\n *\n * @category Vue\n */\nexport interface CheckoutProps {\n /** Initial and reactive theme preference for hosted Checkout. */\n appearance?: CheckoutAppearance | undefined\n /** Hosted Checkout content and actions. Changing it replaces the controller. */\n features?: CheckoutFeatures | undefined\n /** Initial and reactive BCP 47 locale preference. */\n locale?: string | undefined\n /** Client-safe reference for the finalized Order being paid. */\n orderId: string\n /** Mount timeout from 1,000–60,000 ms; defaults to 15,000 ms. */\n timeout?: number | undefined\n /** Accessible iframe title; defaults to `Checkout`. */\n title?: string | undefined\n}\n\n/**\n * Imperative operations exposed by {@link Checkout} through a Vue template ref.\n *\n * @category Vue\n */\nexport interface CheckoutExposed {\n /** Moves focus into Checkout when the controller is ready; otherwise does nothing. */\n focus(): void\n /** Applies a new locale or theme when a controller exists. */\n update(options: Parameters<CheckoutController['update']>[0]): void\n}\n\n/**\n * Embeds Inttegro-hosted Checkout in a Vue application.\n *\n * The component owns the loader and controller lifecycle. It emits:\n *\n * - `ready` once the iframe is interactive;\n * - `event` for every sanitized Checkout lifecycle event;\n * - `completed` at the successful hosted terminal state; and\n * - `error` for loader/mount failures or sanitized hosted errors.\n *\n * Keep the component mounted while payment or confirmation is pending. On\n * unmount it removes its event subscription and permanently destroys the\n * controller.\n *\n * @example Use native Vue events\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue'\n * import { Checkout, type CheckoutExposed } from '@inttegro/vue'\n *\n * const props = defineProps<{ orderId: string }>()\n * const checkout = ref<CheckoutExposed>()\n * </script>\n *\n * <template>\n * <Checkout\n * ref=\"checkout\"\n * :order-id=\"props.orderId\"\n * :appearance=\"{ theme: 'system' }\"\n * @ready=\"checkout?.focus()\"\n * @completed=\"$router.push('/orders/complete')\"\n * @error=\"reportCheckoutError\"\n * />\n * </template>\n * ```\n *\n * @category Vue\n */\nexport const Checkout = defineComponent({\n name: 'InttegroCheckout',\n props: {\n appearance: Object as PropType<CheckoutAppearance>,\n features: Object as PropType<CheckoutFeatures>,\n locale: String,\n orderId: { type: String, required: true },\n timeout: Number,\n title: String,\n },\n emits: {\n completed: (_event: Extract<CheckoutEvent, { type: 'completed' }>) => true,\n error: (_event: CheckoutErrorEvent | Error) => true,\n event: (_event: CheckoutEvent) => true,\n ready: (_event: Extract<CheckoutEvent, { type: 'ready' }>) => true,\n },\n setup(props, { emit, expose }) {\n const container = ref<HTMLElement>()\n let checkout: CheckoutController | undefined\n let unsubscribe: (() => void) | undefined\n let generation = 0\n\n function destroyCheckout() {\n generation += 1\n unsubscribe?.()\n unsubscribe = undefined\n checkout?.destroy()\n checkout = undefined\n }\n\n async function mountCheckout() {\n destroyCheckout()\n const target = container.value\n const currentGeneration = generation\n if (!target) return\n try {\n const inttegro = await loadInttegro()\n if (generation !== currentGeneration || !inttegro) return\n const instance = inttegro.createCheckout(\n definedOptions({\n appearance: props.appearance,\n features: props.features,\n locale: props.locale,\n orderId: props.orderId,\n timeout: props.timeout,\n title: props.title,\n }),\n )\n if (generation !== currentGeneration) {\n instance.destroy()\n return\n }\n checkout = instance\n unsubscribe = instance.onEvent((event) => {\n emit('event', event)\n if (event.type === 'ready') emit('ready', event)\n if (event.type === 'completed') emit('completed', event)\n if (event.type === 'error') emit('error', event)\n })\n await instance.mount(target)\n } catch (error: unknown) {\n if (generation !== currentGeneration) return\n emit(\n 'error',\n error instanceof Error\n ? error\n : new Error('Checkout failed to load.'),\n )\n }\n }\n\n onMounted(mountCheckout)\n onBeforeUnmount(destroyCheckout)\n\n watch(\n () => [props.features, props.orderId, props.timeout, props.title],\n () => void mountCheckout(),\n )\n watch(\n () => [props.appearance, props.locale] as const,\n ([appearance, locale]) => {\n checkout?.update(definedOptions({ appearance, locale }))\n },\n { deep: true },\n )\n\n expose({\n focus: () => checkout?.focus(),\n update: (options: Parameters<CheckoutController['update']>[0]) =>\n checkout?.update(options),\n })\n\n return () => h('div', { ref: container })\n },\n})\n\nfunction definedOptions<Value extends object>(options: Value): Value {\n return Object.fromEntries(\n Object.entries(options).filter(([, value]) => value !== undefined),\n ) as Value\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAMK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA4EA,IAAM,WAAW,gBAAgB;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,IACL,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA,IACxC,SAAS;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EACA,OAAO;AAAA,IACL,WAAW,CAAC,WAA0D;AAAA,IACtE,OAAO,CAAC,WAAuC;AAAA,IAC/C,OAAO,CAAC,WAA0B;AAAA,IAClC,OAAO,CAAC,WAAsD;AAAA,EAChE;AAAA,EACA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,YAAY,IAAiB;AACnC,QAAI;AACJ,QAAI;AACJ,QAAI,aAAa;AAEjB,aAAS,kBAAkB;AACzB,oBAAc;AACd,oBAAc;AACd,oBAAc;AACd,gBAAU,QAAQ;AAClB,iBAAW;AAAA,IACb;AAEA,mBAAe,gBAAgB;AAC7B,sBAAgB;AAChB,YAAM,SAAS,UAAU;AACzB,YAAM,oBAAoB;AAC1B,UAAI,CAAC,OAAQ;AACb,UAAI;AACF,cAAM,WAAW,MAAM,aAAa;AACpC,YAAI,eAAe,qBAAqB,CAAC,SAAU;AACnD,cAAM,WAAW,SAAS;AAAA,UACxB,eAAe;AAAA,YACb,YAAY,MAAM;AAAA,YAClB,UAAU,MAAM;AAAA,YAChB,QAAQ,MAAM;AAAA,YACd,SAAS,MAAM;AAAA,YACf,SAAS,MAAM;AAAA,YACf,OAAO,MAAM;AAAA,UACf,CAAC;AAAA,QACH;AACA,YAAI,eAAe,mBAAmB;AACpC,mBAAS,QAAQ;AACjB;AAAA,QACF;AACA,mBAAW;AACX,sBAAc,SAAS,QAAQ,CAAC,UAAU;AACxC,eAAK,SAAS,KAAK;AACnB,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAC/C,cAAI,MAAM,SAAS,YAAa,MAAK,aAAa,KAAK;AACvD,cAAI,MAAM,SAAS,QAAS,MAAK,SAAS,KAAK;AAAA,QACjD,CAAC;AACD,cAAM,SAAS,MAAM,MAAM;AAAA,MAC7B,SAAS,OAAgB;AACvB,YAAI,eAAe,kBAAmB;AACtC;AAAA,UACE;AAAA,UACA,iBAAiB,QACb,QACA,IAAI,MAAM,0BAA0B;AAAA,QAC1C;AAAA,MACF;AAAA,IACF;AAEA,cAAU,aAAa;AACvB,oBAAgB,eAAe;AAE/B;AAAA,MACE,MAAM,CAAC,MAAM,UAAU,MAAM,SAAS,MAAM,SAAS,MAAM,KAAK;AAAA,MAChE,MAAM,KAAK,cAAc;AAAA,IAC3B;AACA;AAAA,MACE,MAAM,CAAC,MAAM,YAAY,MAAM,MAAM;AAAA,MACrC,CAAC,CAAC,YAAY,MAAM,MAAM;AACxB,kBAAU,OAAO,eAAe,EAAE,YAAY,OAAO,CAAC,CAAC;AAAA,MACzD;AAAA,MACA,EAAE,MAAM,KAAK;AAAA,IACf;AAEA,WAAO;AAAA,MACL,OAAO,MAAM,UAAU,MAAM;AAAA,MAC7B,QAAQ,CAAC,YACP,UAAU,OAAO,OAAO;AAAA,IAC5B,CAAC;AAED,WAAO,MAAM,EAAE,OAAO,EAAE,KAAK,UAAU,CAAC;AAAA,EAC1C;AACF,CAAC;AAED,SAAS,eAAqC,SAAuB;AACnE,SAAO,OAAO;AAAA,IACZ,OAAO,QAAQ,OAAO,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AAAA,EACnE;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inttegro/vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Vue components for Inttegro hosted workflows",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"typecheck": "tsc --noEmit"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@inttegro/js": "0.
|
|
35
|
+
"@inttegro/js": "0.2.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"vue": ">=3.4"
|