@vertexvis/viewer-vue 0.24.4-canary.9 → 0.24.4
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 +73 -0
- package/dist/bundle.cjs.js +2 -1
- package/dist/bundle.cjs.js.map +1 -1
- package/dist/bundle.esm.js +2 -1
- package/dist/bundle.esm.js.map +1 -1
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
# Vue Bindings for Vertex Viewer SDK
|
|
2
|
+
|
|
3
|
+

|
|
4
|
+

|
|
5
|
+
|
|
6
|
+
This project contains Vue bindings for Vertex's Viewer SDK. These bindings are
|
|
7
|
+
auto-generated from `@vertexvis/viewer`.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
Run `yarn add @vertexvis/viewer-vue` or `npm install @vertexvis/viewer-vue`
|
|
12
|
+
to add the project as an NPM dependency.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
Prior to to use the component wrappers, we'll need to update the
|
|
17
|
+
`vite.config.ts` for the project to indicate that these wrappers are custom
|
|
18
|
+
elements. This will prevent warnings from Vue failing to resolve the custom
|
|
19
|
+
elements.
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
// vite.config.ts
|
|
23
|
+
|
|
24
|
+
export default defineConfig({
|
|
25
|
+
plugins: [
|
|
26
|
+
vue({
|
|
27
|
+
template: {
|
|
28
|
+
compilerOptions: {
|
|
29
|
+
isCustomElement: (tag) => tag.includes('vertex-')
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}),
|
|
33
|
+
vueJsx()
|
|
34
|
+
]
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Next, `@vertexvis/viewer-vue` includes a Vue [Plugin][vue plugins],
|
|
39
|
+
`VertexViewerPlugin`, that needs to be added to the Vue App. It also
|
|
40
|
+
includes a global stylesheet with default styling. Consult your bundler's
|
|
41
|
+
documentation on how to bundle CSS with your project's bundler.
|
|
42
|
+
|
|
43
|
+
```jsx
|
|
44
|
+
import '@vertexvis/viewer/dist/viewer/viewer.css';
|
|
45
|
+
|
|
46
|
+
import { createApp } from 'vue';
|
|
47
|
+
import { VertexViewerPlugin } from '@vertexvis/viewer-vue';
|
|
48
|
+
import App from './App.vue';
|
|
49
|
+
|
|
50
|
+
createApp(App).use(VertexViewerPlugin).mount('#app');
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Lastly, use the component wrappers in one of your Vue components.
|
|
54
|
+
|
|
55
|
+
```jsx
|
|
56
|
+
<template>
|
|
57
|
+
<vertex-viewer
|
|
58
|
+
id="viewer"
|
|
59
|
+
src="urn:vertex:stream-key:123"
|
|
60
|
+
>
|
|
61
|
+
</vertex-viewer>
|
|
62
|
+
</template>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Documentation
|
|
66
|
+
|
|
67
|
+
See [@vertexvis/viewer][component docs] for a full list of components and their
|
|
68
|
+
documentation.
|
|
69
|
+
|
|
70
|
+
[vue plugins]: https://vuejs.org/guide/reusability/plugins.html
|
|
71
|
+
[component docs]: https://github.com/Vertexvis/vertex-web-sdk/tree/master/packages/viewer/src/components
|
|
72
|
+
[css variables]: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
|
|
73
|
+
[global styles]: https://github.com/Vertexvis/vertex-web-sdk/blob/master/packages/viewer/src/css/global.css
|
package/dist/bundle.cjs.js
CHANGED
|
@@ -2807,7 +2807,8 @@ var VertexSceneTreeSearch = /*@__PURE__*/ defineContainer('vertex-scene-tree-sea
|
|
|
2807
2807
|
'placeholder',
|
|
2808
2808
|
'controller',
|
|
2809
2809
|
'value',
|
|
2810
|
-
'search'
|
|
2810
|
+
'search',
|
|
2811
|
+
'searchCompleted'
|
|
2811
2812
|
]);
|
|
2812
2813
|
var VertexSceneTreeTableCell = /*@__PURE__*/ defineContainer('vertex-scene-tree-table-cell', undefined, [
|
|
2813
2814
|
'node',
|