@searchcraft/vue-sdk 0.7.0 → 0.7.1

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,32 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftBaseSearchResultsProps = Partial<Components.SearchcraftBaseSearchResults>;
+declare const _default: import('../../vue').DefineComponent<{
+    adInterval?: number | undefined;
+    buttonLabel?: string | undefined;
+    buttonRel?: "noreferrer" | "noopener" | "nofollow" | undefined;
+    buttonTarget?: "_blank" | "_self" | "_top" | "_parent" | undefined;
+    containerRel?: "noreferrer" | "noopener" | "nofollow" | undefined;
+    containerTarget?: "_blank" | "_self" | "_top" | "_parent" | undefined;
+    customStylesForResults?: string | Record<string, Record<string, string>> | undefined;
+    placeAdAtEnd?: boolean | undefined;
+    placeAdAtStart?: boolean | undefined;
+    resultImagePlacement?: "left" | "right" | undefined;
+    searchResultMappings?: import('@searchcraft/javascript-sdk').SearchResultMappings | undefined;
+}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{
+    adInterval?: number | undefined;
+    buttonLabel?: string | undefined;
+    buttonRel?: "noreferrer" | "noopener" | "nofollow" | undefined;
+    buttonTarget?: "_blank" | "_self" | "_top" | "_parent" | undefined;
+    containerRel?: "noreferrer" | "noopener" | "nofollow" | undefined;
+    containerTarget?: "_blank" | "_self" | "_top" | "_parent" | undefined;
+    customStylesForResults?: string | Record<string, Record<string, string>> | undefined;
+    placeAdAtEnd?: boolean | undefined;
+    placeAdAtStart?: boolean | undefined;
+    resultImagePlacement?: "left" | "right" | undefined;
+    searchResultMappings?: import('@searchcraft/javascript-sdk').SearchResultMappings | undefined;
+}> & Readonly<{}>, {
+    placeAdAtEnd: boolean;
+    placeAdAtStart: boolean;
+}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,iCAAiC,GAAG,OAAO,CAAC,UAAU,CAAC,4BAA4B,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjG,wBAmBG"}

package/dist/components/SearchcraftFilterPanel.d.ts

@@ -0,0 +1,9 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftFilterPanelProps = Partial<Components.SearchcraftFilterPanel>;
+declare const _default: import('../../vue').DefineComponent<{
+    items?: import('@searchcraft/javascript-sdk').FilterItem[] | undefined;
+}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{
+    items?: import('@searchcraft/javascript-sdk').FilterItem[] | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;;;;;;AAErF,wBAWG"}

package/dist/components/SearchcraftInputForm.d.ts

@@ -0,0 +1,38 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftInputFormProps = Partial<Components.SearchcraftInputForm>;
+declare const _default: import('../../vue').DefineComponent<{
+    autoSearch?: boolean | undefined;
+    buttonLabel?: string | undefined;
+    buttonPlacement?: "left" | "right" | "none" | undefined;
+    config?: import('@searchcraft/core').SearchcraftConfig | undefined;
+    customStyles?: string | Record<string, string> | undefined;
+    inputLabel?: string | undefined;
+    placeholderValue?: string | undefined;
+    searchTerm?: string | undefined;
+}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, ("inputCleared" | "noResultsReceived" | "inputFocus" | "inputBlur" | "querySubmit")[], "inputCleared" | "noResultsReceived" | "inputFocus" | "inputBlur" | "querySubmit", import('../../vue').PublicProps, Readonly<{
+    autoSearch?: boolean | undefined;
+    buttonLabel?: string | undefined;
+    buttonPlacement?: "left" | "right" | "none" | undefined;
+    config?: import('@searchcraft/core').SearchcraftConfig | undefined;
+    customStyles?: string | Record<string, string> | undefined;
+    inputLabel?: string | undefined;
+    placeholderValue?: string | undefined;
+    searchTerm?: string | undefined;
+}> & Readonly<{
+    onInputCleared?: ((...args: any[]) => any) | undefined;
+    onNoResultsReceived?: ((...args: any[]) => any) | undefined;
+    onInputFocus?: ((...args: any[]) => any) | undefined;
+    onInputBlur?: ((...args: any[]) => any) | undefined;
+    onQuerySubmit?: ((...args: any[]) => any) | undefined;
+}>, {
+    buttonLabel: string;
+    customStyles: Record<string, string>;
+    autoSearch: boolean;
+    buttonPlacement: "left" | "right";
+    inputLabel: string;
+    placeholderValue: string;
+    searchTerm: string;
+    debounceDelay: number;
+}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjF,wBAiEG"}

package/dist/components/SearchcraftPopoverButton.d.ts

@@ -0,0 +1,5 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftPopoverButtonProps = Partial<Components.SearchcraftPopoverButton>;
+declare const _default: import('../../vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,6BAA6B,GAAG,OAAO,CAAC,UAAU,CAAC,wBAAwB,CAAC,CAAC;;AAEzF,wBAMG"}

package/dist/components/SearchcraftPopoverForm.d.ts

@@ -0,0 +1,17 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftPopoverFormProps = Partial<Components.SearchcraftPopoverForm>;
+declare const _default: import('../../vue').DefineComponent<{
+    config?: import('@searchcraft/core').SearchcraftConfig | undefined;
+    hotkey?: string | undefined;
+    hotkeyModifier?: "ctrl" | "meta" | "alt" | "option" | undefined;
+    popoverResultMappings?: import('@searchcraft/javascript-sdk').PopoverResultMappings | undefined;
+    type?: "inline" | "fullscreen" | "modal" | undefined;
+}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{
+    config?: import('@searchcraft/core').SearchcraftConfig | undefined;
+    hotkey?: string | undefined;
+    hotkeyModifier?: "ctrl" | "meta" | "alt" | "option" | undefined;
+    popoverResultMappings?: import('@searchcraft/javascript-sdk').PopoverResultMappings | undefined;
+    type?: "inline" | "fullscreen" | "modal" | undefined;
+}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;;;;;;;;;;;;;;AAErF,wBA2BG"}

package/dist/components/SearchcraftResultsInfo.d.ts

@@ -0,0 +1,5 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftResultsInfoProps = Partial<Components.SearchcraftResultsInfo>;
+declare const _default: import('../../vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,2BAA2B,GAAG,OAAO,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC;;AAErF,wBAMG"}

package/dist/components/SearchcraftTheme.d.ts

@@ -0,0 +1,5 @@
+import { Components } from '@searchcraft/javascript-sdk';
+export type SearchcraftThemeProps = Partial<Components.SearchcraftTheme>;
+declare const _default: import('../../vue').DefineComponent<{}, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('../../vue').ComponentOptionsMixin, import('../../vue').ComponentOptionsMixin, {}, string, import('../../vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('../../vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# 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;AAI9D,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC;;AAEzE,wBAMG"}

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 { default as SearchcraftBaseSearchResults } from './SearchcraftBaseSearchResults';
+export { default as SearchcraftFilterPanel } from './SearchcraftFilterPanel';
+export { default as SearchcraftInputForm } from './SearchcraftInputForm';
+export { default as SearchcraftPopoverButton } from './SearchcraftPopoverButton';
+export { default as SearchcraftPopoverForm } from './SearchcraftPopoverForm';
+export { default as SearchcraftResultsInfo } from './SearchcraftResultsInfo';
+export { default as SearchcraftTheme } 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,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,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"}