@askdialog/dialog-vue 3.9.0 → 3.10.0

package/README.md

@@ -117,7 +117,7 @@ import '@askdialog/dialog-vue/style.css';
 
 const client = new Dialog({ apiKey: 'your-api-key', locale: 'en-US', currency: 'USD' });
 
-const { controller, state, theme } = useDialogSearch({ client, language: 'en', currency: client.currency });
+const { controller, state, theme } = useDialogSearch({ client, language: 'en', country: 'US' });
 </script>
 
 <template>
@@ -133,14 +133,14 @@ Creates one search controller per composable instance and disposes it on unmount
 **Options:**
 - `client` (Dialog) - Dialog SDK client instance (required)
 - `language` (string, required) - Lowercase ISO 639-1 language code, e.g. `fr`
-- `currency` (string, required) - ISO 4217 currency, e.g. `EUR`
+- `country` (string, required) - Shopper's ISO 3166-1 alpha-2 country, e.g. `BE`; prices follow its market
 - `surface` (SearchSurface, optional) - Where results are displayed, for analytics (default: `'search_page'`)
-- `navigate` ((url, hit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
+- `navigate` ((url, hit: SearchProductHit) => void, optional) - Router adapter called after selection attribution (e.g. `(url) => router.push(url)`). Omit it to let the cards' plain `<a href>` links navigate natively.
 - `debounceMs` (number, optional) - Keystroke debounce (default: 250)
 - `hitsPerPage` (number, optional) - Results per page (default: 12)
 - `sections` (SearchSection[], optional) - Extra indices searched alongside the products; `collections` fills the collections column of `DialogSearchResults`. Only request an index the catalog exposes: a missing one fails the whole search.
 
-Search language and currency are explicit and independent of `client.locale`, which can be a regional locale such as `fr-FR`.
+Search language and country are explicit and independent of `client.locale`, which can be a regional locale such as `fr-FR`.
 
 Options are read once during setup — later changes don't rebind the live controller.
 
@@ -152,7 +152,7 @@ With the collections column, for a catalog that exposes a collections index:
 const { controller, state, theme } = useDialogSearch({
   client,
   language: 'en',
-  currency: client.currency,
+  country: 'US',
   sections: [{ index: 'collections', hitsPerPage: 5 }],
 });
 ```
@@ -169,7 +169,7 @@ Search input: typing runs a debounced search, submitting (Enter) searches immedi
 
 #### DialogSearchResults
 
-Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, centered on the bar (up to 1440px wide, filling the viewport) and anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. It shows the same layout as the Shopify search overlay: a collections column on the left when `sections` requests them, the products on the right as a list or a 3-column grid, the query match emphasized in every title, and either a "See all results" button or the pagination controls. Below 768px the panel stacks, collections in a horizontal rail above the products. Colors, radii and font follow the SDK theme (dark palette when `backgroundColor` is dark, straight or rounded corners from `ctaBorderType`). Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
+Floating results panel overlaying the page content: portaled to `document.body` in `position: fixed`, centered on the bar (up to 1440px wide, filling the viewport) and anchored under the spot where the component is rendered (place it right after the bar), so no ancestor stacking context or `overflow: hidden` can hide it. It shows the same layout as the Shopify search overlay: a collections column on the left when `sections` requests them, the products on the right as a list or a 3-column grid, the query match emphasized in every title, and either a "See all results" button or the pagination controls. Below 768px the panel stacks, collections in a horizontal rail above the products. Colors, radii and font follow the SDK theme (dark palette when `backgroundColor` is dark, straight or rounded corners from `ctaBorderType`). Each product card reads the hit, Algolia's Shopify record: its `product_image` (the variant's `image` when absent), its `title`, its lowest variant price (`variants_min_price`, formatted with `currency`, the base currency of the shopper's market) and its `url`; a hit without a price shows none. Each card links to the product page and records search attribution (viewport impressions, select on click and middle-click) automatically. Clicking outside the panel (and outside the bar) closes it; typing again or re-focusing the bar reopens it with the results kept.
 
 **Props:**
 - `controller` (SearchController) - From `useDialogSearch` (required)

package/dist/components/DialogSearch/DialogSearchProductCard.vue.d.ts

@@ -1,7 +1,7 @@
-import { SearchController, SearchHit } from '@askdialog/dialog-sdk';
+import { SearchController, SearchProductHit } from '@askdialog/dialog-sdk';
 interface Props {
     controller: SearchController;
-    hit: SearchHit;
+    hit: SearchProductHit;
     index: number;
     locale?: string;
     /** Committed query, emphasized inside the title. */

package/dist/components/DialogSearch/DialogSearchProducts.vue.d.ts

@@ -1,8 +1,8 @@
-import { SearchController, SearchResult } from '@askdialog/dialog-sdk';
+import { SearchController, SearchProductHit, SearchResult } from '@askdialog/dialog-sdk';
 import { SearchMessages } from './searchMessages';
 type __VLS_Props = {
     controller: SearchController;
-    response: SearchResult;
+    response: SearchResult<SearchProductHit>;
     locale: string | undefined;
     messages: SearchMessages;
 };

package/dist/components/DialogSearch/searchDisplay.d.ts

@@ -1,6 +1,11 @@
-import { SearchHit, SearchPriceRange } from '@askdialog/dialog-sdk';
-/** The lowest price only, as on the Shopify storefront search. */
-export declare const formatSearchPrice: (priceRange: SearchPriceRange | undefined, locale?: string) => string;
+import { SearchHit, SearchProductHit } from '@askdialog/dialog-sdk';
+/**
+ * The lowest variant price only, as on the Shopify storefront search.
+ * Hide a missing or invalid price; show a bare amount when currency is absent.
+ */
+export declare const formatSearchPrice: ({ variants_min_price: amount, currency }: SearchProductHit, locale?: string) => string;
+/** The product's image, as Algolia's cards in distinct mode; else the variant's. */
+export declare const hitImage: (hit: SearchProductHit) => string | undefined;
 export declare const safeHref: (url: string) => string | undefined;
 export declare const hitHref: (hit: SearchHit) => string | undefined;
 export declare const hitTitle: (hit: SearchHit) => string;

package/dist/components/DialogSearch/useDialogSearch.d.ts

@@ -1,15 +1,15 @@
-import { Dialog, SearchController, SearchControllerState, SearchHit, SearchSection, SearchSurface, Theme } from '@askdialog/dialog-sdk';
+import { Dialog, SearchController, SearchControllerState, SearchProductHit, SearchSection, SearchSurface, Theme } from '@askdialog/dialog-sdk';
 import { ShallowRef } from 'vue';
 export interface UseDialogSearchOptions {
     client: Dialog;
     /** Lowercase ISO 639-1 language code, e.g. `fr`. */
     language: string;
-    /** ISO 4217 currency, independent of language. */
-    currency: string;
+    /** Shopper's ISO 3166-1 alpha-2 country, e.g. `BE`; prices follow its market. */
+    country: string;
     /** UI surface used in search analytics. */
     surface?: SearchSurface;
     /** Navigate after recording selection; omit to use native links. */
-    navigate?: (url: string, hit: SearchHit) => void;
+    navigate?: (url: string, hit: SearchProductHit) => void;
     debounceMs?: number;
     hitsPerPage?: number;
     /**