@codatum/embed-vue 0.1.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/README.md +108 -0
- package/dist/Embed.test.d.ts +2 -0
- package/dist/Embed.test.d.ts.map +1 -0
- package/dist/Embed.vue.d.ts +26 -0
- package/dist/Embed.vue.d.ts.map +1 -0
- package/dist/embed-vue.css +1 -0
- package/dist/index.cjs +2 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +75 -0
- package/dist/index.js.map +1 -0
- package/package.json +69 -0
package/README.md
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
# @codatum/embed-vue
|
|
2
|
+
|
|
3
|
+
Vue 3 integration for Codatum Signed Embed. Provides a single component that wraps the core SDK. All of [@codatum/embed](https://github.com/codatum/codatum-embed-js/tree/main/packages/embed#readme) is re-exported so you can use this package as a single entry point (one version, no split).
|
|
4
|
+
|
|
5
|
+
For options, types, events, and programmatic API details, see **[@codatum/embed](https://github.com/codatum/codatum-embed-js/tree/main/packages/embed#readme)**.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @codatum/embed-vue
|
|
11
|
+
# or
|
|
12
|
+
npm install @codatum/embed-vue
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Requires **Vue 3** (peer dependency).
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
```vue
|
|
19
|
+
<script setup lang="ts">
|
|
20
|
+
import { EmbedVue } from "@codatum/embed-vue";
|
|
21
|
+
|
|
22
|
+
const embedUrl = "https://app.codatum.com/protected/workspace/xxx/notebook/yyy";
|
|
23
|
+
const tokenProvider = async () => {
|
|
24
|
+
const res = await fetch("/api/embed-token", { method: "POST" });
|
|
25
|
+
const data = await res.json();
|
|
26
|
+
return { token: data.token };
|
|
27
|
+
}
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<template>
|
|
31
|
+
<EmbedVue
|
|
32
|
+
:embedUrl="embedUrl"
|
|
33
|
+
:tokenProvider="tokenProvider"
|
|
34
|
+
:iframeOptions="{ theme: 'LIGHT', locale: 'ja' }"
|
|
35
|
+
@ready="console.log('Embed ready')"
|
|
36
|
+
@paramChanged="(e) => console.log('Params', e.params)"
|
|
37
|
+
@executeSqlsTriggered="(e) => console.log('Execute', e.params)"
|
|
38
|
+
@error="(e) => console.error(e)"
|
|
39
|
+
/>
|
|
40
|
+
</template>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Calling `reload` from the parent
|
|
44
|
+
|
|
45
|
+
Use a template ref and call the exposed `reload()` method. It returns `true` on success and `false` on failure (errors are emitted via `@error`; it does not throw).
|
|
46
|
+
```vue
|
|
47
|
+
<script setup lang="ts">
|
|
48
|
+
import { ref } from "vue";
|
|
49
|
+
import { EmbedVue } from "@codatum/embed-vue";
|
|
50
|
+
|
|
51
|
+
const embedRef = ref<InstanceType<typeof EmbedVue> | null>(null);
|
|
52
|
+
|
|
53
|
+
async function onFilterChange() {
|
|
54
|
+
const ok = await embedRef.value?.reload();
|
|
55
|
+
if (!ok) console.warn("reload failed — see @error");
|
|
56
|
+
}
|
|
57
|
+
</script>
|
|
58
|
+
|
|
59
|
+
<template>
|
|
60
|
+
<EmbedVue ref="embedRef" :embedUrl="..." :tokenProvider="..." @error="handleError" />
|
|
61
|
+
</template>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Changing props at runtime
|
|
65
|
+
|
|
66
|
+
Props are read once at mount. To apply new values (e.g. a different `embedUrl` or `iframeOptions`), use `:key` to force a remount:
|
|
67
|
+
|
|
68
|
+
```vue
|
|
69
|
+
<EmbedVue :key="embedUrl" :embedUrl="embedUrl" :tokenProvider="tokenProvider" />
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## API
|
|
73
|
+
|
|
74
|
+
Option types and behavior (e.g. `iframeOptions`, `tokenOptions`, `displayOptions`) are the same as in [@codatum/embed](https://github.com/codatum/codatum-embed-js/tree/main/packages/embed#readme). The component uses its root element as the iframe container (no `container` prop).
|
|
75
|
+
|
|
76
|
+
### Props
|
|
77
|
+
|
|
78
|
+
| Prop | Required | Type |
|
|
79
|
+
|------|----------|------|
|
|
80
|
+
| `embedUrl` | Yes | `string` |
|
|
81
|
+
| `tokenProvider` | Yes | `(context: TokenProviderContext) => Promise<TokenProviderResult>` |
|
|
82
|
+
| `iframeOptions` | No | `IframeOptions` |
|
|
83
|
+
| `tokenOptions` | No | `TokenOptions` |
|
|
84
|
+
| `displayOptions` | No | `DisplayOptions` |
|
|
85
|
+
|
|
86
|
+
### Events
|
|
87
|
+
|
|
88
|
+
| Event | Payload | When |
|
|
89
|
+
|-------|---------|------|
|
|
90
|
+
| `ready` | — | Embed is ready and token/params have been applied |
|
|
91
|
+
| `paramChanged` | `{ type: 'PARAM_CHANGED', params: EncodedParam[] }` | See core SDK |
|
|
92
|
+
| `executeSqlsTriggered` | `{ type: 'EXECUTE_SQLS_TRIGGERED', params: EncodedParam[] }` | See core SDK |
|
|
93
|
+
| `error` | `EmbedError` | Init, reload, or token auto-refresh failed |
|
|
94
|
+
|
|
95
|
+
### Expose (ref)
|
|
96
|
+
|
|
97
|
+
| Property | Type | Description |
|
|
98
|
+
|----------|------|-------------|
|
|
99
|
+
| `reload()` | `() => Promise<boolean>` | Re-fetches token and params; returns `false` on failure (error emitted via `@error`) |
|
|
100
|
+
| `status` | `'CREATED' \| 'INITIALIZING' \| 'READY' \| 'DESTROYED'` | Current embed state |
|
|
101
|
+
|
|
102
|
+
Need a custom container or full control? Use `createEmbed()` from this package (or [@codatum/embed](https://github.com/codatum/codatum-embed-js/tree/main/packages/embed#readme)) in `onMounted` and `instance.destroy()` in `onUnmounted`.
|
|
103
|
+
|
|
104
|
+
## See also
|
|
105
|
+
|
|
106
|
+
- **Versioning and changelog**: [Versioning](https://github.com/codatum/codatum-embed-js#versioning)
|
|
107
|
+
- **Security and deployment**: [Security and deployment](https://github.com/codatum/codatum-embed-js#security-and-deployment)
|
|
108
|
+
- **Supported environments**: [Supported environments](https://github.com/codatum/codatum-embed-js#supported-environments)
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Embed.test.d.ts","sourceRoot":"","sources":["../src/Embed.test.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { EmbedError, EmbedStatus, DisplayOptions, ExecuteSqlsTriggeredMessage, IframeOptions, ParamChangedMessage, TokenOptions, TokenProviderContext, TokenProviderResult } from '@codatum/embed';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
embedUrl: string;
|
|
4
|
+
tokenProvider: (context: TokenProviderContext) => Promise<TokenProviderResult>;
|
|
5
|
+
iframeOptions?: IframeOptions;
|
|
6
|
+
tokenOptions?: TokenOptions;
|
|
7
|
+
displayOptions?: DisplayOptions;
|
|
8
|
+
};
|
|
9
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {
|
|
10
|
+
reload: () => Promise<boolean>;
|
|
11
|
+
status: import('vue').Ref<EmbedStatus, EmbedStatus>;
|
|
12
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
13
|
+
paramChanged: (payload: ParamChangedMessage) => any;
|
|
14
|
+
executeSqlsTriggered: (payload: ExecuteSqlsTriggeredMessage) => any;
|
|
15
|
+
ready: () => any;
|
|
16
|
+
error: (err: EmbedError) => any;
|
|
17
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
18
|
+
onParamChanged?: ((payload: ParamChangedMessage) => any) | undefined;
|
|
19
|
+
onExecuteSqlsTriggered?: ((payload: ExecuteSqlsTriggeredMessage) => any) | undefined;
|
|
20
|
+
onReady?: (() => any) | undefined;
|
|
21
|
+
onError?: ((err: EmbedError) => any) | undefined;
|
|
22
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
23
|
+
containerRef: HTMLDivElement;
|
|
24
|
+
}, HTMLDivElement>;
|
|
25
|
+
export default _default;
|
|
26
|
+
//# sourceMappingURL=Embed.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Embed.vue.d.ts","sourceRoot":"","sources":["../src/Embed.vue"],"names":[],"mappings":"AAiIA,OAAO,EAEL,UAAU,EAGX,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAEV,WAAW,EACX,cAAc,EACd,2BAA2B,EAC3B,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,mBAAmB,EACpB,MAAM,gBAAgB,CAAC;AAGxB,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,aAAa,EAAE,CACb,OAAO,EAAE,oBAAoB,KAC1B,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAClC,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;;kBA0EuB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;;;;AAmEzC,wBAUG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.codatum-embed-vue-container[data-v-6efc35e9]{display:contents}
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("vue"),t=require("@codatum/embed"),f=s.defineComponent({__name:"Embed",props:{embedUrl:{},tokenProvider:{type:Function},iframeOptions:{},tokenOptions:{},displayOptions:{}},emits:["paramChanged","executeSqlsTriggered","ready","error"],setup(r,{expose:l,emit:d}){const o=r,u=d,p=s.ref(null),c=s.ref(null),i=s.ref(t.EmbedStatuses.CREATED),E=e=>e instanceof t.EmbedError?e:new t.EmbedError(t.EmbedErrorCodes.UNEXPECTED_ERROR,e instanceof Error?e.message:String(e),{cause:e}),m=e=>{const n=E(e);u("error",n)};return s.onMounted(async()=>{const e=p.value;if(!e)return;const n=t.createEmbed({container:e,embedUrl:o.embedUrl,tokenProvider:o.tokenProvider,iframeOptions:o.iframeOptions,tokenOptions:{...o.tokenOptions,onRefreshError:a=>{o.tokenOptions?.onRefreshError?.(a),m(a)}},displayOptions:o.displayOptions});c.value=n,i.value=t.EmbedStatuses.INITIALIZING,n.on("paramChanged",a=>u("paramChanged",a)),n.on("executeSqlsTriggered",a=>u("executeSqlsTriggered",a));try{await n.init(),i.value=n.status,u("ready")}catch(a){m(a),i.value=t.EmbedStatuses.DESTROYED}}),s.onUnmounted(()=>{c.value&&(c.value.destroy(),c.value=null),i.value=t.EmbedStatuses.DESTROYED}),l({reload:async()=>{if(!c.value)return!1;try{return await c.value.reload(),i.value=c.value.status,!0}catch(e){return m(e),!1}},status:i}),(e,n)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"containerRef",ref:p,class:"codatum-embed-vue-container"},null,512))}}),b=(r,l)=>{const d=r.__vccOpts||r;for(const[o,u]of l)d[o]=u;return d},v=b(f,[["__scopeId","data-v-6efc35e9"]]);exports.EmbedVue=v;Object.keys(t).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>t[r]})});
|
|
2
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/Embed.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n createEmbed,\n EmbedError,\n EmbedErrorCodes,\n EmbedStatuses,\n} from \"@codatum/embed\";\nimport type {\n EmbedInstance,\n EmbedStatus,\n DisplayOptions,\n ExecuteSqlsTriggeredMessage,\n IframeOptions,\n ParamChangedMessage,\n TokenOptions,\n TokenProviderContext,\n TokenProviderResult,\n} from \"@codatum/embed\";\nimport { onMounted, onUnmounted, ref } from \"vue\";\n\nconst props = defineProps<{\n embedUrl: string;\n tokenProvider: (\n context: TokenProviderContext\n ) => Promise<TokenProviderResult>;\n iframeOptions?: IframeOptions;\n tokenOptions?: TokenOptions;\n displayOptions?: DisplayOptions;\n}>();\n\nconst emit = defineEmits<{\n paramChanged: [payload: ParamChangedMessage];\n executeSqlsTriggered: [payload: ExecuteSqlsTriggeredMessage];\n ready: [];\n error: [err: EmbedError];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\nconst instance = ref<EmbedInstance | null>(null);\nconst status = ref<EmbedStatus>(EmbedStatuses.CREATED);\n\nconst toEmbedError = (err: unknown): EmbedError =>\n err instanceof EmbedError\n ? err\n : new EmbedError(\n EmbedErrorCodes.UNEXPECTED_ERROR,\n err instanceof Error ? err.message : String(err),\n { cause: err }\n );\n\nconst setError = (err: unknown) => {\n const embedError = toEmbedError(err);\n emit(\"error\", embedError);\n};\n\nonMounted(async () => {\n const el = containerRef.value;\n if (!el) return;\n\n const embed = createEmbed({\n container: el,\n embedUrl: props.embedUrl,\n tokenProvider: props.tokenProvider,\n iframeOptions: props.iframeOptions,\n tokenOptions: {\n ...props.tokenOptions,\n onRefreshError: (err: EmbedError) => {\n props.tokenOptions?.onRefreshError?.(err);\n setError(err);\n },\n },\n displayOptions: props.displayOptions,\n });\n\n instance.value = embed;\n status.value = EmbedStatuses.INITIALIZING;\n\n embed.on(\"paramChanged\", (payload) => emit(\"paramChanged\", payload));\n embed.on(\"executeSqlsTriggered\", (payload) =>\n emit(\"executeSqlsTriggered\", payload)\n );\n\n try {\n await embed.init();\n status.value = embed.status;\n emit(\"ready\");\n } catch (err: unknown) {\n setError(err);\n status.value = EmbedStatuses.DESTROYED;\n }\n});\n\nonUnmounted(() => {\n if (instance.value) {\n instance.value.destroy();\n instance.value = null;\n }\n status.value = EmbedStatuses.DESTROYED;\n});\n\nconst reload = async (): Promise<boolean> => {\n if (!instance.value) return false;\n try {\n await instance.value.reload();\n status.value = instance.value.status;\n return true;\n } catch (err: unknown) {\n setError(err);\n return false;\n }\n};\n\ndefineExpose({\n reload,\n status,\n});\n</script>\n\n<template>\n <div ref=\"containerRef\" class=\"codatum-embed-vue-container\" />\n</template>\n\n<style scoped>\n.codatum-embed-vue-container {\n display: contents;\n}\n</style>\n"],"names":["props","__props","emit","__emit","containerRef","ref","instance","status","EmbedStatuses","toEmbedError","err","EmbedError","EmbedErrorCodes","setError","embedError","onMounted","el","embed","createEmbed","payload","onUnmounted","__expose","_createElementBlock"],"mappings":"qWAoBA,MAAMA,EAAQC,EAURC,EAAOC,EAOPC,EAAeC,EAAAA,IAAwB,IAAI,EAC3CC,EAAWD,EAAAA,IAA0B,IAAI,EACzCE,EAASF,EAAAA,IAAiBG,EAAAA,cAAc,OAAO,EAE/CC,EAAgBC,GACpBA,aAAeC,EAAAA,WACXD,EACA,IAAIC,EAAAA,WACFC,EAAAA,gBAAgB,iBAChBF,aAAe,MAAQA,EAAI,QAAU,OAAOA,CAAG,EAC/C,CAAE,MAAOA,CAAA,CAAI,EAGfG,EAAYH,GAAiB,CACjC,MAAMI,EAAaL,EAAaC,CAAG,EACnCR,EAAK,QAASY,CAAU,CAC1B,EAEAC,OAAAA,EAAAA,UAAU,SAAY,CACpB,MAAMC,EAAKZ,EAAa,MACxB,GAAI,CAACY,EAAI,OAET,MAAMC,EAAQC,EAAAA,YAAY,CACxB,UAAWF,EACX,SAAUhB,EAAM,SAChB,cAAeA,EAAM,cACrB,cAAeA,EAAM,cACrB,aAAc,CACZ,GAAGA,EAAM,aACT,eAAiBU,GAAoB,CACnCV,EAAM,cAAc,iBAAiBU,CAAG,EACxCG,EAASH,CAAG,CACd,CAAA,EAEF,eAAgBV,EAAM,cAAA,CACvB,EAEDM,EAAS,MAAQW,EACjBV,EAAO,MAAQC,EAAAA,cAAc,aAE7BS,EAAM,GAAG,eAAiBE,GAAYjB,EAAK,eAAgBiB,CAAO,CAAC,EACnEF,EAAM,GAAG,uBAAyBE,GAChCjB,EAAK,uBAAwBiB,CAAO,CAAA,EAGtC,GAAI,CACF,MAAMF,EAAM,KAAA,EACZV,EAAO,MAAQU,EAAM,OACrBf,EAAK,OAAO,CACd,OAASQ,EAAc,CACrBG,EAASH,CAAG,EACZH,EAAO,MAAQC,EAAAA,cAAc,SAC/B,CACF,CAAC,EAEDY,EAAAA,YAAY,IAAM,CACZd,EAAS,QACXA,EAAS,MAAM,QAAA,EACfA,EAAS,MAAQ,MAEnBC,EAAO,MAAQC,EAAAA,cAAc,SAC/B,CAAC,EAcDa,EAAa,CACX,OAba,SAA8B,CAC3C,GAAI,CAACf,EAAS,MAAO,MAAO,GAC5B,GAAI,CACF,aAAMA,EAAS,MAAM,OAAA,EACrBC,EAAO,MAAQD,EAAS,MAAM,OACvB,EACT,OAASI,EAAc,CACrB,OAAAG,EAASH,CAAG,EACL,EACT,CACF,EAIE,OAAAH,CAAA,CACD,wBAICe,EAAAA,mBAA8D,MAAA,SAArD,eAAJ,IAAIlB,EAAe,MAAM,6BAAA"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,aAAa,CAAC;AAChC,OAAO,EAAE,KAAK,IAAI,QAAQ,EAAE,CAAC;AAE7B,cAAc,gBAAgB,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { defineComponent as v, ref as m, onMounted as b, onUnmounted as O, openBlock as _, createElementBlock as y } from "vue";
|
|
2
|
+
import { EmbedStatuses as l, createEmbed as g, EmbedError as E, EmbedErrorCodes as k } from "@codatum/embed";
|
|
3
|
+
export * from "@codatum/embed";
|
|
4
|
+
const R = /* @__PURE__ */ v({
|
|
5
|
+
__name: "Embed",
|
|
6
|
+
props: {
|
|
7
|
+
embedUrl: {},
|
|
8
|
+
tokenProvider: { type: Function },
|
|
9
|
+
iframeOptions: {},
|
|
10
|
+
tokenOptions: {},
|
|
11
|
+
displayOptions: {}
|
|
12
|
+
},
|
|
13
|
+
emits: ["paramChanged", "executeSqlsTriggered", "ready", "error"],
|
|
14
|
+
setup(c, { expose: d, emit: i }) {
|
|
15
|
+
const t = c, a = i, p = m(null), n = m(null), s = m(l.CREATED), f = (e) => e instanceof E ? e : new E(
|
|
16
|
+
k.UNEXPECTED_ERROR,
|
|
17
|
+
e instanceof Error ? e.message : String(e),
|
|
18
|
+
{ cause: e }
|
|
19
|
+
), u = (e) => {
|
|
20
|
+
const r = f(e);
|
|
21
|
+
a("error", r);
|
|
22
|
+
};
|
|
23
|
+
return b(async () => {
|
|
24
|
+
const e = p.value;
|
|
25
|
+
if (!e) return;
|
|
26
|
+
const r = g({
|
|
27
|
+
container: e,
|
|
28
|
+
embedUrl: t.embedUrl,
|
|
29
|
+
tokenProvider: t.tokenProvider,
|
|
30
|
+
iframeOptions: t.iframeOptions,
|
|
31
|
+
tokenOptions: {
|
|
32
|
+
...t.tokenOptions,
|
|
33
|
+
onRefreshError: (o) => {
|
|
34
|
+
t.tokenOptions?.onRefreshError?.(o), u(o);
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
displayOptions: t.displayOptions
|
|
38
|
+
});
|
|
39
|
+
n.value = r, s.value = l.INITIALIZING, r.on("paramChanged", (o) => a("paramChanged", o)), r.on(
|
|
40
|
+
"executeSqlsTriggered",
|
|
41
|
+
(o) => a("executeSqlsTriggered", o)
|
|
42
|
+
);
|
|
43
|
+
try {
|
|
44
|
+
await r.init(), s.value = r.status, a("ready");
|
|
45
|
+
} catch (o) {
|
|
46
|
+
u(o), s.value = l.DESTROYED;
|
|
47
|
+
}
|
|
48
|
+
}), O(() => {
|
|
49
|
+
n.value && (n.value.destroy(), n.value = null), s.value = l.DESTROYED;
|
|
50
|
+
}), d({
|
|
51
|
+
reload: async () => {
|
|
52
|
+
if (!n.value) return !1;
|
|
53
|
+
try {
|
|
54
|
+
return await n.value.reload(), s.value = n.value.status, !0;
|
|
55
|
+
} catch (e) {
|
|
56
|
+
return u(e), !1;
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
status: s
|
|
60
|
+
}), (e, r) => (_(), y("div", {
|
|
61
|
+
ref_key: "containerRef",
|
|
62
|
+
ref: p,
|
|
63
|
+
class: "codatum-embed-vue-container"
|
|
64
|
+
}, null, 512));
|
|
65
|
+
}
|
|
66
|
+
}), h = (c, d) => {
|
|
67
|
+
const i = c.__vccOpts || c;
|
|
68
|
+
for (const [t, a] of d)
|
|
69
|
+
i[t] = a;
|
|
70
|
+
return i;
|
|
71
|
+
}, S = /* @__PURE__ */ h(R, [["__scopeId", "data-v-6efc35e9"]]);
|
|
72
|
+
export {
|
|
73
|
+
S as EmbedVue
|
|
74
|
+
};
|
|
75
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/Embed.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {\n createEmbed,\n EmbedError,\n EmbedErrorCodes,\n EmbedStatuses,\n} from \"@codatum/embed\";\nimport type {\n EmbedInstance,\n EmbedStatus,\n DisplayOptions,\n ExecuteSqlsTriggeredMessage,\n IframeOptions,\n ParamChangedMessage,\n TokenOptions,\n TokenProviderContext,\n TokenProviderResult,\n} from \"@codatum/embed\";\nimport { onMounted, onUnmounted, ref } from \"vue\";\n\nconst props = defineProps<{\n embedUrl: string;\n tokenProvider: (\n context: TokenProviderContext\n ) => Promise<TokenProviderResult>;\n iframeOptions?: IframeOptions;\n tokenOptions?: TokenOptions;\n displayOptions?: DisplayOptions;\n}>();\n\nconst emit = defineEmits<{\n paramChanged: [payload: ParamChangedMessage];\n executeSqlsTriggered: [payload: ExecuteSqlsTriggeredMessage];\n ready: [];\n error: [err: EmbedError];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\nconst instance = ref<EmbedInstance | null>(null);\nconst status = ref<EmbedStatus>(EmbedStatuses.CREATED);\n\nconst toEmbedError = (err: unknown): EmbedError =>\n err instanceof EmbedError\n ? err\n : new EmbedError(\n EmbedErrorCodes.UNEXPECTED_ERROR,\n err instanceof Error ? err.message : String(err),\n { cause: err }\n );\n\nconst setError = (err: unknown) => {\n const embedError = toEmbedError(err);\n emit(\"error\", embedError);\n};\n\nonMounted(async () => {\n const el = containerRef.value;\n if (!el) return;\n\n const embed = createEmbed({\n container: el,\n embedUrl: props.embedUrl,\n tokenProvider: props.tokenProvider,\n iframeOptions: props.iframeOptions,\n tokenOptions: {\n ...props.tokenOptions,\n onRefreshError: (err: EmbedError) => {\n props.tokenOptions?.onRefreshError?.(err);\n setError(err);\n },\n },\n displayOptions: props.displayOptions,\n });\n\n instance.value = embed;\n status.value = EmbedStatuses.INITIALIZING;\n\n embed.on(\"paramChanged\", (payload) => emit(\"paramChanged\", payload));\n embed.on(\"executeSqlsTriggered\", (payload) =>\n emit(\"executeSqlsTriggered\", payload)\n );\n\n try {\n await embed.init();\n status.value = embed.status;\n emit(\"ready\");\n } catch (err: unknown) {\n setError(err);\n status.value = EmbedStatuses.DESTROYED;\n }\n});\n\nonUnmounted(() => {\n if (instance.value) {\n instance.value.destroy();\n instance.value = null;\n }\n status.value = EmbedStatuses.DESTROYED;\n});\n\nconst reload = async (): Promise<boolean> => {\n if (!instance.value) return false;\n try {\n await instance.value.reload();\n status.value = instance.value.status;\n return true;\n } catch (err: unknown) {\n setError(err);\n return false;\n }\n};\n\ndefineExpose({\n reload,\n status,\n});\n</script>\n\n<template>\n <div ref=\"containerRef\" class=\"codatum-embed-vue-container\" />\n</template>\n\n<style scoped>\n.codatum-embed-vue-container {\n display: contents;\n}\n</style>\n"],"names":["props","__props","emit","__emit","containerRef","ref","instance","status","EmbedStatuses","toEmbedError","err","EmbedError","EmbedErrorCodes","setError","embedError","onMounted","el","embed","createEmbed","payload","onUnmounted","__expose","_createElementBlock"],"mappings":";;;;;;;;;;;;;;AAoBA,UAAMA,IAAQC,GAURC,IAAOC,GAOPC,IAAeC,EAAwB,IAAI,GAC3CC,IAAWD,EAA0B,IAAI,GACzCE,IAASF,EAAiBG,EAAc,OAAO,GAE/CC,IAAe,CAACC,MACpBA,aAAeC,IACXD,IACA,IAAIC;AAAA,MACFC,EAAgB;AAAA,MAChBF,aAAe,QAAQA,EAAI,UAAU,OAAOA,CAAG;AAAA,MAC/C,EAAE,OAAOA,EAAA;AAAA,IAAI,GAGfG,IAAW,CAACH,MAAiB;AACjC,YAAMI,IAAaL,EAAaC,CAAG;AACnC,MAAAR,EAAK,SAASY,CAAU;AAAA,IAC1B;AAEA,WAAAC,EAAU,YAAY;AACpB,YAAMC,IAAKZ,EAAa;AACxB,UAAI,CAACY,EAAI;AAET,YAAMC,IAAQC,EAAY;AAAA,QACxB,WAAWF;AAAA,QACX,UAAUhB,EAAM;AAAA,QAChB,eAAeA,EAAM;AAAA,QACrB,eAAeA,EAAM;AAAA,QACrB,cAAc;AAAA,UACZ,GAAGA,EAAM;AAAA,UACT,gBAAgB,CAACU,MAAoB;AACnC,YAAAV,EAAM,cAAc,iBAAiBU,CAAG,GACxCG,EAASH,CAAG;AAAA,UACd;AAAA,QAAA;AAAA,QAEF,gBAAgBV,EAAM;AAAA,MAAA,CACvB;AAED,MAAAM,EAAS,QAAQW,GACjBV,EAAO,QAAQC,EAAc,cAE7BS,EAAM,GAAG,gBAAgB,CAACE,MAAYjB,EAAK,gBAAgBiB,CAAO,CAAC,GACnEF,EAAM;AAAA,QAAG;AAAA,QAAwB,CAACE,MAChCjB,EAAK,wBAAwBiB,CAAO;AAAA,MAAA;AAGtC,UAAI;AACF,cAAMF,EAAM,KAAA,GACZV,EAAO,QAAQU,EAAM,QACrBf,EAAK,OAAO;AAAA,MACd,SAASQ,GAAc;AACrB,QAAAG,EAASH,CAAG,GACZH,EAAO,QAAQC,EAAc;AAAA,MAC/B;AAAA,IACF,CAAC,GAEDY,EAAY,MAAM;AAChB,MAAId,EAAS,UACXA,EAAS,MAAM,QAAA,GACfA,EAAS,QAAQ,OAEnBC,EAAO,QAAQC,EAAc;AAAA,IAC/B,CAAC,GAcDa,EAAa;AAAA,MACX,QAba,YAA8B;AAC3C,YAAI,CAACf,EAAS,MAAO,QAAO;AAC5B,YAAI;AACF,uBAAMA,EAAS,MAAM,OAAA,GACrBC,EAAO,QAAQD,EAAS,MAAM,QACvB;AAAA,QACT,SAASI,GAAc;AACrB,iBAAAG,EAASH,CAAG,GACL;AAAA,QACT;AAAA,MACF;AAAA,MAIE,QAAAH;AAAA,IAAA,CACD,mBAICe,EAA8D,OAAA;AAAA,eAArD;AAAA,MAAJ,KAAIlB;AAAA,MAAe,OAAM;AAAA,IAAA;;;;;;;;"}
|
package/package.json
ADDED
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@codatum/embed-vue",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Vue 3 integration for Codatum signed embedding",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.cjs",
|
|
7
|
+
"module": "./dist/index.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.js",
|
|
13
|
+
"require": "./dist/index.cjs"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"dist"
|
|
18
|
+
],
|
|
19
|
+
"scripts": {
|
|
20
|
+
"build": "vite build",
|
|
21
|
+
"dev": "vite build --watch",
|
|
22
|
+
"lint": "biome lint .",
|
|
23
|
+
"clean": "rm -rf dist",
|
|
24
|
+
"test": "vitest run --coverage",
|
|
25
|
+
"test:watch": "vitest"
|
|
26
|
+
},
|
|
27
|
+
"peerDependencies": {
|
|
28
|
+
"vue": ">=3.0.0"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@codatum/embed": "workspace:*"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
34
|
+
"@vitest/coverage-v8": "catalog:",
|
|
35
|
+
"@vitejs/plugin-vue": "catalog:",
|
|
36
|
+
"@vue/test-utils": "catalog:",
|
|
37
|
+
"jsdom": "catalog:",
|
|
38
|
+
"typescript": "catalog:",
|
|
39
|
+
"vite": "catalog:",
|
|
40
|
+
"vite-plugin-dts": "catalog:",
|
|
41
|
+
"vitest": "catalog:",
|
|
42
|
+
"vue": "catalog:"
|
|
43
|
+
},
|
|
44
|
+
"engines": {
|
|
45
|
+
"node": ">=18"
|
|
46
|
+
},
|
|
47
|
+
"license": "Apache-2.0",
|
|
48
|
+
"repository": {
|
|
49
|
+
"type": "git",
|
|
50
|
+
"url": "https://github.com/codatum/codatum-embed-js.git",
|
|
51
|
+
"directory": "packages/embed-vue"
|
|
52
|
+
},
|
|
53
|
+
"homepage": "https://github.com/codatum/codatum-embed-js/tree/main/packages/embed-vue#readme",
|
|
54
|
+
"bugs": {
|
|
55
|
+
"url": "https://github.com/codatum/codatum-embed-js/issues"
|
|
56
|
+
},
|
|
57
|
+
"keywords": [
|
|
58
|
+
"codatum",
|
|
59
|
+
"embed",
|
|
60
|
+
"vue",
|
|
61
|
+
"vue3",
|
|
62
|
+
"signed-embed",
|
|
63
|
+
"analytics",
|
|
64
|
+
"notebook"
|
|
65
|
+
],
|
|
66
|
+
"publishConfig": {
|
|
67
|
+
"access": "public"
|
|
68
|
+
}
|
|
69
|
+
}
|