-
Sign Document
+
);
-}
+};
+
+export default YourComponent;
-export default App;
```
## Props
-- **`id`**: (string, required) The ID of the widget.
-- **`environment`**: (string, optional) The environment to use for the widget (`production` by default).
-- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully.
-- **`onError`**: (function, optional) Listener for errors that occur during the signing flow.
-- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default).
-- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view.
-- **`callToActionError`**: (string | function, optional) Main button action in the error view.
+- **`id`**: (string, required) The widget ID
+- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production.
+- **`onSignSuccess`**: (function, optional) Function will be called when the document is signed successfully
+- **`onSignError`**: (function, optional) Function that will be called whenever an error occurs during the signing flow.
+- **`successBtnText`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step
+- **`successBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to.
+- **`errorBtnAction`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
- **`containerClass`**: (string, optional) CSS class to be applied to the widget container.
+## Listeners
+
+In addition to using the `onSignSuccess` and `onSignError` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process.
# Important Information
diff --git a/packages/widget-react/lib/components/stencil-generated/index.ts b/packages/widget-react/lib/components/stencil-generated/index.ts
index e3a43da..170c911 100644
--- a/packages/widget-react/lib/components/stencil-generated/index.ts
+++ b/packages/widget-react/lib/components/stencil-generated/index.ts
@@ -3,7 +3,7 @@
/* auto-generated react proxies */
import { createReactComponent } from './react-component-lib';
-import type { JSX } from '@mifiel/widget-stencil';
+import type { JSX } from '@mifiel/widget';
diff --git a/packages/widget-react/lib/index.ts b/packages/widget-react/lib/index.ts
deleted file mode 100644
index 5dca24f..0000000
--- a/packages/widget-react/lib/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './components/stencil-generated';
-export { defineCustomElements } from '@mifiel/widget-stencil/dist/loader';
diff --git a/packages/widget-react/lib/index.tsx b/packages/widget-react/lib/index.tsx
new file mode 100644
index 0000000..9f688d7
--- /dev/null
+++ b/packages/widget-react/lib/index.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { MifielWidget as Widget } from './components/stencil-generated';
+import dataWidget from './config.json';
+
+export { defineCustomElements } from '@mifiel/widget/dist/loader';
+
+export const MifielWidget = (props) => {
+ const widgetVersion = `${dataWidget.appName}@${dataWidget.appVersion}`;
+
+ const newProps = {
+ ...props,
+ widgetVersion,
+ };
+
+ return
;
+};
diff --git a/packages/widget-react/package.json b/packages/widget-react/package.json
index 287ad16..6a4b2eb 100644
--- a/packages/widget-react/package.json
+++ b/packages/widget-react/package.json
@@ -20,12 +20,12 @@
},
"scripts": {
"prebuild": "rimraf dist",
- "build": "npm run tsc",
+ "build": "node utils/version.js && npm run tsc",
"tsc": "tsc -p . --outDir ./dist"
},
"types": "dist/types/index.d.ts",
"dependencies": {
- "@mifiel/widget-stencil": "^0.0.1"
+ "@mifiel/widget": "^0.0.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
diff --git a/packages/widget-react/tsconfig.json b/packages/widget-react/tsconfig.json
index 54ee597..58d94b8 100644
--- a/packages/widget-react/tsconfig.json
+++ b/packages/widget-react/tsconfig.json
@@ -1,13 +1,14 @@
{
"compilerOptions": {
"module": "es2015",
+ "resolveJsonModule": true,
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
- "sourceMap": true,
+ "sourceMap": false,
"outDir": "./dist",
"lib": ["dom", "es2015"],
"moduleResolution": "node",
@@ -17,6 +18,6 @@
"allowSyntheticDefaultImports": true,
"declarationDir": "./dist/types"
},
- "include": ["lib"],
+ "include": ["lib", "utils/version.js"],
"exclude": ["node_modules"]
}
diff --git a/packages/widget-react/utils/version.js b/packages/widget-react/utils/version.js
new file mode 100644
index 0000000..10b4fa3
--- /dev/null
+++ b/packages/widget-react/utils/version.js
@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJsonPath = path.resolve(__dirname, '../package.json');
+const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
+
+const { name, version } = packageJson;
+
+const configObject = {
+ appName: name,
+ appVersion: version,
+};
+
+const configFilePath = path.resolve(__dirname, '../lib/config.json');
+
+fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8');
diff --git a/packages/widget-stencil/.eslintrc.js b/packages/widget-stencil/.eslintrc.js
new file mode 100644
index 0000000..40d7690
--- /dev/null
+++ b/packages/widget-stencil/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+ extends: '../widget-react/.eslintrc.js',
+};
diff --git a/packages/widget-stencil/.gitignore b/packages/widget-stencil/.gitignore
index c3ea58a..9669763 100644
--- a/packages/widget-stencil/.gitignore
+++ b/packages/widget-stencil/.gitignore
@@ -24,3 +24,6 @@ $RECYCLE.BIN/
Thumbs.db
UserInterfaceState.xcuserstate
.env
+
+
+config.json
diff --git a/packages/widget-stencil/.npmignore b/packages/widget-stencil/.npmignore
new file mode 100644
index 0000000..782e6d1
--- /dev/null
+++ b/packages/widget-stencil/.npmignore
@@ -0,0 +1 @@
+stencil.config.js
diff --git a/packages/widget-stencil/CHANGELOG.md b/packages/widget-stencil/CHANGELOG.md
deleted file mode 100644
index e55881b..0000000
--- a/packages/widget-stencil/CHANGELOG.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.0.1](https://github.com/Mifiel/mifiel-js/compare/@mifiel/widget-stencil@1.0.1...@mifiel/widget-stencil@0.0.1) (2024-06-27)
-
-**Note:** Version bump only for package @mifiel/widget-stencil
-
-
-
-
-
-## 1.0.1 (2024-06-26)
-
-**Note:** Version bump only for package @mifiel/widget-stencil
diff --git a/packages/widget-stencil/README.md b/packages/widget-stencil/README.md
index 8226ddb..99dfee4 100644
--- a/packages/widget-stencil/README.md
+++ b/packages/widget-stencil/README.md
@@ -7,12 +7,28 @@ Web component for Mifiel Widget implemented with StencilJS.
Install the package using npm:
```bash
-npm install @mifiel/widget-stencil
+npm install @mifiel/widget
```
## Usage
-Use mifiel-widget component in your web application
+### Using the `mifiel-widget` Component
+
+To integrate the `mifiel-widget` component into your web application, follow these steps:
+
+1. **Using Node Modules:**
+ Compile the code and import our library using:
+ ```javascript
+ import { defineCustomElements } from '@mifiel/widget/loader';
+ ```
+
+2. **Using CDN:**
+ Alternatively, you can include the component via CDN:
+ ```javascript
+
+ ```
+ This method allows you to directly use the component without compilation steps.
+
```html
@@ -21,10 +37,13 @@ Use mifiel-widget component in your web application
Mifiel Widget Example
-
+
+
+
+
Sign Document
@@ -32,8 +51,8 @@ Use mifiel-widget component in your web application
id="your-widget-id"
environment="production"
success-btn-text="Proceed to next step"
- call-to-action-success="https://example.com/next-step"
- call-to-action-error="https://example.com/error-page"
+ success-btn-action="https://example.com/next-step"
+ error-btn-action="https://example.com/error-page"
container-class="widget-container"
>
@@ -50,8 +69,8 @@ Use mifiel-widget component in your web application
document.addEventListener('DOMContentLoaded', () => {
const widget = document.querySelector('mifiel-widget');
- widget.addEventListener('success', onSuccessHandler);
- widget.addEventListener('error', onErrorHandler);
+ widget.addEventListener('signSuccess', onSuccessHandler);
+ widget.addEventListener('signError', onErrorHandler);
});
@@ -61,9 +80,12 @@ Use mifiel-widget component in your web application
## Using with JavaScript
```javascript
-import { defineCustomElements } from '@mifiel/widget-stencil/loader';
+// Only use this if you are using node_modules.
+// Start
+import { defineCustomElements } from '@mifiel/widget/loader';
defineCustomElements(window);
+// End
function onSuccessHandler() {
console.log('Document signed successfully');
@@ -80,12 +102,12 @@ document.addEventListener('DOMContentLoaded', () => {
widget.setAttribute('id', 'your-widget-id');
widget.setAttribute('environment', 'production');
widget.setAttribute('success-btn-text', 'Proceed to next step');
- widget.setAttribute('call-to-action-success', 'https://example.com/next-step');
- widget.setAttribute('call-to-action-error', 'https://example.com/error-page');
+ widget.setAttribute('success-btn-action', 'https://example.com/next-step');
+ widget.setAttribute('error-btn-action', 'https://example.com/error-page');
widget.setAttribute('container-class', 'widget-container');
- widget.addEventListener('success', onSuccessHandler);
- widget.addEventListener('error', onErrorHandler);
+ widget.addEventListener('signSuccess', onSuccessHandler);
+ widget.addEventListener('signError', onErrorHandler);
document.body.appendChild(widget);
});
@@ -94,11 +116,15 @@ document.addEventListener('DOMContentLoaded', () => {
## Props
-- **`id`**: (string, required) The ID of the widget.
-- **`environment`**: (string, optional) The environment to use for the widget (`production` by default).
-- **`onSuccess`**: (function, optional) Function to be called when the document is signed successfully.
-- **`onError`**: (function, optional) Listener for errors that occur during the signing flow.
-- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default).
-- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view.
-- **`callToActionError`**: (string | function, optional) Main button action in the error view.
-- **`containerClass`**: (string, optional) CSS class to be applied to the widget container.
+- **`id`**: (string, required) The widget ID
+- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production.
+- **`on-sign-success`**: (function, optional) Function will be called when the document is signed successfully
+- **`on-sign-error`**: (function, optional) Function that will be called whenever an error occurs during the signing flow.
+- **`success-btn-text`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step
+- **`success-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to.
+- **`error-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
+- **`container-class`**: (string, optional) CSS class to be applied to the widget container.
+
+## Listeners
+
+In addition to using the `on-sign-success` and `on-sign-error` props, listeners for `signSuccess` and `signError` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process.
diff --git a/packages/widget-stencil/package.json b/packages/widget-stencil/package.json
index d6d62a7..3996d31 100644
--- a/packages/widget-stencil/package.json
+++ b/packages/widget-stencil/package.json
@@ -1,5 +1,5 @@
{
- "name": "@mifiel/widget-stencil",
+ "name": "@mifiel/widget",
"version": "0.0.1",
"description": "Mifiel Widget component built with StencilJS for easy integration into web applications.",
"license": "MIT",
@@ -20,15 +20,15 @@
},
"scripts": {
"prebuild": "rimraf dist",
- "build": "stencil build",
+ "build": "node src/utils/version.js && stencil build",
"start": "stencil build --dev --watch --serve"
},
"collection": "dist/collection/collection-manifest.json",
"collection:main": "dist/collection/index.js",
"exports": {
".": {
- "import": "./dist/esm/widget-stencil.js",
- "require": "./dist/cjs/widget-stencil.cjs.js",
+ "import": "./dist/esm/widget.js",
+ "require": "./dist/cjs/widget.cjs.js",
"types": "./dist/types/index.d.ts"
},
"./dist/loader": {
@@ -38,7 +38,7 @@
}
},
"types": "dist/types/index.d.ts",
- "unpkg": "dist/widget-stencil/widget-stencil.esm.js",
+ "unpkg": "dist/widget/widget.esm.js",
"devDependencies": {
"@stencil/angular-output-target": "^0.8.4",
"@stencil/core": "^4.7.0",
diff --git a/packages/widget-stencil/src/components.d.ts b/packages/widget-stencil/src/components.d.ts
index ceb5736..8f25afa 100644
--- a/packages/widget-stencil/src/components.d.ts
+++ b/packages/widget-stencil/src/components.d.ts
@@ -7,14 +7,6 @@
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
export namespace Components {
interface MifielWidget {
- /**
- * Main button action in the full screen error view. Can be a URL or a function.
- */
- "callToActionError"?: string | Function;
- /**
- * Main button action in the success view. Can be a URL or a function.
- */
- "callToActionSuccess"?: string | Function;
/**
* Set classes to the iframe container
*/
@@ -24,24 +16,36 @@ export namespace Components {
* @default 'production'
*/
"environment": keyof typeof environments;
+ /**
+ * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
+ */
+ "errorBtnAction"?: string | Function;
"getIframe": () => Promise
;
/**
- * The ID of the widget.
+ * The widget ID.
*/
"id": string;
/**
- * Listener for errors that occur during the signing flow.
+ * Function that will be called whenever an error occurs during the signing flow.
+ */
+ "onSignError"?: Function;
+ /**
+ * Function will be called when the document is signed successfully.
*/
- "onError"?: Function;
+ "onSignSuccess"?: Function;
/**
- * Function to be called when the document is signed successfully.
+ * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to.
*/
- "onSuccess"?: Function;
+ "successBtnAction"?: string | Function;
/**
* The text of the success button.
* @default 'Proceed to next step'
*/
"successBtnText": string;
+ /**
+ * Set widget version
+ */
+ "widgetVersion"?: string;
}
}
export interface MifielWidgetCustomEvent extends CustomEvent {
@@ -50,8 +54,10 @@ export interface MifielWidgetCustomEvent extends CustomEvent {
}
declare global {
interface HTMLMifielWidgetElementEventMap {
- "error": any;
- "success": any;
+ "signError": any;
+ "sign-error": any;
+ "signSuccess": any;
+ "sign-success": any;
}
interface HTMLMifielWidgetElement extends Components.MifielWidget, HTMLStencilElement {
addEventListener(type: K, listener: (this: HTMLMifielWidgetElement, ev: MifielWidgetCustomEvent) => any, options?: boolean | AddEventListenerOptions): void;
@@ -73,14 +79,6 @@ declare global {
}
declare namespace LocalJSX {
interface MifielWidget {
- /**
- * Main button action in the full screen error view. Can be a URL or a function.
- */
- "callToActionError"?: string | Function;
- /**
- * Main button action in the success view. Can be a URL or a function.
- */
- "callToActionSuccess"?: string | Function;
/**
* Set classes to the iframe container
*/
@@ -91,24 +89,38 @@ declare namespace LocalJSX {
*/
"environment"?: keyof typeof environments;
/**
- * The ID of the widget.
+ * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
+ */
+ "errorBtnAction"?: string | Function;
+ /**
+ * The widget ID.
*/
"id"?: string;
+ "onSign-error"?: (event: MifielWidgetCustomEvent) => void;
+ "onSign-success"?: (event: MifielWidgetCustomEvent) => void;
+ /**
+ * Function that will be called whenever an error occurs during the signing flow.
+ */
+ "onSignError"?: Function;
+ "onSignError"?: (event: MifielWidgetCustomEvent) => void;
/**
- * Listener for errors that occur during the signing flow.
+ * Function will be called when the document is signed successfully.
*/
- "onError"?: Function;
- "onError"?: (event: MifielWidgetCustomEvent) => void;
+ "onSignSuccess"?: Function;
+ "onSignSuccess"?: (event: MifielWidgetCustomEvent) => void;
/**
- * Function to be called when the document is signed successfully.
+ * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to.
*/
- "onSuccess"?: Function;
- "onSuccess"?: (event: MifielWidgetCustomEvent) => void;
+ "successBtnAction"?: string | Function;
/**
* The text of the success button.
* @default 'Proceed to next step'
*/
"successBtnText"?: string;
+ /**
+ * Set widget version
+ */
+ "widgetVersion"?: string;
}
interface IntrinsicElements {
"mifiel-widget": MifielWidget;
diff --git a/packages/widget-stencil/src/components/mifiel-widget/index.tsx b/packages/widget-stencil/src/components/mifiel-widget/index.tsx
index f2a82cd..ff0a489 100644
--- a/packages/widget-stencil/src/components/mifiel-widget/index.tsx
+++ b/packages/widget-stencil/src/components/mifiel-widget/index.tsx
@@ -1,5 +1,6 @@
import { h, Component, Prop, Element, Host, Method, Event, EventEmitter } from '@stencil/core';
import { loadScript } from '../../utils/load-script';
+import dataWidget from '../config.json';
const idComponent = 'mifiel-widget';
const environments = {
@@ -11,6 +12,11 @@ const environments = {
tag: 'mifiel-widget',
})
export class MifielWidget {
+ /**
+ * The widget ID.
+ */
+ @Prop() id: string;
+
/**
* The environment to use for the widget.
* @default 'production'
@@ -18,46 +24,50 @@ export class MifielWidget {
@Prop() environment: keyof typeof environments = 'production';
/**
- * The ID of the widget.
+ * Function will be called when the document is signed successfully.
*/
- @Prop() id: string;
+ @Prop() onSignSuccess?: Function;
/**
- * The text of the success button.
- * @default 'Proceed to next step'
+ * Function that will be called whenever an error occurs during the signing flow.
*/
- @Prop() successBtnText = 'Proceed to next step';
+ @Prop() onSignError?: Function;
/**
- * Function to be called when the document is signed successfully.
+ * The text of the success button.
+ * @default 'Proceed to next step'
*/
- @Prop() onSuccess?: Function;
+ @Prop() successBtnText = 'Proceed to next step';
/**
- * Main button action in the success view. Can be a URL or a function.
+ * Function to be executed when the main button is clicked on the success page. It can also be a string containing a URL to redirect to.
*/
- @Prop() callToActionSuccess?: string | Function;
+ @Prop() successBtnAction?: string | Function;
/**
- * Listener for errors that occur during the signing flow.
+ * Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
*/
- @Prop() onError?: Function;
+ @Prop() errorBtnAction?: string | Function;
/**
- * Main button action in the full screen error view. Can be a URL or a function.
+ * Set classes to the iframe container
*/
- @Prop() callToActionError?: string | Function;
+ @Prop() containerClass?: string;
/**
- * Set classes to the iframe container
+ * Set widget version
*/
- @Prop() containerClass?: string;
+ @Prop() widgetVersion?: string = `${dataWidget.appName}@${dataWidget.appVersion}`;
@Element() element: HTMLElement;
- @Event() error: EventEmitter;
+ @Event() signError: EventEmitter;
+
+ @Event({ eventName: 'sign-error' }) signErrorVue: EventEmitter;
- @Event() success: EventEmitter;
+ @Event() signSuccess: EventEmitter;
+
+ @Event({ eventName: 'sign-success' }) signSuccessVue: EventEmitter;
@Method()
async getIframe() {
@@ -98,31 +108,39 @@ export class MifielWidget {
}
private handleOnError = error => {
- if (this.onError) this.onError(error);
+ if (this.onSignError) this.onSignError(error);
+
+ if (this.widgetVersion.includes('@mifiel/widget-vue')) {
+ return this.signErrorVue.emit(error);
+ }
- this.error.emit(error);
+ return this.signError.emit(error);
};
private getOnError() {
return {
- ...(this.callToActionError ? { callToAction: this.callToActionError } : {}),
+ ...(this.errorBtnAction ? { callToAction: this.errorBtnAction } : {}),
listener: this.handleOnError,
};
}
private handleOnSuccess = () => {
- if (this.success) this.onSuccess();
+ if (this.onSignSuccess) this.onSignSuccess();
+
+ if (this.widgetVersion.includes('@mifiel/widget-vue')) {
+ return this.signSuccessVue.emit();
+ }
- this.success.emit();
+ return this.signSuccess.emit();
};
private getOnSuccess() {
- if (!this.callToActionSuccess && !this.onSuccess) {
+ if (!this.successBtnAction && !this.onSignSuccess) {
return null;
}
return {
- ...(this.callToActionSuccess ? { callToAction: this.callToActionSuccess } : {}),
+ ...(this.successBtnAction ? { callToAction: this.successBtnAction } : {}),
listener: this.handleOnSuccess,
};
}
diff --git a/packages/widget-stencil/src/index.html b/packages/widget-stencil/src/index.html
index 50d66ae..e7ae7d5 100644
--- a/packages/widget-stencil/src/index.html
+++ b/packages/widget-stencil/src/index.html
@@ -5,8 +5,8 @@
Stencil Component Starter
-
-
+
+
diff --git a/packages/widget-stencil/src/utils/version.js b/packages/widget-stencil/src/utils/version.js
new file mode 100644
index 0000000..485132c
--- /dev/null
+++ b/packages/widget-stencil/src/utils/version.js
@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+
+const packageJsonPath = path.resolve(__dirname, '../../package.json');
+const packageJsonContent = fs.readFileSync(packageJsonPath, 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
+
+const { name, version } = packageJson;
+
+const configObject = {
+ appName: name,
+ appVersion: version,
+};
+
+const configFilePath = path.resolve(__dirname, '../components/config.json');
+
+fs.writeFileSync(configFilePath, JSON.stringify(configObject, null, 2), 'utf8');
diff --git a/packages/widget-stencil/stencil.config.ts b/packages/widget-stencil/stencil.config.ts
index 8c2380c..98a96c2 100644
--- a/packages/widget-stencil/stencil.config.ts
+++ b/packages/widget-stencil/stencil.config.ts
@@ -5,7 +5,7 @@ import { angularOutputTarget } from '@stencil/angular-output-target';
import { vueOutputTarget } from '@stencil/vue-output-target';
export const config: Config = {
- namespace: 'widget-stencil',
+ namespace: 'widget',
outputTargets: [
{
type: 'dist',
@@ -15,17 +15,17 @@ export const config: Config = {
serviceWorker: null, // disable service workers
},
reactOutputTarget({
- componentCorePackage: '@mifiel/widget-stencil',
+ componentCorePackage: '@mifiel/widget',
proxiesFile: '../widget-react/lib/components/stencil-generated/index.ts',
}),
angularOutputTarget({
- componentCorePackage: '@mifiel/widget-stencil',
+ componentCorePackage: '@mifiel/widget',
outputType: 'component',
directivesProxyFile: '../widget-angular/src/lib/stencil-generated/components.ts',
directivesArrayFile: '../widget-angular/src/lib/stencil-generated/index.ts',
}),
vueOutputTarget({
- componentCorePackage: '@mifiel/widget-stencil',
+ componentCorePackage: '@mifiel/widget',
proxiesFile: '../widget-vue/lib/components.ts',
}),
],
diff --git a/packages/widget-stencil/tsconfig.json b/packages/widget-stencil/tsconfig.json
index 12033fb..f247ec3 100644
--- a/packages/widget-stencil/tsconfig.json
+++ b/packages/widget-stencil/tsconfig.json
@@ -7,7 +7,7 @@
"jsxFactory": "h",
"declaration": true,
"declarationMap": true,
- "sourceMap": true,
+ "sourceMap": false,
"composite": true,
"removeComments": true,
"importHelpers": true,
@@ -29,5 +29,6 @@
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
- }
+ },
+ "include": ["src", "src/components/config.json"]
}
diff --git a/packages/widget-vue/.gitignore b/packages/widget-vue/.gitignore
new file mode 100644
index 0000000..d344ba6
--- /dev/null
+++ b/packages/widget-vue/.gitignore
@@ -0,0 +1 @@
+config.json
diff --git a/packages/widget-vue/README.md b/packages/widget-vue/README.md
index f46bfe9..457cbb7 100644
--- a/packages/widget-vue/README.md
+++ b/packages/widget-vue/README.md
@@ -34,12 +34,12 @@ app.mount('#app');
@@ -71,14 +71,19 @@ export default {
## Props
-- **`id`**: (string, required) The ID of the widget.
-- **`environment`**: (string, optional) The environment to use for the widget (`production` by default).
-- **`@success`**: (function, optional) Function to be called when the document is signed successfully.
-- **`@error`**: (function, optional) Listener for errors that occur during the signing flow.
-- **`successBtnText`**: (string, optional) Text for the success button (`Proceed to next step` by default).
-- **`callToActionSuccess`**: (string | function, optional) Main button action in the success view.
-- **`callToActionError`**: (string | function, optional) Main button action in the error view.
-- **`containerClass`**: (string, optional) CSS class to be applied to the widget container.
+- **`id`**: (string, required) The widget ID
+- **`environment`**: (string, optional) The environment where the widget will be used: sandbox or production. By default, production.
+- **`on-sign-success`**: (function, optional) Function will be called when the document is signed successfully
+- **`on-sign-error`**: (function, optional) Function that will be called whenever an error occurs during the signing flow.
+- **`success-btn-text`**: (string, optional) Text that will display in the main button in the success page. By default, Proceed to next step
+- **`success-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the success page. It can also be a string containing a URL to redirect to.
+- **`error-btn-action`**: (string | function, optional) Function to be executed when the main button is clicked in the error page. It can also be a string containing a URL to redirect to.
+- **`container-class`**: (string, optional) CSS class to be applied to the widget container.
+
+## Listeners
+
+In addition to using the `on-sign-success` and `on-sign-error` props, listeners for `sign-success` and `sign-error` events can also be added to achieve the same outcome. This approach is recommended for handling successful document signing and errors during the signing process.
+
# Important Information
diff --git a/packages/widget-vue/lib/components.ts b/packages/widget-vue/lib/components.ts
index 92be842..6301374 100644
--- a/packages/widget-vue/lib/components.ts
+++ b/packages/widget-vue/lib/components.ts
@@ -3,21 +3,24 @@
/* auto-generated vue proxies */
import { defineContainer } from './vue-component-lib/utils';
-import type { JSX } from '@mifiel/widget-stencil';
+import type { JSX } from '@mifiel/widget';
export const MifielWidget = /*@__PURE__*/ defineContainer