import { GraphQLClient, Contact, Customer } from '@propeller-commerce/propeller-sdk-v2';
export interface SearchBarResult {
/** Unique identifier */
id: number | string;
/** Display name */
name: string;
/** SKU code */
sku?: string;
/**
* Leading price value (kept for back-compat). Populated with the net or gross
* amount per the active toggle — see `priceNet`/`priceGross` for both values.
*/
price?: number;
/** Tax-inclusive price (SDK `price.net`). */
priceNet?: number;
/** Tax-exclusive price (SDK `price.gross`). */
priceGross?: number;
/** Image URL */
imageUrl?: string;
/** URL path to navigate to */
url?: string;
/** Whether this is a cluster (vs product) */
isCluster?: boolean;
}
export interface SearchBarProps {
/** Propeller SDK GraphQL client. Resolved from PropellerProvider when omitted. */
graphqlClient?: GraphQLClient;
/** Currency symbol to display. Defaults to '€'. */
currency?: string;
/** The currently logged in user (Contact or Customer) */
user?: Contact | Customer | null;
/** Language code for search requests */
language?: string;
/** Placeholder text for the search input */
placeholder?: string;
/** Minimum characters before search triggers */
minSearchLength?: number;
/** Debounce delay in milliseconds */
debounceMs?: number;
/** Maximum number of results to show in dropdown */
maxResults?: number;
/** Fallback image URL when product has no image */
noImageUrl?: string;
/** Fires when the search form is submitted (Enter key). Receives the search term. */
onSubmit?: (term: string) => void;
/** Fires when a result item is clicked. Receives the result object. */
onResultClick?: (result: SearchBarResult) => void;
/** Fires when "View all results" is clicked. Receives the search term. */
onViewAllClick?: (term: string) => void;
/**
* Build the destination URL for a result item. When provided, each result
* renders as a real `` (middle-clickable, new-tab, crawlable) while
* `onResultClick` still fires for SPA navigation. Omit to keep the
* div-based fallback.
*/
getResultHref?: (result: SearchBarResult) => string;
/**
* Build the destination URL for the "View all results" CTA. When provided,
* the CTA renders as a real `` (middle-clickable, new-tab, crawlable,
* keyboard-focusable) while `onViewAllClick` still fires for SPA navigation.
* Omit to keep the button fallback.
*/
getViewAllHref?: (term: string) => string;
/**
* Show the price column on each autosuggest result. Defaults to `true`.
* Set `false` to hide prices entirely in the dropdown — e.g. a B2B
* contract-catalogue context where prices are quote-only and shouldn't
* appear in the live preview. Ignored when the `price` slot is provided.
*
* For custom per-result price content (e.g. a "Price by quotation" label),
* use the scoped `#price` slot instead — it receives `{ result }` and fully
* overrides the default price cell.
*/
showPrice?: boolean;
/** Custom price formatting function */
formatPrice?: (price: number) => string;
/** Labels for the component */
labels?: Record;
/**
* When true, the tax-inclusive (net) price leads; false shows tax-exclusive
* (gross). SDK mapping: `price.net` = incl. VAT, `price.gross` = excl. VAT.
* Resolved from `` when omitted; defaults to `false`.
*/
includeTax?: boolean;
/**
* Labels for the incl./excl. price suffix. Keys: `inclTax`, `exclTax`.
* Falls back to English 'incl. VAT' / 'excl. VAT'.
*/
priceLabels?: Record;
/** Additional class name for the container */
containerClassName?: string;
/** Tax zone used for price calculation. Defaults to 'NL'. */
taxZone?: string;
/**
* Active company ID from the company switcher.
* When provided, can be forwarded to price calculation in search results
* if the underlying SDK call supports priceCalculateProductInput.
*/
companyId?: number;
/** Scope the autosuggest fetch to specific orderlist IDs (e.g. a chosen B2B contract). */
orderlistIds?: number[];
/**
* Apply the orderlist filter. Defaults to `true` when `orderlistIds` is
* non-empty, `false` otherwise — so an authenticated user without a contract
* still sees the full catalogue.
*/
applyOrderlists?: boolean;
/** Attribute names to request per product, e.g. `['MPN']`. See ProductGrid. */
productTrackAttributes?: string[];
/**
* Configuration object providing:
* imageSearchFiltersGrid, imageVariantFiltersMedium — passed to CategoryService
* baseCategoryId — used when querying by term or brand
* urls.getProductUrl / urls.getClusterUrl — for card URL generation
*/
configuration?: any;
/**
* Bump this counter to clear the search input from outside (e.g. on route
* change). Each unique value triggers a one-time reset of the local term.
*/
clearSignal?: number;
}
declare function __VLS_template(): {
attrs: Partial<{}>;
slots: {
price?(_: {
result: {
id: number | string;
name: string;
sku?: string | undefined;
price?: number | undefined;
priceNet?: number | undefined;
priceGross?: number | undefined;
imageUrl?: string | undefined;
url?: string | undefined;
isCluster?: boolean | undefined;
};
}): any;
};
refs: {};
rootEl: HTMLDivElement;
};
type __VLS_TemplateResult = ReturnType;
declare const __VLS_component: import('vue').DefineComponent & Readonly<{}>, {
applyOrderlists: boolean;
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
declare const _default: __VLS_WithTemplateSlots;
export default _default;
type __VLS_WithTemplateSlots = T & {
new (): {
$slots: S;
};
};