@searchcraft/vue-sdk 0.7.0 → 0.7.2

package/README.md

@@ -1,27 +1,228 @@
 # Searchcraft Vue SDK
 
-## Type Support for `.vue` Imports in TS
+The Searchcraft Vue SDK provides tools for integrating the Searchcraft API into your Vue applications. It supports core functionalities like searching, managing state, and working with search results.
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+## Installation
 
-## Customize configuration
+Install with Yarn:
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+```bash
+$ yarn add @searchcraft/vue-sdk
+```
 
-## Project Setup
+Install with NPM:
 
-```sh
-yarn
+```bash
+$ npm install @searchcraft/vue-sdk
 ```
 
-### Compile and Hot-Reload for Development
+## Initialization and Basic Usage
+
+### Vue Components
+
+The Vue SDK provides the following prebuilt components for use in your application:
+
+```jsx
+
+<SearchInputForm />
+<SearchPopoverForm />
+<FilterPanel />
+<ResultsInfo />
+<BaseSearchResults />
 
-```sh
-yarn dev
 ```
 
-### Type-Check, Compile and Minify for Production
+These components can be added to your Vue app and customized with configurations as needed.
+
+Example Setup
+
+```jsx
+
+<template>
+  <SearchcraftProvider :config="config">
+    <SearchInputForm />
+    <FilterPanel :items="filterPanelItems" />
+    <BaseSearchResults />
+  </SearchcraftProvider>
+</template>
+
+<script>
+import {
+  SearchcraftProvider,
+  SearchInputForm,
+  FilterPanel,
+  BaseSearchResults,
+} from '@searchcraft/vue-sdk';
+
+export default {
+  components: {
+    SearchcraftProvider,
+    SearchInputForm,
+    FilterPanel,
+    BaseSearchResults,
+  },
+  data() {
+    return {
+      config: {
+        index: ['your_index_from_vektron'],
+        readKey: 'your_read_key_from_vektron',
+        endpointURL: 'your_searchcraft_endpoint_url',
+        searchDebounceDelay: 50, // Optional debounce delay in milliseconds
+      },
+      filterPanelItems: [
+        {
+          type: 'mostRecentToggle',
+          label: 'Most Recent',
+          options: {
+            subLabel: 'Show the most recently published articles first.',
+          },
+        },
+        {
+          type: 'exactMatchToggle',
+          label: 'Exact Match',
+          options: {
+            subLabel: 'Only show results that precisely match your search.',
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+
+```
+
+Example Filter Configuration
+
+Below is an example of a filter panel configuration object. It specifies the filters to be displayed in the filter panel and maps them to the corresponding index fields.
+
+```jsx
+
+const today = new Date();
+const pastDate = new Date(today);
+pastDate.setFullYear(today.getFullYear() - 10);
+
+export const filterPanelItems = [
+  {
+    type: 'mostRecentToggle',
+    label: 'Most Recent',
+    options: {
+      subLabel: 'Show the most recently published articles first.',
+    },
+  },
+  {
+    type: 'exactMatchToggle',
+    label: 'Exact Match',
+    options: {
+      subLabel: 'Only show results that precisely match your search.',
+    },
+  },
+  {
+    type: 'dateRange',
+    fieldName: 'date_published',
+    label: 'Filter by Year',
+    options: {
+      minDate: pastDate,
+      maxDate: today,
+      granularity: 'year',
+    },
+  },
+  {
+    type: 'facets',
+    fieldName: 'section',
+    label: 'Filter by Section',
+  },
+];
 
-```sh
-yarn build
 ```
+
+Example Result Mappings
+
+Customize the appearance and behavior of search results by modifying the searchResultMappings configuration. Use field names from your index to map the content.
+
+```jsx
+
+export const searchResultMappings = {
+  containerHref: {
+    fieldNames: [
+      {
+        fieldName: 'canonical_link',
+        dataType: 'text',
+      },
+    ],
+  },
+  footer: {
+    fieldNames: [
+      {
+        fieldName: 'date_published',
+        dataType: 'date',
+      },
+      {
+        fieldName: 'author_name',
+        dataType: 'text',
+      },
+    ],
+    delimiter: ' • ',
+  },
+  imageSource: {
+    fieldNames: [
+      {
+        fieldName: 'medium_image',
+        dataType: 'text',
+      },
+    ],
+  },
+  body: {
+    fieldNames: [{ fieldName: 'sub_headline', dataType: 'text' }],
+  },
+  title: {
+    fieldNames: [{ fieldName: 'section_name', dataType: 'text' }],
+  },
+  subtitle: {
+    fieldNames: [{ fieldName: 'headline', dataType: 'text' }],
+  },
+};
+
+```
+
+Event Handling
+
+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.
+
+```jsx
+
+Example
+
+<template>
+  <SearchInputForm
+    @querySubmit="handleQuerySubmit"
+    @inputFocus="handleInputFocus"
+    @inputBlur="handleInputBlur"
+  />
+  <BaseSearchResults @noResults="handleNoResults" />
+</template>
+
+<script>
+export default {
+  methods: {
+    handleQuerySubmit(event) {
+      console.log('Query submitted:', event.detail);
+    },
+    handleInputFocus() {
+      console.log('Input focused');
+    },
+    handleInputBlur() {
+      console.log('Input blurred');
+    },
+    handleNoResults() {
+      console.log('No results found');
+    },
+  },
+};
+</script>
+
+```
+
+Additional Information
+
+For more advanced use cases and component-specific documentation, refer to the official [Searchcraft Vue SDK documentation](https://docs.searchcraft.io/).

package/dist/components/SearchcraftBaseSearchResults.d.ts

@@ -0,0 +1,13 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props Used by the `SearchcraftBaseSearchResults` Component.
+ */
+interface SearchcraftBaseSearchResultsProps extends Components.SearchcraftBaseSearchResults {
+}
+/**
+ * The Base Search Results
+ */
+declare const SearchcraftBaseSearchResults: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftBaseSearchResults & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftBaseSearchResults & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftBaseSearchResults };
+export type { SearchcraftBaseSearchResultsProps };
+//# sourceMappingURL=SearchcraftBaseSearchResults.d.ts.map

package/dist/components/SearchcraftBaseSearchResults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftBaseSearchResults.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftBaseSearchResults.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,UAAU,iCACR,SAAQ,UAAU,CAAC,4BAA4B;CAAG;AAEpD;;GAEG;AACH,QAAA,MAAM,4BAA4B,mYAAY,CAAC;AAE/C,OAAO,EAAE,4BAA4B,EAAE,CAAC;AAExC,YAAY,EAAE,iCAAiC,EAAE,CAAC"}

package/dist/components/SearchcraftFilterPanel.d.ts

@@ -0,0 +1,13 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The props used by the SearchcraftFilterPanel.
+ */
+interface SearchcraftFilterPanelProps extends Components.SearchcraftFilterPanel {
+}
+/**
+ * The SearchcraftFilterPanel Vue Component.
+ */
+declare const SearchcraftFilterPanel: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftFilterPanel & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftFilterPanel & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftFilterPanel };
+export type { SearchcraftFilterPanelProps };
+//# sourceMappingURL=SearchcraftFilterPanel.d.ts.map

package/dist/components/SearchcraftFilterPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftFilterPanel.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftFilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,UAAU,2BACR,SAAQ,UAAU,CAAC,sBAAsB;CAAG;AAE9C;;GAEG;AACH,QAAA,MAAM,sBAAsB,uXAAY,CAAC;AAEzC,OAAO,EAAE,sBAAsB,EAAE,CAAC;AAElC,YAAY,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/SearchcraftInputForm.d.ts

@@ -0,0 +1,12 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props for the SearchcraftInputForm component.
+ */
+export interface SearchcraftInputFormProps extends Components.SearchcraftInputForm {
+}
+/**
+ * The Vue Component for the SearchcraftInputForm.
+ */
+declare const SearchcraftInputForm: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftInputForm & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftInputForm & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftInputForm };
+//# sourceMappingURL=SearchcraftInputForm.d.ts.map

package/dist/components/SearchcraftInputForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftInputForm.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftInputForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,yBACf,SAAQ,UAAU,CAAC,oBAAoB;CAAG;AAE5C;;GAEG;AACH,QAAA,MAAM,oBAAoB,mXAAY,CAAC;AAEvC,OAAO,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/components/SearchcraftPopoverButton.d.ts

@@ -0,0 +1,12 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props for the SearchcraftPopoverButton.
+ */
+export interface SearchcraftPopoverButtonProps extends Components.SearchcraftPopoverButton {
+}
+/**
+ * The Vue component for the SearchcraftPopoverButton.
+ */
+declare const SearchcraftPopoverButton: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftPopoverButton & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftPopoverButton & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftPopoverButton };
+//# sourceMappingURL=SearchcraftPopoverButton.d.ts.map

package/dist/components/SearchcraftPopoverButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftPopoverButton.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftPopoverButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,6BACf,SAAQ,UAAU,CAAC,wBAAwB;CAAG;AAEhD;;GAEG;AACH,QAAA,MAAM,wBAAwB,2XAAY,CAAC;AAE3C,OAAO,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/components/SearchcraftPopoverForm.d.ts

@@ -0,0 +1,12 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props for the SearchcraftPopoverForm.
+ */
+export interface SearchcraftPopoverFormProps extends Components.SearchcraftPopoverForm {
+}
+/**
+ * The Vue component for the SearchcraftPopoverForm.
+ */
+declare const SearchcraftPopoverForm: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftPopoverForm & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftPopoverForm & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftPopoverForm };
+//# sourceMappingURL=SearchcraftPopoverForm.d.ts.map

package/dist/components/SearchcraftPopoverForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftPopoverForm.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftPopoverForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,2BACf,SAAQ,UAAU,CAAC,sBAAsB;CAAG;AAE9C;;GAEG;AACH,QAAA,MAAM,sBAAsB,uXAAY,CAAC;AAEzC,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/SearchcraftResultsInfo.d.ts

@@ -0,0 +1,12 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props for the SearchcraftResultsInfo component.
+ */
+export interface SearchcraftResultsInfoProps extends Components.SearchcraftResultsInfo {
+}
+/**
+ * The Vue component for SearchcraftResultsInfo.
+ */
+declare const SearchcraftResultsInfo: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftResultsInfo & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftResultsInfo & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftResultsInfo };
+//# sourceMappingURL=SearchcraftResultsInfo.d.ts.map

package/dist/components/SearchcraftResultsInfo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftResultsInfo.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftResultsInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,2BACf,SAAQ,UAAU,CAAC,sBAAsB;CAAG;AAE9C;;GAEG;AACH,QAAA,MAAM,sBAAsB,uXAAY,CAAC;AAEzC,OAAO,EAAE,sBAAsB,EAAE,CAAC"}

package/dist/components/SearchcraftTheme.d.ts

@@ -0,0 +1,12 @@
+import { Components } from '@searchcraft/javascript-sdk';
+/**
+ * The Props for the SearchcraftTheme component.
+ */
+export interface SearchcraftThemeProps extends Components.SearchcraftTheme {
+}
+/**
+ * The Vue component for SearchcraftTheme.
+ */
+declare const SearchcraftTheme: import('../../vue').DefineSetupFnComponent<import("@searchcraft/javascript-sdk").JSX.SearchcraftTheme & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, {}, {}, import("@searchcraft/javascript-sdk").JSX.SearchcraftTheme & import('@stencil/vue-output-target/runtime').InputProps<string | number | boolean>, import('../../vue').PublicProps>;
+export { SearchcraftTheme };
+//# sourceMappingURL=SearchcraftTheme.d.ts.map

package/dist/components/SearchcraftTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchcraftTheme.d.ts","sourceRoot":"","sources":["../../src/components/SearchcraftTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,UAAU,CAAC,gBAAgB;CAAG;AAE7E;;GAEG;AACH,QAAA,MAAM,gBAAgB,2WAAY,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/index.d.ts

@@ -1,13 +1,8 @@
-export { default as SearchcraftButton } from './SearchcraftButton.vue';
-export { default as SearchcraftBaseSearchResult } from './SearchcraftBaseSearchResult.vue';
-export { default as SearchcraftBaseSearchResults } from './SearchcraftBaseSearchResults.vue';
-export { default as SearchcraftErrorMessage } from './SearchcraftErrorMessage.vue';
-export { default as SearchcraftFacetList } from './SearchcraftFacetList.vue';
-export { default as SearchcraftFilterPanel } from './SearchcraftFilterPanel.vue';
-export { default as SearchcraftInputForm } from './SearchcraftInputForm.vue';
-export { default as SearchcraftInputLabel } from './SearchcraftInputLabel.vue';
-export { default as SearchcraftPopoverButton } from './SearchcraftPopoverButton.vue';
-export { default as SearchcraftPopoverForm } from './SearchcraftPopoverForm.vue';
-export { default as SearchcraftSlider } from './SearchcraftSlider.vue';
-export { default as SearchcraftResultsInfo } from './SearchcraftResultsInfo.vue';
-export { default as SearchcraftToggleButton } from './SearchcraftToggleButton.vue';
+export * from './SearchcraftBaseSearchResults';
+export * from './SearchcraftFilterPanel';
+export * from './SearchcraftInputForm';
+export * from './SearchcraftPopoverButton';
+export * from './SearchcraftPopoverForm';
+export * from './SearchcraftResultsInfo';
+export * from './SearchcraftTheme';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC"}

package/dist/index.d.ts

@@ -3,3 +3,4 @@
  */
 export * from './components';
 export * from './plugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}