@searchcraft/vue-sdk 0.13.2 → 0.14.0

package/README.md

@@ -147,8 +147,9 @@ export const filterPanelItems = [
     field: 'section',
     label: 'Filter by Section',
     options: {
-      subLabel: 'Filter by content section',
-      maxItems: 10,
+      showSublevel: false,
+      initialCollapseState: 'open', // 'open' or 'closed' - controls if section starts expanded or collapsed
+      viewMoreThreshold: 8, // Number of facets to show before "view more" link appears (0 = show all)
     },
   },
 ];

package/dist/index.d.ts

@@ -184,6 +184,19 @@ export interface FacetsFilterItem extends FilterItem {
 	options: {
 		showSublevel: boolean;
 		exclude?: string[];
+		/**
+		 * Initial collapse state of the facet section.
+		 * - 'open': Section is expanded by default
+		 * - 'closed': Section is collapsed by default
+		 * @default 'open'
+		 */
+		initialCollapseState?: "open" | "closed";
+		/**
+		 * The number of facets to show before displaying a "view more" link.
+		 * Set to 0 to show all facets without a "view more" link.
+		 * @default 8
+		 */
+		viewMoreThreshold?: number;
 	};
 }
 export interface NumericFilterItem extends FilterItem {
@@ -837,7 +850,19 @@ export namespace Components {
 	 * It is consumed within the `searchcraft-filter-panel`.
 	 * @js-example ```html
 	 * <!-- index.html -->
+	 * <!-- Basic usage -->
 	 * <searchcraft-facet-list field-name="title" />
+	 * <!-- With collapsible section (initially closed) and view more threshold -->
+	 * <searchcraft-facet-list
+	 *   field-name="category"
+	 *   initial-collapse-state="closed"
+	 *   view-more-threshold="5"
+	 * />
+	 * <!-- Show all facets without "view more" link -->
+	 * <searchcraft-facet-list
+	 *   field-name="brand"
+	 *   view-more-threshold="0"
+	 * />
 	 * ```
 	 * ```js
 	 * // index.js
@@ -845,6 +870,8 @@ export namespace Components {
 	 * facetList.addEventListener('facetSelectionUpdated', () => {
 	 *   console.log('Facet selection updated');
 	 * });
+	 * // Programmatically toggle collapse state
+	 * await facetList.handleCollapseToggle();
 	 * ```
 	 */
 	interface SearchcraftFacetList {
@@ -857,10 +884,30 @@ export namespace Components {
 		  * @default ''
 		 */
 		"fieldName": string;
+		/**
+		  * Returns whether the facet section is currently collapsed.
+		  * @returns A promise that resolves to true if collapsed, false if expanded.
+		 */
+		"getIsCollapsed": () => Promise<boolean>;
+		/**
+		  * Toggles the collapsed state of the facet section.
+		  * @returns A promise that resolves when the toggle is complete.
+		 */
+		"handleCollapseToggle": () => Promise<void>;
+		/**
+		  * Initial collapse state of the facet section.
+		  * @default 'open'
+		 */
+		"initialCollapseState"?: "open" | "closed";
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
+		  * @default 8
+		 */
+		"viewMoreThreshold"?: number;
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
@@ -1007,10 +1054,25 @@ export namespace Components {
 	 * ```
 	 */
 	interface SearchcraftPagination {
+		/**
+		  * The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
+		  * @default "p"
+		 */
+		"pageQueryParam": string;
+		/**
+		  * Whether to scroll to the top of the search results when pagination buttons are clicked.
+		  * @default true
+		 */
+		"scrollToTop"?: boolean;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
+		  * @default true
+		 */
+		"usePageQueryParam": boolean;
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
@@ -1070,10 +1132,23 @@ export namespace Components {
 	 * Renders the footer for the searchcraft-popover-form.
 	 */
 	interface SearchcraftPopoverFooter {
+		/**
+		  * The SDK variant used to render this component. Used for UTM attribution. This isn't exposed for developer consumption, it's set automatically.
+		  * @default 'js'
+		 */
+		"sdkVariant"?: "js" | "react" | "vue";
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Optional href for the "View all" button.
+		 */
+		"viewAllResultsHref"?: string;
+		/**
+		  * Optional label for the "View all" button.
+		 */
+		"viewAllResultsLabel"?: string;
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
@@ -1123,15 +1198,33 @@ export namespace Components {
 		  * Formats the content rendered for each result.
 		 */
 		"popoverResultMappings"?: PopoverResultMappings;
+		/**
+		  * The SDK variant used to render this component. Used for UTM attribution on the footer link.
+		  * @default 'js'
+		 */
+		"sdkVariant"?: "js" | "react" | "vue";
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
+		  * @default false
+		 */
+		"showSummaryBox"?: boolean;
 		/**
 		  * 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'
 		 */
 		"type"?: "inline" | "fullscreen" | "modal";
+		/**
+		  * Base URL for the "View all" footer link. The current search term will be appended (URL encoded).  For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=<search-term>`.
+		 */
+		"viewAllResultsBaseUrl"?: string;
+		/**
+		  * Optional label for the "View All" footer button. Defaults to "View All".
+		 */
+		"viewAllResultsLabel"?: string;
 	}
 	/**
 	 * A single list item rendered in a searchcraft-popover-list-view.
@@ -1542,7 +1635,19 @@ declare global {
 	 * It is consumed within the `searchcraft-filter-panel`.
 	 * @js-example ```html
 	 * <!-- index.html -->
+	 * <!-- Basic usage -->
 	 * <searchcraft-facet-list field-name="title" />
+	 * <!-- With collapsible section (initially closed) and view more threshold -->
+	 * <searchcraft-facet-list
+	 *   field-name="category"
+	 *   initial-collapse-state="closed"
+	 *   view-more-threshold="5"
+	 * />
+	 * <!-- Show all facets without "view more" link -->
+	 * <searchcraft-facet-list
+	 *   field-name="brand"
+	 *   view-more-threshold="0"
+	 * />
 	 * ```
 	 * ```js
 	 * // index.js
@@ -1550,6 +1655,8 @@ declare global {
 	 * facetList.addEventListener('facetSelectionUpdated', () => {
 	 *   console.log('Facet selection updated');
 	 * });
+	 * // Programmatically toggle collapse state
+	 * await facetList.handleCollapseToggle();
 	 * ```
 	 */
 	interface HTMLSearchcraftFacetListElement extends Components.SearchcraftFacetList, HTMLStencilElement {
@@ -2133,7 +2240,19 @@ declare namespace LocalJSX {
 	 * It is consumed within the `searchcraft-filter-panel`.
 	 * @js-example ```html
 	 * <!-- index.html -->
+	 * <!-- Basic usage -->
 	 * <searchcraft-facet-list field-name="title" />
+	 * <!-- With collapsible section (initially closed) and view more threshold -->
+	 * <searchcraft-facet-list
+	 *   field-name="category"
+	 *   initial-collapse-state="closed"
+	 *   view-more-threshold="5"
+	 * />
+	 * <!-- Show all facets without "view more" link -->
+	 * <searchcraft-facet-list
+	 *   field-name="brand"
+	 *   view-more-threshold="0"
+	 * />
 	 * ```
 	 * ```js
 	 * // index.js
@@ -2141,6 +2260,8 @@ declare namespace LocalJSX {
 	 * facetList.addEventListener('facetSelectionUpdated', () => {
 	 *   console.log('Facet selection updated');
 	 * });
+	 * // Programmatically toggle collapse state
+	 * await facetList.handleCollapseToggle();
 	 * ```
 	 */
 	interface SearchcraftFacetList {
@@ -2153,6 +2274,11 @@ declare namespace LocalJSX {
 		  * @default ''
 		 */
 		"fieldName"?: string;
+		/**
+		  * Initial collapse state of the facet section.
+		  * @default 'open'
+		 */
+		"initialCollapseState"?: "open" | "closed";
 		/**
 		  * Emitted when the facets are updated.
 		 */
@@ -2163,6 +2289,11 @@ declare namespace LocalJSX {
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * The number of facets to show before displaying a "view more" link. Set to 0 to show all facets without a "view more" link.
+		  * @default 8
+		 */
+		"viewMoreThreshold"?: number;
 	}
 	/**
 	 * This web component represents a series of filters that allows users to refine and control their search queries by applying various filter criteria.
@@ -2321,10 +2452,25 @@ declare namespace LocalJSX {
 	 * ```
 	 */
 	interface SearchcraftPagination {
+		/**
+		  * The URL query string parameter name used to track the current page. When a user navigates to a URL that contains this parameter, the pagination component will automatically navigate to that page.
+		  * @default "p"
+		 */
+		"pageQueryParam"?: string;
+		/**
+		  * Whether to scroll to the top of the search results when pagination buttons are clicked.
+		  * @default true
+		 */
+		"scrollToTop"?: boolean;
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Whether to use a query string parameter to track and restore the current page. Set to `false` to disable query string synchronisation entirely.
+		  * @default true
+		 */
+		"usePageQueryParam"?: boolean;
 	}
 	/**
 	 * Renders a button which, when clicked, turns on popover visibility.
@@ -2384,10 +2530,23 @@ declare namespace LocalJSX {
 	 * Renders the footer for the searchcraft-popover-form.
 	 */
 	interface SearchcraftPopoverFooter {
+		/**
+		  * The SDK variant used to render this component. Used for UTM attribution. This isn't exposed for developer consumption, it's set automatically.
+		  * @default 'js'
+		 */
+		"sdkVariant"?: "js" | "react" | "vue";
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Optional href for the "View all" button.
+		 */
+		"viewAllResultsHref"?: string;
+		/**
+		  * Optional label for the "View all" button.
+		 */
+		"viewAllResultsLabel"?: string;
 	}
 	/**
 	 * This web component is designed to display search results in a popover container that dynamically appears when the user interacts with a search input field, or when a popover-button is pressed.
@@ -2437,15 +2596,33 @@ declare namespace LocalJSX {
 		  * Formats the content rendered for each result.
 		 */
 		"popoverResultMappings"?: PopoverResultMappings;
+		/**
+		  * The SDK variant used to render this component. Used for UTM attribution on the footer link.
+		  * @default 'js'
+		 */
+		"sdkVariant"?: "js" | "react" | "vue";
 		/**
 		  * The id of the Searchcraft instance that this component should use.
 		 */
 		"searchcraftId"?: string;
+		/**
+		  * Whether to display the AI generative summary box before the search results. NOTE: This requires the usage of a read key that has "SUMMARY" permissions and either a subscription to Searchcraft Cloud with AI features enabled or a self-hosted model connected.
+		  * @default false
+		 */
+		"showSummaryBox"?: boolean;
 		/**
 		  * 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'
 		 */
 		"type"?: "inline" | "fullscreen" | "modal";
+		/**
+		  * Base URL for the "View all" footer link. The current search term will be appended (URL encoded).  For example, in a CMS-backed site you might set this to `/?s=` so the final URL becomes `/?s=<search-term>`.
+		 */
+		"viewAllResultsBaseUrl"?: string;
+		/**
+		  * Optional label for the "View All" footer button. Defaults to "View All".
+		 */
+		"viewAllResultsLabel"?: string;
 	}
 	/**
 	 * A single list item rendered in a searchcraft-popover-list-view.
@@ -2840,7 +3017,19 @@ declare module "@stencil/core" {
 			 * It is consumed within the `searchcraft-filter-panel`.
 			 * @js-example ```html
 			 * <!-- index.html -->
+			 * <!-- Basic usage -->
 			 * <searchcraft-facet-list field-name="title" />
+			 * <!-- With collapsible section (initially closed) and view more threshold -->
+			 * <searchcraft-facet-list
+			 *   field-name="category"
+			 *   initial-collapse-state="closed"
+			 *   view-more-threshold="5"
+			 * />
+			 * <!-- Show all facets without "view more" link -->
+			 * <searchcraft-facet-list
+			 *   field-name="brand"
+			 *   view-more-threshold="0"
+			 * />
 			 * ```
 			 * ```js
 			 * // index.js
@@ -2848,6 +3037,8 @@ declare module "@stencil/core" {
 			 * facetList.addEventListener('facetSelectionUpdated', () => {
 			 *   console.log('Facet selection updated');
 			 * });
+			 * // Programmatically toggle collapse state
+			 * await facetList.handleCollapseToggle();
 			 * ```
 			 */
 			"searchcraft-facet-list": LocalJSX.SearchcraftFacetList & JSXBase.HTMLAttributes<HTMLSearchcraftFacetListElement>;
@@ -3323,7 +3514,9 @@ export interface SearchcraftPopoverFormProps extends Components.SearchcraftPopov
  * </template>
  * ```
  */
-export declare const SearchcraftPopoverForm: import("vue").DefineSetupFnComponent<LocalJSX.SearchcraftPopoverForm & import("@stencil/vue-output-target/runtime").InputProps<string | number | boolean>, {}, {}, LocalJSX.SearchcraftPopoverForm & import("@stencil/vue-output-target/runtime").InputProps<string | number | boolean>, import("vue").PublicProps>;
+export declare const SearchcraftPopoverForm: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+	[key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 /**
  * The Props for the SearchcraftResultsInfo component.
  */