Impler's VueJS SDK #723
Description
Is your feature request related to a problem? Please describe.
Create SDK to integrate Impler's Import Widget in VueJS Application
Describe the solution you'd like
The SDK would be headless, like calling a function. Headless SDK doesn't come into the way of the developer way and just does its work.
The SDK would behave the same as the react implementation at, https://github.com/implerhq/impler.io/blob/next/packages/react/src/hooks/useImpler.ts
Additional context
Here is the Pure HTML & JS Implementation of Logic in Angular SDK,
<body>
<button class="btn btn-primary" disabled id="btnOpenImpler">
Import
</button>
<script
type="text/javascript"
src="https://embed.impler.io/embed.umd.min.js"
async
></script>
<script type="text/javascript">
function generateUuid() {
return window.crypto.getRandomValues(new Uint32Array(1))[0];
}
let uuid = generateUuid();
let isImplerInitialized = false;
const EleBtnOpenImpler = document.getElementById("btnOpenImpler");
window.onload = (e) => {
if (window.impler) {
window.impler.init(uuid);
const readyCheckInterval = setInterval(() => {
if (window.impler.isReady()) {
clearInterval(readyCheckInterval);
EleBtnOpenImpler.removeAttribute("disabled");
}
}, 1000);
EleBtnOpenImpler.addEventListener("click", (e) => {
window.impler.show({
uuid,
projectId: "",
templateId: "",
accessToken: "",
// Get these credentials from https://web.impler.io, (create import, add columns, got to "snippet", open "Add Import Button" to find credentials)
// find out about more options here: https://docs.impler.io/widget/react-embed#props
});
});
const closeWidget = () => {
if (window.impler) {
window.impler.close();
}
};
window.impler.on('message', (eventData) => {
switch (eventData.type) {
case "WIDGET_READY":
console.log("Widget is ready");
break;
case "CLOSE_WIDGET":
console.log("Widget is closed");
break;
case "UPLOAD_STARTED":
console.log("Upload started", eventData.value);
break;
case "UPLOAD_TERMINATED":
console.log("Upload skipped in middle", eventData.value);
break;
case "UPLOAD_COMPLETED":
console.log("Upload completed", eventData.value);
break;
case "DATA_IMPORTED":
console.log("Data imported", eventData.value);
break;
default:
break;
}
}, uuid);
}
};
</script>
</body>Here we will allow the developer to provide following things,
projectId,
primaryColor,
templateId,
accessToken,
authHeaderValue,
title,
extra,
onUploadComplete,
onWidgetClose,
onUploadStart,
onDataImported,
onUploadTerminate,
Logic will export isImplerInitiated, showWidget, and closeWidget .
Metadata
Metadata
Assignees
Type
Projects
Status