@searchcraft/vue-sdk 0.8.2 → 0.9.1
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 +35 -41
- package/dist/index.d.ts +11 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +4799 -589
- package/dist/index.es.js.map +1 -1
- package/dist/index.umd.js +35 -1
- package/dist/index.umd.js.map +1 -1
- package/dist/stencil-web-components.d.ts +1 -2
- package/dist/stencil-web-components.d.ts.map +1 -1
- package/package.json +4 -2
- package/dist/plugin.d.ts +0 -3
- package/dist/plugin.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -36,14 +36,29 @@ These components can be added to your Vue app and customized with configurations
|
|
|
36
36
|
|
|
37
37
|
Example Setup
|
|
38
38
|
|
|
39
|
+
#### Example Setup
|
|
40
|
+
|
|
41
|
+
As early as possible in the app lifecycle, initialize the Searchcraft object:
|
|
42
|
+
```jsx
|
|
43
|
+
import { Searchcraft } from '@searchcraft/react-sdk';
|
|
44
|
+
|
|
45
|
+
const searchcraft = new Searchcraft({
|
|
46
|
+
index: ['your_index_from_vektron'],
|
|
47
|
+
readKey: 'your_read_key_from_vektron',
|
|
48
|
+
endpointURL: 'your_searchcraft_endpoint_url',
|
|
49
|
+
searchDebounceDelay: 50, // Optional debounce delay in milliseconds
|
|
50
|
+
})
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Add components to your application:
|
|
55
|
+
|
|
39
56
|
```jsx
|
|
40
57
|
|
|
41
58
|
<template>
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
<BaseSearchResults />
|
|
46
|
-
</SearchcraftProvider>
|
|
59
|
+
<SearchInputForm />
|
|
60
|
+
<FilterPanel :items="filterPanelItems" />
|
|
61
|
+
<BaseSearchResults />
|
|
47
62
|
</template>
|
|
48
63
|
|
|
49
64
|
<script>
|
|
@@ -63,12 +78,6 @@ export default {
|
|
|
63
78
|
},
|
|
64
79
|
data() {
|
|
65
80
|
return {
|
|
66
|
-
config: {
|
|
67
|
-
index: ['your_index_from_vektron'],
|
|
68
|
-
readKey: 'your_read_key_from_vektron',
|
|
69
|
-
endpointURL: 'your_searchcraft_endpoint_url',
|
|
70
|
-
searchDebounceDelay: 50, // Optional debounce delay in milliseconds
|
|
71
|
-
},
|
|
72
81
|
filterPanelItems: [
|
|
73
82
|
{
|
|
74
83
|
type: 'mostRecentToggle',
|
|
@@ -185,44 +194,29 @@ export const searchResultMappings = {
|
|
|
185
194
|
|
|
186
195
|
```
|
|
187
196
|
|
|
188
|
-
Event Handling
|
|
189
|
-
|
|
190
|
-
The Vue SDK components emit events for common actions like query submission, input focus, or search results. These events can be handled using Vue’s v-on or @ syntax.
|
|
197
|
+
#### Event Handling
|
|
198
|
+
You can subscribe to various events within Searchcraft:
|
|
191
199
|
|
|
192
200
|
```jsx
|
|
193
201
|
|
|
194
|
-
|
|
202
|
+
const searchcraft = new Searchcraft({
|
|
203
|
+
index: ['your_index_from_vektron'],
|
|
204
|
+
readKey: 'your_read_key_from_vektron',
|
|
205
|
+
endpointURL: 'your_searchcraft_endpoint_url',
|
|
206
|
+
});
|
|
195
207
|
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
@inputFocus="handleInputFocus"
|
|
200
|
-
@inputBlur="handleInputBlur"
|
|
201
|
-
/>
|
|
202
|
-
<BaseSearchResults @noResults="handleNoResults" />
|
|
203
|
-
</template>
|
|
208
|
+
const unsubscribeCallback = searchcraft.subscribe('query_submitted', (event) => {
|
|
209
|
+
// Do something in your application when a query has been submitted
|
|
210
|
+
});
|
|
204
211
|
|
|
205
|
-
<script>
|
|
206
|
-
export default {
|
|
207
|
-
methods: {
|
|
208
|
-
handleQuerySubmit(event) {
|
|
209
|
-
console.log('Query submitted:', event.detail);
|
|
210
|
-
},
|
|
211
|
-
handleInputFocus() {
|
|
212
|
-
console.log('Input focused');
|
|
213
|
-
},
|
|
214
|
-
handleInputBlur() {
|
|
215
|
-
console.log('Input blurred');
|
|
216
|
-
},
|
|
217
|
-
handleNoResults() {
|
|
218
|
-
console.log('No results found');
|
|
219
|
-
},
|
|
220
|
-
},
|
|
221
|
-
};
|
|
222
|
-
</script>
|
|
223
212
|
|
|
213
|
+
const unsubscribeCallback = searchcraft.subscribe('ad_container_rendered', (event) => {
|
|
214
|
+
// Do something when a new ad container has been rendered
|
|
215
|
+
});
|
|
224
216
|
```
|
|
225
217
|
|
|
218
|
+
For a complete listing of event subscriptions, refer to the api reference.
|
|
219
|
+
|
|
226
220
|
Additional Information
|
|
227
221
|
|
|
228
222
|
For more advanced use cases and component-specific documentation, refer to the official [Searchcraft Vue SDK documentation](https://docs.searchcraft.io/).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
|
+
import { SearchcraftConfig, SearchcraftCore } from '@searchcraft/core';
|
|
1
2
|
/**
|
|
2
3
|
* Export all components and plugins for the Vue SDK here.
|
|
3
4
|
*/
|
|
4
5
|
export * from './components';
|
|
5
|
-
|
|
6
|
+
/**
|
|
7
|
+
* The consumer-facing Searchcraft class.
|
|
8
|
+
*/
|
|
9
|
+
export declare class Searchcraft extends SearchcraftCore {
|
|
10
|
+
constructor(config: SearchcraftConfig);
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Exports the shared types that all SDKs need
|
|
14
|
+
*/
|
|
15
|
+
export type * from '@searchcraft/core/dist/types/sdk-types';
|
|
6
16
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,iBAAiB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAK5E;;GAEG;AACH,cAAc,cAAc,CAAC;AAE7B;;GAEG;AACH,qBAAa,WAAY,SAAQ,eAAe;gBAClC,MAAM,EAAE,iBAAiB;CAMtC;AAED;;GAEG;AACH,mBAAmB,wCAAwC,CAAC"}
|