@wetransform/vue 1.0.1 → 1.1.1

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.
Files changed (4) hide show
  1. package/README.md +46 -38
  2. package/dist/index.d.mts +8 -58
  3. package/dist/index.mjs +22 -6
  4. package/package.json +9 -9
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @wetransform/vue
2
2
 
3
- Vue 3 wrapper around `@wetransform/core` with a composable API and a renderless integration component.
3
+ Vue 3 wrapper around `@wetransform/core` with a composable API and a component.
4
4
 
5
5
  ## Installation
6
6
 
@@ -8,48 +8,15 @@ Vue 3 wrapper around `@wetransform/core` with a composable API and a renderless
8
8
  npm install @wetransform/vue
9
9
  ```
10
10
 
11
- ## Composable usage
12
-
13
- ```ts
14
- import { useWeTransform } from '@wetransform/vue'
15
-
16
- const { open, close, destroy, isOpen, weTransformInstance, on } = useWeTransform({
17
- organizationHandle: 'acme',
18
- authentication: {
19
- customerId: 'customer-id',
20
- signature: 'signed-token',
21
- },
22
- })
23
-
24
- on('successSubmit', ({ redirectUrl }) => {
25
- window.location.href = redirectUrl
26
- })
27
-
28
- await open()
29
- await close()
30
- await destroy()
31
-
32
- console.log(isOpen.value)
33
- console.log(weTransformInstance.value)
34
- ```
35
-
36
- `useWeTransform(config)` returns:
37
-
38
- - `weTransformInstance`: readonly `Ref<WeTransformInstance | null>`
39
- - `isOpen`: readonly `Ref<boolean>`
40
- - `open()`: opens the SDK
41
- - `close()`: closes the SDK
42
- - `destroy()`: destroys the SDK instance (idempotent)
43
- - `on(event, handler)`: subscribes to SDK events and returns an unsubscribe function
44
-
45
11
  ## Component usage
46
12
 
47
13
  ```vue
48
14
  <script setup lang="ts">
49
15
  import { ref } from 'vue'
50
- import { WeTransformSdk, type WeTransformConfig } from '@wetransform/vue'
16
+ import { WeTransformSdk, type WeTransformConfig, type SupportedLocales } from '@wetransform/vue'
51
17
 
52
18
  const isSdkOpen = ref(false)
19
+ const locale = ref<SupportedLocales>('en')
53
20
 
54
21
  const config: WeTransformConfig = {
55
22
  organizationHandle: 'acme',
@@ -66,10 +33,12 @@ const onSuccessSubmit = ({ redirectUrl }: { redirectUrl: string }) => {
66
33
 
67
34
  <template>
68
35
  <button type="button" @click="isSdkOpen = true">Open Sender</button>
36
+ <button type="button" @click="locale = locale === 'en' ? 'fr' : 'en'">Toggle locale</button>
69
37
 
70
38
  <WeTransformSdk
71
39
  :config="config"
72
40
  v-model:open="isSdkOpen"
41
+ :locale="locale"
73
42
  :autoOpen="false"
74
43
  @successSubmit="onSuccessSubmit"
75
44
  />
@@ -80,9 +49,10 @@ const onSuccessSubmit = ({ redirectUrl }: { redirectUrl: string }) => {
80
49
 
81
50
  Props:
82
51
 
83
- - `config` (required): SDK configuration
52
+ - `config` (required): SDK configuration (excludes `locale`; use the `locale` prop instead)
84
53
  - `open` (optional): controlled open state (for `v-model:open`)
85
54
  - `autoOpen` (optional, default `false`): opens on mount
55
+ - `locale` (optional): active locale (`'en'` | `'fr'`); reactive — changing this prop calls `setLocale` on the SDK
86
56
 
87
57
  Emits:
88
58
 
@@ -94,6 +64,42 @@ Emits:
94
64
  - `successSubmit`
95
65
  - `error`
96
66
 
67
+ ## Composable usage
68
+
69
+ ```ts
70
+ import { useWeTransform } from '@wetransform/vue'
71
+
72
+ const { open, close, destroy, setLocale, isOpen, weTransformInstance, on } = useWeTransform({
73
+ organizationHandle: 'acme',
74
+ authentication: {
75
+ customerId: 'customer-id',
76
+ signature: 'signed-token',
77
+ },
78
+ })
79
+
80
+ on('successSubmit', ({ redirectUrl }) => {
81
+ window.location.href = redirectUrl
82
+ })
83
+
84
+ await open()
85
+ await setLocale('fr')
86
+ await close()
87
+ await destroy()
88
+
89
+ console.log(isOpen.value)
90
+ console.log(weTransformInstance.value)
91
+ ```
92
+
93
+ `useWeTransform(config)` returns:
94
+
95
+ - `weTransformInstance`: readonly `Ref<WeTransformInstance | null>`
96
+ - `isOpen`: readonly `Ref<boolean>`
97
+ - `open()`: opens the SDK
98
+ - `close()`: closes the SDK
99
+ - `destroy()`: destroys the SDK instance (idempotent)
100
+ - `setLocale(locale)`: switches the locale (`'en'` | `'fr'`)
101
+ - `on(event, handler)`: subscribes to SDK events and returns an unsubscribe function
102
+
97
103
  ## Re-exports
98
104
 
99
105
  `@wetransform/vue` also re-exports these symbols from `@wetransform/core`:
@@ -102,9 +108,11 @@ Emits:
102
108
  - `WeTransformConfig`
103
109
  - `WeTransformEventMap`
104
110
  - `WeTransformInstance`
111
+ - `SupportedLocales`
105
112
 
106
113
  ## Notes
107
114
 
108
115
  - Wrapper lifecycle behavior forwards to core and does not modify core semantics.
109
116
  - `config` is used at instantiation time. For structural config changes, remount with a Vue `:key`.
110
- - The component forces the SDK `mountElement` to `weTransform_iframeContainer`.
117
+ - The component forces the SDK `mountElement` internally; do not pass `mountElement` in `config`.
118
+ - The `locale` prop (component) and `setLocale` (composable) can be called at any time, including before or while the SDK is open.
package/dist/index.d.mts CHANGED
@@ -1,68 +1,18 @@
1
- import { WeTransformConfig, WeTransformConfig as WeTransformConfig$1, WeTransformEventMap, WeTransformEventMap as WeTransformEventMap$1, WeTransformInstance, createWeTransform } from "@wetransform/core";
2
- import * as vue from "vue";
3
- import { PropType } from "vue";
1
+ import { SupportedLocales, SupportedLocales as SupportedLocales$1, WeTransformConfig, WeTransformConfig as WeTransformConfig$1, WeTransformEventMap, WeTransformEventMap as WeTransformEventMap$1, WeTransformInstance, createWeTransform } from "@wetransform/core";
2
+ import { MaybeRefOrGetter } from "vue";
4
3
 
5
4
  //#region src/composables.d.ts
6
- declare const useWeTransform: (config: WeTransformConfig$1) => {
7
- weTransformInstance: Readonly<vue.Ref<{
8
- readonly open: () => Promise<void>;
9
- readonly close: () => Promise<void>;
10
- readonly destroy: () => Promise<void>;
11
- readonly on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => () => void;
12
- } | null, {
13
- readonly open: () => Promise<void>;
14
- readonly close: () => Promise<void>;
15
- readonly destroy: () => Promise<void>;
16
- readonly on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => () => void;
17
- } | null>>;
18
- isOpen: Readonly<vue.Ref<boolean, boolean>>;
5
+ declare const useWeTransform: (config: MaybeRefOrGetter<WeTransformConfig$1>) => {
6
+ weTransformInstance: any;
7
+ isOpen: any;
19
8
  open: () => Promise<void>;
20
9
  close: () => Promise<void>;
21
10
  destroy: () => Promise<void>;
22
11
  on: <K extends keyof WeTransformEventMap$1>(event: K, handler: WeTransformEventMap$1[K]) => (() => void);
12
+ setLocale: (locale: SupportedLocales$1) => Promise<void>;
23
13
  };
24
14
  //#endregion
25
15
  //#region src/components/WeTransformSdk.d.ts
26
- type WeTransformComponentConfig = Omit<WeTransformConfig$1, 'mountElement'>;
27
- declare const WeTransformSdk: vue.DefineComponent<vue.ExtractPropTypes<{
28
- config: {
29
- type: PropType<WeTransformComponentConfig>;
30
- required: true;
31
- };
32
- open: {
33
- type: BooleanConstructor;
34
- required: false;
35
- };
36
- autoOpen: {
37
- type: BooleanConstructor;
38
- default: boolean;
39
- };
40
- }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
41
- [key: string]: any;
42
- }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:open" | "open" | "close" | "destroy" | "onReady" | "successSubmit" | "error")[], "update:open" | "open" | "close" | "destroy" | "onReady" | "successSubmit" | "error", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
43
- config: {
44
- type: PropType<WeTransformComponentConfig>;
45
- required: true;
46
- };
47
- open: {
48
- type: BooleanConstructor;
49
- required: false;
50
- };
51
- autoOpen: {
52
- type: BooleanConstructor;
53
- default: boolean;
54
- };
55
- }>> & Readonly<{
56
- "onUpdate:open"?: ((...args: any[]) => any) | undefined;
57
- onOpen?: ((...args: any[]) => any) | undefined;
58
- onClose?: ((...args: any[]) => any) | undefined;
59
- onDestroy?: ((...args: any[]) => any) | undefined;
60
- onOnReady?: ((...args: any[]) => any) | undefined;
61
- onSuccessSubmit?: ((...args: any[]) => any) | undefined;
62
- onError?: ((...args: any[]) => any) | undefined;
63
- }>, {
64
- open: boolean;
65
- autoOpen: boolean;
66
- }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
16
+ declare const WeTransformSdk: any;
67
17
  //#endregion
68
- export { type WeTransformConfig, type WeTransformEventMap, type WeTransformInstance, WeTransformSdk, createWeTransform, useWeTransform };
18
+ export { type SupportedLocales, type WeTransformConfig, type WeTransformEventMap, type WeTransformInstance, WeTransformSdk, createWeTransform, useWeTransform };
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import { createWeTransform, createWeTransform as createWeTransform$1 } from "@wetransform/core";
2
- import { defineComponent, h, onMounted, onUnmounted, readonly, ref, shallowRef, watch } from "vue";
2
+ import { defineComponent, h, onMounted, onUnmounted, readonly, ref, shallowRef, toValue, watch } from "vue";
3
3
  //#region src/composables.ts
4
4
  const useWeTransform = (config) => {
5
5
  const sdk = shallowRef(null);
@@ -9,7 +9,7 @@ const useWeTransform = (config) => {
9
9
  const externalEvents = /* @__PURE__ */ new Set();
10
10
  const initSdk = () => {
11
11
  if (sdk.value) return sdk.value;
12
- const instance = createWeTransform$1(config);
12
+ const instance = createWeTransform$1(toValue(config));
13
13
  internalEvents.push(instance.on("open", () => {
14
14
  isOpen.value = true;
15
15
  }), instance.on("close", () => {
@@ -51,6 +51,9 @@ const useWeTransform = (config) => {
51
51
  });
52
52
  return destroyPromise;
53
53
  };
54
+ const setLocale = async (locale) => {
55
+ await getActiveSdk().setLocale(locale);
56
+ };
54
57
  const on = (event, handler) => {
55
58
  const unsubscribe = (sdk.value || initSdk()).on(event, handler);
56
59
  externalEvents.add(unsubscribe);
@@ -68,7 +71,8 @@ const useWeTransform = (config) => {
68
71
  open,
69
72
  close,
70
73
  destroy,
71
- on
74
+ on,
75
+ setLocale
72
76
  };
73
77
  };
74
78
  //#endregion
@@ -87,6 +91,10 @@ const WeTransformSdk = defineComponent({
87
91
  autoOpen: {
88
92
  type: Boolean,
89
93
  default: false
94
+ },
95
+ locale: {
96
+ type: String,
97
+ required: false
90
98
  }
91
99
  },
92
100
  emits: [
@@ -99,9 +107,11 @@ const WeTransformSdk = defineComponent({
99
107
  "error"
100
108
  ],
101
109
  setup(props, { emit }) {
102
- const { isOpen, open, close, on } = useWeTransform({
110
+ const mountElementId = `weTransform_iframeContainer_${crypto?.randomUUID?.() || Math.random().toString(36).substring(2, 15)}`;
111
+ const { isOpen, open, close, setLocale, on } = useWeTransform({
103
112
  ...props.config,
104
- mountElement: "weTransform_iframeContainer"
113
+ mountElement: mountElementId,
114
+ locale: props.locale
105
115
  });
106
116
  const events = [
107
117
  on("open", () => emit("open")),
@@ -112,6 +122,9 @@ const WeTransformSdk = defineComponent({
112
122
  on("error", (payload) => emit("error", payload))
113
123
  ];
114
124
  onUnmounted(() => events.forEach((unSub) => unSub()));
125
+ watch(() => props.locale, (nextLocale) => {
126
+ if (nextLocale) setLocale(nextLocale);
127
+ });
115
128
  watch(() => props.open, (nextOpen) => {
116
129
  if (nextOpen === void 0 || nextOpen === isOpen.value) return;
117
130
  if (nextOpen) {
@@ -124,7 +137,10 @@ const WeTransformSdk = defineComponent({
124
137
  onMounted(() => {
125
138
  if (props.autoOpen && !isOpen.value) open();
126
139
  });
127
- return () => h("div", { id: "weTransform_iframeContainer" });
140
+ return () => h("div", {
141
+ id: mountElementId,
142
+ class: "weTransform_iframeContainer"
143
+ });
128
144
  }
129
145
  });
130
146
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wetransform/vue",
3
- "version": "1.0.1",
3
+ "version": "1.1.1",
4
4
  "license": "ISC",
5
5
  "files": [
6
6
  "dist/**"
@@ -13,18 +13,18 @@
13
13
  "access": "public"
14
14
  },
15
15
  "dependencies": {
16
- "vue": "^3.5.30",
17
- "@wetransform/core": "1.0.2"
16
+ "vue": "^3.5.32",
17
+ "@wetransform/core": "1.1.1"
18
18
  },
19
19
  "devDependencies": {
20
20
  "@types/node": "^24.12.0",
21
- "@vitejs/plugin-vue": "^6.0.5",
21
+ "@vitejs/plugin-vue": "^6.0.6",
22
22
  "@vue/test-utils": "^2.4.6",
23
- "jsdom": "^29.0.1",
24
- "typescript": "^5.9.3",
25
- "vite": "npm:@voidzero-dev/vite-plus-core@latest",
26
- "vite-plus": "^0.1.13",
27
- "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
23
+ "jsdom": "^29.0.2",
24
+ "typescript": "^6.0.2",
25
+ "vite": "npm:@voidzero-dev/vite-plus-core@0.1.16",
26
+ "vite-plus": "^0.1.16",
27
+ "vitest": "npm:@voidzero-dev/vite-plus-test@0.1.16"
28
28
  },
29
29
  "scripts": {
30
30
  "build": "VITE_MODE=production vp pack",