@searchcraft/vue-sdk 0.15.1 → 0.16.0

package/README.md

@@ -160,11 +160,9 @@ export const filterPanelItems = [
 The Vue SDK supports custom search result templates using template functions. You can customize the appearance and behavior of search results by providing a template function:
 
 ```js
-import { html } from '@searchcraft/vue-sdk';
-
-export const customSearchResultTemplate = (data, index, { html }) => {
+export const customSearchResultTemplate = (data, index, { html, safeUrl }) => {
   return html`
-    <a href="${data.canonical_link}" target="_blank" rel="noreferrer">
+    <a href="${safeUrl(data.canonical_link)}" target="_blank" rel="noreferrer">
       <div class="search-result-content">
         <h3 class="search-result-content-subtitle">${data.section_name}</h3>
         <h2 class="search-result-content-title">${data.headline}</h2>
@@ -182,13 +180,18 @@ export const customSearchResultTemplate = (data, index, { html }) => {
         </footer>
       </div>
       <div class="search-result-image">
-        <img src="${data.medium_image}" alt="${data.headline}" />
+        <img src="${safeUrl(data.medium_image)}" alt="${data.headline}" />
       </div>
     </a>
   `;
 };
 ```
 
+The template receives two helpers:
+
+- `html` sanitizes values placed in text, and escapes values placed in an attribute so they stay inside it. Never place result values in event handler attributes such as `onclick`, or in `style`, since they would still run as script or apply as CSS.
+- `safeUrl` checks a URL before it is placed in an `href` or `src`. It returns relative, `http:`, `https:`, `mailto:`, `tel:`, `sms:` and `data:image/` URLs unchanged, and returns `#` for anything else, such as a `javascript:` URL. To allow your app's own scheme, pass it in `schemes`: `safeUrl(data.app_link, { schemes: ['myapp'] })`. Write links with such a scheme in the template's own markup. If the link's markup is placed as a value in the text of another `html` call, DOMPurify removes the URL.
+
 Then apply the template to your search results component:
 
 ```vue

package/dist/index.d.ts

@@ -231,8 +231,40 @@ export interface MostRecentToggleFilterItem extends FilterItem {
 	};
 }
 export type TemplateHtml = (strings: TemplateStringsArray, ...values: (string | number | undefined)[]) => string;
-export type SearchResultTemplate<T> = (data: T, index: number, utils: {
+/**
+ * Options for the `safeUrl` template helper.
+ */
+export type SafeUrlOptions = {
+	/**
+	 * More URL schemes to allow, such as an app's own scheme (`['myapp']`). A link with such a
+	 * scheme must be written in the template's own markup. If its markup is placed as a value in
+	 * the text of another `html` call, DOMPurify removes the URL.
+	 */
+	schemes?: string[];
+};
+/**
+ * Returns `url` unchanged when it is safe to place in an `href` or `src` attribute, and `#` when
+ * it is not. Relative URLs, `http:`, `https:`, `mailto:`, `tel:`, `sms:` and `data:image/` URLs
+ * are safe, along with any scheme passed in `options.schemes`.
+ */
+export type SafeUrl = (url: unknown, options?: SafeUrlOptions) => string;
+/**
+ * The helpers passed to every template.
+ */
+export type TemplateUtils = {
+	/**
+	 * Builds the template's markup. Values in text are sanitized, and values in attributes are
+	 * escaped so they stay inside their attribute. Values in event handler attributes such as
+	 * `onclick`, or in `style`, are not made safe, so never place result values there.
+	 */
 	html: TemplateHtml;
+	/**
+	 * Checks a URL before it is placed in an `href` or `src`. Returns `#` for unsafe URLs,
+	 * such as `javascript:` URLs.
+	 */
+	safeUrl: SafeUrl;
+};
+export type SearchResultTemplate<T> = (data: T, index: number, utils: TemplateUtils & {
 	source_index?: string;
 }) => string;
 export type SearchResultTemplateData = any;
@@ -243,23 +275,18 @@ export type ResultsInfoTemplate = (data: {
 	];
 	count: number;
 	responseTime: string;
-}, utils: {
-	html: TemplateHtml;
-}) => string;
+}, utils: TemplateUtils) => string;
 export type CustomAdTemplate = (data: {
 	adContainerId: string;
 	searchTerm: string;
-}, utils: {
-	html: TemplateHtml;
-}) => string;
+}, utils: TemplateUtils) => string;
 export type PopoverButtonTemplate = (data: {
 	isPopoverVisible: boolean;
-}, utils: {
-	html: TemplateHtml;
-}) => string;
-export type ADMAdTemplate = (data: ADMAd, utils: {
-	html: TemplateHtml;
-}) => string;
+}, utils: TemplateUtils) => string;
+export type PopoverNoResultsTemplate = (data: {
+	searchTerm: string;
+}, utils: TemplateUtils) => string;
+export type ADMAdTemplate = (data: ADMAd, utils: TemplateUtils) => string;
 export interface CustomAdConfig {
 	/**
 	 * The amount of debounce delay to add before calling the ad_container_rendered event
@@ -1124,6 +1151,11 @@ export namespace Components {
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * The placeholder text shown in the `skeuomorphic` button, and the accessible label of the `magnifying-glass` button. Set it to the same value as the `placeholderValue` of `searchcraft-popover-form` so the button matches the form it opens. When it is blank, the `magnifying-glass` button is labeled "Search".
+		  * @default 'Search'
+		 */
+		"placeholderValue"?: string;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
@@ -1175,6 +1207,14 @@ export namespace Components {
 	 * // index.js
 	 * const popoverForm = document.querySelector('searchcraft-popover-form');
 	 * popoverForm.popoverResultMappings = {};
+	 * // Or render each result with a template instead of `popoverResultMappings`.
+	 * popoverForm.template = (item, index, { html, safeUrl }) => html`
+	 *  <a href="${safeUrl(item.url)}">${item.title}</a>
+	 * `;
+	 * // Change the message shown when a search returns no results.
+	 * popoverForm.noResultsTemplate = ({ searchTerm }, { html }) => html`
+	 *  <p>Nothing matched "${searchTerm}".</p>
+	 * `;
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
@@ -1194,6 +1234,10 @@ export namespace Components {
 		  * @default 'meta'
 		 */
 		"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
+		/**
+		  * A callback function responsible for rendering the message shown when a search returns no results. When it is not provided, the popover shows `No results found for "<search term>".` The returned markup is sanitized with DOMPurify, which removes scripts, event handler attributes such as `onclick`, and links with schemes it does not allow, such as an app's own scheme.
+		 */
+		"noResultsTemplate"?: PopoverNoResultsTemplate;
 		/**
 		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
 		 */
@@ -1221,6 +1265,10 @@ export namespace Components {
 		  * @default false
 		 */
 		"showSummaryBox"?: boolean;
+		/**
+		  * A callback function responsible for rendering a result. When provided, it is used instead of `popoverResultMappings`. Pass URLs from the result through the `safeUrl` helper before placing them in an `href` or `src`. Never place result values in event handler attributes such as `onclick`, or in `style`.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 		/**
 		  * The type of popover form to render. - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content. - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component. - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
 		  * @default 'inline'
@@ -1244,12 +1292,21 @@ export namespace Components {
 		  * @default 0
 		 */
 		"documentPosition": number;
+		/**
+		  * The index of the result in the list view. Passed to the `template` callback.
+		  * @default 0
+		 */
+		"index": number;
 		"item": SearchClientResponseItem | undefined;
 		"popoverResultMappings": PopoverResultMappings | undefined;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * A callback function responsible for rendering the result. When provided, it is used instead of `popoverResultMappings`, which are still used if the template throws.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
 	/**
 	 * This web component is designed to display a list of results within a popover interface.
@@ -1274,6 +1331,10 @@ export namespace Components {
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * A callback function responsible for rendering a result. Passed to `searchcraft-popover-list-item`.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
@@ -1379,10 +1440,7 @@ export namespace Components {
 	 * ```
 	 * @js-example ```html
 	 * <!-- index.html -->
-	 * <searchcraft-search-results
-	 *   ad-interval="4"
-	 *   place-ad-at-start="true"
-	 * />
+	 * <searchcraft-search-results></searchcraft-search-results>
 	 * ```
 	 * ```js
 	 * // index.js
@@ -1393,8 +1451,6 @@ export namespace Components {
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -1402,8 +1458,6 @@ export namespace Components {
 	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   :template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -1420,7 +1474,7 @@ export namespace Components {
 		 */
 		"searchcraftId"?: string;
 		/**
-		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
+		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`. Pass URLs from the result through the `safeUrl` helper before placing them in an `href` or `src`. Never place result values in event handler attributes such as `onclick`, or in `style`.
 		 */
 		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
@@ -1898,6 +1952,14 @@ declare global {
 	 * // index.js
 	 * const popoverForm = document.querySelector('searchcraft-popover-form');
 	 * popoverForm.popoverResultMappings = {};
+	 * // Or render each result with a template instead of `popoverResultMappings`.
+	 * popoverForm.template = (item, index, { html, safeUrl }) => html`
+	 *  <a href="${safeUrl(item.url)}">${item.title}</a>
+	 * `;
+	 * // Change the message shown when a search returns no results.
+	 * popoverForm.noResultsTemplate = ({ searchTerm }, { html }) => html`
+	 *  <p>Nothing matched "${searchTerm}".</p>
+	 * `;
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
@@ -2020,10 +2082,7 @@ declare global {
 	 * ```
 	 * @js-example ```html
 	 * <!-- index.html -->
-	 * <searchcraft-search-results
-	 *   ad-interval="4"
-	 *   place-ad-at-start="true"
-	 * />
+	 * <searchcraft-search-results></searchcraft-search-results>
 	 * ```
 	 * ```js
 	 * // index.js
@@ -2034,8 +2093,6 @@ declare global {
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -2043,8 +2100,6 @@ declare global {
 	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   :template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -2583,6 +2638,11 @@ declare namespace LocalJSX {
 	 * ```
 	 */
 	interface SearchcraftPopoverButton {
+		/**
+		  * The placeholder text shown in the `skeuomorphic` button, and the accessible label of the `magnifying-glass` button. Set it to the same value as the `placeholderValue` of `searchcraft-popover-form` so the button matches the form it opens. When it is blank, the `magnifying-glass` button is labeled "Search".
+		  * @default 'Search'
+		 */
+		"placeholderValue"?: string;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
@@ -2634,6 +2694,14 @@ declare namespace LocalJSX {
 	 * // index.js
 	 * const popoverForm = document.querySelector('searchcraft-popover-form');
 	 * popoverForm.popoverResultMappings = {};
+	 * // Or render each result with a template instead of `popoverResultMappings`.
+	 * popoverForm.template = (item, index, { html, safeUrl }) => html`
+	 *  <a href="${safeUrl(item.url)}">${item.title}</a>
+	 * `;
+	 * // Change the message shown when a search returns no results.
+	 * popoverForm.noResultsTemplate = ({ searchTerm }, { html }) => html`
+	 *  <p>Nothing matched "${searchTerm}".</p>
+	 * `;
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
@@ -2653,6 +2721,10 @@ declare namespace LocalJSX {
 		  * @default 'meta'
 		 */
 		"hotkeyModifier"?: "ctrl" | "meta" | "alt" | "option";
+		/**
+		  * A callback function responsible for rendering the message shown when a search returns no results. When it is not provided, the popover shows `No results found for "<search term>".` The returned markup is sanitized with DOMPurify, which removes scripts, event handler attributes such as `onclick`, and links with schemes it does not allow, such as an app's own scheme.
+		 */
+		"noResultsTemplate"?: PopoverNoResultsTemplate;
 		/**
 		  * The placeholder's render behavior. 'hide-on-focus' - Hide the placeholder text immediately when the input form gains focus. 'hide-on-text-entered' - Only hide the placeholder when the input form has text entered into it.
 		 */
@@ -2680,6 +2752,10 @@ declare namespace LocalJSX {
 		  * @default false
 		 */
 		"showSummaryBox"?: boolean;
+		/**
+		  * A callback function responsible for rendering a result. When provided, it is used instead of `popoverResultMappings`. Pass URLs from the result through the `safeUrl` helper before placing them in an `href` or `src`. Never place result values in event handler attributes such as `onclick`, or in `style`.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 		/**
 		  * The type of popover form to render. - `inline` - Renders inline with the rest of the content on the page. The search results pop over the page content. - `fullscreen` - Renders in fullscreen view. Used together with the `searchcraft-popover-button` component. - `modal` - Renders in a modal view. Used together with the `searchcraft-popover-button` component.
 		  * @default 'inline'
@@ -2703,12 +2779,21 @@ declare namespace LocalJSX {
 		  * @default 0
 		 */
 		"documentPosition"?: number;
+		/**
+		  * The index of the result in the list view. Passed to the `template` callback.
+		  * @default 0
+		 */
+		"index"?: number;
 		"item"?: SearchClientResponseItem | undefined;
 		"popoverResultMappings"?: PopoverResultMappings | undefined;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * A callback function responsible for rendering the result. When provided, it is used instead of `popoverResultMappings`, which are still used if the template throws.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
 	/**
 	 * This web component is designed to display a list of results within a popover interface.
@@ -2733,6 +2818,10 @@ declare namespace LocalJSX {
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * A callback function responsible for rendering a result. Passed to `searchcraft-popover-list-item`.
+		 */
+		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
 	/**
 	 * This web component is designed to display the number of results returned from a search query.
@@ -2838,10 +2927,7 @@ declare namespace LocalJSX {
 	 * ```
 	 * @js-example ```html
 	 * <!-- index.html -->
-	 * <searchcraft-search-results
-	 *   ad-interval="4"
-	 *   place-ad-at-start="true"
-	 * />
+	 * <searchcraft-search-results></searchcraft-search-results>
 	 * ```
 	 * ```js
 	 * // index.js
@@ -2852,8 +2938,6 @@ declare namespace LocalJSX {
 	 * ```
 	 * @react-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -2861,8 +2945,6 @@ declare namespace LocalJSX {
 	 * ```
 	 * @vue-example ```jsx
 	 * <SearchcraftSearchResults
-	 *   adInterval={4}
-	 *   placeAdAtState={true}
 	 *   :template={(item, index, { html }) => html`
 	 *     <h2>${item.title}</h2>
 	 *   `}
@@ -2879,7 +2961,7 @@ declare namespace LocalJSX {
 		 */
 		"searchcraftId"?: string;
 		/**
-		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`.
+		  * A callback function responsible for rendering a result. Passed to `searchcraft-search-result`. Pass URLs from the result through the `safeUrl` helper before placing them in an `href` or `src`. Never place result values in event handler attributes such as `onclick`, or in `style`.
 		 */
 		"template"?: SearchResultTemplate<SearchResultTemplateData>;
 	}
@@ -3281,6 +3363,14 @@ declare module "@stencil/core" {
 			 * // index.js
 			 * const popoverForm = document.querySelector('searchcraft-popover-form');
 			 * popoverForm.popoverResultMappings = {};
+			 * // Or render each result with a template instead of `popoverResultMappings`.
+			 * popoverForm.template = (item, index, { html, safeUrl }) => html`
+			 *  <a href="${safeUrl(item.url)}">${item.title}</a>
+			 * `;
+			 * // Change the message shown when a search returns no results.
+			 * popoverForm.noResultsTemplate = ({ searchTerm }, { html }) => html`
+			 *  <p>Nothing matched "${searchTerm}".</p>
+			 * `;
 			 * ```
 			 * @react-example ```jsx
 			 * <SearchcraftPopoverForm type="inline" popoverResultMappings={[]} />
@@ -3373,10 +3463,7 @@ declare module "@stencil/core" {
 			 * ```
 			 * @js-example ```html
 			 * <!-- index.html -->
-			 * <searchcraft-search-results
-			 *   ad-interval="4"
-			 *   place-ad-at-start="true"
-			 * />
+			 * <searchcraft-search-results></searchcraft-search-results>
 			 * ```
 			 * ```js
 			 * // index.js
@@ -3387,8 +3474,6 @@ declare module "@stencil/core" {
 			 * ```
 			 * @react-example ```jsx
 			 * <SearchcraftSearchResults
-			 *   adInterval={4}
-			 *   placeAdAtState={true}
 			 *   template={(item, index, { html }) => html`
 			 *     <h2>${item.title}</h2>
 			 *   `}
@@ -3396,8 +3481,6 @@ declare module "@stencil/core" {
 			 * ```
 			 * @vue-example ```jsx
 			 * <SearchcraftSearchResults
-			 *   adInterval={4}
-			 *   placeAdAtState={true}
 			 *   :template={(item, index, { html }) => html`
 			 *     <h2>${item.title}</h2>
 			 *   `}
@@ -3504,25 +3587,17 @@ export interface SearchcraftSearchResultsProps extends Components.SearchcraftSea
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftSearchResults from '@searchcraft/vue-sdk';
- * import searchResultMappings from './searchResultMappings';
+ * import { SearchcraftSearchResults } from '@searchcraft/vue-sdk';
  *
- * const handleNoResults = () => {
- *   console.log("No search results found");
- * };
+ * const template = (item, index, { html, safeUrl }) => html`
+ *   <a href="${safeUrl(item.url)}">
+ *     <h2>${item.title}</h2>
+ *   </a>
+ * `;
  * </script>
  *
  * <template>
- *   <SearchcraftSearchResults
- *     :searchResultMappings="searchResultMappings"
- *     resultImagePlacement="left"
- *     buttonLabel="View More"
- *     buttonTarget="_blank"
- *     buttonRel="noopener"
- *     containerTarget="_self"
- *     containerRel="nofollow"
- *     @noResults="handleNoResults"
- *   />
+ *   <SearchcraftSearchResults :template="template" />
  * </template>
  * ```
  */
@@ -3561,30 +3636,18 @@ export interface SearchcraftInputFormProps extends Components.SearchcraftInputFo
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftInputForm from '@searchcraft/vue-sdk';
- * import searchcraftConfig from './searchcraftConfig';
- *
- * const handleQuerySubmit = (event) => {
- *   console.log("Query submitted", event.detail);
- * };
+ * import { SearchcraftInputForm } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
  *   <SearchcraftInputForm
- *     :config="searchcraftConfig"
  *     :autoSearch="true"
  *     buttonPlacement="right"
  *     buttonLabel="Search"
- *     inputLabel="Search Database"
- *     :customStyles="{ border: '1px solid gray', padding: '5px' }"
+ *     inputLabel="Search articles"
  *     placeholderValue="Search here..."
- *     searchTerm=""
- *     @querySubmit="handleQuerySubmit"
- *     @inputCleared="() => console.log('Input cleared')"
- *     @noResultsReceived="() => console.log('No results found')"
  *     @inputFocus="() => console.log('Input focused')"
  *     @inputBlur="() => console.log('Input blurred')"
- *     @inputInit="() => console.log('Input initialized')"
  *   />
  * </template>
  * ```
@@ -3601,7 +3664,7 @@ export interface SearchcraftPopoverButtonProps extends Components.SearchcraftPop
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftPopoverButton from '@searchcraft/vue-sdk';
+ * import { SearchcraftPopoverButton } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
@@ -3624,14 +3687,12 @@ export interface SearchcraftPopoverFormProps extends Components.SearchcraftPopov
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftPopoverForm from '@searchcraft/vue-sdk';
- * import searchcraftConfig from './searchcraftConfig';
+ * import { SearchcraftPopoverForm } from '@searchcraft/vue-sdk';
  * import popoverResultMappings from './popoverResultMappings';
  * </script>
  *
  * <template>
  *   <SearchcraftPopoverForm
- *     :config="searchcraftConfig"
  *     type="fullscreen"
  *     :popoverResultMappings="popoverResultMappings"
  *     hotkey="k"
@@ -3654,14 +3715,15 @@ export interface SearchcraftResultsInfoProps extends Components.SearchcraftResul
  * @example
  * ```vue
  * <script setup>
- *   import SearchcraftResultsInfo from '@searchcraft/vue-sdk';
+ * import { SearchcraftResultsInfo } from '@searchcraft/vue-sdk';
  *
- *   const customFormatter =  (range, count, responseTime) =>
- *     `${range[0]}-${range[1]} of ${count} results in ${responseTime}ms`;
+ * const template = ({ range, count, responseTime }, { html }) => html`
+ *   ${range[0]}-${range[1]} of ${count} results in ${responseTime}ms
+ * `;
  * </script>
  *
  * <template>
- *   <SearchcraftResultsInfo :customFormatter="customFormatter" />
+ *   <SearchcraftResultsInfo :template="template" />
  * </template>
  * ```
  */
@@ -3677,7 +3739,7 @@ export interface SearchcraftResultsSummaryProps extends Components.SearchcraftRe
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftResultsSummary from '@searchcraft/vue-sdk';
+ * import { SearchcraftResultsSummary } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
@@ -3698,7 +3760,7 @@ export interface SearchcraftThemeProps extends Components.SearchcraftTheme {
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftTheme from '@searchcraft/vue-sdk';
+ * import { SearchcraftTheme } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
@@ -3719,7 +3781,7 @@ export interface SearchcraftPaginationProps extends Components.SearchcraftPagina
  * @example
  * ```vue
  * <script setup>
- *   import SearchcraftPagination from '@searchcraft/vue-sdk';
+ *   import { SearchcraftPagination } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
@@ -3739,7 +3801,7 @@ export interface SearchcraftSearchResultsPerPageProps extends Components.Searchc
  * @example
  * ```vue
  * <script setup>
- *   import SearchcraftSearchResultsPerPage from '@searchcraft/vue-sdk';
+ *   import { SearchcraftSearchResultsPerPage } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>
@@ -3759,7 +3821,7 @@ export interface SearchcraftSummaryBoxProps extends Components.SearchcraftSummar
  * @example
  * ```vue
  * <script setup>
- * import SearchcraftSummaryBox from '@searchcraft/vue-sdk';
+ * import { SearchcraftSummaryBox } from '@searchcraft/vue-sdk';
  * </script>
  *
  * <template>