@getlupa/client 0.6.0 → 0.7.0-alpha-1

package/dist/cjs/store/modules/options.d.ts

@@ -13,6 +13,7 @@ export default class OptionsModule extends VuexModule {
     get boxRoutingBehavior(): RoutingBehavior;
     get searchResultsRoutingBehavior(): RoutingBehavior;
     get defaultSearchResultPageSize(): number;
+    get currentResolutionPageSizes(): number[];
     setSearchBoxOptions({ options }: {
         options: SearchBoxOptions;
     }): void;

package/dist/cjs/store/modules/searchResult.d.ts

@@ -1,3 +1,4 @@
+import { ScreenSize } from "@/types/General";
 import { LabeledFilter } from "@/types/search-results/Filters";
 import { ResultsLayout } from "@/types/search-results/ResultsLayout";
 import { ProductGrid } from "@/types/search-results/SearchResultsOptions";
@@ -10,6 +11,7 @@ export default class SearchResultModule extends VuexModule {
     layout: ResultsLayout;
     loading: boolean;
     isMobileSidebarVisible: boolean;
+    screenWidth: number;
     get facets(): FacetResult[] | undefined;
     get currentFilters(): FilterGroup | undefined;
     get filters(): FilterGroup;
@@ -19,8 +21,17 @@ export default class SearchResultModule extends VuexModule {
     get labeledFilters(): LabeledFilter[];
     get displayFilters(): LabeledFilter[];
     get currentFilterCount(): number;
+    get currentFilterKeys(): string[];
     get hasAnyFilter(): boolean;
     get itemRange(): number[];
+    get isMobileWidth(): boolean;
+    get currentScreenWidth(): ScreenSize;
+    get isPageEmpty(): boolean;
+    setSidebarState({ visible }: {
+        visible: boolean;
+    }): {
+        visible: boolean;
+    };
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;
@@ -30,7 +41,14 @@ export default class SearchResultModule extends VuexModule {
         addToCartAmount?: number;
         layout?: ResultsLayout;
     }): void;
+    queryFacet({ queryKey, facetKey, }: {
+        queryKey: string;
+        facetKey: string;
+    }): Promise<void>;
     load(loading: boolean): void;
+    setScreenWidth({ width }: {
+        width: number;
+    }): void;
     add(searchResult: SearchQueryResult): {
         searchResult: SearchQueryResult;
         pageSize: number;

package/dist/cjs/types/DocumentElement.d.ts

@@ -13,7 +13,7 @@ export declare enum DocumentElementType {
 export declare type DocumentElementBase = {
     type: DocumentElementType;
     key?: string;
-    display?: (document: Record<string, unknown>) => boolean;
+    display?: <T>(document: T) => boolean;
     isHtml?: boolean;
 };
 export declare type ImageDocumentElement = DocumentElementBase & {
@@ -32,6 +32,7 @@ export declare type DescriptionDocumentElement = DocumentElementBase & {
     type: DocumentElementType.DESCRIPTION;
     maxLines: number;
     key: string;
+    className: string;
 };
 export declare type CustomDocumentElement = DocumentElementBase & {
     type: DocumentElementType.CUSTOM;

package/dist/cjs/types/General.d.ts

@@ -1,5 +1,5 @@
 import { AnalyticsOptions } from "./AnalyticsOptions";
-import { Environment as SdkEnvironment, SortDirection as SdkSortDirection } from "@getlupa/client-sdk/Types";
+import { Environment as SdkEnvironment } from "@getlupa/client-sdk/Types";
 export declare type SdkOptions = {
     environment: SdkEnvironment;
     customUrl?: string;
@@ -14,5 +14,6 @@ export declare type TrackingOptions = {
     userKey?: string;
     analytics?: AnalyticsOptions;
 };
-export declare type SortDirection = SdkSortDirection;
 export declare type Environment = SdkEnvironment;
+export declare type SortDirection = "asc" | "desc";
+export declare type ScreenSize = "xs" | "sm" | "md" | "l" | "xl";

package/dist/cjs/types/product-list/ProductListOptions.d.ts

@@ -2,7 +2,7 @@ import { FilterGroup } from "@getlupa/client-sdk/Types";
 import { RoutingBehavior } from "../search-results/RoutingBehavior";
 import { SearchResultsOptions } from "../search-results/SearchResultsOptions";
 export declare type CategoryFilterOptions = {
-    queryKey: string;
+    queryKey?: string;
     routingBehavior?: RoutingBehavior;
     keys: {
         titleKey?: string;
@@ -14,15 +14,15 @@ export declare type CategoryFilterOptions = {
         title: string;
     };
     parent?: {
-        url: string;
-        title: string;
+        url?: string;
+        title?: string;
     };
     current?: {
-        title: string;
-        description: string;
+        title?: string;
+        description?: string;
     };
 };
 export declare type ProductListOptions = SearchResultsOptions & {
     initialFilters?: FilterGroup;
-    categories: CategoryFilterOptions;
+    categories?: CategoryFilterOptions;
 };

package/dist/cjs/types/search-results/BadgeOptions.d.ts

@@ -4,13 +4,14 @@ export declare type SearchResultBadgeType = "text" | "image" | "customHtml";
 export declare type BadgeOptions = {
     anchor: AnchorPosition;
     elements: BadgeElement[];
-    product: Document;
+    product?: Document;
 };
 export declare type SearchResultBadgeElement = {
     type: SearchResultBadgeType;
     key: string;
-    isHtml: boolean;
-    product: Document;
+    isHtml?: boolean;
+    className?: boolean;
+    product?: Document;
     display?: (document: Record<string, unknown>) => boolean;
 };
 export declare type BaseBadgeElement = SearchResultBadgeElement & {
@@ -28,7 +29,7 @@ export declare type ImageBadgeElement = BaseBadgeElement & {
 };
 export declare type CustomHtmlBadgeElement = BaseBadgeElement & {
     type: "customHtml";
-    className: string;
+    className?: string;
     html: (doc: Document) => string;
 };
 export declare type BadgeElement = BaseBadgeElement | TextBadgeElement;

package/dist/cjs/types/search-results/PaginationOptions.d.ts

@@ -12,6 +12,7 @@ export declare type PaginationPageSelect = {
     count: number;
     selectedPage: number;
     display: number;
+    displayMobile: number;
 };
 export declare type PaginationDisplay = {
     pageSize: boolean;

package/dist/cjs/types/search-results/SearchResultsOptions.d.ts

@@ -7,8 +7,8 @@ export declare type SearchResultsOptions = SearchResultsProductOptions & SearchR
     containerSelector: string;
     breadcrumbs: SearchResultsBreadcrumb[];
     classMap?: Record<string, string>;
-    noResultsQueryFlag?: string;
     disallowEmptyQuery?: boolean;
+    callbacks?: SearchResultEventCallbacks;
 };
 export declare type SearchTitlePosition = "page-top" | "search-results-top";
 export declare type SearchResultsDidYouMeanLabels = {
@@ -18,6 +18,17 @@ export declare type SearchResultsDidYouMeanLabels = {
 export declare type SearchResultsSimilarQueriesLabels = {
     similarQuery: string;
     similarQueries: string;
+    aiSuggestions?: string;
+};
+export declare type CallbackContext = {
+    queryKey: string;
+    hasResults: boolean;
+};
+export declare type SearchResultEventCallbacks = {
+    onSearchResults?: (context: CallbackContext) => unknown;
+    onAdditionalPanelResults?: (context: CallbackContext) => unknown;
+    onCategoryFilterResults?: (context: CallbackContext) => unknown;
+    onMounted?: () => unknown;
 };
 export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels & SearchResultsDidYouMeanLabels & SearchResultsSimilarQueriesLabels & {
     sortBy: string;
@@ -28,6 +39,9 @@ export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels &
     emptyResults: string;
     mobileFilterButton: string;
     htmlTitleTemplate: string;
+    outOfStock?: string;
+    noItemsInPage?: string;
+    backToFirstPage?: string;
 };
 export declare type SearchResultsAdditionalPanels = {
     additionalPanels?: SearchResultsAdditionalPanelOptions[];
@@ -59,15 +73,25 @@ export declare type ProductGrid = {
 export declare type SearchResultsPaginationLabels = {
     pageSize: string;
     showMore: string;
+    showLess?: string;
 };
+export declare type ResponsiveSearchResultPageSizes = {
+    xs: number[];
+    sm: number[];
+    md: number[];
+    l: number[];
+    xl: number[];
+};
+export declare type SearchResultPageSizes = number[] | ResponsiveSearchResultPageSizes;
 export declare type SearchResultsPagination = {
     sizeSelection: {
-        sizes: number[];
+        sizes: SearchResultPageSizes;
         position: SearchResultsPaginationPosition;
     };
     pageSelection: {
         position: SearchResultsPaginationPosition;
         display: number;
+        displayMobile: number;
     };
 };
 export declare type SearchResultsPaginationPosition = {
@@ -89,6 +113,9 @@ export declare type ResultCurrentFilterOptions = {
     };
 };
 export declare type FacetStyle = "sidebar" | "top-dropdown";
+export declare type FacetFilterQuery = {
+    queryKey: string;
+};
 export declare type ResultFacetOptions = {
     labels: {
         title: string;
@@ -120,6 +147,8 @@ export declare type ResultFacetOptions = {
         type: FacetStyle;
     };
     exclude?: string[];
+    expand?: string[];
+    facetFilterQueries?: Record<string, FacetFilterQuery>;
 };
 export declare type SearchResultsFilterOptions = {
     currentFilters?: ResultCurrentFilterOptions;

package/dist/cjs/types/search-results/SearchResultsSort.d.ts

@@ -1,4 +1,4 @@
-import { SortDirection } from "@getlupa/client-sdk/Types";
+import { SortDirection } from "../General";
 export declare type SearchResultsSortOptions = {
     key: string;
     label: string;

package/dist/cjs/utils/scroll.utils.d.ts

@@ -1,2 +1,4 @@
 export declare const scrollToSearchResults: (timeout?: number) => void;
 export declare const scrollTo: (elementId: string) => void;
+export declare const disableBodyScroll: () => void;
+export declare const enableBodyScroll: () => void;

package/dist/es/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/es/components/product-list/CategoryFilter.vue.d.ts

@@ -1,10 +1,12 @@
 import Vue from "vue";
-import { Options } from "@getlupa/client-sdk/Types";
+import { Options, SdkError, SearchQueryResult } from "@getlupa/client-sdk/Types";
 import { CategoryFilterOptions } from "@/types/product-list/ProductListOptions";
+import { SearchResultsOptions } from "@/types/search-results/SearchResultsOptions";
 export default class CategoryFilter extends Vue {
     options: CategoryFilterOptions;
     categoryChildren: Record<string, string>[];
     envOptions: Options;
+    searchResultOptions: SearchResultsOptions;
     get hasBackButton(): boolean;
     get hasEventRouting(): boolean;
     get backTitle(): string | undefined;
@@ -13,6 +15,7 @@ export default class CategoryFilter extends Vue {
     get parentUrlLink(): string | undefined;
     get isActive(): boolean;
     mounted(): Promise<void>;
+    handleResult(result: SearchQueryResult | SdkError): void;
     getCategoryKey(item: Record<string, string>): string;
     handleNavigationParent(event?: Event): void;
     handleNavigationBack(event?: Event): void;

package/dist/es/components/search-results/SearchResults.vue.d.ts

@@ -25,10 +25,6 @@ export default class SearchResults extends Vue {
     setDefaultLimit: (defaultLimit: number) => {
         defaultLimit: number;
     };
-    handleNoResultsFlag: ({ resultCount, noResultsParam, }: {
-        resultCount: number;
-        noResultsParam?: string;
-    }) => void;
     addParams: (params: QueryParams) => {
         params: QueryParams;
     };
@@ -64,6 +60,9 @@ export default class SearchResults extends Vue {
         queryKey: string;
         results: SearchQueryResult;
     }): void;
+    setScreenWidth: ({ width, }: {
+        width: number;
+    }) => void;
     setColumnCount: ({ width, grid, }: {
         width: number;
         grid: ProductGrid;

package/dist/es/components/search-results/additional-panels/AdditionalPanel.vue.d.ts

@@ -3,11 +3,13 @@ import Vue from "vue";
 import { SdkOptions } from "@/types/General";
 import { SearchQueryResult } from "@getlupa/client-sdk/Types";
 import { Document } from "@getlupa/client-sdk/Types";
+import { SearchResultsOptions } from "@/types/search-results/SearchResultsOptions";
 export default class AdditionalPanels extends Vue {
     panel: SearchResultsAdditionalPanelOptions;
     options: SdkOptions;
     result: SearchQueryResult;
     query: string;
+    searchResultOptions: SearchResultsOptions;
     showAll: boolean;
     get displayShowMore(): boolean;
     get itemCount(): number;
@@ -16,6 +18,7 @@ export default class AdditionalPanels extends Vue {
     get hasResults(): boolean;
     mounted(): void;
     handleQueryChange(): void;
+    handleResults(res: SearchQueryResult): void;
     toggleShowMore(): void;
     addParams(label: string, itemCount: number): string;
 }

package/dist/es/components/search-results/filters/MobileFilterSidebar.vue.d.ts

@@ -2,7 +2,7 @@ import { SearchResultsFilterOptions } from "@/types/search-results/SearchResults
 import Vue from "vue";
 export default class MobileFilterSidebar extends Vue {
     options: SearchResultsFilterOptions;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     isMobileSidebarVisible: boolean;

package/dist/es/components/search-results/filters/facets/FacetDisplay.vue.d.ts

@@ -7,14 +7,23 @@ export default class FacetDisplay extends Vue {
     facet: FacetResult;
     currentFilters: FilterGroup;
     clearable: boolean;
+    currentFilterKeys: string[];
     isOpen: boolean;
     get facetType(): string;
     get hasItems(): boolean;
     get hasFilter(): boolean;
+    get filterQueryKey(): string | undefined;
+    get activeFilterKeys(): string;
     mounted(): void;
     beforeDestroy(): void;
     handleMouseClick(e: MouseEvent): void;
+    handleParamsChange(): void;
+    queryFacet: ({ queryKey, facetKey, }: {
+        queryKey: string;
+        facetKey: string;
+    }) => Promise<void>;
     toggleFacet(): void;
+    handleFacetQueryFilter(): void;
     handleFacetSelect(item: FacetAction): void;
     clear(): void;
 }

package/dist/es/components/search-results/products/SearchResultsMobileToggle.vue.d.ts

@@ -3,7 +3,7 @@ export default class SearchResultsMobileToggle extends Vue {
     label: string;
     showFilterCount: boolean;
     currentFilterCount: number;
-    setSidebarVisibility: ({ visible, }: {
+    setSidebarState: ({ visible, }: {
         visible: boolean;
     }) => void;
     handleMobileToggle(): void;

package/dist/es/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/es/components/search-results/products/SearchResultsToolbar.vue.d.ts

@@ -21,6 +21,7 @@ export default class SearchResultsToolbar extends Vue {
     get displayPageSelect(): boolean;
     get searchSummaryLabel(): string;
     get showMobileFilterCount(): boolean;
+    currentResolutionPageSizes: number[];
     removeAllFilters: () => {
         params: QueryParams;
     };

package/dist/es/components/search-results/products/pagination/SearchResultsPageSelect.vue.d.ts

@@ -5,6 +5,8 @@ export default class SearchResultsPageSelect extends Vue {
     lastPageLabel: string;
     firstPageLabel: string;
     options: PaginationPageSelect;
+    isMobileWidth: boolean;
+    get pageOptionsCount(): number;
     get pages(): number[];
     get showBack(): boolean;
     get lastPage(): number | undefined;
@@ -12,6 +14,7 @@ export default class SearchResultsPageSelect extends Vue {
     get showLastPageSeparator(): boolean;
     get showFirstPage(): boolean;
     get showFirstPageSeparator(): boolean;
+    get showPagination(): boolean;
     appendParams: ({ params, paramsToRemove, }: {
         params: {
             name: string;

package/dist/es/constants/development/searchResultsDev.example.const.d.ts

@@ -13,12 +13,15 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;
         didYouMean: string;
         similarQuery: string;
         similarQueries: string;
+        aiSuggestions: string;
     };
     toolbar: {
         totalCount: boolean;

package/dist/es/constants/global.const.d.ts

@@ -8,7 +8,8 @@ export declare const S_MIN_WIDTH = 575;
 export declare const MD_MIN_WIDTH = 767;
 export declare const L_MIN_WIDTH = 991;
 export declare const XL_MIN_WIDTH = 1199;
-export declare const MAX_FACET_VALUES = 1000;
+export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";

package/dist/es/constants/searchResults.const.d.ts

@@ -46,6 +46,7 @@ export declare const DEFAULT_OPTIONS_RESULTS: {
                 bottom: boolean;
             };
             display: number;
+            displayMobile: number;
         };
     };
     sort: never[];

package/dist/es/index.d.ts

@@ -1,12 +1,13 @@
 import { SearchBoxOptions } from "./types/search-box/SearchBoxOptions";
-import { FacetStyle, SearchResultsOptions } from "./types/search-results/SearchResultsOptions";
+import { CallbackContext, FacetFilterQuery, FacetStyle, SearchResultEventCallbacks, SearchResultsFilterOptions, SearchResultsOptions } from "./types/search-results/SearchResultsOptions";
 import { SdkOptions, TrackingOptions, Environment, SortDirection } from "./types/General";
-import { ProductListOptions } from "./types/product-list/ProductListOptions";
+import { CategoryFilterOptions, ProductListOptions } from "./types/product-list/ProductListOptions";
 import { AddToCartElement, CustomDocumentElement, CustomHtmlElement, DescriptionDocumentElement, DocumentElement, DocumentElementType, ImageDocumentElement, PriceElement, RatingElement, RegularPriceDocumentElement, TitleDocumentElement } from "./types/DocumentElement";
 import { SearchBoxPanelType } from "./types/search-box/SearchBoxPanel";
 import { RoutingBehavior } from "./types/search-results/RoutingBehavior";
 import { AnchorPosition } from "./types/search-results/SearchResultsProductCardOptions";
-import { BadgeType } from "./types/search-results/BadgeOptions";
+import { BadgeType, SearchResultBadgeElement, SearchResultBadgeType } from "./types/search-results/BadgeOptions";
+import { SearchResultsSortOptions, SortOptions } from "./types/search-results/SearchResultsSort";
 declare const lupaSearch: {
     searchBox: (options: SearchBoxOptions) => void;
     searchResults: (options: SearchResultsOptions) => void;
@@ -16,5 +17,5 @@ declare const lupaSearch: {
     clearSearchResults: () => void;
     clearProductList: () => void;
 };
-export { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, DocumentElementType, SearchBoxPanelType, FacetStyle, Environment, RoutingBehavior, AnchorPosition, BadgeType, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, };
+export { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, DocumentElementType, SearchBoxPanelType, FacetStyle, Environment, RoutingBehavior, AnchorPosition, BadgeType, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, CategoryFilterOptions, SearchResultsFilterOptions, SearchResultBadgeType, SearchResultBadgeElement, };
 export default lupaSearch;