@depict-ai/ui 1.4.2 → 1.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ES10/index.cjs +10286 -0
- package/{dist → ES10}/index.d.ts +505 -460
- package/ES10/index.js +10235 -0
- package/latest/index.cjs +9482 -0
- package/latest/index.d.ts +844 -0
- package/latest/index.js +9434 -0
- package/locales/ES10/index.cjs +867 -0
- package/locales/ES10/index.d.ts +89 -0
- package/locales/ES10/index.js +846 -0
- package/locales/index.cjs +1 -0
- package/locales/index.js +1 -1150
- package/locales/latest/index.cjs +867 -0
- package/locales/latest/index.d.ts +89 -0
- package/locales/latest/index.js +846 -0
- package/multi_import_deduplicator.cjs +31 -0
- package/multi_import_deduplicator.mjs +31 -0
- package/package.json +155 -41
- package/server/ES10/index.cjs +8462 -0
- package/server/ES10/index.d.ts +844 -0
- package/server/ES10/index.js +8411 -0
- package/server/latest/index.cjs +7715 -0
- package/server/latest/index.d.ts +844 -0
- package/server/latest/index.js +7667 -0
- package/dist/client/main.cjs +0 -9363
- package/dist/client/module.js +0 -9317
- package/dist/server/main.cjs +0 -8343
- package/dist/server/module.js +0 -8297
- package/locales/index.d.ts +0 -90
- package/locales/require.cjs +0 -1167
package/{dist → ES10}/index.d.ts
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { JSX, Signal, Accessor, Setter } from "solid-js";
|
|
2
|
-
import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared";
|
|
2
|
+
import { Elem, Display, ColsAtSize, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
|
|
3
3
|
import { SearchFilter, SearchRequest } from "@depict-ai/types/api/SearchRequest";
|
|
4
4
|
import { SearchFilter as _SearchFilter1, SearchResponse } from "@depict-ai/types/api/SearchResponse";
|
|
5
5
|
import { BaseCategoryDisplay, ProductListingResponse } from "@depict-ai/types/api/ProductListingResponse";
|
|
@@ -7,99 +7,99 @@ import { CategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/
|
|
|
7
7
|
import { BaseSearchRequest } from "@depict-ai/types/api/BaseSearchRequest";
|
|
8
8
|
import { SearchSuggestionsRequest } from "@depict-ai/types/api/SearchSuggestionsRequest";
|
|
9
9
|
import { ProductListingRequest } from "@depict-ai/types/api/ProductListingRequest";
|
|
10
|
-
export const version = "1.4.
|
|
10
|
+
export const version = "1.4.4";
|
|
11
11
|
export function ExpandingDetails(props: {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
12
|
+
details_: HTMLDetailsElement;
|
|
13
|
+
summary_: HTMLElement;
|
|
14
|
+
children: JSX.Element | (() => JSX.Element);
|
|
15
|
+
is_open_: Signal<boolean>;
|
|
16
|
+
duration_?: number;
|
|
17
|
+
delay_?: number;
|
|
18
|
+
dont_animate_if_instant_open_?: boolean;
|
|
19
19
|
}): HTMLDetailsElement;
|
|
20
|
-
export function accessor_of_object_to_object_with_accessor_values<O extends Record<string | symbol, any>>(obj: Accessor<O>): { [K in keyof O]: Accessor<O[K]
|
|
20
|
+
export function accessor_of_object_to_object_with_accessor_values<O extends Record<string | symbol, any>>(obj: Accessor<O>): { [K in keyof O]: Accessor<O[K]> };
|
|
21
21
|
/**
|
|
22
22
|
* Like standard_price_format except that the price and the formatting are reactive accessors
|
|
23
23
|
*/
|
|
24
24
|
export function SolidFormatPrice(props: {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
25
|
+
price_: number;
|
|
26
|
+
price_formatting_: {
|
|
27
|
+
pre_: string;
|
|
28
|
+
post_: string;
|
|
29
|
+
decimal_places_delimiter_: string;
|
|
30
|
+
thousands_delimiter_: string;
|
|
31
|
+
places_after_comma_: number | "auto";
|
|
32
|
+
};
|
|
33
33
|
}): JSX.Element;
|
|
34
34
|
/**
|
|
35
35
|
* PLP internationalisation shared between search and category listing
|
|
36
36
|
*/
|
|
37
37
|
type plp_shared_i18n = {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
38
|
+
scroll_to_top_: string;
|
|
39
|
+
back_: string;
|
|
40
|
+
open_sorting_: string;
|
|
41
|
+
close_sorting_: string;
|
|
42
|
+
open_filters_: string;
|
|
43
|
+
close_filters_: string;
|
|
44
|
+
close_: string;
|
|
45
|
+
ok_: string;
|
|
46
|
+
filters_cleared_: string;
|
|
47
|
+
we_cleared_your_filters_: string;
|
|
48
|
+
restore_: string;
|
|
49
|
+
sorting_text_: string;
|
|
50
|
+
filter_text_: string;
|
|
51
|
+
selected_filters_title_: string;
|
|
52
|
+
filters_: string;
|
|
53
|
+
view_less_: string;
|
|
54
|
+
view_more_: string;
|
|
55
|
+
clear_all_from_filter_crumbs_: string;
|
|
56
|
+
clear_individual_filter_: string;
|
|
57
|
+
of_: string;
|
|
58
|
+
clear_all_filters_from_big_button_: string;
|
|
59
|
+
try_without_filters_: string;
|
|
60
|
+
range_filter_low_point_aria_label_: string;
|
|
61
|
+
range_filter_high_point_aria_label_: string;
|
|
62
|
+
morphing_sign_expanded_aria_label_: string;
|
|
63
|
+
morphing_sign_collapsed_aria_label_: string;
|
|
64
|
+
price_formatting_: {
|
|
65
|
+
pre_: string;
|
|
66
|
+
post_: string;
|
|
67
|
+
decimal_places_delimiter_: string;
|
|
68
|
+
thousands_delimiter_: string;
|
|
69
|
+
places_after_comma_: number | "auto";
|
|
70
|
+
};
|
|
71
71
|
};
|
|
72
72
|
/**
|
|
73
73
|
* Search internationalisation
|
|
74
74
|
*/
|
|
75
75
|
interface search_i18n extends plp_shared_i18n {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
76
|
+
placeholder_text_: string;
|
|
77
|
+
show_n_results_: (number_of_results: HTMLElement) => Elem[];
|
|
78
|
+
no_results_text_: string;
|
|
79
|
+
search_recs_title_: string;
|
|
80
|
+
clear_filters_query_sorting_after_submit_: string;
|
|
81
|
+
modal_view_all_results_: (number_of_results: HTMLElement) => Elem[];
|
|
82
|
+
modal_discover_more_: string;
|
|
83
|
+
get_showing_results_for_: (query: HTMLElement, number_of_results: HTMLElement) => Elem[];
|
|
84
|
+
previous_searches_text_: string;
|
|
85
|
+
category_: string;
|
|
86
|
+
brand_: string;
|
|
87
|
+
suggestions_: string;
|
|
88
|
+
search_submit_button_aria_label_: string;
|
|
89
|
+
search_field_field_aria_label_: string;
|
|
90
|
+
previous_searches_delete_entry_from_history_: string;
|
|
91
91
|
}
|
|
92
92
|
/**
|
|
93
93
|
* Category internationalisation
|
|
94
94
|
*/
|
|
95
95
|
interface category_i18n extends plp_shared_i18n {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
96
|
+
show_n_products_: (number_of_results: HTMLElement) => Elem[];
|
|
97
|
+
no_products_text_: string;
|
|
98
|
+
product_: string;
|
|
99
|
+
products_: string;
|
|
100
|
+
breadcrumbs_aria_label_: string;
|
|
101
|
+
quicklinks_aria_label_: string;
|
|
102
|
+
breadcrumbs_separator_: string;
|
|
103
103
|
}
|
|
104
104
|
/**
|
|
105
105
|
* For anything that is not exposed and only used internally we can use solid signals to get more performant rendering.
|
|
@@ -108,33 +108,34 @@ interface category_i18n extends plp_shared_i18n {
|
|
|
108
108
|
* Any solid_ type below should not be exposed outside of this library, as the accessors can be confusing and unnecessary.
|
|
109
109
|
*/
|
|
110
110
|
/** For internal components using i18n that gets wrapped in solid's Accessors */
|
|
111
|
-
type solid_plp_shared_i18n = {
|
|
112
|
-
[K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]>;
|
|
113
|
-
};
|
|
111
|
+
type solid_plp_shared_i18n = { [K in keyof plp_shared_i18n]: Accessor<plp_shared_i18n[K]> };
|
|
114
112
|
/** @jsxImportSource solid-js */
|
|
115
113
|
export function GenericSliderArrowButton(props?: {
|
|
116
|
-
|
|
117
|
-
|
|
114
|
+
width_?: number;
|
|
115
|
+
height_?: number;
|
|
118
116
|
}): SVGElement;
|
|
119
|
-
export function show_toast({
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
117
|
+
export function show_toast({
|
|
118
|
+
children,
|
|
119
|
+
on_close_,
|
|
120
|
+
close_after_,
|
|
121
|
+
...more_attributes
|
|
122
|
+
}: {
|
|
123
|
+
children?: JSX.Element;
|
|
124
|
+
close_after_: number;
|
|
125
|
+
on_close_?: VoidFunction;
|
|
123
126
|
} & JSX.HTMLAttributes<HTMLDivElement>): {
|
|
124
|
-
|
|
127
|
+
close_toast_: VoidFunction;
|
|
125
128
|
};
|
|
126
129
|
export type SDKGridSpacing = string | {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
};
|
|
130
|
-
export type WithRequired<T, K extends keyof T> = T & {
|
|
131
|
-
[P in K]-?: T[P];
|
|
130
|
+
horizontal: string;
|
|
131
|
+
vertical: string;
|
|
132
132
|
};
|
|
133
|
+
export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
|
|
133
134
|
type FilterWithData = WithRequired<SearchFilter, "data">;
|
|
134
135
|
export interface SDKRenderingInfo {
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
136
|
+
set_on_index_change: (fn: (index: number) => void) => void;
|
|
137
|
+
merchant: string;
|
|
138
|
+
market: string;
|
|
138
139
|
}
|
|
139
140
|
export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
|
|
140
141
|
/**
|
|
@@ -142,34 +143,46 @@ export type ProductCardTemplate<T extends Display> = (display: T | null, info?:
|
|
|
142
143
|
* Backend defaults to category if not specified.
|
|
143
144
|
*/
|
|
144
145
|
export type ListingType = "collection" | "category";
|
|
146
|
+
type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
|
|
147
|
+
actual_field?: string;
|
|
148
|
+
})[] : never;
|
|
149
|
+
type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
|
|
145
150
|
export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
|
|
146
|
-
export function SelectedFilters({
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
151
|
+
export function SelectedFilters({
|
|
152
|
+
number_of_rendered_selected_filters_items_,
|
|
153
|
+
i18n_,
|
|
154
|
+
selected_filters_,
|
|
155
|
+
local_filter_cache_: [read_local_filter_cache],
|
|
156
|
+
get_search_filters_open_,
|
|
157
|
+
get_search_sorting_open_,
|
|
158
|
+
local_filter_cache_,
|
|
159
|
+
expanded_hierarchical_filters_
|
|
160
|
+
}: {
|
|
161
|
+
get_search_filters_open_: Accessor<boolean>;
|
|
162
|
+
get_search_sorting_open_: Accessor<boolean>;
|
|
163
|
+
expanded_hierarchical_filters_: Signal<{
|
|
164
|
+
value_: string[];
|
|
165
|
+
expanded_: boolean;
|
|
166
|
+
}[]>;
|
|
167
|
+
number_of_rendered_selected_filters_items_: Signal<number>;
|
|
168
|
+
i18n_: solid_plp_shared_i18n;
|
|
169
|
+
selected_filters_: Signal<FilterWithData[]>;
|
|
170
|
+
local_filter_cache_: Signal<SearchFilter[]>;
|
|
157
171
|
}): HTMLDivElement;
|
|
158
172
|
/**
|
|
159
173
|
* Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
|
|
160
174
|
*/
|
|
161
175
|
export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
|
|
162
|
-
declare class SDKError extends Error {
|
|
163
|
-
}
|
|
176
|
+
declare class SDKError extends Error {}
|
|
164
177
|
export class ProductCardError extends SDKError {
|
|
165
|
-
|
|
178
|
+
constructor(templateError: Error);
|
|
166
179
|
}
|
|
167
180
|
/**
|
|
168
181
|
* Base placeholder component used by ImagePlaceholder and TextPlaceholder
|
|
169
182
|
*/
|
|
170
183
|
export function BasePlaceholder(props: {
|
|
171
|
-
|
|
172
|
-
|
|
184
|
+
style: JSX.CSSProperties;
|
|
185
|
+
class?: string;
|
|
173
186
|
}): JSX.Element;
|
|
174
187
|
/**
|
|
175
188
|
* A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
|
|
@@ -180,55 +193,59 @@ export function BasePlaceholder(props: {
|
|
|
180
193
|
* @property style extra styles to add to the placeholder
|
|
181
194
|
*/
|
|
182
195
|
export function TextPlaceholder(props: {
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
196
|
+
style?: JSX.CSSProperties;
|
|
197
|
+
height: string;
|
|
198
|
+
width: string;
|
|
199
|
+
class?: string;
|
|
187
200
|
}): JSX.Element;
|
|
188
201
|
interface FilterBodyProps {
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
202
|
+
available_filters_: Accessor<_SearchFilter1[] | undefined>;
|
|
203
|
+
expanded_filters_: Signal<{
|
|
204
|
+
section_: string;
|
|
205
|
+
expanded_: boolean;
|
|
206
|
+
}[]>;
|
|
207
|
+
selected_filters_: Signal<{
|
|
208
|
+
field: string;
|
|
209
|
+
op: _SearchFilter1["op"];
|
|
210
|
+
data: any;
|
|
211
|
+
}[]>;
|
|
212
|
+
local_filter_cache_: Signal<_SearchFilter1[]>;
|
|
213
|
+
i18n_: solid_plp_shared_i18n;
|
|
214
|
+
expanded_hierarchical_filters_: Signal<{
|
|
215
|
+
value_: string[];
|
|
216
|
+
expanded_: boolean;
|
|
217
|
+
}[]>;
|
|
218
|
+
are_in_modal_?: boolean;
|
|
206
219
|
}
|
|
207
220
|
export function FilterBody(props: FilterBodyProps): JSX.Element;
|
|
208
|
-
export function create_modified_filters({
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
221
|
+
export function create_modified_filters({
|
|
222
|
+
available_filters_,
|
|
223
|
+
local_filter_cache_: [read_local_cache, write_local_cache],
|
|
224
|
+
selected_filters_: [read_selected_filters]
|
|
225
|
+
}: {
|
|
226
|
+
available_filters_: Accessor<_SearchFilter1[] | undefined>;
|
|
227
|
+
selected_filters_: Signal<{
|
|
228
|
+
field: string;
|
|
229
|
+
op: _SearchFilter1["op"];
|
|
230
|
+
data: any;
|
|
231
|
+
}[]>;
|
|
232
|
+
local_filter_cache_: Signal<_SearchFilter1[]>;
|
|
216
233
|
}): void;
|
|
217
234
|
export type SolidLayoutOptions = {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
235
|
+
cols_at_size: ColsAtSize;
|
|
236
|
+
grid_spacing: string;
|
|
237
|
+
rows: {
|
|
238
|
+
start_rows?: number;
|
|
239
|
+
rows_per_click?: number;
|
|
240
|
+
currently_visible?: Signal<number>;
|
|
241
|
+
max_rows?: number;
|
|
242
|
+
button?: JSX.Element;
|
|
243
|
+
} | "all";
|
|
244
|
+
layout: "slider" | "grid";
|
|
245
|
+
disable_partial_rows?: boolean;
|
|
246
|
+
override_vertical_spacing?: string;
|
|
247
|
+
children: JSX.Element;
|
|
248
|
+
element_attributes: JSX.HTMLAttributes<HTMLDivElement>;
|
|
232
249
|
};
|
|
233
250
|
/**
|
|
234
251
|
* Grid: Calculates CSS for a grid with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
|
|
@@ -241,24 +258,22 @@ export type SolidLayoutOptions = {
|
|
|
241
258
|
*/
|
|
242
259
|
export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
|
|
243
260
|
type PageURLCreatorAlwaysThereData = {
|
|
244
|
-
|
|
245
|
-
|
|
261
|
+
merchant: string;
|
|
262
|
+
market: string;
|
|
246
263
|
};
|
|
247
264
|
type PageURLCreatorCategoryData = {
|
|
248
|
-
|
|
249
|
-
|
|
265
|
+
type: "categories";
|
|
266
|
+
data: (BaseCategoryDisplay | CategorySuggestion)[];
|
|
250
267
|
};
|
|
251
268
|
type PageURLCreatorProductData<T extends ModernDisplay> = {
|
|
252
|
-
|
|
253
|
-
|
|
269
|
+
displays: T[];
|
|
270
|
+
type: "products";
|
|
254
271
|
};
|
|
255
272
|
type CanBePromiseWrapped<T> = T | Promise<T>;
|
|
256
|
-
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = {
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
};
|
|
261
|
-
type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = (PageURLCreatorAlwaysThereData & (PageURLCreatorCategoryData | PageURLCreatorProductData<InputDisplay>));
|
|
273
|
+
export type ModernDisplayWithPageUrl<T extends ModernDisplay> = { [K in keyof T]: K extends "variant_displays" ? (T[K][number] & {
|
|
274
|
+
page_url: string;
|
|
275
|
+
})[] : T[K] };
|
|
276
|
+
type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = PageURLCreatorAlwaysThereData & (PageURLCreatorCategoryData | PageURLCreatorProductData<InputDisplay>);
|
|
262
277
|
/**
|
|
263
278
|
* PageUrlCreator is, in its most basic form, a function that takes in a list of categories or products and returns a list of page_urls for the provided categories or products.
|
|
264
279
|
* It's main use case is to allow for the creation of links to the product or category pages on the merchant's site.
|
|
@@ -266,16 +281,16 @@ type PageURLCreatorOptions<InputDisplay extends ModernDisplay> = (PageURLCreator
|
|
|
266
281
|
* Also, it can be used to enrich the data for each product card in a batched way, which is why it can be an async function and return a whole display in the case of products.
|
|
267
282
|
*/
|
|
268
283
|
export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay extends ModernDisplay | never> = (options: PageURLCreatorOptions<InputDisplay>) => (typeof options)["type"] extends "categories" ? CanBePromiseWrapped<{
|
|
269
|
-
|
|
284
|
+
page_url: string;
|
|
270
285
|
}[]> : CanBePromiseWrapped<{
|
|
271
|
-
|
|
286
|
+
page_url: string;
|
|
272
287
|
}[]> | CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
|
|
273
288
|
export type SomethingTakingAPageURLCreator<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
274
|
-
|
|
289
|
+
page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
|
|
275
290
|
} : {
|
|
276
|
-
|
|
291
|
+
page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
|
|
277
292
|
} : {
|
|
278
|
-
|
|
293
|
+
page_url_creator?: never;
|
|
279
294
|
};
|
|
280
295
|
/**
|
|
281
296
|
* Basically allows you to use SearchModal
|
|
@@ -285,46 +300,46 @@ export type SomethingTakingAPageURLCreator<InputDisplay extends Display, OutputD
|
|
|
285
300
|
@returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
|
|
286
301
|
*/
|
|
287
302
|
export function general_modal_abstraction<StaticOptions extends {
|
|
288
|
-
|
|
303
|
+
[key: string]: any;
|
|
289
304
|
}, ExtraOptionsProvidedOnOpen extends {
|
|
290
|
-
|
|
305
|
+
[key: string]: any;
|
|
291
306
|
}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
307
|
+
close_modal_: VoidFunction;
|
|
308
|
+
open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
|
|
309
|
+
register_closing_animation_: (animation: () => Promise<any>) => void;
|
|
295
310
|
}) => Node_Array, modal_fn_opts: StaticOptions): Promise<{
|
|
296
|
-
|
|
297
|
-
|
|
311
|
+
open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
|
|
312
|
+
close_modal_: () => void;
|
|
298
313
|
}>;
|
|
299
314
|
export type OnNavigation = ((options: {
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
315
|
+
is_replace: boolean;
|
|
316
|
+
new_url: URL;
|
|
317
|
+
scroll: boolean;
|
|
303
318
|
}) => void) | "hard_navigation";
|
|
304
319
|
export type ExclusiveId = {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
320
|
+
categoryId: string;
|
|
321
|
+
productId?: undefined;
|
|
322
|
+
productIds?: undefined;
|
|
308
323
|
} | {
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
324
|
+
categoryId?: undefined;
|
|
325
|
+
productId: string;
|
|
326
|
+
productIds?: undefined;
|
|
312
327
|
} | {
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
328
|
+
categoryId?: undefined;
|
|
329
|
+
productId?: undefined;
|
|
330
|
+
productIds: string[];
|
|
316
331
|
} | {
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
332
|
+
categoryId?: undefined;
|
|
333
|
+
productId?: undefined;
|
|
334
|
+
productIds?: undefined;
|
|
320
335
|
};
|
|
321
336
|
type RecsAPIWrapperOptions = {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
337
|
+
type: string;
|
|
338
|
+
merchant: string;
|
|
339
|
+
market: string;
|
|
340
|
+
userId?: string;
|
|
341
|
+
sessionId?: string;
|
|
342
|
+
headers?: HeadersInit;
|
|
328
343
|
} & ExclusiveId;
|
|
329
344
|
/**
|
|
330
345
|
* Fetches recommendations from Depict's API.
|
|
@@ -362,95 +377,103 @@ type RecsAPIWrapperOptions = {
|
|
|
362
377
|
* ```
|
|
363
378
|
* @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
|
|
364
379
|
*/
|
|
365
|
-
export function fetchDepictRecommendations<T extends Display = Display>({
|
|
380
|
+
export function fetchDepictRecommendations<T extends Display = Display>({
|
|
381
|
+
merchant,
|
|
382
|
+
market,
|
|
383
|
+
headers,
|
|
384
|
+
...fetch_recs_options
|
|
385
|
+
}: RecsAPIWrapperOptions): Promise<T[]>;
|
|
366
386
|
export type InstantCard<T extends Display> = (display: T, context: {
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
387
|
+
index: number;
|
|
388
|
+
i18n: search_i18n;
|
|
389
|
+
merchant: string;
|
|
390
|
+
market: string;
|
|
371
391
|
}) => JSX.Element;
|
|
372
392
|
type CategorySuggestionAfterURLCreator = CategorySuggestion & {
|
|
373
|
-
|
|
393
|
+
page_url: string;
|
|
374
394
|
};
|
|
375
395
|
type ReplaceCategorySuggestion<T> = T extends CategorySuggestion ? CategorySuggestionAfterURLCreator : T extends CategorySuggestion[] ? CategorySuggestionAfterURLCreator[] : T;
|
|
376
|
-
type SearchSuggestionsResponseAfterURLCreator = {
|
|
377
|
-
[K in keyof SearchSuggestionsResponse]: ReplaceCategorySuggestion<SearchSuggestionsResponse[K]>;
|
|
378
|
-
};
|
|
396
|
+
type SearchSuggestionsResponseAfterURLCreator = { [K in keyof SearchSuggestionsResponse]: ReplaceCategorySuggestion<SearchSuggestionsResponse[K]> };
|
|
379
397
|
type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
|
|
380
|
-
|
|
398
|
+
page_url: string;
|
|
381
399
|
})[];
|
|
382
|
-
type SearchResponseAfterURLCreator = {
|
|
383
|
-
[K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : SearchResponse[K];
|
|
384
|
-
};
|
|
400
|
+
type SearchResponseAfterURLCreator = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
|
|
385
401
|
type BaseCategoryDisplayAfterURLCreator = BaseCategoryDisplay & {
|
|
386
|
-
|
|
402
|
+
page_url: string;
|
|
387
403
|
};
|
|
388
404
|
type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategoryDisplayAfterURLCreator : T extends BaseCategoryDisplay[] ? BaseCategoryDisplayAfterURLCreator[] : T;
|
|
389
405
|
type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
|
|
390
|
-
|
|
406
|
+
page_url: string;
|
|
391
407
|
})[];
|
|
392
|
-
type ProductListingResponseAfterURLCreator = {
|
|
393
|
-
[K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : ProductListingResponse[K];
|
|
394
|
-
};
|
|
408
|
+
type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponse]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponse[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponse[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponse[K]> : ProductListingResponse[K] };
|
|
395
409
|
type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
410
|
+
get_metadata?: () => Promise<{
|
|
411
|
+
[k: string]: string;
|
|
412
|
+
} | undefined>;
|
|
413
|
+
get_user_id?: () => string | undefined;
|
|
414
|
+
get_session_id?: () => string | undefined;
|
|
401
415
|
} & SomethingTakingAPageURLCreator<InputDisplay, OutputDisplay>;
|
|
402
416
|
/**
|
|
403
417
|
* Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
|
|
404
418
|
* It handles caching, retries and errors and is the only place that should be making requests to the Depict API.
|
|
405
419
|
*/
|
|
406
420
|
export class DepictAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
421
|
+
#private;
|
|
422
|
+
page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
|
|
423
|
+
constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
|
|
424
|
+
suggest(input_req: SearchSuggestionsRequest): Promise<SearchSuggestionsResponseAfterURLCreator & {
|
|
425
|
+
failed?: true;
|
|
426
|
+
}>;
|
|
427
|
+
query(input_req: SearchRequest): Promise<SearchResponseAfterURLCreator & {
|
|
428
|
+
failed?: true;
|
|
429
|
+
}>;
|
|
430
|
+
list(input_req: ProductListingRequest): Promise<ProductListingResponseAfterURLCreator & {
|
|
431
|
+
failed?: true;
|
|
432
|
+
}>;
|
|
433
|
+
get_recommended<T extends Display>(input_req: BaseSearchRequest): Promise<{
|
|
434
|
+
displays: T[];
|
|
435
|
+
} & {
|
|
436
|
+
failed?: true | undefined;
|
|
437
|
+
}>;
|
|
424
438
|
}
|
|
425
439
|
/**
|
|
426
440
|
* Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
|
|
427
441
|
* @returns A cleanup function to manually re-enable scrolling.
|
|
428
442
|
*/
|
|
429
443
|
export function disable_scrolling(): () => void;
|
|
430
|
-
export const CategoryTitle: ({
|
|
431
|
-
|
|
432
|
-
|
|
444
|
+
export const CategoryTitle: ({
|
|
445
|
+
category_title_,
|
|
446
|
+
product_count_
|
|
447
|
+
}: {
|
|
448
|
+
category_title_: Accessor<string | undefined>;
|
|
449
|
+
product_count_: JSX.Element;
|
|
433
450
|
}) => JSX.Element;
|
|
434
451
|
/**
|
|
435
452
|
* Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
|
|
436
453
|
* Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
|
|
437
454
|
* If you see “ResizeObserver loop limit exceeded”, this is probably doing it. More context here: https://depictaiworkspace.slack.com/archives/C02KVDZ8YHZ/p1667315647758829
|
|
438
455
|
*/
|
|
439
|
-
export const embedded_num_products: ({
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
456
|
+
export const embedded_num_products: ({
|
|
457
|
+
make_product_count_,
|
|
458
|
+
set_observed_results_filters_elements_,
|
|
459
|
+
is_slim_,
|
|
460
|
+
sort_and_filter_element_,
|
|
461
|
+
extra_sort_and_filter_args_
|
|
462
|
+
}: {
|
|
463
|
+
make_product_count_: () => JSX.Element;
|
|
464
|
+
set_observed_results_filters_elements_: Setter<JSX.Element>;
|
|
465
|
+
sort_and_filter_element_: Accessor<HTMLDivElement | undefined>;
|
|
466
|
+
is_slim_: Accessor<boolean>;
|
|
467
|
+
extra_sort_and_filter_args_: {
|
|
468
|
+
get_extra_sorting_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
|
|
469
|
+
get_extra_filters_button_?: ((extra_button: JSX.Element) => unknown) | undefined;
|
|
470
|
+
sort_button_width_?: Accessor<number | undefined> | undefined;
|
|
471
|
+
filter_button_width_?: Accessor<number | undefined> | undefined;
|
|
472
|
+
};
|
|
450
473
|
}) => {
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
474
|
+
only_show_filters_opener_: Accessor<boolean>;
|
|
475
|
+
middle_elements_: Accessor<JSX.Element>;
|
|
476
|
+
on_filters_constructed_: () => void;
|
|
454
477
|
};
|
|
455
478
|
export type SDKColsAtSize = [number, number?][];
|
|
456
479
|
/**
|
|
@@ -460,60 +483,69 @@ export type SDKColsAtSize = [number, number?][];
|
|
|
460
483
|
*/
|
|
461
484
|
export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
|
|
462
485
|
type GeneralCategoryListingOptions = {
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
486
|
+
market: string;
|
|
487
|
+
merchant: string;
|
|
488
|
+
localization: category_i18n;
|
|
489
|
+
unique_instance_key_for_state?: string;
|
|
490
|
+
on_navigation?: OnNavigation;
|
|
491
|
+
query_id_state_key?: string;
|
|
469
492
|
};
|
|
470
493
|
type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
|
|
471
|
-
|
|
494
|
+
api: DepictAPI<InputDisplay, OutputDisplay>;
|
|
472
495
|
} & {
|
|
473
|
-
|
|
496
|
+
page_url_creator?: never;
|
|
474
497
|
};
|
|
475
498
|
type CategoryConstructorOptionsWithoutApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
|
|
476
|
-
|
|
499
|
+
api?: never;
|
|
477
500
|
} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
478
|
-
|
|
501
|
+
page_url_creator?: PageURLCreator<InputDisplay, OutputDisplay>;
|
|
479
502
|
} : {
|
|
480
|
-
|
|
503
|
+
page_url_creator: PageURLCreator<InputDisplay, OutputDisplay>;
|
|
481
504
|
} : {
|
|
482
|
-
|
|
505
|
+
page_url_creator?: never;
|
|
483
506
|
});
|
|
484
507
|
type DepictCategoryConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = CategoryConstructorOptionsWithApi<InputDisplay, OutputDisplay> | CategoryConstructorOptionsWithoutApi<InputDisplay, OutputDisplay>;
|
|
485
508
|
export class DepictCategory<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
509
|
+
#private;
|
|
510
|
+
get localization(): category_i18n;
|
|
511
|
+
set localization(locale_obj: category_i18n);
|
|
512
|
+
get category_id(): string;
|
|
513
|
+
set category_id(id: string);
|
|
514
|
+
get merchant(): string;
|
|
515
|
+
set merchant(merchant: string);
|
|
516
|
+
get market(): string;
|
|
517
|
+
set market(market: string);
|
|
518
|
+
get listing_type(): ListingType | undefined;
|
|
519
|
+
set listing_type(listing_type: ListingType | undefined);
|
|
520
|
+
get on_navigation(): OnNavigation;
|
|
521
|
+
set on_navigation(new_function: OnNavigation);
|
|
522
|
+
constructor({
|
|
523
|
+
api,
|
|
524
|
+
on_navigation,
|
|
525
|
+
page_url_creator,
|
|
526
|
+
unique_instance_key_for_state,
|
|
527
|
+
query_id_state_key,
|
|
528
|
+
...props_on_class
|
|
529
|
+
}: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
|
|
500
530
|
}
|
|
501
531
|
export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
show_breadcrumbs?: boolean;
|
|
510
|
-
category_title: typeof CategoryTitle | typeof embedded_num_products;
|
|
532
|
+
depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
|
|
533
|
+
grid_spacing: SDKGridSpacing;
|
|
534
|
+
cols_at_size: SDKColsAtSize;
|
|
535
|
+
product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
|
|
536
|
+
show_quicklinks?: boolean;
|
|
537
|
+
show_breadcrumbs?: boolean;
|
|
538
|
+
category_title: typeof CategoryTitle | typeof embedded_num_products;
|
|
511
539
|
}): import("@depict-ai/utilishared").Node_Array;
|
|
512
|
-
export function BreadCrumbs<T extends Display>({
|
|
513
|
-
|
|
540
|
+
export function BreadCrumbs<T extends Display>({
|
|
541
|
+
depict_category
|
|
542
|
+
}: {
|
|
543
|
+
depict_category: DepictCategory<T>;
|
|
514
544
|
}): HTMLElement;
|
|
515
|
-
export function QuickLinks<T extends Display>({
|
|
516
|
-
|
|
545
|
+
export function QuickLinks<T extends Display>({
|
|
546
|
+
depict_category
|
|
547
|
+
}: {
|
|
548
|
+
depict_category: DepictCategory<T>;
|
|
517
549
|
}): HTMLElement;
|
|
518
550
|
/**
|
|
519
551
|
* Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
|
|
@@ -523,15 +555,15 @@ export function QuickLinks<T extends Display>({ depict_category }: {
|
|
|
523
555
|
*/
|
|
524
556
|
export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
|
|
525
557
|
type ImagePlaceholderBaseOptions = {
|
|
526
|
-
|
|
527
|
-
|
|
558
|
+
style?: JSX.CSSProperties;
|
|
559
|
+
class?: string;
|
|
528
560
|
};
|
|
529
561
|
type ImagePlaceholderBlockOptions = {
|
|
530
|
-
|
|
531
|
-
|
|
562
|
+
width: string;
|
|
563
|
+
height: string;
|
|
532
564
|
};
|
|
533
565
|
type ImagePlaceholderImageOptions = {
|
|
534
|
-
|
|
566
|
+
aspectRatio: number;
|
|
535
567
|
};
|
|
536
568
|
/**
|
|
537
569
|
* A placeholder that can be used instead of an image or other block of content while it's loading.
|
|
@@ -555,7 +587,7 @@ export function DefaultInstantCardPlaceholder(): HTMLDivElement;
|
|
|
555
587
|
*/
|
|
556
588
|
export function align_field(modal_body_style: Signal<JSX.CSSProperties>, input_field: HTMLElement, width_transformer?: (arg0: number) => number, includeScroll?: boolean, one_axies_only?: "top" | "left"): () => void;
|
|
557
589
|
interface Styles {
|
|
558
|
-
|
|
590
|
+
[selector: string]: JSX.CSSProperties;
|
|
559
591
|
}
|
|
560
592
|
export const styles_to_valid_css_string: (styles: Styles) => string;
|
|
561
593
|
/** A function that renders category suggestion cards. Set to false to disable category suggestions. */
|
|
@@ -566,187 +598,194 @@ export type RenderCategorySuggestion = (category_suggestion: Accessor<CategorySu
|
|
|
566
598
|
* @returns
|
|
567
599
|
*/
|
|
568
600
|
export function connect_search_field_height_to_aligner_height(aligner: HTMLElement): {
|
|
569
|
-
|
|
601
|
+
cleanup: () => void;
|
|
570
602
|
};
|
|
571
603
|
type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
604
|
+
search_query_url_param_name?: string;
|
|
605
|
+
market: string;
|
|
606
|
+
merchant: string;
|
|
607
|
+
localization: search_i18n;
|
|
608
|
+
on_navigation?: OnNavigation;
|
|
609
|
+
url_transformer?: (url_object: URL) => unknown;
|
|
610
|
+
enable_category_suggestions?: boolean;
|
|
611
|
+
unique_instance_key_for_state?: string;
|
|
612
|
+
disable_scrolling_during_modal?: boolean;
|
|
613
|
+
bottom_distance_under_modal?: Accessor<number | undefined>;
|
|
614
|
+
render_instant_card?: InstantCard<OutputDisplay extends ModernDisplay ? OutputDisplay : InputDisplay>;
|
|
583
615
|
};
|
|
584
616
|
type ConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
|
|
585
|
-
|
|
617
|
+
api: DepictAPI<InputDisplay, OutputDisplay>;
|
|
586
618
|
} & {
|
|
587
|
-
|
|
619
|
+
page_url_creator?: never;
|
|
588
620
|
};
|
|
589
621
|
type ConstructorOptionsWithoutAPI<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralConstructorOptions<InputDisplay, OutputDisplay> & {
|
|
590
|
-
|
|
622
|
+
api?: never;
|
|
591
623
|
} & SomethingTakingAPageURLCreator<InputDisplay, OutputDisplay>;
|
|
592
624
|
type ConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay> = ConstructorOptionsWithApi<InputDisplay, OutputDisplay> | ConstructorOptionsWithoutAPI<InputDisplay, OutputDisplay>;
|
|
593
|
-
export type OpenModalArguments = [
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
},
|
|
601
|
-
on_dispose?: VoidFunction
|
|
602
|
-
];
|
|
625
|
+
export type OpenModalArguments = [options_for_modal?: {
|
|
626
|
+
style_props_?: Signal<JSX.CSSProperties>;
|
|
627
|
+
closing_animation_?: () => Promise<any>;
|
|
628
|
+
class_list_?: Accessor<Record<string, boolean>>;
|
|
629
|
+
selected_text_range_?: readonly [number | null, number | null] | [number | null, number | null];
|
|
630
|
+
dont_sync_search_field_value_except_on_submit_?: boolean;
|
|
631
|
+
}, on_dispose?: VoidFunction];
|
|
603
632
|
export const get_search_query_updating_blocked_signal: (depict_search: DepictSearch<any>) => Signal<boolean> | undefined;
|
|
604
633
|
export class DepictSearch<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never = InputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<InputDisplay> : never> {
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
634
|
+
#private;
|
|
635
|
+
constructor({
|
|
636
|
+
unique_instance_key_for_state,
|
|
637
|
+
search_query_url_param_name: search_query_url_param_name_,
|
|
638
|
+
url_transformer,
|
|
639
|
+
on_navigation,
|
|
640
|
+
enable_category_suggestions,
|
|
641
|
+
page_url_creator,
|
|
642
|
+
disable_scrolling_during_modal,
|
|
643
|
+
api,
|
|
644
|
+
bottom_distance_under_modal,
|
|
645
|
+
render_instant_card,
|
|
646
|
+
...props_on_class
|
|
647
|
+
}: ConstructorOptions<InputDisplay, OutputDisplay>);
|
|
648
|
+
get on_navigation(): OnNavigation;
|
|
649
|
+
set on_navigation(new_function: OnNavigation);
|
|
650
|
+
get localization(): search_i18n;
|
|
651
|
+
set localization(locale_obj: search_i18n);
|
|
652
|
+
get modal_open(): OpenModalArguments | boolean;
|
|
653
|
+
set modal_open(new_state: OpenModalArguments | boolean);
|
|
654
|
+
get merchant(): string;
|
|
655
|
+
set merchant(tenant: string);
|
|
656
|
+
get market(): string;
|
|
657
|
+
set market(market: string);
|
|
658
|
+
fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
|
|
618
659
|
}
|
|
619
660
|
export function SearchPage<OriginalDisplay extends Display, TransformedDisplay extends never | ModernDisplay>(props: {
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
recommendations_cols_at_size?: SDKColsAtSize;
|
|
632
|
-
};
|
|
661
|
+
depict_search: DepictSearch<OriginalDisplay, TransformedDisplay>;
|
|
662
|
+
include_input_field?: boolean | {
|
|
663
|
+
on_open_?: VoidFunction;
|
|
664
|
+
on_close_?: VoidFunction;
|
|
665
|
+
};
|
|
666
|
+
grid_spacing: SDKGridSpacing;
|
|
667
|
+
cols_at_size: SDKColsAtSize;
|
|
668
|
+
product_card_template: ProductCardTemplate<[TransformedDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<TransformedDisplay>>;
|
|
669
|
+
extra_depict_options?: {
|
|
670
|
+
recommendations_cols_at_size?: SDKColsAtSize;
|
|
671
|
+
};
|
|
633
672
|
}): import("@depict-ai/utilishared").Node_Array;
|
|
634
673
|
interface SearchFieldParams {
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
674
|
+
depict_search: DepictSearch<any>;
|
|
675
|
+
modal_dispose_handler?: VoidFunction;
|
|
676
|
+
click_handler?: (this: HTMLDivElement, ev: MouseEvent) => any;
|
|
677
|
+
aligner_ref?: HTMLElement | null;
|
|
639
678
|
}
|
|
640
679
|
export function SearchField(props: SearchFieldParams): import("@depict-ai/utilishared").Node_Array;
|
|
641
680
|
export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformedDisplay extends ModernDisplay | never> = {
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
681
|
+
/**
|
|
682
|
+
* The merchant to use for the search.
|
|
683
|
+
* @example "YOUR_MERCHANT", "stronger"
|
|
684
|
+
*/
|
|
685
|
+
merchant: string;
|
|
686
|
+
/**
|
|
687
|
+
* The market to use for the search.
|
|
688
|
+
* @example "YOUR_MARKET", "no", "en-de"
|
|
689
|
+
*/
|
|
690
|
+
market: string;
|
|
691
|
+
/**
|
|
692
|
+
* Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
|
|
693
|
+
*/
|
|
694
|
+
userId?: string;
|
|
695
|
+
/**
|
|
696
|
+
* Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
|
|
697
|
+
*/
|
|
698
|
+
sessionId?: string;
|
|
699
|
+
/**
|
|
700
|
+
* Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
|
|
701
|
+
*/
|
|
702
|
+
metaData?: Record<string, string>;
|
|
703
|
+
/**
|
|
704
|
+
* You can't have more than one instance of the same provider on the same page, unless you specify a unique instance key for each one.
|
|
705
|
+
* This is because there's state in the URL and history.state and the state of the different instances would collide.
|
|
706
|
+
* By setting this property, you can specify a unique key for each instance, so that the state of each instance is kept separate.
|
|
707
|
+
* We recommend to just use an incrementing number for this, e.g. "1", "2", "3", ...
|
|
708
|
+
*/
|
|
709
|
+
uniqueInstanceKeyForState?: string;
|
|
671
710
|
} & (InputDisplay extends ModernDisplay ? "page_url" extends keyof InputDisplay["variant_displays"][number] ? {
|
|
672
|
-
|
|
711
|
+
pageURLCreator?: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
|
|
673
712
|
} : {
|
|
674
|
-
|
|
713
|
+
pageURLCreator: PageURLCreator<InputDisplay, PossibleTransformedDisplay>;
|
|
675
714
|
} : {
|
|
676
|
-
|
|
715
|
+
pageURLCreator?: never;
|
|
677
716
|
});
|
|
678
717
|
export type BaseSearchProviderConfig = {
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
718
|
+
/**
|
|
719
|
+
* The path to the search page.
|
|
720
|
+
* @example "/search", "/sok"
|
|
721
|
+
*/
|
|
722
|
+
searchPagePath: string;
|
|
723
|
+
/**
|
|
724
|
+
* The name of the url parameter that will be used for the search query.
|
|
725
|
+
* @example "q", "search_query", "query"
|
|
726
|
+
* @default "query"
|
|
727
|
+
*/
|
|
728
|
+
urlParamName?: string;
|
|
729
|
+
/**
|
|
730
|
+
* Whether to enable category suggestions in the search modal and search page.
|
|
731
|
+
* @default false
|
|
732
|
+
*/
|
|
733
|
+
enableCategorySuggestions?: boolean;
|
|
695
734
|
};
|
|
696
735
|
export interface BaseProductListingConfig {
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
736
|
+
/**
|
|
737
|
+
* How many columns to show at each media size.
|
|
738
|
+
* @default
|
|
739
|
+
* [[2, 901], [3, 1024], [4]]
|
|
740
|
+
* @example
|
|
741
|
+
* [[2, 901], [3, 1024], [4]]
|
|
742
|
+
* means 2 columns at sizes up to 901px, 3 columns at sizes up to 1024px and after that 4 columns at any viewport size.
|
|
743
|
+
*/
|
|
744
|
+
columnsAtSize?: SDKColsAtSize;
|
|
745
|
+
/**
|
|
746
|
+
* The spacing between products.
|
|
747
|
+
* @default "2%"
|
|
748
|
+
* @example
|
|
749
|
+
* "2%", "10px", "1rem", {horizontal: "1%", vertical: "5px"}
|
|
750
|
+
*/
|
|
751
|
+
gridSpacing?: SDKGridSpacing;
|
|
713
752
|
}
|
|
714
753
|
export interface BaseSearchPageConfig extends BaseProductListingConfig {
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
754
|
+
/**
|
|
755
|
+
* Whether to show the search input field in the search page.
|
|
756
|
+
* @default true
|
|
757
|
+
*/
|
|
758
|
+
includeInputField?: boolean;
|
|
720
759
|
}
|
|
721
760
|
export interface BaseCategoryPageConfig extends BaseProductListingConfig {
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
761
|
+
/**
|
|
762
|
+
* Whether to show the breadcrumbs in the category page.
|
|
763
|
+
* @default true
|
|
764
|
+
*/
|
|
765
|
+
showBreadcrumbs?: boolean;
|
|
766
|
+
/**
|
|
767
|
+
* Whether to show the quicklinks in the category page.
|
|
768
|
+
* @default true
|
|
769
|
+
*/
|
|
770
|
+
showQuicklinks?: boolean;
|
|
732
771
|
}
|
|
733
772
|
type CenteredLocation = {
|
|
734
|
-
|
|
773
|
+
location?: "centered";
|
|
735
774
|
};
|
|
736
775
|
type AlignedLocation = {
|
|
737
|
-
|
|
738
|
-
|
|
776
|
+
location: "aligned";
|
|
777
|
+
element: HTMLElement;
|
|
739
778
|
};
|
|
740
779
|
/**
|
|
741
780
|
* How the modal should be opened.
|
|
742
781
|
*/
|
|
743
782
|
type ModalLocation = AlignedLocation | CenteredLocation;
|
|
744
783
|
type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never> = ModalLocation & {
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
784
|
+
search: DepictSearch<OriginalDisplay, OutputDisplay>;
|
|
785
|
+
/**
|
|
786
|
+
* If true, the search field in the modal opened will be empty and de-coupled from the other SearchFields.
|
|
787
|
+
*/
|
|
788
|
+
makesNewSearch?: boolean;
|
|
750
789
|
};
|
|
751
790
|
/**
|
|
752
791
|
* Open the modal with support for alignment.
|
|
@@ -755,11 +794,11 @@ type OpenModalParams<OriginalDisplay extends Display, OutputDisplay extends Mode
|
|
|
755
794
|
export const open_modal_with_alignment: <OriginalDisplay extends Display, OutputDisplay extends ModernDisplay>(openModalParams: OpenModalParams<OriginalDisplay, OutputDisplay>) => void;
|
|
756
795
|
export function open_search_with_shift_slash(open_search: VoidFunction): () => void;
|
|
757
796
|
export interface PageReplacer {
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
797
|
+
readonly render_: () => Node_Array;
|
|
798
|
+
readonly is_page_: (url: URL) => boolean;
|
|
799
|
+
readonly title_?: string;
|
|
800
|
+
readonly selector_: string;
|
|
801
|
+
readonly append_instead_of_replace_?: boolean;
|
|
763
802
|
}
|
|
764
803
|
/**
|
|
765
804
|
* PageReplacer is a class that can be used to layer an SPA (single page application) on top of a non-SPA, for certain pages.
|
|
@@ -773,18 +812,21 @@ export interface PageReplacer {
|
|
|
773
812
|
* @param append_instead_of_replace_ If true, the replacement element will be appended to the element that is found by selector_ instead of replacing it. This is useful if one doesn't actually want it to replace the element because one has other logic.
|
|
774
813
|
*/
|
|
775
814
|
export class PageReplacer extends EventTarget {
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
815
|
+
#private;
|
|
816
|
+
/**
|
|
817
|
+
* Returns if the "replacement page" is currently open
|
|
818
|
+
*/
|
|
819
|
+
get open_(): boolean;
|
|
820
|
+
/**
|
|
821
|
+
* Stops listening to URL changes and closes the page (if it is currently open)
|
|
822
|
+
*/
|
|
823
|
+
destroy_(): void;
|
|
824
|
+
constructor({
|
|
825
|
+
is_spa_,
|
|
826
|
+
...options
|
|
827
|
+
}: Omit<PageReplacer, "destroy_" | "addEventListener" | "removeEventListener" | "dispatchEvent" | "open_"> & {
|
|
828
|
+
is_spa_?: boolean;
|
|
829
|
+
});
|
|
788
830
|
}
|
|
789
831
|
/**
|
|
790
832
|
* makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
|
|
@@ -792,8 +834,11 @@ export class PageReplacer extends EventTarget {
|
|
|
792
834
|
export function setup_fast_leave(pr: PageReplacer): void;
|
|
793
835
|
export const defaultColsAtSize: SDKColsAtSize;
|
|
794
836
|
export const defaultGridSpacing = "2%";
|
|
795
|
-
export const defaultCategoryTitlePlugin: ({
|
|
796
|
-
|
|
797
|
-
|
|
837
|
+
export const defaultCategoryTitlePlugin: ({
|
|
838
|
+
category_title_,
|
|
839
|
+
product_count_
|
|
840
|
+
}: {
|
|
841
|
+
category_title_: import("solid-js").Accessor<string | undefined>;
|
|
842
|
+
product_count_: import("solid-js").JSX.Element;
|
|
798
843
|
}) => import("solid-js").JSX.Element;
|
|
799
|
-
export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
|
|
844
|
+
export type { SearchFilter } from "@depict-ai/types/api/SearchRequest";
|