@vertexvis/viewer-vue 0.24.4-canary.8 → 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 ADDED
@@ -0,0 +1,73 @@
1
+ # Vue Bindings for Vertex Viewer SDK
2
+
3
+ ![npm](https://img.shields.io/npm/v/@vertexvis/viewer-vue)
4
+ ![npm (scoped with tag)](https://img.shields.io/npm/v/@vertexvis/viewer-vue/canary)
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
@@ -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',